Spaces:

api-ix
/

Bxhdh

Running

App Files Files Community

api-ix commited on Oct 10, 2025

Commit

ed4c116

verified ·

1 Parent(s): a2def7f

Upload index.html

Browse files

Files changed (1) hide show

index.html +1130 -126

index.html CHANGED Viewed

@@ -1,137 +1,1141 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
-  <title>BLUE DEMON API v2</title>
-  <!-- page icon -->
-  <link rel="icon" href="./media/logo.svg" type="image/svg+xml">
-  <!-- fonts -->
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-  <!-- icons -->
-  <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
-  <!-- custom font + styles -->
-  <link rel="stylesheet" href="styles.css"/>
-  <link rel="preload" href="./media/music.mp3" as="audio" />
-<audio id="bgm" src="./media/music.mp3" loop muted playsinline></audio>
-</head>
 <body>
-<!--  music widget  -->
-<div id="music-widget">
-  <button id="music-toggle" aria-label="Play / Pause music">
-    <!-- default = OFF state -->
-    <img src="./media/speaker-off.svg" id="speaker-icon" width="20" height="20" alt="speaker">
-  </button>
-  <span id="music-text">sound off</span>
-</div>
-  <!-- Liquid BG -->
-  <div class="liquid-bg">
-    <div class="orb orb-1"></div>
-    <div class="orb orb-2"></div>
-    <div class="orb orb-3"></div>
-  </div>
-  <!-- Header -->
-  <header class="header">
-    <div class="logo">
-      <!-- inline SVG logo -->
-      <img src="./media/logo.svg" alt="Blue Demon" width="28" height="28" style="filter: drop-shadow(0 0 4px #ffb347);">
-      <span>BLUE DEMON</span>
-    </div>
-    <nav>
-      <a href="#apis">APIs</a>
-      <a href="#docs">Docs</a>
-      <a href="#status">Status</a>
-    </nav>
-  </header>
-  <!-- Hero -->
-  <section class="hero">
-    <h1 class="hero-title">
-      <span class="accent">BLUE</span> DEMON API
-    </h1>
-    <p class="hero-sub">Lightning-fast endpoints for everything you need.</p>
-    <button class="cta" onclick="scrollToSection('apis')">
-      <i class="fas fa-rocket"></i> Explore APIs
-    </button>
-  </section>
-  <!-- Live Stats -->
-  <section id="status" class="stats">
-    <div class="stat-card">
-      <i class="fas fa-chart-bar"></i>
-      <span id="req-count">--</span>
-      <small>requests served</small>
-    </div>
-    <div class="stat-card">
-      <i class="fas fa-server"></i>
-      <span>50</span>
-      <small>endpoints</small>
-    </div>
-    <div class="stat-card">
-      <i class="fas fa-shield-alt"></i>
-      <span>99.9%</span>
-      <small>uptime</small>
-    </div>
-  </section>
-  <!-- Filter + Search -->
-  <section id="apis" class="api-section">
-    <div class="controls">
-      <input id="search" placeholder="Search endpoints…"/>
-      <div class="pills" id="pills">
-        <button class="pill active" data-cat="All">All</button>
-      </div>
     </div>
-    <div class="grid" id="grid"></div>
-    <button class="load-more" id="loadMore">Load more</button>
-  </section>
-  <!-- Docs -->
-  <section id="docs" class="docs">
-    <h2>Quick Start</h2>
-    <div class="steps">
-      <article>
-        <div class="step-icon icon-1"></div>
-        <h3>1. Copy endpoint</h3>
-        <p>No keys needed for 90 % of endpoints.</p>
-      </article>
-      <article>
-        <div class="step-icon icon-2"></div>
-        <h3>2. Paste & Run</h3>
-        <p>Works in browser, curl, fetch, you name it.</p>
-      </article>
-      <article>
-        <div class="step-icon icon-3"></div>
-        <h3>3. Scale</h3>
-        <p>Built for high load & rapid prototyping.</p>
-      </article>
-    </div>
-  </section>
-  <!-- Footer -->
-  <footer>
-    <div class="social">
-      <a href="https://wa.me/2347041039367" title="Support"><i class="fab fa-whatsapp"></i></a>
-      <a href="#"><i class="fab fa-github"></i></a>
     </div>
-    <small>&copy; 2024 BLUE DEMON API</small>
-  </footer>
-  <!-- Modal -->
-  <div class="modal" id="modal">
-    <div class="modal-backdrop"></div>
-    <div class="modal-card">
-      <button class="modal-close">&times;</button>
-      <h3 id="mTitle"></h3>
-      <div id="mBody"></div>
     </div>
-  </div>
-  <script src="script.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anime-duo API Documentation</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --primary: #58cc02;
+            --primary-dark: #46a302;
+            --secondary: #1cb0f6;
+            --accent: #ff4b4b;
+            --bg-start: #0f172a;
+            --bg-end: #1e293b;
+            --glass-bg: rgba(255, 255, 255, 0.05);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --text-primary: #ffffff;
+            --text-secondary: #cbd5e1;
+            --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            min-height: 100vh;
+        }
+        .floating-shapes {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: 0;
+            pointer-events: none;
+        }
+        .shape {
+            position: absolute;
+            opacity: 0.1;
+            animation: float 20s infinite ease-in-out;
+        }
+        .shape:nth-child(1) {
+            top: 10%;
+            left: 10%;
+            width: 80px;
+            height: 80px;
+            background: var(--primary);
+            border-radius: 50%;
+            animation-delay: 0s;
+        }
+        .shape:nth-child(2) {
+            top: 60%;
+            right: 10%;
+            width: 120px;
+            height: 120px;
+            background: var(--secondary);
+            border-radius: 30%;
+            animation-delay: 2s;
+        }
+        .shape:nth-child(3) {
+            bottom: 20%;
+            left: 20%;
+            width: 100px;
+            height: 100px;
+            background: var(--accent);
+            border-radius: 20%;
+            animation-delay: 4s;
+        }
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0) rotate(0deg);
+            }
+            50% {
+                transform: translateY(-30px) rotate(180deg);
+            }
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            position: relative;
+            z-index: 1;
+        }
+        header {
+            text-align: center;
+            padding: 60px 20px;
+            animation: fadeInDown 0.8s ease;
+        }
+        .logo {
+            font-size: 3.5rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            color: var(--text-secondary);
+            margin-bottom: 30px;
+        }
+        .badges {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-bottom: 30px;
+        }
+        .badge {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border);
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            transition: all 0.3s ease;
+        }
+        .badge:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow);
+        }
+        .disclaimer {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 30px;
+            margin: 40px 0;
+            box-shadow: var(--shadow);
+            animation: fadeInUp 0.8s ease;
+        }
+        .disclaimer h2 {
+            color: var(--accent);
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .disclaimer li {
+            margin-left: 30px;
+            margin-bottom: 10px;
+        }
+        .nav {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 20px;
+            margin: 40px 0;
+            position: sticky;
+            top: 20px;
+            z-index: 100;
+            box-shadow: var(--shadow);
+            animation: slideInRight 0.8s ease;
+        }
+        .nav h3 {
+            margin-bottom: 15px;
+            color: var(--primary);
+        }
+        .nav-links {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 10px;
+        }
+        .nav-link {
+            color: var(--text-secondary);
+            text-decoration: none;
+            padding: 10px 15px;
+            border-radius: 10px;
+            transition: all 0.3s ease;
+            display: block;
+            background: rgba(255, 255, 255, 0.02);
+        }
+        .nav-link:hover {
+            background: var(--primary);
+            color: white;
+            transform: translateX(5px);
+        }
+        .section {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 40px;
+            margin: 40px 0;
+            box-shadow: var(--shadow);
+            animation: fadeInUp 0.8s ease;
+            transition: all 0.3s ease;
+        }
+        .section:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+        }
+        .section h2 {
+            color: var(--primary);
+            margin-bottom: 20px;
+            font-size: 2rem;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .section h3 {
+            color: var(--secondary);
+            margin: 25px 0 15px;
+            font-size: 1.5rem;
+        }
+        .endpoint {
+            background: rgba(88, 204, 2, 0.1);
+            border-left: 4px solid var(--primary);
+            padding: 15px;
+            border-radius: 10px;
+            margin: 15px 0;
+            font-family: 'Courier New', monospace;
+            overflow-x: auto;
+        }
+        .code-block {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 10px;
+            padding: 20px;
+            margin: 15px 0;
+            overflow-x: auto;
+            position: relative;
+        }
+        .code-block pre {
+            margin: 0;
+            color: var(--text-secondary);
+            font-family: 'Courier New', monospace;
+            font-size: 0.9rem;
+        }
+        .copy-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: var(--primary);
+            border: none;
+            color: white;
+            padding: 8px 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.85rem;
+        }
+        .copy-btn:hover {
+            background: var(--primary-dark);
+            transform: scale(1.05);
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+            overflow: hidden;
+            border-radius: 10px;
+        }
+        th, td {
+            padding: 15px;
+            text-align: left;
+            border-bottom: 1px solid var(--glass-border);
+        }
+        th {
+            background: rgba(88, 204, 2, 0.2);
+            color: var(--primary);
+            font-weight: 600;
+        }
+        tr {
+            transition: all 0.3s ease;
+        }
+        tr:hover {
+            background: rgba(255, 255, 255, 0.05);
+        }
+        .category-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin: 20px 0;
+        }
+        .category-item {
+            background: rgba(28, 176, 246, 0.1);
+            padding: 15px;
+            border-radius: 10px;
+            border: 1px solid var(--secondary);
+            transition: all 0.3s ease;
+            text-align: center;
+        }
+        .category-item:hover {
+            background: rgba(28, 176, 246, 0.2);
+            transform: scale(1.05);
+        }
+        .btn {
+            background: var(--primary);
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 30px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-block;
+            text-decoration: none;
+            margin: 10px;
+        }
+        .btn:hover {
+            background: var(--primary-dark);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(88, 204, 2, 0.3);
+        }
+        .btn-secondary {
+            background: var(--secondary);
+        }
+        .btn-secondary:hover {
+            background: #1890c6;
+            box-shadow: 0 8px 20px rgba(28, 176, 246, 0.3);
+        }
+        footer {
+            text-align: center;
+            padding: 40px 20px;
+            margin-top: 60px;
+            border-top: 1px solid var(--glass-border);
+        }
+        footer a {
+            color: var(--primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+        footer a:hover {
+            color: var(--secondary);
+        }
+        .method-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin-right: 10px;
+        }
+        .method-get {
+            background: rgba(88, 204, 2, 0.2);
+            color: var(--primary);
+        }
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes slideInRight {
+            from {
+                opacity: 0;
+                transform: translateX(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+        @media (max-width: 768px) {
+            .logo {
+                font-size: 2.5rem;
+            }
+            .section {
+                padding: 20px;
+            }
+            .nav-links {
+                grid-template-columns: 1fr;
+            }
+            table {
+                font-size: 0.85rem;
+            }
+            th, td {
+                padding: 10px;
+            }
+        }
+        .scroll-top {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            background: var(--primary);
+            color: white;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 1000;
+            box-shadow: var(--shadow);
+        }
+        .scroll-top.visible {
+            opacity: 1;
+        }
+        .scroll-top:hover {
+            background: var(--primary-dark);
+            transform: translateY(-5px);
+        }
+    </style>
+</head>
 <body>
+    <div class="floating-shapes">
+        <div class="shape"></div>
+        <div class="shape"></div>
+        <div class="shape"></div>
     </div>
+    <div class="container">
+        <header>
+            <h1 class="logo">🎌 Anime-duo</h1>
+            <p class="subtitle">RESTful API for Anime Streaming - Educational Purposes Only</p>
+            <div class="badges">
+                <span class="badge">Node.js</span>
+                <span class="badge">Version 1.0.0</span>
+                <span class="badge">REST API</span>
+                <span class="badge">Open Source</span>
+            </div>
+            <div>
+                <a href="https://zenime.site" target="_blank" class="btn">🌐 Live Demo</a>
+                <a href="https://github.com/itzzzme/anime-api" target="_blank" class="btn btn-secondary">⭐ GitHub</a>
+            </div>
+        </header>
+        <div class="disclaimer">
+            <h2>⚠️ Disclaimer</h2>
+            <ol>
+                <li>This API does not store any files, it only links to media hosted on 3rd party services.</li>
+                <li>This API is explicitly made for educational purposes only and not for commercial usage. This repo will not be responsible for any misuse of it.</li>
+            </ol>
+        </div>
+        <nav class="nav" id="nav">
+            <h3>📚 Quick Navigation</h3>
+            <div class="nav-links">
+                <a href="#installation" class="nav-link">Installation</a>
+                <a href="#deployment" class="nav-link">Deployment</a>
+                <a href="#home-info" class="nav-link">Home Info</a>
+                <a href="#top-ten" class="nav-link">Top 10 Anime</a>
+                <a href="#anime-info" class="nav-link">Anime Info</a>
+                <a href="#search" class="nav-link">Search</a>
+                <a href="#categories" class="nav-link">Categories</a>
+                <a href="#episodes" class="nav-link">Episodes</a>
+                <a href="#streaming" class="nav-link">Streaming</a>
+                <a href="#characters" class="nav-link">Characters</a>
+            </div>
+        </nav>
+        <section class="section" id="installation">
+            <h2>💻 Installation</h2>
+            <h3>Local Installation</h3>
+            <p>Make sure you have Node.js installed on your device.</p>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>git clone https://github.com/itzzzme/anime-api.git
+cd anime-api
+npm install</pre>
+            </div>
+            <h3>Setup Environment Variables</h3>
+            <p>Create a <code>.env</code> file based on <code>.env.example</code>:</p>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>ALLOWED_ORIGIN=&lt;https://site1.com&gt;,&lt;https://site2.com&gt;,...</pre>
+            </div>
+            <h3>Start the Server</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>npm start
+# or
+npm run devStart</pre>
+            </div>
+        </section>
+        <section class="section" id="deployment">
+            <h2>🚀 Deployment</h2>
+            <p>Deploy your own instance easily:</p>
+            <div>
+                <a href="https://vercel.com/new/clone?repository-url=https://github.com/itzzzme/anime-api" target="_blank" class="btn">Deploy to Vercel</a>
+                <a href="https://render.com/deploy?repo=https://github.com/itzzzme/anime-api" target="_blank" class="btn btn-secondary">Deploy to Render</a>
+            </div>
+        </section>
+        <section class="section" id="home-info">
+            <h2>🏠 GET Home Info</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/
+            </div>
+            <p>Retrieve comprehensive home page information including spotlights, trending anime, schedules, and more.</p>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/");
+console.log(resp.data);</pre>
+            </div>
+            <h3>Response Structure</h3>
+            <p>Returns: spotlights, trending, today's schedule, topAiring, mostPopular, mostFavorite, latestCompleted, latestEpisode, and genres.</p>
+        </section>
+        <section class="section" id="top-ten">
+            <h2>🔥 GET Top 10 Anime</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/top-ten
+            </div>
+            <p>Get the top 10 anime for today, this week, and this month.</p>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/top-ten");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="top-search">
+            <h2>🔍 GET Top Search</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/top-search
+            </div>
+            <p>Retrieve the most searched anime titles.</p>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/top-search");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="anime-info">
+            <h2>📺 GET Anime Info</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/info?id={anime-id}
+            </div>
+            <h3>Parameters</h3>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Parameter</th>
+                        <th>Type</th>
+                        <th>Description</th>
+                        <th>Required</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>id</td>
+                        <td>string</td>
+                        <td>Anime ID</td>
+                        <td>✅ Yes</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/info?id=one-piece-100");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="random">
+            <h2>🎲 GET Random Anime</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/random
+            </div>
+            <p>Get information about a random anime with related and recommended data.</p>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/random");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="categories">
+            <h2>📂 GET Categories</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/{category}?page={number}
+            </div>
+            <h3>Parameters</h3>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Parameter</th>
+                        <th>Type</th>
+                        <th>Description</th>
+                        <th>Required</th>
+                        <th>Default</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>category</td>
+                        <td>string</td>
+                        <td>Category name</td>
+                        <td>✅ Yes</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>page</td>
+                        <td>number</td>
+                        <td>Page number</td>
+                        <td>❌ No</td>
+                        <td>1</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h3>Available Categories</h3>
+            <div class="category-grid">
+                <div class="category-item">top-airing</div>
+                <div class="category-item">most-popular</div>
+                <div class="category-item">most-favorite</div>
+                <div class="category-item">completed</div>
+                <div class="category-item">recently-updated</div>
+                <div class="category-item">recently-added</div>
+                <div class="category-item">top-upcoming</div>
+                <div class="category-item">subbed-anime</div>
+                <div class="category-item">dubbed-anime</div>
+                <div class="category-item">movie</div>
+                <div class="category-item">tv</div>
+                <div class="category-item">ova</div>
+                <div class="category-item">ona</div>
+                <div class="category-item">special</div>
+            </div>
+            <h3>Genres</h3>
+            <div class="category-grid">
+                <div class="category-item">genre/action</div>
+                <div class="category-item">genre/adventure</div>
+                <div class="category-item">genre/comedy</div>
+                <div class="category-item">genre/drama</div>
+                <div class="category-item">genre/fantasy</div>
+                <div class="category-item">genre/horror</div>
+                <div class="category-item">genre/isekai</div>
+                <div class="category-item">genre/romance</div>
+                <div class="category-item">genre/sci-fi</div>
+                <div class="category-item">genre/sports</div>
+                <div class="category-item">genre/supernatural</div>
+                <div class="category-item">And many more...</div>
+            </div>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/most-popular?page=1");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="producer">
+            <h2>🎬 GET Producer/Studio Anime</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/producer/{producer-name}?page={number}
+            </div>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/producer/ufotable?page=1");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="search">
+            <h2>🔎 GET Search Results</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/search?keyword={search-term}
+            </div>
+            <h3>Parameters</h3>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Parameter</th>
+                        <th>Type</th>
+                        <th>Description</th>
+                        <th>Required</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>keyword</td>
+                        <td>string</td>
+                        <td>Search keyword</td>
+                        <td>✅ Yes</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/search?keyword=one%20punch%20man");
+console.log(resp.data);</pre>
+            </div>
+            <h3>Search Suggestions</h3>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/search/suggest?keyword={search-term}
+            </div>
+            <p>Get autocomplete suggestions for search queries.</p>
+        </section>
+        <section class="section" id="filter">
+            <h2>🎯 GET Filter Anime</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/filter
+            </div>
+            <h3>Parameters</h3>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Parameter</th>
+                        <th>Type</th>
+                        <th>Description</th>
+                        <th>Default</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>Type (movie, tv, etc.)</td>
+                        <td>ALL</td>
+                    </tr>
+                    <tr>
+                        <td>status</td>
+                        <td>string</td>
+                        <td>Status (finished, currently_airing)</td>
+                        <td>ALL</td>
+                    </tr>
+                    <tr>
+                        <td>rated</td>
+                        <td>string</td>
+                        <td>Rating (G, PG, etc.)</td>
+                        <td>ALL</td>
+                    </tr>
+                    <tr>
+                        <td>score</td>
+                        <td>string</td>
+                        <td>Score (1-10)</td>
+                        <td>ALL</td>
+                    </tr>
+                    <tr>
+                        <td>season</td>
+                        <td>string</td>
+                        <td>Season (spring, summer, etc.)</td>
+                        <td>ALL</td>
+                    </tr>
+                    <tr>
+                        <td>language</td>
+                        <td>string</td>
+                        <td>Language (sub, dub)</td>
+                        <td>ALL</td>
+                    </tr>
+                    <tr>
+                        <td>genres</td>
+                        <td>string</td>
+                        <td>Comma-separated genres</td>
+                        <td>ALL</td>
+                    </tr>
+                    <tr>
+                        <td>sort</td>
+                        <td>string</td>
+                        <td>Sort method</td>
+                        <td>DEFAULT</td>
+                    </tr>
+                    <tr>
+                        <td>page</td>
+                        <td>number</td>
+                        <td>Page number</td>
+                        <td>1</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/filter?type=2&status=1&page=1");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="schedule">
+            <h2>📅 GET Schedule</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/schedule?date={YYYY-MM-DD}
+            </div>
+            <p>Get the schedule of upcoming anime for a specific date.</p>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/schedule?date=2024-09-23");
+console.log(resp.data);</pre>
+            </div>
+            <h3>Next Episode Schedule</h3>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/schedule/{anime-id}
+            </div>
+            <p>Get the schedule for the next episode of a specific anime.</p>
+        </section>
+        <section class="section" id="episodes">
+            <h2>📺 GET Episodes</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/episodes/{anime-id}
+            </div>
+            <p>Retrieve the complete episode list for an anime.</p>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/episodes/one-piece-100");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="servers">
+            <h2>🖥️ GET Available Servers</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/servers/{anime-id}?ep={episode-id}
+            </div>
+            <p>Get all available streaming servers for an anime episode.</p>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/servers/one-piece-100?ep=12345");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="streaming">
+            <h2>▶️ GET Streaming Info</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/stream?id={episode-id}&server={server-name}&type={sub/dub}
+            </div>
+            <h3>Parameters</h3>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Parameter</th>
+                        <th>Type</th>
+                        <th>Description</th>
+                        <th>Required</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>id</td>
+                        <td>string</td>
+                        <td>Episode ID</td>
+                        <td>✅ Yes</td>
+                    </tr>
+                    <tr>
+                        <td>server</td>
+                        <td>string</td>
+                        <td>Server name</td>
+                        <td>✅ Yes</td>
+                    </tr>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>sub or dub</td>
+                        <td>✅ Yes</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/stream?id=one-piece-100?ep=107257&server=hd-1&type=sub");
+console.log(resp.data);</pre>
+            </div>
+            <h3>Fallback Streaming</h3>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/stream/fallback?id={episode-id}&server={server-name}&type={sub/dub}
+            </div>
+            <p>Alternative streaming source if primary fails.</p>
+        </section>
+        <section class="section" id="characters">
+            <h2>👥 GET Characters</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/character/list/{anime-id}
+            </div>
+            <p>Get the list of characters and voice actors for an anime.</p>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/character/list/one-piece-100");
+console.log(resp.data);</pre>
+            </div>
+            <h3>Character Details</h3>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/character/{character-id}
+            </div>
+            <p>Get detailed information about a specific character.</p>
+            <h3>Voice Actor Details</h3>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/actors/{actor-id}
+            </div>
+            <p>Get detailed information about a voice actor.</p>
+        </section>
+        <section class="section" id="qtip">
+            <h2>💡 GET Qtip Info</h2>
+            <div class="endpoint">
+                <span class="method-badge method-get">GET</span> /api/qtip/{anime-data-id}
+            </div>
+            <p>Get quick tooltip information for an anime.</p>
+            <h3>Example Request</h3>
+            <div class="code-block">
+                <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+                <pre>import axios from "axios";
+const resp = await axios.get("/api/qtip/3365");
+console.log(resp.data);</pre>
+            </div>
+        </section>
+        <section class="section" id="contribute">
+            <h2>🤝 Contributing</h2>
+            <h3>Pull Requests</h3>
+            <p>Pull requests are welcomed that address bug fixes, improvements, or new features.</p>
+            <ul>
+                <li>Fork the repository and create a new branch for your changes</li>
+                <li>Ensure your code follows our coding standards</li>
+                <li>Include tests if applicable</li>
+                <li>Describe your changes clearly in the pull request</li>
+            </ul>
+            <h3>Reporting Issues</h3>
+            <p>If you discover any issues or have suggestions for improvement, please open an issue on GitHub.</p>
+            <h3>Support</h3>
+            <p>If you like the project, feel free to drop a star ✨. Your appreciation means a lot!</p>
+        </section>
+        <footer>
+            <p>Made with 💚 by <a href="https://github.com/itzzzme" target="_blank">itzzzme</a></p>
+            <p style="margin-top: 10px; color: var(--text-secondary);">
+                <a href="https://github.com/itzzzme/anime-api" target="_blank">GitHub Repository</a> |
+                <a href="https://zenime.site" target="_blank">Live Demo</a>
+            </p>
+        </footer>
     </div>
+    <div class="scroll-top" id="scrollTop" onclick="scrollToTop()">
+        ↑
     </div>
+    <script>
+        function copyCode(button) {
+            const codeBlock = button.nextElementSibling;
+            const text = codeBlock.textContent;
+            navigator.clipboard.writeText(text).then(() => {
+                button.textContent = 'Copied!';
+                setTimeout(() => {
+                    button.textContent = 'Copy';
+                }, 2000);
+            });
+        }
+        const scrollTopBtn = document.getElementById('scrollTop');
+        window.addEventListener('scroll', () => {
+            if (window.pageYOffset > 300) {
+                scrollTopBtn.classList.add('visible');
+            } else {
+                scrollTopBtn.classList.remove('visible');
+            }
+        });
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+        const sections = document.querySelectorAll('.section');
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -100px 0px'
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }
+            });
+        }, observerOptions);
+        sections.forEach(section => {
+            section.style.opacity = '0';
+            section.style.transform = 'translateY(20px)';
+            observer.observe(section);
+        });
+    </script>
 </body>
+</html>