SIDEBAR-ENGINE V51

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Engine V51 | Complete Interactive Reference</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" crossorigin="anonymous">
    <style>
    :root{--bg:#020617;--card:#0f172a;--card2:#1a2540;--accent:#0ea5e9;--text:#94a3b8;--text-bright:#e2e8f0;--white:#fff;--border:rgba(255,255,255,0.08);--border-accent:rgba(14,165,233,0.3);--success:#22c55e;--warning:#f59e0b;--error:#ef4444;--focus-ring:0 0 0 3px rgba(14,165,233,0.4)}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--white);font-family:'Inter',system-ui,sans-serif;line-height:1.65;overflow-x:hidden;min-height:100vh}
    body::before{content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 20% 20%,rgba(14,165,233,0.05) 0%,transparent 50%);z-index:0;pointer-events:none;animation:bgMove 25s ease-in-out infinite}
    @keyframes bgMove{0%{transform:translate(0,0)}100%{transform:translate(-2%,1%)}}
    .container{max-width:1060px;margin:0 auto;padding:40px 20px 100px;position:relative;z-index:1}
    
    /* ===== HERO & TOP BUTTONS ===== */
    .hero{text-align:center;margin-bottom:36px}
    .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(14,165,233,0.1);border:1px solid var(--border-accent);padding:5px 14px;border-radius:100px;font-size:0.78rem;color:var(--accent);font-weight:600;margin-bottom:18px}
    .badge...