Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Harmonic Nexus | Settings</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#121212', | |
| secondary: '#7FFFD4', | |
| accent: '#1E1E1E', | |
| neon: { | |
| cyan: '#00FFFF', | |
| magenta: '#FF00FF', | |
| purple: '#9D00FF' | |
| } | |
| }, | |
| backdropBlur: { | |
| xs: '4px', | |
| }, | |
| fontFamily: { | |
| futura: ['"Orbitron"', 'sans-serif'], | |
| mono: ['"Roboto Mono"', 'monospace'] | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .glass-panel { | |
| background: rgba(30, 30, 30, 0.7); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(127, 255, 212, 0.2); | |
| border-radius: 16px; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(127, 255, 212, 0.4); | |
| transition: all 0.3s ease; | |
| } | |
| .setting-item { | |
| transition: all 0.3s ease; | |
| } | |
| .setting-item:hover { | |
| background: rgba(127, 255, 212, 0.1); | |
| } | |
| .toggle-checkbox:checked { | |
| background-color: #7FFFD4; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-primary text-white min-h-screen pb-16 font-mono relative overflow-x-hidden"> | |
| <div class="absolute inset-0 opacity-5 pointer-events-none" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9InBhdHRlcm4iIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgMTAgMCBRIDUgNSAwIDEwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMGZmZmYiIHN0cm9rZS13aWR0aD0iMC4yIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIi8+PC9zdmc+')"> | |
| </div> | |
| <div class="container mx-auto px-4"> | |
| <header class="py-6 flex justify-between items-center border-b border-accent"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="profile.html" class="text-secondary"> | |
| <i data-feather="arrow-left"></i> | |
| </a> | |
| <h1 class="text-2xl font-bold text-secondary font-futura neon-text">SETTINGS</h1> | |
| </div> | |
| </header> | |
| <main class="glass-panel rounded-xl p-6 my-6"> | |
| <!-- Account Settings --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4 text-secondary">Account</h2> | |
| <div class="space-y-4"> | |
| <div class="setting-item p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium">Email Address</h3> | |
| <p class="text-sm opacity-70">user@example.com</p> | |
| </div> | |
| <button class="text-secondary text-sm">Change</button> | |
| </div> | |
| </div> | |
| <div class="setting-item p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium">Phone Number</h3> | |
| <p class="text-sm opacity-70">+1 (555) 123-4567</p> | |
| </div> | |
| <button class="text-secondary text-sm">Change</button> | |
| </div> | |
| </div> | |
| <div class="setting-item p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium">Password</h3> | |
| <p class="text-sm opacity-70">••••••••</p> | |
| </div> | |
| <button class="text-secondary text-sm">Change</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Privacy Settings --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4 text-secondary">Privacy</h2> | |
| <div class="space-y-4"> | |
| <div class="setting-item p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium">Blocked Users</h3> | |
| <button class="text-secondary text-sm">Manage</button> | |
| </div> | |
| </div> | |
| <div class="setting-item p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium">Private Profile</h3> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-accent rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification Settings --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4 text-secondary">Notifications</h2> | |
| <div class="space-y-4"> | |
| <div class="setting-item p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium">Push Notifications</h3> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="w-11 h-6 bg-accent rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="setting-item p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium">Email Notifications</h3> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="w-11 h-6 bg-accent rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Appearance Settings --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4 text-secondary">Appearance</h2> | |
| <div class="space-y-4"> | |
| <div class="setting-item p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium">Dark Mode</h3> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="w-11 h-6 bg-accent rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="setting-item p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium">Accent Color</h3> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 rounded-full bg-[#7FFFD4] border-2 border-secondary"></button> | |
| <button class="w-6 h-6 rounded-full bg-[#9D00FF] border-2 border-accent"></button> | |
| <button class="w-6 h-6 rounded-full bg-[#FF00FF] border-2 border-accent"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Account Actions --> | |
| <div> | |
| <h2 class="text-xl font-bold mb-4 text-secondary">Account Actions</h2> | |
| <div class="space-y-4"> | |
| <button class="w-full setting-item p-4 rounded-lg text-left font-medium hover:text-secondary"> | |
| Log Out | |
| </button> | |
| <button class="w-full setting-item p-4 rounded-lg text-left font-medium text-red-400 hover:text-red-300"> | |
| Delete Account | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-primary/80 border-t border-secondary/20 backdrop-blur-lg z-50"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-around"> | |
| <a href="index.html" class="flex flex-col items-center opacity-70 hover:opacity-100"> | |
| <i data-feather="home"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="charts.html" class="flex flex-col items-center opacity-70 hover:opacity-100"> | |
| <i data-feather="trending-up"></i> | |
| <span class="text-xs mt-1">Charts</span> | |
| </a> | |
| <a href="explore.html" class="flex flex-col items-center opacity-70 hover:opacity-100"> | |
| <i data-feather="compass"></i> | |
| <span class="text-xs mt-1">Explore</span> | |
| </a> | |
| <a href="profile.html" class="flex flex-col items-center text-secondary"> | |
| <i data-feather="user"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |