Hugging Face's logo

Spaces:
Toowired
/
quantum-dashboard
Running

App Files Community
Toowired commited on
Commit
635529e
·
verified ·
1 Parent(s): 7064e7a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1861 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quantum Dashboard
3
- emoji: 📚
4
  colorFrom: purple
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: quantum-dashboard
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1861 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Quantum API Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Major+Mono+Display&display=swap');
11
+
12
+ :root {
13
+ --primary-hue: 210;
14
+ --primary-saturation: 80%;
15
+ --primary-lightness: 50%;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Orbitron', sans-serif;
20
+ background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
21
+ overflow: hidden;
22
+ color: #e2e8f0;
23
+ touch-action: none;
24
+ }
25
+
26
+ .dashboard {
27
+ position: relative;
28
+ width: 100vw;
29
+ height: 100vh;
30
+ perspective: 2000px;
31
+ transform-style: preserve-3d;
32
+ }
33
+
34
+ .button-3d {
35
+ position: absolute;
36
+ width: 140px;
37
+ height: 140px;
38
+ border-radius: 20px;
39
+ display: flex;
40
+ flex-direction: column;
41
+ align-items: center;
42
+ justify-content: center;
43
+ cursor: move;
44
+ user-select: none;
45
+ transform-style: preserve-3d;
46
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
47
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
48
+ z-index: 10;
49
+ border: 1px solid rgba(255, 255, 255, 0.1);
50
+ backdrop-filter: blur(5px);
51
+ background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
52
+ }
53
+
54
+ .button-3d:hover {
55
+ transform: translateY(-8px) rotateX(15deg) scale(1.05);
56
+ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
57
+ z-index: 20;
58
+ }
59
+
60
+ .button-3d:active {
61
+ transform: translateY(0) rotateX(0) scale(0.98);
62
+ }
63
+
64
+ .button-3d::before {
65
+ content: '';
66
+ position: absolute;
67
+ top: 0;
68
+ left: 0;
69
+ right: 0;
70
+ bottom: 0;
71
+ border-radius: inherit;
72
+ background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
73
+ opacity: 0;
74
+ transition: opacity 0.3s;
75
+ }
76
+
77
+ .button-3d:hover::before {
78
+ opacity: 1;
79
+ }
80
+
81
+ .button-icon {
82
+ font-size: 3rem;
83
+ margin-bottom: 12px;
84
+ text-shadow: 0 4px 8px rgba(0,0,0,0.4);
85
+ transition: all 0.3s;
86
+ }
87
+
88
+ .button-label {
89
+ font-size: 1rem;
90
+ font-weight: 600;
91
+ text-shadow: 0 2px 4px rgba(0,0,0,0.4);
92
+ text-align: center;
93
+ max-width: 90%;
94
+ word-break: break-word;
95
+ }
96
+
97
+ .button-status {
98
+ position: absolute;
99
+ bottom: 10px;
100
+ right: 10px;
101
+ width: 12px;
102
+ height: 12px;
103
+ border-radius: 50%;
104
+ background: #4ade80;
105
+ box-shadow: 0 0 10px #4ade80;
106
+ }
107
+
108
+ .modal {
109
+ position: fixed;
110
+ top: 0;
111
+ left: 0;
112
+ width: 100%;
113
+ height: 100%;
114
+ background-color: rgba(2, 6, 23, 0.95);
115
+ backdrop-filter: blur(20px);
116
+ display: flex;
117
+ justify-content: center;
118
+ align-items: center;
119
+ z-index: 1000;
120
+ opacity: 0;
121
+ pointer-events: none;
122
+ transition: opacity 0.4s, transform 0.4s;
123
+ transform: scale(0.9);
124
+ }
125
+
126
+ .modal-content {
127
+ background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
128
+ border-radius: 24px;
129
+ width: 85%;
130
+ max-width: 800px;
131
+ max-height: 90vh;
132
+ overflow-y: auto;
133
+ padding: 2.5rem;
134
+ box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.7);
135
+ border: 1px solid rgba(255, 255, 255, 0.15);
136
+ transform: translateY(30px);
137
+ transition: transform 0.4s;
138
+ position: relative;
139
+ }
140
+
141
+ .modal.active {
142
+ opacity: 1;
143
+ pointer-events: all;
144
+ transform: scale(1);
145
+ }
146
+
147
+ .modal.active .modal-content {
148
+ transform: translateY(0);
149
+ }
150
+
151
+ .control-panel {
152
+ position: fixed;
153
+ bottom: 3rem;
154
+ right: 3rem;
155
+ z-index: 500;
156
+ display: flex;
157
+ flex-direction: column;
158
+ gap: 1rem;
159
+ }
160
+
161
+ .control-button {
162
+ width: 70px;
163
+ height: 70px;
164
+ border-radius: 50%;
165
+ background: linear-gradient(145deg, hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness)),
166
+ hsl(var(--primary-hue), calc(var(--primary-saturation) - 10%), calc(var(--primary-lightness) - 10%)));
167
+ display: flex;
168
+ justify-content: center;
169
+ align-items: center;
170
+ font-size: 1.8rem;
171
+ color: white;
172
+ box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.4);
173
+ cursor: pointer;
174
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
175
+ position: relative;
176
+ overflow: hidden;
177
+ }
178
+
179
+ .control-button::after {
180
+ content: '';
181
+ position: absolute;
182
+ top: 0;
183
+ left: 0;
184
+ width: 100%;
185
+ height: 100%;
186
+ background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, transparent 100%);
187
+ opacity: 0;
188
+ transition: opacity 0.3s;
189
+ }
190
+
191
+ .control-button:hover {
192
+ transform: translateY(-5px) scale(1.1);
193
+ box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.5);
194
+ }
195
+
196
+ .control-button:hover::after {
197
+ opacity: 1;
198
+ }
199
+
200
+ .control-button:active {
201
+ transform: translateY(0) scale(0.98);
202
+ }
203
+
204
+ .grid-lines {
205
+ position: absolute;
206
+ top: 0;
207
+ left: 0;
208
+ width: 100%;
209
+ height: 100%;
210
+ background-image:
211
+ linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
212
+ linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
213
+ background-size: 60px 60px;
214
+ z-index: 0;
215
+ opacity: 0.7;
216
+ }
217
+
218
+ .particles {
219
+ position: absolute;
220
+ top: 0;
221
+ left: 0;
222
+ width: 100%;
223
+ height: 100%;
224
+ z-index: 1;
225
+ pointer-events: none;
226
+ }
227
+
228
+ .particle {
229
+ position: absolute;
230
+ width: 2px;
231
+ height: 2px;
232
+ background: rgba(255,255,255,0.5);
233
+ border-radius: 50%;
234
+ animation: float 15s infinite linear;
235
+ }
236
+
237
+ @keyframes float {
238
+ 0% {
239
+ transform: translateY(0) translateX(0);
240
+ opacity: 0;
241
+ }
242
+ 10% {
243
+ opacity: 1;
244
+ }
245
+ 90% {
246
+ opacity: 1;
247
+ }
248
+ 100% {
249
+ transform: translateY(-100vh) translateX(20px);
250
+ opacity: 0;
251
+ }
252
+ }
253
+
254
+ /* Custom scrollbar */
255
+ ::-webkit-scrollbar {
256
+ width: 10px;
257
+ }
258
+
259
+ ::-webkit-scrollbar-track {
260
+ background: rgba(255, 255, 255, 0.05);
261
+ border-radius: 10px;
262
+ }
263
+
264
+ ::-webkit-scrollbar-thumb {
265
+ background: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
266
+ border-radius: 10px;
267
+ }
268
+
269
+ /* Form elements */
270
+ input, textarea, select {
271
+ background-color: rgba(15, 23, 42, 0.7);
272
+ border: 1px solid rgba(255, 255, 255, 0.15);
273
+ border-radius: 12px;
274
+ padding: 0.9rem 1.2rem;
275
+ color: white;
276
+ width: 100%;
277
+ margin-bottom: 1rem;
278
+ transition: all 0.3s;
279
+ font-family: 'Orbitron', sans-serif;
280
+ }
281
+
282
+ input:focus, textarea:focus, select:focus {
283
+ outline: none;
284
+ border-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
285
+ box-shadow: 0 0 0 3px hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 0.3);
286
+ background-color: rgba(15, 23, 42, 0.9);
287
+ }
288
+
289
+ .form-label {
290
+ display: block;
291
+ margin-bottom: 0.7rem;
292
+ font-weight: 600;
293
+ font-size: 0.95rem;
294
+ letter-spacing: 0.5px;
295
+ }
296
+
297
+ .btn {
298
+ background: linear-gradient(145deg, hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness)),
299
+ hsl(var(--primary-hue), calc(var(--primary-saturation) - 10%), calc(var(--primary-lightness) - 10%)));
300
+ color: white;
301
+ border: none;
302
+ padding: 1rem 2rem;
303
+ border-radius: 12px;
304
+ font-weight: 600;
305
+ cursor: pointer;
306
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
307
+ font-family: 'Orbitron', sans-serif;
308
+ letter-spacing: 0.5px;
309
+ position: relative;
310
+ overflow: hidden;
311
+ }
312
+
313
+ .btn::after {
314
+ content: '';
315
+ position: absolute;
316
+ top: 0;
317
+ left: 0;
318
+ width: 100%;
319
+ height: 100%;
320
+ background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, transparent 100%);
321
+ opacity: 0;
322
+ transition: opacity 0.3s;
323
+ }
324
+
325
+ .btn:hover {
326
+ transform: translateY(-3px);
327
+ box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.4);
328
+ }
329
+
330
+ .btn:hover::after {
331
+ opacity: 1;
332
+ }
333
+
334
+ .btn:active {
335
+ transform: translateY(0);
336
+ }
337
+
338
+ .btn-secondary {
339
+ background: rgba(255, 255, 255, 0.1);
340
+ backdrop-filter: blur(10px);
341
+ }
342
+
343
+ .btn-secondary:hover {
344
+ background: rgba(255, 255, 255, 0.15);
345
+ }
346
+
347
+ .color-option {
348
+ width: 30px;
349
+ height: 30px;
350
+ border-radius: 50%;
351
+ cursor: pointer;
352
+ transition: all 0.3s;
353
+ border: 2px solid transparent;
354
+ }
355
+
356
+ .color-option:hover {
357
+ transform: scale(1.1);
358
+ }
359
+
360
+ .color-option.active {
361
+ transform: scale(1.2);
362
+ border: 2px solid white;
363
+ box-shadow: 0 0 10px rgba(255,255,255,0.5);
364
+ }
365
+
366
+ .tab {
367
+ padding: 0.8rem 1.5rem;
368
+ border-radius: 8px;
369
+ cursor: pointer;
370
+ transition: all 0.3s;
371
+ font-weight: 500;
372
+ background: transparent;
373
+ color: rgba(255,255,255,0.7);
374
+ }
375
+
376
+ .tab.active {
377
+ background: rgba(255,255,255,0.1);
378
+ color: white;
379
+ font-weight: 600;
380
+ }
381
+
382
+ .tab:hover:not(.active) {
383
+ background: rgba(255,255,255,0.05);
384
+ }
385
+
386
+ .tab-content {
387
+ display: none;
388
+ }
389
+
390
+ .tab-content.active {
391
+ display: block;
392
+ animation: fadeIn 0.4s;
393
+ }
394
+
395
+ @keyframes fadeIn {
396
+ from { opacity: 0; transform: translateY(10px); }
397
+ to { opacity: 1; transform: translateY(0); }
398
+ }
399
+
400
+ .response-tabs {
401
+ display: flex;
402
+ border-bottom: 1px solid rgba(255,255,255,0.1);
403
+ margin-bottom: 1.5rem;
404
+ }
405
+
406
+ .response-tab {
407
+ padding: 0.7rem 1.5rem;
408
+ cursor: pointer;
409
+ border-bottom: 3px solid transparent;
410
+ transition: all 0.3s;
411
+ font-size: 0.9rem;
412
+ color: rgba(255,255,255,0.7);
413
+ }
414
+
415
+ .response-tab.active {
416
+ border-bottom: 3px solid hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
417
+ color: white;
418
+ }
419
+
420
+ .response-tab:hover:not(.active) {
421
+ color: white;
422
+ }
423
+
424
+ .response-content {
425
+ display: none;
426
+ }
427
+
428
+ .response-content.active {
429
+ display: block;
430
+ }
431
+
432
+ .code-block {
433
+ background: rgba(0,0,0,0.3);
434
+ border-radius: 8px;
435
+ padding: 1rem;
436
+ font-family: 'Major Mono Display', monospace;
437
+ font-size: 0.85rem;
438
+ line-height: 1.6;
439
+ overflow-x: auto;
440
+ margin-bottom: 1rem;
441
+ }
442
+
443
+ .connection-line {
444
+ position: absolute;
445
+ background: rgba(255,255,255,0.2);
446
+ height: 2px;
447
+ transform-origin: left center;
448
+ z-index: 5;
449
+ pointer-events: none;
450
+ }
451
+
452
+ .connection-line::after {
453
+ content: '';
454
+ position: absolute;
455
+ right: 0;
456
+ top: 50%;
457
+ width: 10px;
458
+ height: 10px;
459
+ background: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
460
+ border-radius: 50%;
461
+ transform: translateY(-50%);
462
+ box-shadow: 0 0 10px hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
463
+ }
464
+
465
+ .connection-mode {
466
+ position: absolute;
467
+ background: rgba(15, 23, 42, 0.9);
468
+ border: 1px solid rgba(255,255,255,0.2);
469
+ padding: 0.3rem 0.6rem;
470
+ border-radius: 20px;
471
+ font-size: 0.7rem;
472
+ z-index: 6;
473
+ pointer-events: none;
474
+ transform: translate(-50%, -50%);
475
+ }
476
+
477
+ .mini-map {
478
+ position: fixed;
479
+ bottom: 3rem;
480
+ left: 3rem;
481
+ width: 200px;
482
+ height: 200px;
483
+ background: rgba(15, 23, 42, 0.7);
484
+ border: 1px solid rgba(255,255,255,0.1);
485
+ border-radius: 8px;
486
+ z-index: 500;
487
+ overflow: hidden;
488
+ backdrop-filter: blur(5px);
489
+ }
490
+
491
+ .mini-map-viewport {
492
+ position: absolute;
493
+ border: 2px solid hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
494
+ background: rgba(59, 130, 246, 0.2);
495
+ z-index: 2;
496
+ }
497
+
498
+ .mini-map-content {
499
+ position: absolute;
500
+ top: 0;
501
+ left: 0;
502
+ width: 100%;
503
+ height: 100%;
504
+ transform-origin: 0 0;
505
+ }
506
+
507
+ .mini-map-button {
508
+ position: absolute;
509
+ width: 6px;
510
+ height: 6px;
511
+ border-radius: 50%;
512
+ transform: translate(-50%, -50%);
513
+ }
514
+
515
+ .context-menu {
516
+ position: absolute;
517
+ background: rgba(30, 41, 59, 0.95);
518
+ border: 1px solid rgba(255,255,255,0.1);
519
+ border-radius: 8px;
520
+ box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
521
+ z-index: 1000;
522
+ backdrop-filter: blur(10px);
523
+ display: none;
524
+ overflow: hidden;
525
+ }
526
+
527
+ .context-menu-item {
528
+ padding: 0.8rem 1.5rem;
529
+ cursor: pointer;
530
+ transition: all 0.2s;
531
+ display: flex;
532
+ align-items: center;
533
+ gap: 0.8rem;
534
+ }
535
+
536
+ .context-menu-item:hover {
537
+ background: rgba(255,255,255,0.1);
538
+ }
539
+
540
+ .context-menu-item i {
541
+ width: 20px;
542
+ text-align: center;
543
+ }
544
+
545
+ .dashboard-overlay {
546
+ position: absolute;
547
+ top: 0;
548
+ left: 0;
549
+ width: 100%;
550
+ height: 100%;
551
+ z-index: 5;
552
+ pointer-events: none;
553
+ }
554
+
555
+ .dashboard-title {
556
+ position: absolute;
557
+ top: 2rem;
558
+ left: 2rem;
559
+ font-size: 1.8rem;
560
+ font-weight: 700;
561
+ z-index: 10;
562
+ background: linear-gradient(to right, #fff, #aaa);
563
+ -webkit-background-clip: text;
564
+ -webkit-text-fill-color: transparent;
565
+ text-shadow: 0 2px 10px rgba(0,0,0,0.3);
566
+ }
567
+
568
+ .dashboard-subtitle {
569
+ position: absolute;
570
+ top: 4.5rem;
571
+ left: 2rem;
572
+ font-size: 1rem;
573
+ color: rgba(255,255,255,0.7);
574
+ z-index: 10;
575
+ max-width: 300px;
576
+ }
577
+
578
+ .dashboard-bg {
579
+ position: absolute;
580
+ top: 0;
581
+ left: 0;
582
+ width: 100%;
583
+ height: 100%;
584
+ background: radial-gradient(circle at 20% 30%, hsla(var(--primary-hue), 50%, 30%, 0.3) 0%, transparent 50%),
585
+ radial-gradient(circle at 80% 70%, hsla(calc(var(--primary-hue) + 60), 50%, 30%, 0.3) 0%, transparent 50%);
586
+ z-index: 0;
587
+ transition: all 1s;
588
+ }
589
+
590
+ .connection-mode-selector {
591
+ position: absolute;
592
+ top: 0;
593
+ left: 50%;
594
+ transform: translateX(-50%);
595
+ background: rgba(30, 41, 59, 0.9);
596
+ border-radius: 0 0 8px 8px;
597
+ padding: 0.5rem 1rem;
598
+ display: flex;
599
+ gap: 0.5rem;
600
+ z-index: 100;
601
+ border: 1px solid rgba(255,255,255,0.1);
602
+ border-top: none;
603
+ }
604
+
605
+ .connection-mode-btn {
606
+ padding: 0.3rem 0.8rem;
607
+ border-radius: 4px;
608
+ cursor: pointer;
609
+ font-size: 0.8rem;
610
+ transition: all 0.2s;
611
+ }
612
+
613
+ .connection-mode-btn.active {
614
+ background: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
615
+ color: white;
616
+ }
617
+
618
+ .connection-mode-btn:not(.active):hover {
619
+ background: rgba(255,255,255,0.1);
620
+ }
621
+
622
+ .button-tags {
623
+ position: absolute;
624
+ top: 10px;
625
+ left: 10px;
626
+ display: flex;
627
+ gap: 5px;
628
+ flex-wrap: wrap;
629
+ max-width: 80%;
630
+ }
631
+
632
+ .button-tag {
633
+ background: rgba(0,0,0,0.3);
634
+ border-radius: 4px;
635
+ padding: 2px 6px;
636
+ font-size: 0.6rem;
637
+ color: rgba(255,255,255,0.8);
638
+ white-space: nowrap;
639
+ }
640
+
641
+ .button-actions {
642
+ position: absolute;
643
+ top: 10px;
644
+ right: 10px;
645
+ display: none;
646
+ gap: 5px;
647
+ }
648
+
649
+ .button-3d:hover .button-actions {
650
+ display: flex;
651
+ }
652
+
653
+ .button-action {
654
+ width: 20px;
655
+ height: 20px;
656
+ border-radius: 4px;
657
+ background: rgba(0,0,0,0.3);
658
+ display: flex;
659
+ align-items: center;
660
+ justify-content: center;
661
+ font-size: 0.7rem;
662
+ cursor: pointer;
663
+ transition: all 0.2s;
664
+ }
665
+
666
+ .button-action:hover {
667
+ background: rgba(255,255,255,0.2);
668
+ }
669
+
670
+ .button-group {
671
+ position: absolute;
672
+ border: 2px dashed rgba(255,255,255,0.3);
673
+ border-radius: 8px;
674
+ z-index: 4;
675
+ background: rgba(59, 130, 246, 0.1);
676
+ display: none;
677
+ }
678
+
679
+ .button-group.active {
680
+ display: block;
681
+ }
682
+
683
+ .button-group-label {
684
+ position: absolute;
685
+ top: -25px;
686
+ left: 0;
687
+ background: rgba(30, 41, 59, 0.9);
688
+ padding: 0.3rem 0.6rem;
689
+ border-radius: 4px;
690
+ font-size: 0.8rem;
691
+ white-space: nowrap;
692
+ }
693
+
694
+ .dashboard-toolbar {
695
+ position: absolute;
696
+ top: 2rem;
697
+ right: 2rem;
698
+ display: flex;
699
+ gap: 1rem;
700
+ z-index: 10;
701
+ }
702
+
703
+ .toolbar-btn {
704
+ padding: 0.5rem 1rem;
705
+ border-radius: 6px;
706
+ background: rgba(255,255,255,0.1);
707
+ backdrop-filter: blur(5px);
708
+ cursor: pointer;
709
+ transition: all 0.2s;
710
+ display: flex;
711
+ align-items: center;
712
+ gap: 0.5rem;
713
+ font-size: 0.9rem;
714
+ }
715
+
716
+ .toolbar-btn:hover {
717
+ background: rgba(255,255,255,0.2);
718
+ }
719
+
720
+ .toolbar-btn.active {
721
+ background: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
722
+ color: white;
723
+ }
724
+
725
+ .search-bar {
726
+ position: absolute;
727
+ top: 2rem;
728
+ left: 50%;
729
+ transform: translateX(-50%);
730
+ width: 300px;
731
+ z-index: 10;
732
+ }
733
+
734
+ .search-input {
735
+ width: 100%;
736
+ padding: 0.7rem 1.2rem;
737
+ border-radius: 30px;
738
+ background: rgba(30, 41, 59, 0.8);
739
+ border: 1px solid rgba(255,255,255,0.1);
740
+ color: white;
741
+ font-size: 0.9rem;
742
+ transition: all 0.3s;
743
+ backdrop-filter: blur(5px);
744
+ }
745
+
746
+ .search-input:focus {
747
+ outline: none;
748
+ border-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
749
+ box-shadow: 0 0 0 3px hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 0.3);
750
+ width: 400px;
751
+ }
752
+
753
+ .search-results {
754
+ position: absolute;
755
+ top: 100%;
756
+ left: 0;
757
+ width: 100%;
758
+ background: rgba(30, 41, 59, 0.95);
759
+ border-radius: 0 0 12px 12px;
760
+ max-height: 300px;
761
+ overflow-y: auto;
762
+ display: none;
763
+ box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
764
+ border: 1px solid rgba(255,255,255,0.1);
765
+ border-top: none;
766
+ z-index: 100;
767
+ }
768
+
769
+ .search-result-item {
770
+ padding: 0.8rem 1.2rem;
771
+ cursor: pointer;
772
+ transition: all 0.2s;
773
+ border-bottom: 1px solid rgba(255,255,255,0.05);
774
+ }
775
+
776
+ .search-result-item:hover {
777
+ background: rgba(255,255,255,0.1);
778
+ }
779
+
780
+ .search-result-item:last-child {
781
+ border-bottom: none;
782
+ }
783
+
784
+ .search-result-icon {
785
+ margin-right: 0.8rem;
786
+ color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
787
+ }
788
+
789
+ .search-input.active + .search-results {
790
+ display: block;
791
+ }
792
+
793
+ .dashboard-stats {
794
+ position: absolute;
795
+ bottom: 2rem;
796
+ left: 50%;
797
+ transform: translateX(-50%);
798
+ display: flex;
799
+ gap: 1.5rem;
800
+ background: rgba(30, 41, 59, 0.8);
801
+ border-radius: 30px;
802
+ padding: 0.7rem 1.5rem;
803
+ z-index: 10;
804
+ backdrop-filter: blur(5px);
805
+ border: 1px solid rgba(255,255,255,0.1);
806
+ }
807
+
808
+ .stat-item {
809
+ display: flex;
810
+ flex-direction: column;
811
+ align-items: center;
812
+ }
813
+
814
+ .stat-value {
815
+ font-size: 1.2rem;
816
+ font-weight: 600;
817
+ color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
818
+ }
819
+
820
+ .stat-label {
821
+ font-size: 0.7rem;
822
+ opacity: 0.8;
823
+ margin-top: 0.2rem;
824
+ }
825
+
826
+ .dashboard-help {
827
+ position: absolute;
828
+ top: 50%;
829
+ left: 50%;
830
+ transform: translate(-50%, -50%);
831
+ background: rgba(30, 41, 59, 0.95);
832
+ border-radius: 16px;
833
+ padding: 2rem;
834
+ max-width: 600px;
835
+ width: 80%;
836
+ max-height: 80vh;
837
+ overflow-y: auto;
838
+ z-index: 1000;
839
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
840
+ border: 1px solid rgba(255, 255, 255, 0.15);
841
+ display: none;
842
+ }
843
+
844
+ .dashboard-help.active {
845
+ display: block;
846
+ animation: fadeIn 0.4s;
847
+ }
848
+
849
+ .help-close {
850
+ position: absolute;
851
+ top: 1rem;
852
+ right: 1rem;
853
+ cursor: pointer;
854
+ font-size: 1.2rem;
855
+ color: rgba(255,255,255,0.7);
856
+ transition: all 0.2s;
857
+ }
858
+
859
+ .help-close:hover {
860
+ color: white;
861
+ }
862
+
863
+ .help-section {
864
+ margin-bottom: 2rem;
865
+ }
866
+
867
+ .help-title {
868
+ font-size: 1.5rem;
869
+ margin-bottom: 1rem;
870
+ color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
871
+ }
872
+
873
+ .help-content {
874
+ line-height: 1.6;
875
+ color: rgba(255,255,255,0.8);
876
+ }
877
+
878
+ .help-shortcut {
879
+ display: flex;
880
+ justify-content: space-between;
881
+ padding: 0.8rem 0;
882
+ border-bottom: 1px solid rgba(255,255,255,0.1);
883
+ }
884
+
885
+ .help-shortcut:last-child {
886
+ border-bottom: none;
887
+ }
888
+
889
+ .shortcut-keys {
890
+ display: flex;
891
+ gap: 0.5rem;
892
+ }
893
+
894
+ .shortcut-key {
895
+ background: rgba(255,255,255,0.1);
896
+ padding: 0.3rem 0.6rem;
897
+ border-radius: 4px;
898
+ font-family: 'Major Mono Display', monospace;
899
+ }
900
+
901
+ .api-visualizer {
902
+ position: absolute;
903
+ top: 0;
904
+ left: 0;
905
+ width: 100%;
906
+ height: 100%;
907
+ z-index: 1000;
908
+ display: none;
909
+ }
910
+
911
+ .api-visualizer.active {
912
+ display: block;
913
+ }
914
+
915
+ .visualizer-canvas {
916
+ position: absolute;
917
+ top: 0;
918
+ left: 0;
919
+ width: 100%;
920
+ height: 100%;
921
+ }
922
+
923
+ .visualizer-controls {
924
+ position: absolute;
925
+ bottom: 2rem;
926
+ left: 50%;
927
+ transform: translateX(-50%);
928
+ display: flex;
929
+ gap: 1rem;
930
+ z-index: 1001;
931
+ }
932
+
933
+ .visualizer-btn {
934
+ padding: 0.8rem 1.5rem;
935
+ border-radius: 30px;
936
+ background: rgba(30, 41, 59, 0.8);
937
+ border: 1px solid rgba(255,255,255,0.1);
938
+ color: white;
939
+ cursor: pointer;
940
+ transition: all 0.2s;
941
+ backdrop-filter: blur(5px);
942
+ }
943
+
944
+ .visualizer-btn:hover {
945
+ background: rgba(255,255,255,0.1);
946
+ }
947
+
948
+ .visualizer-btn i {
949
+ margin-right: 0.5rem;
950
+ }
951
+
952
+ .dashboard-tour {
953
+ position: absolute;
954
+ top: 0;
955
+ left: 0;
956
+ width: 100%;
957
+ height: 100%;
958
+ z-index: 10000;
959
+ pointer-events: none;
960
+ }
961
+
962
+ .tour-highlight {
963
+ position: absolute;
964
+ border-radius: 8px;
965
+ box-shadow: 0 0 0 9999px rgba(0,0,0,0.8), 0 0 0 3px hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
966
+ z-index: 10001;
967
+ transition: all 0.3s;
968
+ }
969
+
970
+ .tour-tooltip {
971
+ position: absolute;
972
+ background: rgba(30, 41, 59, 0.95);
973
+ border-radius: 8px;
974
+ padding: 1.5rem;
975
+ max-width: 300px;
976
+ box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
977
+ border: 1px solid rgba(255,255,255,0.1);
978
+ z-index: 10002;
979
+ pointer-events: auto;
980
+ }
981
+
982
+ .tour-tooltip-title {
983
+ font-size: 1.2rem;
984
+ margin-bottom: 0.8rem;
985
+ color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
986
+ }
987
+
988
+ .tour-tooltip-content {
989
+ margin-bottom: 1.5rem;
990
+ line-height: 1.5;
991
+ }
992
+
993
+ .tour-tooltip-footer {
994
+ display: flex;
995
+ justify-content: space-between;
996
+ align-items: center;
997
+ }
998
+
999
+ .tour-progress {
1000
+ font-size: 0.8rem;
1001
+ opacity: 0.7;
1002
+ }
1003
+
1004
+ .tour-btn {
1005
+ padding: 0.5rem 1rem;
1006
+ border-radius: 4px;
1007
+ background: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
1008
+ color: white;
1009
+ cursor: pointer;
1010
+ transition: all 0.2s;
1011
+ }
1012
+
1013
+ .tour-btn:hover {
1014
+ opacity: 0.9;
1015
+ }
1016
+
1017
+ .tour-btn-secondary {
1018
+ background: rgba(255,255,255,0.1);
1019
+ }
1020
+
1021
+ .dashboard-loading {
1022
+ position: fixed;
1023
+ top: 0;
1024
+ left: 0;
1025
+ width: 100%;
1026
+ height: 100%;
1027
+ background: #0f172a;
1028
+ display: flex;
1029
+ flex-direction: column;
1030
+ justify-content: center;
1031
+ align-items: center;
1032
+ z-index: 10000;
1033
+ }
1034
+
1035
+ .loading-spinner {
1036
+ width: 50px;
1037
+ height: 50px;
1038
+ border: 5px solid rgba(255,255,255,0.1);
1039
+ border-radius: 50%;
1040
+ border-top-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
1041
+ animation: spin 1s linear infinite;
1042
+ margin-bottom: 1.5rem;
1043
+ }
1044
+
1045
+ @keyframes spin {
1046
+ to { transform: rotate(360deg); }
1047
+ }
1048
+
1049
+ .loading-text {
1050
+ font-size: 1.2rem;
1051
+ letter-spacing: 2px;
1052
+ background: linear-gradient(to right, #fff, #aaa);
1053
+ -webkit-background-clip: text;
1054
+ -webkit-text-fill-color: transparent;
1055
+ }
1056
+
1057
+ .loading-progress {
1058
+ width: 200px;
1059
+ height: 4px;
1060
+ background: rgba(255,255,255,0.1);
1061
+ border-radius: 2px;
1062
+ margin-top: 1.5rem;
1063
+ overflow: hidden;
1064
+ }
1065
+
1066
+ .loading-progress-bar {
1067
+ height: 100%;
1068
+ background: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
1069
+ width: 0%;
1070
+ transition: width 0.3s;
1071
+ }
1072
+
1073
+ /* Responsive adjustments */
1074
+ @media (max-width: 768px) {
1075
+ .dashboard-title, .dashboard-subtitle {
1076
+ left: 1rem;
1077
+ }
1078
+
1079
+ .dashboard-toolbar {
1080
+ right: 1rem;
1081
+ top: 1rem;
1082
+ }
1083
+
1084
+ .control-panel {
1085
+ right: 1rem;
1086
+ bottom: 1rem;
1087
+ }
1088
+
1089
+ .mini-map {
1090
+ left: 1rem;
1091
+ bottom: 1rem;
1092
+ width: 150px;
1093
+ height: 150px;
1094
+ }
1095
+
1096
+ .dashboard-stats {
1097
+ bottom: 1rem;
1098
+ padding: 0.5rem 1rem;
1099
+ gap: 1rem;
1100
+ }
1101
+
1102
+ .search-bar {
1103
+ top: 1rem;
1104
+ width: 200px;
1105
+ }
1106
+
1107
+ .search-input:focus {
1108
+ width: 250px;
1109
+ }
1110
+
1111
+ .modal-content {
1112
+ width: 90%;
1113
+ padding: 1.5rem;
1114
+ }
1115
+
1116
+ .button-3d {
1117
+ width: 100px;
1118
+ height: 100px;
1119
+ }
1120
+
1121
+ .button-icon {
1122
+ font-size: 2rem;
1123
+ }
1124
+
1125
+ .button-label {
1126
+ font-size: 0.8rem;
1127
+ }
1128
+ }
1129
+ </style>
1130
+ </head>
1131
+ <body>
1132
+ <div class="dashboard-loading">
1133
+ <div class="loading-spinner"></div>
1134
+ <div class="loading-text">QUANTUM DASHBOARD</div>
1135
+ <div class="loading-progress">
1136
+ <div class="loading-progress-bar" id="loadingBar"></div>
1137
+ </div>
1138
+ </div>
1139
+
1140
+ <div class="dashboard" id="dashboard">
1141
+ <div class="dashboard-bg"></div>
1142
+ <div class="grid-lines"></div>
1143
+ <div class="particles" id="particles"></div>
1144
+ <div class="dashboard-overlay"></div>
1145
+
1146
+ <div class="dashboard-title">Quantum API Dashboard</div>
1147
+ <div class="dashboard-subtitle">Visualize, connect and manage your API ecosystem in 3D space</div>
1148
+
1149
+ <div class="dashboard-toolbar">
1150
+ <div class="toolbar-btn" id="groupModeBtn">
1151
+ <i class="fas fa-object-group"></i> Group Mode
1152
+ </div>
1153
+ <div class="toolbar-btn" id="connectionModeBtn">
1154
+ <i class="fas fa-plug"></i> Connect APIs
1155
+ </div>
1156
+ <div class="toolbar-btn" id="visualizerBtn">
1157
+ <i class="fas fa-project-diagram"></i> Visualizer
1158
+ </div>
1159
+ <div class="toolbar-btn" id="helpBtn">
1160
+ <i class="fas fa-question-circle"></i> Help
1161
+ </div>
1162
+ </div>
1163
+
1164
+ <div class="search-bar">
1165
+ <input type="text" class="search-input" placeholder="Search APIs, endpoints, tags..." id="searchInput">
1166
+ <div class="search-results" id="searchResults"></div>
1167
+ </div>
1168
+
1169
+ <div class="dashboard-stats">
1170
+ <div class="stat-item">
1171
+ <div class="stat-value" id="apiCount">0</div>
1172
+ <div class="stat-label">APIs</div>
1173
+ </div>
1174
+ <div class="stat-item">
1175
+ <div class="stat-value" id="connectionCount">0</div>
1176
+ <div class="stat-label">Connections</div>
1177
+ </div>
1178
+ <div class="stat-item">
1179
+ <div class="stat-value" id="groupCount">0</div>
1180
+ <div class="stat-label">Groups</div>
1181
+ </div>
1182
+ <div class="stat-item">
1183
+ <div class="stat-value" id="statusValue">100%</div>
1184
+ <div class="stat-label">Status</div>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ <!-- 3D Buttons will be added here dynamically -->
1189
+
1190
+ <!-- Connection lines will be added here dynamically -->
1191
+
1192
+ <!-- Button groups will be added here dynamically -->
1193
+
1194
+ <!-- Connection mode selector (hidden by default) -->
1195
+ <div class="connection-mode-selector" id="connectionModeSelector" style="display: none;">
1196
+ <div class="connection-mode-btn active" data-mode="sequential">Sequential</div>
1197
+ <div class="connection-mode-btn" data-mode="parallel">Parallel</div>
1198
+ <div class="connection-mode-btn" data-mode="conditional">Conditional</div>
1199
+ <div class="connection-mode-btn" data-mode="fallback">Fallback</div>
1200
+ </div>
1201
+
1202
+ <!-- Control Panel -->
1203
+ <div class="control-panel">
1204
+ <div class="control-button" id="settingsButton">
1205
+ <i class="fas fa-cog"></i>
1206
+ </div>
1207
+ <div class="control-button" id="addButton">
1208
+ <i class="fas fa-plus"></i>
1209
+ </div>
1210
+ <div class="control-button" id="minimapButton">
1211
+ <i class="fas fa-map"></i>
1212
+ </div>
1213
+ </div>
1214
+
1215
+ <!-- Mini Map -->
1216
+ <div class="mini-map" id="miniMap" style="display: none;">
1217
+ <div class="mini-map-content" id="miniMapContent"></div>
1218
+ <div class="mini-map-viewport" id="miniMapViewport"></div>
1219
+ </div>
1220
+ </div>
1221
+
1222
+ <!-- Context Menu -->
1223
+ <div class="context-menu" id="contextMenu">
1224
+ <div class="context-menu-item" data-action="edit">
1225
+ <i class="fas fa-edit"></i> Edit
1226
+ </div>
1227
+ <div class="context-menu-item" data-action="delete">
1228
+ <i class="fas fa-trash"></i> Delete
1229
+ </div>
1230
+ <div class="context-menu-item" data-action="duplicate">
1231
+ <i class="fas fa-copy"></i> Duplicate
1232
+ </div>
1233
+ <div class="context-menu-item" data-action="test">
1234
+ <i class="fas fa-bolt"></i> Test API
1235
+ </div>
1236
+ <div class="context-menu-item" data-action="document">
1237
+ <i class="fas fa-book"></i> Documentation
1238
+ </div>
1239
+ <div class="context-menu-item" data-action="group">
1240
+ <i class="fas fa-object-group"></i> Create Group
1241
+ </div>
1242
+ </div>
1243
+
1244
+ <!-- Settings Modal -->
1245
+ <div class="modal" id="settingsModal">
1246
+ <div class="modal-content">
1247
+ <div class="flex justify-between items-center mb-6">
1248
+ <h2 class="text-2xl font-bold">Dashboard Settings</h2>
1249
+ <button class="text-gray-400 hover:text-white" id="closeSettings">
1250
+ <i class="fas fa-times"></i>
1251
+ </button>
1252
+ </div>
1253
+
1254
+ <div class="response-tabs mb-6">
1255
+ <div class="response-tab active" data-tab="appearance">Appearance</div>
1256
+ <div class="response-tab" data-tab="behavior">Behavior</div>
1257
+ <div class="response-tab" data-tab="shortcuts">Shortcuts</div>
1258
+ <div class="response-tab" data-tab="importexport">Import/Export</div>
1259
+ </div>
1260
+
1261
+ <div class="tab-content active" data-tab-content="appearance">
1262
+ <div class="mb-8">
1263
+ <h3 class="text-xl font-semibold mb-4">Color Theme</h3>
1264
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
1265
+ <div class="color-theme-option" data-theme="blue">
1266
+ <div class="color-theme-preview bg-blue-500"></div>
1267
+ <div class="color-theme-label">Ocean</div>
1268
+ </div>
1269
+ <div class="color-theme-option" data-theme="purple">
1270
+ <div class="color-theme-preview bg-purple-500"></div>
1271
+ <div class="color-theme-label">Royal</div>
1272
+ </div>
1273
+ <div class="color-theme-option" data-theme="green">
1274
+ <div class="color-theme-preview bg-green-500"></div>
1275
+ <div class="color-theme-label">Emerald</div>
1276
+ </div>
1277
+ <div class="color-theme-option" data-theme="red">
1278
+ <div class="color-theme-preview bg-red-500"></div>
1279
+ <div class="color-theme-label">Ruby</div>
1280
+ </div>
1281
+ <div class="color-theme-option" data-theme="yellow">
1282
+ <div class="color-theme-preview bg-yellow-500"></div>
1283
+ <div class="color-theme-label">Gold</div>
1284
+ </div>
1285
+ <div class="color-theme-option" data-theme="pink">
1286
+ <div class="color-theme-preview bg-pink-500"></div>
1287
+ <div class="color-theme-label">Rose</div>
1288
+ </div>
1289
+ <div class="color-theme-option" data-theme="indigo">
1290
+ <div class="color-theme-preview bg-indigo-500"></div>
1291
+ <div class="color-theme-label">Sapphire</div>
1292
+ </div>
1293
+ <div class="color-theme-option" data-theme="teal">
1294
+ <div class="color-theme-preview bg-teal-500"></div>
1295
+ <div class="color-theme-label">Aqua</div>
1296
+ </div>
1297
+ </div>
1298
+
1299
+ <h3 class="text-xl font-semibold mb-4">Dashboard Appearance</h3>
1300
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
1301
+ <div>
1302
+ <label class="form-label">Background Intensity</label>
1303
+ <input type="range" id="bgIntensity" min="0" max="100" value="50" class="w-full">
1304
+ </div>
1305
+ <div>
1306
+ <label class="form-label">Grid Visibility</label>
1307
+ <select id="gridVisibility" class="bg-gray-800">
1308
+ <option value="visible">Visible</option>
1309
+ <option value="hidden">Hidden</option>
1310
+ </select>
1311
+ </div>
1312
+ <div>
1313
+ <label class="form-label">Particle Density</label>
1314
+ <input type="range" id="particleDensity" min="0" max="100" value="30" class="w-full">
1315
+ </div>
1316
+ <div>
1317
+ <label class="form-label">Animation Speed</label>
1318
+ <select id="animationSpeed" class="bg-gray-800">
1319
+ <option value="slow">Slow</option>
1320
+ <option value="normal" selected>Normal</option>
1321
+ <option value="fast">Fast</option>
1322
+ </select>
1323
+ </div>
1324
+ </div>
1325
+ </div>
1326
+
1327
+ <div class="flex space-x-3">
1328
+ <button class="btn">Save Changes</button>
1329
+ <button class="btn btn-secondary">Reset Defaults</button>
1330
+ </div>
1331
+ </div>
1332
+
1333
+ <div class="tab-content" data-tab-content="behavior">
1334
+ <div class="mb-8">
1335
+ <h3 class="text-xl font-semibold mb-4">Interaction Settings</h3>
1336
+ <div class="space-y-4 mb-6">
1337
+ <div class="flex items-center justify-between">
1338
+ <label class="form-label">Enable Hover Effects</label>
1339
+ <label class="switch">
1340
+ <input type="checkbox" checked>
1341
+ <span class="slider"></span>
1342
+ </label>
1343
+ </div>
1344
+ <div class="flex items-center justify-between">
1345
+ <label class="form-label">Enable Dragging</label>
1346
+ <label class="switch">
1347
+ <input type="checkbox" checked>
1348
+ <span class="slider"></span>
1349
+ </label>
1350
+ </div>
1351
+ <div class="flex items-center justify-between">
1352
+ <label class="form-label">Enable Context Menu</label>
1353
+ <label class="switch">
1354
+ <input type="checkbox" checked>
1355
+ <span class="slider"></span>
1356
+ </label>
1357
+ </div>
1358
+ <div class="flex items-center justify-between">
1359
+ <label class="form-label">Auto-arrange on Add</label>
1360
+ <label class="switch">
1361
+ <input type="checkbox">
1362
+ <span class="slider"></span>
1363
+ </label>
1364
+ </div>
1365
+ </div>
1366
+
1367
+ <h3 class="text-xl font-semibold mb-4">API Behavior</h3>
1368
+ <div class="space-y-4 mb-6">
1369
+ <div class="flex items-center justify-between">
1370
+ <label class="form-label">Auto-test on Click</label>
1371
+ <label class="switch">
1372
+ <input type="checkbox">
1373
+ <span class="slider"></span>
1374
+ </label>
1375
+ </div>
1376
+ <div class="flex items-center justify-between">
1377
+ <label class="form-label">Show Response by Default</label>
1378
+ <label class="switch">
1379
+ <input type="checkbox">
1380
+ <span class="slider"></span>
1381
+ </label>
1382
+ </div>
1383
+ <div class="flex items-center justify-between">
1384
+ <label class="form-label">Cache Responses</label>
1385
+ <label class="switch">
1386
+ <input type="checkbox" checked>
1387
+ <span class="slider"></span>
1388
+ </label>
1389
+ </div>
1390
+ </div>
1391
+ </div>
1392
+
1393
+ <div class="flex space-x-3">
1394
+ <button class="btn">Save Changes</button>
1395
+ <button class="btn btn-secondary">Reset Defaults</button>
1396
+ </div>
1397
+ </div>
1398
+
1399
+ <div class="tab-content" data-tab-content="shortcuts">
1400
+ <div class="mb-8">
1401
+ <h3 class="text-xl font-semibold mb-4">Keyboard Shortcuts</h3>
1402
+ <div class="space-y-2">
1403
+ <div class="help-shortcut">
1404
+ <div>Add New API</div>
1405
+ <div class="shortcut-keys">
1406
+ <span class="shortcut-key">Ctrl</span>
1407
+ <span class="shortcut-key">N</span>
1408
+ </div>
1409
+ </div>
1410
+ <div class="help-shortcut">
1411
+ <div>Toggle Group Mode</div>
1412
+ <div class="shortcut-keys">
1413
+ <span class="shortcut-key">G</span>
1414
+ </div>
1415
+ </div>
1416
+ <div class="help-shortcut">
1417
+ <div>Toggle Connection Mode</div>
1418
+ <div class="shortcut-keys">
1419
+ <span class="shortcut-key">C</span>
1420
+ </div>
1421
+ </div>
1422
+ <div class="help-shortcut">
1423
+ <div>Open Settings</div>
1424
+ <div class="shortcut-keys">
1425
+ <span class="shortcut-key">Ctrl</span>
1426
+ <span class="shortcut-key">,</span>
1427
+ </div>
1428
+ </div>
1429
+ <div class="help-shortcut">
1430
+ <div>Search APIs</div>
1431
+ <div class="shortcut-keys">
1432
+ <span class="shortcut-key">Ctrl</span>
1433
+ <span class="shortcut-key">K</span>
1434
+ </div>
1435
+ </div>
1436
+ <div class="help-shortcut">
1437
+ <div>Toggle Mini Map</div>
1438
+ <div class="shortcut-keys">
1439
+ <span class="shortcut-key">M</span>
1440
+ </div>
1441
+ </div>
1442
+ </div>
1443
+ </div>
1444
+
1445
+ <div class="flex space-x-3">
1446
+ <button class="btn">Save Changes</button>
1447
+ <button class="btn btn-secondary">Reset Defaults</button>
1448
+ </div>
1449
+ </div>
1450
+
1451
+ <div class="tab-content" data-tab-content="importexport">
1452
+ <div class="mb-8">
1453
+ <h3 class="text-xl font-semibold mb-4">Import Configuration</h3>
1454
+ <div class="mb-6">
1455
+ <label class="form-label">Import JSON Configuration</label>
1456
+ <textarea class="w-full h-32 font-mono text-sm" id="importJson" placeholder="Paste your JSON configuration here..."></textarea>
1457
+ </div>
1458
+ <div class="mb-6">
1459
+ <label class="form-label">Or Upload File</label>
1460
+ <div class="border-2 border-dashed border-gray-700 rounded-lg p-8 text-center">
1461
+ <i class="fas fa-file-upload text-3xl mb-2 text-gray-500"></i>
1462
+ <p class="text-gray-400 mb-4">Drag & drop your JSON file here, or click to browse</p>
1463
+ <button class="btn btn-secondary">Select File</button>
1464
+ </div>
1465
+ </div>
1466
+
1467
+ <h3 class="text-xl font-semibold mb-4">Export Configuration</h3>
1468
+ <div class="mb-6">
1469
+ <label class="form-label">Current Configuration</label>
1470
+ <textarea class="w-full h-32 font-mono text-sm" id="exportJson" readonly></textarea>
1471
+ </div>
1472
+ <div class="grid grid-cols-2 gap-4">
1473
+ <button class="btn btn-secondary">Copy to Clipboard</button>
1474
+ <button class="btn">Download JSON</button>
1475
+ </div>
1476
+ </div>
1477
+ </div>
1478
+ </div>
1479
+ </div>
1480
+
1481
+ <!-- API Browser Modal -->
1482
+ <div class="modal" id="apiModal">
1483
+ <div class="modal-content">
1484
+ <div class="flex justify-between items-center mb-6">
1485
+ <h2 class="text-2xl font-bold" id="apiModalTitle">API Endpoint</h2>
1486
+ <button class="text-gray-400 hover:text-white" id="closeApiModal">
1487
+ <i class="fas fa-times"></i>
1488
+ </button>
1489
+ </div>
1490
+
1491
+ <div class="mb-4">
1492
+ <div class="flex items-center space-x-2 mb-2">
1493
+ <span class="px-3 py-1 rounded-full bg-green-100 text-green-800 text-sm" id="apiMethod">GET</span>
1494
+ <span class="text-gray-300 text-sm truncate" id="apiUrl">https://api.val.town/v1/run/...</span>
1495
+ </div>
1496
+ <p class="text-gray-400" id="apiDescription">Accessing this API endpoint</p>
1497
+ </div>
1498
+
1499
+ <div class="response-tabs mb-6">
1500
+ <div class="response-tab active" data-tab="request">Request</div>
1501
+ <div class="response-tab" data-tab="documentation">Documentation</div>
1502
+ <div class="response-tab" data-tab="history">History</div>
1503
+ <div class="response-tab" data-tab="settings">Settings</div>
1504
+ </div>
1505
+
1506
+ <div class="tab-content active" data-tab-content="request">
1507
+ <div class="mb-6">
1508
+ <h3 class="text-lg font-semibold mb-3">Request Parameters</h3>
1509
+ <div class="space-y-3" id="parametersContainer">
1510
+ <div class="flex items-center space-x-2">
1511
+ <input type="text" placeholder="Parameter" class="flex-1" value="user_id">
1512
+ <input type="text" placeholder="Value" class="flex-1" value="12345">
1513
+ <button class="text-red-400 hover:text-red-300">
1514
+ <i class="fas fa-trash"></i>
1515
+ </button>
1516
+ </div>
1517
+ </div>
1518
+ <button class="text-blue-400 hover:text-blue-300 text-sm mt-2 flex items-center" id="addParameter">
1519
+ <i class="fas fa-plus mr-1"></i> Add Parameter
1520
+ </button>
1521
+ </div>
1522
+
1523
+ <div class="mb-6">
1524
+ <h3 class="text-lg font-semibold mb-3">Headers</h3>
1525
+ <div class="space-y-3" id="headersContainer">
1526
+ <div class="flex items-center space-x-2">
1527
+ <input type="text" value="Content-Type" class="flex-1 bg-gray-800">
1528
+ <input type="text" value="application/json" class="flex-1 bg-gray-800">
1529
+ <button class="text-red-400 hover:text-red-300">
1530
+ <i class="fas fa-trash"></i>
1531
+ </button>
1532
+ </div>
1533
+ <div class="flex items-center space-x-2">
1534
+ <input type="text" value="Authorization" class="flex-1 bg-gray-800">
1535
+ <input type="text" placeholder="Bearer token..." class="flex-1">
1536
+ <button class="text-red-400 hover:text-red-300">
1537
+ <i class="fas fa-trash"></i>
1538
+ </button>
1539
+ </div>
1540
+ </div>
1541
+ <button class="text-blue-400 hover:text-blue-300 text-sm mt-2 flex items-center" id="addHeader">
1542
+ <i class="fas fa-plus mr-1"></i> Add Header
1543
+ </button>
1544
+ </div>
1545
+
1546
+ <div class="mb-6">
1547
+ <h3 class="text-lg font-semibold mb-3">Request Body</h3>
1548
+ <textarea class="w-full h-32 font-mono text-sm" id="requestBody" placeholder="Enter JSON body..."></textarea>
1549
+ </div>
1550
+
1551
+ <div class="flex justify-end space-x-3">
1552
+ <button class="btn btn-secondary" id="testRequest">
1553
+ <i class="fas fa-bolt mr-2"></i> Test Request
1554
+ </button>
1555
+ <button class="btn" id="sendRequest">
1556
+ <i class="fas fa-paper-plane mr-2"></i> Send
1557
+ </button>
1558
+ </div>
1559
+
1560
+ <div class="mt-8 border-t border-gray-700 pt-6" id="responseSection" style="display: none;">
1561
+ <div class="response-tabs mb-4">
1562
+ <div class="response-tab active" data-response-tab="body">Body</div>
1563
+ <div class="response-tab" data-response-tab="headers">Headers</div>
1564
+ <div class="response-tab" data-response-tab="cookies">Cookies</div>
1565
+ <div class="response-tab" data-response-tab="timing">Timing</div>
1566
+ </div>
1567
+
1568
+ <div class="response-content active" data-response-content="body">
1569
+ <div class="flex items-center space-x-2 mb-3">
1570
+ <span class="px-3 py-1 rounded-full bg-green-100 text-green-800 text-sm">200 OK</span>
1571
+ <span class="text-gray-400 text-sm">1.2s</span>
1572
+ <span class="text-gray-400 text-sm">2.4 KB</span>
1573
+ </div>
1574
+ <pre class="bg-gray-800 p-4 rounded-lg overflow-x-auto text-sm font-mono" id="responseBody">{
1575
+ "status": "success",
1576
+ "data": {
1577
+ "user_id": 12345,
1578
+ "name": "John Doe",
1579
+ "email": "[email protected]"
1580
+ }
1581
+ }</pre>
1582
+ </div>
1583
+
1584
+ <div class="response-content" data-response-content="headers">
1585
+ <div class="code-block">
1586
+ HTTP/1.1 200 OK<br>
1587
+ Content-Type: application/json<br>
1588
+ Content-Length: 2345<br>
1589
+ Date: Wed, 21 Oct 2023 07:28:00 GMT<br>
1590
+ Server: nginx/1.18.0<br>
1591
+ Cache-Control: no-cache<br>
1592
+ Connection: keep-alive
1593
+ </div>
1594
+ </div>
1595
+
1596
+ <div class="response-content" data-response-content="cookies">
1597
+ <div class="code-block">
1598
+ No cookies received
1599
+ </div>
1600
+ </div>
1601
+
1602
+ <div class="response-content" data-response-content="timing">
1603
+ <div class="code-block">
1604
+ DNS Lookup: 120ms<br>
1605
+ TCP Connection: 80ms<br>
1606
+ TLS Handshake: 220ms<br>
1607
+ Request Sent: 5ms<br>
1608
+ Waiting (TTFB): 350ms<br>
1609
+ Content Download: 15ms<br>
1610
+ <br>
1611
+ Total: 790ms
1612
+ </div>
1613
+ </div>
1614
+ </div>
1615
+ </div>
1616
+
1617
+ <div class="tab-content" data-tab-content="documentation">
1618
+ <div class="mb-6">
1619
+ <h3 class="text-lg font-semibold mb-3">Endpoint Description</h3>
1620
+ <div class="bg-gray-800 p-4 rounded-lg">
1621
+ <p>This endpoint retrieves user profile information based on the provided user ID.</p>
1622
+ </div>
1623
+ </div>
1624
+
1625
+ <div class="mb-6">
1626
+ <h3 class="text-lg font-semibold mb-3">Parameters</h3>
1627
+ <div class="overflow-x-auto">
1628
+ <table class="w-full bg-gray-800 rounded-lg overflow-hidden">
1629
+ <thead>
1630
+ <tr class="bg-gray-700">
1631
+ <th class="p-3 text-left">Name</th>
1632
+ <th class="p-3 text-left">Type</th>
1633
+ <th class="p-3 text-left">Required</th>
1634
+ <th class="p-3 text-left">Description</th>
1635
+ </tr>
1636
+ </thead>
1637
+ <tbody>
1638
+ <tr class="border-b border-gray-700">
1639
+ <td class="p-3">user_id</td>
1640
+ <td class="p-3">integer</td>
1641
+ <td class="p-3">Yes</td>
1642
+ <td class="p-3">The ID of the user to retrieve</td>
1643
+ </tr>
1644
+ <tr class="border-b border-gray-700">
1645
+ <td class="p-3">fields</td>
1646
+ <td class="p-3">string</td>
1647
+ <td class="p-3">No</td>
1648
+ <td class="p-3">Comma-separated list of fields to return</td>
1649
+ </tr>
1650
+ </tbody>
1651
+ </table>
1652
+ </div>
1653
+ </div>
1654
+
1655
+ <div class="mb-6">
1656
+ <h3 class="text-lg font-semibold mb-3">Response</h3>
1657
+ <div class="bg-gray-800 p-4 rounded-lg">
1658
+ <h4 class="font-semibold mb-2">Success Response (200 OK)</h4>
1659
+ <pre class="font-mono text-sm">{
1660
+ "status": "success",
1661
+ "data": {
1662
+ "user_id": 12345,
1663
+ "name": "John Doe",
1664
+ "email": "[email protected]",
1665
+ "created_at": "2023-01-15T08:30:00Z"
1666
+ }
1667
+ }</pre>
1668
+
1669
+ <h4 class="font-semibold mt-4 mb-2">Error Response (404 Not Found)</h4>
1670
+ <pre class="font-mono text-sm">{
1671
+ "status": "error",
1672
+ "message": "User not found",
1673
+ "code": 404
1674
+ }</pre>
1675
+ </div>
1676
+ </div>
1677
+
1678
+ <div class="mb-6">
1679
+ <h3 class="text-lg font-semibold mb-3">Example Code</h3>
1680
+ <div class="bg-gray-800 p-4 rounded-lg">
1681
+ <h4 class="font-semibold mb-2">JavaScript (Fetch)</h4>
1682
+ <pre class="font-mono text-sm">fetch('https://api.example.com/users/12345')
1683
+ .then(response => response.json())
1684
+ .then(data => console.log(data))
1685
+ .catch(error => console.error('Error:', error));</pre>
1686
+
1687
+ <h4 class="font-semibold mt-4 mb-2">cURL</h4>
1688
+ <pre class="font-mono text-sm">curl -X GET "https://api.example.com/users/12345" \
1689
+ -H "Authorization: Bearer YOUR_TOKEN"</pre>
1690
+ </div>
1691
+ </div>
1692
+ </div>
1693
+
1694
+ <div class="tab-content" data-tab-content="history">
1695
+ <div class="mb-6">
1696
+ <h3 class="text-lg font-semibold mb-3">Request History</h3>
1697
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
1698
+ <div class="history-item p-4 border-b border-gray-700">
1699
+ <div class="flex justify-between items-center mb-2">
1700
+ <div class="flex items-center space-x-2">
1701
+ <span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">200</span>
1702
+ <span class="text-sm">GET /users/12345</span>
1703
+ </div>
1704
+ <span class="text-xs text-gray-400">2 minutes ago</span>
1705
+ </div>
1706
+ <div class="text-xs text-gray-400 truncate">Response: {"status":"success","data":{"user_id":12345,"name":"John Doe"}}</div>
1707
+ </div>
1708
+ <div class="history-item p-4 border-b border-gray-700">
1709
+ <div class="flex justify-between items-center mb-2">
1710
+ <div class="flex items-center space-x-2">
1711
+ <span class="px-2 py-1 rounded-full bg-red-100 text-red-800 text-xs">404</span>
1712
+ <span class="text-sm">GET /users/99999</span>
1713
+ </div>
1714
+ <span class="text-xs text-gray-400">1 hour ago</span>
1715
+ </div>
1716
+ <div class="text-xs text-gray-400 truncate">Response: {"status":"error","message":"User not found"}</div>
1717
+ </div>
1718
+ <div class="history-item p-4">
1719
+ <div class="flex justify-between items-center mb-2">
1720
+ <div class="flex items-center space-x-2">
1721
+ <span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">200</span>
1722
+ <span class="text-sm">GET /users/12345</span>
1723
+ </div>
1724
+ <span class="text-xs text-gray-400">Yesterday</span>
1725
+ </div>
1726
+ <div class="text-xs text-gray-400 truncate">Response: {"status":"success","data":{"user_id":12345,"name":"John Doe"}}</div>
1727
+ </div>
1728
+ </div>
1729
+ </div>
1730
+ </div>
1731
+
1732
+ <div class="tab-content" data-tab-content="settings">
1733
+ <div class="mb-6">
1734
+ <h3 class="text-lg font-semibold mb-3">Endpoint Settings</h3>
1735
+ <div class="space-y-4">
1736
+ <div>
1737
+ <label class="form-label">Endpoint Name</label>
1738
+ <input type="text" value="Get User Profile" class="w-full">
1739
+ </div>
1740
+ <div>
1741
+ <label class="form-label">Endpoint URL</label>
1742
+ <input type="text" value="https://api.example.com/users/{user_id}" class="w-full">
1743
+ </div>
1744
+ <div>
1745
+ <label class="form-label">HTTP Method</label>
1746
+ <select class="w-full">
1747
+ <option>GET</option>
1748
+ <option>POST</option>
1749
+ <option>PUT</option>
1750
+ <option>DELETE</option>
1751
+ <option>PATCH</option>
1752
+ </select>
1753
+ </div>
1754
+ <div class="flex items-center justify-between">
1755
+ <label class="form-label">Cache Responses</label>
1756
+ <label class="switch">
1757
+ <input type="checkbox" checked>
1758
+ <span class="slider"></span>
1759
+ </label>
1760
+ </div>
1761
+ </div>
1762
+ </div>
1763
+
1764
+ <div class="mb-6">
1765
+ <h3 class="text-lg font-semibold mb-3">Button Appearance</h3>
1766
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
1767
+ <div>
1768
+ <label class="form-label">Icon</label>
1769
+ <select class="w-full">
1770
+ <option value="fa-user">User</option>
1771
+ <option value="fa-database">Database</option>
1772
+ <option value="fa-plug">API</option>
1773
+ <option value="fa-bell">Notification</option>
1774
+ </select>
1775
+ </div>
1776
+ <div>
1777
+ <label class="form-label">Color</label>
1778
+ <div class="flex space-x-2">
1779
+ <div class="color-option bg-blue-500 active" data-color="blue"></div>
1780
+ <div class="color-option bg-purple-500" data-color="purple"></div>
1781
+ <div class="color-option bg-green-500" data-color="green"></div>
1782
+ <div class="color-option bg-red-500" data-color="red"></div>
1783
+ </div>
1784
+ </div>
1785
+ </div>
1786
+ </div>
1787
+
1788
+ <div class="flex space-x-3">
1789
+ <button class="btn">Save Changes</button>
1790
+ <button class="btn btn-secondary">Reset</button>
1791
+ </div>
1792
+ </div>
1793
+ </div>
1794
+ </div>
1795
+
1796
+ <!-- Help Modal -->
1797
+ <div class="dashboard-help" id="helpModal">
1798
+ <div class="help-close" id="closeHelp">
1799
+ <i class="fas fa-times"></i>
1800
+ </div>
1801
+
1802
+ <div class="help-section">
1803
+ <h2 class="help-title">Quantum API Dashboard Guide</h2>
1804
+ <div class="help-content">
1805
+ <p>Welcome to the Quantum API Dashboard, a revolutionary way to visualize, connect and manage your API ecosystem in 3D space.</p>
1806
+ </div>
1807
+ </div>
1808
+
1809
+ <div class="help-section">
1810
+ <h3 class="help-title">Getting Started</h3>
1811
+ <div class="help-content">
1812
+ <p>To begin, add your first API endpoint by clicking the <strong>+</strong> button in the control panel. Configure the endpoint details and click "Add".</p>
1813
+ <p>You can then click on any API button to view and test the endpoint, or drag buttons to arrange them in your preferred layout.</p>
1814
+ </div>
1815
+ </div>
1816
+
1817
+ <div class="help-section">
1818
+ <h3 class="help-title">Key Features</h3>
1819
+ <div class="help-content">
1820
+ <p><strong>3D Visualization:</strong> APIs are represented as interactive 3D buttons that respond to your mouse movements.</p>
1821
+ <p><strong>Connection Mode:</strong> Create visual connections between APIs to represent workflows and dependencies.</p>
1822
+ <p><strong>Grouping:</strong> Organize related APIs into logical groups for better organization.</p>
1823
+ <p><strong>Mini Map:</strong> Navigate large dashboards easily with the overview mini map.</p>
1824
+ <p><strong>Visualizer:</strong> See your API ecosystem in a dynamic 3D graph visualization.</p>
1825
+ </div>
1826
+ </div>
1827
+
1828
+ <div class="help-section">
1829
+ <h3 class="help-title">Keyboard Shortcuts</h3>
1830
+ <div class="help-content">
1831
+ <div class="help-shortcut">
1832
+ <div>Add New API</div>
1833
+ <div class="shortcut-keys">
1834
+ <span class="shortcut-key">Ctrl</span>
1835
+ <span class="shortcut-key">N</span>
1836
+ </div>
1837
+ </div>
1838
+ <div class="help-shortcut">
1839
+ <div>Toggle Group Mode</div>
1840
+ <div class="shortcut-keys">
1841
+ <span class="shortcut-key">G</span>
1842
+ </div>
1843
+ </div>
1844
+ <div class="help-shortcut">
1845
+ <div>Toggle Connection Mode</div>
1846
+ <div class="shortcut-keys">
1847
+ <span class="shortcut-key">C</span>
1848
+ </div>
1849
+ </div>
1850
+ <div class="help-shortcut">
1851
+ <div>Open Settings</div>
1852
+ <div class="shortcut-keys">
1853
+ <span class="shortcut-key">Ctrl</span>
1854
+ <span class="shortcut-key">,</span>
1855
+ </div>
1856
+ </div>
1857
+ <div class="help-shortcut">
1858
+ <div>Search APIs</div>
1859
+ <div class="shortcut-keys">
1860
+ <span class="shortcut-key">Ctrl
1861
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ whats missing, not asked for, not considered, not done right and or not working?
2
+ evolve everything and make it next level, never before considered solution
3
+ contiinue
4
+ carry on