Spaces:
Running
Running
Of course. Here is a detailed and structured prompt designed to guide an AI in generating the complex front-end for your "ChordCraft" application.
d0916a3
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChordCraft - AI Music Production Studio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#00f0ff', | |
| secondary: '#ff00f0', | |
| accent: '#8a2be2', | |
| dark: '#0a0a1a', | |
| darker: '#050510', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['Fira Code', 'monospace'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap'); | |
| body { | |
| background-color: #050510; | |
| color: #e0e0e0; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #00f0ff, #ff00f0); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-border { | |
| position: relative; | |
| border-radius: 0.5rem; | |
| } | |
| .gradient-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: -1px; | |
| left: -1px; | |
| right: -1px; | |
| bottom: -1px; | |
| border-radius: 0.5rem; | |
| background: linear-gradient(45deg, #00f0ff, #ff00f0, #8a2be2); | |
| z-index: -1; | |
| } | |
| .waveform { | |
| background: linear-gradient(90deg, rgba(0,240,255,0.1), rgba(138,43,226,0.3), rgba(255,0,240,0.1)); | |
| background-size: 200% 100%; | |
| animation: waveformAnimation 3s infinite linear; | |
| } | |
| @keyframes waveformAnimation { | |
| 0% { background-position: 0% 50%; } | |
| 100% { background-position: 200% 50%; } | |
| } | |
| .neon-shadow { | |
| box-shadow: 0 0 10px rgba(0, 240, 255, 0.5), | |
| 0 0 20px rgba(255, 0, 240, 0.3); | |
| } | |
| .neon-shadow-hover:hover { | |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.7), | |
| 0 0 25px rgba(255, 0, 240, 0.5); | |
| } | |
| .scrollbar-custom::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-track { | |
| background: rgba(10, 10, 26, 0.5); | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-thumb { | |
| background: linear-gradient(#00f0ff, #ff00f0); | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <header class="bg-darker border-b border-gray-800 px-4 py-3 flex items-center justify-between sticky top-0 z-50"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <h1 class="text-2xl font-bold gradient-text">CC</h1> | |
| <span class="ml-2 text-xl font-semibold">ChordCraft</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="flex items-center space-x-2 bg-dark rounded-full px-4 py-1 cursor-pointer hover:bg-gray-800 transition"> | |
| <i data-feather="music" class="w-4 h-4 text-primary"></i> | |
| <span class="text-sm">Untitled Project</span> | |
| <i data-feather="edit-2" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="hidden md:flex items-center space-x-1 bg-dark hover:bg-gray-800 px-3 py-1.5 rounded-md transition"> | |
| <i data-feather="save" class="w-4 h-4 text-gray-300"></i> | |
| <span class="text-sm">Save</span> | |
| </button> | |
| <button class="hidden md:flex items-center space-x-1 bg-dark hover:bg-gray-800 px-3 py-1.5 rounded-md transition"> | |
| <i data-feather="download" class="w-4 h-4 text-gray-300"></i> | |
| <span class="text-sm">Export</span> | |
| </button> | |
| <button class="flex items-center space-x-1 bg-gradient-to-r from-primary to-secondary text-darker font-medium px-4 py-1.5 rounded-md transition hover:opacity-90"> | |
| <i data-feather="share-2" class="w-4 h-4"></i> | |
| <span class="text-sm">Share</span> | |
| </button> | |
| <div class="relative"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center cursor-pointer"> | |
| <i data-feather="user" class="w-4 h-4 text-darker"></i> | |
| </div> | |
| <div class="hidden absolute right-0 mt-2 w-48 bg-dark rounded-md shadow-lg py-1 z-50 border border-gray-800"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800">Billing</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Panel - Project Manager --> | |
| <aside class="w-64 bg-dark border-r border-gray-800 flex flex-col transition-all duration-300 ease-in-out" id="leftPanel"> | |
| <div class="p-4 border-b border-gray-800"> | |
| <h2 class="text-lg font-semibold flex items-center justify-between"> | |
| <span>Project Manager</span> | |
| <button class="text-gray-400 hover:text-white" id="collapseLeft"> | |
| <i data-feather="chevron-left" class="w-5 h-5"></i> | |
| </button> | |
| </h2> | |
| </div> | |
| <div class="flex-1 overflow-y-auto scrollbar-custom p-4 space-y-4"> | |
| <!-- Projects Accordion --> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between cursor-pointer"> | |
| <h3 class="font-medium text-gray-300">My Projects</h3> | |
| <i data-feather="plus" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| <div class="space-y-1 ml-2"> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer"> | |
| <span class="text-sm">Summer Vibes</span> | |
| <span class="text-xs text-gray-400">2h ago</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer"> | |
| <span class="text-sm">Dark Synth</span> | |
| <span class="text-xs text-gray-400">1d ago</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer"> | |
| <span class="text-sm">Jazz Improv</span> | |
| <span class="text-xs text-gray-400">3d ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audio Assets Accordion --> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between cursor-pointer"> | |
| <h3 class="font-medium text-gray-300">Audio Assets</h3> | |
| <i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| <div class="space-y-1 ml-2"> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer"> | |
| <span class="text-sm">Kick Drum.wav</span> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer"> | |
| <span class="text-sm">Synth Lead.mp3</span> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer"> | |
| <span class="text-sm">Bassline.wav</span> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Tools Accordion --> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between cursor-pointer"> | |
| <h3 class="font-medium text-gray-300">AI Tools</h3> | |
| <i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| <div class="space-y-1 ml-2"> | |
| <div class="p-2 rounded hover:bg-gray-800 cursor-pointer"> | |
| <span class="text-sm">Stem Separator</span> | |
| </div> | |
| <div class="p-2 rounded hover:bg-gray-800 cursor-pointer"> | |
| <span class="text-sm">Harmonic Analyzer</span> | |
| </div> | |
| <div class="p-2 rounded hover:bg-gray-800 cursor-pointer"> | |
| <span class="text-sm">Rhythm Generator</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- File Upload Area --> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="gradient-border p-4 rounded-md text-center cursor-pointer hover:bg-gray-800 transition"> | |
| <i data-feather="upload" class="w-6 h-6 mx-auto text-primary"></i> | |
| <p class="text-sm mt-2">Drag & drop audio files here</p> | |
| <p class="text-xs text-gray-400 mt-1">or click to browse</p> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Center Panel - Workspace --> | |
| <main class="flex-1 flex flex-col bg-darker overflow-hidden"> | |
| <!-- Workspace Tabs --> | |
| <div class="flex border-b border-gray-800"> | |
| <button class="flex-1 py-3 text-center font-medium border-b-2 border-primary text-primary"> | |
| Studio | |
| </button> | |
| <button class="flex-1 py-3 text-center font-medium text-gray-400 hover:text-white"> | |
| Code Editor | |
| </button> | |
| </div> | |
| <!-- Transport Controls --> | |
| <div class="bg-dark px-4 py-2 flex items-center justify-between border-b border-gray-800"> | |
| <div class="flex items-center space-x-3"> | |
| <button class="w-8 h-8 rounded-full bg-primary text-darker flex items-center justify-center hover:bg-opacity-90"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-700 text-gray-300 flex items-center justify-center hover:bg-gray-600"> | |
| <i data-feather="pause" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-700 text-gray-300 flex items-center justify-center hover:bg-gray-600"> | |
| <i data-feather="square" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-700 text-gray-300 flex items-center justify-center hover:bg-gray-600"> | |
| <i data-feather="circle" class="w-4 h-4"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-700 text-gray-300 flex items-center justify-center hover:bg-gray-600"> | |
| <i data-feather="repeat" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-sm font-mono">0:00.000</div> | |
| <button class="flex items-center space-x-1 bg-gradient-to-r from-primary to-secondary text-darker font-medium px-4 py-1 rounded-md transition hover:opacity-90 neon-shadow-hover"> | |
| <i data-feather="wand-2" class="w-4 h-4"></i> | |
| <span>Analyze & Convert to Code</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Timeline --> | |
| <div class="flex-1 overflow-auto scrollbar-custom"> | |
| <!-- Timeline Ruler --> | |
| <div class="h-8 bg-dark sticky top-0 z-10 border-b border-gray-800 flex items-center px-4"> | |
| <div class="flex space-x-8"> | |
| <span class="text-xs text-gray-400">0:00</span> | |
| <span class="text-xs text-gray-400">0:05</span> | |
| <span class="text-xs text-gray-400">0:10</span> | |
| <span class="text-xs text-gray-400">0:15</span> | |
| </div> | |
| </div> | |
| <!-- Tracks --> | |
| <div class="space-y-2 p-4"> | |
| <!-- Track 1 --> | |
| <div class="flex h-16"> | |
| <div class="w-48 bg-dark rounded-l-md border border-gray-800 flex items-center px-3 space-x-2"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="volume-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </button> | |
| <span class="text-sm truncate">Kick Drum</span> | |
| <div class="ml-auto flex space-x-1"> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i data-feather="mic-off" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i data-feather="headphones" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 bg-dark border border-l-0 border-gray-800 rounded-r-md overflow-hidden relative"> | |
| <div class="waveform absolute inset-0 rounded-r-md"></div> | |
| <div class="absolute left-20 w-32 h-full bg-gradient-to-r from-primary/20 to-transparent"></div> | |
| </div> | |
| </div> | |
| <!-- Track 2 --> | |
| <div class="flex h-16"> | |
| <div class="w-48 bg-dark rounded-l-md border border-gray-800 flex items-center px-3 space-x-2"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="volume-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </button> | |
| <span class="text-sm truncate">Bassline</span> | |
| <div class="ml-auto flex space-x-1"> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i data-feather="mic-off" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i data-feather="headphones" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 bg-dark border border-l-0 border-gray-800 rounded-r-md overflow-hidden relative"> | |
| <div class="waveform absolute inset-0 rounded-r-md"></div> | |
| <div class="absolute left-40 w-48 h-full bg-gradient-to-r from-secondary/20 to-transparent"></div> | |
| </div> | |
| </div> | |
| <!-- Track 3 --> | |
| <div class="flex h-16"> | |
| <div class="w-48 bg-dark rounded-l-md border border-gray-800 flex items-center px-3 space-x-2"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="volume-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </button> | |
| <span class="text-sm truncate">Synth Lead</span> | |
| <div class="ml-auto flex space-x-1"> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i data-feather="mic-off" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i data-feather="headphones" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 bg-dark border border-l-0 border-gray-800 rounded-r-md overflow-hidden relative"> | |
| <div class="waveform absolute inset-0 rounded-r-md"></div> | |
| <div class="absolute left-60 w-24 h-full bg-gradient-to-r from-accent/20 to-transparent"></div> | |
| </div> | |
| </div> | |
| <!-- Track 4 (Empty) --> | |
| <div class="flex h-16"> | |
| <div class="w-48 bg-dark rounded-l-md border border-gray-800 flex items-center px-3 space-x-2"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="volume-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </button> | |
| <span class="text-sm text-gray-400 italic">Drag audio here</span> | |
| </div> | |
| <div class="flex-1 bg-dark border border-l-0 border-gray-800 rounded-r-md"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Right Panel - AI Companion --> | |
| <aside class="w-72 bg-dark border-l border-gray-800 flex flex-col transition-all duration-300 ease-in-out" id="rightPanel"> | |
| <div class="p-4 border-b border-gray-800"> | |
| <h2 class="text-lg font-semibold flex items-center justify-between"> | |
| <span>AI Companion</span> | |
| <button class="text-gray-400 hover:text-white" id="collapseRight"> | |
| <i data-feather="chevron-right" class="w-5 h-5"></i> | |
| </button> | |
| </h2> | |
| <div class="flex mt-2"> | |
| <button class="flex-1 py-1 text-center font-medium border-b-2 border-primary text-primary text-sm"> | |
| Analysis | |
| </button> | |
| <button class="flex-1 py-1 text-center font-medium text-gray-400 hover:text-white text-sm"> | |
| Inspector | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto scrollbar-custom p-4 space-y-4"> | |
| <!-- Harmonic Analysis Card --> | |
| <div class="gradient-border p-4 rounded-md"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium">Harmonic Analysis</h3> | |
| <i data-feather="activity" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-300">Key</span> | |
| <span class="text-sm font-mono">C minor</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-300">BPM</span> | |
| <span class="text-sm font-mono">128</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-300">Time Signature</span> | |
| <span class="text-sm font-mono">4/4</span> | |
| </div> | |
| <div class="mt-3"> | |
| <h4 class="text-xs text-gray-400 mb-1">Detected Chords</h4> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="px-2 py-1 bg-gray-800 rounded text-xs">Cm7</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded text-xs">G#</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded text-xs">A#</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded text-xs">Fm</span> | |
| <span class="px-2 py-1 bg-gray-800 rounded text-xs">D#7</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Suggestions Card --> | |
| <div class="gradient-border p-4 rounded-md"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium">AI Suggestions</h3> | |
| <i data-feather="zap" class="w-5 h-5 text-secondary"></i> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="w-2 h-2 rounded-full bg-primary mt-1 mr-2"></div> | |
| <p class="text-sm">Try resolving this F#dim chord to a Gm for smoother harmonic transition.</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-2 h-2 rounded-full bg-primary mt-1 mr-2"></div> | |
| <p class="text-sm">The rhythm in measure 4 is slightly off-beat. Consider quantizing to 16th notes.</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-2 h-2 rounded-full bg-primary mt-1 mr-2"></div> | |
| <p class="text-sm">Adding a high-pass filter to the bassline around 100Hz could reduce muddiness.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stem Separation Card --> | |
| <div class="gradient-border p-4 rounded-md"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium">Stem Separation</h3> | |
| <i data-feather="layers" class="w-5 h-5 text-accent"></i> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-300">Vocals</span> | |
| <div class="w-24 bg-gray-800 rounded-full h-1.5"> | |
| <div class="bg-primary h-1.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-300">Drums</span> | |
| <div class="w-24 bg-gray-800 rounded-full h-1.5"> | |
| <div class="bg-primary h-1.5 rounded-full" style="width: 88%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-300">Bass</span> | |
| <div class="w-24 bg-gray-800 rounded-full h-1.5"> | |
| <div class="bg-primary h-1.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-300">Other</span> | |
| <div class="w-24 bg-gray-800 rounded-full h-1.5"> | |
| <div class="bg-primary h-1.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 py-1.5 bg-gray-800 hover:bg-gray-700 rounded text-sm transition"> | |
| Extract Stems | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i data-feather="cpu" class="w-4 h-4 text-darker"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm">AI Processing</div> | |
| <div class="w-full bg-gray-800 rounded-full h-1 mt-1"> | |
| <div class="bg-gradient-to-r from-primary to-secondary h-1 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <script> | |
| // Initialize AOS animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Panel collapse functionality | |
| document.getElementById('collapseLeft').addEventListener('click', function() { | |
| const panel = document.getElementById('leftPanel'); | |
| panel.classList.toggle('hidden'); | |
| panel.classList.toggle('md:block'); | |
| this.querySelector('i').setAttribute('data-feather', panel.classList.contains('hidden') ? 'chevron-right' : 'chevron-left'); | |
| feather.replace(); | |
| }); | |
| document.getElementById('collapseRight').addEventListener('click', function() { | |
| const panel = document.getElementById('rightPanel'); | |
| panel.classList.toggle('hidden'); | |
| panel.classList.toggle('md:block'); | |
| this.querySelector('i').setAttribute('data-feather', panel.classList.contains('hidden') ? 'chevron-left' : 'chevron-right'); | |
| feather.replace(); | |
| }); | |
| // Simulate waveform animation | |
| const waveforms = document.querySelectorAll('.waveform'); | |
| waveforms.forEach(wave => { | |
| const duration = Math.random() * 2 + 3; | |
| wave.style.animationDuration = `${duration}s`; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |