podcast/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Learn &amp; Prep — Spanish B1 News Podcast</title>
  <meta name="description" content="Learn Spanish at B1 level with a daily 10-minute podcast built from today's news. Three key words, the news and a clear summary — delivered to your Telegram." />
  <meta name="theme-color" content="#0e1116" />

  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='22' fill='%230e1116'/%3E%3Cpath d='M50 24a10 10 0 0 1 10 10v16a10 10 0 0 1-20 0V34a10 10 0 0 1 10-10z' fill='%23ff5c39'/%3E%3Cpath d='M32 48a18 18 0 0 0 36 0' fill='none' stroke='%23ffb703' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M50 66v12' stroke='%23ffb703' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <!-- Language switcher (not a navigation menu) -->
  <div class="lang-switch" role="group" aria-label="Language / Sprache / Idioma">
    <button type="button" data-lang="en" class="is-active">EN</button>
    <button type="button" data-lang="de">DE</button>
    <button type="button" data-lang="es">ES</button>
  </div>

  <!-- Hero -->
  <header class="hero">
    <div class="hero__bg" aria-hidden="true"></div>
    <div class="hero__overlay" aria-hidden="true"></div>

    <div class="hero__inner container">
      <span class="eyebrow" data-i18n="hero.eyebrow"></span>
      <h1 class="hero__title" data-i18n="hero.title"></h1>
      <p class="hero__subtitle" data-i18n="hero.subtitle"></p>

      <div class="hero__actions">
        <a class="btn btn--primary" id="ctaTelegram" href="https://t.me/Podcast_Learn_and_Prep_bot" target="_blank" rel="noopener">
          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/></svg>
          <span data-i18n="hero.cta"></span>
        </a>
        <a class="btn btn--ghost" href="#archive">
          <span data-i18n="hero.ctaSecondary"></span>
          <svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12l7 7 7-7"/></svg>
        </a>
      </div>

      <ul class="hero__badges">
        <li data-i18n="hero.badge1"></li>
        <li data-i18n="hero.badge2"></li>
        <li data-i18n="hero.badge3"></li>
      </ul>
    </div>
  </header>

  <main>
    <!-- Archive -->
    <section id="archive" class="archive">
      <div class="container">
        <div class="section-head">
          <h2 data-i18n="archive.title"></h2>
          <p data-i18n="archive.subtitle"></p>
        </div>

        <div class="search">
          <svg class="search__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35"/></svg>
          <input id="search" type="search" autocomplete="off" data-i18n-placeholder="archive.search" />
        </div>

        <p class="notice" id="notice" hidden></p>

        <div class="meta-row">
          <span id="count" class="count"></span>
        </div>

        <div id="list" class="cards" aria-live="polite"></div>
        <div id="state" class="state" hidden></div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container footer__inner">
      <span class="footer__brand">Learn &amp; Prep</span>
      <span class="footer__text" data-i18n="footer.text"></span>
    </div>
  </footer>

  <!-- Episode modal -->
  <div class="modal" id="modal" hidden>
    <div class="modal__backdrop" data-close></div>
    <div class="modal__panel" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
      <button type="button" class="modal__close" data-close aria-label="Close">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M6 6l12 12M18 6L6 18"/></svg>
      </button>

      <div class="modal__head">
        <span class="modal__date" id="modalDate"></span>
        <h3 class="modal__title" id="modalTitle"></h3>
      </div>

      <div class="modal__body" id="modalBody"></div>

      <div class="modal__foot">
        <div class="player" id="player">
          <button type="button" class="player__btn" id="playerToggle" aria-label="Play">
            <svg class="player__icon player__icon--play" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M8 5.14v13.72a1 1 0 0 0 1.53.85l10.8-6.86a1 1 0 0 0 0-1.7L9.53 4.29A1 1 0 0 0 8 5.14z"/></svg>
            <svg class="player__icon player__icon--pause" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg>
          </button>
          <div class="player__track" id="playerTrack" role="slider" tabindex="0" aria-label="Seek" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="player__fill" id="playerFill"></div>
          </div>
          <span class="player__time" id="playerTime">0:00 / 0:00</span>
        </div>

        <button type="button" class="btn btn--primary" id="modalDownload">
          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
          <span data-i18n="modal.download"></span>
        </button>
      </div>

      <audio id="audio" preload="metadata"></audio>
    </div>
  </div>

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