| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Celeskry API | Developer Portal</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg: #020617; |
| --card-bg: rgba(15, 23, 42, 0.4); |
| --primary: #6366f1; |
| } |
| |
| html { font-size: 13px; } |
| |
| body { |
| font-family: 'Plus Jakarta Sans', sans-serif; |
| background-color: var(--bg); |
| color: #f1f5f9; |
| overflow-x: hidden; |
| letter-spacing: -0.01em; |
| } |
| |
| .bg-dots { |
| background-image: radial-gradient(#1e293b 0.5px, transparent 0.5px); |
| background-size: 20px 20px; |
| } |
| |
| |
| @keyframes shimmer { |
| 0% { transform: translateX(-100%); } |
| 100% { transform: translateX(100%); } |
| } |
| |
| .skeleton-loader { |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.05), transparent); |
| animation: shimmer 1.2s infinite; |
| z-index: 10; |
| display: none; |
| } |
| |
| .loading .skeleton-loader { display: block; } |
| .loading pre { opacity: 0.2; filter: blur(4px); transition: all 0.3s; } |
| |
| |
| .api-card { |
| position: relative; |
| background: var(--card-bg); |
| border-radius: 16px; |
| border: 1px solid rgba(255, 255, 255, 0.03); |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| cursor: pointer; |
| } |
| |
| .api-card::before { |
| content: ""; |
| position: absolute; |
| inset: -1px; |
| border-radius: 16px; |
| padding: 1.2px; |
| background: conic-gradient(from var(--border-angle), transparent 20%, var(--primary), #a855f7, transparent 80%); |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| mask-composite: exclude; |
| opacity: 0; |
| transition: opacity 0.3s; |
| pointer-events: none; |
| } |
| |
| @property --border-angle { |
| syntax: "<angle>"; |
| initial-value: 0deg; |
| inherits: false; |
| } |
| |
| @keyframes rotateBorder { to { --border-angle: 360deg; } } |
| |
| .api-card:hover, .api-card.active { |
| background: rgba(30, 41, 59, 0.5); |
| border-color: transparent; |
| transform: translateY(-2px); |
| } |
| |
| .api-card.active::before { |
| opacity: 1; |
| animation: rotateBorder 3s linear infinite; |
| } |
| |
| |
| .copy-btn { display: grid; place-items: center; } |
| .copy-btn svg { grid-area: 1 / 1; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } |
| .check-icon { transform: scale(0); opacity: 0; } |
| .copy-btn.copied .copy-icon { transform: scale(0); opacity: 0; } |
| .copy-btn.copied .check-icon { transform: scale(1); opacity: 1; } |
| |
| .code-snippet { |
| font-family: 'JetBrains Mono', monospace; |
| background: rgba(2, 6, 23, 0.8); |
| border: 1px solid rgba(255,255,255,0.03); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .no-scrollbar::-webkit-scrollbar { display: none; } |
| </style> |
| </head> |
| <header class="fixed top-0 w-full z-50 px-4 py-4"> |
| <div class="max-w-6xl mx-auto flex justify-between items-center bg-white/[0.02] backdrop-blur-xl border border-white/5 rounded-2xl px-5 py-2"> |
| <div class="flex items-center gap-2.5"> |
| <div class="w-7 h-7 flex items-center justify-center"> |
| <img src="https://i.ibb.co/ZRvw9G9q/T-n-D-n-60.png" alt="Celeskry Logo" class="w-full h-full object-contain"> |
| </div> |
| <span class="font-extrabold text-sm tracking-tighter uppercase text-white">Celeskry <span class="text-indigo-400">Docs</span></span> |
| </div> |
| <div class="flex gap-4 items-center"> |
| <span class="text-[9px] text-green-400 font-bold px-2 py-0.5 bg-green-500/10 rounded-full border border-green-500/20 tracking-wider">GATEWAY ONLINE</span> |
| </div> |
| </div> |
| </header> |
|
|
|
|
| <main class="max-w-6xl mx-auto px-4 pt-24 pb-12 flex-grow w-full"> |
| <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start"> |
| |
| <div class="lg:col-span-6 space-y-3"> |
| <div class="mb-6"> |
| <h1 class="text-2xl font-extrabold tracking-tight">Endpoints</h1> |
| <p class="text-slate-500 text-xs mt-1">Base URL: <code class="text-indigo-400 font-bold">celeskry-api-3.hf.space</code></p> |
| </div> |
|
|
| <section class="api-card p-4 active" data-api="tiktok" onclick="updateView('tiktok', this)"> |
| <div class="flex items-center justify-between mb-1"> |
| <div class="flex items-center gap-2"> |
| <span class="text-[9px] font-black px-1.5 py-0.5 bg-green-500/10 text-green-400 border border-green-500/10 rounded uppercase">Get</span> |
| <h3 class="font-bold text-sm">TikTok Downloader</h3> |
| </div> |
| <button onclick="copyLink('https://celeskry-api-3.hf.space/api/v1/tiktok/dl', this, event)" class="copy-btn p-1.5 hover:bg-white/10 rounded-md text-slate-500"> |
| <svg class="copy-icon w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> |
| <svg class="check-icon w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg> |
| </button> |
| </div> |
| <div class="text-[11px] font-mono text-indigo-400/80 mb-2">/api/v1/tiktok/dl</div> |
| <p class="text-slate-400 text-xs leading-relaxed">No-watermark extraction & media conversion (MP3/WAV).</p> |
| </section> |
|
|
| <section class="api-card p-4" data-api="youtube" onclick="updateView('youtube', this)"> |
| <div class="flex items-center justify-between mb-1"> |
| <div class="flex items-center gap-2"> |
| <span class="text-[9px] font-black px-1.5 py-0.5 bg-red-500/10 text-red-400 border border-red-500/10 rounded uppercase">Get</span> |
| <h3 class="font-bold text-sm">YouTube Downloader</h3> |
| </div> |
| <button onclick="copyLink('https://celeskry-api-3.hf.space/api/v1/youtube/dl', this, event)" class="copy-btn p-1.5 hover:bg-white/10 rounded-md text-slate-500"> |
| <svg class="copy-icon w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> |
| <svg class="check-icon w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg> |
| </button> |
| </div> |
| <div class="text-[11px] font-mono text-indigo-400/80 mb-2">/api/v1/youtube/dl</div> |
| <p class="text-slate-400 text-xs leading-relaxed">Queue-based system for downloading YT videos/audio.</p> |
| </section> |
|
|
| <section class="api-card p-4" data-api="xoso" onclick="updateView('xoso', this)"> |
| <div class="flex items-center justify-between mb-1"> |
| <div class="flex items-center gap-2"> |
| <span class="text-[9px] font-black px-1.5 py-0.5 bg-indigo-500/10 text-indigo-400 border border-indigo-500/10 rounded uppercase">Get</span> |
| <h3 class="font-bold text-sm">Vietnam Lottery</h3> |
| </div> |
| <button onclick="copyLink('https://celeskry-api-3.hf.space/api/v1/xoso/xsmn', this, event)" class="copy-btn p-1.5 hover:bg-white/10 rounded-md text-slate-500"> |
| <svg class="copy-icon w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> |
| <svg class="check-icon w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg> |
| </button> |
| </div> |
| <div class="text-[11px] font-mono text-indigo-400/80 mb-2">/api/v1/xoso/xsmn</div> |
| <p class="text-slate-400 text-xs leading-relaxed">Real-time lottery results (MB/MN/MT) with date filtering.</p> |
| </section> |
|
|
| <section class="api-card p-4" data-api="hentai" onclick="updateView('hentai', this)"> |
| <div class="flex items-center justify-between mb-1"> |
| <div class="flex items-center gap-2"> |
| <span class="text-[9px] font-black px-1.5 py-0.5 bg-pink-500/10 text-pink-400 border border-pink-500/10 rounded uppercase">Get</span> |
| <h3 class="font-bold text-sm">Hentai API (Grouped)</h3> |
| </div> |
| <button onclick="copyLink('https://celeskry-api-3.hf.space/api/v1/hentai/newest', this, event)" class="copy-btn p-1.5 hover:bg-white/10 rounded-md text-slate-500"> |
| <svg class="copy-icon w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> |
| <svg class="check-icon w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg> |
| </button> |
| </div> |
| <div class="text-[11px] font-mono text-indigo-400/80 mb-2">/api/v1/hentai/[newest|info|random]</div> |
| <p class="text-slate-400 text-xs leading-relaxed">Access latest releases, random picks, and detailed metadata.</p> |
| </section> |
| </div> |
|
|
| <div class="lg:col-span-6 lg:sticky lg:top-24 space-y-4" id="display-panel"> |
| |
| <div class="code-snippet rounded-xl shadow-2xl"> |
| <div class="skeleton-loader"></div> |
| <div class="px-4 py-2 border-b border-white/5 bg-white/[0.01] flex justify-between items-center"> |
| <div class="flex items-center gap-3"> |
| <span class="text-[9px] font-bold text-indigo-400 uppercase tracking-widest">Example Request</span> |
| <div id="example-switcher" class="hidden flex bg-white/5 rounded-lg p-0.5"> |
| <button onclick="toggleHentaiExample(0)" class="ex-btn active px-2 py-0.5 text-[8px] font-bold rounded">NEWEST</button> |
| <button onclick="toggleHentaiExample(1)" class="ex-btn px-2 py-0.5 text-[8px] font-bold rounded">INFO</button> |
|
|
| <button onclick="toggleHentaiExample(2)" class="ex-btn px-2 py-0.5 text-[8px] font-bold rounded">RD</button> |
| </div> |
| </div> |
| <div class="flex gap-2 items-center"> |
| <span class="text-[8px] text-slate-500 font-mono">PYTHON 3.10+</span> |
| <button onclick="copyRaw('code', this)" class="copy-btn p-1 hover:bg-white/10 rounded text-slate-500"> |
| <svg class="copy-icon w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> |
| <svg class="check-icon w-3 h-3 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg> |
| </button> |
| </div> |
| </div> |
| <div class="p-5 overflow-x-auto no-scrollbar min-h-[140px]"> |
| <pre id="code-display" class="text-xs text-indigo-200 leading-5 whitespace-pre transition-all duration-300"></pre> |
| </div> |
| </div> |
|
|
| <div class="code-snippet rounded-xl shadow-2xl bg-[#020617]/40"> |
| <div class="skeleton-loader"></div> |
| <div class="px-4 py-2 border-b border-white/5 bg-white/[0.01] flex justify-between items-center"> |
| <span class="text-[9px] font-bold text-green-400 uppercase tracking-widest">JSON Response</span> |
| <button onclick="copyRaw('json', this)" class="copy-btn p-1 hover:bg-white/10 rounded text-slate-500"> |
| <svg class="copy-icon w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> |
| <svg class="check-icon w-3 h-3 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg> |
| </button> |
| </div> |
| <div class="p-5 overflow-x-auto no-scrollbar min-h-[180px]"> |
| <pre id="json-display" class="text-[11px] text-slate-300 leading-5 whitespace-pre transition-all duration-300"></pre> |
| </div> |
| </div> |
| </div> |
|
|
| </div> |
| </main> |
|
|
| <footer class="w-full bg-slate-950/80 border-t border-white/10 backdrop-blur-md pt-12 pb-8"> |
| <div class="max-w-6xl mx-auto px-6"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"> |
| <div class="md:col-span-2"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="w-8 h-8 flex items-center justify-center"> |
| <img src="https://i.ibb.co/ZRvw9G9q/T-n-D-n-60.png" alt="Celeskry Logo" class="w-full h-full object-contain"> |
| </div> |
| <span class="font-extrabold text-lg text-white tracking-tighter uppercase italic">Celeskry <span class="text-indigo-500">API</span></span> |
| </div> |
|
|
| <p class="text-slate-400 text-xs leading-relaxed max-w-sm mb-6"> |
| Cung cấp các giải pháp API mạnh mẽ, ổn định và bảo mật cho lập trình viên. |
| Được tối ưu hóa cho hiệu suất cao và khả năng tích hợp linh hoạt. |
| </p> |
| <div class="flex gap-4"> |
| <a href="#" class="p-2 bg-white/5 rounded-lg border border-white/5 hover:bg-indigo-500/20 hover:border-indigo-500/30 transition-all"> |
| <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 24 24"><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> |
| </a> |
| <a href="#" class="p-2 bg-white/5 rounded-lg border border-white/5 hover:bg-indigo-500/20 hover:border-indigo-500/30 transition-all"> |
| <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.13 0 .19z"/></svg> |
| </a> |
| </div> |
| </div> |
|
|
| <div> |
| <h4 class="text-white text-xs font-bold uppercase tracking-widest mb-6">Sản phẩm</h4> |
| <ul class="space-y-4"> |
| <li><a href="#" class="text-slate-500 hover:text-indigo-400 text-xs transition-colors">TikTok API</a></li> |
| <li><a href="#" class="text-slate-500 hover:text-indigo-400 text-xs transition-colors">YouTube API</a></li> |
| <li><a href="#" class="text-slate-500 hover:text-indigo-400 text-xs transition-colors">Lottery Tracker</a></li> |
| <li><a href="#" class="text-slate-500 hover:text-indigo-400 text-xs transition-colors">Hentai Archive</a></li> |
| </ul> |
| </div> |
|
|
| <div> |
| <h4 class="text-white text-xs font-bold uppercase tracking-widest mb-6">Liên hệ</h4> |
| <div class="space-y-4"> |
| <div class="flex items-center gap-3"> |
| <div class="w-1.5 h-1.5 rounded-full bg-indigo-500"></div> |
| <p class="text-xs text-slate-400">Trà Vinh • Việt Nam</p> |
| </div> |
| <div class="flex items-center gap-3"> |
| <div class="w-1.5 h-1.5 rounded-full bg-indigo-500"></div> |
| <p class="text-xs text-slate-400">t.me/Dev_Celeste</p> |
| </div> |
| <div class="flex items-center gap-3"> |
| <div class="w-1.5 h-1.5 rounded-full bg-green-500"></div> |
| <p class="text-[10px] text-green-400 font-bold uppercase font-mono">Status: Stable</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4"> |
| <p class="text-[10px] text-slate-600 font-bold uppercase tracking-widest"> |
| © 2026 Celeskry API. All rights reserved. |
| </p> |
| <div class="flex gap-6"> |
| <span class="text-[10px] text-slate-600 font-bold uppercase tracking-widest cursor-help hover:text-slate-400 transition-colors">Privacy Policy</span> |
| <span class="text-[10px] text-slate-600 font-bold uppercase tracking-widest cursor-help hover:text-slate-400 transition-colors">Terms of Service</span> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
|
|
| <script> |
| const apiData = { |
| tiktok: { |
| rawCode: `import requests\n\nparams = {\n "url": "https://vt.tiktok.com/ZSugHcHwV/",\n "apikey": "YOUR_KEY",\n "hd": 1\n}\n\nres = requests.get("https://celeskry-api-3.hf.space/api/v1/tiktok/dl", params=params)\nprint(res.json())`, |
| code: `<span class="text-purple-400">import</span> requests\n\nparams = {\n <span class="text-green-400">"url"</span>: <span class="text-green-400">"https://vt.tiktok.com/..."</span>,\n <span class="text-green-400">"apikey"</span>: <span class="text-green-400">"YOUR_KEY"</span>,\n <span class="text-green-400">"hd"</span>: <span class="text-amber-400">1</span>\n}\n\nres = requests.get(<span class="text-green-400">"https://.../api/v1/tiktok/dl"</span>, params=params)\n<span class="text-purple-400">print</span>(res.json())`, |
| rawJson: `{\n "ok": true,\n "status": "success",\n "video_info": {\n "title": "Trẻ Cho Anh remix",\n "duration": 285,\n "author": { "nickname": "MEI MUSIC" }\n },\n "download_links": {\n "video": "/api/v1/tiktok/cdn?token=...",\n "audio_mp3": "/api/v1/tiktok/cdn?token=..."\n },\n "stats": { "likes": 19054, "views": 289260 }\n}`, |
| json: `{\n <span class="text-indigo-400">"ok"</span>: <span class="text-amber-400">true</span>,\n <span class="text-indigo-400">"status"</span>: <span class="text-green-400">"success"</span>,\n <span class="text-indigo-400">"video_info"</span>: {\n <span class="text-indigo-400">"title"</span>: <span class="text-green-400">"Trẻ Cho Anh remix"</span>,\n <span class="text-indigo-400">"duration"</span>: <span class="text-amber-400">285</span>\n },\n <span class="text-indigo-400">"download_links"</span>: {\n <span class="text-indigo-400">"video"</span>: <span class="text-green-400">"/api/v1/tiktok/cdn?token=..."</span>\n }\n}` |
| }, |
| youtube: { |
| rawCode: `import requests\n\nparams = {\n "url": "https://youtu.be/DjribxozAQw",\n "format": "mp3",\n "apikey": "YOUR_KEY"\n}\n\nres = requests.get("https://celeskry-api-3.hf.space/api/v1/youtube/dl", params=params)\nprint(res.json())`, |
| code: `<span class="text-purple-400">import</span> requests\n\nparams = {\n <span class="text-green-400">"url"</span>: <span class="text-green-400">"https://youtu.be/..."</span>,\n <span class="text-green-400">"format"</span>: <span class="text-green-400">"mp3"</span>,\n <span class="text-green-400">"apikey"</span>: <span class="text-green-400">"YOUR_KEY"</span>\n}\n\nres = requests.get(<span class="text-green-400">"https://.../api/v1/youtube/dl"</span>, params=params)\n<span class="text-purple-400">print</span>(res.json())`, |
| rawJson: `{\n "ok": true,\n "message": "Job created.",\n "job_id": "f15a750b-...",\n "status_url": "/api/v1/youtube/status?job_id=..."\n}`, |
| json: `{\n <span class="text-indigo-400">"ok"</span>: <span class="text-amber-400">true</span>,\n <span class="text-indigo-400">"message"</span>: <span class="text-green-400">"Job created."</span>,\n <span class="text-indigo-400">"job_id"</span>: <span class="text-green-400">"f15a750b-..."</span>\n}` |
| }, |
| xoso: { |
| rawCode: `import requests\n\nparams = {\n "type": "latest",\n "apikey": "YOUR_KEY"\n}\n\nres = requests.get("https://celeskry-api-3.hf.space/api/v1/xoso/xsmn", params=params)\nprint(res.json())`, |
| code: `<span class="text-purple-400">import</span> requests\n\nparams = {\n <span class="text-green-400">"type"</span>: <span class="text-green-400">"latest"</span>,\n <span class="text-green-400">"apikey"</span>: <span class="text-green-400">"YOUR_KEY"</span>\n}\n\nres = requests.get(<span class="text-green-400">"https://.../api/v1/xoso/xsmn"</span>, params=params)\n<span class="text-purple-400">print</span>(res.json())`, |
| rawJson: `{\n "ok": true,\n "meta": { "version": "0.6.0" },\n "data": [\n {\n "province": "TP HCM",\n "results": { "DB": "442630", "G1": "74124" },\n "is_completed": true\n }\n ]\n}`, |
| json: `{\n <span class="text-indigo-400">"ok"</span>: <span class="text-amber-400">true</span>,\n <span class="text-indigo-400">"data"</span>: [\n { \n <span class="text-indigo-400">"province"</span>: <span class="text-green-400">"TP HCM"</span>,\n <span class="text-indigo-400">"results"</span>: { <span class="text-indigo-400">"DB"</span>: <span class="text-green-400">"442630"</span> } \n }\n ]\n}` |
| }, |
| hentai: [ |
| { |
| name: "NEWEST", |
| rawCode: `import requests\n\nparams = {"apikey": "YOUR_KEY"}\nres = requests.get("https://celeskry-api-3.hf.space/api/v1/hentai/newest", params=params)\nprint(res.json())`, |
| code: `<span class="text-purple-400">import</span> requests\n\n<span class="text-slate-500"># Lấy danh sách mới nhất</span>\nparams = {<span class="text-green-400">"apikey"</span>: <span class="text-green-400">"YOUR_KEY"</span>}\nres = requests.get(<span class="text-green-400">"https://.../v1/hentai/newest"</span>, params=params)\n<span class="text-purple-400">print</span>(res.json())`, |
| rawJson: `{\n "ok": true,\n "total": 24,\n "items": [\n {\n "title": "Sister Breeder",\n "slug": "sister-breeder-4",\n "episode": 6,\n "studios": ["T-Rex"]\n }\n ]\n}`, |
| json: `{\n <span class="text-indigo-400">"ok"</span>: <span class="text-amber-400">true</span>,\n <span class="text-indigo-400">"total"</span>: <span class="text-amber-400">24</span>,\n <span class="text-indigo-400">"items"</span>: [\n { <span class="text-indigo-400">"title"</span>: <span class="text-green-400">"Sister Breeder"</span>, <span class="text-indigo-400">"episode"</span>: <span class="text-amber-400">6</span> }\n ]\n}` |
| }, |
| { |
| name: "INFO", |
| rawCode: `import requests\n\nparams = {\n "slug": "sister-breeder-4",\n "apikey": "YOUR_KEY"\n}\nres = requests.get("https://celeskry-api-3.hf.space/api/v1/hentai/info", params=params)\nprint(res.json())`, |
| code: `<span class="text-purple-400">import</span> requests\n\n<span class="text-slate-500"># Chi tiết qua slug</span>\nparams = {\n <span class="text-green-400">"slug"</span>: <span class="text-green-400">"sister-breeder-4"</span>,\n <span class="text-green-400">"apikey"</span>: <span class="text-green-400">"YOUR_KEY"</span>\n}\nres = requests.get(<span class="text-green-400">"https://.../v1/hentai/info"</span>, params=params)\n<span class="text-purple-400">print</span>(res.json())`, |
| rawJson: `{\n "ok": true,\n "title": "Sister Breeder",\n "views": 150240,\n "genres": ["Romance"],\n "embed_url": "https://..."\n}`, |
| json: `{\n <span class="text-indigo-400">"ok"</span>: <span class="text-amber-400">true</span>,\n <span class="text-indigo-400">"title"</span>: <span class="text-green-400">"Sister Breeder"</span>,\n <span class="text-indigo-400">"views"</span>: <span class="text-amber-400">150240</span>\n}` |
| }, |
| { |
| name: "RANDOM", |
| rawCode: `import requests\n\nparams = {\n "limit": "2",\n "apikey": "YOUR_KEY"\n}\nres = requests.get("https://celeskry-api-3.hf.space/api/v1/hentai/random", params=params)\nprint(res.json())`, |
| code: `<span class="text-purple-400">import</span> requests\n\n<span class="text-slate-500"># Lấy ngẫu nhiên phim</span>\nparams = {\n <span class="text-green-400">"limit"</span>: <span class="text-green-400">"2"</span>,\n <span class="text-green-400">"apikey"</span>: <span class="text-green-400">"YOUR_KEY"</span>\n}\nres = requests.get(<span class="text-green-400">"https://.../v1/hentai/random"</span>, params=params)\n<span class="text-purple-400">print</span>(res.json())`, |
| rawJson: `{\n "ok": true,\n "total_pool": 57,\n "item": [\n { "title": "Natsu to Hako", "slug": "natsu-to-hako-2" }\n ]\n}`, |
| json: `{\n <span class="text-indigo-400">"ok"</span>: <span class="text-amber-400">true</span>,\n <span class="text-indigo-400">"total_pool"</span>: <span class="text-amber-400">57</span>,\n <span class="text-indigo-400">"item"</span>: [\n { <span class="text-indigo-400">"title"</span>: <span class="text-green-400">"Natsu to Hako"</span> }\n ]\n}` |
| } |
| ] |
| }; |
| |
| |
| let activeId = 'tiktok'; |
| let hentaiIdx = 0; |
| |
| function updateView(apiId, el) { |
| activeId = apiId; |
| const panel = document.getElementById('display-panel'); |
| const switcher = document.getElementById('example-switcher'); |
| |
| document.querySelectorAll('.api-card').forEach(c => c.classList.remove('active')); |
| el.classList.add('active'); |
| |
| if (apiId === 'hentai') { |
| switcher.classList.remove('hidden'); |
| renderHentai(); |
| } else { |
| switcher.classList.add('hidden'); |
| panel.querySelectorAll('.code-snippet').forEach(s => s.classList.add('loading')); |
| setTimeout(() => { |
| document.getElementById('code-display').innerHTML = apiData[apiId].code; |
| document.getElementById('json-display').innerHTML = apiData[apiId].json; |
| panel.querySelectorAll('.code-snippet').forEach(s => s.classList.remove('loading')); |
| }, 300); |
| } |
| } |
| |
| function toggleHentaiExample(idx) { |
| hentaiIdx = idx; |
| document.querySelectorAll('.ex-btn').forEach((b, i) => { |
| i === idx ? b.classList.add('active', 'bg-indigo-600') : b.classList.remove('active', 'bg-indigo-600'); |
| }); |
| renderHentai(); |
| } |
| |
| function renderHentai() { |
| const data = apiData.hentai[hentaiIdx]; |
| const panel = document.getElementById('display-panel'); |
| panel.querySelectorAll('.code-snippet').forEach(s => s.classList.add('loading')); |
| setTimeout(() => { |
| document.getElementById('code-display').innerHTML = data.code; |
| document.getElementById('json-display').innerHTML = data.json; |
| panel.querySelectorAll('.code-snippet').forEach(s => s.classList.remove('loading')); |
| }, 300); |
| } |
| |
| async function copyRaw(type, btn) { |
| let content; |
| if (activeId === 'hentai') { |
| content = type === 'code' ? apiData.hentai[hentaiIdx].rawCode : apiData.hentai[hentaiIdx].rawJson; |
| } else { |
| content = type === 'code' ? apiData[activeId].rawCode : apiData[activeId].rawJson; |
| } |
| try { |
| await navigator.clipboard.writeText(content); |
| btn.classList.add('copied'); |
| setTimeout(() => btn.classList.remove('copied'), 500); |
| } catch (err) { console.error(err); } |
| } |
| |
| async function copyLink(text, btn, e) { |
| e.stopPropagation(); |
| try { |
| await navigator.clipboard.writeText(text); |
| btn.classList.add('copied'); |
| setTimeout(() => btn.classList.remove('copied'), 500); |
| } catch (err) { console.error(err); } |
| } |
| |
| window.onload = () => updateView('tiktok', document.querySelector('[data-api="tiktok"]')); |
| </script> |
| <style> |
| .ex-btn.active { background: #4f46e5; color: white; } |
| .ex-btn { color: #94a3b8; transition: all 0.2s; } |
| </style> |
| </body> |
| </html> |
|
|
