Files
MiruroAPI/public/index.html
T
Sʜɪɴᴇɪ Nᴏᴜᴢᴇɴ 18a73c324e feat: premium landing page, Swagger UI docs, full OG meta stack
- Premium landing page with nav, hero, stats, streaming flow, endpoint cards
- Full OG meta stack (OG, Twitter Card, JSON-LD WebAPI schema)
- SVG favicon matching miruro.tv icon style
- SVG share image for social sharing (1200x630)
- Dedicated docs.html with custom header and Swagger UI styling
- Canonical URLs, theme-color, robots meta
- Apple-touch-icon and mask-icon from miruro.tv
- Responsive design (mobile-friendly)
- Font: Inter (Google Fonts)
2026-06-09 14:38:44 +05:30

549 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ═══════════════════════════════════════════════════════════ -->
<!-- FULL OG META STACK — Every useful tag for social sharing -->
<!-- ═══════════════════════════════════════════════════════════ -->
<!-- ──────────────── 1. Basic OG Tags ──────────────── -->
<meta property="og:title" content="MiruroAPI — Free Anime Streaming API">
<meta property="og:type" content="website">
<meta property="og:url" content="https://mirurotvapi.vercel.app">
<meta property="og:image" content="https://mirurotvapi.vercel.app/share.svg">
<meta property="og:description" content="Free RESTful API for anime streaming data. 16 endpoints, 12 providers, M3U8 streaming URLs. Powered by AniList GraphQL and Miruro.">
<!-- ──────────────── 2. Optional but Recommended OG Tags ──────── -->
<meta property="og:site_name" content="MiruroAPI">
<meta property="og:locale" content="en_US">
<!-- ──────────────── 3. Image Optimization ──────────────── -->
<meta property="og:image:secure_url" content="https://mirurotvapi.vercel.app/share.svg">
<meta property="og:image:type" content="image/svg+xml">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="MiruroAPI - Free Anime Streaming API">
<!-- ──────────────── 6. Twitter Card Tags ──────── -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MiruroAPI — Free Anime Streaming API">
<meta name="twitter:description" content="Free RESTful API for anime streaming data. 16 endpoints, 12 providers, M3U8 streaming URLs.">
<meta name="twitter:image" content="https://mirurotvapi.vercel.app/share.svg">
<meta name="twitter:image:alt" content="MiruroAPI - Free Anime Streaming API">
<meta name="twitter:domain" content="mirurotvapi.vercel.app">
<!-- ──────────────── 9. Generic Meta ──────────────── -->
<meta name="description" content="Free RESTful API for anime streaming data. 16 endpoints, 12 providers, M3U8 streaming URLs. Powered by AniList GraphQL and Miruro.">
<meta name="robots" content="index, follow">
<meta name="author" content="Shinei Nouzen">
<meta name="theme-color" content="#0b1622">
<link rel="canonical" href="https://mirurotvapi.vercel.app">
<!-- ──────────────── 10. JSON-LD Structured Data ──────── -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebAPI",
"name": "MiruroAPI",
"description": "Free RESTful API for anime streaming data. 16 endpoints, 12 providers, M3U8 streaming URLs.",
"url": "https://mirurotvapi.vercel.app",
"documentation": "https://mirurotvapi.vercel.app/docs",
"provider": {
"@type": "Organization",
"name": "MiruroAPI",
"url": "https://github.com/Shineii86/MiruroAPI"
},
"potentialAction": {
"@type": "SearchAction",
"target": "https://mirurotvapi.vercel.app/api/search?query={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!-- ──────────────── Favicon ──────────────── -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="512x512" href="https://miruro.tv/icon-512x512.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://miruro.tv/icon-192x192.png">
<link rel="apple-touch-icon" href="https://miruro.tv/icon-512x512.png">
<link rel="mask-icon" href="/favicon.svg" color="#38bdf8">
<title>MiruroAPI — Free Anime Streaming API</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0b1622;
--bg2: #0f172a;
--bg3: #1e293b;
--accent: #38bdf8;
--accent2: #818cf8;
--text: #e2e8f0;
--muted: #94a3b8;
--dim: #64748b;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: radial-gradient(ellipse at top, var(--bg2), var(--bg));
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
/* ──────────────── NAV ──────────────── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(11, 22, 34, 0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.05);
padding: 16px 40px;
display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo {
width: 36px; height: 36px; border-radius: 10px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
color: white; font-weight: 900; font-size: 18px;
}
.nav-title { color: var(--text); font-weight: 700; font-size: 1.1em; }
.nav-links { display: flex; gap: 24px; }
.nav-links a {
color: var(--muted); text-decoration: none; font-size: 0.9em;
font-weight: 500; transition: color 0.2s;
}
.nav-links a:hover { color: var(--accent); }
.nav-badge {
background: rgba(56, 189, 248, 0.12); color: var(--accent);
padding: 4px 12px; border-radius: 20px; font-size: 0.8em;
font-weight: 600; border: 1px solid rgba(56, 189, 248, 0.2);
}
/* ──────────────── HERO ──────────────── */
.hero {
padding: 160px 40px 80px;
text-align: center;
max-width: 900px;
margin: 0 auto;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.15);
padding: 8px 20px; border-radius: 30px;
font-size: 0.85em; color: var(--accent); font-weight: 500;
margin-bottom: 32px;
}
.hero-badge .dot {
width: 8px; height: 8px; border-radius: 50%;
background: #10b981; animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero h1 {
font-size: clamp(2.5em, 6vw, 4.5em);
font-weight: 900;
background: linear-gradient(135deg, var(--accent), var(--accent2), #a78bfa);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
line-height: 1.1; margin-bottom: 20px;
letter-spacing: -0.03em;
}
.hero p {
font-size: 1.2em; color: var(--muted); max-width: 650px;
margin: 0 auto 40px; line-height: 1.7; font-weight: 400;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 32px; border-radius: 12px;
font-size: 0.95em; font-weight: 600; text-decoration: none;
transition: all 0.3s ease;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: white; box-shadow: 0 4px 20px rgba(56, 189, 248, 0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(56, 189, 248, 0.4); }
.btn-secondary {
background: rgba(255,255,255,0.05); color: var(--text);
border: 1px solid rgba(255,255,255,0.1);
}
.btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
/* ──────────────── STATS ──────────────── */
.stats {
display: flex; justify-content: center; gap: 60px;
padding: 40px; margin: 0 auto 60px;
max-width: 800px;
}
.stat { text-align: center; }
.stat-num {
font-size: 2.5em; font-weight: 900;
background: linear-gradient(135deg, var(--accent), var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { color: var(--dim); font-size: 0.9em; margin-top: 4px; }
/* ──────────────── SECTIONS ──────────────── */
.section {
max-width: 1100px; margin: 0 auto; padding: 60px 40px;
}
.section-title {
font-size: 1.8em; font-weight: 800; margin-bottom: 12px;
letter-spacing: -0.02em;
}
.section-sub { color: var(--muted); margin-bottom: 40px; font-size: 1.05em; }
/* ──────────────── ENDPOINT CARDS ──────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 16px; padding: 24px;
transition: all 0.3s ease;
}
.card:hover {
border-color: rgba(56, 189, 248, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.card-method {
display: inline-block; font-size: 0.75em; font-weight: 700;
padding: 3px 10px; border-radius: 6px; margin-bottom: 12px;
}
.get { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.card-path {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 0.9em; color: var(--accent); font-weight: 500;
margin-bottom: 8px; word-break: break-all;
}
.card-desc { color: var(--muted); font-size: 0.9em; line-height: 1.5; }
/* ──────────────── STREAMING FLOW ──────────────── */
.flow {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
margin-top: 40px;
}
.flow-step {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 16px; padding: 32px 24px; text-align: center;
position: relative;
}
.flow-step::before {
content: attr(data-step);
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
color: white; font-size: 0.8em; font-weight: 700;
}
.flow-step h3 { margin: 12px 0 8px; font-weight: 700; }
.flow-step p { color: var(--muted); font-size: 0.9em; }
.flow-step code {
display: block; margin-top: 12px; padding: 12px;
background: rgba(0,0,0,0.3); border-radius: 8px;
font-size: 0.8em; color: var(--accent); text-align: left;
overflow-x: auto;
}
/* ──────────────── CODE BLOCK ──────────────── */
.code-block {
background: rgba(0,0,0,0.4); border-radius: 16px;
border: 1px solid rgba(255,255,255,0.05);
margin-top: 40px; overflow: hidden;
}
.code-header {
padding: 12px 20px; background: rgba(255,255,255,0.03);
border-bottom: 1px solid rgba(255,255,255,0.05);
font-size: 0.85em; color: var(--dim); font-weight: 500;
}
.code-block pre {
padding: 20px; margin: 0; overflow-x: auto;
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 0.85em; line-height: 1.6;
color: #a5b4fc;
}
/* ──────────────── PROVIDERS ──────────────── */
.providers {
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center; margin-top: 32px;
}
.provider {
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
padding: 8px 18px; border-radius: 10px;
font-size: 0.85em; color: var(--muted); font-weight: 500;
font-family: monospace;
}
/* ──────────────── FOOTER ──────────────── */
.footer {
text-align: center; padding: 60px 40px;
border-top: 1px solid rgba(255,255,255,0.05);
color: var(--dim); font-size: 0.9em;
}
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
/* ──────────────── RESPONSIVE ──────────────── */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links { display: none; }
.hero { padding: 120px 20px 60px; }
.stats { gap: 30px; flex-wrap: wrap; }
.flow { grid-template-columns: 1fr; }
.section { padding: 40px 20px; }
}
</style>
</head>
<body>
<!-- ──────────────── NAV ──────────────── -->
<nav class="nav">
<a href="/" class="nav-brand">
<div class="nav-logo">M</div>
<span class="nav-title">MiruroAPI</span>
</a>
<div class="nav-links">
<a href="/docs">Swagger UI</a>
<a href="/openapi.json">OpenAPI Spec</a>
<a href="/api/health">Health</a>
<a href="https://github.com/Shineii86/MiruroAPI" target="_blank">GitHub</a>
<span class="nav-badge">v1.1.0</span>
</div>
</nav>
<!-- ──────────────── HERO ──────────────── -->
<section class="hero">
<div class="hero-badge">
<span class="dot"></span>
All systems operational
</div>
<h1>MiruroAPI</h1>
<p>Free RESTful API for anime streaming data. 16 endpoints, 12 providers, M3U8 streaming URLs with subtitles and skip timestamps. Powered by AniList GraphQL and Miruro.</p>
<div class="hero-actions">
<a href="/docs" class="btn btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
Swagger UI Docs
</a>
<a href="/api/search?query=naruto&per_page=3" class="btn btn-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
Try Search API
</a>
<a href="https://github.com/Shineii86/MiruroAPI" class="btn btn-secondary" target="_blank">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
GitHub
</a>
</div>
</section>
<!-- ──────────────── STATS ──────────────── -->
<div class="stats">
<div class="stat">
<div class="stat-num">16</div>
<div class="stat-label">API Endpoints</div>
</div>
<div class="stat">
<div class="stat-num">12</div>
<div class="stat-label">Providers</div>
</div>
<div class="stat">
<div class="stat-num">5000+</div>
<div class="stat-label">Anime Indexed</div>
</div>
<div class="stat">
<div class="stat-num">M3U8</div>
<div class="stat-label">Stream Format</div>
</div>
</div>
<!-- ──────────────── STREAMING FLOW ──────────────── -->
<section class="section">
<h2 class="section-title">Streaming in 3 Steps</h2>
<p class="section-sub">Get M3U8 streaming URLs for any anime episode in 3 simple API calls.</p>
<div class="flow">
<div class="flow-step" data-step="1">
<h3>Get Episodes</h3>
<p>Fetch all episodes from multiple providers</p>
<code>GET /api/episodes/{anilistId}</code>
</div>
<div class="flow-step" data-step="2">
<h3>Get Sources</h3>
<p>Get M3U8 URL from episode ID</p>
<code>GET /api/watch/{provider}/{id}/{cat}/{slug}</code>
</div>
<div class="flow-step" data-step="3">
<h3>Play</h3>
<p>Feed M3U8 URL to any HLS player</p>
<code>hls.js / Video.js / VLC / mpv</code>
</div>
</div>
</section>
<!-- ──────────────── SEARCH ENDPOINTS ──────────────── -->
<section class="section">
<h2 class="section-title">Search & Discovery</h2>
<p class="section-sub">Full-text search, autocomplete, and advanced filtering powered by AniList GraphQL.</p>
<div class="grid">
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/search?query={name}</div>
<div class="card-desc">Full-text anime search with 20+ fields per result. Paginated.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/suggestions?query={name}</div>
<div class="card-desc">Lightweight autocomplete for dropdowns. Max 8 results.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/filter?genre=Action&format=TV</div>
<div class="card-desc">Advanced filter by genre, tag, year, season, format, status, sort.</div>
</div>
</div>
</section>
<!-- ──────────────── COLLECTIONS ──────────────── -->
<section class="section">
<h2 class="section-title">Collections</h2>
<p class="section-sub">Browse trending, popular, upcoming, and currently airing anime. All paginated.</p>
<div class="grid">
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/trending</div>
<div class="card-desc">Currently trending anime across the community.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/popular</div>
<div class="card-desc">Most popular anime of all time by user count.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/upcoming</div>
<div class="card-desc">Most anticipated anime that haven't aired yet.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/recent</div>
<div class="card-desc">Currently airing / this season's anime.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/spotlight</div>
<div class="card-desc">Top 10 trending + popular. Perfect for hero banners.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/schedule</div>
<div class="card-desc">Upcoming episodes with UNIX timestamps.</div>
</div>
</div>
</section>
<!-- ──────────────── ANIME DETAILS ──────────────── -->
<section class="section">
<h2 class="section-title">Anime Details</h2>
<p class="section-sub">Complete anime metadata — characters, staff, relations, recommendations, trailer, stats.</p>
<div class="grid">
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/info/{anilistId}</div>
<div class="card-desc">Everything AniList has to offer. 25 characters, staff, relations, recommendations, trailer, stats.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/anime/{id}/characters</div>
<div class="card-desc">Paginated characters with Japanese voice actors.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/anime/{id}/relations</div>
<div class="card-desc">Sequels, prequels, side stories, spin-offs.</div>
</div>
<div class="card">
<span class="card-method get">GET</span>
<div class="card-path">/api/anime/{id}/recommendations</div>
<div class="card-desc">Community recommendations sorted by rating.</div>
</div>
</div>
</section>
<!-- ──────────────── PROVIDERS ──────────────── -->
<section class="section" style="text-align: center;">
<h2 class="section-title">Streaming Providers</h2>
<p class="section-sub">12 providers with different strengths — sub, dub, download, skip times, thumbnails.</p>
<div class="providers">
<div class="provider">kiwi</div>
<div class="provider">pewe</div>
<div class="provider">bee</div>
<div class="provider">bonk</div>
<div class="provider">bun</div>
<div class="provider">ally</div>
<div class="provider">nun</div>
<div class="provider">twin</div>
<div class="provider">cog</div>
<div class="provider">moo</div>
<div class="provider">hop</div>
<div class="provider">telli</div>
</div>
</section>
<!-- ──────────────── QUICK START ──────────────── -->
<section class="section">
<h2 class="section-title">Quick Start</h2>
<p class="section-sub">Get started in seconds. No API key required.</p>
<div class="code-block">
<div class="code-header">JavaScript — Fetch search results</div>
<pre>const res = await fetch("https://mirurotvapi.vercel.app/api/search?query=naruto");
const { success, results } = await res.json();
console.log(results.total); // 5000+
console.log(results.results[0].title.romaji); // "NARUTO"</pre>
</div>
<div class="code-block" style="margin-top: 16px;">
<div class="code-header">JavaScript — Get streaming sources</div>
<pre>// Step 1: Get episodes
const eps = await fetch("https://mirurotvapi.vercel.app/api/episodes/20");
const { results } = await eps.json();
const firstEp = results.providers.kiwi.episodes.sub[0];
// Step 2: Get M3U8 URL
const stream = await fetch(`https://mirurotvapi.vercel.app${firstEp.id}`);
const { results: sources } = await stream.json();
console.log(sources.streams[0].url); // "https://.../master.m3u8"</pre>
</div>
<div class="code-block" style="margin-top: 16px;">
<div class="code-header">cURL — Quick test</div>
<pre>curl "https://mirurotvapi.vercel.app/api/search?query=one+piece&per_page=3"</pre>
</div>
</section>
<!-- ──────────────── FOOTER ──────────────── -->
<footer class="footer">
<p>
<a href="/docs">Swagger UI</a> ·
<a href="/openapi.json">OpenAPI Spec</a> ·
<a href="/api/health">Health</a> ·
<a href="https://github.com/Shineii86/MiruroAPI" target="_blank">GitHub</a>
</p>
<p style="margin-top: 12px; color: #475569;">
Powered by <a href="https://anilist.co" target="_blank">AniList GraphQL</a> + <a href="https://miruro.to" target="_blank">Miruro</a> streaming providers
</p>
<p style="margin-top: 8px; color: #334155; font-size: 0.8em;">
v1.1.0 · MIT License · Built by <a href="https://github.com/Shineii86" target="_blank">Shinei Nouzen</a>
</p>
</footer>
</body>
</html>