klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

current state

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-08 10:42:01 +01:00
parent 0a4372c40d
commit e055af9248
70 changed files with 4882 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
public/css/nova.css Normal file
View File

@@ -0,0 +1,187 @@
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, sans-serif;
}
body {
background: #dfe5e9;
color: #e3e3e3;
min-height: 200vh;
}
/* TOPBAR */
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: #1c1c1f;
border-bottom: 1px solid #2a2a33;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 9999;
}
.topbar a {
color: #eaeaea;
text-decoration: none;
font-size: 14px;
}
/* LEFT */
.topbar-left {
display: flex;
align-items: center;
gap: 16px;
}
.logo {
font-size: 20px;
font-weight: 600;
color: #4da3ff;
}
/* CENTER SEARCH */
.topbar-center {
flex: 1;
max-width: 520px;
margin: 0 20px;
}
.search-box {
position: relative;
width: 100%;
}
.search-box input {
width: 100%;
background: #1a1a22;
border: 1px solid #262631;
border-radius: 8px;
padding: 10px 40px 10px 14px;
color: #fff;
outline: none;
}
.search-box i {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: #777;
}
/* RIGHT */
.topbar-right {
display: flex;
align-items: center;
gap: 18px;
}
.icon-btn {
background: none;
border: none;
color: #ddd;
font-size: 16px;
cursor: pointer;
position: relative;
}
/* BADGE */
.badge {
position: absolute;
top: -4px;
right: -6px;
background: #ff5c5c;
color: #fff;
font-size: 10px;
padding: 2px 5px;
border-radius: 10px;
line-height: 1;
}
.icon-btn:hover {
color: #4da3ff;
}
/* DROPDOWN */
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 120%;
right: 0;
background: #1a1a22;
border: 1px solid #262631;
border-radius: 8px;
min-width: 180px;
display: none;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.dropdown-menu a {
display: block;
padding: 10px 14px;
font-size: 13px;
}
.dropdown-menu a:hover {
background: #242430;
}
.dropdown.active .dropdown-menu {
display: block;
}
/* MOBILE */
.mobile-toggle {
display: none;
font-size: 18px;
}
.mobile-menu {
display: none;
position: fixed;
top: 64px;
left: 0;
right: 0;
background: #121217;
border-bottom: 1px solid #262631;
padding: 16px;
}
.mobile-menu a {
display: block;
padding: 10px 0;
border-bottom: 1px solid #1f1f26;
}
.mobile-menu.show {
display: block;
}
main {
padding-top: 80px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.topbar-center {
display: none;
}
.mobile-toggle {
display: block;
}
}

24
public/js/nova.js Normal file
View File

@@ -0,0 +1,24 @@
// Simulate login state (replace with Laravel later)
const isLoggedIn = true;
if (isLoggedIn) {
document.querySelector('.guest-only').style.display = 'none';
document.querySelector('.user-only').style.display = 'flex';
}
function toggleDropdown(btn) {
const drop = btn.closest('.dropdown');
drop.classList.toggle('active');
}
function toggleMobile() {
document.getElementById('mobileMenu').classList.toggle('show');
}
// Close dropdown on outside click
document.addEventListener('click', e => {
document.querySelectorAll('.dropdown').forEach(d => {
if (!d.contains(e.target)) d.classList.remove('active');
});
});

24
public/legacy/js/nova.js Normal file
View File

@@ -0,0 +1,24 @@
// Simulate login state (replace with Laravel later)
const isLoggedIn = true;
if (isLoggedIn) {
document.querySelector('.guest-only').style.display = 'none';
document.querySelector('.user-only').style.display = 'flex';
}
function toggleDropdown(btn) {
const drop = btn.closest('.dropdown');
drop.classList.toggle('active');
}
function toggleMobile() {
document.getElementById('mobileMenu').classList.toggle('show');
}
// Close dropdown on outside click
document.addEventListener('click', e => {
document.querySelectorAll('.dropdown').forEach(d => {
if (!d.contains(e.target)) d.classList.remove('active');
});
});

597
public/nova.html Normal file
View File

@@ -0,0 +1,597 @@
<!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(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>