4916 lines
No EOL
205 KiB
HTML
4916 lines
No EOL
205 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" data-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VEZA / TALAS — Design System vFinal · NEON RONIN</title>
|
|
<meta name="description" content="Design System vFinal Ultra-Comprehensive for Spotify/Discord-class applications.">
|
|
<link rel="icon"
|
|
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💠</text></svg>">
|
|
<!-- FONTS
|
|
1. Space Grotesk: Tech/Headings/Display (Modern, quirky)
|
|
2. Inter: Body/UI (Legible, neutral)
|
|
3. JetBrains Mono: Code/Data (Hacking vibe)
|
|
4. Bebas Neue: Street/Impact (Graffiti vibe)
|
|
-->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700;900&family=Instrument+Serif:ital@0;1&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<style>
|
|
/*
|
|
╔═══════════════════════════════════════════════════════════════════════════╗
|
|
║ VEZA DESIGN SYSTEM vFINAL · "NEON RONIN" (ULTRA EDITION) ║
|
|
║ Version: 6.0.0 (The Monolith) ║
|
|
║ ║
|
|
║ AESTHETIC DIRECTION: ║
|
|
║ "Neon Ronin" = Subtle Graffiti + Manga Shapes + Gaming Glow + Tech Data ║
|
|
║ Built for complex, data-heavy applications (Spotify/Discord tier). ║
|
|
║ ║
|
|
║ TABLE OF CONTENTS: ║
|
|
║ 1. VARIABLES (Tokens) ║
|
|
║ 2. RESET & BASE ║
|
|
║ 3. UTILITIES (Layout, Type, Paint) ║
|
|
║ 4. ANIMATIONS ║
|
|
║ 5. COMPONENTS: ATOMS ║
|
|
║ 6. COMPONENTS: MOLECULES ║
|
|
║ 7. COMPONENTS: ORGANISMS ║
|
|
╚═══════════════════════════════════════════════════════════════════════════╝
|
|
*/
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
1. DESIGN TOKENS (CSS VARIABLES)
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
:root {
|
|
/*
|
|
* PALETTE: THE "VOID" (NEUTRALS)
|
|
* Deep, desaturated charcoals for a premium, OLED-friendly look.
|
|
*/
|
|
--color-void-0: #050508;
|
|
/* Absolute Void (App Background) */
|
|
--color-void-50: #0A0B10;
|
|
/* Card Background */
|
|
--color-void-100: #14151A;
|
|
/* Elevated Surface */
|
|
--color-void-200: #1F2128;
|
|
/* Border / Divider */
|
|
--color-void-300: #2D303A;
|
|
/* Input Background */
|
|
--color-void-400: #3E424E;
|
|
/* Hover State */
|
|
--color-void-500: #525666;
|
|
/* Muted Text */
|
|
--color-void-600: #6E7280;
|
|
/* Secondary Text */
|
|
--color-void-700: #9496A1;
|
|
/* Primary Text (Dim) */
|
|
--color-void-800: #C2C4CC;
|
|
/* Primary Text */
|
|
--color-void-900: #EEEEF2;
|
|
/* Heading / Brightest */
|
|
--color-void-950: #FFFFFF;
|
|
/* Pure White */
|
|
|
|
/*
|
|
* PALETTE: NEON CYAN (PRIMARY ACTION)
|
|
* Represents: Tech, Flow, Future, Data.
|
|
*/
|
|
--color-cyan-50: #E0FDFF;
|
|
--color-cyan-100: #BEFAFF;
|
|
--color-cyan-200: #87F4FF;
|
|
--color-cyan-300: #46EBFF;
|
|
--color-cyan-400: #00DBF5;
|
|
--color-cyan-500: #00B8D4;
|
|
/* Veza Brand Core */
|
|
--color-cyan-600: #0891B2;
|
|
--color-cyan-700: #0E7490;
|
|
--color-cyan-800: #155E75;
|
|
--color-cyan-900: #164E63;
|
|
--color-cyan-glow: rgba(0, 219, 245, 0.5);
|
|
|
|
/*
|
|
* PALETTE: HOT MAGENTA (SECONDARY / STREET)
|
|
* Represents: Graffiti, Passion, Alert, "The Edge".
|
|
*/
|
|
--color-magenta-50: #FDF2F8;
|
|
--color-magenta-100: #FCE7F3;
|
|
--color-magenta-200: #FBCFE8;
|
|
--color-magenta-300: #F9A8D4;
|
|
--color-magenta-400: #F472B6;
|
|
--color-magenta-500: #EC4899;
|
|
--color-magenta-600: #DB2777;
|
|
/* Street Core */
|
|
--color-magenta-700: #BE185D;
|
|
--color-magenta-800: #9D174D;
|
|
--color-magenta-900: #831843;
|
|
--color-magenta-glow: rgba(236, 72, 153, 0.5);
|
|
|
|
/*
|
|
* PALETTE: ACID LIME (ACCENT / HACKER)
|
|
* Represents: Success, Terminal, Code, Bio-hazard.
|
|
*/
|
|
--color-lime-400: #A3E635;
|
|
--color-lime-500: #84CC16;
|
|
/* Hacker Core */
|
|
--color-lime-600: #65A30D;
|
|
--color-lime-glow: rgba(132, 204, 22, 0.5);
|
|
|
|
/*
|
|
* PALETTE: VIOLET (CREATIVE / PREMIUM)
|
|
*/
|
|
--color-violet-500: #8B5CF6;
|
|
--color-violet-600: #7C3AED;
|
|
|
|
/*
|
|
* PALETTE: SEMANTIC
|
|
*/
|
|
--color-success: #10B981;
|
|
--color-warning: #F59E0B;
|
|
--color-error: #EF4444;
|
|
--color-info: #3B82F6;
|
|
|
|
/*
|
|
* PALETTE: NATURE / ORGANIC (TALAS EXPANSION)
|
|
*/
|
|
--color-moss: #2d5a3d;
|
|
--color-moss-light: #4a8c5f;
|
|
--color-bark: #3d2914;
|
|
--color-earth: #5c4033;
|
|
--color-leaf: #7cb342;
|
|
--color-bloom: #e91e63;
|
|
--color-petal: #f8bbd9;
|
|
--color-sky: #64b5f6;
|
|
|
|
/*
|
|
* PALETTE: MANGA / EMOTION (TALAS EXPANSION)
|
|
*/
|
|
--color-sakura: #ffb7c5;
|
|
--color-yurei: #9575cd;
|
|
--color-shonen: #ff5722;
|
|
--color-seinen: #455a64;
|
|
--color-mecha: #78909c;
|
|
|
|
/*
|
|
* PALETTE: GAMING / RPG (TALAS EXPANSION)
|
|
*/
|
|
--color-xp-gold: #ffd700;
|
|
--color-hp-red: #ff3333;
|
|
--color-mp-blue: #3399ff;
|
|
--color-shield: #9c27b0;
|
|
--color-crit: #ff0000;
|
|
|
|
/*
|
|
* GRADIENTS
|
|
*/
|
|
--grad-cyber: linear-gradient(135deg, var(--color-cyan-400), var(--color-violet-500));
|
|
--grad-heat: linear-gradient(135deg, var(--color-magenta-500), var(--color-warning));
|
|
--grad-bio: linear-gradient(135deg, var(--color-lime-400), var(--color-cyan-400));
|
|
--grad-dark-plate: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
/* TALAS GRADIENTS */
|
|
--grad-sunset: linear-gradient(135deg, var(--color-orange), var(--color-magenta-500));
|
|
--grad-forest: linear-gradient(135deg, var(--color-moss), var(--color-leaf) 50%, var(--color-lime-500) 100%);
|
|
--grad-manga: linear-gradient(135deg, var(--color-sakura) 0%, var(--color-yurei) 100%);
|
|
--grad-gaming: linear-gradient(135deg, var(--color-shonen) 0%, var(--color-xp-gold) 100%);
|
|
--grad-nature: linear-gradient(180deg, var(--color-void-200) 0%, var(--color-moss) 50%, var(--color-bark) 100%);
|
|
|
|
/*
|
|
* TYPOGRAPHY
|
|
*/
|
|
--font-display: 'Bebas Neue', sans-serif;
|
|
--font-head: 'Space Grotesk', system-ui, -apple-system, sans-serif;
|
|
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
--font-editorial: 'Instrument Serif', serif;
|
|
|
|
--text-xs: 0.75rem;
|
|
/* 12px */
|
|
--text-sm: 0.875rem;
|
|
/* 14px */
|
|
--text-base: 1rem;
|
|
/* 16px */
|
|
--text-lg: 1.125rem;
|
|
/* 18px */
|
|
--text-xl: 1.25rem;
|
|
/* 20px */
|
|
--text-2xl: 1.5rem;
|
|
/* 24px */
|
|
--text-3xl: 1.875rem;
|
|
/* 30px */
|
|
--text-4xl: 2.25rem;
|
|
/* 36px */
|
|
--text-5xl: 3rem;
|
|
/* 48px */
|
|
--text-6xl: 3.75rem;
|
|
/* 60px */
|
|
|
|
--leading-tight: 1.1;
|
|
--leading-snug: 1.3;
|
|
--leading-base: 1.5;
|
|
--leading-loose: 1.7;
|
|
|
|
/*
|
|
* SPACING (4px Base)
|
|
*/
|
|
--space-1: 0.25rem;
|
|
/* 4px */
|
|
--space-2: 0.5rem;
|
|
/* 8px */
|
|
--space-3: 0.75rem;
|
|
/* 12px */
|
|
--space-4: 1rem;
|
|
/* 16px */
|
|
--space-5: 1.25rem;
|
|
/* 20px */
|
|
--space-6: 1.5rem;
|
|
/* 24px */
|
|
--space-8: 2rem;
|
|
/* 32px */
|
|
--space-10: 2.5rem;
|
|
/* 40px */
|
|
--space-12: 3rem;
|
|
/* 48px */
|
|
--space-16: 4rem;
|
|
/* 64px */
|
|
--space-20: 5rem;
|
|
/* 80px */
|
|
--space-24: 6rem;
|
|
/* 96px */
|
|
|
|
/*
|
|
* SHAPES & BORDERS
|
|
*/
|
|
--radius-xs: 2px;
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-2xl: 24px;
|
|
--radius-full: 9999px;
|
|
--border-width: 1px;
|
|
|
|
/* "Manga Cut" Clip Paths */
|
|
--clip-button-r: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
|
|
--clip-button-l: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
|
|
--clip-tag: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
|
|
--clip-hex: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
|
|
|
|
/* Talas Clip Paths */
|
|
--clip-manga: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
|
|
--clip-manga-lg: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
|
|
--clip-badge: polygon(0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%);
|
|
|
|
/*
|
|
* EFFECTS (Updated with v3 Glows)
|
|
*/
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
|
|
--shadow-neon-cyan: 0 0 20px rgba(0, 219, 245, 0.3);
|
|
--shadow-neon-magenta: 0 0 20px rgba(236, 72, 153, 0.3);
|
|
|
|
/* v3 Glows */
|
|
--glow-cyan: 0 0 20px rgba(102, 252, 241, 0.4), 0 0 40px rgba(102, 252, 241, 0.2);
|
|
--glow-magenta: 0 0 20px rgba(255, 0, 128, 0.4), 0 0 40px rgba(255, 0, 128, 0.2);
|
|
--glow-green: 0 0 20px rgba(0, 255, 136, 0.4);
|
|
--glow-gold: 0 0 20px rgba(255, 215, 0, 0.4);
|
|
|
|
--glass-bg: rgba(20, 21, 26, 0.7);
|
|
--glass-border: rgba(255, 255, 255, 0.05);
|
|
--glass-blur: 12px;
|
|
|
|
/*
|
|
* ANIMATION
|
|
*/
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
--duration-fast: 150ms;
|
|
--duration-base: 300ms;
|
|
--duration-slow: 500ms;
|
|
}
|
|
|
|
/* LIGHT MODE OVERRIDES */
|
|
[data-theme="light"] {
|
|
--color-void-0: #F8F9FA;
|
|
--color-void-50: #FFFFFF;
|
|
--color-void-100: #F3F4F6;
|
|
--color-void-200: #E5E7EB;
|
|
--color-void-300: #D1D5DB;
|
|
--color-void-400: #9CA3AF;
|
|
--color-void-500: #6B7280;
|
|
--color-void-600: #4B5563;
|
|
--color-void-700: #374151;
|
|
--color-void-800: #1F2937;
|
|
--color-void-900: #111827;
|
|
--color-void-950: #000000;
|
|
|
|
--glass-bg: rgba(255, 255, 255, 0.8);
|
|
--glass-border: rgba(0, 0, 0, 0.05);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Subtle noise texture — Street art influence */
|
|
|
|
|
|
/* Page Background Gradients */
|
|
.page-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 70% 0%, rgba(0, 229, 255, 0.04), transparent 50%),
|
|
radial-gradient(ellipse 60% 40% at 20% 100%, rgba(255, 0, 128, 0.03), transparent 50%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* SPA Section Handling */
|
|
section {
|
|
display: none;
|
|
animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
section.active-section {
|
|
display: block;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
1. BASE STYLES
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-void-0);
|
|
color: var(--color-void-800);
|
|
font-family: var(--font-body);
|
|
line-height: var(--leading-base);
|
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
overflow-x: hidden;
|
|
transition: background-color var(--duration-base) var(--ease-in-out), color var(--duration-base) var(--ease-in-out);
|
|
}
|
|
|
|
/* NOISE TEXTURE OVERLAY */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.04;
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--color-cyan-500);
|
|
color: #fff;
|
|
}
|
|
|
|
/* SCANLINE EFFECT (TALAS) */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(0, 0, 0, 0.1) 2px,
|
|
rgba(0, 0, 0, 0.1) 4px);
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
/* SCROLLBARS */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-void-0);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-void-300);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-void-400);
|
|
}
|
|
|
|
/* TYPOGRAPHY DEFAULTS */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: var(--color-void-900);
|
|
font-family: var(--font-head);
|
|
font-weight: 700;
|
|
line-height: var(--leading-tight);
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--text-5xl);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--text-4xl);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--text-3xl);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--text-2xl);
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--text-xl);
|
|
}
|
|
|
|
h6 {
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--space-4);
|
|
color: var(--color-void-600);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-cyan-400);
|
|
text-decoration: none;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-cyan-300);
|
|
text-shadow: 0 0 8px var(--color-cyan-glow);
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
3. UTILITIES (TAILWIND-STYLE)
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
|
|
/* LAYOUT */
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-6);
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.items-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.items-end {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.justify-around {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
|
|
.grid-cols-1 {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
|
|
.grid-cols-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.grid-cols-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.grid-cols-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.gap-1 {
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.gap-3 {
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.gap-4 {
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.gap-6 {
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.gap-8 {
|
|
gap: var(--space-8);
|
|
}
|
|
|
|
/* SPACING (Margin/Padding) */
|
|
.m-0 {
|
|
margin: 0;
|
|
}
|
|
|
|
.p-0 {
|
|
padding: 0;
|
|
}
|
|
|
|
.m-4 {
|
|
margin: var(--space-4);
|
|
}
|
|
|
|
.p-4 {
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.my-4 {
|
|
margin-top: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.mx-4 {
|
|
margin-left: var(--space-4);
|
|
margin-right: var(--space-4);
|
|
}
|
|
|
|
.mt-2 {
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.mb-2 {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.mt-4 {
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.mb-4 {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.mt-8 {
|
|
margin-top: var(--space-8);
|
|
}
|
|
|
|
.mb-8 {
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
.p-6 {
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.px-4 {
|
|
padding-left: var(--space-4);
|
|
padding-right: var(--space-4);
|
|
}
|
|
|
|
.py-2 {
|
|
padding-top: var(--space-2);
|
|
padding-bottom: var(--space-2);
|
|
}
|
|
|
|
.py-12 {
|
|
padding-top: var(--space-12);
|
|
padding-bottom: var(--space-12);
|
|
}
|
|
|
|
/* TYPOGRAPHY UTILS */
|
|
.font-sans {
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.font-head {
|
|
font-family: var(--font-head);
|
|
}
|
|
|
|
.font-street {
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.font-gaming {
|
|
font-family: 'Orbitron', sans-serif;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.font-manga {
|
|
font-family: 'Rajdhani', sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.font-serif {
|
|
font-family: var(--font-serif);
|
|
font-style: italic;
|
|
}
|
|
|
|
.font-editorial {
|
|
font-family: var(--font-editorial);
|
|
font-style: italic;
|
|
}
|
|
|
|
.text-xs {
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.text-base {
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
.text-lg {
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.text-xl {
|
|
font-size: var(--text-xl);
|
|
}
|
|
|
|
.text-2xl {
|
|
font-size: var(--text-2xl);
|
|
}
|
|
|
|
.font-light {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.font-normal {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.font-medium {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tracking-wide {
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tracking-widest {
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--color-void-500);
|
|
}
|
|
|
|
.text-dim {
|
|
color: var(--color-void-600);
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--color-void-800);
|
|
}
|
|
|
|
.text-bright {
|
|
color: var(--color-void-900);
|
|
}
|
|
|
|
.text-cyan {
|
|
color: var(--color-cyan-400);
|
|
}
|
|
|
|
.text-magenta {
|
|
color: var(--color-magenta-500);
|
|
}
|
|
|
|
.text-lime {
|
|
color: var(--color-lime-500);
|
|
}
|
|
|
|
.text-error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.text-success {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
/* Gradient Text */
|
|
.text-grad-cyber {
|
|
background: var(--grad-cyber);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.text-grad-heat {
|
|
background: var(--grad-heat);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* BACKGROUNDS & BORDERS */
|
|
.bg-void {
|
|
background-color: var(--color-void-0);
|
|
}
|
|
|
|
.bg-plate {
|
|
background-color: var(--color-void-50);
|
|
}
|
|
|
|
.bg-surface {
|
|
background-color: var(--color-void-100);
|
|
}
|
|
|
|
.border {
|
|
border: 1px solid var(--color-void-200);
|
|
}
|
|
|
|
.border-t {
|
|
border-top: 1px solid var(--color-void-200);
|
|
}
|
|
|
|
.border-b {
|
|
border-bottom: 1px solid var(--color-void-200);
|
|
}
|
|
|
|
.rounded-sm {
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.rounded-md {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.rounded-lg {
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.rounded-full {
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
/* VISIBILITY */
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.block {
|
|
display: block;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.absolute {
|
|
position: absolute;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
}
|
|
|
|
.inset-0 {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.z-10 {
|
|
z-index: 10;
|
|
}
|
|
|
|
.z-50 {
|
|
z-index: 50;
|
|
}
|
|
|
|
/*
|
|
ANIMATION UTILS
|
|
*/
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.5s var(--ease-out);
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.5s var(--ease-out);
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.animate-spin-slow {
|
|
animation: spin 10s linear infinite;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.hover-lift {
|
|
transition: transform 0.2s var(--ease-out);
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes graffiti-shake {
|
|
|
|
0%,
|
|
100% {
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
25% {
|
|
transform: rotate(2deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
75% {
|
|
transform: rotate(2deg);
|
|
}
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
4. COMPONENTS: ATOMS
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
|
|
/* BUTTONS */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
white-space: nowrap;
|
|
font-family: var(--font-head);
|
|
font-weight: 600;
|
|
font-size: var(--text-sm);
|
|
line-height: 1;
|
|
padding: 0 var(--space-5);
|
|
height: 44px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
position: relative;
|
|
border: none;
|
|
outline: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--color-cyan-500);
|
|
color: #000;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--color-cyan-400);
|
|
box-shadow: 0 0 20px var(--color-cyan-glow);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(1px);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: var(--color-magenta-500);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: var(--color-magenta-400);
|
|
box-shadow: 0 0 20px var(--color-magenta-glow);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 1px solid var(--color-void-300);
|
|
color: var(--color-void-800);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
border-color: var(--color-cyan-400);
|
|
color: var(--color-cyan-400);
|
|
background: rgba(0, 219, 245, 0.05);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--color-void-600);
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
color: var(--color-void-900);
|
|
background: var(--color-void-200);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: var(--color-error);
|
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
|
|
}
|
|
|
|
.btn-ronin {
|
|
clip-path: var(--clip-button-r);
|
|
border-radius: 0;
|
|
padding-left: var(--space-6);
|
|
padding-right: var(--space-6);
|
|
}
|
|
|
|
.btn-hacker {
|
|
font-family: var(--font-mono);
|
|
background: #000;
|
|
color: var(--color-lime-500);
|
|
border: 1px solid var(--color-lime-500);
|
|
text-transform: none;
|
|
}
|
|
|
|
.btn-hacker::before {
|
|
content: "> ";
|
|
margin-right: 4px;
|
|
color: var(--color-lime-500);
|
|
}
|
|
|
|
.btn-hacker:hover {
|
|
background: var(--color-lime-500);
|
|
color: #000;
|
|
box-shadow: var(--shadow-neon-cyan);
|
|
}
|
|
|
|
.btn-hacker:hover::before {
|
|
color: #000;
|
|
}
|
|
|
|
.btn-sm {
|
|
height: 32px;
|
|
font-size: var(--text-xs);
|
|
padding: 0 var(--space-3);
|
|
}
|
|
|
|
.btn-lg {
|
|
height: 56px;
|
|
font-size: var(--text-base);
|
|
padding: 0 var(--space-8);
|
|
}
|
|
|
|
.btn-icon {
|
|
width: 44px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* NEW BUTTON VARIANTS (TALAS GEMS) */
|
|
|
|
/* Gaming Button — XP/Achievement style */
|
|
.btn-gaming {
|
|
background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
|
|
color: var(--color-xp-gold);
|
|
border: 2px solid var(--color-xp-gold);
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
text-shadow: 0 0 10px var(--color-xp-gold);
|
|
font-family: 'Orbitron', sans-serif;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.btn-gaming:hover {
|
|
background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Nature Button — Organic */
|
|
.btn-nature {
|
|
background: linear-gradient(135deg, var(--color-moss) 0%, var(--color-leaf) 100%);
|
|
color: #fff;
|
|
border-radius: var(--radius-2xl);
|
|
border: none;
|
|
box-shadow: 0 4px 15px rgba(45, 90, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
font-family: var(--font-body);
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.btn-nature:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 6px 25px rgba(45, 90, 61, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Graffiti Button — Spray paint effect */
|
|
.btn-graffiti {
|
|
background: var(--grad-sunset);
|
|
color: #fff;
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-lg);
|
|
letter-spacing: 0.2em;
|
|
clip-path: polygon(5% 0, 95% 5%, 100% 95%, 0% 100%);
|
|
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
|
|
border: none;
|
|
padding: 0 var(--space-8);
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
.btn-graffiti:hover {
|
|
animation: graffiti-shake 0.3s ease-in-out;
|
|
filter: drop-shadow(0 0 15px var(--color-magenta-500));
|
|
}
|
|
|
|
/* INPUTS */
|
|
.input-group {
|
|
margin-bottom: var(--space-5);
|
|
position: relative;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
margin-bottom: var(--space-2);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
color: var(--color-void-500);
|
|
letter-spacing: 0.1em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 var(--space-4);
|
|
background: var(--color-void-50);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-void-900);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-sm);
|
|
transition: all 0.2s;
|
|
appearance: none;
|
|
}
|
|
|
|
.input:hover {
|
|
border-color: var(--color-void-400);
|
|
}
|
|
|
|
.input:focus {
|
|
outline: none;
|
|
border-color: var(--color-cyan-500);
|
|
background: var(--color-void-100);
|
|
box-shadow: 0 0 0 4px rgba(0, 219, 245, 0.1);
|
|
}
|
|
|
|
.input::placeholder {
|
|
color: var(--color-void-400);
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-error {
|
|
border-color: var(--color-error);
|
|
}
|
|
|
|
.input-code {
|
|
font-family: var(--font-mono);
|
|
background: #000;
|
|
border-color: var(--color-void-300);
|
|
color: var(--color-lime-500);
|
|
}
|
|
|
|
/* FLOATING LABEL INPUTS */
|
|
.input-floating {
|
|
position: relative;
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
.input-floating .input {
|
|
height: 56px;
|
|
padding-top: 24px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.input-floating label {
|
|
position: absolute;
|
|
top: 18px;
|
|
left: 16px;
|
|
font-size: var(--text-sm);
|
|
color: var(--color-void-500);
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
pointer-events: none;
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.input-floating .input:focus~label,
|
|
.input-floating .input:not(:placeholder-shown)~label {
|
|
top: 10px;
|
|
font-size: 10px;
|
|
color: var(--color-cyan-500);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* BADGES */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-xs);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.badge-cyan {
|
|
background: rgba(0, 219, 245, 0.1);
|
|
color: var(--color-cyan-500);
|
|
border: 1px solid rgba(0, 219, 245, 0.2);
|
|
}
|
|
|
|
.badge-magenta {
|
|
background: rgba(236, 72, 153, 0.1);
|
|
color: var(--color-magenta-500);
|
|
border: 1px solid rgba(236, 72, 153, 0.2);
|
|
}
|
|
|
|
.badge-lime {
|
|
background: rgba(132, 204, 22, 0.1);
|
|
color: var(--color-lime-500);
|
|
border: 1px solid rgba(132, 204, 22, 0.2);
|
|
}
|
|
|
|
.badge-gaming {
|
|
background: rgba(255, 215, 0, 0.1);
|
|
color: var(--color-xp-gold);
|
|
border: 1px solid var(--color-xp-gold);
|
|
font-family: 'Orbitron', sans-serif;
|
|
text-shadow: 0 0 5px var(--color-xp-gold);
|
|
}
|
|
|
|
.badge-nature {
|
|
background: rgba(124, 179, 66, 0.1);
|
|
color: var(--color-leaf);
|
|
border: 1px solid var(--color-leaf);
|
|
}
|
|
|
|
.badge-void {
|
|
background: var(--color-void-200);
|
|
color: var(--color-void-600);
|
|
}
|
|
|
|
.tag-street {
|
|
background: var(--color-magenta-600);
|
|
color: #fff;
|
|
clip-path: var(--clip-tag);
|
|
padding: 4px 12px;
|
|
font-family: var(--font-display);
|
|
font-size: 14px;
|
|
letter-spacing: 0.1em;
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
/* TOGGLE */
|
|
.toggle {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 26px;
|
|
}
|
|
|
|
.toggle input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--color-void-300);
|
|
transition: .3s;
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
transition: .3s;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.toggle input:checked+.slider {
|
|
background-color: var(--color-cyan-500);
|
|
}
|
|
|
|
.toggle input:checked+.slider:before {
|
|
transform: translateX(22px);
|
|
}
|
|
|
|
/* SOCIAL NEXUS */
|
|
.story-ring {
|
|
position: relative;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
padding: 3px;
|
|
background: var(--color-void-800);
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.story-ring::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
padding: 2px;
|
|
background: linear-gradient(45deg, var(--color-cyan-500), var(--color-magenta-500));
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
.story-ring.live::before {
|
|
background: var(--color-magenta-500);
|
|
box-shadow: 0 0 15px var(--color-magenta-glow);
|
|
animation: pulse-ring 2s infinite;
|
|
}
|
|
|
|
.story-ring.close-friends::before {
|
|
background: var(--color-lime-500);
|
|
}
|
|
|
|
.story-ring:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.feed-post {
|
|
border-bottom: 1px solid var(--color-void-200);
|
|
}
|
|
|
|
.feed-post:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.post-action {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--color-void-400);
|
|
font-size: var(--text-xs);
|
|
font-family: var(--font-mono);
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.post-action:hover {
|
|
color: var(--color-cyan-400);
|
|
}
|
|
|
|
.post-action.liked {
|
|
color: var(--color-magenta-500);
|
|
}
|
|
|
|
.post-action svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* INVENTORY GRID */
|
|
.inventory-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.item-slot {
|
|
aspect-ratio: 1;
|
|
background: var(--color-void-100);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.item-slot:hover {
|
|
background: var(--color-void-200);
|
|
border-color: var(--color-void-400);
|
|
}
|
|
|
|
.item-slot.rare {
|
|
border-color: var(--color-cyan-500);
|
|
box-shadow: inset 0 0 10px rgba(0, 219, 245, 0.2);
|
|
}
|
|
|
|
.item-slot.epic {
|
|
border-color: var(--color-magenta-500);
|
|
box-shadow: inset 0 0 10px rgba(236, 72, 153, 0.2);
|
|
}
|
|
|
|
.item-slot.legendary {
|
|
border-color: var(--color-xp-gold);
|
|
box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2);
|
|
animation: pulse-gold 2s infinite;
|
|
}
|
|
|
|
.item-slot img {
|
|
width: 80%;
|
|
height: 80%;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
|
}
|
|
|
|
.item-count {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
right: 4px;
|
|
font-size: 10px;
|
|
font-family: var(--font-mono);
|
|
color: #fff;
|
|
text-shadow: 0 1px 2px #000;
|
|
}
|
|
|
|
/* MARKETPLACE */
|
|
.holo-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.holo-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transition: 0.5s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.holo-card:hover {
|
|
transform: translateY(-5px) scale(1.02);
|
|
border-color: var(--color-cyan-500);
|
|
box-shadow: 0 0 20px rgba(0, 219, 245, 0.2);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.holo-card:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.holo-tag {
|
|
background: linear-gradient(45deg, var(--color-cyan-600), var(--color-blue-600));
|
|
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0% 100%, 0% 10px);
|
|
padding: 2px 8px;
|
|
font-size: 10px;
|
|
font-family: var(--font-mono);
|
|
color: white;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.cart-panel {
|
|
position: sticky;
|
|
top: 24px;
|
|
}
|
|
|
|
/* EDUCATION (THE DOJO) */
|
|
.curriculum-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-3);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border-left: 2px solid transparent;
|
|
}
|
|
|
|
.curriculum-item:hover {
|
|
background: var(--color-void-100);
|
|
}
|
|
|
|
.curriculum-item.active {
|
|
background: var(--color-void-100);
|
|
border-left-color: var(--color-cyan-500);
|
|
}
|
|
|
|
.skill-tree {
|
|
position: relative;
|
|
padding: var(--space-8);
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.skill-node {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-void-100);
|
|
border: 2px solid var(--color-void-300);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 10;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.skill-node:hover {
|
|
transform: scale(1.1);
|
|
border-color: var(--color-cyan-400);
|
|
box-shadow: 0 0 15px rgba(0, 219, 245, 0.4);
|
|
}
|
|
|
|
.skill-node.unlocked {
|
|
border-color: var(--color-lime-500);
|
|
color: var(--color-lime-500);
|
|
background: rgba(132, 204, 22, 0.1);
|
|
}
|
|
|
|
.skill-node.locked {
|
|
opacity: 0.5;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.skill-connector {
|
|
position: absolute;
|
|
background: var(--color-void-300);
|
|
z-index: 1;
|
|
}
|
|
|
|
.skill-connector.active {
|
|
background: var(--color-lime-500);
|
|
box-shadow: 0 0 5px rgba(132, 204, 22, 0.5);
|
|
}
|
|
|
|
/* CLOUD (THE VAULT) */
|
|
.drop-zone {
|
|
border: 2px dashed var(--color-void-300);
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border-radius: var(--radius-lg);
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drop-zone:hover {
|
|
border-color: var(--color-cyan-500);
|
|
background: rgba(0, 219, 245, 0.05);
|
|
}
|
|
|
|
.file-card {
|
|
background: var(--color-void-100);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.file-card:hover {
|
|
background: var(--color-void-200);
|
|
transform: translateY(-2px);
|
|
border-color: var(--color-void-400);
|
|
}
|
|
|
|
.file-icon {
|
|
font-size: 32px;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
|
|
}
|
|
|
|
.radial-progress-container {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
background: conic-gradient(var(--color-cyan-500) 0% 75%, var(--color-void-200) 75% 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.radial-progress-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: var(--color-void-0);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.radial-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
5. COMPONENTS: MOLECULES
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
.card {
|
|
background-color: var(--color-void-50);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-6);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--color-void-400);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.card-glass {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(var(--glass-blur));
|
|
border: 1px solid var(--glass-border);
|
|
}
|
|
|
|
/* PLATINUM POLISH: MANGA CARDS */
|
|
.card-ronin {
|
|
position: relative;
|
|
background: var(--color-void-100);
|
|
border: 1px solid var(--color-void-300);
|
|
clip-path: polygon(0 0,
|
|
100% 0,
|
|
100% calc(100% - 20px),
|
|
calc(100% - 20px) 100%,
|
|
0 100%);
|
|
padding: var(--space-6);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card-ronin:hover {
|
|
border-color: var(--color-cyan-500);
|
|
box-shadow: var(--shadow-neon-cyan);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card-ronin::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: linear-gradient(135deg, transparent 50%, var(--color-cyan-500) 50%);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* PLATINUM POLISH: GLITCH TITLE */
|
|
.glitch-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.glitch {
|
|
position: relative;
|
|
color: var(--color-void-950);
|
|
mix-blend-mode: lighten;
|
|
}
|
|
|
|
.glitch::before,
|
|
.glitch::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
background: var(--color-void-0);
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
|
|
.glitch::before {
|
|
left: -2px;
|
|
text-shadow: 2px 0 var(--color-magenta-500);
|
|
animation: glitch-anim-1 2s infinite linear alternate-reverse;
|
|
}
|
|
|
|
.glitch::after {
|
|
left: 2px;
|
|
text-shadow: -2px 0 var(--color-cyan-500);
|
|
animation: glitch-anim-2 3s infinite linear alternate-reverse;
|
|
}
|
|
|
|
@keyframes glitch-anim-1 {
|
|
0% {
|
|
clip: rect(20px, 9999px, 15px, 0);
|
|
}
|
|
|
|
20% {
|
|
clip: rect(60px, 9999px, 80px, 0);
|
|
}
|
|
|
|
40% {
|
|
clip: rect(10px, 9999px, 55px, 0);
|
|
}
|
|
|
|
60% {
|
|
clip: rect(90px, 9999px, 10px, 0);
|
|
}
|
|
|
|
80% {
|
|
clip: rect(30px, 9999px, 70px, 0);
|
|
}
|
|
|
|
100% {
|
|
clip: rect(50px, 9999px, 40px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-anim-2 {
|
|
0% {
|
|
clip: rect(60px, 9999px, 10px, 0);
|
|
}
|
|
|
|
20% {
|
|
clip: rect(10px, 9999px, 50px, 0);
|
|
}
|
|
|
|
40% {
|
|
clip: rect(90px, 9999px, 30px, 0);
|
|
}
|
|
|
|
60% {
|
|
clip: rect(20px, 9999px, 70px, 0);
|
|
}
|
|
|
|
80% {
|
|
clip: rect(40px, 9999px, 90px, 0);
|
|
}
|
|
|
|
100% {
|
|
clip: rect(15px, 9999px, 60px, 0);
|
|
}
|
|
}
|
|
|
|
.card-neon-hover::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: var(--color-cyan-500);
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.card-neon-hover:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-3);
|
|
margin-bottom: var(--space-1);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-void-500);
|
|
font-weight: 600;
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background-color: var(--color-void-100);
|
|
color: var(--color-void-900);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: linear-gradient(90deg, rgba(0, 219, 245, 0.15), transparent);
|
|
color: var(--color-cyan-400);
|
|
border-left: 3px solid var(--color-cyan-500);
|
|
box-shadow: 10px 0 20px -10px rgba(0, 219, 245, 0.3);
|
|
padding-left: calc(var(--space-3) - 3px);
|
|
/* Compensate for border */
|
|
}
|
|
|
|
.nav-item.active svg {
|
|
color: var(--color-cyan-400);
|
|
filter: drop-shadow(0 0 5px var(--color-cyan-glow));
|
|
}
|
|
|
|
.nav-item svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: var(--space-3);
|
|
}
|
|
|
|
/* NEW MODULES (MARKETPLACE, SOCIAL, ETC.) */
|
|
|
|
/* Marketplace: Product Card */
|
|
.product-card {
|
|
background: var(--color-void-100);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
transition: all 0.3s var(--ease-out);
|
|
position: relative;
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--color-cyan-500);
|
|
box-shadow: 0 10px 30px -10px rgba(0, 219, 245, 0.2);
|
|
}
|
|
|
|
.product-image {
|
|
height: 200px;
|
|
background: var(--color-void-300);
|
|
position: relative;
|
|
}
|
|
|
|
.product-price {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: var(--color-cyan-400);
|
|
padding: 4px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-mono);
|
|
font-weight: bold;
|
|
border: 1px solid var(--color-cyan-900);
|
|
}
|
|
|
|
/* Social: Feed Post */
|
|
.feed-post {
|
|
background: var(--color-void-50);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-6);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.post-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.post-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-magenta-500);
|
|
padding: 2px;
|
|
}
|
|
|
|
/* Gamification: XP Bar */
|
|
.xp-container {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: var(--color-void-300);
|
|
border-radius: var(--radius-full);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.xp-fill {
|
|
height: 100%;
|
|
background: var(--grad-gaming);
|
|
width: 0%;
|
|
transition: width 1s var(--ease-out);
|
|
box-shadow: 0 0 10px var(--color-intro-gold);
|
|
}
|
|
|
|
/* Upload: Drop Zone */
|
|
.drop-zone {
|
|
border: 2px dashed var(--color-void-300);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-12);
|
|
text-align: center;
|
|
transition: all 0.2s;
|
|
background: rgba(255, 255, 255, 0.01);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drop-zone:hover {
|
|
border-color: var(--color-cyan-500);
|
|
background: rgba(0, 219, 245, 0.02);
|
|
transform: scale(1.01);
|
|
}
|
|
|
|
/* Waveform Animation */
|
|
/* Waveform Animation - PERFECTED */
|
|
.waveform-bar {
|
|
width: 6px;
|
|
background: var(--color-cyan-500);
|
|
border-radius: 4px;
|
|
animation: wave 1.2s ease-in-out infinite;
|
|
height: 100%;
|
|
box-shadow: 0 0 10px var(--color-cyan-glow);
|
|
}
|
|
|
|
.waveform-bar:nth-child(1) {
|
|
animation-duration: 0.8s;
|
|
animation-delay: -0.2s;
|
|
height: 40%;
|
|
}
|
|
|
|
.waveform-bar:nth-child(2) {
|
|
animation-duration: 1.1s;
|
|
animation-delay: -0.4s;
|
|
height: 70%;
|
|
background: var(--color-magenta-500);
|
|
box-shadow: 0 0 10px var(--color-magenta-glow);
|
|
}
|
|
|
|
.waveform-bar:nth-child(3) {
|
|
animation-duration: 1.3s;
|
|
animation-delay: -0.6s;
|
|
height: 100%;
|
|
}
|
|
|
|
.waveform-bar:nth-child(4) {
|
|
animation-duration: 0.9s;
|
|
animation-delay: -0.8s;
|
|
height: 60%;
|
|
background: var(--color-lime-500);
|
|
box-shadow: 0 0 10px var(--color-lime-glow);
|
|
}
|
|
|
|
.waveform-bar:nth-child(5) {
|
|
animation-duration: 1.0s;
|
|
animation-delay: -1.0s;
|
|
height: 80%;
|
|
}
|
|
|
|
.waveform-bar:nth-child(6) {
|
|
animation-duration: 1.4s;
|
|
animation-delay: -1.2s;
|
|
height: 50%;
|
|
background: var(--color-magenta-500);
|
|
box-shadow: 0 0 10px var(--color-magenta-glow);
|
|
}
|
|
|
|
@keyframes wave {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scaleY(0.5);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
50% {
|
|
transform: scaleY(1.2);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Player Bar - NEON GLASS */
|
|
.player-bar {
|
|
background: rgba(5, 5, 8, 0.65);
|
|
backdrop-filter: blur(20px);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding: var(--space-4) var(--space-6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.player-bar:hover {
|
|
background: rgba(5, 5, 8, 0.85);
|
|
border-top-color: var(--color-cyan-500);
|
|
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.track-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
width: 300px;
|
|
}
|
|
|
|
.track-art {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.player-controls {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
max-width: 600px;
|
|
}
|
|
|
|
/*
|
|
─────────────────────────────────────────────────────────────────────────
|
|
MODULE: AUTH & SECURITY (PHASE 6)
|
|
─────────────────────────────────────────────────────────────────────────
|
|
*/
|
|
.auth-container {
|
|
max-width: 440px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.auth-glass-panel {
|
|
background: rgba(5, 5, 8, 0.6);
|
|
backdrop-filter: blur(24px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--radius-2xl);
|
|
padding: var(--space-8);
|
|
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.auth-glass-panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--color-cyan-500), var(--color-magenta-500));
|
|
}
|
|
|
|
.otp-group {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
justify-content: center;
|
|
margin: var(--space-6) 0;
|
|
}
|
|
|
|
.otp-input {
|
|
width: 48px;
|
|
height: 56px;
|
|
background: var(--color-void-200);
|
|
border: 1px solid var(--color-void-300);
|
|
border-radius: var(--radius-md);
|
|
text-align: center;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xl);
|
|
color: var(--color-cyan-400);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.otp-input:focus {
|
|
border-color: var(--color-cyan-500);
|
|
box-shadow: 0 0 15px rgba(0, 219, 245, 0.2);
|
|
transform: translateY(-2px);
|
|
outline: none;
|
|
}
|
|
|
|
.password-strength {
|
|
height: 4px;
|
|
background: var(--color-void-300);
|
|
border-radius: 2px;
|
|
margin-top: var(--space-2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.strength-bar {
|
|
height: 100%;
|
|
width: 0%;
|
|
transition: width 0.3s ease, background-color 0.3s ease;
|
|
}
|
|
|
|
.strength-weak {
|
|
width: 33%;
|
|
background-color: var(--color-magenta-500);
|
|
}
|
|
|
|
.strength-medium {
|
|
width: 66%;
|
|
background-color: var(--color-warning);
|
|
}
|
|
|
|
.strength-strong {
|
|
width: 100%;
|
|
background-color: var(--color-lime-500);
|
|
}
|
|
|
|
/*
|
|
─────────────────────────────────────────────────────────────────────────
|
|
MODULE: USER NEXUS (PROFILE)
|
|
─────────────────────────────────────────────────────────────────────────
|
|
*/
|
|
|
|
.profile-banner {
|
|
height: 240px;
|
|
width: 100%;
|
|
background: linear-gradient(45deg, var(--color-void-300), var(--color-void-100));
|
|
border-radius: var(--radius-xl);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-void-200);
|
|
clip-path: polygon(0 0, 100% 0, 100% 85%, 98% 100%, 0 100%);
|
|
}
|
|
|
|
.banner-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.6;
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
.profile-banner:hover .banner-image {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.profile-header-content {
|
|
position: relative;
|
|
margin-top: -60px;
|
|
padding: 0 var(--space-8);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--space-6);
|
|
z-index: 10;
|
|
}
|
|
|
|
.profile-avatar-xl {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
/* Circle for standard avatar look */
|
|
border: 4px solid var(--color-void);
|
|
background: var(--color-void-100);
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.profile-tabs {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
border-bottom: 1px solid var(--color-void-200);
|
|
margin-top: var(--space-8);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.profile-tab {
|
|
padding: var(--space-3) var(--space-6);
|
|
color: var(--text-dim);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.profile-tab:hover {
|
|
color: var(--text-bright);
|
|
}
|
|
|
|
.profile-tab.active {
|
|
color: var(--color-cyan-400);
|
|
}
|
|
|
|
.profile-tab.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--color-cyan-500);
|
|
box-shadow: 0 -2px 10px var(--color-cyan-glow);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--color-void-100);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: var(--text-2xl);
|
|
font-weight: bold;
|
|
color: var(--text-bright);
|
|
font-family: var(--font-gaming);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-dim);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
.control-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.btn-play {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
color: black;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.btn-play:hover {
|
|
transform: scale(1.1);
|
|
background: var(--color-cyan-500);
|
|
box-shadow: 0 0 20px var(--color-cyan-500);
|
|
}
|
|
|
|
.progress-container {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
color: var(--color-void-500);
|
|
}
|
|
|
|
.progress-bar {
|
|
flex-grow: 1;
|
|
height: 4px;
|
|
background: var(--color-void-300);
|
|
border-radius: 2px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 35%;
|
|
background: linear-gradient(90deg, var(--color-cyan-500), var(--color-magenta-500));
|
|
box-shadow: 0 0 10px var(--color-magenta-glow);
|
|
}
|
|
|
|
.progress-bar:hover .progress-fill {
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
/*
|
|
* INTEGRATED GEMS (v3/v4)
|
|
*/
|
|
|
|
/* Avatar Statuses (v3) */
|
|
.avatar-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.status-indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 25%;
|
|
height: 25%;
|
|
min-width: 8px;
|
|
min-height: 8px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-void-100);
|
|
}
|
|
|
|
.status-indicator.online {
|
|
background: var(--color-lime-500);
|
|
box-shadow: var(--glow-green);
|
|
}
|
|
|
|
.status-indicator.away {
|
|
background: var(--color-warning);
|
|
box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
|
|
}
|
|
|
|
.status-indicator.busy {
|
|
background: var(--color-error);
|
|
box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
|
|
}
|
|
|
|
/* Equalizer (v4) */
|
|
.eq-visualizer {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
height: 20px;
|
|
}
|
|
|
|
.eq-bar {
|
|
width: 4px;
|
|
background: var(--color-cyan-500);
|
|
border-radius: 1px;
|
|
animation: eq-bounce 0.8s ease infinite;
|
|
}
|
|
|
|
.eq-bar:nth-child(1) {
|
|
animation-delay: 0s;
|
|
height: 40%;
|
|
}
|
|
|
|
.eq-bar:nth-child(2) {
|
|
animation-delay: 0.1s;
|
|
height: 70%;
|
|
background: var(--color-magenta-500);
|
|
}
|
|
|
|
.eq-bar:nth-child(3) {
|
|
animation-delay: 0.2s;
|
|
height: 50%;
|
|
}
|
|
|
|
.eq-bar:nth-child(4) {
|
|
animation-delay: 0.3s;
|
|
height: 90%;
|
|
background: var(--color-magenta-500);
|
|
}
|
|
|
|
.eq-bar:nth-child(5) {
|
|
animation-delay: 0.15s;
|
|
height: 60%;
|
|
}
|
|
|
|
@keyframes eq-bounce {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scaleY(0.4);
|
|
}
|
|
}
|
|
|
|
/* Volume Slider (v4) */
|
|
.volume-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.volume-slider {
|
|
width: 80px;
|
|
height: 4px;
|
|
background: var(--color-void-300);
|
|
border-radius: var(--radius-full);
|
|
position: relative;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.volume-fill {
|
|
height: 100%;
|
|
width: 70%;
|
|
background: var(--color-cyan-500);
|
|
border-radius: var(--radius-full);
|
|
position: relative;
|
|
}
|
|
|
|
.volume-slider:hover .volume-fill {
|
|
background: var(--color-magenta-500);
|
|
}
|
|
|
|
/*
|
|
* MODULE: ANALYTICS
|
|
*/
|
|
|
|
/* CSS Pie Chart */
|
|
.pie-chart {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
background: conic-gradient(var(--color-cyan-500) 0% 65%,
|
|
var(--color-magenta-500) 65% 85%,
|
|
var(--color-void-200) 85% 100%);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pie-chart::after {
|
|
content: "";
|
|
width: 80%;
|
|
height: 80%;
|
|
background: var(--color-void);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
}
|
|
|
|
.pie-chart-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
text-align: center;
|
|
}
|
|
|
|
/* CSS Bar Chart */
|
|
.bar-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
height: 100px;
|
|
padding-bottom: 4px;
|
|
border-bottom: 1px solid var(--color-void-200);
|
|
}
|
|
|
|
.bar-col {
|
|
flex: 1;
|
|
background: var(--color-void-200);
|
|
border-radius: 4px 4px 0 0;
|
|
position: relative;
|
|
transition: height 0.3s ease, background 0.3s ease;
|
|
}
|
|
|
|
.bar-col:hover {
|
|
background: var(--color-cyan-500);
|
|
box-shadow: var(--glow-cyan);
|
|
}
|
|
|
|
.bar-col.active {
|
|
background: linear-gradient(to top, var(--color-cyan-600), var(--color-cyan-400));
|
|
}
|
|
|
|
.bar-col.trend-down {
|
|
background: linear-gradient(to top, var(--color-magenta-700), var(--color-magenta-500));
|
|
}
|
|
|
|
/* Sparklines (Static SVG) */
|
|
.sparkline {
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.sparkline.up {
|
|
stroke: var(--color-lime-500);
|
|
}
|
|
|
|
.sparkline.down {
|
|
stroke: var(--color-magenta-500);
|
|
}
|
|
|
|
/*
|
|
* MODULE: PRODUCTIVITY
|
|
*/
|
|
|
|
/* Kanban Board */
|
|
.kanban-board {
|
|
display: flex;
|
|
gap: 1rem;
|
|
overflow-x: auto;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.kanban-col {
|
|
min-width: 280px;
|
|
background: var(--color-void-100);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.kanban-card {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-md);
|
|
padding: 1rem;
|
|
cursor: grab;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.kanban-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-cyan-500);
|
|
}
|
|
|
|
.kanban-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 10%;
|
|
bottom: 10%;
|
|
width: 3px;
|
|
background: var(--color-void-300);
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
.kanban-card.priority-high::before {
|
|
background: var(--color-magenta-500);
|
|
}
|
|
|
|
.kanban-card.priority-med::before {
|
|
background: var(--color-warning);
|
|
}
|
|
|
|
.kanban-card.priority-low::before {
|
|
background: var(--color-lime-500);
|
|
}
|
|
|
|
/* Calendar Widget */
|
|
.calendar-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.calendar-day {
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-dim);
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-day:hover {
|
|
background: var(--color-void-200);
|
|
color: var(--text-bright);
|
|
}
|
|
|
|
.calendar-day.active {
|
|
background: var(--color-cyan-600);
|
|
color: var(--color-black);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar-day.has-event::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 4px;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--color-magenta-500);
|
|
}
|
|
|
|
/*
|
|
* MODULE: FEEDBACK & SYSTEM
|
|
*/
|
|
|
|
/* Modal */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(8, 8, 12, 0.8);
|
|
backdrop-filter: blur(4px);
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.modal-backdrop.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: 2rem;
|
|
max-width: 500px;
|
|
width: 90%;
|
|
box-shadow: var(--shadow-2xl);
|
|
transform: scale(0.95);
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.modal-backdrop.active .modal-content {
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* Tooltips */
|
|
[data-tooltip] {
|
|
position: relative;
|
|
cursor: help;
|
|
}
|
|
|
|
[data-tooltip]::before {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(4px);
|
|
padding: 6px 12px;
|
|
background: var(--color-void);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-lg);
|
|
border-bottom-color: var(--color-cyan-500);
|
|
z-index: 20;
|
|
}
|
|
|
|
[data-tooltip]:hover::before {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(-8px);
|
|
}
|
|
|
|
/* Toasts */
|
|
.toast-container {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
z-index: 60;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.toast {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-void-200);
|
|
border-left: 4px solid var(--color-cyan-500);
|
|
padding: 16px;
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 300px;
|
|
animation: slideInRight 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Toggles */
|
|
.toggle-switch {
|
|
width: 44px;
|
|
height: 24px;
|
|
background: var(--color-void-300);
|
|
border-radius: 99px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.toggle-switch::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.toggle-switch.active {
|
|
background: var(--color-lime-500);
|
|
}
|
|
|
|
.toggle-switch.active::after {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
6. COMPONENTS: ORGANISMS
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
.player-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 90px;
|
|
background: var(--color-void-50);
|
|
border-top: 1px solid var(--color-void-200);
|
|
display: grid;
|
|
grid-template-columns: 300px 1fr 300px;
|
|
align-items: center;
|
|
padding: 0 var(--space-4);
|
|
z-index: 100;
|
|
}
|
|
|
|
.track-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.track-art {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: var(--color-void-200);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 400px;
|
|
background: var(--color-void-50);
|
|
border: 1px solid var(--color-void-200);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat-header {
|
|
padding: var(--space-4);
|
|
border-bottom: 1px solid var(--color-void-200);
|
|
background: var(--color-void-100);
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.chat-messages {
|
|
flex-grow: 1;
|
|
padding: var(--space-4);
|
|
overflow-y: auto;
|
|
background: var(--color-void-50);
|
|
}
|
|
|
|
.message-row {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-6);
|
|
animation: slideUp 0.3s;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--text-sm);
|
|
text-align: left;
|
|
}
|
|
|
|
.table th {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-bottom: 1px solid var(--color-void-200);
|
|
color: var(--color-void-500);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.table td {
|
|
padding: var(--space-4);
|
|
border-bottom: 1px solid var(--color-void-100);
|
|
color: var(--color-void-700);
|
|
}
|
|
|
|
.table tr:hover td {
|
|
background: var(--color-void-100);
|
|
color: var(--color-void-900);
|
|
}
|
|
|
|
/* SEARCH FIXES */
|
|
.search-wrapper {
|
|
position: relative;
|
|
width: 320px;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 18px;
|
|
/* Fixed size */
|
|
height: 18px;
|
|
color: var(--color-void-500);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.input-search {
|
|
padding-left: 40px;
|
|
/* Space for icon */
|
|
height: 40px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-color: transparent;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.input-search:focus {
|
|
background: var(--color-void-50);
|
|
border-color: var(--color-cyan-500);
|
|
box-shadow: 0 0 15px rgba(0, 219, 245, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="flex h-screen overflow-hidden">
|
|
<!-- SIDEBAR -->
|
|
<aside class="w-64 bg-plate border-r border-void-200 flex flex-col shrink-0" style="width: 280px;">
|
|
<div class="p-6 flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center animate-spin-slow"
|
|
style="background: conic-gradient(from 180deg, var(--color-cyan-500), var(--color-magenta-500), var(--color-cyan-500)); padding: 2px;">
|
|
<div class="w-full h-full bg-void-100 rounded-full flex items-center justify-center">
|
|
<span class="font-display text-cyan font-bold text-xl">V</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-display text-2xl m-0 leading-none tracking-wide">VEZA</h1>
|
|
<div class="text-xs font-mono text-cyan tracking-widest">SYSTEM_V.ULTRA</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="flex-col px-4 gap-1 overflow-y-auto grow">
|
|
<div class="text-xs font-mono text-muted uppercase mt-6 mb-2 px-3">Core Framework</div>
|
|
<div class="nav-item active" data-target="intro">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
</svg>
|
|
Introduction
|
|
</div>
|
|
<div class="nav-item" data-target="colors">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
</svg>
|
|
Colors & Theming
|
|
</div>
|
|
<div class="nav-item" data-target="components">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
|
|
</svg>
|
|
Interface Elements
|
|
</div>
|
|
|
|
<div class="text-xs font-mono text-muted uppercase mt-6 mb-2 px-3">Social Nexus</div>
|
|
<div class="nav-item" data-target="profile">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
Profiles
|
|
</div>
|
|
<div class="nav-item" data-target="social">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
Social Feed
|
|
</div>
|
|
<div class="nav-item" data-target="chat">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg>
|
|
Chat Interface
|
|
</div>
|
|
<div class="nav-item" data-target="gamification">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<polygon
|
|
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
|
|
</polygon>
|
|
</svg>
|
|
Gamification (XP)
|
|
</div>
|
|
|
|
<div class="text-xs font-mono text-muted uppercase mt-6 mb-2 px-3">Market & Assets</div>
|
|
<div class="nav-item" data-target="marketplace">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<circle cx="9" cy="21" r="1"></circle>
|
|
<circle cx="20" cy="21" r="1"></circle>
|
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
</svg>
|
|
Marketplace
|
|
</div>
|
|
<div class="nav-item" data-target="materials">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path
|
|
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
|
|
</path>
|
|
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
|
|
<line x1="12" y1="22.08" x2="12" y2="12"></line>
|
|
</svg>
|
|
Material Mgmt
|
|
</div>
|
|
|
|
<div class="text-xs font-mono text-muted uppercase mt-6 mb-2 px-3">Content & Cloud</div>
|
|
<div class="nav-item" data-target="audio">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M9 18V5l12-2v13"></path>
|
|
<circle cx="6" cy="18" r="3"></circle>
|
|
<circle cx="18" cy="16" r="3"></circle>
|
|
</svg>
|
|
Audio Streaming
|
|
</div>
|
|
<div class="nav-item" data-target="education">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
|
|
<path d="M6 12v5c3 3 9 3 12 0v-5"></path>
|
|
</svg>
|
|
Education
|
|
</div>
|
|
<div class="nav-item" data-target="cloud">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
|
|
</svg>
|
|
Cloud Storage
|
|
</div>
|
|
<div class="nav-item" data-target="files">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
|
|
<polyline points="13 2 13 9 20 9"></polyline>
|
|
</svg>
|
|
File Manager
|
|
</div>
|
|
|
|
<div class="text-xs font-mono text-muted uppercase mt-6 mb-2 px-3">Data & Admin</div>
|
|
<div class="nav-item" data-target="analytics">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M18 20V10M12 20V4M6 20v-6"></path>
|
|
</svg>
|
|
Analytics
|
|
</div>
|
|
<div class="nav-item" data-target="admin">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
</svg>
|
|
Administration
|
|
</div>
|
|
<div class="nav-item" data-target="auth">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
</svg>
|
|
Auth & Security
|
|
</div>
|
|
<div class="nav-item" data-target="notifications">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
|
</svg>
|
|
Notifications
|
|
</div>
|
|
<div class="nav-item" data-target="advanced_sec">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
</svg>
|
|
Adv. Security
|
|
</div>
|
|
|
|
<div class="text-xs font-mono text-muted uppercase mt-6 mb-2 px-3">Dev & Logic</div>
|
|
<div class="nav-item" data-target="uxui">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M12 19l7-7 3 3-7 7-3-3z"></path>
|
|
<path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
|
|
<path d="M2 2l7.586 7.586"></path>
|
|
<circle cx="11" cy="11" r="2"></circle>
|
|
</svg>
|
|
UX/UI Lab
|
|
</div>
|
|
<div class="nav-item" data-target="integrations">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<polyline points="16 18 22 12 16 6"></polyline>
|
|
<polyline points="8 6 2 12 8 18"></polyline>
|
|
</svg>
|
|
Integrations
|
|
</div>
|
|
<div class="nav-item" data-target="api">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<polyline points="16 18 22 12 16 6"></polyline>
|
|
<polyline points="8 6 2 12 8 18"></polyline>
|
|
</svg>
|
|
Developers API
|
|
</div>
|
|
<div class="nav-item" data-target="search">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
Search Logic
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="p-4 border-t border-void-200">
|
|
<div class="flex items-center gap-3">
|
|
<div class="avatar">
|
|
<img src="https://ui-avatars.com/api/?name=Senke&background=random" alt="Senke">
|
|
<div class="status-dot status-online"></div>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-bold text-primary">Senke</div>
|
|
<div class="text-xs text-lime">● Online</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- MAIN AREA -->
|
|
<main class="grow overflow-y-auto bg-void relative">
|
|
<!-- TOPBAR -->
|
|
<header class="sticky top-0 z-50 border-b border-void-200"
|
|
style="background: rgba(5,5,8,0.7); backdrop-filter: blur(20px);">
|
|
<div class="container h-16 flex items-center justify-between">
|
|
<div class="search-wrapper">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
<input type="text" class="input input-search w-full" placeholder="Search components (Cmd+K)..."
|
|
style="width: 320px;">
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<span class="badge badge-void font-mono">v6.2.0-PULSE</span>
|
|
<button class="btn btn-icon btn-ghost" id="themeToggle" title="Toggle Theme">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-primary btn-sm btn-ronin">
|
|
<span class="mr-2">⚡</span> Download Assets
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="page-bg"></div>
|
|
|
|
<div class="container py-12 pb-32">
|
|
|
|
<!-- HERO -->
|
|
<section id="intro" class="mb-16 active-section">
|
|
<span class="text-cyan font-mono text-sm tracking-widest uppercase mb-2 block">Design System
|
|
Documentation</span>
|
|
<div class="glitch-wrapper mb-6">
|
|
<h1 class="text-6xl font-display leading-none glitch" data-text="Neon Ronin">Neon Ronin</h1>
|
|
</div>
|
|
<h2 class="text-4xl font-display mb-6 text-grad-cyber">System Architecture</h2>
|
|
<p class="text-xl text-dim max-w-3xl">
|
|
A comprehensive UI kits for <span class="text-bright">high-density interfaces</span>.
|
|
Merging the raw energy of street culture with the precision of cyber-security tools.
|
|
</p>
|
|
<div class="flex gap-4 mt-8">
|
|
<button class="btn btn-primary btn-lg btn-ronin">Get Started</button>
|
|
<button class="btn btn-outline btn-lg">View Source</button>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-void-200 mb-16">
|
|
|
|
<!-- COLORS -->
|
|
<section id="colors" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Color Spectrum</h2>
|
|
<div class="grid grid-cols-4 gap-6 mb-8">
|
|
<div class="card-ronin card-neon-hover">
|
|
<div class="h-24 rounded-md bg-void-50 mb-4 border border-void-200"></div>
|
|
<h4 class="text-base text-primary">Void (Neutral)</h4>
|
|
<p class="text-xs text-dim">Base substrate. #050508</p>
|
|
</div>
|
|
<div class="card-ronin card-neon-hover border-cyan-500"
|
|
style="border-color: rgba(0,219,245,0.3);">
|
|
<div class="h-24 rounded-md bg-cyan-500 mb-4 shadow-neon-cyan"></div>
|
|
<h4 class="text-base text-cyan">Neon Cyan</h4>
|
|
<p class="text-xs text-dim">Primary Action. #00B8D4</p>
|
|
</div>
|
|
<div class="card-ronin card-neon-hover" style="border-color: rgba(236,72,153,0.3);">
|
|
<div class="h-24 rounded-md bg-magenta-500 mb-4 shadow-neon-magenta"></div>
|
|
<h4 class="text-base text-magenta">Hot Magenta</h4>
|
|
<p class="text-xs text-dim">Alert / Street Accent.</p>
|
|
</div>
|
|
<div class="card-ronin card-neon-hover">
|
|
<div class="h-24 rounded-md bg-lime-500 mb-4"></div>
|
|
<h4 class="text-base text-lime">Acid Lime</h4>
|
|
<p class="text-xs text-dim">Data / Success.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NATURE PALETTE (From Talas v2) -->
|
|
<h3 class="mb-4 text-sm font-mono text-muted uppercase">Nature Expansion (Talas v2)</h3>
|
|
<div class="grid grid-cols-4 gap-6">
|
|
<div class="card bg-void border-void-200">
|
|
<div class="h-16 rounded mb-2 bg-grad-nature"></div>
|
|
<span class="text-xs font-mono">Gradient: Forest</span>
|
|
</div>
|
|
<div class="card bg-void border-void-200">
|
|
<div class="h-16 rounded mb-2" style="background: var(--color-moss)"></div>
|
|
<span class="text-xs font-mono">Color: Moss</span>
|
|
</div>
|
|
<div class="card bg-void border-void-200">
|
|
<div class="h-16 rounded mb-2" style="background: var(--color-leaf)"></div>
|
|
<span class="text-xs font-mono">Color: Leaf</span>
|
|
</div>
|
|
<div class="card bg-void border-void-200">
|
|
<div class="h-16 rounded mb-2" style="background: var(--color-bloom)"></div>
|
|
<span class="text-xs font-mono">Color: Bloom</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- COMPONENTS SHOWCASE -->
|
|
<section id="components" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Interface Elements</h2>
|
|
<div class="card bg-plate">
|
|
<div class="grid grid-cols-2 gap-12">
|
|
<!-- Buttons -->
|
|
<div>
|
|
<h4 class="text-xs font-mono uppercase text-muted mb-4">Action Elements</h4>
|
|
<div class="flex flex-wrap gap-4 items-center mb-6">
|
|
<button class="btn btn-primary btn-ronin">Primary Ronin</button>
|
|
<button class="btn btn-secondary">Secondary</button>
|
|
<button class="btn btn-outline">Outline</button>
|
|
<button class="btn btn-ghost">Ghost</button>
|
|
</div>
|
|
<div class="flex flex-wrap gap-4 items-center mb-6">
|
|
<button class="btn btn-hacker">Term.Execute()</button>
|
|
<button class="btn btn-gaming">LEVEL UP</button> <!-- NEW GAMING BTN -->
|
|
<button class="btn btn-icon btn-outline"><svg width="20" height="20"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M5 12h14M12 5l7 7-7 7" />
|
|
</svg></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inputs -->
|
|
<div>
|
|
<h4 class="text-xs font-mono uppercase text-muted mb-4">Data Entry</h4>
|
|
<div class="input-group">
|
|
<label class="label">System User ID</label>
|
|
<input type="text" class="input" placeholder="e.g. USR-9928X" value="SENKE_ADMIN">
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="input-group grow">
|
|
<label class="label">Passcode</label>
|
|
<input type="password" class="input" value="********">
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="label">2FA</label>
|
|
<input type="text" class="input input-code text-center w-24" value="492 110">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULES SHOWCASE (VEZA v2) -->
|
|
<section id="modules" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">New Modules (Veza v2)</h2>
|
|
<div class="grid grid-cols-4 gap-6">
|
|
<!-- Marketplace -->
|
|
<div class="product-card">
|
|
<div class="product-image flex items-center justify-center">
|
|
<span class="text-4xl">🎹</span>
|
|
</div>
|
|
<div class="p-4">
|
|
<h4 class="text-bright font-bold mb-1 font-head">Cyber Synth Vol.1</h4>
|
|
<p class="text-xs text-dim mb-3">WAV / MIDI Pack</p>
|
|
<div class="flex justify-between items-center">
|
|
<div class="badge badge-gaming">$29.00</div>
|
|
<button class="btn btn-sm btn-primary">Buy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social -->
|
|
<div class="feed-post col-span-2 relative overflow-hidden">
|
|
<div
|
|
class="absolute top-0 right-0 p-2 opacity-10 font-street text-6xl text-magenta rotate-12">
|
|
NEWS</div>
|
|
<div class="post-header">
|
|
<div class="post-avatar bg-black flex items-center justify-center">
|
|
<span class="text-xl">👾</span>
|
|
</div>
|
|
<div>
|
|
<div class="text-bright font-bold flex items-center gap-2">
|
|
Neon Artist <span class="badge badge-cyan text-[10px]">PRO</span>
|
|
</div>
|
|
<div class="text-xs text-dim">2 hours ago · London, UK</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-dim mb-4 text-sm">Just dropped a new track! Check it out. The mastering on
|
|
this one is insane thanks to the <span class="text-lime">@Veza_AI</span> tools.</p>
|
|
|
|
<div class="bg-void-200 p-3 rounded-md flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-black rounded flex items-center justify-center text-cyan">▶
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-bold text-white">Midnight City (Remix)</div>
|
|
<div class="text-[10px] text-dim">Click to preview</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-xs font-mono mb-1 text-dim uppercase">Current Level Progress</div>
|
|
<div class="xp-container">
|
|
<div class="xp-fill" style="width: 70%"></div>
|
|
</div>
|
|
<div class="text-xs text-right mt-1 text-dim font-mono">XP: 700/1000</div>
|
|
</div>
|
|
|
|
<!-- Upload -->
|
|
<div class="drop-zone flex items-center justify-center flex-col relative overflow-hidden group">
|
|
<div
|
|
class="absolute inset-0 bg-void-200 opacity-0 group-hover:opacity-10 transition-opacity">
|
|
</div>
|
|
<svg class="w-10 h-10 text-cyan mb-4 group-hover:scale-110 transition-transform" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
|
|
</path>
|
|
</svg>
|
|
|
|
<span class="text-sm font-bold text-bright mb-1">Drop Stems Here</span>
|
|
<span class="text-xs text-dim">WAV, AIFF, FLAC</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- INTEGRATED GEMS (v3/v4) -->
|
|
<section class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Legacy System Integration (v3 / v4)</h2>
|
|
<div class="card bg-plate">
|
|
<div class="grid grid-cols-3 gap-8">
|
|
<!-- Typography Gem -->
|
|
<div>
|
|
<h4 class="text-xs font-mono uppercase text-muted mb-4">Editorial Typography (v3)</h4>
|
|
<div class="p-4 bg-void border border-void-200 rounded-lg">
|
|
<h2 class="font-serif text-3xl text-bright italic mb-2">The Digital Soul</h2>
|
|
<p class="text-dim text-sm font-serif">"Music is the hidden arithmetic of the soul,
|
|
which does not know that it is counting."</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Gem -->
|
|
<div>
|
|
<h4 class="text-xs font-mono uppercase text-muted mb-4">Advanced Status (v3)</h4>
|
|
<div class="flex gap-4">
|
|
<div class="avatar-container">
|
|
<div class="w-12 h-12 rounded-full overflow-hidden border border-void-200">
|
|
<img src="https://ui-avatars.com/api/?name=A&background=random" alt="">
|
|
</div>
|
|
<div class="status-indicator online"></div>
|
|
</div>
|
|
<div class="avatar-container">
|
|
<div class="w-12 h-12 rounded-full overflow-hidden border border-void-200">
|
|
<img src="https://ui-avatars.com/api/?name=B&background=random" alt="">
|
|
</div>
|
|
<div class="status-indicator away"></div>
|
|
</div>
|
|
<div class="avatar-container">
|
|
<div class="w-12 h-12 rounded-full overflow-hidden border border-void-200">
|
|
<img src="https://ui-avatars.com/api/?name=C&background=random" alt="">
|
|
</div>
|
|
<div class="status-indicator busy"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Gem -->
|
|
<div>
|
|
<h4 class="text-xs font-mono uppercase text-muted mb-4">Audio Controls (v4)</h4>
|
|
<div class="flex flex-col gap-4">
|
|
<div
|
|
class="flex items-center gap-3 bg-void-50 p-3 rounded-lg border border-void-200">
|
|
<span class="text-xs text-dim font-mono">EQ</span>
|
|
<div class="eq-visualizer">
|
|
<div class="eq-bar"></div>
|
|
<div class="eq-bar"></div>
|
|
<div class="eq-bar"></div>
|
|
<div class="eq-bar"></div>
|
|
<div class="eq-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-3 bg-void-50 p-3 rounded-lg border border-void-200">
|
|
<svg class="w-4 h-4 text-dim" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path d="M11 5L6 9H2v6h4l5 4V5z" />
|
|
</svg>
|
|
<div class="volume-slider">
|
|
<div class="volume-fill"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULE: AUTH & SECURITY -->
|
|
<section id="auth" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Module: Auth & Security</h2>
|
|
|
|
<div class="grid grid-cols-2 gap-12">
|
|
<!-- Login Interface -->
|
|
<div>
|
|
<h3 class="text-sm font-mono text-dim uppercase mb-4">Secure Access Gateway</h3>
|
|
<div class="auth-glass-panel">
|
|
<div class="text-center mb-8">
|
|
<div
|
|
class="w-12 h-12 bg-void-200 rounded-full mx-auto flex items-center justify-center mb-4 border border-void-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round" class="text-cyan">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-bright">System Entry</h4>
|
|
<p class="text-sm text-dim">Identify yourself, Ronin.</p>
|
|
</div>
|
|
|
|
<form class="space-y-4" onsubmit="event.preventDefault();">
|
|
<div class="input-floating">
|
|
<input type="text" id="auth-id" class="input" placeholder=" "
|
|
value="SENKE_ADMIN">
|
|
<label for="auth-id">System User ID</label>
|
|
</div>
|
|
<div class="input-floating">
|
|
<input type="password" id="auth-pass" class="input" placeholder=" "
|
|
value="********">
|
|
<label for="auth-pass">Passcode</label>
|
|
<div
|
|
class="password-strength absolute right-3 bottom-3 w-2 h-2 rounded-full bg-lime-500 shadow-[0_0_10px_rgba(132,204,22,0.5)]">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<button class="mt-6 w-full btn btn-primary flex justify-center items-center gap-2">
|
|
<span>Authenticate</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M5 12h13M12 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="mt-4 text-center">
|
|
<a href="#" class="text-xs text-dim hover:text-cyan transition-colors">Lost Access
|
|
Key?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2FA & Security Status -->
|
|
<div class="space-y-8">
|
|
<div>
|
|
<h3 class="text-sm font-mono text-dim uppercase mb-4">2-Factor Verification</h3>
|
|
<div class="auth-glass-panel">
|
|
<p class="text-sm text-center text-dim mb-4">Enter the code from your authenticator
|
|
device.</p>
|
|
<div class="otp-group">
|
|
<input type="text" maxlength="1" class="otp-input" value="4">
|
|
<input type="text" maxlength="1" class="otp-input" value="9">
|
|
<input type="text" maxlength="1" class="otp-input" value="2">
|
|
<input type="text" maxlength="1" class="otp-input" value="">
|
|
<input type="text" maxlength="1" class="otp-input" value="">
|
|
<input type="text" maxlength="1" class="otp-input" value="">
|
|
</div>
|
|
<div class="text-center font-mono text-xs text-cyan animate-pulse">
|
|
EXPIRES IN 00:23
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-sm font-mono text-dim uppercase mb-4">Security Logs</h3>
|
|
<div class="card p-0 overflow-hidden">
|
|
<table class="w-full text-left text-sm">
|
|
<thead class="bg-void-200 text-xs uppercase text-dim font-mono">
|
|
<tr>
|
|
<th class="px-4 py-2">Event</th>
|
|
<th class="px-4 py-2">Location</th>
|
|
<th class="px-4 py-2">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-void-200">
|
|
<tr class="hover:bg-void-50/5">
|
|
<td class="px-4 py-2 text-bright">Login Attempt</td>
|
|
<td class="px-4 py-2 text-dim">Tokyo, JP</td>
|
|
<td class="px-4 py-2"><span class="badge badge-nature">Success</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-void-50/5">
|
|
<td class="px-4 py-2 text-bright">Password Reset</td>
|
|
<td class="px-4 py-2 text-dim">Paris, FR</td>
|
|
<td class="px-4 py-2"><span class="badge badge-graffiti">Pending</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-void-50/5">
|
|
<td class="px-4 py-2 text-bright">API Key Gen</td>
|
|
<td class="px-4 py-2 text-dim">New York, US</td>
|
|
<td class="px-4 py-2"><span class="badge badge-gaming">Alert</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULE: USER NEXUS (PROFILE) -->
|
|
<section id="profile" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Module: User Nexus</h2>
|
|
|
|
<div class="card p-0 overflow-hidden bg-void relative mb-8">
|
|
<div class="profile-banner">
|
|
<img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&q=80&w=1000"
|
|
class="banner-image">
|
|
<div class="absolute top-4 right-4 flex gap-2">
|
|
<button class="btn btn-sm btn-glass text-white border-white/20">Edit Cover</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="profile-header-content">
|
|
<div class="profile-avatar-xl">
|
|
<img src="https://ui-avatars.com/api/?name=Senke+Admin&background=00B8D4&color=fff&size=128"
|
|
class="w-full h-full object-cover">
|
|
<div
|
|
class="status-dot status-online absolute bottom-2 right-2 w-6 h-6 border-4 border-void">
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 pb-2">
|
|
<h3 class="text-3xl font-display text-bright flex items-center gap-3">
|
|
Senke_Admin
|
|
<span class="badge badge-cyan">S.ADMIN</span>
|
|
</h3>
|
|
<p class="text-dim">System Architect & Lead Developer · Tokyo, JP</p>
|
|
</div>
|
|
<div class="ml-auto mb-6 flex gap-3">
|
|
<button class="btn btn-primary btn-ronin">Edit Profile</button>
|
|
<button class="btn btn-icon btn-outline">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
|
|
<polyline points="16 6 12 2 8 6" />
|
|
<line x1="12" y1="2" x2="12" y2="15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-8">
|
|
<div class="profile-tabs">
|
|
<div class="profile-tab active">Overview</div>
|
|
<div class="profile-tab">Inventory</div>
|
|
<div class="profile-tab">Activity</div>
|
|
<div class="profile-tab">Settings</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-4 gap-6 py-6 pb-8">
|
|
<div class="stat-card">
|
|
<span class="stat-value text-cyan">Lvl. 42</span>
|
|
<span class="stat-label">System Level</span>
|
|
<div class="w-full h-1 bg-void-300 rounded mt-2">
|
|
<div class="h-full bg-cyan-500 w-3/4"></div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-value text-magenta">2.4k</span>
|
|
<span class="stat-label">Contributions</span>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-value text-lime">98%</span>
|
|
<span class="stat-label">Reputation</span>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-value text-white">12</span>
|
|
<span class="stat-label">Active Modules</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inventory Section -->
|
|
<div class="border-t border-void-200 pt-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="text-xs font-mono text-muted uppercase">Digital Assets</h4>
|
|
<button class="text-xs text-cyan hover:underline">View All</button>
|
|
</div>
|
|
<div class="inventory-grid">
|
|
<div class="item-slot legendary" data-tooltip="Cyber Katana (Legendary)">
|
|
<span class="text-2xl">⚔️</span>
|
|
</div>
|
|
<div class="item-slot epic" data-tooltip="Neon Visor (Epic)">
|
|
<span class="text-2xl">🥽</span>
|
|
</div>
|
|
<div class="item-slot rare" data-tooltip="Data Chip (Rare)">
|
|
<span class="text-2xl">💾</span>
|
|
<span class="item-count">x5</span>
|
|
</div>
|
|
<div class="item-slot">
|
|
<span class="text-2xl">🔋</span>
|
|
<span class="item-count">x12</span>
|
|
</div>
|
|
<div class="item-slot">
|
|
<span class="text-2xl">💊</span>
|
|
</div>
|
|
<div class="item-slot"></div>
|
|
<div class="item-slot"></div>
|
|
<div class="item-slot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULE: SOCIAL NEXUS (FEED & STORIES) -->
|
|
<section id="social" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Module: Social Nexus</h2>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Main Feed Column -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
|
|
<!-- Stories Bar -->
|
|
<div class="card p-4 flex gap-4 overflow-x-auto no-scrollbar items-center">
|
|
<div class="flex flex-col items-center gap-1 min-w-[64px]">
|
|
<div class="story-ring live">
|
|
<img src="https://ui-avatars.com/api/?name=Senke&background=000&color=fff"
|
|
class="w-full h-full rounded-full object-cover border-[3px] border-void-50">
|
|
</div>
|
|
<span class="text-[10px] font-mono text-bright">YOU</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-1 min-w-[64px]">
|
|
<div class="story-ring">
|
|
<img src="https://ui-avatars.com/api/?name=Kai&background=random"
|
|
class="w-full h-full rounded-full object-cover border-[3px] border-void-50">
|
|
</div>
|
|
<span class="text-[10px] font-mono text-dim">Kai_Zero</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-1 min-w-[64px]">
|
|
<div class="story-ring close-friends">
|
|
<img src="https://ui-avatars.com/api/?name=Ren&background=random"
|
|
class="w-full h-full rounded-full object-cover border-[3px] border-void-50">
|
|
</div>
|
|
<span class="text-[10px] font-mono text-dim">Ren.Dev</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-1 min-w-[64px]">
|
|
<div class="story-ring">
|
|
<img src="https://ui-avatars.com/api/?name=Yuna&background=random"
|
|
class="w-full h-full rounded-full object-cover border-[3px] border-void-50">
|
|
</div>
|
|
<span class="text-[10px] font-mono text-dim">Yuna_X</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-1 min-w-[64px]">
|
|
<div class="story-ring live">
|
|
<img src="https://ui-avatars.com/api/?name=System&background=random"
|
|
class="w-full h-full rounded-full object-cover border-[3px] border-void-50">
|
|
</div>
|
|
<span class="text-[10px] font-mono text-magenta">SYSTEM</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Initial Post (Create) -->
|
|
<div class="card p-4 flex gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-void-200 overflow-hidden shrink-0">
|
|
<img src="https://ui-avatars.com/api/?name=Senke"
|
|
class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="grow">
|
|
<div
|
|
class="bg-void-50 border border-void-200 rounded-lg p-3 text-dim text-sm cursor-text hover:bg-void-100 transition-colors">
|
|
Share your latest build log...
|
|
</div>
|
|
<div class="flex justify-between items-center mt-3">
|
|
<div class="flex gap-2">
|
|
<button class="btn btn-xs btn-ghost text-cyan"><svg class="w-4 h-4 mr-1"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
<polyline points="21 15 16 10 5 21"></polyline>
|
|
</svg> Media</button>
|
|
<button class="btn btn-xs btn-ghost text-magenta"><svg class="w-4 h-4 mr-1"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z">
|
|
</path>
|
|
</svg> Achievement</button>
|
|
</div>
|
|
<button class="btn btn-xs btn-primary">Post Update</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feed Stream -->
|
|
<div class="card p-0 overflow-hidden">
|
|
<!-- Post 1 -->
|
|
<article class="feed-post p-6 hover:bg-void-50/50 transition-colors">
|
|
<div class="flex gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-void-200 overflow-hidden shrink-0">
|
|
<img src="https://ui-avatars.com/api/?name=Ren"
|
|
class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="grow">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
class="font-bold text-bright hover:text-cyan cursor-pointer transition-colors">Ren.Dev</span>
|
|
<span class="badge badge-nature">Verified</span>
|
|
<span class="text-xs text-dim">· 2h ago</span>
|
|
</div>
|
|
<button class="text-dim hover:text-bright"><svg class="w-4 h-4"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="19" cy="12" r="1"></circle>
|
|
<circle cx="5" cy="12" r="1"></circle>
|
|
</svg></button>
|
|
</div>
|
|
<p class="text-sm text-dim leading-relaxed mb-3">
|
|
Just deployed the new <span class="text-cyan">@NeonRonin</span> audio
|
|
engine. The waveform visualization is silky smooth. 🌊 Check out the
|
|
source code in the repo. #webdev #design
|
|
</p>
|
|
|
|
<!-- Interactive Post Content (Code Snippet Mock) -->
|
|
<div
|
|
class="bg-void-900 rounded-md p-4 mb-4 font-mono text-xs border border-void-800">
|
|
<div class="flex gap-1 mb-2">
|
|
<div class="w-2 h-2 rounded-full bg-red-500"></div>
|
|
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<span class="text-magenta">const</span> <span
|
|
class="text-blue-400">visualizer</span> = <span
|
|
class="text-magenta">new</span> <span
|
|
class="text-green-400">AudioContext</span>();<br>
|
|
<span class="text-dim">// Ready for production 🚀</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6">
|
|
<button class="post-action liked">
|
|
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z">
|
|
</path>
|
|
</svg>
|
|
42
|
|
</button>
|
|
<button class="post-action">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
|
|
</path>
|
|
</svg>
|
|
12
|
|
</button>
|
|
<button class="post-action">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17 1l4 4-4 4"></path>
|
|
<path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
|
|
<path d="M7 23l-4-4 4-4"></path>
|
|
<path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
|
|
</svg>
|
|
8
|
|
</button>
|
|
<button class="post-action ml-auto">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
|
|
<polyline points="16 6 12 2 8 6"></polyline>
|
|
<line x1="12" y1="2" x2="12" y2="15"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Post 2 -->
|
|
<article class="feed-post p-6 hover:bg-void-50/50 transition-colors">
|
|
<div class="flex gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-void-200 overflow-hidden shrink-0">
|
|
<img src="https://ui-avatars.com/api/?name=Kai"
|
|
class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="grow">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
class="font-bold text-bright hover:text-cyan cursor-pointer transition-colors">Kai_Zero</span>
|
|
<span class="badge badge-gaming">Pro</span>
|
|
<span class="text-xs text-dim">· 5h ago</span>
|
|
</div>
|
|
<button class="text-dim hover:text-bright"><svg class="w-4 h-4"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="19" cy="12" r="1"></circle>
|
|
<circle cx="5" cy="12" r="1"></circle>
|
|
</svg></button>
|
|
</div>
|
|
<p class="text-sm text-dim leading-relaxed mb-3">
|
|
Ranked match highlights from last night. The new meta is wild. 🎮
|
|
</p>
|
|
|
|
<!-- Image Grid Mock -->
|
|
<div class="grid grid-cols-2 gap-2 mb-4 rounded-lg overflow-hidden">
|
|
<div
|
|
class="bg-void-200 h-32 flex items-center justify-center text-dim font-mono text-xs">
|
|
img_01.jpg</div>
|
|
<div
|
|
class="bg-void-200 h-32 flex items-center justify-center text-dim font-mono text-xs">
|
|
img_02.jpg</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6">
|
|
<button class="post-action">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
|
|
</path>
|
|
</svg>
|
|
128
|
|
</button>
|
|
<button class="post-action">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
|
|
</path>
|
|
</svg>
|
|
45
|
|
</button>
|
|
<button class="post-action">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17 1l4 4-4 4"></path>
|
|
<path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
|
|
<path d="M7 23l-4-4 4-4"></path>
|
|
<path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
|
|
</svg>
|
|
2
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar Column -->
|
|
<div class="space-y-8">
|
|
<!-- Trending Tags -->
|
|
<div class="card p-4">
|
|
<h3 class="text-xs font-mono text-muted uppercase mb-4">Trending Tags</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="tag-street text-[10px] cursor-pointer">#CYBERPUNK</span>
|
|
<span class="badge badge-cyan cursor-pointer">#DEV</span>
|
|
<span class="badge badge-lime cursor-pointer">#SYSTEM</span>
|
|
<span class="badge badge-gaming cursor-pointer">#RANKED</span>
|
|
<span class="badge badge-void cursor-pointer">#LIFI</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Suggested Users -->
|
|
<div class="card p-4">
|
|
<h3 class="text-xs font-mono text-muted uppercase mb-4">Suggested Connections</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-void-200 overflow-hidden"><img
|
|
src="https://ui-avatars.com/api/?name=V&background=random"></div>
|
|
<div>
|
|
<div class="text-sm font-bold text-bright">Vee_Cyber</div>
|
|
<div class="text-[10px] text-dim">Artist</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="btn btn-xs btn-outline btn-icon rounded-full text-cyan hover:bg-cyan-500/10">+</button>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-void-200 overflow-hidden"><img
|
|
src="https://ui-avatars.com/api/?name=O&background=random"></div>
|
|
<div>
|
|
<div class="text-sm font-bold text-bright">Orbit_Null</div>
|
|
<div class="text-[10px] text-dim">Hacker</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="btn btn-xs btn-outline btn-icon rounded-full text-cyan hover:bg-cyan-500/10">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULE: MARKETPLACE (BAZAAR) -->
|
|
<section id="marketplace" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Module: Marketplace</h2>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
<!-- Product Grid (3 cols) -->
|
|
<div class="lg:col-span-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Product 1 -->
|
|
<div class="card p-0 holo-card group">
|
|
<div class="relative h-48 overflow-hidden bg-void-900">
|
|
<div class="absolute top-2 left-2 z-10"><span class="holo-tag">Rare</span></div>
|
|
<img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=500"
|
|
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-void-50 to-transparent"></div>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="text-bright font-display text-lg mb-1">Neon Samurai Helm</h3>
|
|
<p class="text-dim text-xs mb-3">Legendary cosmetic item for your avatar.</p>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-1 text-cyan font-mono font-bold">
|
|
<span>💎</span> 2,400 XP
|
|
</div>
|
|
<button
|
|
class="btn btn-sm btn-outline rounded-full text-xs hover:bg-cyan-500 hover:border-cyan-500 hover:text-black transition-all">ADD</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product 2 -->
|
|
<div class="card p-0 holo-card group">
|
|
<div class="relative h-48 overflow-hidden bg-void-900">
|
|
<div class="absolute top-2 left-2 z-10"><span
|
|
class="holo-tag bg-gradient-to-r from-magenta-500 to-purple-500">Epic</span>
|
|
</div>
|
|
<img src="https://images.unsplash.com/photo-1633355444132-695d587291f5?auto=format&fit=crop&q=80&w=500"
|
|
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-void-50 to-transparent"></div>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="text-bright font-display text-lg mb-1">Void Drifter Skin</h3>
|
|
<p class="text-dim text-xs mb-3">Animated texture pack for vehicle.</p>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-1 text-cyan font-mono font-bold">
|
|
<span>💎</span> 5,000 XP
|
|
</div>
|
|
<button
|
|
class="btn btn-sm btn-outline rounded-full text-xs hover:bg-cyan-500 hover:border-cyan-500 hover:text-black transition-all">ADD</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product 3 -->
|
|
<div class="card p-0 holo-card group">
|
|
<div class="relative h-48 overflow-hidden bg-void-900">
|
|
<div class="absolute top-2 left-2 z-10"><span class="badge badge-lime">New</span>
|
|
</div>
|
|
<img src="https://images.unsplash.com/photo-1614728853913-1e2221ba8dc1?auto=format&fit=crop&q=80&w=500"
|
|
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-void-50 to-transparent"></div>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="text-bright font-display text-lg mb-1">Cyberdeck v3.0</h3>
|
|
<p class="text-dim text-xs mb-3">Enhanced hacking module.</p>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-1 text-cyan font-mono font-bold">
|
|
<span>💎</span> 1,200 XP
|
|
</div>
|
|
<button
|
|
class="btn btn-sm btn-outline rounded-full text-xs hover:bg-cyan-500 hover:border-cyan-500 hover:text-black transition-all">ADD</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Cart Sidebar (Sticky) -->
|
|
<div class="lg:col-span-1">
|
|
<div class="card p-4 cart-panel border-l-4 border-l-cyan-500">
|
|
<div class="flex justify-between items-center mb-4 border-b border-void-200 pb-2">
|
|
<h3 class="font-mono text-dim uppercase text-xs">Current Cart</h3>
|
|
<span class="badge badge-cyan">2 Items</span>
|
|
</div>
|
|
|
|
<div class="space-y-3 mb-6">
|
|
<div class="flex gap-2 items-center text-sm">
|
|
<div class="w-8 h-8 rounded bg-void-200 overflow-hidden flex-shrink-0"><img
|
|
src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=100"
|
|
class="w-full h-full object-cover"></div>
|
|
<div class="grow">
|
|
<div class="text-bright text-xs">Neon Samurai Helm</div>
|
|
<div class="text-dim text-[10px]">Reference ID: #8892</div>
|
|
</div>
|
|
<div class="text-cyan font-mono text-xs">2.4k</div>
|
|
</div>
|
|
<div class="flex gap-2 items-center text-sm">
|
|
<div class="w-8 h-8 rounded bg-void-200 overflow-hidden flex-shrink-0"><img
|
|
src="https://images.unsplash.com/photo-1614728853913-1e2221ba8dc1?auto=format&fit=crop&q=80&w=100"
|
|
class="w-full h-full object-cover"></div>
|
|
<div class="grow">
|
|
<div class="text-bright text-xs">Cyberdeck v3.0</div>
|
|
<div class="text-dim text-[10px]">Reference ID: #1029</div>
|
|
</div>
|
|
<div class="text-cyan font-mono text-xs">1.2k</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-void-200 pt-3">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<span class="text-white text-sm">Total XP</span>
|
|
<span class="text-cyan font-mono font-bold text-lg">3,600 XP</span>
|
|
</div>
|
|
<button
|
|
class="btn btn-primary w-full shadow-[0_0_20px_rgba(0,184,212,0.3)]">Checkout</button>
|
|
<p class="text-center text-[10px] text-dim mt-2">Secured by VezaChain v2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULE: EDUCATION (THE DOJO) -->
|
|
<section id="education" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Module: Education</h2>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Course Player Main -->
|
|
<div class="lg:col-span-2">
|
|
<div class="card p-0 overflow-hidden mb-6">
|
|
<!-- Video Placeholder -->
|
|
<div class="relative bg-black aspect-video flex items-center justify-center">
|
|
<h3 class="text-void-600 font-display text-4xl select-none">VIDEO_STREAM_01</h3>
|
|
<button
|
|
class="absolute btn btn-icon btn-primary rounded-full w-16 h-16 pl-1 flex items-center justify-center shadow-[0_0_30px_rgba(0,184,212,0.5)] scale-100 hover:scale-110 transition-transform">
|
|
<svg class="w-8 h-8 fill-current" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Player Controls Overlay -->
|
|
<div
|
|
class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
|
|
<div
|
|
class="w-full h-1 bg-void-500 rounded-full mb-4 cursor-pointer hover:h-2 transition-all">
|
|
<div class="w-1/3 h-full bg-cyan-500 relative">
|
|
<div
|
|
class="absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center text-white">
|
|
<div class="flex items-center gap-4">
|
|
<button><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
|
|
</svg></button>
|
|
<span class="font-mono text-xs">04:20 / 12:45</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="badge badge-void cursor-pointer">CC</span>
|
|
<span class="badge badge-void cursor-pointer">HD</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 class="text-bright font-bold text-xl mb-1">Advanced Node Operations</h3>
|
|
<p class="text-dim text-sm">Module 3: Security Protocols</p>
|
|
</div>
|
|
<button class="btn btn-sm btn-outline">Notes</button>
|
|
</div>
|
|
<p class="text-dim text-sm leading-relaxed">
|
|
In this lesson, we break down the fundamental security layers required for a
|
|
decentralized mesh network. Pay close attention to the <span
|
|
class="text-cyan">handshake protocols</span>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Skill Tree Visualization -->
|
|
<div class="card p-6 min-h-[300px] flex flex-col items-center">
|
|
<h3
|
|
class="text-xs font-mono text-muted uppercase mb-8 self-start w-full border-b border-void-200 pb-2">
|
|
Progression Tree</h3>
|
|
|
|
<div class="skill-tree w-full max-w-lg">
|
|
<!-- Level 1 -->
|
|
<div class="skill-node unlocked tooltip-top absolute top-0"
|
|
style="left: 50%; transform: translateX(-50%);" data-tooltip="Basics Completed">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Connectors L1 -> L2 -->
|
|
<div class="skill-connector active"
|
|
style="top: 48px; left: 50%; width: 2px; height: 50px; transform: translateX(-50%);">
|
|
</div>
|
|
<div class="skill-connector active"
|
|
style="top: 98px; left: 30%; width: 40%; height: 2px;"></div>
|
|
|
|
<!-- Level 2 -->
|
|
<div class="skill-node unlocked absolute top-24" style="left: 30%;"
|
|
data-tooltip="Security (Active)">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
|
</svg>
|
|
</div>
|
|
<div class="skill-node locked absolute top-24" style="left: 70%;"
|
|
data-tooltip="Network (Locked)">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="2" y1="12" x2="22" y2="12"></line>
|
|
<path
|
|
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar Curriculum -->
|
|
<div class="lg:col-span-1">
|
|
<div class="card p-4 h-full">
|
|
<h3 class="text-xs font-mono text-muted uppercase mb-4">Curriculum</h3>
|
|
<div class="space-y-1">
|
|
<div class="curriculum-item">
|
|
<div
|
|
class="w-4 h-4 rounded-full border border-lime-500 mr-3 flex items-center justify-center">
|
|
<div class="w-2 h-2 bg-lime-500 rounded-full"></div>
|
|
</div>
|
|
<div class="text-xs text-dim grow">Intro to Systems</div>
|
|
<span class="text-[10px] font-mono text-lime">100%</span>
|
|
</div>
|
|
<div class="curriculum-item">
|
|
<div
|
|
class="w-4 h-4 rounded-full border border-lime-500 mr-3 flex items-center justify-center">
|
|
<div class="w-2 h-2 bg-lime-500 rounded-full"></div>
|
|
</div>
|
|
<div class="text-xs text-dim grow">Network Basics</div>
|
|
<span class="text-[10px] font-mono text-lime">100%</span>
|
|
</div>
|
|
<div class="curriculum-item active">
|
|
<div
|
|
class="w-4 h-4 rounded-full border border-cyan-500 mr-3 flex items-center justify-center">
|
|
<div class="w-2 h-2 bg-transparent rounded-full"></div>
|
|
</div>
|
|
<div class="text-xs text-bright font-bold grow">Security Protocols</div>
|
|
<span class="text-[10px] font-mono text-cyan">45%</span>
|
|
</div>
|
|
<div class="curriculum-item opacity-50">
|
|
<div
|
|
class="w-4 h-4 rounded-full border border-void-400 mr-3 flex items-center justify-center">
|
|
</div>
|
|
<div class="text-xs text-dim grow">Advanced Encryption</div>
|
|
<span class="text-[10px] font-mono text-void-400">0%</span>
|
|
</div>
|
|
<div class="curriculum-item opacity-50">
|
|
<div
|
|
class="w-4 h-4 rounded-full border border-void-400 mr-3 flex items-center justify-center">
|
|
</div>
|
|
<div class="text-xs text-dim grow">Deploying Nodes</div>
|
|
<span class="text-[10px] font-mono text-void-400">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULE: CLOUD (THE VAULT) -->
|
|
<section id="cloud" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Module: Cloud</h2>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
<!-- File Manager Main -->
|
|
<div class="lg:col-span-3 space-y-6">
|
|
<!-- Drag Zone -->
|
|
<div class="drop-zone p-8 flex flex-col items-center justify-center text-dim group">
|
|
<svg class="w-12 h-12 mb-4 text-void-400 group-hover:text-cyan group-hover:scale-110 transition-all"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="17 8 12 3 7 8"></polyline>
|
|
<line x1="12" y1="3" x2="12" y2="15"></line>
|
|
</svg>
|
|
<p class="text-sm font-mono mb-1">Drag files here to upload</p>
|
|
<p class="text-[10px] text-void-500">Max size 2GB · Encrypted end-to-end</p>
|
|
</div>
|
|
|
|
<!-- File Grid -->
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-xs font-mono text-muted uppercase">Recent Files</h3>
|
|
<div class="flex gap-2">
|
|
<button class="btn btn-icon btn-xs btn-ghost text-bright"><svg class="w-4 h-4"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
|
</svg></button>
|
|
<button class="btn btn-icon btn-xs btn-ghost text-dim"><svg class="w-4 h-4"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<line x1="8" y1="6" x2="21" y2="6"></line>
|
|
<line x1="8" y1="12" x2="21" y2="12"></line>
|
|
<line x1="8" y1="18" x2="21" y2="18"></line>
|
|
<line x1="3" y1="6" x2="3.01" y2="6"></line>
|
|
<line x1="3" y1="12" x2="3.01" y2="12"></line>
|
|
<line x1="3" y1="18" x2="3.01" y2="18"></line>
|
|
</svg></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
<div class="file-card group">
|
|
<div class="file-icon">📁</div>
|
|
<span class="text-xs font-bold text-bright group-hover:text-cyan">Projects</span>
|
|
<span class="text-[10px] text-dim">12 items</span>
|
|
</div>
|
|
<div class="file-card group">
|
|
<div class="file-icon">📁</div>
|
|
<span class="text-xs font-bold text-bright group-hover:text-cyan">Assets</span>
|
|
<span class="text-[10px] text-dim">248 items</span>
|
|
</div>
|
|
<div class="file-card group">
|
|
<div class="file-icon">🎵</div>
|
|
<span class="text-xs font-bold text-bright group-hover:text-cyan">beats.wav</span>
|
|
<span class="text-[10px] text-dim">12.4 MB</span>
|
|
</div>
|
|
<div class="file-card group">
|
|
<div class="file-icon">🖼️</div>
|
|
<span
|
|
class="text-xs font-bold text-bright group-hover:text-cyan">mockup_v2.png</span>
|
|
<span class="text-[10px] text-dim">2.1 MB</span>
|
|
</div>
|
|
<div class="file-card group">
|
|
<div class="file-icon">📄</div>
|
|
<span class="text-xs font-bold text-bright group-hover:text-cyan">brief.pdf</span>
|
|
<span class="text-[10px] text-dim">450 KB</span>
|
|
</div>
|
|
<div class="file-card group">
|
|
<div class="file-icon">📦</div>
|
|
<span class="text-xs font-bold text-bright group-hover:text-cyan">build.zip</span>
|
|
<span class="text-[10px] text-dim">156 MB</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage Sidebar -->
|
|
<div class="lg:col-span-1">
|
|
<div class="card p-6 flex flex-col items-center">
|
|
<h3 class="text-xs font-mono text-muted uppercase mb-6 w-full text-center">Storage</h3>
|
|
|
|
<div class="radial-progress-container mb-6">
|
|
<div class="radial-content">
|
|
<div class="text-2xl font-bold text-bright">75%</div>
|
|
<div class="text-[10px] text-dim uppercase">Used</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full space-y-4">
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-cyan">Documents</span>
|
|
<span class="text-dim">45 GB</span>
|
|
</div>
|
|
<div class="w-full h-1 bg-void-200 rounded-full overflow-hidden">
|
|
<div class="h-full bg-cyan-500 w-[45%]"></div>
|
|
</div>
|
|
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-magenta">Media</span>
|
|
<span class="text-dim">120 GB</span>
|
|
</div>
|
|
<div class="w-full h-1 bg-void-200 rounded-full overflow-hidden">
|
|
<div class="h-full bg-magenta-500 w-[60%]"></div>
|
|
</div>
|
|
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-lime">System</span>
|
|
<span class="text-dim">15 GB</span>
|
|
</div>
|
|
<div class="w-full h-1 bg-void-200 rounded-full overflow-hidden">
|
|
<div class="h-full bg-lime-500 w-[15%]"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-outline w-full mt-8 text-xs">Upgrade Storage</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULE: ANALYTICS -->
|
|
<section id="analytics" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Module: Analytics</h2>
|
|
<div class="grid grid-cols-2 gap-8">
|
|
<!-- Chart Card -->
|
|
<div class="card p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h3 class="font-bold text-bright">Revenue Distribution</h3>
|
|
<button class="btn btn-xs btn-ghost">This Week ▼</button>
|
|
</div>
|
|
<div class="flex items-center justify-around">
|
|
<div class="pie-chart">
|
|
<div class="pie-chart-content">
|
|
<span class="block text-xl font-bold text-bright">65%</span>
|
|
<span class="text-xs text-dim uppercase">Streaming</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-cyan-500"></div>
|
|
<span class="text-sm text-dim">Streaming</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-magenta-500"></div>
|
|
<span class="text-sm text-dim">Merch</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-void-200"></div>
|
|
<span class="text-sm text-dim">Other</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="grid grid-rows-2 gap-4">
|
|
<!-- Stat Card 1 -->
|
|
<div class="card p-4 flex items-center justify-between">
|
|
<div>
|
|
<span class="text-xs text-dim uppercase font-mono mb-1 block">Total Plays</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold font-gaming text-bright">2.4M</span>
|
|
<span class="text-xs text-lime flex items-center">
|
|
▲ 12%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<svg class="w-24 h-12 sparkline up" viewBox="0 0 100 50">
|
|
<path d="M0 40 Q20 40 30 20 T60 30 T100 10" />
|
|
</svg>
|
|
</div>
|
|
<!-- Stat Card 2 -->
|
|
<div class="card p-4 flex items-center justify-between">
|
|
<div>
|
|
<span class="text-xs text-dim uppercase font-mono mb-1 block">Churn Rate</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold font-gaming text-bright">0.8%</span>
|
|
<span class="text-xs text-magenta flex items-center">
|
|
▼ 2%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<svg class="w-24 h-12 sparkline down" viewBox="0 0 100 50">
|
|
<path d="M0 10 Q20 10 30 30 T60 20 T100 40" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULE: PRODUCTIVITY -->
|
|
<section id="productivity" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Module: Productivity</h2>
|
|
<div class="grid grid-cols-3 gap-8">
|
|
<!-- Kanban Board (Spans 2 cols) -->
|
|
<div class="col-span-2">
|
|
<h3 class="text-sm font-mono text-dim uppercase mb-4">Project Kanban</h3>
|
|
<div class="kanban-board">
|
|
<!-- Todo Column -->
|
|
<div class="kanban-col">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-xs font-bold text-dim uppercase">To Do</span>
|
|
<span class="badge bg-void-200 text-dim">3</span>
|
|
</div>
|
|
<div class="kanban-card priority-high">
|
|
<p class="text-sm text-bright font-medium mb-2">Design System Audit</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="badge badge-gaming">P1</span>
|
|
<div
|
|
class="w-6 h-6 rounded-full bg-cyan-700 text-xs flex items-center justify-center">
|
|
S</div>
|
|
</div>
|
|
</div>
|
|
<div class="kanban-card priority-low">
|
|
<p class="text-sm text-bright font-medium mb-2">Update Icons</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="badge bg-void-200 text-dim">P3</span>
|
|
<div
|
|
class="w-6 h-6 rounded-full bg-lime-700 text-xs flex items-center justify-center">
|
|
J</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- In Progress Column -->
|
|
<div class="kanban-col">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-xs font-bold text-cyan uppercase">In Progress</span>
|
|
<span class="badge bg-cyan-900 text-cyan">1</span>
|
|
</div>
|
|
<div class="kanban-card priority-med">
|
|
<p class="text-sm text-bright font-medium mb-2">Implement Analytics</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="badge badge-nature">Dev</span>
|
|
<div
|
|
class="w-6 h-6 rounded-full bg-magenta-700 text-xs flex items-center justify-center">
|
|
M</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calendar Widget -->
|
|
<div class="col-span-1">
|
|
<h3 class="text-sm font-mono text-dim uppercase mb-4">Release Schedule</h3>
|
|
<div class="card p-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<span class="font-bold text-bright">April 2026</span>
|
|
<div class="flex gap-2">
|
|
<button class="btn btn-xs btn-ghost text-dim"><</button>
|
|
<button class="btn btn-xs btn-ghost text-dim">></button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-7 gap-1 mb-2 text-center">
|
|
<span class="text-xs text-dim">S</span>
|
|
<span class="text-xs text-dim">M</span>
|
|
<span class="text-xs text-dim">T</span>
|
|
<span class="text-xs text-dim">W</span>
|
|
<span class="text-xs text-dim">T</span>
|
|
<span class="text-xs text-dim">F</span>
|
|
<span class="text-xs text-dim">S</span>
|
|
</div>
|
|
<div class="calendar-grid">
|
|
<div class="calendar-day text-void-300">29</div>
|
|
<div class="calendar-day text-void-300">30</div>
|
|
<div class="calendar-day">1</div>
|
|
<div class="calendar-day">2</div>
|
|
<div class="calendar-day has-event">3</div>
|
|
<div class="calendar-day">4</div>
|
|
<div class="calendar-day">5</div>
|
|
|
|
<div class="calendar-day">6</div>
|
|
<div class="calendar-day">7</div>
|
|
<div class="calendar-day active">8</div>
|
|
<div class="calendar-day">9</div>
|
|
<div class="calendar-day">10</div>
|
|
<div class="calendar-day has-event">11</div>
|
|
<div class="calendar-day">12</div>
|
|
</div>
|
|
<div class="mt-4 pt-4 border-t border-void-200">
|
|
<div class="flex gap-3 items-start">
|
|
<div class="w-2 h-2 rounded-full bg-cyan-500 mt-1.5"></div>
|
|
<div>
|
|
<p class="text-xs font-bold text-bright">v3.0 Launch</p>
|
|
<p class="text-xs text-dim">10:00 AM - Design Review</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW MODULE: FEEDBACK & SYSTEM -->
|
|
<section id="feedback" class="mb-16">
|
|
<h2 class="mb-8 font-display tracking-wide">Module: Feedback & System</h2>
|
|
<div class="card p-6">
|
|
<div class="grid grid-cols-2 gap-12">
|
|
<!-- Toggles and Controls -->
|
|
<div class="space-y-6">
|
|
<h3 class="text-sm font-mono text-dim uppercase mb-4">Interactive Controls</h3>
|
|
|
|
<div
|
|
class="flex items-center justify-between p-3 bg-void-50 border border-void-200 rounded-lg">
|
|
<span class="text-bright font-medium">Notifications</span>
|
|
<div class="toggle-switch active"></div>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-center justify-between p-3 bg-void-50 border border-void-200 rounded-lg">
|
|
<span class="text-bright font-medium">Dark Mode</span>
|
|
<div class="toggle-switch"></div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4 mt-6">
|
|
<button class="btn btn-secondary" data-tooltip="View Profile Settings">
|
|
Hover Me (Tooltip)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Static Toast & Dialog Preview -->
|
|
<div
|
|
class="relative bg-void-100 rounded-lg border border-void-200 h-64 overflow-hidden flex items-center justify-center">
|
|
<!-- Mock Background -->
|
|
<div class="text-center">
|
|
<h4 class="text-xl font-bold text-bright mb-2">System Preview</h4>
|
|
<button class="btn btn-primary">Open Modal</button>
|
|
</div>
|
|
|
|
<!-- Mock Modal (Positioned Absolute for Demo) -->
|
|
<div
|
|
class="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
|
|
<div
|
|
class="bg-surface border border-void-200 p-6 rounded-xl shadow-2xl w-64 transform scale-95 origin-center">
|
|
<h3 class="font-bold text-bright text-lg mb-2">Confirm Action</h3>
|
|
<p class="text-dim text-sm mb-4">Are you sure you want to delete this track?</p>
|
|
<div class="flex justify-end gap-2">
|
|
<button class="btn btn-xs btn-ghost">Cancel</button>
|
|
<button class="btn btn-xs btn-danger">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mock Toast -->
|
|
<div
|
|
class="absolute bottom-4 right-4 bg-surface border border-void-200 border-l-4 border-l-lime-500 p-3 rounded shadow-lg flex items-center gap-3">
|
|
<div class="w-2 h-2 rounded-full bg-lime-500"></div>
|
|
<span class="text-sm font-bold text-bright">Changes Saved!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ORGANISM: MUSIC (Updated with Waveform) -->
|
|
<section id="player" class="mb-16">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h2 class="font-display tracking-wide">Organism: Player</h2>
|
|
<span class="badge badge-cyan">Interactive</span>
|
|
</div>
|
|
<div class="card p-0 overflow-hidden relative"
|
|
style="height: 250px; background: url('https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?auto=format&fit=crop&q=80&w=1000') center/cover;">
|
|
<div class="absolute inset-0 bg-void opacity-70"></div>
|
|
|
|
<!-- Center Visualization -->
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
|
<h3 class="text-white text-4xl font-display mb-4">Neon Nights</h3>
|
|
<!-- WAVEFORM VISUALIZATION -->
|
|
<div class="flex items-end gap-1 h-12">
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
<div class="waveform-bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- THE PLAYER BAR COMPONENT -->
|
|
<div class="player-bar absolute bottom-0 w-full" style="position: absolute;">
|
|
<div class="track-info">
|
|
<div class="track-art">
|
|
<img src="https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?auto=format&fit=crop&q=80&w=100"
|
|
class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="track-text">
|
|
<h4 class="font-display tracking-wide">Neon Nights</h4>
|
|
<p class="text-xs text-dim">Cyber Collective</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player-controls">
|
|
<div class="control-buttons">
|
|
<svg class="w-5 h-5 text-dim hover:text-white cursor-pointer" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
<svg class="w-6 h-6 text-white cursor-pointer" fill="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path d="M11 5L6 9H2v6h4l5 4V5z" />
|
|
</svg>
|
|
<div class="btn-play">
|
|
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
|
|
<rect x="6" y="4" width="4" height="16"></rect>
|
|
<rect x="14" y="4" width="4" height="16"></rect>
|
|
</svg>
|
|
</div>
|
|
<svg class="w-6 h-6 text-white cursor-pointer" fill="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path d="M11 5L6 9H2v6h4l5 4V5z" />
|
|
</svg>
|
|
<svg class="w-5 h-5 text-dim hover:text-white cursor-pointer" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div class="progress-container">
|
|
<span>2:14</span>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill"></div>
|
|
</div>
|
|
<span>4:20</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 text-dim">
|
|
<span class="badge badge-void">HIFI</span>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3 18v-6a9 9 0 0 1 18 0v6"></path>
|
|
</svg>
|
|
<div class="w-24 h-1 bg-void-200 rounded-full overflow-hidden">
|
|
<div class="w-2/3 h-full bg-void-500 hover:bg-cyan-500"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ORGANISM: CHAT & TABLE -->
|
|
<section id="chat" class="grid grid-cols-2 gap-8 mb-16">
|
|
<!-- Chat -->
|
|
<div class="chat-container">
|
|
<div class="chat-header">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xl text-muted">#</span>
|
|
<span class="text-white">general-dev</span>
|
|
</div>
|
|
<div class="flex gap-4 text-dim">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
<polyline points="15 3 21 3 21 9"></polyline>
|
|
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="chat-messages">
|
|
<div class="message-row">
|
|
<div class="avatar"><img src="https://ui-avatars.com/api/?name=Admin" alt=""></div>
|
|
<div class="message-content">
|
|
<h5>System <span class="badge badge-lime">BOT</span> <span>Today at 09:00</span>
|
|
</h5>
|
|
<p>Deployment successful. Checks passed: 142/142.</p>
|
|
</div>
|
|
</div>
|
|
<div class="message-row">
|
|
<div class="avatar"><img src="https://ui-avatars.com/api/?name=Senke" alt=""></div>
|
|
<div class="message-content">
|
|
<h5>Senke <span>Today at 09:15</span></h5>
|
|
<p class="text-white">Does the new <span class="text-cyan">Neon Ronin</span> theme
|
|
deploy include the dark mode fix?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-area">
|
|
<input type="text" class="chat-input" placeholder="Message #general-dev">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="card p-0 bg-void-50 flex flex-col">
|
|
<div class="p-4 border-b border-void-200 flex justify-between items-center">
|
|
<h3>Active Nodes</h3>
|
|
<button class="btn btn-sm btn-outline">Refresh</button>
|
|
</div>
|
|
<div class="table-responsive grow">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Node ID</th>
|
|
<th>Status</th>
|
|
<th>Latency</th>
|
|
<th>Load</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="font-mono text-cyan">ND-8892</td>
|
|
<td><span class="badge badge-lime">Online</span></td>
|
|
<td class="font-mono">12ms</td>
|
|
<td>
|
|
<div class="w-16 h-1 bg-void-200 rounded-full mt-1">
|
|
<div class="h-full bg-lime-500" style="width: 25%"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-mono text-cyan">ND-3321</td>
|
|
<td><span class="badge badge-lime">Online</span></td>
|
|
<td class="font-mono">14ms</td>
|
|
<td>
|
|
<div class="w-16 h-1 bg-void-200 rounded-full mt-1">
|
|
<div class="h-full bg-lime-500" style="width: 45%"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="font-mono text-cyan">ND-1002</td>
|
|
<td><span class="badge badge-magenta">Warn</span></td>
|
|
<td class="font-mono text-yellow-500">142ms</td>
|
|
<td>
|
|
<div class="w-16 h-1 bg-void-200 rounded-full mt-1">
|
|
<div class="h-full bg-warning" style="width: 90%"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SPACER FOR FIXED FOOTER -->
|
|
<div class="h-16"></div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- STICKY SYSTEM STATUS FOOOTER -->
|
|
<footer
|
|
class="fixed bottom-0 right-0 border-t border-void-200 bg-void-100/90 backdrop-blur text-xs font-mono z-40 flex justify-between items-center px-6 h-8 text-dim uppercase"
|
|
style="left: 280px;">
|
|
<div class="flex gap-4">
|
|
<span class="text-cyan">● SYSTEM_ONLINE</span>
|
|
<span>LATENCY: 12ms</span>
|
|
<span>UPTIME: 99.99%</span>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<span>MEM: 42%</span>
|
|
<span>CPU: 18%</span>
|
|
<span class="text-bright">BUILD: 2026.01.20_PLATINUM</span>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- SEARCH MODAL -->
|
|
<div id="searchModal" class="modal-backdrop">
|
|
<div class="modal-content">
|
|
<div class="flex items-center gap-3 border-b border-void-200 pb-4 mb-4">
|
|
<svg class="w-5 h-5 text-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
<input type="text" id="searchInput"
|
|
class="bg-transparent border-none outline-none text-xl text-bright w-full font-display tracking-wide"
|
|
placeholder="RUN COMMAND...">
|
|
<kbd class="hidden sm:inline-block px-2 py-1 text-xs font-mono text-dim bg-void-200 rounded">ESC</kbd>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<h4 class="text-xs font-mono text-muted uppercase mb-2">QUICK ACTIONS</h4>
|
|
<!-- Search Results (Mock) -->
|
|
<button
|
|
class="w-full text-left px-4 py-3 rounded-md hover:bg-void-200 flex items-center justify-between group transition-colors">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-magenta">♥</span>
|
|
<span class="text-dim group-hover:text-bright transition-colors">Go to Profile</span>
|
|
</div>
|
|
<span class="text-xs text-dim font-mono opacity-0 group-hover:opacity-100">NAV</span>
|
|
</button>
|
|
<button
|
|
class="w-full text-left px-4 py-3 rounded-md hover:bg-void-200 flex items-center justify-between group transition-colors">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-cyan">⚡</span>
|
|
<span class="text-dim group-hover:text-bright transition-colors">System Settings</span>
|
|
</div>
|
|
<span class="text-xs text-dim font-mono opacity-0 group-hover:opacity-100">CFG</span>
|
|
</button>
|
|
<button
|
|
class="w-full text-left px-4 py-3 rounded-md hover:bg-void-200 flex items-center justify-between group transition-colors">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-lime">▶</span>
|
|
<span class="text-dim group-hover:text-bright transition-colors">Play Random Track</span>
|
|
</div>
|
|
<span class="text-xs text-dim font-mono opacity-0 group-hover:opacity-100">MEDIA</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JS: THEME CONTROLLER -->
|
|
<script>
|
|
const themeBtn = document.getElementById('themeToggle');
|
|
const html = document.documentElement;
|
|
|
|
// SEARCH MODAL LOGIC
|
|
const searchModal = document.getElementById('searchModal');
|
|
const searchInput = document.getElementById('searchInput');
|
|
|
|
function toggleSearch() {
|
|
searchModal.classList.toggle('active');
|
|
if (searchModal.classList.contains('active')) {
|
|
searchInput.focus();
|
|
}
|
|
}
|
|
|
|
// Cmd+K / Ctrl+K
|
|
document.addEventListener('keydown', (e) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
toggleSearch();
|
|
}
|
|
if (e.key === 'Escape' && searchModal.classList.contains('active')) {
|
|
toggleSearch();
|
|
}
|
|
});
|
|
|
|
// Close on backdrop click
|
|
searchModal.addEventListener('click', (e) => {
|
|
if (e.target === searchModal) {
|
|
toggleSearch();
|
|
}
|
|
});
|
|
|
|
// Check local storage
|
|
if (localStorage.getItem('theme') === 'light') {
|
|
html.setAttribute('data-theme', 'light');
|
|
}
|
|
|
|
themeBtn.addEventListener('click', () => {
|
|
const current = html.getAttribute('data-theme');
|
|
let next = 'light';
|
|
if (current === 'light') next = 'dark';
|
|
|
|
html.setAttribute('data-theme', next);
|
|
localStorage.setItem('theme', next);
|
|
});
|
|
|
|
// Add fun interaction to buttons
|
|
document.querySelectorAll('.btn').forEach(btn => {
|
|
btn.addEventListener('mousedown', () => btn.style.transform = 'scale(0.95)');
|
|
btn.addEventListener('mouseup', () => btn.style.transform = '');
|
|
});
|
|
|
|
// NAVIGATION LOGIC (SPA MODE)
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
const sections = document.querySelectorAll('section');
|
|
|
|
function switchSection(targetId) {
|
|
// Update Nav State
|
|
navItems.forEach(nav => {
|
|
if (nav.dataset.target === targetId) {
|
|
nav.classList.add('active');
|
|
} else {
|
|
nav.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Update Section State
|
|
sections.forEach(sec => {
|
|
if (sec.id === targetId) {
|
|
sec.classList.add('active-section');
|
|
// Scroll to top of main area when switching
|
|
document.querySelector('main').scrollTop = 0;
|
|
} else {
|
|
sec.classList.remove('active-section');
|
|
}
|
|
});
|
|
}
|
|
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const targetId = item.getAttribute('data-target');
|
|
// Special case for 'showcase' linking to components/intro for now if not specific
|
|
// Or if it's the "Showcase" button in nav, it maps to components or modules
|
|
// For safety, if target doesn't exist, default to intro
|
|
if (document.getElementById(targetId)) {
|
|
switchSection(targetId);
|
|
} else {
|
|
console.warn('Target section not found:', targetId);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |