Miniaturas HD, formulario de patrocinadores y sección Lo más visto

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TSyR5Zw5eGj6oPTRVjvP1b

public/patrocinadores.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Patrocinadores · Anda Que No Sabes Ná</title>
+<meta name="description" content="¿Quieres que tu marca suene en Anda Que No Sabes Ná? Cuéntanos qué tienes en mente.">
+<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>
+  <nav aria-label="Principal"><a href="/">Inicio</a><a href="contacto.html">Contacto</a></nav>
+</header>
+
+<main class="legal contact">
+  <h1>¿Quieres <em>anunciarte</em> en el programa?</h1>
+  <p class="lead-c">Si tu marca quiere sonar en Anda Que No Sabes Ná, escríbenos. Cuéntanos quién eres, qué tienes en mente y qué te interesa: una mención, patrocinar episodios, una colaboración… Lo hablamos con calma.</p>
+
+  <form id="f" class="form" novalidate data-endpoint="/api/patrocinio" data-mail="andaquenosabesnada@gmail.com" data-ok="¡Gracias! Hemos recibido tu propuesta y te escribiremos pronto.">
+    <label>Empresa o marca
+      <input name="empresa" type="text" autocomplete="organization" maxlength="120" required>
+    </label>
+    <label>Tu nombre
+      <input name="nombre" type="text" autocomplete="name" maxlength="100" required>
+    </label>
+    <label>Correo electrónico
+      <input name="email" type="email" autocomplete="email" maxlength="200" required>
+    </label>
+    <label>Web (opcional)
+      <input name="sitio" type="text" inputmode="url" maxlength="200" placeholder="https://" autocomplete="url">
+    </label>
+    <label>¿Qué te interesa?
+      <select name="tipo">
+        <option value="mencion">Anunciarme / que me mencionéis en el programa</option>
+        <option value="patrocinio">Patrocinar episodios o una temporada</option>
+        <option value="colab">Colaboración o canje</option>
+        <option value="otro">Otra propuesta</option>
+      </select>
+    </label>
+    <label>Cuéntanos tu propuesta
+      <textarea name="mensaje" rows="6" maxlength="3000" required placeholder="Qué hacéis, a quién queréis llegar, qué tenéis en mente…"></textarea>
+    </label>
+    <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 la <a href="privacidad.html" target="_blank" rel="noopener">política de privacidad</a> y acepto que usen mis datos para responderme.</span>
+    </label>
+    <button class="btn primary" type="submit">Enviar propuesta</button>
+    <p id="st" class="status" role="status" aria-live="polite"></p>
+  </form>
+  <noscript><p>Necesitas JavaScript para usar el formulario. Mientras tanto, escríbenos a <a href="mailto:andaquenosabesnada@gmail.com">andaquenosabesnada@gmail.com</a>.</p></noscript>
+</main>
+
+<script src="form.js"></script>
+</body>
+</html>