current state

2026-02-08 10:42:01 +01:00
parent 0a4372c40d
commit e055af9248
70 changed files with 4882 additions and 330 deletions
@@ -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;
+      }
+
+    }
@@ -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');
+  });
+});
@@ -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');
+  });
+});
@@ -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>