mirror of
https://github.com/Shineii86/MiruroAPI.git
synced 2026-10-22 10:15:10 +00:00
Replaced placeholder SVGs with actual scraped assets: - favicon.svg → icon-dark.svg (real Miruro dark mode SVG) - share.svg → og-image.png (real maskable icon for OG/Twitter) - Added: icon-light.svg, icon-512x512.png, favicon.ico, apple-touch-icon - Nav logos now use real Miruro icon image instead of text div - OG meta tags updated: SVG→PNG for proper social previews - Both index.html and docs.html updated - Version badge: v1.1.0 → v1.2.0
549 lines
24 KiB
HTML
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/og-image.png">
|
|
<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/og-image.png">
|
|
<meta property="og:image:type" content="image/png">
|
|
<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/og-image.png">
|
|
<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 (Miruro official) ──────────────── -->
|
|
<link rel="icon" type="image/svg+xml" href="/icon-dark.svg">
|
|
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512x512.png">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
|
|
<link rel="mask-icon" href="/icon-dark.svg" color="#38bdf8">
|
|
<link rel="icon" href="/favicon.ico" sizes="48x48">
|
|
|
|
<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">
|
|
<img src="/icon-512x512.png" alt="Miruro" class="nav-logo" style="object-fit:contain; filter:brightness(0) invert();">
|
|
<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.2.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>
|