Spaces:

abersbail
/

anime-html-codes-database

Running

App Files Files Community

abersbail commited on 17 days ago

Commit

83eaff2

verified ·

1 Parent(s): 1243745

Deploy anime HTML codes database

Browse files

Files changed (2) hide show

README.md +13 -5
index.html +774 -16

README.md CHANGED Viewed

@@ -1,10 +1,18 @@
 ---
-title: Anime Html Codes Database
-emoji: ⚡
-colorFrom: blue
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Anime HTML Codes Database
+colorFrom: pink
+colorTo: indigo
 sdk: static
 pinned: false
+license: mit
+short_description: 20 anime HTML snippets with live preview.
+tags:
+- static
+- html
+- anime
+- code-snippets
 ---
+# Anime HTML Codes Database
+A static HTML app with 20 anime-style HTML/CSS snippets. It includes search, type filtering, live preview, copy code, and download HTML actions.

index.html CHANGED Viewed

@@ -1,19 +1,777 @@
 <!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Anime HTML Codes Database</title>
+  <style>
+    :root {
+      --bg: #f6f5f2;
+      --panel: #ffffff;
+      --ink: #171923;
+      --muted: #667085;
+      --line: #ddd6cc;
+      --accent: #d9480f;
+      --accent-dark: #b53808;
+      --blue: #2454a6;
+      --green: #147d64;
+      --shadow: 0 18px 46px rgba(31, 26, 20, 0.12);
+    }
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--ink);
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    button,
+    input,
+    select,
+    textarea {
+      font: inherit;
+    }
+    main {
+      width: min(1180px, calc(100% - 32px));
+      margin: 0 auto;
+      padding: 28px 0;
+    }
+    header {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 20px;
+      align-items: end;
+      margin-bottom: 18px;
+    }
+    h1 {
+      margin: 0 0 8px;
+      font-size: clamp(28px, 5vw, 48px);
+      line-height: 1;
+    }
+    p {
+      margin: 0;
+      color: var(--muted);
+      line-height: 1.5;
+    }
+    .counts {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+    .count {
+      min-width: 104px;
+      padding: 11px 13px;
+      background: var(--panel);
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      box-shadow: var(--shadow);
+    }
+    .count strong,
+    .count span {
+      display: block;
+    }
+    .count strong {
+      font-size: 22px;
+      line-height: 1;
+    }
+    .count span {
+      margin-top: 5px;
+      color: var(--muted);
+      font-size: 12px;
+      text-transform: uppercase;
+    }
+    .workspace {
+      display: grid;
+      grid-template-columns: minmax(300px, 420px) 1fr;
+      gap: 16px;
+      align-items: start;
+    }
+    .panel {
+      background: var(--panel);
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+    .tools {
+      display: grid;
+      grid-template-columns: 1fr 150px;
+      gap: 10px;
+      padding: 14px;
+      border-bottom: 1px solid var(--line);
+      background: #fffcf7;
+    }
+    input,
+    select {
+      width: 100%;
+      height: 42px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      padding: 0 12px;
+      color: var(--ink);
+      background: #fff;
+    }
+    .list {
+      max-height: 660px;
+      overflow: auto;
+    }
+    .item {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 10px;
+      width: 100%;
+      padding: 14px;
+      border: 0;
+      border-bottom: 1px solid var(--line);
+      background: #fff;
+      color: var(--ink);
+      text-align: left;
+      cursor: pointer;
+    }
+    .item:hover,
+    .item.active {
+      background: #fff4ec;
+    }
+    .item strong {
+      display: block;
+      margin-bottom: 5px;
+      font-size: 15px;
+    }
+    .item small {
+      color: var(--muted);
+      line-height: 1.4;
+    }
+    .tag {
+      align-self: start;
+      min-width: 82px;
+      border-radius: 999px;
+      padding: 5px 8px;
+      color: #fff;
+      background: var(--blue);
+      font-size: 12px;
+      font-weight: 700;
+      text-align: center;
+      text-transform: capitalize;
+    }
+    .detail-head {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      align-items: start;
+      padding: 18px;
+      border-bottom: 1px solid var(--line);
+    }
+    h2 {
+      margin: 0 0 8px;
+      font-size: 25px;
+      line-height: 1.15;
+    }
+    .actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+    button.action {
+      height: 40px;
+      border: 0;
+      border-radius: 6px;
+      padding: 0 13px;
+      color: #fff;
+      background: var(--accent);
+      cursor: pointer;
+      font-weight: 700;
+      white-space: nowrap;
+    }
+    button.action:hover {
+      background: var(--accent-dark);
+    }
+    button.action.secondary {
+      background: var(--green);
+    }
+    .preview {
+      min-height: 220px;
+      padding: 18px;
+      border-bottom: 1px solid var(--line);
+      background:
+        linear-gradient(90deg, rgba(36, 84, 166, 0.07) 1px, transparent 1px),
+        linear-gradient(rgba(36, 84, 166, 0.07) 1px, transparent 1px),
+        #fbfaf8;
+      background-size: 24px 24px;
+    }
+    iframe {
+      display: block;
+      width: 100%;
+      min-height: 230px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: #fff;
+    }
+    .code-wrap {
+      padding: 0;
+    }
+    pre {
+      margin: 0;
+      max-height: 420px;
+      overflow: auto;
+      padding: 18px;
+      background: #15171f;
+      color: #f8f8f2;
+      font-size: 13px;
+      line-height: 1.55;
+      white-space: pre-wrap;
+    }
+    .empty {
+      padding: 26px 14px;
+      color: var(--muted);
+      text-align: center;
+    }
+    @media (max-width: 900px) {
+      header,
+      .workspace,
+      .tools {
+        grid-template-columns: 1fr;
+      }
+      .counts,
+      .actions {
+        justify-content: flex-start;
+      }
+      .list {
+        max-height: 360px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <header>
+      <div>
+        <h1>Anime HTML Codes Database</h1>
+        <p>Twenty simple anime-style HTML snippets with live preview and copy-ready code.</p>
+      </div>
+      <div class="counts">
+        <div class="count">
+          <strong id="totalCount">20</strong>
+          <span>Total</span>
+        </div>
+        <div class="count">
+          <strong id="shownCount">20</strong>
+          <span>Shown</span>
+        </div>
+      </div>
+    </header>
+    <section class="workspace">
+      <aside class="panel">
+        <div class="tools">
+          <input id="searchInput" type="search" placeholder="Search anime codes">
+          <select id="typeFilter" aria-label="Filter by type">
+            <option value="all">All types</option>
+            <option value="card">Card</option>
+            <option value="button">Button</option>
+            <option value="banner">Banner</option>
+            <option value="loader">Loader</option>
+            <option value="badge">Badge</option>
+          </select>
+        </div>
+        <div class="list" id="codeList"></div>
+        <div class="empty" id="emptyState" hidden>No anime codes found.</div>
+      </aside>
+      <section class="panel" aria-label="Selected code">
+        <div class="detail-head">
+          <div>
+            <h2 id="detailTitle">Select a code</h2>
+            <p id="detailDescription">Pick a snippet from the list.</p>
+          </div>
+          <div class="actions">
+            <button class="action secondary" id="downloadButton" type="button">Download HTML</button>
+            <button class="action" id="copyButton" type="button">Copy Code</button>
+          </div>
+        </div>
+        <div class="preview">
+          <iframe id="previewFrame" title="Anime code preview"></iframe>
+        </div>
+        <div class="code-wrap">
+          <pre><code id="codeOutput"></code></pre>
+        </div>
+      </section>
+    </section>
+  </main>
+  <script>
+    const snippets = [
+      {
+        id: 1,
+        type: "card",
+        title: "Hero Character Card",
+        description: "A profile card for an anime hero.",
+        code: `<!doctype html>
 <html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f7f2ea;font-family:Arial}
+.card{width:280px;border:4px solid #161616;border-radius:18px;background:#fff;box-shadow:10px 10px 0 #161616;overflow:hidden}
+.top{height:130px;background:linear-gradient(135deg,#ff7a45,#ffd166);display:grid;place-items:center}
+.face{width:88px;height:88px;border-radius:50%;background:#ffe8c7;border:4px solid #161616;position:relative}
+.face:before,.face:after{content:"";position:absolute;top:34px;width:10px;height:10px;background:#161616;border-radius:50%}
+.face:before{left:24px}.face:after{right:24px}
+.body{padding:18px}.name{font-size:24px;font-weight:900}.role{color:#d9480f;font-weight:700;margin-top:6px}
+</style>
+</head>
+<body><div class="card"><div class="top"><div class="face"></div></div><div class="body"><div class="name">Aki Storm</div><div class="role">Fire Squad Captain</div></div></div></body>
+</html>`
+      },
+      {
+        id: 2,
+        type: "button",
+        title: "Power Up Button",
+        description: "A bold call-to-action button with anime energy.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#10131c;font-family:Arial}
+button{font-size:22px;font-weight:900;letter-spacing:0;border:3px solid #fff;border-radius:10px;padding:18px 34px;color:#10131c;background:#ffd166;box-shadow:0 0 0 5px #ef476f,0 0 30px #ffd166;cursor:pointer;transform:skew(-8deg)}
+button:hover{background:#06d6a0;box-shadow:0 0 0 5px #118ab2,0 0 38px #06d6a0}
+</style>
+</head>
+<body><button>POWER UP</button></body>
+</html>`
+      },
+      {
+        id: 3,
+        type: "banner",
+        title: "Opening Title Banner",
+        description: "A simple anime opening title block.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#eaf2ff;font-family:Arial}
+.banner{width:min(760px,90vw);padding:38px 28px;border:4px solid #111;background:#fff;box-shadow:12px 12px 0 #2454a6;text-align:center}
+.eyebrow{color:#d9480f;font-weight:900;text-transform:uppercase}
+h1{font-size:54px;line-height:1;margin:10px 0}.line{height:8px;background:#111;margin:18px auto;width:80%}
+p{margin:0;color:#475467;font-weight:700}
+</style>
+</head>
+<body><section class="banner"><div class="eyebrow">Episode 01</div><h1>Skyline Academy</h1><div class="line"></div><p>The first bell rings at sunrise.</p></section></body>
+</html>`
+      },
+      {
+        id: 4,
+        type: "loader",
+        title: "Spinning Star Loader",
+        description: "A small loading animation for anime pages.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#fff8e6}
+.star{width:90px;height:90px;background:#ffbe0b;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:spin 1s linear infinite;filter:drop-shadow(0 0 18px #fb5607)}
+@keyframes spin{to{transform:rotate(360deg)}}
+</style>
+</head>
+<body><div class="star"></div></body>
+</html>`
+      },
+      {
+        id: 5,
+        type: "badge",
+        title: "Senpai Badge",
+        description: "A small rank badge for profile cards.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f1f5f9;font-family:Arial}
+.badge{display:inline-grid;place-items:center;width:170px;height:62px;border:3px solid #111;border-radius:999px;background:#ffcad4;color:#111;box-shadow:7px 7px 0 #111;font-size:22px;font-weight:900}
+</style>
+</head>
+<body><div class="badge">SENPAI</div></body>
+</html>`
+      },
+      {
+        id: 6,
+        type: "card",
+        title: "Manga Panel Card",
+        description: "A black and white manga-style panel.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#ddd;font-family:Arial}
+.panel{width:310px;padding:22px;border:5px solid #111;background:repeating-linear-gradient(-35deg,#fff 0 8px,#f2f2f2 8px 16px);box-shadow:12px 12px 0 #111}
+.bubble{padding:18px;border:3px solid #111;border-radius:50%;background:#fff;text-align:center;font-size:24px;font-weight:900}
+.caption{margin-top:18px;background:#111;color:#fff;padding:10px;font-weight:700}
+</style>
+</head>
+<body><div class="panel"><div class="bubble">I will win!</div><div class="caption">Chapter 12: Final Round</div></div></body>
+</html>`
+      },
+      {
+        id: 7,
+        type: "button",
+        title: "Episode Play Button",
+        description: "A compact anime episode play button.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#eff6ff;font-family:Arial}
+.play{display:flex;align-items:center;gap:12px;border:3px solid #1d2939;border-radius:8px;background:#fff;padding:14px 18px;box-shadow:7px 7px 0 #2454a6;font-weight:900}
+.icon{width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:18px solid #d9480f}
+</style>
+</head>
+<body><button class="play"><span class="icon"></span><span>Watch Episode</span></button></body>
+</html>`
+      },
+      {
+        id: 8,
+        type: "banner",
+        title: "School Club Banner",
+        description: "A clean banner for an anime school club.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#fff7ed;font-family:Arial}
+.club{width:min(700px,90vw);border:3px solid #111;border-radius:8px;overflow:hidden;background:#fff}
+.top{background:#2454a6;color:#fff;padding:14px 20px;font-weight:900}
+.main{padding:28px 20px}.main h1{margin:0;font-size:42px}.main p{color:#667085;font-weight:700}
+</style>
+</head>
+<body><section class="club"><div class="top">After School Club</div><div class="main"><h1>Art Room Heroes</h1><p>Meet every Friday before sunset.</p></div></section></body>
+</html>`
+      },
+      {
+        id: 9,
+        type: "loader",
+        title: "Energy Ring Loader",
+        description: "A glowing ring animation.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#111827}
+.ring{width:95px;height:95px;border-radius:50%;border:8px solid #334155;border-top-color:#06d6a0;border-right-color:#ffd166;animation:turn .8s linear infinite;box-shadow:0 0 26px #06d6a0}
+@keyframes turn{to{transform:rotate(360deg)}}
+</style>
+</head>
+<body><div class="ring"></div></body>
+</html>`
+      },
+      {
+        id: 10,
+        type: "badge",
+        title: "Episode Badge",
+        description: "A label for episode numbers.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f8fafc;font-family:Arial}
+.episode{border:3px solid #111;background:#fff;padding:12px 18px;box-shadow:6px 6px 0 #ef476f;font-size:20px;font-weight:900}
+.episode span{color:#ef476f}
+</style>
+</head>
+<body><div class="episode">EP <span>07</span> FINAL MATCH</div></body>
+</html>`
+      },
+      {
+        id: 11,
+        type: "card",
+        title: "Villain Notice Card",
+        description: "A sharp warning card for a villain profile.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#1f2937;font-family:Arial}
+.card{width:310px;border:3px solid #f8fafc;background:#111827;color:#fff;padding:24px;box-shadow:10px 10px 0 #ef4444}
+.label{color:#fca5a5;font-weight:900;text-transform:uppercase}.name{font-size:34px;font-weight:900;margin:12px 0}.note{color:#cbd5e1}
+</style>
+</head>
+<body><div class="card"><div class="label">Wanted</div><div class="name">Noctis Rei</div><div class="note">Shadow technique specialist.</div></div></body>
+</html>`
+      },
+      {
+        id: 12,
+        type: "button",
+        title: "Manga Next Button",
+        description: "A next chapter button with hard edges.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#fff;font-family:Arial}
+.next{border:4px solid #000;background:#000;color:#fff;padding:16px 28px;font-size:22px;font-weight:900;box-shadow:8px 8px 0 #ffd166;cursor:pointer}
+.next:hover{box-shadow:8px 8px 0 #06d6a0}
+</style>
+</head>
+<body><button class="next">NEXT CHAPTER</button></body>
+</html>`
+      },
+      {
+        id: 13,
+        type: "banner",
+        title: "Tournament Banner",
+        description: "A tournament matchup headline.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f0fdf4;font-family:Arial}
+.match{width:min(720px,92vw);border:4px solid #111;background:#fff;padding:28px;text-align:center;box-shadow:12px 12px 0 #16a34a}
+.small{font-weight:900;color:#16a34a}.names{font-size:38px;font-weight:900;margin:12px 0}.vs{color:#d9480f}
+</style>
+</head>
+<body><section class="match"><div class="small">Grand Tournament</div><div class="names">KAI <span class="vs">VS</span> RIN</div><p>Final arena opens tonight.</p></section></body>
+</html>`
+      },
+      {
+        id: 14,
+        type: "loader",
+        title: "Dot Dash Loader",
+        description: "Three quick dots for loading scenes.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#fff1f2}
+.dots{display:flex;gap:12px}.dots span{width:22px;height:22px;border-radius:50%;background:#e11d48;animation:bounce .6s infinite alternate}.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
+@keyframes bounce{to{transform:translateY(-22px);background:#f59e0b}}
+</style>
+</head>
+<body><div class="dots"><span></span><span></span><span></span></div></body>
+</html>`
+      },
+      {
+        id: 15,
+        type: "badge",
+        title: "Clan Badge",
+        description: "A circular clan mark.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#ecfeff;font-family:Arial}
+.clan{width:140px;height:140px;border:5px solid #111;border-radius:50%;background:radial-gradient(circle,#fff 0 34%,#22d3ee 35% 58%,#111 59% 62%,#fff 63%);display:grid;place-items:center;font-weight:900;box-shadow:8px 8px 0 #111}
+</style>
+</head>
+<body><div class="clan">CLAN</div></body>
+</html>`
+      },
+      {
+        id: 16,
+        type: "card",
+        title: "Quest Card",
+        description: "A mission card for an anime adventure.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#fafaf9;font-family:Arial}
+.quest{width:320px;border:3px solid #292524;border-radius:8px;background:#fff7ed;padding:20px;box-shadow:9px 9px 0 #292524}
+.rank{display:inline-block;background:#d9480f;color:#fff;padding:6px 10px;border-radius:4px;font-weight:900}.title{font-size:28px;font-weight:900;margin:14px 0}.reward{color:#147d64;font-weight:900}
+</style>
+</head>
+<body><div class="quest"><span class="rank">S RANK</span><div class="title">Find the Sky Stone</div><div class="reward">Reward: 5000 coins</div></div></body>
+</html>`
+      },
+      {
+        id: 17,
+        type: "button",
+        title: "Transform Button",
+        description: "A transformation button with glow.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#140f1f;font-family:Arial}
+button{border:2px solid #f5d0fe;border-radius:999px;padding:16px 30px;background:#7e22ce;color:#fff;font-size:21px;font-weight:900;box-shadow:0 0 22px #c084fc;cursor:pointer}
+button:hover{background:#a21caf;box-shadow:0 0 34px #f0abfc}
+</style>
+</head>
+<body><button>TRANSFORM</button></body>
+</html>`
+      },
+      {
+        id: 18,
+        type: "banner",
+        title: "Subtitle Strip",
+        description: "A simple subtitle strip for anime scenes.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:end center;background:#1e293b;font-family:Arial;padding:30px}
+.subtitle{max-width:760px;background:rgba(0,0,0,.82);color:#fff;border:2px solid #fff;border-radius:6px;padding:14px 20px;font-size:24px;font-weight:800;text-align:center}
+</style>
+</head>
+<body><div class="subtitle">I promised we would see the sunrise together.</div></body>
+</html>`
+      },
+      {
+        id: 19,
+        type: "loader",
+        title: "Slash Loader",
+        description: "Animated sword-slash bars.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f8fafc}
+.slash{display:flex;gap:8px;transform:skew(-20deg)}.slash span{width:14px;height:80px;background:#111;animation:flash .8s infinite alternate}.slash span:nth-child(2){animation-delay:.15s}.slash span:nth-child(3){animation-delay:.3s}
+@keyframes flash{to{height:35px;background:#ef4444}}
+</style>
+</head>
+<body><div class="slash"><span></span><span></span><span></span></div></body>
+</html>`
+      },
+      {
+        id: 20,
+        type: "badge",
+        title: "New Season Badge",
+        description: "A pill badge for a new season announcement.",
+        code: `<!doctype html>
+<html>
+<head>
+<style>
+body{margin:0;min-height:100vh;display:grid;place-items:center;background:#eef2ff;font-family:Arial}
+.season{border:3px solid #312e81;border-radius:999px;background:#fff;color:#312e81;padding:14px 22px;font-weight:900;font-size:22px;box-shadow:0 0 0 8px #c7d2fe}
+</style>
+</head>
+<body><div class="season">NEW SEASON</div></body>
+</html>`
+      }
+    ];
+    const list = document.getElementById("codeList");
+    const emptyState = document.getElementById("emptyState");
+    const searchInput = document.getElementById("searchInput");
+    const typeFilter = document.getElementById("typeFilter");
+    const shownCount = document.getElementById("shownCount");
+    const detailTitle = document.getElementById("detailTitle");
+    const detailDescription = document.getElementById("detailDescription");
+    const codeOutput = document.getElementById("codeOutput");
+    const previewFrame = document.getElementById("previewFrame");
+    const copyButton = document.getElementById("copyButton");
+    const downloadButton = document.getElementById("downloadButton");
+    let selected = snippets[0];
+    function filterSnippets() {
+      const query = searchInput.value.trim().toLowerCase();
+      const type = typeFilter.value;
+      return snippets.filter((snippet) => {
+        const text = `${snippet.title} ${snippet.description} ${snippet.type}`.toLowerCase();
+        return (type === "all" || snippet.type === type) && text.includes(query);
+      });
+    }
+    function renderList() {
+      const visible = filterSnippets();
+      list.innerHTML = "";
+      shownCount.textContent = String(visible.length);
+      emptyState.hidden = visible.length > 0;
+      for (const snippet of visible) {
+        const button = document.createElement("button");
+        button.className = `item${snippet.id === selected.id ? " active" : ""}`;
+        button.type = "button";
+        button.innerHTML = `
+          <span>
+            <strong>${escapeHtml(snippet.id + ". " + snippet.title)}</strong>
+            <small>${escapeHtml(snippet.description)}</small>
+          </span>
+          <span class="tag">${escapeHtml(snippet.type)}</span>
+        `;
+        button.addEventListener("click", () => {
+          selected = snippet;
+          renderDetail();
+          renderList();
+        });
+        list.appendChild(button);
+      }
+    }
+    function renderDetail() {
+      detailTitle.textContent = selected.title;
+      detailDescription.textContent = `${selected.type.toUpperCase()} #${selected.id}: ${selected.description}`;
+      codeOutput.textContent = selected.code;
+      previewFrame.srcdoc = selected.code;
+    }
+    function escapeHtml(value) {
+      return String(value)
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
+    }
+    copyButton.addEventListener("click", async () => {
+      await navigator.clipboard.writeText(selected.code);
+      copyButton.textContent = "Copied";
+      setTimeout(() => {
+        copyButton.textContent = "Copy Code";
+      }, 1200);
+    });
+    downloadButton.addEventListener("click", () => {
+      const blob = new Blob([selected.code], { type: "text/html" });
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = `${selected.title.toLowerCase().replaceAll(" ", "-")}.html`;
+      link.click();
+      URL.revokeObjectURL(link.href);
+    });
+    searchInput.addEventListener("input", renderList);
+    typeFilter.addEventListener("change", renderList);
+    renderDetail();
+    renderList();
+  </script>
+</body>
 </html>