Spaces:

abersbail
/

anime-html-codes-database

Running

File size: 24,490 Bytes

<!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>