andaquenosabesna/public/invitados.html

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow, noarchive">
<title>Ficha del invitado · Anda Que No Sabes Ná</title>
<meta name="theme-color" content="#06080d">
<link rel="icon" href="img/avatar.jpg">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="top">
  <a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
</header>

<main class="legal contact guest">
  <h1>Ficha del <em>invitado</em></h1>
  <p id="hola" class="lead-c" hidden></p>
  <p id="malo" class="status err" hidden>Este enlace no es válido o ha caducado. Cuéntanos qué ha pasado desde el <a href="contacto.html">formulario de contacto</a> y te mandamos uno nuevo.</p>
  <p id="cita" class="cita" hidden></p>

  <div id="elige-dia" hidden>
    <fieldset id="dias-fs" class="sec">
      <legend>¿Qué día te viene mejor?</legend>
    </fieldset>
    <p id="elige-err" class="status err" hidden>Selecciona un día para continuar.</p>
    <div class="nav"><button id="elige-ok" type="button" class="btn primary">Continuar →</button></div>
  </div>

  <p id="intro" class="lead-c" hidden>Queremos conocerte un poco antes de darle al REC. No hace falta que prepares respuestas perfectas: esto nos sirve para encontrar buenas historias, preguntas interesantes y, sobre todo, temas sobre los que merezca la pena hablar.</p>

  <form id="g" class="form" novalidate hidden data-ok="¡Gracias! Hemos recibido tu ficha y te hemos enviado un correo con los datos de la grabación. Si no lo ves en unos minutos, mira en la carpeta de spam y añade contacto@andaquenosabesna.com a tus contactos.">
  <fieldset class="sec">
    <legend>👤 Tú</legend>
    <label><span>Nombre y cómo prefieres que te presentemos <span class="req" title="Obligatoria">*</span></span>
      <input name="q01" type="text" maxlength="300" required>
    </label>
    <label><span>¿A qué te dedicas actualmente? <span class="req" title="Obligatoria">*</span></span>
      <textarea name="q02" rows="4" maxlength="3000" required></textarea>
    </label>
    <label><span>¿Cuál es tu proyecto, empresa o actividad principal?</span>
      <textarea name="q03" rows="4" maxlength="3000"></textarea>
    </label>
    <label><span>LinkedIn, web o cualquier enlace que nos ayude a conocerte mejor</span>
      <input name="q04" type="text" maxlength="300">
    </label>
    <label><span>Tus redes sociales que quieras que mencionemos o utilicemos para promocionar el episodio</span>
      <textarea name="q05" rows="4" maxlength="3000"></textarea>
    </label>
      <label><span>Tu correo electrónico <span class="req" title="Obligatoria">*</span></span><small>Te enviaremos un recordatorio de tu cita y así podemos responderte.</small>
      <input name="email" type="email" autocomplete="email" maxlength="200" required>
    </label>
    <label><span>Tu teléfono móvil <span class="req" title="Obligatoria">*</span></span><small>Solo para contactarte el día de la grabación si surge algún imprevisto.</small>
      <input name="tel" type="tel" autocomplete="tel" inputmode="tel" maxlength="20" required>
    </label>
    <div class="nav"><button type="button" class="btn primary next">Siguiente →</button></div>
  </fieldset>
  <fieldset class="sec">
    <legend>🎙️ Para conocerte un poco mejor</legend>
    <label><span>Si tuvieras que contarnos tu historia en dos minutos, ¿por dónde empezarías? <span class="req" title="Obligatoria">*</span></span>
      <textarea name="q06" rows="4" maxlength="3000" required></textarea>
    </label>
    <label><span>¿Qué tema podrías estar hablando durante horas sin aburrirte? <span class="req" title="Obligatoria">*</span></span>
      <textarea name="q07" rows="4" maxlength="3000" required></textarea>
    </label>
    <label><span>¿Hay alguna experiencia, proyecto, fracaso, éxito o anécdota que te parezca especialmente buena para contar en el podcast? <span class="req" title="Obligatoria">*</span></span>
      <textarea name="q08" rows="4" maxlength="3000" required></textarea>
    </label>
    <label><span>¿Qué idea, mito o tópico de tu sector te gustaría desmontar?</span>
      <textarea name="q09" rows="4" maxlength="3000"></textarea>
    </label>
    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button type="button" class="btn primary next">Siguiente →</button></div>
  </fieldset>
  <fieldset class="sec">
    <legend>🔥 Vamos a meternos en harina</legend>
    <p class="note">Contestar en esta sección es opcional</p>
    <label><span>¿Hay alguna opinión tuya sobre tu sector que pueda generar debate?</span>
      <textarea name="q10" rows="4" maxlength="3000"></textarea>
    </label>
    <label><span>¿Qué pregunta te hacen siempre y estás cansado/a de responder?</span>
      <textarea name="q11" rows="4" maxlength="3000"></textarea>
    </label>
    <label><span>¿Hay algo que normalmente no se cuenta cuando se habla de tu profesión, sector o trayectoria y que crees que deberíamos contar?</span>
      <textarea name="q12" rows="4" maxlength="3000"></textarea>
    </label>
    <label><span>Si pudiéramos conseguir que después de escucharte alguien cambiara de opinión sobre una cosa, ¿qué te gustaría que fuera?</span>
      <textarea name="q13" rows="4" maxlength="3000"></textarea>
    </label>
    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button type="button" class="btn primary next">Siguiente →</button></div>
  </fieldset>
  <fieldset class="sec">
    <legend>🚧 Territorio delicado</legend>
    <p class="note">No hace falta justificarlo. Queremos saber dónde están tus límites antes de empezar.</p>
    <label><span>¿Hay algún tema que prefieras que no toquemos? <span class="req" title="Obligatoria">*</span></span>
      <textarea name="q14" rows="4" maxlength="3000" required></textarea>
    </label>
    <label><span>¿Hay alguna persona, empresa, experiencia o asunto sobre el que prefieras que no hagamos preguntas?</span>
      <textarea name="q15" rows="4" maxlength="3000"></textarea>
    </label>
    <label><span>Y... ¿Hay algún otro tema de tu vida que quieras contarnos?</span>
      <textarea name="q16" rows="4" maxlength="3000"></textarea>
    </label>
    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button type="button" class="btn primary next">Siguiente →</button></div>
  </fieldset>
  <fieldset class="sec">
    <legend>📣 Y para terminar...</legend>
    <p class="note">Contestar en esta sección es opcional</p>
    <label><span>¿Hay algún proyecto, libro, producto, evento o iniciativa que tengas ahora mismo y que te gustaría dar a conocer durante la entrevista?</span>
      <textarea name="q17" rows="4" maxlength="3000"></textarea>
    </label>
    <label><span>¿Hay alguna pregunta que te encantaría que te hiciéramos y que normalmente nadie te hace?</span>
      <textarea name="q18" rows="4" maxlength="3000"></textarea>
    </label>
    <label><span>¿Hay alguna historia que te gustaría contar sí o sí?</span>
      <textarea name="q19" rows="4" maxlength="3000"></textarea>
    </label>
    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button type="button" class="btn primary next">Siguiente →</button></div>
  </fieldset>
  <fieldset class="sec">
    <legend>Antes de enviar</legend>
    <p class="note">Este podcast se realiza de forma altruista y colaborativa.</p>
    <div class="trap" aria-hidden="true"><label>No rellenes este campo <input name="web" type="text" tabindex="-1" autocomplete="off"></label></div>
    <label class="check">
      <input name="consent" type="checkbox" required>
      <span>He leído y acepto las <a href="terminos.html#participacion" target="_blank" rel="noopener">condiciones de participación</a> descritas. <span class="req">*</span></span>
    </label>
    <label class="check">
      <input name="privacy" type="checkbox" required>
      <span>He leído la <a href="privacidad.html" target="_blank" rel="noopener">política de privacidad</a> y acepto que usen estos datos para preparar el episodio. <span class="req">*</span></span>
    </label>
    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button class="btn primary" type="submit">Enviar mi ficha</button></div>
  </fieldset>
    <p id="paso" class="paso" aria-live="polite"></p>
    <p id="st" class="status" role="status" aria-live="polite"></p>
    <p class="note">Tus respuestas se guardan en este navegador mientras escribes, por si cierras la página. Se borran al enviarlas.</p>
  </form>
</main>

<script src="invitados.js"></script>
</body>
</html>