mirror of
https://github.com/Shineii86/AniKotoAPI.git
synced 2026-10-22 19:05:11 +00:00
v1.5.5: Redesign landing page (AniNewsAPI style)
- New index.html: dark theme, ambient orbs, glassmorphism, sticky header - Hero section with terminal preview, animated gradient text - Stats ribbon, features grid, expandable endpoint docs - Interactive playground with 4 demos (search, stream, random, schedule) - New 404.html with animated 404 code and action buttons - Responsive mobile design
This commit is contained in:
Sʜɪɴᴇɪ Nᴏᴜᴢᴇɴ
+74
-57
@@ -1,65 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 - Not Found | AniKatoAPI</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
color: #fff;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.container {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 8rem;
|
||||
margin-bottom: 20px;
|
||||
background: linear-gradient(90deg, #e94560, #0f3460);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 20px;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
p {
|
||||
color: #a0a0a0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
background: #e94560;
|
||||
color: #fff;
|
||||
padding: 12px 30px;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
a:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow 0 10px 20px rgba(233, 69, 96, 0.3);
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>404 - AniKatoAPI</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⛩</text></svg>" />
|
||||
<style>
|
||||
:root {
|
||||
--bg-primary: #0a0a12;
|
||||
--text-primary: #eee;
|
||||
--text-secondary: #9a9ab0;
|
||||
--accent-pink: #f43f8e;
|
||||
--accent-purple: #a855f7;
|
||||
--accent-indigo: #6366f1;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--glass: rgba(255,255,255,0.03);
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: var(--bg-primary); color: var(--text-primary);
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden; position: relative;
|
||||
}
|
||||
.ambient { position: fixed; inset: 0; pointer-events: none; }
|
||||
.orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .12; }
|
||||
.orb-1 { width: 500px; height: 500px; background: var(--accent-pink); top: -150px; left: -100px; animation: drift 20s ease-in-out infinite; }
|
||||
.orb-2 { width: 400px; height: 400px; background: var(--accent-purple); bottom: -100px; right: -80px; animation: drift 16s ease-in-out infinite reverse; }
|
||||
@keyframes drift {
|
||||
0%,100% { transform: translate(0,0) scale(1); }
|
||||
50% { transform: translate(30px,-20px) scale(1.06); }
|
||||
}
|
||||
.container {
|
||||
position: relative; z-index: 1; text-align: center; padding: 40px;
|
||||
}
|
||||
.code {
|
||||
font-size: clamp(6rem, 15vw, 12rem); font-weight: 900; line-height: 1;
|
||||
background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple), var(--accent-indigo));
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes float {
|
||||
0%,100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
.title { font-size: 1.4rem; font-weight: 600; margin: 16px 0 8px; }
|
||||
.desc { color: var(--text-secondary); font-size: .95rem; margin-bottom: 28px; line-height: 1.6; }
|
||||
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn {
|
||||
padding: 11px 24px; border-radius: 10px; font-size: .88rem; font-weight: 600;
|
||||
text-decoration: none; transition: all .2s; display: inline-flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
|
||||
color: #fff; border: none;
|
||||
}
|
||||
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }
|
||||
.btn-ghost {
|
||||
background: var(--glass); border: 1px solid var(--border); color: var(--text-secondary);
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
|
||||
.footer-note {
|
||||
margin-top: 40px; color: #444; font-size: .72rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>404</h1>
|
||||
<h2>Endpoint Not Found</h2>
|
||||
<p>The API endpoint you're looking for doesn't exist.</p>
|
||||
<a href="/">Go to API Documentation</a>
|
||||
<div class="ambient"><div class="orb orb-1"></div><div class="orb orb-2"></div></div>
|
||||
<div class="container">
|
||||
<div class="code">404</div>
|
||||
<div class="title">This endpoint doesn't exist</div>
|
||||
<div class="desc">The path you're looking for isn't part of the AniKatoAPI.<br/>Check the docs or try a valid endpoint.</div>
|
||||
<div class="actions">
|
||||
<a href="/" class="btn btn-primary">Home</a>
|
||||
<a href="/api" class="btn btn-ghost">API Status</a>
|
||||
<a href="https://github.com/Shineii86/AniKatoAPI#readme" class="btn btn-ghost" target="_blank">Docs</a>
|
||||
</div>
|
||||
<div class="footer-note">AniKatoAPI · Made by Sʜɪɴᴇɪ Nᴏᴜᴢᴇɴ</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user