1149 lines
73 KiB
HTML
1149 lines
73 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Veza Design System | Hub</title>
|
||
|
|
|
||
|
|
<!-- FONTS -->
|
||
|
|
<link
|
||
|
|
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;500;600;700&display=swap"
|
||
|
|
rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- FAVICON -->
|
||
|
|
<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>">
|
||
|
|
|
||
|
|
<!-- STYLE -->
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- BOOT SCREEN -->
|
||
|
|
<div id="boot-screen"
|
||
|
|
class="fixed inset-0 bg-black z-[9999] flex items-center justify-center font-mono select-none">
|
||
|
|
<div class="text-center relative">
|
||
|
|
<div class="absolute inset-0 bg-cyan-500/20 blur-xl rounded-full animate-pulse-slow"></div>
|
||
|
|
<div class="relative z-10">
|
||
|
|
<div class="boot-step mb-4 text-cyan-400 text-xs tracking-[0.2em] animate-pulse">
|
||
|
|
TERMINAL_LINK_ESTABLISHED</div>
|
||
|
|
<div class="boot-step hidden mb-4 text-magenta-500 text-xs tracking-[0.2em]">LOADING_NEURAL_MODULES...
|
||
|
|
</div>
|
||
|
|
<div class="boot-step hidden text-white text-3xl tracking-[0.2em] font-bold font-display glitch"
|
||
|
|
data-text="WELCOME_USER">WELCOME_USER</div>
|
||
|
|
<div class="mt-8 h-0.5 w-64 bg-void-800 mx-auto relative overflow-hidden">
|
||
|
|
<div class="h-full bg-cyan-500 boot-load-bar shadow-[0_0_10px_rgba(6,182,212,0.8)]"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="page-bg opacity-40"></div>
|
||
|
|
|
||
|
|
<div class="flex h-screen overflow-hidden bg-void-0">
|
||
|
|
|
||
|
|
<!-- SIDEBAR NAV -->
|
||
|
|
<aside
|
||
|
|
class="w-72 bg-void-50/90 backdrop-blur-xl border-r border-void-200/50 hidden md:flex flex-col z-50 shadow-2xl">
|
||
|
|
<div class="h-20 flex items-center px-6 border-b border-void-200/50 relative overflow-hidden">
|
||
|
|
<div class="absolute inset-0 bg-gradient-to-r from-cyan-500/5 to-transparent"></div>
|
||
|
|
<div class="flex items-center gap-4 relative z-10">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded-lg bg-gradient-to-br from-cyan-500 to-magenta-600 flex items-center justify-center shadow-lg shadow-cyan-500/20 border border-white/10">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
||
|
|
stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
|
||
|
|
<polyline points="2 17 12 22 22 17"></polyline>
|
||
|
|
<polyline points="2 12 12 17 22 12"></polyline>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="font-display text-2xl tracking-widest text-white leading-none">VEZA</span>
|
||
|
|
<span class="text-[9px] text-cyan-400 font-mono tracking-[0.2em] uppercase">System v5.0</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="space-y-8 flex-grow overflow-y-auto no-scrollbar py-8 px-4">
|
||
|
|
|
||
|
|
<!-- Group: Templates -->
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
class="px-3 mb-3 text-[10px] font-mono text-void-500 uppercase tracking-widest flex items-center justify-between">
|
||
|
|
<span>Modules</span>
|
||
|
|
<div class="flex gap-1">
|
||
|
|
<div class="w-1 h-1 bg-void-500 rounded-full"></div>
|
||
|
|
<div class="w-1 h-1 bg-void-500 rounded-full"></div>
|
||
|
|
<div class="w-1 h-1 bg-void-500 rounded-full"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-1">
|
||
|
|
<a href="#"
|
||
|
|
class="nav-item active group flex items-center justify-between p-3 rounded-lg hover:bg-void-100 transition-all border border-transparent hover:border-void-200"
|
||
|
|
data-target="intro">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-4 h-4 text-cyan-500" 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>
|
||
|
|
<span>Hub Dashboard</span>
|
||
|
|
</div>
|
||
|
|
<span class="relative flex h-2 w-2">
|
||
|
|
<span
|
||
|
|
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
|
||
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<!-- ... (We will keep the loop simpler here or rely on the previous content if matched) -->
|
||
|
|
<!-- Actually I'm replacing the whole sidebar top part so I need to be careful not to delete the list -->
|
||
|
|
|
||
|
|
<a href="templates/nexus.html" class="nav-item">Nexus Profile</a>
|
||
|
|
<a href="templates/social.html" class="nav-item">Social Feed</a>
|
||
|
|
<a href="templates/market.html" class="nav-item">Marketplace</a>
|
||
|
|
<a href="templates/studio.html" class="nav-item">Creator Studio</a>
|
||
|
|
<a href="templates/admin.html" class="nav-item">Admin Dashboard</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Group: Foundations -->
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
class="px-2 mb-3 text-[10px] font-mono text-void-500 uppercase tracking-widest flex items-center gap-2">
|
||
|
|
<span class="w-1 h-1 bg-magenta-500 rounded-full"></span>
|
||
|
|
Foundations
|
||
|
|
</div>
|
||
|
|
<div class="space-y-1">
|
||
|
|
<div class="nav-item" data-target="colors">Colors & Tokens</div>
|
||
|
|
<div class="nav-item" data-target="typography">Typography</div>
|
||
|
|
<div class="nav-item" data-target="utilities">Utilities & Layout</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Group: Components -->
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
class="px-2 mb-3 text-[10px] font-mono text-void-500 uppercase tracking-widest flex items-center gap-2">
|
||
|
|
<span class="w-1 h-1 bg-lime-500 rounded-full"></span>
|
||
|
|
Components
|
||
|
|
</div>
|
||
|
|
<div class="space-y-1">
|
||
|
|
<div class="nav-item" data-target="buttons">Buttons</div>
|
||
|
|
<div class="nav-item" data-target="badges">Badges</div>
|
||
|
|
<div class="nav-item" data-target="inputs">Forms</div>
|
||
|
|
<div class="nav-item" data-target="cards">Cards</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Group: Patterns -->
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
class="px-2 mb-3 text-[10px] font-mono text-void-500 uppercase tracking-widest flex items-center gap-2">
|
||
|
|
<span class="w-1 h-1 bg-orange-500 rounded-full"></span>
|
||
|
|
Patterns
|
||
|
|
</div>
|
||
|
|
<div class="space-y-1">
|
||
|
|
<div class="nav-item" data-target="tables">Data Tables</div>
|
||
|
|
<div class="nav-item" data-target="feedback">Feedback</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Theme Toggle Foot -->
|
||
|
|
<div class="pt-4 border-t border-void-200">
|
||
|
|
<div class="flex items-center justify-between px-2">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="w-2 h-2 rounded-full bg-lime-500 shadow-glow-green"></div>
|
||
|
|
<span class="text-xs text-void-400 font-mono">SYSTEM: ONLINE</span>
|
||
|
|
</div>
|
||
|
|
<button id="themeToggle"
|
||
|
|
class="w-8 h-8 rounded-full bg-void-200 text-void-600 hover:text-cyan-500 hover:bg-void-100 flex items-center justify-center transition-all">
|
||
|
|
<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">
|
||
|
|
<circle cx="12" cy="12" r="5"></circle>
|
||
|
|
<path
|
||
|
|
d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42">
|
||
|
|
</path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- MAIN AREA -->
|
||
|
|
<main class="flex-grow overflow-y-auto relative scroll-smooth h-full bg-void-0/50">
|
||
|
|
<!-- Background Grid Effect -->
|
||
|
|
<div class="fixed inset-0 pointer-events-none"
|
||
|
|
style="background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px;">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="max-w-[1800px] mx-auto p-6 md:p-10 pb-32 space-y-16 relative z-10">
|
||
|
|
|
||
|
|
<!-- SECTION: INTRO / DASHBOARD HERO -->
|
||
|
|
<section id="intro" class="space-y-10 active-section">
|
||
|
|
|
||
|
|
<!-- Top Bar -->
|
||
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||
|
|
<div>
|
||
|
|
<h1 class="text-4xl md:text-5xl font-display text-white tracking-tight mb-2">COMMAND CENTER
|
||
|
|
</h1>
|
||
|
|
<p class="text-void-400 font-mono text-xs tracking-widest uppercase">System v5.0 //
|
||
|
|
Operational // <span class="text-cyan-500 animate-pulse">Connected</span></p>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
<div class="relative group">
|
||
|
|
<div
|
||
|
|
class="absolute -inset-0.5 bg-gradient-to-r from-cyan-500 to-magenta-500 rounded opacity-50 group-hover:opacity-100 transition duration-200 blur">
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="relative flex items-center bg-void-100 rounded border border-void-200 px-4 py-2 w-64 md:w-80">
|
||
|
|
<svg class="w-4 h-4 text-void-500 mr-3" fill="none" stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||
|
|
</svg>
|
||
|
|
<input type="text"
|
||
|
|
onclick="document.getElementById('searchModal').classList.add('flex');document.getElementById('searchModal').classList.remove('hidden');document.getElementById('searchInput').focus();"
|
||
|
|
class="bg-transparent border-none outline-none text-sm text-white w-full placeholder-void-500 cursor-pointer"
|
||
|
|
placeholder="Search modules (Cmd+K)..." readonly>
|
||
|
|
<kbd
|
||
|
|
class="hidden md:inline-block px-1.5 py-0.5 text-[10px] font-mono text-void-500 bg-void-200 rounded ml-2">⌘K</kbd>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="h-10 w-10 rounded bg-void-100 border border-void-200 flex items-center justify-center text-void-400 hover:text-white hover:border-cyan-500 transition-colors cursor-pointer relative">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
|
||
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||
|
|
stroke-linejoin="round">
|
||
|
|
<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>
|
||
|
|
<span
|
||
|
|
class="absolute top-2 right-2.5 w-1.5 h-1.5 bg-magenta-500 rounded-full animate-pulse-slow"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Stats Grid -->
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
|
|
<!-- Stat 1 -->
|
||
|
|
<div
|
||
|
|
class="p-5 rounded-lg border border-void-200 bg-void-100/50 backdrop-blur hover:border-cyan-500/30 transition-all group relative overflow-hidden">
|
||
|
|
<div
|
||
|
|
class="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<span class="text-xs font-mono text-void-500 uppercase tracking-widest">System
|
||
|
|
Status</span>
|
||
|
|
<svg class="w-4 h-4 text-cyan-500" fill="none" stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="text-2xl font-bold text-white mb-1">OPTIMAL</div>
|
||
|
|
<div class="w-full bg-void-200 h-1 rounded-full overflow-hidden">
|
||
|
|
<div class="bg-cyan-500 h-full w-full shadow-[0_0_10px_rgba(6,182,212,0.5)]"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Stat 2 -->
|
||
|
|
<div
|
||
|
|
class="p-5 rounded-lg border border-void-200 bg-void-100/50 backdrop-blur hover:border-magenta-500/30 transition-all group relative overflow-hidden">
|
||
|
|
<div
|
||
|
|
class="absolute inset-0 bg-gradient-to-br from-magenta-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<span class="text-xs font-mono text-void-500 uppercase tracking-widest">Active
|
||
|
|
Modules</span>
|
||
|
|
<svg class="w-4 h-4 text-magenta-500" fill="none" stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24">
|
||
|
|
<line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<div class="text-2xl font-bold text-white mb-1">10 <span
|
||
|
|
class="text-sm font-normal text-void-400">/ 12</span></div>
|
||
|
|
<div class="w-full bg-void-200 h-1 rounded-full overflow-hidden">
|
||
|
|
<div class="bg-magenta-500 h-full w-[83%] shadow-[0_0_10px_rgba(236,72,153,0.5)]"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Stat 3 -->
|
||
|
|
<div
|
||
|
|
class="p-5 rounded-lg border border-void-200 bg-void-100/50 backdrop-blur hover:border-lime-500/30 transition-all group relative overflow-hidden">
|
||
|
|
<div
|
||
|
|
class="absolute inset-0 bg-gradient-to-br from-lime-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<span class="text-xs font-mono text-void-500 uppercase tracking-widest">Security</span>
|
||
|
|
<svg class="w-4 h-4 text-lime-500" fill="none" stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="text-2xl font-bold text-white mb-1">SECURE</div>
|
||
|
|
<div class="w-full bg-void-200 h-1 rounded-full overflow-hidden">
|
||
|
|
<div class="bg-lime-500 h-full w-full shadow-[0_0_10px_rgba(132,204,22,0.5)]"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Stat 4 -->
|
||
|
|
<div
|
||
|
|
class="p-5 rounded-lg border border-void-200 bg-void-100/50 backdrop-blur hover:border-violet-500/30 transition-all group relative overflow-hidden">
|
||
|
|
<div
|
||
|
|
class="absolute inset-0 bg-gradient-to-br from-violet-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<span class="text-xs font-mono text-void-500 uppercase tracking-widest">Session
|
||
|
|
Uptime</span>
|
||
|
|
<svg class="w-4 h-4 text-violet-500" fill="none" stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24">
|
||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
||
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="text-2xl font-bold text-white mb-1">00:42:15</div>
|
||
|
|
<div class="flex gap-1 mt-2">
|
||
|
|
<div class="h-1 w-1 bg-violet-500 rounded-full animate-pulse"></div>
|
||
|
|
<div class="h-1 w-1 bg-violet-500 rounded-full animate-pulse delay-75"></div>
|
||
|
|
<div class="h-1 w-1 bg-violet-500 rounded-full animate-pulse delay-150"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Modules Header -->
|
||
|
|
<div class="flex items-center justify-between border-b border-void-200 pb-4">
|
||
|
|
<h2 class="text-xl font-display text-white tracking-wide">Installed Modules</h2>
|
||
|
|
<div class="flex gap-4">
|
||
|
|
<button class="text-xs font-mono text-cyan-400 border-b border-cyan-400 pb-0.5">ALL</button>
|
||
|
|
<button
|
||
|
|
class="text-xs font-mono text-void-500 hover:text-white transition-colors">CORE</button>
|
||
|
|
<button
|
||
|
|
class="text-xs font-mono text-void-500 hover:text-white transition-colors">PRO</button>
|
||
|
|
<button
|
||
|
|
class="text-xs font-mono text-void-500 hover:text-white transition-colors">BETA</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-6">
|
||
|
|
|
||
|
|
<!-- Nexus -->
|
||
|
|
<a href="templates/nexus.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-cyan-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-cyan-500/20 text-cyan-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<span class="badge badge-cyan">Core</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-cyan-400">Nexus Profile</h3>
|
||
|
|
<p class="text-void-400 text-xs">User identity, stats integration, and personalized
|
||
|
|
dashboards.</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Social -->
|
||
|
|
<a href="templates/social.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-magenta-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-magenta-500/20 text-magenta-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<path
|
||
|
|
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
|
||
|
|
</path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span class="badge badge-magenta">Live</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-magenta-400">Social Feed</h3>
|
||
|
|
<p class="text-void-400 text-xs">Activity streams, chat channels, and interactive stories.
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Studio -->
|
||
|
|
<a href="templates/studio.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-violet-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-violet-500/20 text-violet-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<path d="M12 20h9"></path>
|
||
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span class="badge badge-void">Pro</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-violet-400">Creator Studio
|
||
|
|
</h3>
|
||
|
|
<p class="text-void-400 text-xs">Content management, analytics, and asset uploading.</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Market -->
|
||
|
|
<a href="templates/market.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-lime-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-lime-500/20 text-lime-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-lime-400">Marketplace</h3>
|
||
|
|
<p class="text-void-400 text-xs">Digital asset store, holographic cards, and checkout.</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Gaming -->
|
||
|
|
<a href="templates/gaming.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-yellow-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-yellow-500/20 text-yellow-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span class="badge badge-void">Fun</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-yellow-400">Gaming & XP</h3>
|
||
|
|
<p class="text-void-400 text-xs">Leaderboards, achievements, and quest tracking systems.</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Hardware -->
|
||
|
|
<a href="templates/hardware.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-orange-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-orange-500/20 text-orange-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
|
||
|
|
<rect x="9" y="9" width="6" height="6"></rect>
|
||
|
|
<line x1="9" y1="1" x2="9" y2="4"></line>
|
||
|
|
<line x1="15" y1="1" x2="15" y2="4"></line>
|
||
|
|
<line x1="9" y1="20" x2="9" y2="23"></line>
|
||
|
|
<line x1="15" y1="20" x2="15" y2="23"></line>
|
||
|
|
<line x1="20" y1="9" x2="23" y2="9"></line>
|
||
|
|
<line x1="20" y1="14" x2="23" y2="14"></line>
|
||
|
|
<line x1="1" y1="9" x2="4" y2="9"></line>
|
||
|
|
<line x1="1" y1="14" x2="4" y2="14"></line>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-orange-400">Hardware</h3>
|
||
|
|
<p class="text-void-400 text-xs">Physical gear formatting, specs, and warranty panels.</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Developers -->
|
||
|
|
<a href="templates/developers.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-blue-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-blue-500/20 text-blue-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<polyline points="16 18 22 12 16 6"></polyline>
|
||
|
|
<polyline points="8 6 2 12 8 18"></polyline>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span class="badge badge-void">Dev</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-blue-400">Developer API</h3>
|
||
|
|
<p class="text-void-400 text-xs">API documentation, code snippets, and keys management.</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Admin -->
|
||
|
|
<a href="templates/admin.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-red-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-red-500/20 text-red-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<span class="badge badge-magenta">Sec</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-red-400">Admin Dashboard</h3>
|
||
|
|
<p class="text-void-400 text-xs">System moderation, logs, and user management.</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Productivity -->
|
||
|
|
<a href="templates/productivity.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-emerald-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-emerald-400">Productivity</h3>
|
||
|
|
<p class="text-void-400 text-xs">Kanban workflows, calendars, and task tracking.</p>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Education -->
|
||
|
|
<a href="templates/education.html"
|
||
|
|
class="card card-ronin group cursor-pointer block hover:border-pink-500/50 transition-all">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div
|
||
|
|
class="w-10 h-10 rounded bg-pink-500/20 text-pink-400 flex items-center justify-center">
|
||
|
|
<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">
|
||
|
|
<path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
|
||
|
|
<path d="M6 12v5c3 3 9 3 12 0v-5"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-pink-400">Education</h3>
|
||
|
|
<p class="text-void-400 text-xs">Learning paths, skill trees, and course modules.</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ============================================== -->
|
||
|
|
<!-- GROUP 1: FOUNDATIONS -->
|
||
|
|
<!-- ============================================== -->
|
||
|
|
|
||
|
|
<div class="flex items-center gap-4 py-8 mb-8 border-b border-void-200/50">
|
||
|
|
<div class="h-px bg-cyan-500 w-12"></div>
|
||
|
|
<h2 class="text-sm font-mono text-cyan-500 uppercase tracking-widest">01 / Foundations</h2>
|
||
|
|
<div class="h-px bg-void-200 flex-grow"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- COLORS -->
|
||
|
|
<section id="colors" class="scroll-mt-32 space-y-12 mb-24">
|
||
|
|
<div class="border-b border-void-200 pb-4 mb-8">
|
||
|
|
<h2 class="text-4xl font-display text-white">Colors Limited</h2>
|
||
|
|
<p class="text-void-400 mt-2 font-light">The core palette defining the Neon Ronin identity.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||
|
|
<div class="space-y-2">
|
||
|
|
<div
|
||
|
|
class="bg-cyan-500 h-32 rounded-lg flex items-end p-3 shadow-lg shadow-cyan-500/20 transition-transform hover:scale-105">
|
||
|
|
<span
|
||
|
|
class="font-mono text-xs text-black font-bold bg-white/20 backdrop-blur px-2 py-1 rounded">#06b6d4</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justifying-between items-center px-1">
|
||
|
|
<span class="text-sm text-white font-medium">Cyan 500</span>
|
||
|
|
<span class="text-xs text-void-500 font-mono">--color-cyan-500</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<div
|
||
|
|
class="bg-magenta-500 h-32 rounded-lg flex items-end p-3 shadow-lg shadow-magenta-500/20 transition-transform hover:scale-105">
|
||
|
|
<span
|
||
|
|
class="font-mono text-xs text-white font-bold bg-black/20 backdrop-blur px-2 py-1 rounded">#d946ef</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justifying-between items-center px-1">
|
||
|
|
<span class="text-sm text-white font-medium">Magenta 500</span>
|
||
|
|
<span class="text-xs text-void-500 font-mono">--color-magenta-500</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<div
|
||
|
|
class="bg-lime-500 h-32 rounded-lg flex items-end p-3 shadow-lg shadow-lime-500/20 transition-transform hover:scale-105">
|
||
|
|
<span
|
||
|
|
class="font-mono text-xs text-black font-bold bg-white/20 backdrop-blur px-2 py-1 rounded">#84cc16</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justifying-between items-center px-1">
|
||
|
|
<span class="text-sm text-white font-medium">Lime 500</span>
|
||
|
|
<span class="text-xs text-void-500 font-mono">--color-lime-500</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<div
|
||
|
|
class="bg-void-950 h-32 rounded-lg flex items-end p-3 border border-void-800 shadow-lg">
|
||
|
|
<span
|
||
|
|
class="font-mono text-xs text-void-400 font-bold bg-void-900/50 backdrop-blur px-2 py-1 rounded">#030712</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justifying-between items-center px-1">
|
||
|
|
<span class="text-sm text-white font-medium">Void 950</span>
|
||
|
|
<span class="text-xs text-void-500 font-mono">--color-void-950</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<div class="bg-void-50 h-32 rounded-lg flex items-end p-3">
|
||
|
|
<span
|
||
|
|
class="font-mono text-xs text-black font-bold bg-white/20 backdrop-blur px-2 py-1 rounded">#f9fafb</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justifying-between items-center px-1">
|
||
|
|
<span class="text-sm text-white font-medium">Void 50</span>
|
||
|
|
<span class="text-xs text-void-500 font-mono">--color-void-50</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- TYPOGRAPHY -->
|
||
|
|
<section id="typography" class="scroll-mt-32 space-y-12 mb-24">
|
||
|
|
<div class="border-b border-void-200 pb-4 mb-8">
|
||
|
|
<h2 class="text-4xl font-display text-white">Typography</h2>
|
||
|
|
<p class="text-void-400 mt-2 font-light">Type hierarchy and font stacks.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
|
|
<div class="space-y-8">
|
||
|
|
<div class="border-l-2 border-cyan-500 pl-6">
|
||
|
|
<p class="text-void-500 text-xs font-mono mb-2 uppercase tracking-widest">Display //
|
||
|
|
Bebas Neue</p>
|
||
|
|
<h1 class="text-7xl font-display text-white leading-none">NEON RONIN<br>DESIGN SYSTEM
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
<div class="border-l-2 border-magenta-500 pl-6">
|
||
|
|
<p class="text-void-500 text-xs font-mono mb-2 uppercase tracking-widest">Sans // Inter
|
||
|
|
</p>
|
||
|
|
<p class="text-xl text-void-200 font-light leading-relaxed">
|
||
|
|
The quick brown fox jumps over the lazy dog. A clean, geometric sans-serif optimized
|
||
|
|
for UI legibility and readability at all sizes.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-8">
|
||
|
|
<div class="border-l-2 border-lime-500 pl-6">
|
||
|
|
<p class="text-void-500 text-xs font-mono mb-2 uppercase tracking-widest">Mono //
|
||
|
|
JetBrains Mono</p>
|
||
|
|
<div
|
||
|
|
class="bg-void-950 p-4 rounded border border-void-800 font-mono text-sm text-lime-400">
|
||
|
|
<span class="text-magenta-400">const</span> system = <span
|
||
|
|
class="text-yellow-400">init</span>();<br>
|
||
|
|
<span class="text-void-500">// System ready state 100%</span><br>
|
||
|
|
console.<span class="text-cyan-400">log</span>(<span class="text-green-400">"Hello
|
||
|
|
World"</span>);
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- UTILITIES -->
|
||
|
|
<section id="utilities" class="scroll-mt-32 space-y-12 mb-24">
|
||
|
|
<div class="border-b border-void-200 pb-4 mb-8">
|
||
|
|
<h2 class="text-4xl font-display text-white">Utilities</h2>
|
||
|
|
<p class="text-void-400 mt-2 font-light">Helper classes for rapid UI development.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
|
|
<div class="p-4 rounded border border-void-200 bg-void-100">
|
||
|
|
<h4 class="font-bold text-white mb-2">Spacing</h4>
|
||
|
|
<ul class="text-xs text-void-400 font-mono space-y-1">
|
||
|
|
<li>.p-4 (padding)</li>
|
||
|
|
<li>.m-4 (margin)</li>
|
||
|
|
<li>.gap-4 (flex/grid gap)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="p-4 rounded border border-void-200 bg-void-100">
|
||
|
|
<h4 class="font-bold text-white mb-2">Layout</h4>
|
||
|
|
<ul class="text-xs text-void-400 font-mono space-y-1">
|
||
|
|
<li>.flex / .grid</li>
|
||
|
|
<li>.hidden / .block</li>
|
||
|
|
<li>.absolute / .relative</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="p-4 rounded border border-void-200 bg-void-100">
|
||
|
|
<h4 class="font-bold text-white mb-2">Text</h4>
|
||
|
|
<ul class="text-xs text-void-400 font-mono space-y-1">
|
||
|
|
<li>.text-sm / .text-xl</li>
|
||
|
|
<li>.text-center</li>
|
||
|
|
<li>.font-bold</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="p-4 rounded border border-void-200 bg-void-100">
|
||
|
|
<h4 class="font-bold text-white mb-2">Color</h4>
|
||
|
|
<ul class="text-xs text-void-400 font-mono space-y-1">
|
||
|
|
<li>.text-cyan-500</li>
|
||
|
|
<li>.bg-void-900</li>
|
||
|
|
<li>.border-void-200</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ============================================== -->
|
||
|
|
<!-- GROUP 2: COMPONENTS -->
|
||
|
|
<!-- ============================================== -->
|
||
|
|
|
||
|
|
<div class="flex items-center gap-4 py-8 mb-8 border-b border-void-200/50">
|
||
|
|
<div class="h-px bg-magenta-500 w-12"></div>
|
||
|
|
<h2 class="text-sm font-mono text-magenta-500 uppercase tracking-widest">02 / Components</h2>
|
||
|
|
<div class="h-px bg-void-200 flex-grow"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- BUTTONS -->
|
||
|
|
<section id="buttons" class="scroll-mt-32 space-y-12 mb-24">
|
||
|
|
<div class="border-b border-void-200 pb-4 mb-8">
|
||
|
|
<h2 class="text-4xl font-display text-white">Buttons</h2>
|
||
|
|
<p class="text-void-400 mt-2 font-light">Interactive triggers for actions and navigation.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-8 border border-void-200 rounded-xl bg-void-100/50 backdrop-blur">
|
||
|
|
<div class="flex flex-wrap gap-4 items-center mb-8">
|
||
|
|
<button class="btn btn-primary">Primary .btn-primary</button>
|
||
|
|
<button class="btn btn-secondary">Secondary .btn-secondary</button>
|
||
|
|
<button class="btn btn-outline">Outline .btn-outline</button>
|
||
|
|
<button class="btn btn-ghost">Ghost .btn-ghost</button>
|
||
|
|
<button class="btn btn-danger">Danger .btn-danger</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-wrap gap-4 items-center pt-8 border-t border-void-200 border-dashed">
|
||
|
|
<p class="w-full text-xs font-mono text-void-500 mb-2">VARIANTS</p>
|
||
|
|
<button class="btn btn-gaming">GAME START .btn-gaming</button>
|
||
|
|
<button class="btn btn-hacker">EXECUTE .btn-hacker</button>
|
||
|
|
<button class="btn btn-nature">Eco Save .btn-nature</button>
|
||
|
|
<button class="btn btn-graffiti">STREET ART .btn-graffiti</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- BADGES -->
|
||
|
|
<section id="badges" class="scroll-mt-32 space-y-12 mb-24">
|
||
|
|
<div class="border-b border-void-200 pb-4 mb-8">
|
||
|
|
<h2 class="text-4xl font-display text-white">Badges</h2>
|
||
|
|
<p class="text-void-400 mt-2 font-light">Status indicators and metadata tags.</p>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="p-8 border border-void-200 rounded-xl bg-void-100/50 backdrop-blur grid md:grid-cols-2 gap-8">
|
||
|
|
<div>
|
||
|
|
<h4 class="text-sm font-bold text-white mb-4">Status</h4>
|
||
|
|
<div class="flex flex-wrap gap-2">
|
||
|
|
<span class="badge badge-cyan">Update</span>
|
||
|
|
<span class="badge badge-magenta">New</span>
|
||
|
|
<span class="badge badge-lime">Online</span>
|
||
|
|
<span class="badge badge-warning">Beta</span>
|
||
|
|
<span class="badge badge-error">Offline</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="text-sm font-bold text-white mb-4">Technical</h4>
|
||
|
|
<div class="flex flex-wrap gap-2">
|
||
|
|
<span class="method-tag method-get">GET</span>
|
||
|
|
<span class="method-tag method-post">POST</span>
|
||
|
|
<span class="method-tag method-delete">DELETE</span>
|
||
|
|
<span class="warranty-badge">WARRANTY</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- FORMS -->
|
||
|
|
<section id="inputs" class="scroll-mt-32 space-y-12 mb-24">
|
||
|
|
<div class="border-b border-void-200 pb-4 mb-8">
|
||
|
|
<h2 class="text-4xl font-display text-white">Inputs</h2>
|
||
|
|
<p class="text-void-400 mt-2 font-light">Data collection elements and toggles.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid md:grid-cols-2 gap-8">
|
||
|
|
<div class="space-y-6">
|
||
|
|
<div class="input-floating">
|
||
|
|
<input type="text" class="input" placeholder=" ">
|
||
|
|
<label>Username</label>
|
||
|
|
</div>
|
||
|
|
<div class="input-floating">
|
||
|
|
<input type="password" class="input" placeholder=" ">
|
||
|
|
<label>Password</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-6 flex flex-col justify-center">
|
||
|
|
<div
|
||
|
|
class="flex items-center justify-between p-4 bg-void-100 rounded border border-void-200">
|
||
|
|
<span class="text-white text-sm">Notifications</span>
|
||
|
|
<div class="toggle-switch active"></div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="flex items-center justify-between p-4 bg-void-100 rounded border border-void-200">
|
||
|
|
<span class="text-white text-sm">Dark Mode</span>
|
||
|
|
<div class="toggle-switch"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- CARDS -->
|
||
|
|
<section id="cards" class="scroll-mt-32 space-y-12 mb-24">
|
||
|
|
<div class="border-b border-void-200 pb-4 mb-8">
|
||
|
|
<h2 class="text-4xl font-display text-white">Cards</h2>
|
||
|
|
<p class="text-void-400 mt-2 font-light">Container components for grouping content.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
|
|
<div class="card">
|
||
|
|
<h3 class="font-bold text-lg text-white mb-2">Standard Card</h3>
|
||
|
|
<p class="text-void-400 text-sm">A basic container with subtle borders and refined padding.
|
||
|
|
Good for generic content.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card card-ronin">
|
||
|
|
<h3 class="font-bold text-lg text-white mb-2">Ronin Card</h3>
|
||
|
|
<p class="text-void-400 text-sm">Features angular clipped corners and a gradient accent on
|
||
|
|
hover. Ideal for features.</p>
|
||
|
|
</div>
|
||
|
|
<div class="holo-card p-6 rounded-lg border border-cyan-500/30">
|
||
|
|
<h3 class="font-bold text-lg text-white mb-2">Holo Card</h3>
|
||
|
|
<p class="text-void-400 text-sm">Interactive glass effect with scanning light animation. Use
|
||
|
|
for special items.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ============================================== -->
|
||
|
|
<!-- GROUP 3: MODULES & PATTERNS -->
|
||
|
|
<!-- ============================================== -->
|
||
|
|
|
||
|
|
<div class="flex items-center gap-4 py-8 mb-8 border-b border-void-200/50">
|
||
|
|
<div class="h-px bg-lime-500 w-12"></div>
|
||
|
|
<h2 class="text-sm font-mono text-lime-500 uppercase tracking-widest">03 / Patterns</h2>
|
||
|
|
<div class="h-px bg-void-200 flex-grow"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TABLES -->
|
||
|
|
<section id="tables" class="scroll-mt-32 space-y-12 mb-24">
|
||
|
|
<div class="border-b border-void-200 pb-4 mb-8">
|
||
|
|
<h2 class="text-4xl font-display text-white">Data Tables</h2>
|
||
|
|
</div>
|
||
|
|
<div class="card p-0 overflow-hidden">
|
||
|
|
<!-- (Table content reused from previous generic table) -->
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>User</th>
|
||
|
|
<th>Role</th>
|
||
|
|
<th>Status</th>
|
||
|
|
<th>Last Active</th>
|
||
|
|
<th>Action</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="font-bold text-white">Cyber_Ronin</td>
|
||
|
|
<td>Admin</td>
|
||
|
|
<td><span class="badge badge-cyan">Online</span></td>
|
||
|
|
<td class="font-mono text-void-400">Now</td>
|
||
|
|
<td><button class="btn btn-sm btn-ghost">Edit</button></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="font-bold text-white">Neon_Drifter</td>
|
||
|
|
<td>User</td>
|
||
|
|
<td><span class="badge badge-magenta">Busy</span></td>
|
||
|
|
<td class="font-mono text-void-400">2m ago</td>
|
||
|
|
<td><button class="btn btn-sm btn-ghost">Edit</button></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="font-bold text-white">Tech_Priest</td>
|
||
|
|
<td>Mod</td>
|
||
|
|
<td><span class="badge badge-void">Offline</span></td>
|
||
|
|
<td class="font-mono text-void-400">1d ago</td>
|
||
|
|
<td><button class="btn btn-sm btn-ghost">Edit</button></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- FEEDBACK -->
|
||
|
|
<section id="feedback" class="scroll-mt-32 space-y-12 mb-24">
|
||
|
|
<div class="border-b border-void-200 pb-4 mb-8">
|
||
|
|
<h2 class="text-4xl font-display text-white">Feedback</h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
|
|
<div class="space-y-4">
|
||
|
|
<div
|
||
|
|
class="p-4 rounded bg-cyan-500/10 border border-cyan-500/20 text-cyan-200 flex items-center gap-3">
|
||
|
|
<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">
|
||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
||
|
|
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||
|
|
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||
|
|
</svg>
|
||
|
|
<span>System Update: Version 5.0 installed successfully.</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="p-4 rounded bg-magenta-500/10 border border-magenta-500/20 text-magenta-200 flex items-center gap-3">
|
||
|
|
<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">
|
||
|
|
<path
|
||
|
|
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z">
|
||
|
|
</path>
|
||
|
|
<line x1="12" y1="9" x2="12" y2="13"></line>
|
||
|
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
||
|
|
</svg>
|
||
|
|
<span>Warning: Firewall integrity at 45%.</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- 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="text-cyan-500 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||
|
|
</svg>
|
||
|
|
<input type="text" id="searchInput"
|
||
|
|
class="bg-transparent border-none outline-none text-white w-full placeholder-void-500"
|
||
|
|
placeholder="Search components, tokens, or templates...">
|
||
|
|
<kbd
|
||
|
|
class="hidden md:block px-2 py-1 bg-void-200 rounded text-[10px] text-void-500 font-mono">ESC</kbd>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<div class="text-[10px] uppercase font-mono text-void-500 mb-2">Quick Links</div>
|
||
|
|
<!-- Nexus -->
|
||
|
|
<a href="templates/nexus.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-cyan-500">
|
||
|
|
<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="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>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Nexus Profile</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<!-- Social -->
|
||
|
|
<a href="templates/social.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-magenta-500">
|
||
|
|
<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="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
|
||
|
|
</path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Social Feed</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<!-- Market -->
|
||
|
|
<a href="templates/market.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-lime-500">
|
||
|
|
<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">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Marketplace</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<!-- Studio -->
|
||
|
|
<a href="templates/studio.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-violet-500">
|
||
|
|
<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="M12 20h9"></path>
|
||
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Creator Studio</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<!-- Admin -->
|
||
|
|
<a href="templates/admin.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-red-500">
|
||
|
|
<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">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Admin & Moderation</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<!-- Hardware -->
|
||
|
|
<a href="templates/hardware.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-orange-500">
|
||
|
|
<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">
|
||
|
|
<rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
|
||
|
|
<rect x="9" y="9" width="6" height="6"></rect>
|
||
|
|
<line x1="9" y1="1" x2="9" y2="4"></line>
|
||
|
|
<line x1="15" y1="1" x2="15" y2="4"></line>
|
||
|
|
<line x1="9" y1="20" x2="9" y2="23"></line>
|
||
|
|
<line x1="15" y1="20" x2="15" y2="23"></line>
|
||
|
|
<line x1="20" y1="9" x2="23" y2="9"></line>
|
||
|
|
<line x1="20" y1="14" x2="23" y2="14"></line>
|
||
|
|
<line x1="1" y1="9" x2="4" y2="9"></line>
|
||
|
|
<line x1="1" y1="14" x2="4" y2="14"></line>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Hardware Gear</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<!-- Developers -->
|
||
|
|
<a href="templates/developers.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-blue-500">
|
||
|
|
<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">
|
||
|
|
<polyline points="16 18 22 12 16 6"></polyline>
|
||
|
|
<polyline points="8 6 2 12 8 18"></polyline>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Developer API</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<!-- Gaming -->
|
||
|
|
<a href="templates/gaming.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-yellow-500">
|
||
|
|
<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">
|
||
|
|
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Gaming & XP</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<!-- Productivity -->
|
||
|
|
<a href="templates/productivity.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-emerald-500">
|
||
|
|
<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">
|
||
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Productivity</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<!-- Education -->
|
||
|
|
<a href="templates/education.html"
|
||
|
|
class="flex items-center gap-3 p-2 hover:bg-void-50 rounded cursor-pointer transition-colors group">
|
||
|
|
<div
|
||
|
|
class="w-8 h-8 rounded bg-void-200 flex items-center justify-center text-void-500 group-hover:text-pink-500">
|
||
|
|
<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="M22 10v6M2 10l10-5 10 5-10 5z"></path>
|
||
|
|
<path d="M6 12v5c3 3 9 3 12 0v-5"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-sm text-white font-medium">Education</div>
|
||
|
|
<div class="text-xs text-void-500">Template</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- DEMO MODAL -->
|
||
|
|
<div id="demoModal" class="modal-backdrop">
|
||
|
|
<div class="modal-content text-center">
|
||
|
|
<div
|
||
|
|
class="w-16 h-16 rounded-full bg-cyan-500/20 text-cyan-500 flex items-center justify-center mx-auto mb-4">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
|
||
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-2xl font-bold text-white mb-2">Operation Successful</h3>
|
||
|
|
<p class="text-void-400 mb-6">You have successfully triggered the modal. This component can be used for
|
||
|
|
confirmations, forms, or critical alerts.</p>
|
||
|
|
<div class="flex gap-4 justify-center">
|
||
|
|
<button class="btn btn-ghost" data-modal-close>Cancel</button>
|
||
|
|
<button class="btn btn-primary" data-modal-close>Confirm Action</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- JS -->
|
||
|
|
<script type="module" src="js/main.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|