quant_Synth

Running

App Files Files Community

Joe-C-Wales commited on Oct 19, 2025

Commit

748379a

verified ·

1 Parent(s): f913693

apply new UX

Browse files

Files changed (5) hide show

api.html +349 -0
index.html +200 -74
quantum.html +169 -65
synthesizer.html +285 -78
visualization.html +236 -81

api.html ADDED Viewed

	@@ -0,0 +1,349 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API Documentation - Quantum Music Synthesizer</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 src="https://unpkg.com/feather-icons"></script>
+    <style>
+        :root {
+            --quantum-purple: #6e45e2;
+            --quantum-teal: #88d3ce;
+            --quantum-pink: #ff2a6d;
+            --quantum-blue: #05d9e8;
+            --quantum-dark: #0c0f1f;
+            --quantum-darker: #080a1a;
+        }
+        .quantum-bg {
+            background: linear-gradient(135deg, var(--quantum-dark), var(--quantum-darker));
+            position: relative;
+            overflow: hidden;
+        }
+        .quantum-bg::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 10% 20%, rgba(110, 69, 226, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(136, 211, 206, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 50% 50%, rgba(5, 217, 232, 0.05) 0%, transparent 30%);
+            z-index: 0;
+        }
+        .quantum-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            transition: all 0.3s ease;
+        }
+        .quantum-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(110, 69, 226, 0.2);
+            border-color: rgba(110, 69, 226, 0.3);
+        }
+        .quantum-header {
+            background: rgba(12, 15, 31, 0.8);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .quantum-nav a {
+            position: relative;
+            padding: 8px 0;
+        }
+        .quantum-nav a::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--quantum-blue);
+            transition: width 0.3s ease;
+        }
+        .quantum-nav a:hover::after {
+            width: 100%;
+        }
+        .endpoint-card {
+            background: rgba(26, 30, 45, 0.7);
+            border: 1px solid rgba(110, 69, 226, 0.2);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+        .method-badge {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-weight: bold;
+            font-size: 0.875rem;
+        }
+        .get { background: rgba(5, 217, 232, 0.2); color: #05d9e8; }
+        .post { background: rgba(110, 69, 226, 0.2); color: #6e45e2; }
+        .put { background: rgba(255, 42, 109, 0.2); color: #ff2a6d; }
+        .delete { background: rgba(255, 90, 90, 0.2); color: #ff5a5a; }
+        .param-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 1rem 0;
+        }
+        .param-table th {
+            background: rgba(110, 69, 226, 0.1);
+            padding: 0.75rem;
+            text-align: left;
+        }
+        .param-table td {
+            padding: 0.75rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .code-block {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 8px;
+            padding: 1rem;
+            font-family: monospace;
+            overflow-x: auto;
+            margin: 1rem 0;
+        }
+        .token {
+            display: inline-block;
+            padding: 0.125rem 0.25rem;
+            border-radius: 4px;
+            font-size: 0.875rem;
+        }
+        .token.required { background: rgba(255, 42, 109, 0.2); color: #ff2a6d; }
+        .token.optional { background: rgba(5, 217, 232, 0.2); color: #05d9e8; }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="quantum-bg min-h-screen">
+        <!-- Header -->
+        <header class="quantum-header container mx-auto py-4 px-4">
+            <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
+                <nav class="quantum-nav">
+                    <ul class="flex space-x-8">
+                        <li><a href="index.html" class="hover:text-purple-300 font-medium">Home</a></li>
+                        <li><a href="synthesizer.html" class="hover:text-purple-300 font-medium">Synthesizer</a></li>
+                        <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
+                        <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
+                        <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
+                        <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <!-- API Documentation Section -->
+        <section class="container mx-auto py-16 px-4">
+            <h1 class="text-4xl font-bold text-center mb-4">API Documentation</h1>
+            <p class="text-xl text-center mb-12 text-gray-300">Integrate quantum music generation into your applications</p>
+            <div class="max-w-4xl mx-auto">
+                <div class="quantum-card p-8 mb-12">
+                    <h2 class="text-2xl font-bold mb-4">Getting Started</h2>
+                    <p class="mb-4">The Quantum Music API allows developers to integrate quantum-generated music into their applications. All endpoints require authentication with an API key.</p>
+                    <div class="bg-gray-800 p-4 rounded-lg mt-6">
+                        <h3 class="font-bold mb-2">Base URL</h3>
+                        <div class="code-block">https://api.quantummusic.io/v1</div>
+                    </div>
+                    <div class="bg-gray-800 p-4 rounded-lg mt-6">
+                        <h3 class="font-bold mb-2">Authentication</h3>
+                        <p class="mb-2">Include your API key in the Authorization header:</p>
+                        <div class="code-block">Authorization: Bearer YOUR_API_KEY</div>
+                    </div>
+                </div>
+                <div class="mb-12">
+                    <h2 class="text-3xl font-bold mb-6">Endpoints</h2>
+                    <!-- Generate Music Endpoint -->
+                    <div class="endpoint-card">
+                        <div class="flex items-center justify-between mb-4">
+                            <h3 class="text-xl font-bold">Generate Music</h3>
+                            <span class="method-badge post">POST</span>
+                        </div>
+                        <div class="code-block mb-4">/music/generate</div>
+                        <p class="mb-4">Generates a new piece of quantum music based on specified parameters.</p>
+                        <h4 class="font-bold mb-2">Parameters</h4>
+                        <table class="param-table mb-4">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Type</th>
+                                    <th>Required</th>
+                                    <th>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>mode</td>
+                                    <td>string</td>
+                                    <td><span class="token required">Required</span></td>
+                                    <td>Music mode (cinematic, ambient, electronic, classical)</td>
+                                </tr>
+                                <tr>
+                                    <td>complexity</td>
+                                    <td>number</td>
+                                    <td><span class="token required">Required</span></td>
+                                    <td>Complexity factor (0.0 - 1.0)</td>
+                                </tr>
+                                <tr>
+                                    <td>duration</td>
+                                    <td>integer</td>
+                                    <td><span class="token required">Required</span></td>
+                                    <td>Duration in seconds (5-60)</td>
+                                </tr>
+                                <tr>
+                                    <td>harmonic_richness</td>
+                                    <td>integer</td>
+                                    <td><span class="token optional">Optional</span></td>
+                                    <td>Harmonic richness level (0-100, default: 75)</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <h4 class="font-bold mb-2">Response</h4>
+                        <div class="code-block">
+{<br>
+&nbsp;&nbsp;"id": "qm_abc123xyz",<br>
+&nbsp;&nbsp;"status": "processing",<br>
+&nbsp;&nbsp;"estimated_completion": "2023-06-15T14:30:00Z"<br>
+}
+                        </div>
+                    </div>
+                    <!-- Get Music Status Endpoint -->
+                    <div class="endpoint-card">
+                        <div class="flex items-center justify-between mb-4">
+                            <h3 class="text-xl font-bold">Get Music Status</h3>
+                            <span class="method-badge get">GET</span>
+                        </div>
+                        <div class="code-block mb-4">/music/status/{id}</div>
+                        <p class="mb-4">Retrieves the status of a music generation request.</p>
+                        <h4 class="font-bold mb-2">Parameters</h4>
+                        <table class="param-table mb-4">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Type</th>
+                                    <th>Required</th>
+                                    <th>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>id</td>
+                                    <td>string</td>
+                                    <td><span class="token required">Required</span></td>
+                                    <td>Music generation ID</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <h4 class="font-bold mb-2">Response</h4>
+                        <div class="code-block">
+{<br>
+&nbsp;&nbsp;"id": "qm_abc123xyz",<br>
+&nbsp;&nbsp;"status": "completed",<br>
+&nbsp;&nbsp;"download_url": "https://api.quantummusic.io/v1/music/download/qm_abc123xyz"<br>
+}
+                        </div>
+                    </div>
+                    <!-- Get Quantum Data Endpoint -->
+                    <div class="endpoint-card">
+                        <div class="flex items-center justify-between mb-4">
+                            <h3 class="text-xl font-bold">Get Quantum Data</h3>
+                            <span class="method-badge get">GET</span>
+                        </div>
+                        <div class="code-block mb-4">/quantum/data/{id}</div>
+                        <p class="mb-4">Retrieves quantum state information for a generated piece.</p>
+                        <h4 class="font-bold mb-2">Parameters</h4>
+                        <table class="param-table mb-4">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Type</th>
+                                    <th>Required</th>
+                                    <th>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>id</td>
+                                    <td>string</td>
+                                    <td><span class="token required">Required</span></td>
+                                    <td>Music generation ID</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <h4 class="font-bold mb-2">Response</h4>
+                        <div class="code-block">
+{<br>
+&nbsp;&nbsp;"id": "qm_abc123xyz",<br>
+&nbsp;&nbsp;"qubits": 4,<br>
+&nbsp;&nbsp;"entanglement": "GHZ",<br>
+&nbsp;&nbsp;"measurements": [<br>
+&nbsp;&nbsp;&nbsp;&nbsp;{"basis": "X", "result": 0},<br>
+&nbsp;&nbsp;&nbsp;&nbsp;{"basis": "Y", "result": 1}<br>
+&nbsp;&nbsp;]<br>
+}
+                        </div>
+                    </div>
+                </div>
+                <div class="quantum-card p-8">
+                    <h2 class="text-2xl font-bold mb-4">Rate Limits</h2>
+                    <p>The API has the following rate limits:</p>
+                    <ul class="list-disc pl-6 mt-2 space-y-2">
+                        <li>Free tier: 10 requests per minute</li>
+                        <li>Pro tier: 100 requests per minute</li>
+                        <li>Enterprise tier: 1000 requests per minute</li>
+                    </ul>
+                    <p class="mt-4">Exceeding these limits will result in a 429 (Too Many Requests) response.</p>
+                </div>
+            </div>
+        </section>
+        <!-- Footer -->
+        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-800">
+            <p class="text-gray-400">Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
+        </footer>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -10,83 +10,217 @@
     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
         .quantum-bg {
-            background: linear-gradient(135deg, #6e45e2, #88d3ce);
-            background-size: 400% 400%;
-            animation: gradient 15s ease infinite;
         }
-        @keyframes gradient {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
         }
-        .pulse {
-            animation: pulse 2s infinite;
         }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
         }
-        .hovered-element {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
-        .hovered-element:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         }
-        .stylized-font {
-            font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
-            letter-spacing: 1px;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen">
-    <div class="quantum-bg min-h-screen hovered-element">
         <!-- Header -->
-        <header class="container mx-auto py-6 px-4 hovered-element">
             <div class="flex justify-between items-center">
-                <h1 class="text-3xl font-bold stylized-font">Quantum Music Synthesizer</h1>
-                <nav>
-                    <ul class="flex space-x-6">
-                        <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
-                        <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
-                        <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
-                        <li><a href="visualization.html" class="hover:text-purple-300">Visualization</a></li>
                     </ul>
                 </nav>
-</div>
         </header>
         <!-- Hero Section -->
-        <section class="container mx-auto py-16 px-4 text-center hovered-element">
-            <h2 class="text-5xl font-bold mb-6 stylized-font">Create Music with Quantum Computing</h2>
-            <p class="text-xl mb-8 max-w-2xl mx-auto hovered-element">Harness the power of quantum entanglement to generate unique musical compositions</p>
-            <div class="pulse inline-block">
-                <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">
                     Start Synthesizing
                 </button>
             </div>
         </section>
         <!-- Features Section -->
-        <section class="container mx-auto py-16 px-4 hovered-element">
-            <h3 class="text-3xl font-bold text-center mb-12 stylized-font">How It Works</h3>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg hovered-element">
-                    <i data-feather="cpu" class="w-12 h-12 mb-4 text-purple-400"></i>
-                    <h4 class="text-xl font-bold mb-2 stylized-font">Quantum Circuits</h4>
-                    <p>Create complex musical patterns using quantum superposition and entanglement</p>
                 </div>
-                <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg hovered-element">
-                    <i data-feather="music" class="w-12 h-12 mb-4 text-purple-400"></i>
-                    <h4 class="text-xl font-bold mb-2 stylized-font">Sonic Sequences</h4>
-                    <p>Transform quantum measurements into rich, harmonic musical sequences</p>
                 </div>
-                <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg hovered-element">
-                    <i data-feather="zap" class="w-12 h-12 mb-4 text-purple-400"></i>
-                    <h4 class="text-xl font-bold mb-2 stylized-font">Real-time Synthesis</h4>
-                    <p>Generate and modify compositions in real-time with our quantum engine</p>
                 </div>
             </div>
         </section>
@@ -94,40 +228,32 @@
         <!-- Stats Section -->
         <section class="container mx-auto py-16 px-4">
             <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
-                <div class="hovered-element">
-                    <div class="text-4xl font-bold text-purple-400">99.5%</div>
-                    <div>Fidelity Score</div>
                 </div>
-                <div class="hovered-element">
-                    <div class="text-4xl font-bold text-purple-400">1024</div>
-                    <div>Quantum Shots</div>
                 </div>
-                <div class="hovered-element">
-                    <div class="text-4xl font-bold text-purple-400">5</div>
-                    <div>Note Motifs</div>
                 </div>
-                <div class="hovered-element">
-                    <div class="text-4xl font-bold text-purple-400">∞</div>
-                    <div>Possibilities</div>
                 </div>
             </div>
         </section>
         <!-- Footer -->
-        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-700">
-            <p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
         </footer>
     </div>
-<script>
         feather.replace();
-        anime({
-            targets: '.pulse',
-            scale: 1.05,
-            duration: 1000,
-            loop: true,
-            direction: 'alternate',
-            easing: 'easeInOutSine'
-        });
     </script>
 </body>
-</html>

     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
+        :root {
+            --quantum-purple: #6e45e2;
+            --quantum-teal: #88d3ce;
+            --quantum-pink: #ff2a6d;
+            --quantum-blue: #05d9e8;
+            --quantum-dark: #0c0f1f;
+            --quantum-darker: #080a1a;
+        }
         .quantum-bg {
+            background: linear-gradient(135deg, var(--quantum-dark), var(--quantum-darker));
+            position: relative;
+            overflow: hidden;
         }
+        .quantum-bg::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 10% 20%, rgba(110, 69, 226, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(136, 211, 206, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 50% 50%, rgba(5, 217, 232, 0.05) 0%, transparent 30%);
+            z-index: 0;
         }
+        .quantum-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            transition: all 0.3s ease;
         }
+        .quantum-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(110, 69, 226, 0.2);
+            border-color: rgba(110, 69, 226, 0.3);
         }
+        .quantum-btn {
+            background: linear-gradient(45deg, var(--quantum-purple), var(--quantum-teal));
+            border: none;
+            border-radius: 30px;
+            padding: 12px 30px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
         }
+        .quantum-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 20px rgba(110, 69, 226, 0.4);
+        }
+        .quantum-btn::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: rgba(255, 255, 255, 0.1);
+            transform: rotate(30deg);
+            transition: all 0.6s ease;
+        }
+        .quantum-btn:hover::after {
+            transform: rotate(30deg) translate(20%, 20%);
+        }
+        .quantum-header {
+            background: rgba(12, 15, 31, 0.8);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .quantum-nav a {
+            position: relative;
+            padding: 8px 0;
+        }
+        .quantum-nav a::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--quantum-blue);
+            transition: width 0.3s ease;
+        }
+        .quantum-nav a:hover::after {
+            width: 100%;
         }
+        .quantum-hero {
+            position: relative;
+            overflow: hidden;
+            border-radius: 20px;
+            margin-top: 2rem;
+        }
+        .quantum-hero::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, transparent, rgba(110, 69, 226, 0.1), transparent);
+            transform: rotate(30deg);
+            animation: shine 4s infinite;
+        }
+        @keyframes shine {
+            0% { transform: rotate(30deg) translate(-20%, -20%); }
+            100% { transform: rotate(30deg) translate(20%, 20%); }
+        }
+        .quantum-stat {
+            transition: all 0.3s ease;
+        }
+        .quantum-stat:hover {
+            transform: scale(1.05);
+        }
+        .quantum-stat-number {
+            font-size: 3rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, var(--quantum-purple), var(--quantum-teal));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .quantum-icon {
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 16px;
+            margin: 0 auto 20px;
+            background: rgba(110, 69, 226, 0.1);
+            border: 1px solid rgba(110, 69, 226, 0.2);
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen">
+    <div class="quantum-bg min-h-screen">
         <!-- Header -->
+        <header class="quantum-header container mx-auto py-4 px-4">
             <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
+                <nav class="quantum-nav">
+                    <ul class="flex space-x-8">
+                        <li><a href="index.html" class="hover:text-purple-300 font-medium">Home</a></li>
+                        <li><a href="synthesizer.html" class="hover:text-purple-300 font-medium">Synthesizer</a></li>
+                        <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
+                        <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
+                        <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
                     </ul>
                 </nav>
+            </div>
         </header>
         <!-- Hero Section -->
+        <section class="container mx-auto py-16 px-4">
+            <div class="quantum-hero quantum-card p-12 text-center">
+                <h2 class="text-5xl font-bold mb-6">Create Music with Quantum Computing</h2>
+                <p class="text-xl mb-8 max-w-2xl mx-auto">Harness the power of quantum entanglement to generate unique musical compositions</p>
+                <button class="quantum-btn text-white font-bold py-3 px-8 text-lg">
                     Start Synthesizing
                 </button>
             </div>
         </section>
         <!-- Features Section -->
+        <section class="container mx-auto py-16 px-4">
+            <h3 class="text-3xl font-bold text-center mb-12">How It Works</h3>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="quantum-card p-8">
+                    <div class="quantum-icon">
+                        <i data-feather="cpu" class="w-8 h-8 text-purple-400"></i>
+                    </div>
+                    <h4 class="text-xl font-bold mb-4 text-center">Quantum Circuits</h4>
+                    <p class="text-center">Create complex musical patterns using quantum superposition and entanglement</p>
                 </div>
+                <div class="quantum-card p-8">
+                    <div class="quantum-icon">
+                        <i data-feather="music" class="w-8 h-8 text-teal-400"></i>
+                    </div>
+                    <h4 class="text-xl font-bold mb-4 text-center">Sonic Sequences</h4>
+                    <p class="text-center">Transform quantum measurements into rich, harmonic musical sequences</p>
                 </div>
+                <div class="quantum-card p-8">
+                    <div class="quantum-icon">
+                        <i data-feather="zap" class="w-8 h-8 text-blue-400"></i>
+                    </div>
+                    <h4 class="text-xl font-bold mb-4 text-center">Real-time Synthesis</h4>
+                    <p class="text-center">Generate and modify compositions in real-time with our quantum engine</p>
                 </div>
             </div>
         </section>
         <!-- Stats Section -->
         <section class="container mx-auto py-16 px-4">
             <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+                <div class="quantum-stat quantum-card p-6">
+                    <div class="quantum-stat-number">99.5%</div>
+                    <div class="text-gray-300">Fidelity Score</div>
                 </div>
+                <div class="quantum-stat quantum-card p-6">
+                    <div class="quantum-stat-number">1024</div>
+                    <div class="text-gray-300">Quantum Shots</div>
                 </div>
+                <div class="quantum-stat quantum-card p-6">
+                    <div class="quantum-stat-number">5</div>
+                    <div class="text-gray-300">Note Motifs</div>
                 </div>
+                <div class="quantum-stat quantum-card p-6">
+                    <div class="quantum-stat-number">∞</div>
+                    <div class="text-gray-300">Possibilities</div>
                 </div>
             </div>
         </section>
         <!-- Footer -->
+        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-800">
+            <p class="text-gray-400">Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
         </footer>
     </div>
+    <script>
         feather.replace();
     </script>
 </body>
+</html>

quantum.html CHANGED Viewed

@@ -10,139 +10,241 @@
     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
         .quantum-bg {
-            background: linear-gradient(135deg, #6e45e2, #88d3ce);
-            background-size: 400% 400%;
-            animation: gradient 15s ease infinite;
         }
-        @keyframes gradient {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
         }
         .circuit-board {
-            background: #1a202c;
-            border-radius: 8px;
             padding: 20px;
             min-height: 300px;
             position: relative;
             overflow: hidden;
         }
         .circuit-line {
             position: absolute;
-            height: 2px;
-            background: #8b5cf6;
             transform-origin: left;
         }
         .quantum-gate {
             position: absolute;
             width: 50px;
             height: 50px;
-            background: #8b5cf6;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: bold;
             color: white;
         }
-        .hovered-element {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
-        .hovered-element:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         }
-        .stylized-font {
-            font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
-            letter-spacing: 1px;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen">
-    <div class="quantum-bg min-h-screen hovered-element">
         <!-- Header -->
-        <header class="container mx-auto py-6 px-4 hovered-element">
             <div class="flex justify-between items-center">
-                <h1 class="text-3xl font-bold stylized-font">Quantum Music Synthesizer</h1>
-                <nav>
-                    <ul class="flex space-x-6">
-                        <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
-                        <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
-                        <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
-                        <li><a href="visualization.html" class="hover:text-purple-300">Visualization</a></li>
                     </ul>
                 </nav>
-</div>
         </header>
         <!-- Quantum Operations Section -->
-        <section class="container mx-auto py-16 px-4 hovered-element">
-            <h2 class="text-4xl font-bold text-center mb-12 stylized-font">Quantum Operations</h2>
-            <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
-                <div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 hovered-element">
-                    <h3 class="text-2xl font-bold mb-4 stylized-font">Quantum Circuit</h3>
                     <div class="circuit-board">
                         <!-- Circuit visualization will be animated here -->
-                        <div class="circuit-line" style="top: 50px; left: 50px; width: 200px;"></div>
-                        <div class="circuit-line" style="top: 100px; left: 50px; width: 200px;"></div>
-                        <div class="circuit-line" style="top: 150px; left: 50px; width: 200px;"></div>
-                        <div class="quantum-gate" style="top: 35px; left: 100px;">H</div>
-                        <div class="quantum-gate" style="top: 85px; left: 150px;">X</div>
-                        <div class="quantum-gate" style="top: 135px; left: 200px;">Z</div>
                     </div>
                 </div>
-                <div class="space-y-8">
-                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hovered-element">
-                        <h3 class="text-xl font-bold mb-2 stylized-font">Superposition</h3>
                         <p>Quantum bits exist in multiple states simultaneously, creating rich harmonic possibilities.</p>
                     </div>
-                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hovered-element">
-                        <h3 class="text-xl font-bold mb-2 stylized-font">Entanglement</h3>
                         <p>Correlated quantum states produce complex musical relationships and patterns.</p>
                     </div>
-                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hovered-element">
-                        <h3 class="text-xl font-bold mb-2 stylized-font">Measurement</h3>
                         <p>Collapsing quantum states into musical notes through probabilistic outcomes.</p>
                     </div>
                 </div>
             </div>
-            <div class="max-w-4xl mx-auto mt-16 bg-gray-800 bg-opacity-50 rounded-xl p-8 hovered-element">
-                <h3 class="text-2xl font-bold mb-4 stylized-font">Quantum Parameters</h3>
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                    <div class="text-center hovered-element">
-                        <div class="text-4xl font-bold text-purple-400 mb-2">99.5%</div>
-                        <div>Adiabatic Success</div>
                     </div>
-                    <div class="text-center hovered-element">
-                        <div class="text-4xl font-bold text-purple-400 mb-2">Φ+</div>
-                        <div>Bell State</div>
                     </div>
-                    <div class="text-center hovered-element">
-                        <div class="text-4xl font-bold text-purple-400 mb-2">GHZ</div>
-                        <div>4-Qubit Entanglement</div>
                     </div>
                 </div>
             </div>
         </section>
         <!-- Footer -->
-        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-700">
-            <p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
         </footer>
     </div>
-<script>
         feather.replace();
         // Animate circuit lines
         anime({
             targets: '.circuit-line',
-            width: [0, 200],
             delay: anime.stagger(200),
             duration: 1000,
             easing: 'easeInOutQuad'
@@ -154,8 +256,10 @@
             scale: [0, 1],
             delay: anime.stagger(300, {start: 500}),
             duration: 800,
-            elasticity: 600
         });
     </script>
 </body>
-</html>

     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
+        :root {
+            --quantum-purple: #6e45e2;
+            --quantum-teal: #88d3ce;
+            --quantum-pink: #ff2a6d;
+            --quantum-blue: #05d9e8;
+            --quantum-dark: #0c0f1f;
+            --quantum-darker: #080a1a;
+        }
         .quantum-bg {
+            background: linear-gradient(135deg, var(--quantum-dark), var(--quantum-darker));
+            position: relative;
+            overflow: hidden;
+        }
+        .quantum-bg::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 10% 20%, rgba(110, 69, 226, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(136, 211, 206, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 50% 50%, rgba(5, 217, 232, 0.05) 0%, transparent 30%);
+            z-index: 0;
+        }
+        .quantum-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            transition: all 0.3s ease;
+        }
+        .quantum-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(110, 69, 226, 0.2);
+            border-color: rgba(110, 69, 226, 0.3);
+        }
+        .quantum-header {
+            background: rgba(12, 15, 31, 0.8);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .quantum-nav a {
+            position: relative;
+            padding: 8px 0;
+        }
+        .quantum-nav a::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--quantum-blue);
+            transition: width 0.3s ease;
         }
+        .quantum-nav a:hover::after {
+            width: 100%;
         }
         .circuit-board {
+            background: rgba(10, 12, 25, 0.7);
+            border-radius: 12px;
             padding: 20px;
             min-height: 300px;
             position: relative;
             overflow: hidden;
+            border: 1px solid rgba(110, 69, 226, 0.2);
+        }
+        .circuit-grid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background:
+                linear-gradient(rgba(110, 69, 226, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(110, 69, 226, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+            opacity: 0.3;
         }
         .circuit-line {
             position: absolute;
+            height: 3px;
+            background: linear-gradient(90deg, var(--quantum-purple), var(--quantum-teal));
             transform-origin: left;
+            border-radius: 2px;
         }
         .quantum-gate {
             position: absolute;
             width: 50px;
             height: 50px;
+            background: linear-gradient(135deg, var(--quantum-purple), var(--quantum-teal));
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: bold;
             color: white;
+            box-shadow: 0 0 15px rgba(110, 69, 226, 0.5);
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
         }
+        .quantum-gate:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 20px rgba(110, 69, 226, 0.8);
         }
+        .quantum-param {
+            transition: all 0.3s ease;
         }
+        .quantum-param:hover {
+            transform: scale(1.05);
+        }
+        .quantum-param-number {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, var(--quantum-purple), var(--quantum-teal));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen">
+    <div class="quantum-bg min-h-screen">
         <!-- Header -->
+        <header class="quantum-header container mx-auto py-4 px-4">
             <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
+                <nav class="quantum-nav">
+                    <ul class="flex space-x-8">
+                        <li><a href="index.html" class="hover:text-purple-300 font-medium">Home</a></li>
+                        <li><a href="synthesizer.html" class="hover:text-purple-300 font-medium">Synthesizer</a></li>
+                        <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
+                        <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
+                        <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
                     </ul>
                 </nav>
+            </div>
         </header>
         <!-- Quantum Operations Section -->
+        <section class="container mx-auto py-16 px-4">
+            <h2 class="text-4xl font-bold text-center mb-12">Quantum Operations</h2>
+            <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div class="quantum-card p-8">
+                    <h3 class="text-2xl font-bold mb-6 text-center">Quantum Circuit</h3>
                     <div class="circuit-board">
+                        <div class="circuit-grid"></div>
                         <!-- Circuit visualization will be animated here -->
+                        <div class="circuit-line" style="top: 60px; left: 50px; width: 250px;"></div>
+                        <div class="circuit-line" style="top: 120px; left: 50px; width: 250px;"></div>
+                        <div class="circuit-line" style="top: 180px; left: 50px; width: 250px;"></div>
+                        <div class="circuit-line" style="top: 240px; left: 50px; width: 250px;"></div>
+                        <div class="quantum-gate" style="top: 45px; left: 100px;">H</div>
+                        <div class="quantum-gate" style="top: 105px; left: 150px;">X</div>
+                        <div class="quantum-gate" style="top: 165px; left: 200px;">Z</div>
+                        <div class="quantum-gate" style="top: 225px; left: 250px;">CNOT</div>
                     </div>
                 </div>
+                <div class="space-y-6">
+                    <div class="quantum-card p-6">
+                        <h3 class="text-xl font-bold mb-3">Superposition</h3>
                         <p>Quantum bits exist in multiple states simultaneously, creating rich harmonic possibilities.</p>
                     </div>
+                    <div class="quantum-card p-6">
+                        <h3 class="text-xl font-bold mb-3">Entanglement</h3>
                         <p>Correlated quantum states produce complex musical relationships and patterns.</p>
                     </div>
+                    <div class="quantum-card p-6">
+                        <h3 class="text-xl font-bold mb-3">Measurement</h3>
                         <p>Collapsing quantum states into musical notes through probabilistic outcomes.</p>
                     </div>
+                    <div class="quantum-card p-6">
+                        <h3 class="text-xl font-bold mb-3">Interference</h3>
+                        <p>Constructive and destructive interference creates dynamic musical textures.</p>
+                    </div>
                 </div>
             </div>
+            <div class="max-w-6xl mx-auto mt-16 quantum-card p-8">
+                <h3 class="text-2xl font-bold mb-6 text-center">Quantum Parameters</h3>
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="quantum-param quantum-card p-6 text-center">
+                        <div class="quantum-param-number">99.5%</div>
+                        <div class="text-gray-300">Adiabatic Success</div>
                     </div>
+                    <div class="quantum-param quantum-card p-6 text-center">
+                        <div class="quantum-param-number">Φ+</div>
+                        <div class="text-gray-300">Bell State</div>
                     </div>
+                    <div class="quantum-param quantum-card p-6 text-center">
+                        <div class="quantum-param-number">GHZ</div>
+                        <div class="text-gray-300">4-Qubit Entanglement</div>
                     </div>
                 </div>
             </div>
         </section>
         <!-- Footer -->
+        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-800">
+            <p class="text-gray-400">Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
         </footer>
     </div>
+    <script>
         feather.replace();
         // Animate circuit lines
         anime({
             targets: '.circuit-line',
+            width: [0, 250],
             delay: anime.stagger(200),
             duration: 1000,
             easing: 'easeInOutQuad'
             scale: [0, 1],
             delay: anime.stagger(300, {start: 500}),
             duration: 800,
+            elasticity: 600,
+            loop: true,
+            direction: 'alternate'
         });
     </script>
 </body>
+</html>

synthesizer.html CHANGED Viewed

@@ -10,129 +10,276 @@
     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
         .quantum-bg {
-            background: linear-gradient(135deg, #6e45e2, #88d3ce);
-            background-size: 400% 400%;
-            animation: gradient 15s ease infinite;
         }
-        @keyframes gradient {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
         }
-        .waveform {
-            height: 200px;
-            background: rgba(0,0,0,0.3);
-            border-radius: 8px;
             position: relative;
             overflow: hidden;
         }
-        .wave {
             position: absolute;
             bottom: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(transparent 50%, rgba(139, 92, 246, 0.5) 50%);
-            background-size: 50px 100px;
         }
-        .hovered-element {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
-        .hovered-element:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         }
-        .stylized-font {
-            font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
-            letter-spacing: 1px;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen">
-    <div class="quantum-bg min-h-screen hovered-element">
         <!-- Header -->
-        <header class="container mx-auto py-6 px-4 hovered-element">
             <div class="flex justify-between items-center">
-                <h1 class="text-3xl font-bold stylized-font">Quantum Music Synthesizer</h1>
-                <nav>
-                    <ul class="flex space-x-6">
-                        <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
-                        <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
-                        <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
-                        <li><a href="visualization.html" class="hover:text-purple-300">Visualization</a></li>
                     </ul>
                 </nav>
-</div>
         </header>
         <!-- Synthesizer Section -->
-        <section class="container mx-auto py-16 px-4 hovered-element">
-            <h2 class="text-4xl font-bold text-center mb-12 stylized-font">Quantum Synthesizer</h2>
-            <div class="max-w-4xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl p-8 hovered-element">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                    <div class="hovered-element">
-                        <h3 class="text-2xl font-bold mb-4 stylized-font">Parameters</h3>
                         <div class="space-y-6">
-                            <div>
-                                <label class="block mb-2">Mode</label>
-                                <select class="w-full bg-gray-700 rounded p-2">
                                     <option>Cinematic</option>
                                     <option>Ambient</option>
                                     <option>Electronic</option>
                                     <option>Classical</option>
                                 </select>
                             </div>
-                            <div>
-                                <label class="block mb-2">Complexity Factor</label>
-                                <input type="range" min="0" max="1" step="0.01" value="0.5" class="w-full">
-                                <div class="flex justify-between text-sm">
                                     <span>Simple</span>
                                     <span>Complex</span>
                                 </div>
                             </div>
-                            <div>
-                                <label class="block mb-2">Duration (seconds)</label>
-                                <input type="range" min="5" max="60" step="5" value="20" class="w-full">
-                                <div class="flex justify-between text-sm">
                                     <span>5s</span>
                                     <span>60s</span>
                                 </div>
                             </div>
                         </div>
-                        <button class="mt-8 bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full w-full transition duration-300">
                             Generate Quantum Sequence
                         </button>
                     </div>
-                    <div class="hovered-element">
-                        <h3 class="text-2xl font-bold mb-4 stylized-font">Waveform</h3>
-                        <div class="waveform">
-                            <div class="wave"></div>
                         </div>
-                        <div class="mt-4 flex justify-center space-x-4">
-                            <button class="bg-green-600 hover:bg-green-700 text-white p-3 rounded-full">
                                 <i data-feather="play"></i>
                             </button>
-                            <button class="bg-yellow-600 hover:bg-yellow-700 text-white p-3 rounded-full">
                                 <i data-feather="pause"></i>
                             </button>
-                            <button class="bg-red-600 hover:bg-red-700 text-white p-3 rounded-full">
                                 <i data-feather="stop"></i>
                             </button>
                         </div>
                     </div>
                 </div>
-                <div class="mt-12 hovered-element">
-                    <h3 class="text-2xl font-bold mb-4 stylized-font">Generated Sequence</h3>
-                    <div class="bg-gray-900 rounded-lg p-4">
-                        <div class="flex flex-wrap gap-2">
-                            <div class="bg-purple-900 px-3 py-1 rounded">440.0 Hz</div>
-                            <div class="bg-purple-900 px-3 py-1 rounded">523.25 Hz</div>
-                            <div class="bg-purple-900 px-3 py-1 rounded">659.25 Hz</div>
-                            <div class="bg-purple-900 px-3 py-1 rounded">440.0 Hz</div>
-                            <div class="bg-purple-900 px-3 py-1 rounded">523.25 Hz</div>
                         </div>
                     </div>
                 </div>
@@ -140,19 +287,79 @@
         </section>
         <!-- Footer -->
-        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-700">
-            <p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
         </footer>
     </div>
-<script>
         feather.replace();
-        anime({
-            targets: '.wave',
-            backgroundPositionX: '50px',
-            duration: 1000,
-            loop: true,
-            easing: 'linear'
-        });
     </script>
 </body>
-</html>

     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
+        :root {
+            --quantum-purple: #6e45e2;
+            --quantum-teal: #88d3ce;
+            --quantum-pink: #ff2a6d;
+            --quantum-blue: #05d9e8;
+            --quantum-dark: #0c0f1f;
+            --quantum-darker: #080a1a;
+        }
         .quantum-bg {
+            background: linear-gradient(135deg, var(--quantum-dark), var(--quantum-darker));
+            position: relative;
+            overflow: hidden;
+        }
+        .quantum-bg::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 10% 20%, rgba(110, 69, 226, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(136, 211, 206, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 50% 50%, rgba(5, 217, 232, 0.05) 0%, transparent 30%);
+            z-index: 0;
         }
+        .quantum-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            transition: all 0.3s ease;
         }
+        .quantum-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(110, 69, 226, 0.2);
+            border-color: rgba(110, 69, 226, 0.3);
+        }
+        .quantum-header {
+            background: rgba(12, 15, 31, 0.8);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .quantum-nav a {
+            position: relative;
+            padding: 8px 0;
+        }
+        .quantum-nav a::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--quantum-blue);
+            transition: width 0.3s ease;
+        }
+        .quantum-nav a:hover::after {
+            width: 100%;
+        }
+        .waveform-container {
+            height: 250px;
+            background: rgba(10, 12, 25, 0.7);
+            border-radius: 12px;
             position: relative;
             overflow: hidden;
+            border: 1px solid rgba(110, 69, 226, 0.2);
         }
+        .waveform {
             position: absolute;
             bottom: 0;
             left: 0;
             width: 100%;
             height: 100%;
         }
+        .control-group {
+            margin-bottom: 1.5rem;
         }
+        .control-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+        .slider {
+            width: 100%;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+            outline: none;
+            -webkit-appearance: none;
         }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: var(--quantum-purple);
+            cursor: pointer;
+            box-shadow: 0 0 10px rgba(110, 69, 226, 0.5);
+        }
+        .quantum-btn {
+            background: linear-gradient(45deg, var(--quantum-purple), var(--quantum-teal));
+            border: none;
+            border-radius: 30px;
+            padding: 12px 20px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            width: 100%;
+            color: white;
+        }
+        .quantum-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 20px rgba(110, 69, 226, 0.4);
+        }
+        .control-btn {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(110, 69, 226, 0.2);
+            border: 1px solid rgba(110, 69, 226, 0.3);
+            color: white;
+            transition: all 0.3s ease;
+        }
+        .control-btn:hover {
+            background: rgba(110, 69, 226, 0.4);
+            transform: scale(1.1);
+        }
+        .sequence-item {
+            background: rgba(110, 69, 226, 0.2);
+            border: 1px solid rgba(110, 69, 226, 0.3);
+            border-radius: 8px;
+            padding: 8px 16px;
+            transition: all 0.3s ease;
+        }
+        .sequence-item:hover {
+            background: rgba(110, 69, 226, 0.3);
+            transform: translateY(-2px);
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen">
+    <div class="quantum-bg min-h-screen">
         <!-- Header -->
+        <header class="quantum-header container mx-auto py-4 px-4">
             <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
+                <nav class="quantum-nav">
+                    <ul class="flex space-x-8">
+                        <li><a href="index.html" class="hover:text-purple-300 font-medium">Home</a></li>
+                        <li><a href="synthesizer.html" class="hover:text-purple-300 font-medium">Synthesizer</a></li>
+                        <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
+                        <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
+                        <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
                     </ul>
                 </nav>
+            </div>
         </header>
         <!-- Synthesizer Section -->
+        <section class="container mx-auto py-16 px-4">
+            <h2 class="text-4xl font-bold text-center mb-12">Quantum Synthesizer</h2>
+            <div class="max-w-6xl mx-auto quantum-card p-8">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                    <div>
+                        <h3 class="text-2xl font-bold mb-6">Parameters</h3>
                         <div class="space-y-6">
+                            <div class="control-group">
+                                <label class="control-label">Mode</label>
+                                <select class="w-full bg-gray-800 rounded-lg p-3 border border-gray-700 focus:border-purple-500 focus:outline-none">
                                     <option>Cinematic</option>
                                     <option>Ambient</option>
                                     <option>Electronic</option>
                                     <option>Classical</option>
+                                    <option>Experimental</option>
                                 </select>
                             </div>
+                            <div class="control-group">
+                                <label class="control-label">Complexity Factor</label>
+                                <input type="range" min="0" max="1" step="0.01" value="0.5" class="slider">
+                                <div class="flex justify-between text-sm mt-2">
                                     <span>Simple</span>
                                     <span>Complex</span>
                                 </div>
                             </div>
+                            <div class="control-group">
+                                <label class="control-label">Duration (seconds)</label>
+                                <input type="range" min="5" max="60" step="5" value="20" class="slider">
+                                <div class="flex justify-between text-sm mt-2">
                                     <span>5s</span>
                                     <span>60s</span>
                                 </div>
                             </div>
+                            <div class="control-group">
+                                <label class="control-label">Harmonic Richness</label>
+                                <input type="range" min="0" max="100" step="1" value="75" class="slider">
+                                <div class="flex justify-between text-sm mt-2">
+                                    <span>Minimal</span>
+                                    <span>Rich</span>
+                                </div>
+                            </div>
                         </div>
+                        <button class="mt-8 quantum-btn">
                             Generate Quantum Sequence
                         </button>
                     </div>
+                    <div>
+                        <h3 class="text-2xl font-bold mb-6">Waveform</h3>
+                        <div class="waveform-container">
+                            <div class="waveform" id="waveform"></div>
                         </div>
+                        <div class="mt-6 flex justify-center space-x-6">
+                            <button class="control-btn">
                                 <i data-feather="play"></i>
                             </button>
+                            <button class="control-btn">
                                 <i data-feather="pause"></i>
                             </button>
+                            <button class="control-btn">
                                 <i data-feather="stop"></i>
                             </button>
+                            <button class="control-btn">
+                                <i data-feather="rotate-ccw"></i>
+                            </button>
                         </div>
                     </div>
                 </div>
+                <div class="mt-12">
+                    <h3 class="text-2xl font-bold mb-6">Generated Sequence</h3>
+                    <div class="bg-gray-800/50 rounded-xl p-6">
+                        <div class="flex flex-wrap gap-3">
+                            <div class="sequence-item">440.0 Hz</div>
+                            <div class="sequence-item">523.25 Hz</div>
+                            <div class="sequence-item">659.25 Hz</div>
+                            <div class="sequence-item">440.0 Hz</div>
+                            <div class="sequence-item">523.25 Hz</div>
+                            <div class="sequence-item">783.99 Hz</div>
+                            <div class="sequence-item">523.25 Hz</div>
+                            <div class="sequence-item">440.0 Hz</div>
                         </div>
                     </div>
                 </div>
         </section>
         <!-- Footer -->
+        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-800">
+            <p class="text-gray-400">Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
         </footer>
     </div>
+    <script>
         feather.replace();
+        // Create waveform visualization
+        function createWaveform() {
+            const waveform = document.getElementById('waveform');
+            waveform.innerHTML = '';
+            // Create SVG for waveform
+            const svgNS = "http://www.w3.org/2000/svg";
+            const svg = document.createElementNS(svgNS, "svg");
+            svg.setAttribute("width", "100%");
+            svg.setAttribute("height", "100%");
+            // Create path for waveform
+            const path = document.createElementNS(svgNS, "path");
+            let d = "M 0 125 ";
+            for (let i = 0; i <= 100; i++) {
+                const x = i * 10;
+                const y = 125 + Math.sin(i * 0.2) * 50 + Math.sin(i * 0.5) * 30;
+                d += `L ${x} ${y} `;
+            }
+            path.setAttribute("d", d);
+            path.setAttribute("stroke", "url(#waveGradient)");
+            path.setAttribute("stroke-width", "2");
+            path.setAttribute("fill", "none");
+            // Create gradient
+            const defs = document.createElementNS(svgNS, "defs");
+            const gradient = document.createElementNS(svgNS, "linearGradient");
+            gradient.setAttribute("id", "waveGradient");
+            gradient.setAttribute("x1", "0%");
+            gradient.setAttribute("y1", "0%");
+            gradient.setAttribute("x2", "100%");
+            gradient.setAttribute("y2", "0%");
+            const stop1 = document.createElementNS(svgNS, "stop");
+            stop1.setAttribute("offset", "0%");
+            stop1.setAttribute("stop-color", "#6e45e2");
+            const stop2 = document.createElementNS(svgNS, "stop");
+            stop2.setAttribute("offset", "100%");
+            stop2.setAttribute("stop-color", "#88d3ce");
+            gradient.appendChild(stop1);
+            gradient.appendChild(stop2);
+            defs.appendChild(gradient);
+            svg.appendChild(defs);
+            svg.appendChild(path);
+            waveform.appendChild(svg);
+            // Animate waveform
+            anime({
+                targets: path,
+                d: [
+                    {value: d},
+                    {value: d.replace(/L (\d+) (\d+(\.\d+)?)/g, (match, x, y) => `L ${x} ${125 + Math.sin(x * 0.2 + 2) * 50 + Math.sin(x * 0.5 + 2) * 30}`)}
+                ],
+                duration: 2000,
+                loop: true,
+                easing: 'linear'
+            });
+        }
+        // Initialize waveform when page loads
+        window.addEventListener('load', createWaveform);
     </script>
 </body>
+</html>

visualization.html CHANGED Viewed

@@ -11,117 +11,236 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <style>
         .quantum-bg {
-            background: linear-gradient(135deg, #6e45e2, #88d3ce);
-            background-size: 400% 400%;
-            animation: gradient 15s ease infinite;
         }
-        @keyframes gradient {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
         }
-        .hovered-element {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
-        .hovered-element:hover {
             transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         }
-        .stylized-font {
-            font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
-            letter-spacing: 1px;
         }
         #visualization-container {
             width: 100%;
             height: 500px;
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: 8px;
             position: relative;
             overflow: hidden;
         }
-        .controls {
-            background: rgba(31, 41, 55, 0.7);
-            border-radius: 8px;
-            padding: 1rem;
         }
-        .note-info {
-            background: rgba(31, 41, 55, 0.7);
-            border-radius: 8px;
-            padding: 1rem;
-            min-height: 100px;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen">
-    <div class="quantum-bg min-h-screen hovered-element">
         <!-- Header -->
-        <header class="container mx-auto py-6 px-4 hovered-element">
             <div class="flex justify-between items-center">
-                <h1 class="text-3xl font-bold stylized-font">Quantum Music Synthesizer</h1>
-                <nav>
-                    <ul class="flex space-x-6">
-                        <li><a href="index.html" class="hover:text-purple-300">Home</a></li>
-                        <li><a href="synthesizer.html" class="hover:text-purple-300">Synthesizer</a></li>
-                        <li><a href="quantum.html" class="hover:text-purple-300">Quantum</a></li>
-                        <li><a href="visualization.html" class="hover:text-purple-300">Visualization</a></li>
                     </ul>
                 </nav>
             </div>
         </header>
         <!-- Visualization Section -->
-        <section class="container mx-auto py-16 px-4 hovered-element">
-            <h2 class="text-4xl font-bold text-center mb-12 stylized-font">3D Note Visualization</h2>
-            <div class="max-w-6xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl p-8 hovered-element">
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
-                    <div class="lg:col-span-2">
                         <div id="visualization-container"></div>
                     </div>
                     <div class="space-y-6">
-                        <div class="controls">
-                            <h3 class="text-xl font-bold mb-4 stylized-font">Controls</h3>
-                            <div class="space-y-4">
                                 <div>
                                     <label class="block mb-2">Rotation Speed</label>
-                                    <input type="range" id="rotation-speed" min="0" max="2" step="0.1" value="0.5" class="w-full">
                                 </div>
                                 <div>
                                     <label class="block mb-2">Point Size</label>
-                                    <input type="range" id="point-size" min="1" max="10" step="0.5" value="3" class="w-full">
                                 </div>
                                 <div>
-                                    <button id="reset-view" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded w-full">
                                         Reset View
                                     </button>
                                 </div>
                             </div>
                         </div>
-                        <div class="note-info">
-                            <h3 class="text-xl font-bold mb-4 stylized-font">Selected Note</h3>
                             <div id="note-details">
-                                <p>Click on a note to see details</p>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="mt-8">
-                    <h3 class="text-2xl font-bold mb-4 stylized-font">Visualization Legend</h3>
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                        <div class="bg-gray-700 p-4 rounded-lg">
-                            <h4 class="font-bold mb-2">X-Axis: Frequency</h4>
-                            <p>Position represents note frequency (Hz)</p>
                         </div>
-                        <div class="bg-gray-700 p-4 rounded-lg">
-                            <h4 class="font-bold mb-2">Y-Axis: Amplitude</h4>
-                            <p>Height represents note volume</p>
                         </div>
-                        <div class="bg-gray-700 p-4 rounded-lg">
-                            <h4 class="font-bold mb-2">Z-Axis: Time</h4>
-                            <p>Depth represents note sequence timing</p>
                         </div>
                     </div>
                 </div>
@@ -129,8 +248,8 @@
         </section>
         <!-- Footer -->
-        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-700">
-            <p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
         </footer>
     </div>
@@ -141,20 +260,20 @@
         let scene, camera, renderer, points;
         let rotationSpeed = 0.5;
         let pointSize = 3;
         let noteData = [];
         function init() {
             // Create scene
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x1a202c);
             // Create camera
             camera = new THREE.PerspectiveCamera(75,
                 document.getElementById('visualization-container').clientWidth /
                 document.getElementById('visualization-container').clientHeight,
                 0.1, 1000);
-            camera.position.z = 30;
-            camera.position.y = 10;
             // Create renderer
             renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -172,12 +291,20 @@
             directionalLight.position.set(20, 20, 20);
             scene.add(directionalLight);
             // Generate sample note data
             generateNoteData();
             // Create 3D points
             createPoints();
             // Add axes helper
             const axesHelper = new THREE.AxesHelper(20);
             scene.add(axesHelper);
@@ -194,13 +321,17 @@
             const baseNotes = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25]; // C4 to C5
             const durations = [0.5, 1.0, 1.5, 2.0];
-            for (let i = 0; i < 50; i++) {
                 noteData.push({
-                    frequency: baseNotes[Math.floor(Math.random() * baseNotes.length)] + (Math.random() * 100),
                     amplitude: Math.random(),
                     duration: durations[Math.floor(Math.random() * durations.length)],
-                    time: i * 0.5,
-                    color: new THREE.Color(Math.random() * 0xffffff)
                 });
             }
         }
@@ -213,16 +344,17 @@
             const maxFreq = Math.max(...noteData.map(n => n.frequency));
             const minFreq = Math.min(...noteData.map(n => n.frequency));
             const maxTime = Math.max(...noteData.map(n => n.time));
             for (let i = 0; i < noteData.length; i++) {
-                // Map frequency to X-axis (0-20)
-                positions[i * 3] = ((noteData[i].frequency - minFreq) / (maxFreq - minFreq)) * 20 - 10;
-                // Map amplitude to Y-axis (0-20)
-                positions[i * 3 + 1] = noteData[i].amplitude * 20;
-                // Map time to Z-axis (0-20)
-                positions[i * 3 + 2] = (noteData[i].time / maxTime) * 20 - 10;
                 // Set colors
                 colors[i * 3] = noteData[i].color.r;
@@ -240,7 +372,8 @@
                 size: pointSize,
                 vertexColors: true,
                 transparent: true,
-                opacity: 0.9
             });
             // Create points
@@ -260,9 +393,14 @@
                 points.material.size = pointSize;
             });
             // Reset view button
             document.getElementById('reset-view').addEventListener('click', function() {
-                camera.position.set(0, 10, 30);
                 camera.lookAt(0, 0, 0);
             });
@@ -297,10 +435,18 @@
                     const index = intersects[0].index;
                     const note = noteData[index];
                     document.getElementById('note-details').innerHTML = `
-                        <p><strong>Frequency:</strong> ${note.frequency.toFixed(2)} Hz</p>
-                        <p><strong>Amplitude:</strong> ${(note.amplitude * 100).toFixed(0)}%</p>
-                        <p><strong>Duration:</strong> ${note.duration} seconds</p>
-                        <p><strong>Time:</strong> ${note.time.toFixed(1)} seconds</p>
                     `;
                 }
             });
@@ -311,7 +457,16 @@
             // Rotate the entire scene
             if (points) {
-                points.rotation.y += 0.005 * rotationSpeed;
             }
             renderer.render(scene, camera);
@@ -321,4 +476,4 @@
         window.addEventListener('load', init);
     </script>
 </body>
-</html>

     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <style>
+        :root {
+            --quantum-purple: #6e45e2;
+            --quantum-teal: #88d3ce;
+            --quantum-pink: #ff2a6d;
+            --quantum-blue: #05d9e8;
+            --quantum-dark: #0c0f1f;
+            --quantum-darker: #080a1a;
+        }
         .quantum-bg {
+            background: linear-gradient(135deg, var(--quantum-dark), var(--quantum-darker));
+            position: relative;
+            overflow: hidden;
         }
+        .quantum-bg::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 10% 20%, rgba(110, 69, 226, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(136, 211, 206, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 50% 50%, rgba(5, 217, 232, 0.05) 0%, transparent 30%);
+            z-index: 0;
         }
+        .quantum-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            transition: all 0.3s ease;
         }
+        .quantum-card:hover {
             transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(110, 69, 226, 0.2);
+            border-color: rgba(110, 69, 226, 0.3);
         }
+        .quantum-header {
+            background: rgba(12, 15, 31, 0.8);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .quantum-nav a {
+            position: relative;
+            padding: 8px 0;
+        }
+        .quantum-nav a::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--quantum-blue);
+            transition: width 0.3s ease;
         }
+        .quantum-nav a:hover::after {
+            width: 100%;
+        }
         #visualization-container {
             width: 100%;
             height: 500px;
+            background: rgba(10, 12, 25, 0.7);
+            border-radius: 12px;
             position: relative;
             overflow: hidden;
+            border: 1px solid rgba(110, 69, 226, 0.2);
+        }
+        .control-panel {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 1.5rem;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+        .legend-color {
+            width: 20px;
+            height: 20px;
+            border-radius: 4px;
+            margin-right: 10px;
+        }
+        .slider {
+            width: 100%;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+            outline: none;
+            -webkit-appearance: none;
         }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: var(--quantum-purple);
+            cursor: pointer;
+            box-shadow: 0 0 10px rgba(110, 69, 226, 0.5);
         }
+        .quantum-btn {
+            background: linear-gradient(45deg, var(--quantum-purple), var(--quantum-teal));
+            border: none;
+            border-radius: 30px;
+            padding: 10px 20px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            color: white;
+            width: 100%;
+        }
+        .quantum-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 20px rgba(110, 69, 226, 0.4);
+        }
+        .note-detail {
+            background: rgba(110, 69, 226, 0.1);
+            border-left: 3px solid var(--quantum-purple);
+            padding: 12px;
+            border-radius: 0 8px 8px 0;
+            margin-bottom: 10px;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen">
+    <div class="quantum-bg min-h-screen">
         <!-- Header -->
+        <header class="quantum-header container mx-auto py-4 px-4">
             <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
+                <nav class="quantum-nav">
+                    <ul class="flex space-x-8">
+                        <li><a href="index.html" class="hover:text-purple-300 font-medium">Home</a></li>
+                        <li><a href="synthesizer.html" class="hover:text-purple-300 font-medium">Synthesizer</a></li>
+                        <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
+                        <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
+                        <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
                     </ul>
                 </nav>
             </div>
         </header>
         <!-- Visualization Section -->
+        <section class="container mx-auto py-16 px-4">
+            <h2 class="text-4xl font-bold text-center mb-12">3D Note Visualization</h2>
+            <div class="max-w-7xl mx-auto quantum-card p-8">
+                <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-8">
+                    <div class="lg:col-span-3">
                         <div id="visualization-container"></div>
                     </div>
                     <div class="space-y-6">
+                        <div class="control-panel">
+                            <h3 class="text-xl font-bold mb-4">Controls</h3>
+                            <div class="space-y-5">
                                 <div>
                                     <label class="block mb-2">Rotation Speed</label>
+                                    <input type="range" id="rotation-speed" min="0" max="2" step="0.1" value="0.5" class="slider">
                                 </div>
                                 <div>
                                     <label class="block mb-2">Point Size</label>
+                                    <input type="range" id="point-size" min="1" max="10" step="0.5" value="3" class="slider">
+                                </div>
+                                <div>
+                                    <label class="block mb-2">Animation Speed</label>
+                                    <input type="range" id="animation-speed" min="0.1" max="2" step="0.1" value="1" class="slider">
                                 </div>
                                 <div>
+                                    <button id="reset-view" class="quantum-btn">
                                         Reset View
                                     </button>
                                 </div>
                             </div>
                         </div>
+                        <div class="control-panel">
+                            <h3 class="text-xl font-bold mb-4">Selected Note</h3>
                             <div id="note-details">
+                                <p class="text-gray-400">Click on a note to see details</p>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="mt-8">
+                    <h3 class="text-2xl font-bold mb-6">Visualization Legend</h3>
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div class="legend-item">
+                            <div class="legend-color" style="background: linear-gradient(to right, #6e45e2, #88d3ce);"></div>
+                            <div>
+                                <h4 class="font-bold">X-Axis: Frequency</h4>
+                                <p class="text-sm text-gray-400">Position represents note frequency (Hz)</p>
+                            </div>
                         </div>
+                        <div class="legend-item">
+                            <div class="legend-color" style="background: linear-gradient(to right, #ff2a6d, #d10068);"></div>
+                            <div>
+                                <h4 class="font-bold">Y-Axis: Amplitude</h4>
+                                <p class="text-sm text-gray-400">Height represents note volume</p>
+                            </div>
                         </div>
+                        <div class="legend-item">
+                            <div class="legend-color" style="background: linear-gradient(to right, #05d9e8, #00a8b5);"></div>
+                            <div>
+                                <h4 class="font-bold">Z-Axis: Time</h4>
+                                <p class="text-sm text-gray-400">Depth represents note sequence timing</p>
+                            </div>
                         </div>
                     </div>
                 </div>
         </section>
         <!-- Footer -->
+        <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-800">
+            <p class="text-gray-400">Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
         </footer>
     </div>
         let scene, camera, renderer, points;
         let rotationSpeed = 0.5;
         let pointSize = 3;
+        let animationSpeed = 1;
         let noteData = [];
         function init() {
             // Create scene
             scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x0c0f1f);
             // Create camera
             camera = new THREE.PerspectiveCamera(75,
                 document.getElementById('visualization-container').clientWidth /
                 document.getElementById('visualization-container').clientHeight,
                 0.1, 1000);
+            camera.position.set(0, 15, 30);
             // Create renderer
             renderer = new THREE.WebGLRenderer({ antialias: true });
             directionalLight.position.set(20, 20, 20);
             scene.add(directionalLight);
+            // Add subtle fog
+            scene.fog = new THREE.Fog(0x0c0f1f, 20, 100);
             // Generate sample note data
             generateNoteData();
             // Create 3D points
             createPoints();
+            // Add grid helper
+            const gridHelper = new THREE.GridHelper(40, 20, 0x444444, 0x222222);
+            gridHelper.position.y = -5;
+            scene.add(gridHelper);
             // Add axes helper
             const axesHelper = new THREE.AxesHelper(20);
             scene.add(axesHelper);
             const baseNotes = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25]; // C4 to C5
             const durations = [0.5, 1.0, 1.5, 2.0];
+            for (let i = 0; i < 100; i++) {
                 noteData.push({
+                    frequency: baseNotes[Math.floor(Math.random() * baseNotes.length)] + (Math.random() * 200),
                     amplitude: Math.random(),
                     duration: durations[Math.floor(Math.random() * durations.length)],
+                    time: i * 0.3,
+                    color: new THREE.Color(
+                        0.5 + 0.5 * Math.sin(i * 0.1),
+                        0.3 + 0.3 * Math.cos(i * 0.15),
+                        0.7 + 0.3 * Math.sin(i * 0.2)
+                    )
                 });
             }
         }
             const maxFreq = Math.max(...noteData.map(n => n.frequency));
             const minFreq = Math.min(...noteData.map(n => n.frequency));
             const maxTime = Math.max(...noteData.map(n => n.time));
+            const maxAmplitude = Math.max(...noteData.map(n => n.amplitude));
             for (let i = 0; i < noteData.length; i++) {
+                // Map frequency to X-axis (-20 to 20)
+                positions[i * 3] = ((noteData[i].frequency - minFreq) / (maxFreq - minFreq)) * 40 - 20;
+                // Map amplitude to Y-axis (0 to 30)
+                positions[i * 3 + 1] = (noteData[i].amplitude / maxAmplitude) * 30;
+                // Map time to Z-axis (-20 to 20)
+                positions[i * 3 + 2] = (noteData[i].time / maxTime) * 40 - 20;
                 // Set colors
                 colors[i * 3] = noteData[i].color.r;
                 size: pointSize,
                 vertexColors: true,
                 transparent: true,
+                opacity: 0.9,
+                sizeAttenuation: true
             });
             // Create points
                 points.material.size = pointSize;
             });
+            // Animation speed control
+            document.getElementById('animation-speed').addEventListener('input', function() {
+                animationSpeed = parseFloat(this.value);
+            });
             // Reset view button
             document.getElementById('reset-view').addEventListener('click', function() {
+                camera.position.set(0, 15, 30);
                 camera.lookAt(0, 0, 0);
             });
                     const index = intersects[0].index;
                     const note = noteData[index];
                     document.getElementById('note-details').innerHTML = `
+                        <div class="note-detail">
+                            <p><strong>Frequency:</strong> ${note.frequency.toFixed(2)} Hz</p>
+                        </div>
+                        <div class="note-detail">
+                            <p><strong>Amplitude:</strong> ${(note.amplitude * 100).toFixed(0)}%</p>
+                        </div>
+                        <div class="note-detail">
+                            <p><strong>Duration:</strong> ${note.duration} seconds</p>
+                        </div>
+                        <div class="note-detail">
+                            <p><strong>Time:</strong> ${note.time.toFixed(1)} seconds</p>
+                        </div>
                     `;
                 }
             });
             // Rotate the entire scene
             if (points) {
+                points.rotation.y += 0.005 * rotationSpeed * animationSpeed;
+            }
+            // Add subtle floating animation to points
+            if (points) {
+                const positions = points.geometry.attributes.position.array;
+                for (let i = 1; i < positions.length; i += 3) {
+                    positions[i] += Math.sin(Date.now() * 0.001 + i) * 0.01 * animationSpeed;
+                }
+                points.geometry.attributes.position.needsUpdate = true;
             }
             renderer.render(scene, camera);
         window.addEventListener('load', init);
     </script>
 </body>
+</html>