Hugging Face's logo

Spaces:
Gtmix
/
quant_Synth
Running

App Files Community
Joe-C-Wales commited on
Commit
971d57f
·
verified ·
1 Parent(s): 8c70d2b

review the code and look for areas of opportunity for improvement

Browse files
Files changed (4) hide show
  1. about.html +5 -4
  2. community.html +284 -0
  3. index.html +4 -3
  4. quantum.html +2 -1
about.html CHANGED
@@ -70,12 +70,13 @@
70
  <h1 class="text-text-dark text-2xl font-bold">Stitch</h1>
71
  </div>
72
  <nav class="flex gap-6">
73
- <a class="text-text-light hover:text-primary transition-colors" href="index.html">Dashboard</a>
74
- <a class="text-text-light hover:text-primary transition-colors" href="composer.html">Composer</a>
75
- <a class="text-text-light hover:text-primary transition-colors" href="visualizer.html">Visualizer</a>
76
- <a class="text-text-light hover:text-primary transition-colors" href="profile.html">Profile</a>
77
  <a class="text-text-light hover:text-primary transition-colors" href="api.html">API</a>
78
  <a class="text-text-light hover:text-primary transition-colors" href="agent.html">Agent</a>
 
79
  <a class="text-primary font-medium" href="about.html">About</a>
80
  </nav>
81
  <div class="flex items-center gap-4">
 
70
  <h1 class="text-text-dark text-2xl font-bold">Stitch</h1>
71
  </div>
72
  <nav class="flex gap-6">
73
+ <a class="text-text-light hover:text-primary transition-colors" href="index.html">Home</a>
74
+ <a class="text-text-light hover:text-primary transition-colors" href="synthesizer.html">Synthesizer</a>
75
+ <a class="text-text-light hover:text-primary transition-colors" href="quantum.html">Quantum</a>
76
+ <a class="text-text-light hover:text-primary transition-colors" href="visualization.html">Visualization</a>
77
  <a class="text-text-light hover:text-primary transition-colors" href="api.html">API</a>
78
  <a class="text-text-light hover:text-primary transition-colors" href="agent.html">Agent</a>
79
+ <a class="text-text-light hover:text-primary transition-colors" href="community.html">Community</a>
80
  <a class="text-primary font-medium" href="about.html">About</a>
81
  </nav>
82
  <div class="flex items-center gap-4">
community.html ADDED
@@ -0,0 +1,284 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Community - Quantum Music Synthesizer</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ :root {
14
+ --quantum-purple: #6e45e2;
15
+ --quantum-teal: #88d3ce;
16
+ --quantum-pink: #ff2a6d;
17
+ --quantum-blue: #05d9e8;
18
+ --quantum-dark: #0c0f1f;
19
+ --quantum-darker: #080a1a;
20
+ }
21
+
22
+ .quantum-bg {
23
+ background: linear-gradient(135deg, var(--quantum-dark), var(--quantum-darker));
24
+ position: relative;
25
+ overflow: hidden;
26
+ }
27
+
28
+ .quantum-bg::before {
29
+ content: '';
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ right: 0;
34
+ bottom: 0;
35
+ background:
36
+ radial-gradient(circle at 10% 20%, rgba(110, 69, 226, 0.1) 0%, transparent 20%),
37
+ radial-gradient(circle at 90% 80%, rgba(136, 211, 206, 0.1) 0%, transparent 20%),
38
+ radial-gradient(circle at 50% 50%, rgba(5, 217, 232, 0.05) 0%, transparent 30%);
39
+ z-index: 0;
40
+ }
41
+
42
+ .quantum-card {
43
+ background: rgba(255, 255, 255, 0.05);
44
+ backdrop-filter: blur(10px);
45
+ border: 1px solid rgba(255, 255, 255, 0.1);
46
+ border-radius: 16px;
47
+ transition: all 0.3s ease;
48
+ }
49
+
50
+ .quantum-card:hover {
51
+ transform: translateY(-5px);
52
+ box-shadow: 0 10px 30px rgba(110, 69, 226, 0.2);
53
+ border-color: rgba(110, 69, 226, 0.3);
54
+ }
55
+
56
+ .quantum-header {
57
+ background: rgba(12, 15, 31, 0.8);
58
+ backdrop-filter: blur(10px);
59
+ position: sticky;
60
+ top: 0;
61
+ z-index: 100;
62
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
63
+ }
64
+
65
+ .quantum-nav a {
66
+ position: relative;
67
+ padding: 8px 0;
68
+ }
69
+
70
+ .quantum-nav a::after {
71
+ content: '';
72
+ position: absolute;
73
+ bottom: 0;
74
+ left: 0;
75
+ width: 0;
76
+ height: 2px;
77
+ background: var(--quantum-blue);
78
+ transition: width 0.3s ease;
79
+ }
80
+
81
+ .quantum-nav a:hover::after {
82
+ width: 100%;
83
+ }
84
+
85
+ .quantum-btn {
86
+ background: linear-gradient(45deg, var(--quantum-purple), var(--quantum-teal));
87
+ border: none;
88
+ border-radius: 30px;
89
+ padding: 12px 20px;
90
+ font-weight: 600;
91
+ transition: all 0.3s ease;
92
+ }
93
+
94
+ .quantum-btn:hover {
95
+ transform: translateY(-3px);
96
+ box-shadow: 0 5px 20px rgba(110, 69, 226, 0.4);
97
+ }
98
+
99
+ .community-post {
100
+ border-left: 4px solid var(--quantum-purple);
101
+ transition: all 0.3s ease;
102
+ }
103
+
104
+ .community-post:hover {
105
+ transform: translateX(5px);
106
+ box-shadow: 0 5px 15px rgba(110, 69, 226, 0.2);
107
+ }
108
+
109
+ .user-avatar {
110
+ width: 40px;
111
+ height: 40px;
112
+ border-radius: 50%;
113
+ background: linear-gradient(45deg, var(--quantum-purple), var(--quantum-teal));
114
+ border-radius: 50%;
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ font-weight: bold;
119
+ color: white;
120
+ }
121
+
122
+ .interaction-btn {
123
+ transition: all 0.2s ease;
124
+ }
125
+
126
+ .interaction-btn:hover {
127
+ transform: scale(1.1);
128
+ }
129
+ </style>
130
+ </head>
131
+ <body class="bg-gray-900 text-white min-h-screen">
132
+ <div class="quantum-bg min-h-screen">
133
+ <!-- Header -->
134
+ <header class="quantum-header container mx-auto py-4 px-4">
135
+ <div class="flex justify-between items-center">
136
+ <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
137
+ <nav class="quantum-nav">
138
+ <ul class="flex space-x-8">
139
+ <li><a href="index.html" class="hover:text-purple-300 font-medium">Home</a></li>
140
+ <li><a href="synthesizer.html" class="hover:text-purple-300 font-medium">Home</a></li>
141
+ <li><a href="synthesizer.html" class="hover:text-purple-300 font-medium">Synthesizer</a></li>
142
+ <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Synthesizer</a></li>
143
+ <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
144
+ <li><a href="about.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
145
+ <li><a href="api.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
146
+ <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
147
+ <li><a href="community.html" class="hover:text-purple-300 font-medium">Community</a></li>
148
+ </ul>
149
+ </nav>
150
+ </div>
151
+ </header>
152
+
153
+ <!-- Community Section -->
154
+ <section class="container mx-auto py-16 px-4">
155
+ <h2 class="text-4xl font-bold text-center mb-12">Quantum Music Community</h2>
156
+
157
+ <div class="max-w-4xl mx-auto">
158
+ <!-- Community Stats -->
159
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
160
+ <div class="quantum-card p-6 text-center">
161
+ <div class="text-3xl font-bold text-purple-400">1,247</div>
162
+ <div class="text-gray-300">Members</div>
163
+ </div>
164
+ <div class="quantum-card p-6 text-center">
165
+ <div class="text-3xl font-bold text-teal-400">342</div>
166
+ <div class="text-gray-300">Active Today</div>
167
+ <div class="quantum-card p-6 text-center">
168
+ <div class="text-3xl font-bold text-pink-400">89</div>
169
+ <div class="text-gray-300">Compositions</div>
170
+ <div class="quantum-card p-6 text-center">
171
+ <div class="text-3xl font-bold text-blue-400">24</div>
172
+ <div class="text-gray-300">Discussions</div>
173
+ </div>
174
+
175
+ <!-- Community Posts -->
176
+ <div class="quantum-card p-8">
177
+ <h3 class="text-2xl font-bold mb-6">Recent Discussions</h3>
178
+
179
+ <div class="space-y-6">
180
+ <!-- Post 1 -->
181
+ <div class="community-post quantum-card p-6">
182
+ <div class="flex items-start space-x-4">
183
+ <div class="user-avatar bg-purple-500">QM</div>
184
+ <div class="flex-1">
185
+ <h4 class="text-lg font-bold mb-2">Quantum Harmony Patterns</h4>
186
+ <p class="text-gray-300 mb-4">Has anyone else noticed the fractal-like patterns that emerge when using entangled qubits for chord progressions?</p>
187
+ <div class="flex items-center space-x-6">
188
+ <button class="interaction-btn flex items-center space-x-2 text-sm">
189
+ <i data-feather="heart" class="w-4 h-4"></i>
190
+ <span>24</span>
191
+ </div>
192
+ <div class="flex items-center space-x-2 text-sm">
193
+ <i data-feather="message-square" class="w-4 h-4"></i>
194
+ <span>12</span>
195
+ </button>
196
+ <button class="interaction-btn flex items-center space-x-2 text-sm">
197
+ <i data-feather="share" class="w-4 h-4"></i>
198
+ <span>5</span>
199
+ </button>
200
+ <span class="text-gray-400 text-sm">Posted 2 hours ago</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Post 2 -->
206
+ <div class="community-post quantum-card p-6">
207
+ <div class="flex items-start space-x-4">
208
+ <div class="user-avatar bg-teal-500">JS</div>
209
+ <div class="flex-1">
210
+ <h4 class="text-lg font-bold mb-2">Optimal Qubit Count for Melody</h4>
211
+ <p class="text-gray-300 mb-4">I've been experimenting with different qubit counts and found that 6 qubits seems to produce the most harmonically rich sequences. What are your experiences?</p>
212
+ <div class="flex items-center space-x-6">
213
+ <button class="interaction-btn flex items-center space-x-2 text-sm">
214
+ <i data-feather="heart" class="w-4 h-4"></i>
215
+ <span>18</span>
216
+ </button>
217
+ <button class="interaction-btn flex items-center space-x-2 text-sm">
218
+ <i data-feather="message-square" class="w-4 h-4"></i>
219
+ <span>8</span>
220
+ </button>
221
+ <button class="interaction-btn flex items-center space-x-2 text-sm">
222
+ <i data-feather="share" class="w-4 h-4"></i>
223
+ <span>3</span>
224
+ </button>
225
+ <span class="text-gray-400 text-sm">Posted 5 hours ago</span>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Post 3 -->
231
+ <div class="community-post quantum-card p-6">
232
+ <div class="flex items-start space-x-4">
233
+ <div class="user-avatar bg-blue-500">AR</div>
234
+ <div class="flex-1">
235
+ <h4 class="text-lg font-bold mb-2">Quantum Circuit Optimization Techniques</h4>
236
+ <p class="text-gray-300 mb-4">Sharing some advanced techniques for reducing gate depth while maintaining musical complexity.</p>
237
+ <div class="flex items-center space-x-6">
238
+ <button class="interaction-btn flex items-center space-x-2 text-sm">
239
+ <i data-feather="heart" class="w-4 h-4"></i>
240
+ <span>31</span>
241
+ </button>
242
+ <button class="interaction-btn flex items-center space-x-2 text-sm">
243
+ <i data-feather="message-square" class="w-4 h-4"></i>
244
+ <span>15</span>
245
+ </button>
246
+ <button class="interaction-btn flex items-center space-x-2 text-sm">
247
+ <i data-feather="share" class="w-4 h-4"></i>
248
+ <span>7</span>
249
+ </button>
250
+ <span class="text-gray-400 text-sm">Posted yesterday</span>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- New Post Form -->
256
+ <div class="quantum-card p-8 mt-12">
257
+ <h3 class="text-2xl font-bold mb-6">Start a Discussion</h3>
258
+ <form class="space-y-6">
259
+ <div>
260
+ <label class="block mb-2 font-medium">Title</label>
261
+ <input type="text" class="w-full bg-gray-800/50 rounded-lg p-3 border border-gray-700 focus:border-purple-500 focus:outline-none" placeholder="Enter discussion title...">
262
+ </div>
263
+ <div>
264
+ <label class="block mb-2 font-medium">Message</label>
265
+ <textarea class="w-full bg-gray-800/50 rounded-lg p-3 border border-gray-700 focus:border-purple-500 focus:outline-none" rows="4" placeholder="Share your thoughts with the community..."></textarea>
266
+ </div>
267
+ <button type="submit" class="quantum-btn">
268
+ Post Discussion
269
+ </button>
270
+ </form>
271
+ </div>
272
+ </div>
273
+ </section>
274
+
275
+ <!-- Footer -->
276
+ <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-800">
277
+ <p class="text-gray-400">Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
278
+ </footer>
279
+ </div>
280
+ <script>
281
+ feather.replace();
282
+ </script>
283
+ </body>
284
+ </html>
index.html CHANGED
@@ -183,7 +183,8 @@
183
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
184
  <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
185
  <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
186
- </ul>
 
187
  </nav>
188
  </div>
189
  </header>
@@ -193,9 +194,9 @@
193
  <div class="quantum-hero quantum-card p-12 text-center">
194
  <h2 class="text-5xl font-bold mb-6">Create Music with Quantum Computing</h2>
195
  <p class="text-xl mb-8 max-w-2xl mx-auto">Harness the power of quantum entanglement to generate unique musical compositions</p>
196
- <button class="quantum-btn text-white font-bold py-3 px-8 text-lg hovered-element">
197
  Start Synthesizing
198
- </button>
199
  </div>
200
  </section>
201
 
 
183
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
184
  <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
185
  <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
186
+ <li><a href="community.html" class="hover:text-purple-300 font-medium">Community</a></li>
187
+ </ul>
188
  </nav>
189
  </div>
190
  </header>
 
194
  <div class="quantum-hero quantum-card p-12 text-center">
195
  <h2 class="text-5xl font-bold mb-6">Create Music with Quantum Computing</h2>
196
  <p class="text-xl mb-8 max-w-2xl mx-auto">Harness the power of quantum entanglement to generate unique musical compositions</p>
197
+ <a href="synthesizer.html" class="quantum-btn text-white font-bold py-3 px-8 text-lg inline-block">
198
  Start Synthesizing
199
+ </a>
200
  </div>
201
  </section>
202
 
quantum.html CHANGED
@@ -167,7 +167,8 @@
167
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
168
  <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
169
  <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
170
- </ul>
 
171
  </nav>
172
  </div>
173
  </header>
 
167
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
168
  <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
169
  <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
170
+ <li><a href="community.html" class="hover:text-purple-300 font-medium">Community</a></li>
171
+ </ul>
172
  </nav>
173
  </div>
174
  </header>