598 lines
30 KiB
HTML
598 lines
30 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Skinbase Nova – Preview</title>
|
||
|
||
<!-- Tailwind CDN (for template preview). In production use Vite + Tailwind build. -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<style>
|
||
/* Small extras Tailwind doesn’t cover well in CDN mode */
|
||
.sb-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
|
||
.sb-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }
|
||
.sb-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,.15); }
|
||
</style>
|
||
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
sb: {
|
||
bg: "#141416",
|
||
top: "#1c1c1f",
|
||
panel: "#191a1f",
|
||
panel2: "#15161b",
|
||
line: "#2a2a33",
|
||
text: "#e3e3e3",
|
||
muted: "#a6a6b0",
|
||
blue: "#4da3ff",
|
||
}
|
||
},
|
||
boxShadow: {
|
||
sb: "0 12px 30px rgba(0,0,0,.45)",
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</head>
|
||
|
||
<body class="bg-sb-bg text-sb-text">
|
||
<!-- TOPBAR -->
|
||
<header class="fixed inset-x-0 top-0 z-50 h-16 bg-sb-top border-b border-sb-line">
|
||
<div class="mx-auto w-full h-full px-4 flex items-center gap-3">
|
||
<!-- Mobile hamburger -->
|
||
<button id="btnSidebar" class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/5">
|
||
<!-- bars -->
|
||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M4 6h16M4 12h16M4 18h16"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<!-- Logo -->
|
||
<a href="#" class="flex items-center gap-2 pr-2">
|
||
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-orange-400 to-yellow-300 shadow-sm"></div>
|
||
<div class="text-lg font-semibold tracking-wide">
|
||
<span class="text-white">Skinbase</span><span class="text-sb-muted text-sm">.org</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Left nav -->
|
||
<nav class="hidden lg:flex items-center gap-4 text-sm text-sb-muted">
|
||
<a class="hover:text-white" href="#">Join</a>
|
||
<div class="relative">
|
||
<button class="hover:text-white inline-flex items-center gap-1" data-dd="signin">
|
||
Sign in
|
||
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M6 9l6 6 6-6"/>
|
||
</svg>
|
||
</button>
|
||
<!-- optional dropdown -->
|
||
<div id="dd-signin" class="hidden absolute left-0 mt-2 w-56 rounded-lg bg-sb-panel border border-sb-line shadow-sb overflow-hidden">
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Sign in</a>
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Forgot password</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<button class="hover:text-white inline-flex items-center gap-1" data-dd="browse">
|
||
Browse
|
||
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M6 9l6 6 6-6"/>
|
||
</svg>
|
||
</button>
|
||
<div id="dd-browse" class="hidden absolute left-0 mt-2 w-64 rounded-lg bg-sb-panel border border-sb-line shadow-sb overflow-visible">
|
||
<div class="rounded-lg overflow-hidden">
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">All Artworks</a>
|
||
|
||
<!-- Submenu: Types -->
|
||
<div class="relative group" data-submenu>
|
||
<button type="button" class="w-full px-4 py-2 text-sm hover:bg-white/5 inline-flex items-center justify-between gap-2" data-submenu-toggle aria-expanded="false">
|
||
<span>Types</span>
|
||
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M9 6l6 6-6 6"/>
|
||
</svg>
|
||
</button>
|
||
<div class="hidden group-hover:block absolute left-full top-0 ml-2 w-64 rounded-lg bg-sb-panel border border-sb-line shadow-sb overflow-hidden z-50" data-submenu-menu>
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Photography</a>
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Wallpapers</a>
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Skins</a>
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Other</a>
|
||
</div>
|
||
</div>
|
||
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Featured Artwork</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<button class="hover:text-white inline-flex items-center gap-1" data-dd="cats">
|
||
Categories
|
||
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M6 9l6 6 6-6"/>
|
||
</svg>
|
||
</button>
|
||
<div id="dd-cats" class="hidden absolute left-0 mt-2 w-64 rounded-lg bg-sb-panel border border-sb-line shadow-sb overflow-hidden">
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Fantasy</a>
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Sci-Fi</a>
|
||
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="#">Nature</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Search -->
|
||
<div class="flex-1 flex items-center justify-center">
|
||
<div class="w-full max-w-xl relative">
|
||
<input
|
||
class="w-full h-10 rounded-lg bg-black/20 border border-sb-line pl-4 pr-12 text-sm text-white placeholder:text-sb-muted/80 outline-none focus:border-sb-blue/60"
|
||
placeholder="Search tags, artworks, artists..."
|
||
/>
|
||
<button class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 rounded-md hover:bg-white/5 text-sb-muted hover:text-white">
|
||
<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="11" cy="11" r="7"/>
|
||
<path d="M20 20l-3.5-3.5"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right icon counters -->
|
||
<div class="hidden md:flex items-center gap-3 text-sb-muted">
|
||
<button class="relative w-10 h-10 rounded-lg hover:bg-white/5">
|
||
<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 5v14M5 12h14"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<button class="relative w-10 h-10 rounded-lg hover:bg-white/5">
|
||
<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 21s-7-4.4-9-9a5.5 5.5 0 0 1 9-6 5.5 5.5 0 0 1 9 6c-2 4.6-9 9-9 9z"/>
|
||
</svg>
|
||
<span class="absolute -bottom-1 right-0 text-[11px] tabular-nums px-1.5 py-0.5 rounded bg-black/30 border border-sb-line">37</span>
|
||
</button>
|
||
|
||
<button class="relative w-10 h-10 rounded-lg hover:bg-white/5">
|
||
<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M4 4h16v14H5.2L4 19.2V4z"/>
|
||
<path d="M4 6l8 6 8-6"/>
|
||
</svg>
|
||
<span class="absolute -bottom-1 right-0 text-[11px] tabular-nums px-1.5 py-0.5 rounded bg-black/30 border border-sb-line">22</span>
|
||
</button>
|
||
|
||
<button class="relative w-10 h-10 rounded-lg hover:bg-white/5">
|
||
<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7"/>
|
||
<path d="M13.7 21a2 2 0 01-3.4 0"/>
|
||
</svg>
|
||
<span class="absolute -bottom-1 right-0 text-[11px] tabular-nums px-1.5 py-0.5 rounded bg-black/30 border border-sb-line">5</span>
|
||
</button>
|
||
|
||
<!-- User dropdown -->
|
||
<div class="relative">
|
||
<button class="flex items-center gap-2 pl-2 pr-3 h-10 rounded-lg hover:bg-white/5" data-dd="user">
|
||
<img class="w-7 h-7 rounded-full object-cover ring-1 ring-white/10"
|
||
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64&h=64&fit=crop"
|
||
alt="User" />
|
||
<span class="text-sm text-white/90">Gregor</span>
|
||
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M6 9l6 6 6-6"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<div id="dd-user" class="hidden absolute right-0 mt-2 w-64 rounded-lg bg-sb-panel border border-sb-line shadow-sb overflow-hidden">
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">⬆️</span> Upload
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">✏️</span> Edit Artworks
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">📊</span> Statistics
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">👥</span> My Followers
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">➕</span> Who I Follow
|
||
</a>
|
||
|
||
<div class="h-px bg-sb-line/80 my-1"></div>
|
||
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">💬</span> Received Comments
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">❤️</span> My Favourites
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">🖼️</span> My Gallery
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">⚙️</span> Edit Profile
|
||
</a>
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">👁️</span> View My Profile
|
||
</a>
|
||
|
||
<div class="h-px bg-sb-line/80 my-1"></div>
|
||
|
||
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="#">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">⎋</span> Logout
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- LAYOUT -->
|
||
<div class="pt-16">
|
||
<div class="mx-auto w-full">
|
||
<div class="flex min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
|
||
<!-- SIDEBAR -->
|
||
<aside id="sidebar"
|
||
class="hidden md:block w-72 shrink-0 border-r border-sb-line bg-sb-panel2/60 backdrop-blur-sm">
|
||
<div class="p-4">
|
||
<button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
|
||
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">
|
||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M4 6h16M4 12h16M4 18h16"/>
|
||
</svg>
|
||
</span>
|
||
<span class="text-sm text-white/90">Menu</span>
|
||
</button>
|
||
|
||
<div class="mt-6 text-sm text-sb-muted">
|
||
<div class="font-semibold text-white/80 mb-2">Main Categories:</div>
|
||
<ul class="space-y-2">
|
||
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">📷</span> Photography</a></li>
|
||
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">🖼️</span> Wallpapers</a></li>
|
||
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">🧩</span> Skins</a></li>
|
||
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">✨</span> Other</a></li>
|
||
</ul>
|
||
|
||
<div class="mt-6 font-semibold text-white/80 mb-2">Browse Subcategories:</div>
|
||
<ul class="space-y-2 sb-scrollbar max-h-56 overflow-auto pr-2">
|
||
<li><a class="hover:text-white" href="#">3D</a></li>
|
||
<li><a class="hover:text-white" href="#">Abstract</a></li>
|
||
<li><a class="hover:text-white" href="#">Animals</a></li>
|
||
<li><a class="hover:text-white" href="#">Anime</a></li>
|
||
<li><a class="hover:text-white" href="#">Art</a></li>
|
||
<li><a class="hover:text-white" href="#">Cars</a></li>
|
||
<li><a class="hover:text-white" href="#">Cartoon</a></li>
|
||
<li><a class="hover:text-white" href="#">Fantasy</a></li>
|
||
<li><a class="hover:text-white" href="#">Nature</a></li>
|
||
<li><a class="hover:text-white" href="#">Sci-Fi</a></li>
|
||
</ul>
|
||
|
||
<div class="mt-6 font-semibold text-white/80 mb-2">Daily Uploads <span class="text-sb-muted font-normal">(245)</span></div>
|
||
<div class="rounded-xl bg-white/5 border border-white/5 overflow-hidden">
|
||
<button class="w-full px-4 py-3 text-left hover:bg-white/5">All</button>
|
||
<button class="w-full px-4 py-3 text-left hover:bg-white/5">Hot</button>
|
||
</div>
|
||
|
||
<a class="mt-4 inline-flex items-center gap-2 text-sb-muted hover:text-white" href="#">
|
||
<span>Link, more</span>
|
||
<span class="opacity-60">›</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- MAIN -->
|
||
<main class="flex-1">
|
||
<!-- Hero background -->
|
||
<div class="relative overflow-hidden">
|
||
<div class="absolute inset-0 opacity-35"
|
||
style="background-image: radial-gradient(circle at 20% 10%, rgba(77,163,255,.25), transparent 35%), radial-gradient(circle at 70% 30%, rgba(255,196,77,.18), transparent 40%), radial-gradient(circle at 30% 80%, rgba(180,77,255,.16), transparent 45%);">
|
||
</div>
|
||
|
||
<div class="relative px-6 py-8 md:px-10 md:py-10">
|
||
<div class="text-sm text-sb-muted">
|
||
<a class="hover:text-white" href="#">Wallpapers</a> <span class="opacity-50">›</span> <span class="text-white/80">Fantasy</span>
|
||
</div>
|
||
|
||
<h1 class="mt-2 text-3xl md:text-4xl font-semibold tracking-tight text-white/95">Fantasy</h1>
|
||
|
||
<!-- Info card -->
|
||
<section class="mt-5 bg-white/5 border border-white/10 rounded-2xl shadow-sb">
|
||
<div class="p-5 md:p-6">
|
||
<div class="text-lg font-semibold text-white/90">Fantasy</div>
|
||
<p class="mt-2 text-sm leading-6 text-sb-muted">
|
||
Fantasy is a genre of art that uses magic and other supernatural forms as a primary element of plot, theme, or setting.
|
||
In its broadest sense, fantasy comprises works by authors, artists, filmmakers and musicians...
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Grid -->
|
||
<section class="px-6 pb-10 md:px-10">
|
||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||
<!-- Card template -->
|
||
<!-- Repeat as needed -->
|
||
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-sb">
|
||
<div class="aspect-[16/10] bg-gradient-to-br from-cyan-400/30 via-blue-500/20 to-purple-600/30"></div>
|
||
|
||
<!-- Ribbon -->
|
||
<div class="absolute top-3 right-3">
|
||
<div class="origin-top-right rotate-45 translate-x-6 -translate-y-2">
|
||
<div class="px-10 py-1 text-[10px] tracking-widest font-bold bg-orange-600/90 text-white shadow">
|
||
FANTASY
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="p-3 text-xs text-sb-muted group-hover:text-white/80">
|
||
Featured artwork
|
||
</div>
|
||
</a>
|
||
|
||
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-sb">
|
||
<div class="aspect-[16/10] bg-gradient-to-br from-emerald-400/25 via-teal-500/15 to-sky-500/25"></div>
|
||
<div class="absolute top-3 right-3">
|
||
<div class="origin-top-right rotate-45 translate-x-6 -translate-y-2">
|
||
<div class="px-10 py-1 text-[10px] tracking-widest font-bold bg-orange-600/90 text-white shadow">FANTASY</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 text-xs text-sb-muted group-hover:text-white/80">Island</div>
|
||
</a>
|
||
|
||
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-sb">
|
||
<div class="aspect-[16/10] bg-gradient-to-br from-fuchsia-400/20 via-rose-500/20 to-amber-500/20"></div>
|
||
<div class="absolute top-3 right-3">
|
||
<div class="origin-top-right rotate-45 translate-x-6 -translate-y-2">
|
||
<div class="px-10 py-1 text-[10px] tracking-widest font-bold bg-orange-600/90 text-white shadow">FANTASY</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 text-xs text-sb-muted group-hover:text-white/80">Sunset</div>
|
||
</a>
|
||
|
||
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-sb">
|
||
<div class="aspect-[16/10] bg-gradient-to-br from-indigo-400/20 via-slate-500/20 to-zinc-700/30"></div>
|
||
<div class="absolute top-3 right-3">
|
||
<div class="origin-top-right rotate-45 translate-x-6 -translate-y-2">
|
||
<div class="px-10 py-1 text-[10px] tracking-widest font-bold bg-orange-600/90 text-white shadow">FANTASY</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 text-xs text-sb-muted group-hover:text-white/80">Dragon</div>
|
||
</a>
|
||
|
||
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-sb">
|
||
<div class="aspect-[16/10] bg-gradient-to-br from-yellow-400/20 via-orange-500/15 to-red-600/25"></div>
|
||
<div class="absolute top-3 right-3">
|
||
<div class="origin-top-right rotate-45 translate-x-6 -translate-y-2">
|
||
<div class="px-10 py-1 text-[10px] tracking-widest font-bold bg-orange-600/90 text-white shadow">FANTASY</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 text-xs text-sb-muted group-hover:text-white/80">Explosion</div>
|
||
</a>
|
||
|
||
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-sb">
|
||
<div class="aspect-[16/10] bg-gradient-to-br from-lime-400/15 via-green-700/20 to-emerald-900/25"></div>
|
||
<div class="absolute top-3 right-3">
|
||
<div class="origin-top-right rotate-45 translate-x-6 -translate-y-2">
|
||
<div class="px-10 py-1 text-[10px] tracking-widest font-bold bg-orange-600/90 text-white shadow">FANTASY</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 text-xs text-sb-muted group-hover:text-white/80">Forest</div>
|
||
</a>
|
||
|
||
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-sb">
|
||
<div class="aspect-[16/10] bg-gradient-to-br from-sky-400/20 via-blue-800/25 to-slate-900/25"></div>
|
||
<div class="absolute top-3 right-3">
|
||
<div class="origin-top-right rotate-45 translate-x-6 -translate-y-2">
|
||
<div class="px-10 py-1 text-[10px] tracking-widest font-bold bg-orange-600/90 text-white shadow">FANTASY</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 text-xs text-sb-muted group-hover:text-white/80">Sea</div>
|
||
</a>
|
||
|
||
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-sb">
|
||
<div class="aspect-[16/10] bg-gradient-to-br from-stone-400/10 via-zinc-600/20 to-neutral-900/35"></div>
|
||
<div class="absolute top-3 right-3">
|
||
<div class="origin-top-right rotate-45 translate-x-6 -translate-y-2">
|
||
<div class="px-10 py-1 text-[10px] tracking-widest font-bold bg-orange-600/90 text-white shadow">FANTASY</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 text-xs text-sb-muted group-hover:text-white/80">Portrait</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="flex justify-center mt-10">
|
||
<button class="px-10 py-3 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 text-white/90 shadow-sb">
|
||
Browse All
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="border-t border-sb-line bg-sb-top">
|
||
<div class="px-6 md:px-10 py-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
|
||
<div class="text-xl font-semibold tracking-wide">
|
||
<span class="text-white">Skinbase</span>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap gap-x-6 gap-y-2 text-sm text-sb-muted">
|
||
<a class="hover:text-white" href="#">Bug Report</a>
|
||
<a class="hover:text-white" href="#">RSS Feeds</a>
|
||
<a class="hover:text-white" href="#">FAQ</a>
|
||
<a class="hover:text-white" href="#">Rules and Guidelines</a>
|
||
<a class="hover:text-white" href="#">Staff</a>
|
||
<a class="hover:text-white" href="#">Privacy Policy</a>
|
||
</div>
|
||
|
||
<div class="text-xs text-sb-muted">© 2026 Skinbase.org</div>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile sidebar drawer -->
|
||
<div id="sidebarOverlay" class="hidden fixed inset-0 z-40 bg-black/60"></div>
|
||
<div id="sidebarDrawer" class="hidden fixed top-16 left-0 bottom-0 z-50 w-80 max-w-[85vw] bg-sb-panel2 border-r border-sb-line shadow-sb">
|
||
<div class="p-4 sb-scrollbar overflow-auto h-full">
|
||
<div class="flex items-center justify-between">
|
||
<div class="text-sm font-semibold text-white/90">Menu</div>
|
||
<button id="btnCloseSidebar" class="w-10 h-10 rounded-lg hover:bg-white/5">
|
||
<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M6 6l12 12M18 6l-12 12"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mt-5 text-sm text-sb-muted">
|
||
<div class="font-semibold text-white/80 mb-2">Main Categories:</div>
|
||
<ul class="space-y-2">
|
||
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">📷</span> Photography</a></li>
|
||
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">🖼️</span> Wallpapers</a></li>
|
||
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">🧩</span> Skins</a></li>
|
||
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">✨</span> Other</a></li>
|
||
</ul>
|
||
|
||
<div class="mt-6 font-semibold text-white/80 mb-2">Browse Subcategories:</div>
|
||
<ul class="space-y-2">
|
||
<li><a class="hover:text-white" href="#">3D</a></li>
|
||
<li><a class="hover:text-white" href="#">Abstract</a></li>
|
||
<li><a class="hover:text-white" href="#">Animals</a></li>
|
||
<li><a class="hover:text-white" href="#">Anime</a></li>
|
||
<li><a class="hover:text-white" href="#">Art</a></li>
|
||
<li><a class="hover:text-white" href="#">Cars</a></li>
|
||
<li><a class="hover:text-white" href="#">Cartoon</a></li>
|
||
<li><a class="hover:text-white" href="#">Fantasy</a></li>
|
||
<li><a class="hover:text-white" href="#">Nature</a></li>
|
||
<li><a class="hover:text-white" href="#">Sci-Fi</a></li>
|
||
</ul>
|
||
|
||
<div class="mt-6 font-semibold text-white/80 mb-2">Daily Uploads <span class="text-sb-muted font-normal">(245)</span></div>
|
||
<div class="rounded-xl bg-white/5 border border-white/5 overflow-hidden">
|
||
<button class="w-full px-4 py-3 text-left hover:bg-white/5">All</button>
|
||
<button class="w-full px-4 py-3 text-left hover:bg-white/5">Hot</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Dropdowns (hover on desktop, click fallback)
|
||
const ddButtons = document.querySelectorAll('[data-dd]');
|
||
const closeAllDropdowns = () => {
|
||
document.querySelectorAll('[id^="dd-"]').forEach(el => el.classList.add('hidden'));
|
||
};
|
||
|
||
const canHover = () => window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;
|
||
|
||
const openDropdown = (key) => {
|
||
const menu = document.getElementById('dd-' + key);
|
||
if (!menu) return;
|
||
closeAllDropdowns();
|
||
menu.classList.remove('hidden');
|
||
};
|
||
|
||
const closeDropdown = (key) => {
|
||
const menu = document.getElementById('dd-' + key);
|
||
if (!menu) return;
|
||
menu.classList.add('hidden');
|
||
};
|
||
|
||
const closeTimers = new Map();
|
||
const scheduleClose = (key) => {
|
||
const t = closeTimers.get(key);
|
||
if (t) clearTimeout(t);
|
||
closeTimers.set(key, setTimeout(() => closeDropdown(key), 140));
|
||
};
|
||
const cancelClose = (key) => {
|
||
const t = closeTimers.get(key);
|
||
if (t) clearTimeout(t);
|
||
closeTimers.delete(key);
|
||
};
|
||
|
||
ddButtons.forEach(btn => {
|
||
const key = btn.getAttribute('data-dd');
|
||
const menu = document.getElementById('dd-' + key);
|
||
if (!key || !menu) return;
|
||
|
||
// Hover-to-open on desktop pointers
|
||
const wrap = btn.closest('.relative') || btn.parentElement;
|
||
if (wrap) {
|
||
wrap.addEventListener('mouseenter', () => {
|
||
if (!canHover()) return;
|
||
cancelClose(key);
|
||
openDropdown(key);
|
||
});
|
||
wrap.addEventListener('mouseleave', () => {
|
||
if (!canHover()) return;
|
||
scheduleClose(key);
|
||
});
|
||
}
|
||
|
||
// Click fallback (touch devices)
|
||
btn.addEventListener('click', (e) => {
|
||
if (canHover()) {
|
||
// On desktop, hover is primary; clicking the label shouldn't be required.
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
e.stopPropagation();
|
||
const isOpen = !menu.classList.contains('hidden');
|
||
closeAllDropdowns();
|
||
if (!isOpen) menu.classList.remove('hidden');
|
||
});
|
||
});
|
||
|
||
// Submenu hover handlers (ensure flyout appears on desktop)
|
||
document.querySelectorAll('[data-submenu]').forEach(function (group) {
|
||
var toggle = group.querySelector('[data-submenu-toggle]');
|
||
var menu = group.querySelector('[data-submenu-menu]');
|
||
if (!menu) return;
|
||
|
||
group.addEventListener('mouseenter', function () {
|
||
if (!canHover()) return;
|
||
menu.classList.remove('hidden');
|
||
if (toggle) toggle.setAttribute('aria-expanded', 'true');
|
||
});
|
||
group.addEventListener('mouseleave', function () {
|
||
if (!canHover()) return;
|
||
menu.classList.add('hidden');
|
||
if (toggle) toggle.setAttribute('aria-expanded', 'false');
|
||
});
|
||
});
|
||
|
||
document.addEventListener('click', () => closeAllDropdowns());
|
||
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeAllDropdowns(); });
|
||
|
||
// Mobile sidebar
|
||
const btnSidebar = document.getElementById('btnSidebar');
|
||
const sidebarOverlay = document.getElementById('sidebarOverlay');
|
||
const sidebarDrawer = document.getElementById('sidebarDrawer');
|
||
const btnCloseSidebar = document.getElementById('btnCloseSidebar');
|
||
|
||
const openSidebar = () => {
|
||
sidebarOverlay.classList.remove('hidden');
|
||
sidebarDrawer.classList.remove('hidden');
|
||
document.body.style.overflow = 'hidden';
|
||
};
|
||
const closeSidebar = () => {
|
||
sidebarOverlay.classList.add('hidden');
|
||
sidebarDrawer.classList.add('hidden');
|
||
document.body.style.overflow = '';
|
||
};
|
||
|
||
btnSidebar?.addEventListener('click', openSidebar);
|
||
sidebarOverlay?.addEventListener('click', closeSidebar);
|
||
btnCloseSidebar?.addEventListener('click', closeSidebar);
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') closeSidebar();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|