<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Template Literals en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-editor { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    input { width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 6px 0 14px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .tarjeta-estudiante {
      background: linear-gradient(135deg, #0284c7, #4f46e5);
      color: white;
      padding: 18px;
      border-radius: 10px;
      margin-top: 15px;
    }
  </style>
</head>
<body>

  <div class="card-editor">
    <h3 style="margin-top: 0; color: #0f172a;">Carnet de Estudiante Dinámico</h3>

    <label for="nombre">Nombre del Alumno:</label>
    <input type="text" id="nombre" value="Juan Martínez">

    <label for="curso">Especialidad:</label>
    <input type="text" id="curso" value="Fullstack JavaScript Developer">

    <button onclick="generarCarnet()" style="background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%;">
      Generar Carnet con Template Literals
    </button>

    <div id="contenedor-carnet"></div>

    <script>
      function generarCarnet() {
        const nombre = document.getElementById('nombre').value.trim();
        const curso = document.getElementById('curso').value.trim();
        const anio = 2026;

        // Construcción limpia y multilínea con Template Literal (backticks):
        const carnetHtml = `
          <div class="tarjeta-estudiante">
            <span style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9;">
              Kilopolis Academia · Carnet Oficial
            </span>
            <h2 style="margin: 8px 0 4px 0;">${nombre.toUpperCase()}</h2>
            <p style="margin: 0; font-size: 0.95rem;">${curso}</p>
            <div style="margin-top: 12px; font-size: 0.8rem; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 8px;">
              Cohorte: ${anio} &bull; Estado: Activo
            </div>
          </div>
        `;

        document.getElementById('contenedor-carnet').innerHTML = carnetHtml;
      }

      // Generar al cargar
      generarCarnet();
    </script>
  </div>

</body>
</html>