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 | Home</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 src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.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; | |
| } | |
| .waveform { | |
| background: linear-gradient(90deg, #7FFFD4, #7FFFD400); | |
| animation: pulse 2s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.8; } | |
| 100% { opacity: 1; } | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px rgba(127, 255, 212, 0.7); | |
| } | |
| .card-hover { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 255, 255, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-primary text-white min-h-screen 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"> | |
| <h1 class="text-3xl font-bold text-secondary font-futura neon-text">AUDELY <span class="text-xs opacity-70">//v0.9.5</span></h1> | |
| <div class="flex space-x-4"> | |
| <button class="glass-panel px-4 py-2 rounded-full hover:glow-effect transition-all">Sign In</button> | |
| <button class="bg-secondary text-primary px-4 py-2 rounded-full hover:glow-effect transition-all">Sign Up</button> | |
| </div> | |
| </header> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-6 my-8 relative z-10"> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Post Feed --> | |
| <div class="glass-panel p-6 card-hover"> | |
| <div class="flex items-center space-x-4 mb-4"> | |
| <img src="http://static.photos/music/200x200/1" class="w-12 h-12 rounded-full object-cover"> | |
| <textarea class="flex-1 bg-accent rounded-lg p-3 resize-none" placeholder="Share your latest track or idea..."></textarea> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-accent"> | |
| <i data-feather="music"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-accent"> | |
| <i data-feather="image"></i> | |
| </button> | |
| </div> | |
| <button class="bg-secondary text-primary px-4 py-2 rounded-full hover:glow-effect">Post</button> | |
| </div> | |
| </div> | |
| <!-- Feed Items --> | |
| <div class="space-y-6"> | |
| <!-- Post Example 1 --> | |
| <div class="glass-panel p-6 hover:glow-effect transition-all card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="http://static.photos/music/200x200/2" class="w-10 h-10 rounded-full object-cover"> | |
| <div> | |
| <h3 class="font-medium">ProducerPro</h3> | |
| <p class="text-xs opacity-70">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <button class="text-secondary" onclick="togglePostMenu(this)"> | |
| <i data-feather="more-horizontal"></i> | |
| </button> | |
| <div class="absolute right-0 mt-1 w-48 bg-accent rounded-md shadow-lg z-50 hidden post-menu"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-primary/50">Follow</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-primary/50">Message</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-primary/50">Turn on Notifications</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-primary/50">Mute User</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-400 hover:bg-primary/50">Block User</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mb-4">Just finished this new beat - looking for a vocalist to collaborate! #HipHop #NeedVocals</p> | |
| <div class="mb-4"> | |
| <div class="waveform h-8 rounded mb-2"></div> | |
| <div class="flex justify-between text-xs opacity-70"> | |
| <span>0:30</span> | |
| <span>2:14</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="flex items-center space-x-1 hover:text-secondary"> | |
| <i data-feather="heart"></i> | |
| <span>24</span> | |
| </button> | |
| <button class="flex items-center space-x-1 hover:text-secondary"> | |
| <i data-feather="message-circle"></i> | |
| <span>8</span> | |
| </button> | |
| <button class="flex items-center space-x-1 hover:text-secondary"> | |
| <i data-feather="share-2"></i> | |
| <span>3</span> | |
| </button> | |
| <button class="flex items-center space-x-1 hover:text-secondary"> | |
| <i data-feather="collaborate"></i> | |
| <span>Collab</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Post Example 2 --> | |
| <div class="glass-panel p-6 hover:glow-effect transition-all card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="http://static.photos/music/200x200/3" class="w-10 h-10 rounded-full object-cover"> | |
| <div> | |
| <h3 class="font-medium">VocalVibes</h3> | |
| <p class="text-xs opacity-70">4 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <button class="text-secondary" onclick="togglePostMenu(this)"> | |
| <i data-feather="more-horizontal"></i> | |
| </button> | |
| <div class="absolute right-0 mt-1 w-48 bg-accent rounded-md shadow-lg z-50 hidden post-menu"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-primary/50">Follow</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-primary/50">Message</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-primary/50">Turn on Notifications</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-primary/50">Mute User</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-400 hover:bg-primary/50">Block User</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mb-4">Looking for producers who specialize in melodic rap beats. Check my profile for samples of my voice!</p> | |
| <div class="mb-4"> | |
| <div class="waveform h-8 rounded mb-2"></div> | |
| <div class="flex justify-between text-xs opacity-70"> | |
| <span>0:00</span> | |
| <span>0:45</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="flex items-center space-x-1 hover:text-secondary"> | |
| <i data-feather="heart"></i> | |
| <span>42</span> | |
| </button> | |
| <button class="flex items-center space-x-1 hover:text-secondary"> | |
| <i data-feather="message-circle"></i> | |
| <span>15</span> | |
| </button> | |
| <button class="flex items-center space-x-1 hover:text-secondary"> | |
| <i data-feather="share-2"></i> | |
| <span>7</span> | |
| </button> | |
| <button class="flex items-center space-x-1 hover:text-secondary"> | |
| <i data-feather="collaborate"></i> | |
| <span>Collab</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="space-y-6"> | |
| <div class="glass-panel p-6 card-hover"> | |
| <h2 class="text-xl font-bold mb-4 text-secondary">Trending Now</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-3"> | |
| <span class="text-secondary font-bold">1</span> | |
| <img src="http://static.photos/music/200x200/4" class="w-10 h-10 rounded"> | |
| <div> | |
| <h3 class="font-medium">Midnight Dreams</h3> | |
| <p class="text-xs opacity-70">BeatMakerX</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <span class="text-secondary font-bold">2</span> | |
| <img src="http://static.photos/music/200x200/5" class="w-10 h-10 rounded"> | |
| <div> | |
| <h3 class="font-medium">City Lights</h3> | |
| <p class="text-xs opacity-70">UrbanVibes</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <span class="text-secondary font-bold">3</span> | |
| <img src="http://static.photos/music/200x200/6" class="w-10 h-10 rounded"> | |
| <div> | |
| <h3 class="font-medium">Electric Dreams</h3> | |
| <p class="text-xs opacity-70">SynthMaster</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-panel p-6 card-hover"> | |
| <h2 class="text-xl font-bold mb-4 text-secondary">Suggested Collaborations</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="http://static.photos/music/200x200/7" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-medium">GuitarGenius</h3> | |
| <p class="text-xs opacity-70">Looking for vocalists</p> | |
| </div> | |
| <button class="ml-auto bg-secondary text-primary px-3 py-1 rounded-full text-sm">Connect</button> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <img src="http://static.photos/music/200x200/8" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-medium">BassQueen</h3> | |
| <p class="text-xs opacity-70">Need mixing engineer</p> | |
| </div> | |
| <button class="ml-auto bg-secondary text-primary px-3 py-1 rounded-full text-sm">Connect</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- 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="#" class="flex flex-col items-center text-secondary"> | |
| <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 opacity-70 hover:opacity-100"> | |
| <i data-feather="user"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| function togglePostMenu(button) { | |
| const menu = button.nextElementSibling; | |
| const allMenus = document.querySelectorAll('.post-menu'); | |
| // Close all other open menus | |
| allMenus.forEach(m => { | |
| if (m !== menu) m.classList.add('hidden'); | |
| }); | |
| // Toggle current menu | |
| menu.classList.toggle('hidden'); | |
| // Close menu when clicking outside | |
| document.addEventListener('click', function closeMenu(e) { | |
| if (!button.contains(e.target) && !menu.contains(e.target)) { | |
| menu.classList.add('hidden'); | |
| document.removeEventListener('click', closeMenu); | |
| } | |
| }); | |
| } | |
| anime({ | |
| targets: '.waveform', | |
| scaleX: [0, 1], | |
| easing: 'easeOutQuad', | |
| duration: 1000, | |
| delay: anime.stagger(100) | |
| }); | |
| // Add particle effect on buttons | |
| document.querySelectorAll('button').forEach(btn => { | |
| btn.addEventListener('mouseenter', () => { | |
| anime({ | |
| targets: btn, | |
| scale: 1.05, | |
| boxShadow: ['0 0 0px rgba(127, 255, 212, 0)', '0 0 15px rgba(127, 255, 212, 0.5)'], | |
| duration: 300 | |
| }); | |
| }); | |
| btn.addEventListener('mouseleave', () => { | |
| anime({ | |
| targets: btn, | |
| scale: 1, | |
| boxShadow: '0 0 0px rgba(127, 255, 212, 0)', | |
| duration: 300 | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |