ymb-site/index.html

<!-- Author: fruit.com.cn -->
<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="theme-color" content="#0f0f0f" />
    <meta name="description" id="meta-description" content="YMB — cerita pendek, emosi besar. Temukan drama pendek terbaik dan episode baru setiap hari." />
    <meta name="keywords" content="short drama, vertical drama, drama pendek, YMB, serial drama" />
    <meta name="robots" content="index,follow,max-image-preview:large" />
    <link rel="canonical" id="canonical-link" href="https://ymb.example.com/" />
    <link rel="alternate" hreflang="id" href="https://ymb.example.com/?lang=id" />
    <link rel="alternate" hreflang="en" href="https://ymb.example.com/?lang=en" />
    <link rel="alternate" hreflang="zh-CN" href="https://ymb.example.com/?lang=zh" />
    <link rel="alternate" hreflang="x-default" href="https://ymb.example.com/" />
    <meta property="og:type" content="website" /><meta property="og:site_name" content="YMB" /><meta property="og:title" id="og-title" content="YMB · Cerita pendek, emosi besar" /><meta property="og:description" id="og-description" content="Temukan drama pendek terbaik di YMB." /><meta property="og:image" content="hero.jpg" />
    <meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" id="twitter-title" content="YMB · Cerita pendek, emosi besar" /><meta name="twitter:description" id="twitter-description" content="Temukan drama pendek terbaik di YMB." />
    <script type="application/ld+json" id="structured-data">{"@context":"https://schema.org","@type":"WebSite","name":"YMB","url":"https://ymb.example.com/","potentialAction":{"@type":"SearchAction","target":"https://ymb.example.com/?lang=id&q={search_term_string}","query-input":"required name=search_term_string"}}</script>
    <title id="page-title">YMB · Cerita pendek, emosi besar</title>
    <link rel="icon" href="../brand-mark.png" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="app-shell">
      <header class="topbar">
        <button class="icon-button mobile-only" id="menu-toggle" aria-label="Buka menu">☰</button>
        <a class="brand" href="#home" aria-label="YMB Beranda"><span class="brand-symbol">▶</span><span>ymb</span></a>
        <form class="search-form" id="search-form" role="search"><input id="global-search" type="search" placeholder="Cari drama, aktor, atau genre" aria-label="Cari drama" autocomplete="off" /><button type="submit" aria-label="Cari">⌕</button></form>
        <div class="top-actions"><label class="language-select"><span class="sr-only">Bahasa</span><select id="language-select" aria-label="Pilih bahasa"><option value="id">ID</option><option value="en">EN</option><option value="zh">中文</option></select></label><button class="icon-button desktop-only" aria-label="Buat">＋</button><button class="icon-button" aria-label="Notifikasi">♧</button><button class="profile-chip" aria-label="Profil">N</button></div>
      </header>
      <aside class="sidebar" id="sidebar" aria-label="Navigasi utama">
        <nav class="main-nav"><a class="nav-item active" href="#home"><span>⌂</span><b>Beranda</b></a><a class="nav-item" href="#shorts"><span>◉</span><b>Shorts</b></a><a class="nav-item" href="#subscriptions"><span>▣</span><b>Langganan</b></a></nav>
        <div class="nav-rule"></div><p class="nav-label">Koleksi kamu</p>
        <nav class="main-nav"><a class="nav-item" href="#library"><span>▱</span><b>Perpustakaan</b></a><a class="nav-item" href="#history"><span>◷</span><b>Riwayat</b></a><a class="nav-item" href="#liked"><span>♡</span><b>Drama disukai</b></a></nav>
        <div class="nav-rule"></div><p class="nav-label">Genre populer</p><nav class="genre-nav" id="genre-nav"></nav><div class="sidebar-footer">Tentang · Ketentuan · Privasi<br /><span>© 2026 YMB</span></div>
      </aside>
      <main class="content" id="main">
        <section class="hero-card" aria-label="Pilihan utama"><div class="hero-copy"><span class="eyebrow" data-i18n="original">YMB ORIGINAL</span><h1><span data-i18n="heroTitle">Cerita pendek,</span><br /><em data-i18n="heroAccent">emosi besar.</em></h1><p data-i18n="heroDescription">Temukan drama yang bikin kamu terus menonton. Episode baru setiap hari.</p><div class="hero-actions"><button class="primary-button" data-play="hero" data-i18n="watchNow">▶ Mulai menonton</button><button class="ghost-button" data-save="hero" data-i18n="save">♡ Simpan</button></div></div><div class="hero-art"><img src="hero.jpg" alt="Drama pendek YMB" /></div></section>
        <section class="section-block"><div class="section-heading"><div><span class="eyebrow" data-i18n="recommendation">REKOMENDASI UNTUKMU</span><h2 data-i18n="weeklyPicks">Drama pilihan minggu ini</h2></div><a href="#discover" class="see-all" data-i18n="seeAll">Lihat semua →</a></div><div class="chip-row" id="filter-chips" role="tablist"></div><div class="video-grid" id="video-grid"></div></section>
        <section class="section-block shorts-block"><div class="section-heading"><div><span class="eyebrow">SHORTS</span><h2 data-i18n="shortsTitle">Cerita dalam satu tarikan napas</h2></div><a href="#shorts" class="see-all" data-i18n="explore">Jelajahi →</a></div><div class="shorts-row" id="shorts-row"></div></section>
        <section class="section-block channel-block"><div class="section-heading"><div><span class="eyebrow" data-i18n="channels">CHANNEL UNTUKMU</span><h2 data-i18n="followStories">Ikuti cerita favoritmu</h2></div><a href="#subscriptions" class="see-all" data-i18n="manage">Kelola →</a></div><div class="channel-grid" id="channel-grid"></div></section>
      </main>
    </div>
    <nav class="bottom-nav" aria-label="Navigasi seluler"><a class="active" href="#home"><span>⌂</span>Beranda</a><a href="#shorts"><span>◉</span>Shorts</a><a href="#subscriptions"><span>▣</span>Langganan</a><a href="#library"><span>▱</span>Koleksi</a></nav>
    <div class="toast" id="toast" role="status" aria-live="polite"></div>
    <script src="data.js"></script><script src="app.js"></script>
  </body>
</html>