🔬 Laboratorio Digital — Repositorio de Artefactos

Repositorio de artefactos educativos interactivos: simuladores, calculadoras, juegos y herramientas pedagógicas en HTML.

📁 Estructura del repositorio

/
├── index.html          ← Página principal (galería de artefactos)
├── README.md
└── artefactos/         ← Carpeta con todos los artefactos HTML
    ├── calculadora-calorica.html
    ├── simulador-mcu.html
    └── ...

🚀 Uso en GitHub Pages

1. Ve a Settings → Pages en tu repositorio.
2. En Branch, selecciona main y carpeta / (raíz).
3. Guarda. En unos minutos tu repositorio estará disponible en: https://tu-usuario.github.io/nombre-repo/

➕ Agregar un nuevo artefacto

Opción A — Desde la interfaz web

1. Abre index.html en el navegador.
2. Haz clic en Agregar artefacto (botón flotante).
3. Completa el formulario. Esto genera la tarjeta visualmente.
4. Copia el código HTML generado y pégalo en index.html antes del placeholder #addPlaceholder.

Opción B — Editando index.html directamente

Copia este bloque dentro de <div class="cards"> y edítalo:

<a class="card" href="artefactos/mi-artefacto.html"
   style="--card-accent:#00d4ff; --card-bg:rgba(0,212,255,0.08);"
   data-tags="simulador">
  <div class="card-top">
    <div class="card-icon">🔬</div>
    <span class="card-tag">Simulador</span>
  </div>
  <div class="card-title">Nombre del artefacto</div>
  <div class="card-desc">Descripción breve del artefacto.</div>
  <div class="card-footer">
    <span>Asignatura · Nivel</span>
    <span class="card-link">Abrir →</span>
  </div>
</a>

Colores disponibles por categoría

Categoría	--card-accent	--card-bg
Simulador	#7c3aed	rgba(124,58,237,0.08)
Calculadora	#00d4ff	rgba(0,212,255,0.08)
Juego	#f59e0b	rgba(245,158,11,0.08)
Herramienta	#10b981	rgba(16,185,129,0.08)
Visualizador	#f43f5e	rgba(244,63,94,0.08)

🏷️ Categorías y data-tags

El atributo data-tags permite filtrar las tarjetas. Usa uno o más valores separados por espacio:

• simulador
• calculadora
• juego
• herramienta
• visualizador

Ejemplo con dos etiquetas: data-tags="simulador juego"

📄 Licencia

Uso educativo libre. Atribución apreciada.