Hugging Face's logo

Spaces:
Bujurocks
/
transformer
Running

App Files Community
Bujurocks commited on
Commit
cbe2509
·
verified ·
1 Parent(s): 95bd99e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +933 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Transformer
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: green
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: transformer
3
+ emoji: 🐳
4
+ colorFrom: green
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,933 @@
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 MAINFRAME | BujuRocks Neural Interface</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/effects/AnaglyphEffect.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&family=Share+Tech+Mono&display=swap');
14
+
15
+ :root {
16
+ --neon-cyan: #0ff;
17
+ --neon-pink: #f0f;
18
+ --matrix-green: #00ff41;
19
+ --hologram-blue: #00f7ff;
20
+ --mainframe-purple: #6a00ff;
21
+ }
22
+
23
+ body {
24
+ margin: 0;
25
+ overflow: hidden;
26
+ font-family: 'Share Tech Mono', monospace;
27
+ background: #000;
28
+ color: var(--hologram-blue);
29
+ cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="%2300f7ff" stroke-width="1"/><circle cx="8" cy="8" r="1" fill="%2300f7ff"/></svg>'), auto;
30
+ }
31
+
32
+ #canvas-container {
33
+ position: absolute;
34
+ width: 100%;
35
+ height: 100%;
36
+ z-index: 1;
37
+ }
38
+
39
+ .content-overlay {
40
+ position: relative;
41
+ z-index: 2;
42
+ pointer-events: none;
43
+ }
44
+
45
+ .clickable {
46
+ pointer-events: auto;
47
+ cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="%23f0f" stroke-width="1"/><circle cx="8" cy="8" r="1" fill="%23f0f"/></svg>'), auto;
48
+ }
49
+
50
+ .quantum-text {
51
+ text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
52
+ animation: pulse 1.5s infinite alternate;
53
+ letter-spacing: 2px;
54
+ }
55
+
56
+ @keyframes pulse {
57
+ 0% { opacity: 0.7; text-shadow: 0 0 10px var(--neon-cyan); }
58
+ 100% { opacity: 1; text-shadow: 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-pink); }
59
+ }
60
+
61
+ .holographic-border {
62
+ border: 1px solid rgba(0, 247, 255, 0.3);
63
+ background: rgba(0, 10, 20, 0.3);
64
+ box-shadow: 0 0 15px rgba(0, 247, 255, 0.5),
65
+ inset 0 0 15px rgba(0, 247, 255, 0.3);
66
+ backdrop-filter: blur(5px);
67
+ position: relative;
68
+ overflow: hidden;
69
+ }
70
+
71
+ .holographic-border::before {
72
+ content: '';
73
+ position: absolute;
74
+ top: -50%;
75
+ left: -50%;
76
+ width: 200%;
77
+ height: 200%;
78
+ background: linear-gradient(
79
+ 45deg,
80
+ transparent 45%,
81
+ rgba(0, 247, 255, 0.1) 50%,
82
+ transparent 55%
83
+ );
84
+ animation: shine 3s infinite linear;
85
+ transform: rotate(30deg);
86
+ }
87
+
88
+ @keyframes shine {
89
+ 0% { transform: translateX(-100%) rotate(30deg); }
90
+ 100% { transform: translateX(100%) rotate(30deg); }
91
+ }
92
+
93
+ .anaglyph {
94
+ color: red;
95
+ text-shadow: 3px 0 cyan;
96
+ }
97
+
98
+ .hidden-3d {
99
+ display: none;
100
+ }
101
+
102
+ .three-d-goggles .hidden-3d {
103
+ display: block;
104
+ }
105
+
106
+ .three-d-goggles .hidden-flat {
107
+ display: none;
108
+ }
109
+
110
+ .floating-nav {
111
+ position: fixed;
112
+ bottom: 30px;
113
+ right: 30px;
114
+ z-index: 100;
115
+ }
116
+
117
+ .video-link {
118
+ background: radial-gradient(circle, rgba(0,255,255,0.3), rgba(106,0,255,0.5));
119
+ border-radius: 50%;
120
+ width: 80px;
121
+ height: 80px;
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ animation: float 3s ease-in-out infinite, pulse-glow 2s infinite alternate;
126
+ box-shadow: 0 0 20px var(--neon-cyan);
127
+ }
128
+
129
+ @keyframes float {
130
+ 0% { transform: translateY(0px); }
131
+ 50% { transform: translateY(-15px); }
132
+ 100% { transform: translateY(0px); }
133
+ }
134
+
135
+ @keyframes pulse-glow {
136
+ 0% { box-shadow: 0 0 20px var(--neon-cyan); }
137
+ 100% { box-shadow: 0 0 30px var(--neon-pink); }
138
+ }
139
+
140
+ .video-icon {
141
+ font-size: 2rem;
142
+ color: white;
143
+ }
144
+
145
+ .matrix-fall {
146
+ position: absolute;
147
+ top: 0;
148
+ left: 0;
149
+ width: 100%;
150
+ height: 100%;
151
+ z-index: 0;
152
+ opacity: 0.1;
153
+ pointer-events: none;
154
+ }
155
+
156
+ .cyberpunk-input {
157
+ background: rgba(0, 10, 20, 0.5);
158
+ border: 1px solid var(--neon-cyan);
159
+ color: var(--hologram-blue);
160
+ padding: 10px 15px;
161
+ font-family: 'Share Tech Mono', monospace;
162
+ outline: none;
163
+ transition: all 0.3s;
164
+ }
165
+
166
+ .cyberpunk-input:focus {
167
+ box-shadow: 0 0 15px var(--neon-cyan);
168
+ border-color: var(--neon-pink);
169
+ }
170
+
171
+ .cyberpunk-btn {
172
+ background: linear-gradient(135deg, rgba(0,255,255,0.2), rgba(106,0,255,0.4));
173
+ border: 1px solid var(--neon-cyan);
174
+ color: white;
175
+ padding: 10px 25px;
176
+ font-family: 'Share Tech Mono', monospace;
177
+ text-transform: uppercase;
178
+ letter-spacing: 1px;
179
+ transition: all 0.3s;
180
+ position: relative;
181
+ overflow: hidden;
182
+ }
183
+
184
+ .cyberpunk-btn:hover {
185
+ background: linear-gradient(135deg, rgba(0,255,255,0.4), rgba(106,0,255,0.6));
186
+ box-shadow: 0 0 20px var(--neon-cyan);
187
+ transform: translateY(-2px);
188
+ }
189
+
190
+ .cyberpunk-btn::after {
191
+ content: '';
192
+ position: absolute;
193
+ top: -50%;
194
+ left: -50%;
195
+ width: 200%;
196
+ height: 200%;
197
+ background: linear-gradient(
198
+ to bottom,
199
+ rgba(255,255,255,0) 0%,
200
+ rgba(255,255,255,0.1) 50%,
201
+ rgba(255,255,255,0) 100%
202
+ );
203
+ transform: rotate(30deg);
204
+ animation: shine 3s infinite;
205
+ }
206
+
207
+ .terminal-text {
208
+ font-family: 'Share Tech Mono', monospace;
209
+ color: var(--matrix-green);
210
+ text-shadow: 0 0 5px var(--matrix-green);
211
+ line-height: 1.4;
212
+ }
213
+
214
+ .scanline {
215
+ position: absolute;
216
+ top: 0;
217
+ left: 0;
218
+ width: 100%;
219
+ height: 100%;
220
+ background: linear-gradient(
221
+ to bottom,
222
+ rgba(0, 247, 255, 0.03) 0%,
223
+ rgba(0, 247, 255, 0.08) 50%,
224
+ rgba(0, 247, 255, 0.03) 100%
225
+ );
226
+ background-size: 100% 4px;
227
+ pointer-events: none;
228
+ z-index: 10;
229
+ animation: scanline 8s linear infinite;
230
+ }
231
+
232
+ @keyframes scanline {
233
+ 0% { background-position: 0 0; }
234
+ 100% { background-position: 0 100%; }
235
+ }
236
+
237
+ .hologram-grid {
238
+ position: absolute;
239
+ top: 0;
240
+ left: 0;
241
+ width: 100%;
242
+ height: 100%;
243
+ background:
244
+ linear-gradient(rgba(0, 247, 255, 0.05) 1px, transparent 1px),
245
+ linear-gradient(90deg, rgba(0, 247, 255, 0.05) 1px, transparent 1px);
246
+ background-size: 20px 20px;
247
+ pointer-events: none;
248
+ z-index: 1;
249
+ }
250
+
251
+ .circuit-pattern {
252
+ position: absolute;
253
+ top: 0;
254
+ left: 0;
255
+ width: 100%;
256
+ height: 100%;
257
+ background-image:
258
+ radial-gradient(circle at 10% 20%, rgba(106, 0, 255, 0.03) 0%, transparent 2%),
259
+ radial-gradient(circle at 90% 80%, rgba(0, 247, 255, 0.03) 0%, transparent 2%),
260
+ radial-gradient(circle at 30% 50%, rgba(255, 0, 255, 0.03) 0%, transparent 3%),
261
+ radial-gradient(circle at 70% 30%, rgba(0, 255, 255, 0.03) 0%, transparent 3%);
262
+ pointer-events: none;
263
+ z-index: 1;
264
+ }
265
+
266
+ .glitch-effect {
267
+ position: relative;
268
+ }
269
+
270
+ .glitch-effect::before, .glitch-effect::after {
271
+ content: attr(data-text);
272
+ position: absolute;
273
+ top: 0;
274
+ left: 0;
275
+ width: 100%;
276
+ height: 100%;
277
+ opacity: 0.8;
278
+ }
279
+
280
+ .glitch-effect::before {
281
+ color: #0f0;
282
+ z-index: -1;
283
+ animation: glitch 3s infinite;
284
+ }
285
+
286
+ .glitch-effect::after {
287
+ color: #f0f;
288
+ z-index: -2;
289
+ animation: glitch 2s infinite reverse;
290
+ }
291
+
292
+ @keyframes glitch {
293
+ 0% { transform: translate(0); }
294
+ 20% { transform: translate(-3px, 3px); }
295
+ 40% { transform: translate(-3px, -3px); }
296
+ 60% { transform: translate(3px, 3px); }
297
+ 80% { transform: translate(3px, -3px); }
298
+ 100% { transform: translate(0); }
299
+ }
300
+
301
+ .binary-rain {
302
+ position: absolute;
303
+ top: 0;
304
+ left: 0;
305
+ width: 100%;
306
+ height: 100%;
307
+ z-index: 0;
308
+ opacity: 0.05;
309
+ pointer-events: none;
310
+ background-image:
311
+ linear-gradient(transparent 95%, rgba(0, 255, 255, 0.1) 100%);
312
+ background-size: 2px 20px;
313
+ animation: binaryRain 0.5s linear infinite;
314
+ }
315
+
316
+ @keyframes binaryRain {
317
+ 0% { background-position: 0 0; }
318
+ 100% { background-position: 0 20px; }
319
+ }
320
+
321
+ .neon-underline {
322
+ position: relative;
323
+ display: inline-block;
324
+ }
325
+
326
+ .neon-underline::after {
327
+ content: '';
328
+ position: absolute;
329
+ bottom: -5px;
330
+ left: 0;
331
+ width: 100%;
332
+ height: 2px;
333
+ background: var(--neon-cyan);
334
+ box-shadow: 0 0 10px var(--neon-cyan);
335
+ transform: scaleX(0);
336
+ transform-origin: left;
337
+ transition: transform 0.3s ease;
338
+ }
339
+
340
+ .neon-underline:hover::after {
341
+ transform: scaleX(1);
342
+ }
343
+
344
+ .status-indicator {
345
+ width: 12px;
346
+ height: 12px;
347
+ border-radius: 50%;
348
+ display: inline-block;
349
+ margin-right: 8px;
350
+ box-shadow: 0 0 5px currentColor;
351
+ }
352
+
353
+ .status-active {
354
+ background-color: var(--matrix-green);
355
+ animation: pulse 1.5s infinite;
356
+ }
357
+
358
+ .status-warning {
359
+ background-color: #ff0;
360
+ animation: pulse 1s infinite;
361
+ }
362
+
363
+ .status-critical {
364
+ background-color: #f00;
365
+ animation: pulse 0.5s infinite;
366
+ }
367
+
368
+ .hexagon {
369
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
370
+ }
371
+
372
+ .dashboard-panel {
373
+ background: rgba(0, 5, 15, 0.7);
374
+ border: 1px solid rgba(0, 247, 255, 0.2);
375
+ box-shadow: 0 0 30px rgba(0, 247, 255, 0.1);
376
+ position: relative;
377
+ }
378
+
379
+ .dashboard-panel::before {
380
+ content: '';
381
+ position: absolute;
382
+ top: 0;
383
+ left: 0;
384
+ right: 0;
385
+ height: 2px;
386
+ background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
387
+ animation: panelGlow 3s infinite;
388
+ }
389
+
390
+ @keyframes panelGlow {
391
+ 0% { opacity: 0.3; }
392
+ 50% { opacity: 1; }
393
+ 100% { opacity: 0.3; }
394
+ }
395
+
396
+ .data-stream {
397
+ position: relative;
398
+ overflow: hidden;
399
+ }
400
+
401
+ .data-stream::after {
402
+ content: '';
403
+ position: absolute;
404
+ top: 0;
405
+ left: 0;
406
+ width: 100%;
407
+ height: 100%;
408
+ background: linear-gradient(to bottom, transparent 90%, rgba(0, 247, 255, 0.1) 100%);
409
+ animation: streamFlow 10s linear infinite;
410
+ }
411
+
412
+ @keyframes streamFlow {
413
+ 0% { transform: translateY(-100%); }
414
+ 100% { transform: translateY(100%); }
415
+ }
416
+ </style>
417
+ </head>
418
+ <body class="three-d-goggles">
419
+ <div id="canvas-container"></div>
420
+ <div class="hologram-grid"></div>
421
+ <div class="circuit-pattern"></div>
422
+ <div class="binary-rain"></div>
423
+ <div class="scanline"></div>
424
+
425
+ <div class="content-overlay min-h-screen flex flex-col">
426
+ <!-- Header -->
427
+ <header class="py-6 px-8 flex justify-between items-center border-b border-gray-800">
428
+ <div class="text-4xl font-bold font-orbitron quantum-text glitch-effect" data-text="QUANTUM MAINFRAME">
429
+ <span class="hidden-3d">QUANTUM MAINFRAME</span>
430
+ <span class="hidden-flat">NEURAL INTERFACE</span>
431
+ <span class="text-purple-400">v12.7.5</span>
432
+ </div>
433
+ <div class="flex space-x-4 items-center">
434
+ <div class="flex items-center mr-4">
435
+ <span class="status-indicator status-active"></span>
436
+ <span class="text-xs uppercase tracking-widest">ONLINE</span>
437
+ </div>
438
+ <div class="flex items-center">
439
+ <span class="text-xs mr-2">POWER:</span>
440
+ <div class="flex space-x-1">
441
+ <div class="w-2 h-4 bg-green-500 animate-pulse"></div>
442
+ <div class="w-2 h-4 bg-green-500 animate-pulse delay-75"></div>
443
+ <div class="w-2 h-4 bg-green-500 animate-pulse delay-100"></div>
444
+ <div class="w-2 h-4 bg-green-500 animate-pulse delay-150"></div>
445
+ <div class="w-2 h-4 bg-green-500 animate-pulse delay-200"></div>
446
+ </div>
447
+ </div>
448
+ <button class="px-6 py-2 cyberpunk-btn clickable">
449
+ <span class="hidden-3d">ENGAGE</span>
450
+ <span class="hidden-flat">ACCESS</span>
451
+ </button>
452
+ <button id="toggle3d" class="px-4 py-2 cyberpunk-btn clickable">
453
+ <i class="fas fa-vr-cardboard mr-2"></i>3D MODE
454
+ </button>
455
+ </div>
456
+ </header>
457
+
458
+ <!-- Main Content -->
459
+ <main class="flex-grow container mx-auto px-8 py-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
460
+ <!-- Left Panel - Quantum Terminal -->
461
+ <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
462
+ <!-- Quantum Core Display -->
463
+ <div class="dashboard-panel holographic-border p-6 col-span-2">
464
+ <div class="flex justify-between items-center mb-6">
465
+ <h2 class="text-2xl font-orbitron text-cyan-400">
466
+ <i class="fas fa-atom mr-2"></i>QUANTUM CORE STATUS
467
+ </h2>
468
+ <div class="text-xs font-mono text-green-400">
469
+ <span class="blink">█</span> REAL-TIME MONITORING ACTIVE
470
+ </div>
471
+ </div>
472
+
473
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
474
+ <div class="holographic-border p-4">
475
+ <div class="flex justify-between items-center mb-2">
476
+ <span class="text-sm uppercase tracking-wider">Qubits Entangled</span>
477
+ <span class="font-mono text-green-400">12,847</span>
478
+ </div>
479
+ <div class="w-full bg-gray-900 rounded-full h-1.5">
480
+ <div class="bg-gradient-to-r from-cyan-500 to-purple-500 h-1.5 rounded-full" style="width: 92%"></div>
481
+ </div>
482
+ </div>
483
+ <div class="holographic-border p-4">
484
+ <div class="flex justify-between items-center mb-2">
485
+ <span class="text-sm uppercase tracking-wider">Decoherence</span>
486
+ <span class="font-mono text-yellow-400">3.2%</span>
487
+ </div>
488
+ <div class="w-full bg-gray-900 rounded-full h-1.5">
489
+ <div class="bg-gradient-to-r from-yellow-500 to-red-500 h-1.5 rounded-full" style="width: 3.2%"></div>
490
+ </div>
491
+ </div>
492
+ <div class="holographic-border p-4">
493
+ <div class="flex justify-between items-center mb-2">
494
+ <span class="text-sm uppercase tracking-wider">Temporal Sync</span>
495
+ <span class="font-mono text-purple-400">99.8%</span>
496
+ </div>
497
+ <div class="w-full bg-gray-900 rounded-full h-1.5">
498
+ <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-1.5 rounded-full" style="width: 99.8%"></div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="holographic-border p-4 mb-6">
504
+ <div class="flex justify-between items-center mb-4">
505
+ <h3 class="text-lg font-mono text-cyan-300">
506
+ <i class="fas fa-project-diagram mr-2"></i>NEURAL NETWORK ACTIVITY
507
+ </h3>
508
+ <div class="text-xs">
509
+ <span class="text-green-400">▲</span> 12.7% <span class="text-gray-500">from last cycle</span>
510
+ </div>
511
+ </div>
512
+ <div class="flex space-x-4">
513
+ <div class="flex-1">
514
+ <div class="flex justify-between text-xs mb-1">
515
+ <span>Input Layer</span>
516
+ <span>87%</span>
517
+ </div>
518
+ <div class="w-full bg-gray-900 rounded-full h-1.5">
519
+ <div class="bg-cyan-500 h-1.5 rounded-full" style="width: 87%"></div>
520
+ </div>
521
+ </div>
522
+ <div class="flex-1">
523
+ <div class="flex justify-between text-xs mb-1">
524
+ <span>Hidden Layers</span>
525
+ <span>94%</span>
526
+ </div>
527
+ <div class="w-full bg-gray-900 rounded-full h-1.5">
528
+ <div class="bg-purple-500 h-1.5 rounded-full" style="width: 94%"></div>
529
+ </div>
530
+ </div>
531
+ <div class="flex-1">
532
+ <div class="flex justify-between text-xs mb-1">
533
+ <span>Output</span>
534
+ <span>76%</span>
535
+ </div>
536
+ <div class="w-full bg-gray-900 rounded-full h-1.5">
537
+ <div class="bg-pink-500 h-1.5 rounded-full" style="width: 76%"></div>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
544
+ <a href="https://youtu.be/1ZZtqDB9Fno?si=f1UxhefUOwUzHRDY" target="_blank" class="clickable">
545
+ <div class="holographic-border p-4 hover:bg-cyan-900 transition-all h-full">
546
+ <div class="flex items-center">
547
+ <div class="hexagon bg-gradient-to-br from-cyan-500 to-purple-600 w-12 h-12 flex items-center justify-center mr-3">
548
+ <i class="fas fa-play text-white"></i>
549
+ </div>
550
+ <div>
551
+ <h3 class="text-lg font-bold mb-1 text-white">QUANTUM DEMO</h3>
552
+ <p class="text-xs text-cyan-300">Hyperspace traversal protocol</p>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </a>
557
+ <a href="https://youtube.com/@bujurocks?si=4TGnSQjtNI990ST7" target="_blank" class="clickable">
558
+ <div class="holographic-border p-4 hover:bg-purple-900 transition-all h-full">
559
+ <div class="flex items-center">
560
+ <div class="hexagon bg-gradient-to-br from-purple-500 to-pink-600 w-12 h-12 flex items-center justify-center mr-3">
561
+ <i class="fas fa-music text-white"></i>
562
+ </div>
563
+ <div>
564
+ <h3 class="text-lg font-bold mb-1 text-white">BUJUROCKS</h3>
565
+ <p class="text-xs text-purple-300">Music parallelization matrix</p>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </a>
570
+ </div>
571
+ </div>
572
+
573
+ <!-- Data Stream Console -->
574
+ <div class="dashboard-panel holographic-border p-4 data-stream">
575
+ <div class="flex justify-between items-center mb-3">
576
+ <h3 class="font-mono text-green-400">
577
+ <i class="fas fa-terminal mr-2"></i>SYSTEM STREAM
578
+ </h3>
579
+ <div class="text-xs text-gray-500">
580
+ <span class="blink">█</span> LIVE FEED
581
+ </div>
582
+ </div>
583
+ <div class="terminal-text text-xs h-40 overflow-y-auto font-mono">
584
+ <p>> Initializing quantum core... <span class="text-green-400">DONE</span></p>
585
+ <p>> Establishing neural network connections... <span class="text-green-400">COMPLETE</span></p>
586
+ <p>> Calibrating hyperspace coordinates... <span class="text-yellow-400">WARNING: 0.3% DEVIATION</span></p>
587
+ <p>> Loading music synthesis modules... <span class="text-green-400">LOADED</span></p>
588
+ <p>> Quantum entanglement stable at 99.7%</p>
589
+ <p>> Temporal synchronization within acceptable parameters</p>
590
+ <p>> Neural activity spike detected in sector 7</p>
591
+ <p>> Processing 1.2 petabyte data stream...</p>
592
+ <p>> Analyzing 12.7 million quantum states</p>
593
+ <p>> Music tensor flow optimized at 64x compression</p>
594
+ <p>> Warning: Minor decoherence detected in qubit cluster 42</p>
595
+ <p>> Compensating with auxiliary quantum gates</p>
596
+ <p>> System nominal - all parameters within thresholds</p>
597
+ <p>> Ready for hyperspace traversal protocol</p>
598
+ </div>
599
+ </div>
600
+
601
+ <!-- Quantum Visualization -->
602
+ <div class="dashboard-panel holographic-border p-4 flex flex-col">
603
+ <div class="flex justify-between items-center mb-3">
604
+ <h3 class="font-mono text-purple-400">
605
+ <i class="fas fa-chart-line mr-2"></i>VISUALIZATION MATRIX
606
+ </h3>
607
+ <div class="text-xs text-gray-500">
608
+ <span class="blink">█</span> RENDERING
609
+ </div>
610
+ </div>
611
+ <div class="flex-1 bg-black bg-opacity-70 rounded flex items-center justify-center">
612
+ <div class="text-center">
613
+ <div class="text-5xl mb-2 text-cyan-400 animate-pulse">
614
+ <i class="fas fa-atom"></i>
615
+ </div>
616
+ <div class="text-xs uppercase tracking-widest text-gray-400">
617
+ QUANTUM STATE VISUALIZER
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
+ <!-- Right Panel - Control Center -->
625
+ <div class="space-y-6">
626
+ <!-- User Access Terminal -->
627
+ <div class="dashboard-panel holographic-border p-6">
628
+ <h2 class="text-2xl font-orbitron text-pink-400 mb-6">
629
+ <i class="fas fa-user-astronaut mr-2"></i>NEURAL INTERFACE
630
+ </h2>
631
+
632
+ <div class="space-y-4">
633
+ <div>
634
+ <label class="block text-sm uppercase tracking-wider mb-1">Access ID</label>
635
+ <input type="text" class="w-full cyberpunk-input" placeholder="Enter quantum signature">
636
+ </div>
637
+ <div>
638
+ <label class="block text-sm uppercase tracking-wider mb-1">Neural Key</label>
639
+ <input type="password" class="w-full cyberpunk-input" placeholder="Biometric encryption">
640
+ </div>
641
+ <div class="pt-2">
642
+ <button class="w-full cyberpunk-btn py-3">
643
+ <i class="fas fa-fingerprint mr-2"></i>AUTHENTICATE
644
+ </button>
645
+ </div>
646
+ </div>
647
+
648
+ <div class="mt-6 pt-4 border-t border-gray-800">
649
+ <div class="flex justify-between items-center mb-2">
650
+ <span class="text-sm uppercase tracking-wider">Security Level</span>
651
+ <span class="font-mono text-yellow-400">QUANTUM ENCRYPTED</span>
652
+ </div>
653
+ <div class="w-full bg-gray-900 rounded-full h-1.5">
654
+ <div class="bg-gradient-to-r from-green-500 to-blue-500 h-1.5 rounded-full" style="width: 100%"></div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+
659
+ <!-- Quantum Controls -->
660
+ <div class="dashboard-panel holographic-border p-6">
661
+ <h2 class="text-2xl font-orbitron text-purple-400 mb-6">
662
+ <i class="fas fa-sliders-h mr-2"></i>CONTROL MATRIX
663
+ </h2>
664
+
665
+ <div class="space-y-4">
666
+ <div>
667
+ <label class="block text-sm uppercase tracking-wider mb-2">Hyperspace Compression</label>
668
+ <input type="range" min="0" max="100" value="87" class="w-full h-1.5 bg-gray-900 rounded-full appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-cyan-500">
669
+ <div class="flex justify-between text-xs mt-1">
670
+ <span>0%</span>
671
+ <span class="font-mono">87%</span>
672
+ <span>100%</span>
673
+ </div>
674
+ </div>
675
+
676
+ <div>
677
+ <label class="block text-sm uppercase tracking-wider mb-2">Music Tensor Flow</label>
678
+ <input type="range" min="1" max="128" value="64" class="w-full h-1.5 bg-gray-900 rounded-full appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-pink-500">
679
+ <div class="flex justify-between text-xs mt-1">
680
+ <span>1x</span>
681
+ <span class="font-mono">64x</span>
682
+ <span>128x</span>
683
+ </div>
684
+ </div>
685
+
686
+ <div class="grid grid-cols-2 gap-3 pt-2">
687
+ <button class="cyberpunk-btn">
688
+ <i class="fas fa-play mr-2"></i>ENGAGE
689
+ </button>
690
+ <button class="cyberpunk-btn bg-opacity-20 bg-red-900 border-red-500 hover:bg-red-800">
691
+ <i class="fas fa-stop mr-2"></i>ABORT
692
+ </button>
693
+ </div>
694
+ </div>
695
+ </div>
696
+
697
+ <!-- Video Demo Panel -->
698
+ <div class="dashboard-panel holographic-border p-6">
699
+ <h2 class="text-2xl font-orbitron text-cyan-400 mb-4">
700
+ <i class="fas fa-video mr-2"></i>DEMONSTRATION PROTOCOL
701
+ </h2>
702
+ <p class="text-sm mb-4 text-gray-400">
703
+ Experience quantum reality compression through our latest hyperspace traversal protocol
704
+ </p>
705
+
706
+ <a href="https://youtu.be/1ZZtqDB9Fno?si=f1UxhefUOwUzHRDY" target="_blank" class="clickable block">
707
+ <div class="holographic-border hover:bg-cyan-900 transition-all p-4 flex items-center">
708
+ <div class="bg-black bg-opacity-70 w-16 h-16 flex items-center justify-center mr-4">
709
+ <div class="text-2xl text-white">
710
+ <i class="fas fa-play"></i>
711
+ </div>
712
+ </div>
713
+ <div>
714
+ <div class="font-bold text-white">Quantum Reality v12.7</div>
715
+ <div class="text-xs text-cyan-300">Click to initiate playback sequence</div>
716
+ </div>
717
+ </div>
718
+ </a>
719
+
720
+ <div class="mt-4 flex justify-between text-xs">
721
+ <div class="flex items-center">
722
+ <span class="status-indicator status-active mr-1"></span>
723
+ <span>STREAM READY</span>
724
+ </div>
725
+ <div>
726
+ <span class="text-gray-500">LATENCY:</span> <span class="font-mono text-green-400">17ms</span>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ </div>
731
+ </main>
732
+
733
+ <!-- Floating Navigation -->
734
+ <div class="floating-nav clickable">
735
+ <a href="https://youtu.be/1ZZtqDB9Fno?si=f1UxhefUOwUzHRDY" target="_blank" class="video-link">
736
+ <div class="video-icon"><i class="fas fa-play"></i></div>
737
+ </a>
738
+ </div>
739
+
740
+ <!-- Footer -->
741
+ <footer class="py-4 px-8 text-center text-xs border-t border-gray-800">
742
+ <p class="uppercase tracking-widest">QUANTUM MAINFRAME INTERFACE v12.7.5 | BUJUROCKS NEURAL SYNTHESIS ENGINE</p>
743
+ <p class="mt-1 text-gray-600">WARNING: Unauthorized access may cause quantum decoherence and temporal anomalies</p>
744
+ </footer>
745
+ </div>
746
+
747
+ <script>
748
+ // Initialize Three.js scene
749
+ let scene, camera, renderer, effect, particles;
750
+
751
+ function init() {
752
+ // Scene
753
+ scene = new THREE.Scene();
754
+
755
+ // Camera
756
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
757
+ camera.position.z = 30;
758
+
759
+ // Renderer
760
+ renderer = new THREE.WebGLRenderer({
761
+ antialias: true,
762
+ alpha: true
763
+ });
764
+ renderer.setSize(window.innerWidth, window.innerHeight);
765
+ document.getElementById('canvas-container').appendChild(renderer.domElement);
766
+
767
+ // Anaglyph effect for 3D
768
+ effect = new THREE.AnaglyphEffect(renderer);
769
+ effect.setSize(window.innerWidth, window.innerHeight);
770
+
771
+ // Create quantum energy field
772
+ createQuantumField();
773
+
774
+ // Controls
775
+ const controls = new THREE.OrbitControls(camera, renderer.domElement);
776
+ controls.enableZoom = false;
777
+ controls.enablePan = false;
778
+
779
+ // Handle window resize
780
+ window.addEventListener('resize', onWindowResize, false);
781
+
782
+ // Toggle 3D button
783
+ document.getElementById('toggle3d').addEventListener('click', toggle3D);
784
+
785
+ // Simulate terminal typing
786
+ simulateTerminal();
787
+
788
+ // Start animation loop
789
+ animate();
790
+ }
791
+
792
+ function createQuantumField() {
793
+ // Create central quantum core
794
+ const geometry = new THREE.IcosahedronGeometry(10, 3);
795
+ const material = new THREE.MeshPhongMaterial({
796
+ color: 0x00ffff,
797
+ emissive: 0x0066ff,
798
+ specular: 0x00ffff,
799
+ shininess: 100,
800
+ wireframe: true,
801
+ transparent: true,
802
+ opacity: 0.7
803
+ });
804
+
805
+ const core = new THREE.Mesh(geometry, material);
806
+ scene.add(core);
807
+
808
+ // Add pulsing energy spheres
809
+ const sphereGeometry = new THREE.SphereGeometry(3, 32, 32);
810
+ const sphereMaterial = new THREE.MeshBasicMaterial({
811
+ color: 0x00ffff,
812
+ wireframe: true,
813
+ transparent: true,
814
+ opacity: 0.5
815
+ });
816
+
817
+ const spheres = [];
818
+ for (let i = 0; i < 8; i++) {
819
+ const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
820
+ sphere.position.x = (Math.random() - 0.5) * 40;
821
+ sphere.position.y = (Math.random() - 0.5) * 40;
822
+ sphere.position.z = (Math.random() - 0.5) * 40;
823
+ spheres.push(sphere);
824
+ scene.add(sphere);
825
+ }
826
+
827
+ // Create particle system
828
+ const particleCount = 5000;
829
+ const particlesGeometry = new THREE.BufferGeometry();
830
+ const posArray = new Float32Array(particleCount * 3);
831
+
832
+ for (let i = 0; i < particleCount * 3; i++) {
833
+ posArray[i] = (Math.random() - 0.5) * 100;
834
+ }
835
+
836
+ particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
837
+
838
+ const particlesMaterial = new THREE.PointsMaterial({
839
+ size: 0.1,
840
+ color: 0x00ffff,
841
+ transparent: true,
842
+ opacity: 0.8,
843
+ blending: THREE.AdditiveBlending
844
+ });
845
+
846
+ particles = new THREE.Points(particlesGeometry, particlesMaterial);
847
+ scene.add(particles);
848
+
849
+ // Add directional lighting
850
+ const light = new THREE.DirectionalLight(0x00ffff, 1);
851
+ light.position.set(1, 1, 1);
852
+ scene.add(light);
853
+
854
+ const backLight = new THREE.DirectionalLight(0xff00ff, 0.5);
855
+ backLight.position.set(-1, -1, -1);
856
+ scene.add(backLight);
857
+
858
+ // Add ambient light
859
+ const ambient = new THREE.AmbientLight(0x404040);
860
+ scene.add(ambient);
861
+ }
862
+
863
+ function simulateTerminal() {
864
+ const terminal = document.querySelector('.terminal-text');
865
+ const lines = terminal.innerHTML.split('<br>');
866
+ terminal.innerHTML = '';
867
+
868
+ let currentLine = 0;
869
+ let currentChar = 0;
870
+ let typingInterval = setInterval(() => {
871
+ if (currentLine < lines.length) {
872
+ if (currentChar <= lines[currentLine].length) {
873
+ terminal.innerHTML = lines.slice(0, currentLine).join('<br>') + '<br>' + lines[currentLine].substring(0, currentChar) + '<span class="blink">█</span>';
874
+ currentChar++;
875
+ } else {
876
+ currentLine++;
877
+ currentChar = 0;
878
+ if (currentLine < lines.length) {
879
+ terminal.innerHTML = lines.slice(0, currentLine).join('<br>') + '<br><span class="blink">█</span>';
880
+ } else {
881
+ terminal.innerHTML = lines.join('<br>');
882
+ clearInterval(typingInterval);
883
+ }
884
+ }
885
+ }
886
+ }, 20);
887
+ }
888
+
889
+ function onWindowResize() {
890
+ camera.aspect = window.innerWidth / window.innerHeight;
891
+ camera.updateProjectionMatrix();
892
+ renderer.setSize(window.innerWidth, window.innerHeight);
893
+ effect.setSize(window.innerWidth, window.innerHeight);
894
+ }
895
+
896
+ function toggle3D() {
897
+ document.body.classList.toggle('three-d-goggles');
898
+ }
899
+
900
+ let time = 0;
901
+ function animate() {
902
+ requestAnimationFrame(animate);
903
+
904
+ time += 0.01;
905
+
906
+ // Rotate quantum core
907
+ if (scene.children[0]) {
908
+ scene.children[0].rotation.x += 0.005;
909
+ scene.children[0].rotation.y += 0.007;
910
+
911
+ // Pulsing effect
912
+ const pulse = Math.sin(time) * 0.5 + 0.5;
913
+ scene.children[0].material.emissiveIntensity = pulse * 0.5;
914
+ }
915
+
916
+ // Rotate particles
917
+ if (particles) {
918
+ particles.rotation.x += 0.0005;
919
+ particles.rotation.y += 0.0007;
920
+ }
921
+
922
+ // Render scene
923
+ if (document.body.classList.contains('three-d-goggles')) {
924
+ effect.render(scene, camera);
925
+ } else {
926
+ renderer.render(scene, camera);
927
+ }
928
+ }
929
+
930
+ init();
931
+ </script>
932
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Bujurocks/transformer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
933
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Build a webside 3D internet a virtual world that can replicate real life pages, images or videos.virtual world for 3D Goggles. Make the colors only seen by 3d Google users, make the content script sharp and for super computer engineer psa and software developers level. Add this link on the website https://youtu.be/1ZZtqDB9Fno?si=f1UxhefUOwUzHRDY. Make this webside futuristic and also very HYPERSPACE SIMULATOR. Make it very smart and intelligent Add a link to this webside https://youtube.com/@bujurocks?si=4TGnSQjtNI990ST7. Add to webside The transformer architecture BujuRocks music parallelize computations Transformer is an encoder-decoder architecture BujuRocks AI models are trained on trillions of tokens, billions of parameters, and ever-longer context windows. AI models are trained on trillions of tokens, billions of parameters, and ever-longer context windows. 200K token context window HYPERSPACE SIMULATOR BujuRocks music. Click links to page https://youtu.be/1ZZtqDB9Fno?si=f1UxhefUOwUzHRDY
2
+ Add this link to webside "https://youtu.be/1ZZtqDB9Fno?si=f1UxhefUOwUzHRDY"
3
+ Make this side look more futuristic and super computer vision