Spaces:
Running
Running
Stylized font on a Card with light hover bounce
Browse files- index.html +30 -20
- quantum.html +30 -20
- synthesizer.html +24 -14
index.html
CHANGED
|
@@ -28,14 +28,25 @@
|
|
| 28 |
50% { transform: scale(1.05); }
|
| 29 |
100% { transform: scale(1); }
|
| 30 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 31 |
</style>
|
| 32 |
</head>
|
| 33 |
<body class="bg-gray-900 text-white min-h-screen">
|
| 34 |
-
<div class="quantum-bg min-h-screen">
|
| 35 |
<!-- Header -->
|
| 36 |
-
<header class="container mx-auto py-6 px-4">
|
| 37 |
<div class="flex justify-between items-center">
|
| 38 |
-
<h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
|
| 39 |
<nav>
|
| 40 |
<ul class="flex space-x-6">
|
| 41 |
<li><a href="index.html" class="hover:text-purple-300">Home</a></li>
|
|
@@ -47,9 +58,9 @@
|
|
| 47 |
</header>
|
| 48 |
|
| 49 |
<!-- Hero Section -->
|
| 50 |
-
<section class="container mx-auto py-16 px-4 text-center">
|
| 51 |
-
<h2 class="text-5xl font-bold mb-6">Create Music with Quantum Computing</h2>
|
| 52 |
-
<p class="text-xl mb-8 max-w-2xl mx-auto">Harness the power of quantum entanglement to generate unique musical compositions</p>
|
| 53 |
<div class="pulse inline-block">
|
| 54 |
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">
|
| 55 |
Start Synthesizing
|
|
@@ -58,22 +69,22 @@
|
|
| 58 |
</section>
|
| 59 |
|
| 60 |
<!-- Features Section -->
|
| 61 |
-
<section class="container mx-auto py-16 px-4">
|
| 62 |
-
<h3 class="text-3xl font-bold text-center mb-12">How It Works</h3>
|
| 63 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 64 |
-
<div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
|
| 65 |
<i data-feather="cpu" class="w-12 h-12 mb-4 text-purple-400"></i>
|
| 66 |
-
<h4 class="text-xl font-bold mb-2">Quantum Circuits</h4>
|
| 67 |
<p>Create complex musical patterns using quantum superposition and entanglement</p>
|
| 68 |
</div>
|
| 69 |
-
<div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
|
| 70 |
<i data-feather="music" class="w-12 h-12 mb-4 text-purple-400"></i>
|
| 71 |
-
<h4 class="text-xl font-bold mb-2">Sonic Sequences</h4>
|
| 72 |
<p>Transform quantum measurements into rich, harmonic musical sequences</p>
|
| 73 |
</div>
|
| 74 |
-
<div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg">
|
| 75 |
<i data-feather="zap" class="w-12 h-12 mb-4 text-purple-400"></i>
|
| 76 |
-
<h4 class="text-xl font-bold mb-2">Real-time Synthesis</h4>
|
| 77 |
<p>Generate and modify compositions in real-time with our quantum engine</p>
|
| 78 |
</div>
|
| 79 |
</div>
|
|
@@ -82,19 +93,19 @@
|
|
| 82 |
<!-- Stats Section -->
|
| 83 |
<section class="container mx-auto py-16 px-4">
|
| 84 |
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
| 85 |
-
<div>
|
| 86 |
<div class="text-4xl font-bold text-purple-400">99.5%</div>
|
| 87 |
<div>Fidelity Score</div>
|
| 88 |
</div>
|
| 89 |
-
<div>
|
| 90 |
<div class="text-4xl font-bold text-purple-400">1024</div>
|
| 91 |
<div>Quantum Shots</div>
|
| 92 |
</div>
|
| 93 |
-
<div>
|
| 94 |
<div class="text-4xl font-bold text-purple-400">5</div>
|
| 95 |
<div>Note Motifs</div>
|
| 96 |
</div>
|
| 97 |
-
<div>
|
| 98 |
<div class="text-4xl font-bold text-purple-400">∞</div>
|
| 99 |
<div>Possibilities</div>
|
| 100 |
</div>
|
|
@@ -106,8 +117,7 @@
|
|
| 106 |
<p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
|
| 107 |
</footer>
|
| 108 |
</div>
|
| 109 |
-
|
| 110 |
-
<script>
|
| 111 |
feather.replace();
|
| 112 |
anime({
|
| 113 |
targets: '.pulse',
|
|
|
|
| 28 |
50% { transform: scale(1.05); }
|
| 29 |
100% { transform: scale(1); }
|
| 30 |
}
|
| 31 |
+
.hovered-element {
|
| 32 |
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
| 33 |
+
}
|
| 34 |
+
.hovered-element:hover {
|
| 35 |
+
transform: translateY(-5px);
|
| 36 |
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
| 37 |
+
}
|
| 38 |
+
.stylized-font {
|
| 39 |
+
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
|
| 40 |
+
letter-spacing: 1px;
|
| 41 |
+
}
|
| 42 |
</style>
|
| 43 |
</head>
|
| 44 |
<body class="bg-gray-900 text-white min-h-screen">
|
| 45 |
+
<div class="quantum-bg min-h-screen hovered-element">
|
| 46 |
<!-- Header -->
|
| 47 |
+
<header class="container mx-auto py-6 px-4 hovered-element">
|
| 48 |
<div class="flex justify-between items-center">
|
| 49 |
+
<h1 class="text-3xl font-bold stylized-font">Quantum Music Synthesizer</h1>
|
| 50 |
<nav>
|
| 51 |
<ul class="flex space-x-6">
|
| 52 |
<li><a href="index.html" class="hover:text-purple-300">Home</a></li>
|
|
|
|
| 58 |
</header>
|
| 59 |
|
| 60 |
<!-- Hero Section -->
|
| 61 |
+
<section class="container mx-auto py-16 px-4 text-center hovered-element">
|
| 62 |
+
<h2 class="text-5xl font-bold mb-6 stylized-font">Create Music with Quantum Computing</h2>
|
| 63 |
+
<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>
|
| 64 |
<div class="pulse inline-block">
|
| 65 |
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">
|
| 66 |
Start Synthesizing
|
|
|
|
| 69 |
</section>
|
| 70 |
|
| 71 |
<!-- Features Section -->
|
| 72 |
+
<section class="container mx-auto py-16 px-4 hovered-element">
|
| 73 |
+
<h3 class="text-3xl font-bold text-center mb-12 stylized-font">How It Works</h3>
|
| 74 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 75 |
+
<div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg hovered-element">
|
| 76 |
<i data-feather="cpu" class="w-12 h-12 mb-4 text-purple-400"></i>
|
| 77 |
+
<h4 class="text-xl font-bold mb-2 stylized-font">Quantum Circuits</h4>
|
| 78 |
<p>Create complex musical patterns using quantum superposition and entanglement</p>
|
| 79 |
</div>
|
| 80 |
+
<div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg hovered-element">
|
| 81 |
<i data-feather="music" class="w-12 h-12 mb-4 text-purple-400"></i>
|
| 82 |
+
<h4 class="text-xl font-bold mb-2 stylized-font">Sonic Sequences</h4>
|
| 83 |
<p>Transform quantum measurements into rich, harmonic musical sequences</p>
|
| 84 |
</div>
|
| 85 |
+
<div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg hovered-element">
|
| 86 |
<i data-feather="zap" class="w-12 h-12 mb-4 text-purple-400"></i>
|
| 87 |
+
<h4 class="text-xl font-bold mb-2 stylized-font">Real-time Synthesis</h4>
|
| 88 |
<p>Generate and modify compositions in real-time with our quantum engine</p>
|
| 89 |
</div>
|
| 90 |
</div>
|
|
|
|
| 93 |
<!-- Stats Section -->
|
| 94 |
<section class="container mx-auto py-16 px-4">
|
| 95 |
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
| 96 |
+
<div class="hovered-element">
|
| 97 |
<div class="text-4xl font-bold text-purple-400">99.5%</div>
|
| 98 |
<div>Fidelity Score</div>
|
| 99 |
</div>
|
| 100 |
+
<div class="hovered-element">
|
| 101 |
<div class="text-4xl font-bold text-purple-400">1024</div>
|
| 102 |
<div>Quantum Shots</div>
|
| 103 |
</div>
|
| 104 |
+
<div class="hovered-element">
|
| 105 |
<div class="text-4xl font-bold text-purple-400">5</div>
|
| 106 |
<div>Note Motifs</div>
|
| 107 |
</div>
|
| 108 |
+
<div class="hovered-element">
|
| 109 |
<div class="text-4xl font-bold text-purple-400">∞</div>
|
| 110 |
<div>Possibilities</div>
|
| 111 |
</div>
|
|
|
|
| 117 |
<p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
|
| 118 |
</footer>
|
| 119 |
</div>
|
| 120 |
+
<script>
|
|
|
|
| 121 |
feather.replace();
|
| 122 |
anime({
|
| 123 |
targets: '.pulse',
|
quantum.html
CHANGED
|
@@ -46,14 +46,25 @@
|
|
| 46 |
font-weight: bold;
|
| 47 |
color: white;
|
| 48 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 49 |
</style>
|
| 50 |
</head>
|
| 51 |
<body class="bg-gray-900 text-white min-h-screen">
|
| 52 |
-
<div class="quantum-bg min-h-screen">
|
| 53 |
<!-- Header -->
|
| 54 |
-
<header class="container mx-auto py-6 px-4">
|
| 55 |
<div class="flex justify-between items-center">
|
| 56 |
-
<h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
|
| 57 |
<nav>
|
| 58 |
<ul class="flex space-x-6">
|
| 59 |
<li><a href="index.html" class="hover:text-purple-300">Home</a></li>
|
|
@@ -65,12 +76,12 @@
|
|
| 65 |
</header>
|
| 66 |
|
| 67 |
<!-- Quantum Operations Section -->
|
| 68 |
-
<section class="container mx-auto py-16 px-4">
|
| 69 |
-
<h2 class="text-4xl font-bold text-center mb-12">Quantum Operations</h2>
|
| 70 |
|
| 71 |
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 72 |
-
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-8">
|
| 73 |
-
<h3 class="text-2xl font-bold mb-4">Quantum Circuit</h3>
|
| 74 |
<div class="circuit-board">
|
| 75 |
<!-- Circuit visualization will be animated here -->
|
| 76 |
<div class="circuit-line" style="top: 50px; left: 50px; width: 200px;"></div>
|
|
@@ -84,35 +95,35 @@
|
|
| 84 |
</div>
|
| 85 |
|
| 86 |
<div class="space-y-8">
|
| 87 |
-
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-6">
|
| 88 |
-
<h3 class="text-xl font-bold mb-2">Superposition</h3>
|
| 89 |
<p>Quantum bits exist in multiple states simultaneously, creating rich harmonic possibilities.</p>
|
| 90 |
</div>
|
| 91 |
|
| 92 |
-
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-6">
|
| 93 |
-
<h3 class="text-xl font-bold mb-2">Entanglement</h3>
|
| 94 |
<p>Correlated quantum states produce complex musical relationships and patterns.</p>
|
| 95 |
</div>
|
| 96 |
|
| 97 |
-
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-6">
|
| 98 |
-
<h3 class="text-xl font-bold mb-2">Measurement</h3>
|
| 99 |
<p>Collapsing quantum states into musical notes through probabilistic outcomes.</p>
|
| 100 |
</div>
|
| 101 |
</div>
|
| 102 |
</div>
|
| 103 |
|
| 104 |
-
<div class="max-w-4xl mx-auto mt-16 bg-gray-800 bg-opacity-50 rounded-xl p-8">
|
| 105 |
-
<h3 class="text-2xl font-bold mb-4">Quantum Parameters</h3>
|
| 106 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
| 107 |
-
<div class="text-center">
|
| 108 |
<div class="text-4xl font-bold text-purple-400 mb-2">99.5%</div>
|
| 109 |
<div>Adiabatic Success</div>
|
| 110 |
</div>
|
| 111 |
-
<div class="text-center">
|
| 112 |
<div class="text-4xl font-bold text-purple-400 mb-2">Φ+</div>
|
| 113 |
<div>Bell State</div>
|
| 114 |
</div>
|
| 115 |
-
<div class="text-center">
|
| 116 |
<div class="text-4xl font-bold text-purple-400 mb-2">GHZ</div>
|
| 117 |
<div>4-Qubit Entanglement</div>
|
| 118 |
</div>
|
|
@@ -125,8 +136,7 @@
|
|
| 125 |
<p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
|
| 126 |
</footer>
|
| 127 |
</div>
|
| 128 |
-
|
| 129 |
-
<script>
|
| 130 |
feather.replace();
|
| 131 |
// Animate circuit lines
|
| 132 |
anime({
|
|
|
|
| 46 |
font-weight: bold;
|
| 47 |
color: white;
|
| 48 |
}
|
| 49 |
+
.hovered-element {
|
| 50 |
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
| 51 |
+
}
|
| 52 |
+
.hovered-element:hover {
|
| 53 |
+
transform: translateY(-5px);
|
| 54 |
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
| 55 |
+
}
|
| 56 |
+
.stylized-font {
|
| 57 |
+
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
|
| 58 |
+
letter-spacing: 1px;
|
| 59 |
+
}
|
| 60 |
</style>
|
| 61 |
</head>
|
| 62 |
<body class="bg-gray-900 text-white min-h-screen">
|
| 63 |
+
<div class="quantum-bg min-h-screen hovered-element">
|
| 64 |
<!-- Header -->
|
| 65 |
+
<header class="container mx-auto py-6 px-4 hovered-element">
|
| 66 |
<div class="flex justify-between items-center">
|
| 67 |
+
<h1 class="text-3xl font-bold stylized-font">Quantum Music Synthesizer</h1>
|
| 68 |
<nav>
|
| 69 |
<ul class="flex space-x-6">
|
| 70 |
<li><a href="index.html" class="hover:text-purple-300">Home</a></li>
|
|
|
|
| 76 |
</header>
|
| 77 |
|
| 78 |
<!-- Quantum Operations Section -->
|
| 79 |
+
<section class="container mx-auto py-16 px-4 hovered-element">
|
| 80 |
+
<h2 class="text-4xl font-bold text-center mb-12 stylized-font">Quantum Operations</h2>
|
| 81 |
|
| 82 |
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 83 |
+
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-8 hovered-element">
|
| 84 |
+
<h3 class="text-2xl font-bold mb-4 stylized-font">Quantum Circuit</h3>
|
| 85 |
<div class="circuit-board">
|
| 86 |
<!-- Circuit visualization will be animated here -->
|
| 87 |
<div class="circuit-line" style="top: 50px; left: 50px; width: 200px;"></div>
|
|
|
|
| 95 |
</div>
|
| 96 |
|
| 97 |
<div class="space-y-8">
|
| 98 |
+
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hovered-element">
|
| 99 |
+
<h3 class="text-xl font-bold mb-2 stylized-font">Superposition</h3>
|
| 100 |
<p>Quantum bits exist in multiple states simultaneously, creating rich harmonic possibilities.</p>
|
| 101 |
</div>
|
| 102 |
|
| 103 |
+
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hovered-element">
|
| 104 |
+
<h3 class="text-xl font-bold mb-2 stylized-font">Entanglement</h3>
|
| 105 |
<p>Correlated quantum states produce complex musical relationships and patterns.</p>
|
| 106 |
</div>
|
| 107 |
|
| 108 |
+
<div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hovered-element">
|
| 109 |
+
<h3 class="text-xl font-bold mb-2 stylized-font">Measurement</h3>
|
| 110 |
<p>Collapsing quantum states into musical notes through probabilistic outcomes.</p>
|
| 111 |
</div>
|
| 112 |
</div>
|
| 113 |
</div>
|
| 114 |
|
| 115 |
+
<div class="max-w-4xl mx-auto mt-16 bg-gray-800 bg-opacity-50 rounded-xl p-8 hovered-element">
|
| 116 |
+
<h3 class="text-2xl font-bold mb-4 stylized-font">Quantum Parameters</h3>
|
| 117 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
| 118 |
+
<div class="text-center hovered-element">
|
| 119 |
<div class="text-4xl font-bold text-purple-400 mb-2">99.5%</div>
|
| 120 |
<div>Adiabatic Success</div>
|
| 121 |
</div>
|
| 122 |
+
<div class="text-center hovered-element">
|
| 123 |
<div class="text-4xl font-bold text-purple-400 mb-2">Φ+</div>
|
| 124 |
<div>Bell State</div>
|
| 125 |
</div>
|
| 126 |
+
<div class="text-center hovered-element">
|
| 127 |
<div class="text-4xl font-bold text-purple-400 mb-2">GHZ</div>
|
| 128 |
<div>4-Qubit Entanglement</div>
|
| 129 |
</div>
|
|
|
|
| 136 |
<p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
|
| 137 |
</footer>
|
| 138 |
</div>
|
| 139 |
+
<script>
|
|
|
|
| 140 |
feather.replace();
|
| 141 |
// Animate circuit lines
|
| 142 |
anime({
|
synthesizer.html
CHANGED
|
@@ -36,14 +36,25 @@
|
|
| 36 |
background: linear-gradient(transparent 50%, rgba(139, 92, 246, 0.5) 50%);
|
| 37 |
background-size: 50px 100px;
|
| 38 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 39 |
</style>
|
| 40 |
</head>
|
| 41 |
<body class="bg-gray-900 text-white min-h-screen">
|
| 42 |
-
<div class="quantum-bg min-h-screen">
|
| 43 |
<!-- Header -->
|
| 44 |
-
<header class="container mx-auto py-6 px-4">
|
| 45 |
<div class="flex justify-between items-center">
|
| 46 |
-
<h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
|
| 47 |
<nav>
|
| 48 |
<ul class="flex space-x-6">
|
| 49 |
<li><a href="index.html" class="hover:text-purple-300">Home</a></li>
|
|
@@ -55,13 +66,13 @@
|
|
| 55 |
</header>
|
| 56 |
|
| 57 |
<!-- Synthesizer Section -->
|
| 58 |
-
<section class="container mx-auto py-16 px-4">
|
| 59 |
-
<h2 class="text-4xl font-bold text-center mb-12">Quantum Synthesizer</h2>
|
| 60 |
|
| 61 |
-
<div class="max-w-4xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl p-8">
|
| 62 |
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 63 |
-
<div>
|
| 64 |
-
<h3 class="text-2xl font-bold mb-4">Parameters</h3>
|
| 65 |
<div class="space-y-6">
|
| 66 |
<div>
|
| 67 |
<label class="block mb-2">Mode</label>
|
|
@@ -93,8 +104,8 @@
|
|
| 93 |
Generate Quantum Sequence
|
| 94 |
</button>
|
| 95 |
</div>
|
| 96 |
-
<div>
|
| 97 |
-
<h3 class="text-2xl font-bold mb-4">Waveform</h3>
|
| 98 |
<div class="waveform">
|
| 99 |
<div class="wave"></div>
|
| 100 |
</div>
|
|
@@ -112,8 +123,8 @@
|
|
| 112 |
</div>
|
| 113 |
</div>
|
| 114 |
|
| 115 |
-
<div class="mt-12">
|
| 116 |
-
<h3 class="text-2xl font-bold mb-4">Generated Sequence</h3>
|
| 117 |
<div class="bg-gray-900 rounded-lg p-4">
|
| 118 |
<div class="flex flex-wrap gap-2">
|
| 119 |
<div class="bg-purple-900 px-3 py-1 rounded">440.0 Hz</div>
|
|
@@ -132,8 +143,7 @@
|
|
| 132 |
<p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
|
| 133 |
</footer>
|
| 134 |
</div>
|
| 135 |
-
|
| 136 |
-
<script>
|
| 137 |
feather.replace();
|
| 138 |
anime({
|
| 139 |
targets: '.wave',
|
|
|
|
| 36 |
background: linear-gradient(transparent 50%, rgba(139, 92, 246, 0.5) 50%);
|
| 37 |
background-size: 50px 100px;
|
| 38 |
}
|
| 39 |
+
.hovered-element {
|
| 40 |
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
| 41 |
+
}
|
| 42 |
+
.hovered-element:hover {
|
| 43 |
+
transform: translateY(-5px);
|
| 44 |
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
| 45 |
+
}
|
| 46 |
+
.stylized-font {
|
| 47 |
+
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
|
| 48 |
+
letter-spacing: 1px;
|
| 49 |
+
}
|
| 50 |
</style>
|
| 51 |
</head>
|
| 52 |
<body class="bg-gray-900 text-white min-h-screen">
|
| 53 |
+
<div class="quantum-bg min-h-screen hovered-element">
|
| 54 |
<!-- Header -->
|
| 55 |
+
<header class="container mx-auto py-6 px-4 hovered-element">
|
| 56 |
<div class="flex justify-between items-center">
|
| 57 |
+
<h1 class="text-3xl font-bold stylized-font">Quantum Music Synthesizer</h1>
|
| 58 |
<nav>
|
| 59 |
<ul class="flex space-x-6">
|
| 60 |
<li><a href="index.html" class="hover:text-purple-300">Home</a></li>
|
|
|
|
| 66 |
</header>
|
| 67 |
|
| 68 |
<!-- Synthesizer Section -->
|
| 69 |
+
<section class="container mx-auto py-16 px-4 hovered-element">
|
| 70 |
+
<h2 class="text-4xl font-bold text-center mb-12 stylized-font">Quantum Synthesizer</h2>
|
| 71 |
|
| 72 |
+
<div class="max-w-4xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl p-8 hovered-element">
|
| 73 |
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 74 |
+
<div class="hovered-element">
|
| 75 |
+
<h3 class="text-2xl font-bold mb-4 stylized-font">Parameters</h3>
|
| 76 |
<div class="space-y-6">
|
| 77 |
<div>
|
| 78 |
<label class="block mb-2">Mode</label>
|
|
|
|
| 104 |
Generate Quantum Sequence
|
| 105 |
</button>
|
| 106 |
</div>
|
| 107 |
+
<div class="hovered-element">
|
| 108 |
+
<h3 class="text-2xl font-bold mb-4 stylized-font">Waveform</h3>
|
| 109 |
<div class="waveform">
|
| 110 |
<div class="wave"></div>
|
| 111 |
</div>
|
|
|
|
| 123 |
</div>
|
| 124 |
</div>
|
| 125 |
|
| 126 |
+
<div class="mt-12 hovered-element">
|
| 127 |
+
<h3 class="text-2xl font-bold mb-4 stylized-font">Generated Sequence</h3>
|
| 128 |
<div class="bg-gray-900 rounded-lg p-4">
|
| 129 |
<div class="flex flex-wrap gap-2">
|
| 130 |
<div class="bg-purple-900 px-3 py-1 rounded">440.0 Hz</div>
|
|
|
|
| 143 |
<p>Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
|
| 144 |
</footer>
|
| 145 |
</div>
|
| 146 |
+
<script>
|
|
|
|
| 147 |
feather.replace();
|
| 148 |
anime({
|
| 149 |
targets: '.wave',
|