Hugging Face's logo

Spaces:
druvx13
/
infinite-universe-explorer
Running

App Files Community
druvx13 commited on
Commit
e6720d7
·
verified ·
1 Parent(s): 790cc76

Create index2.html

Browse files
Files changed (1) hide show
  1. index2.html +1206 -0
index2.html ADDED
@@ -0,0 +1,1206 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Infinite Universe Explorer</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
+ <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
10
+ <style>
11
+ @keyframes float {
12
+ 0%, 100% { transform: translateY(0); }
13
+ 50% { transform: translateY(-20px); }
14
+ }
15
+ @keyframes spin {
16
+ 0% { transform: rotate(0deg); }
17
+ 100% { transform: rotate(360deg); }
18
+ }
19
+ @keyframes pulse {
20
+ 0%, 100% { transform: scale(1); }
21
+ 50% { transform: scale(1.05); }
22
+ }
23
+ @keyframes rainbow {
24
+ 0% { background-position: 0% 50%; }
25
+ 50% { background-position: 100% 50%; }
26
+ 100% { background-position: 0% 50%; }
27
+ }
28
+ .floating {
29
+ animation: float 6s ease-in-out infinite;
30
+ }
31
+ .spinning {
32
+ animation: spin 20s linear infinite;
33
+ }
34
+ .pulsing {
35
+ animation: pulse 3s ease infinite;
36
+ }
37
+ .theme-transition {
38
+ transition: all 0.5s ease;
39
+ }
40
+ .particle {
41
+ position: absolute;
42
+ background: currentColor;
43
+ border-radius: 50%;
44
+ pointer-events: none;
45
+ }
46
+ .gradient-mask {
47
+ mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
48
+ }
49
+ .code-container {
50
+ max-height: 0;
51
+ overflow: hidden;
52
+ transition: max-height 0.5s ease;
53
+ }
54
+ .code-container.open {
55
+ max-height: 500px;
56
+ }
57
+ .copy-btn {
58
+ transition: all 0.2s ease;
59
+ }
60
+ .copy-btn.copied {
61
+ background-color: #10B981 !important;
62
+ }
63
+ .rainbow-text {
64
+ background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
65
+ background-size: 400% 400%;
66
+ -webkit-background-clip: text;
67
+ background-clip: text;
68
+ color: transparent;
69
+ animation: rainbow 8s ease infinite;
70
+ }
71
+ .history-item {
72
+ position: relative;
73
+ overflow: hidden;
74
+ }
75
+ .history-item::after {
76
+ content: '';
77
+ position: absolute;
78
+ inset: 0;
79
+ background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7));
80
+ }
81
+ .history-item:hover::after {
82
+ background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.7));
83
+ }
84
+ .history-item-title {
85
+ position: absolute;
86
+ bottom: 0;
87
+ left: 0;
88
+ right: 0;
89
+ padding: 8px;
90
+ font-size: 12px;
91
+ text-align: center;
92
+ z-index: 2;
93
+ }
94
+ .pattern-selector {
95
+ opacity: 0;
96
+ transition: all 0.3s ease;
97
+ }
98
+ .pattern-selector:hover {
99
+ opacity: 1;
100
+ }
101
+ .pattern-container:hover .pattern-selector {
102
+ opacity: 1;
103
+ }
104
+ .scrollbar-hide::-webkit-scrollbar {
105
+ display: none;
106
+ }
107
+ .scrollbar-hide {
108
+ -ms-overflow-style: none;
109
+ scrollbar-width: none;
110
+ }
111
+ .tooltip {
112
+ position: relative;
113
+ }
114
+ .tooltip-text {
115
+ visibility: hidden;
116
+ width: 120px;
117
+ background-color: rgba(0,0,0,0.8);
118
+ color: #fff;
119
+ text-align: center;
120
+ border-radius: 6px;
121
+ padding: 5px;
122
+ position: absolute;
123
+ z-index: 1;
124
+ bottom: 125%;
125
+ left: 50%;
126
+ transform: translateX(-50%);
127
+ opacity: 0;
128
+ transition: opacity 0.3s;
129
+ }
130
+ .tooltip:hover .tooltip-text {
131
+ visibility: visible;
132
+ opacity: 1;
133
+ }
134
+ .favorite-btn {
135
+ transition: all 0.3s ease;
136
+ }
137
+ .favorite-btn.active {
138
+ color: #f59e0b;
139
+ transform: scale(1.1);
140
+ }
141
+ .screenshot-btn {
142
+ transition: all 0.3s ease;
143
+ }
144
+ .screenshot-btn:hover {
145
+ transform: translateY(-2px);
146
+ }
147
+ .download-btn {
148
+ transition: all 0.3s ease;
149
+ }
150
+ .download-btn:hover {
151
+ transform: translateY(-2px);
152
+ }
153
+ .share-btn {
154
+ transition: all 0.3s ease;
155
+ }
156
+ .share-btn:hover {
157
+ transform: translateY(-2px);
158
+ }
159
+ .modal {
160
+ transition: opacity 0.3s ease, transform 0.3s ease;
161
+ }
162
+ .modal-enter {
163
+ opacity: 0;
164
+ transform: scale(0.9);
165
+ }
166
+ .modal-enter-active {
167
+ opacity: 1;
168
+ transform: scale(1);
169
+ }
170
+ .modal-exit {
171
+ opacity: 1;
172
+ transform: scale(1);
173
+ }
174
+ .modal-exit-active {
175
+ opacity: 0;
176
+ transform: scale(0.9);
177
+ }
178
+ @media (max-width: 768px) {
179
+ .main-content {
180
+ flex-direction: column;
181
+ }
182
+ .pattern-container {
183
+ order: -1;
184
+ margin-bottom: 1.5rem;
185
+ }
186
+ .pattern-selector {
187
+ opacity: 1;
188
+ bottom: 8px;
189
+ }
190
+ .pattern-btn {
191
+ width: 36px;
192
+ height: 36px;
193
+ font-size: 14px;
194
+ }
195
+ .color-grid {
196
+ grid-template-columns: repeat(5, 1fr);
197
+ }
198
+ .header-text {
199
+ font-size: 2.5rem;
200
+ }
201
+ .subheader-text {
202
+ font-size: 1rem;
203
+ }
204
+ .action-buttons {
205
+ flex-direction: column;
206
+ gap: 0.5rem;
207
+ }
208
+ .action-buttons button {
209
+ width: 100%;
210
+ }
211
+ .history-item, .favorite-item {
212
+ width: 80px;
213
+ height: 80px;
214
+ }
215
+ .history-item-title {
216
+ font-size: 10px;
217
+ padding: 4px;
218
+ }
219
+ }
220
+ </style>
221
+ </head>
222
+ <body class="min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800 text-white theme-transition">
223
+ <div id="particles-container" class="fixed inset-0 overflow-hidden pointer-events-none"></div>
224
+
225
+ <!-- Modal -->
226
+ <div id="modal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 hidden opacity-0 transition-opacity duration-300">
227
+ <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl max-w-2xl w-full p-6 shadow-2xl border border-white/10 transform transition-all duration-300">
228
+ <div class="flex justify-between items-center mb-4">
229
+ <h3 class="text-xl font-bold" id="modal-title">Modal Title</h3>
230
+ <button id="close-modal" class="text-white/70 hover:text-white text-2xl">&times;</button>
231
+ </div>
232
+ <div class="mb-4" id="modal-content">
233
+ Modal content goes here
234
+ </div>
235
+ <div class="flex justify-end gap-2">
236
+ <button id="modal-cancel" class="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20">Cancel</button>
237
+ <button id="modal-confirm" class="px-4 py-2 rounded-lg bg-gradient-to-r from-amber-400 to-pink-500 hover:opacity-90">Confirm</button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="container mx-auto px-4 py-8 sm:py-12">
243
+ <header class="text-center mb-8 sm:mb-16">
244
+ <div class="floating inline-block mb-4 sm:mb-6">
245
+ <div class="spinning text-4xl sm:text-6xl mb-2">
246
+ <i class="fas fa-infinity"></i>
247
+ </div>
248
+ </div>
249
+ <h1 class="text-3xl sm:text-5xl font-bold mb-2 sm:mb-4 tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-amber-300 to-pink-400 header-text">
250
+ Infinite Universe Explorer
251
+ </h1>
252
+ <p class="text-base sm:text-xl opacity-80 max-w-2xl mx-auto subheader-text">
253
+ Discover truly infinite random themes with unique colors and patterns!
254
+ </p>
255
+ </header>
256
+
257
+ <main class="max-w-4xl mx-auto">
258
+ <div class="bg-white/10 backdrop-blur-lg rounded-3xl overflow-hidden border border-white/20 mb-8 sm:mb-12">
259
+ <div class="p-6 sm:p-8 md:p-12">
260
+ <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-center main-content">
261
+ <div class="flex-1 w-full">
262
+ <div class="flex justify-between items-center mb-3 sm:mb-4">
263
+ <h2 class="text-2xl sm:text-3xl font-bold">Current Dimension</h2>
264
+ <div class="flex gap-1 sm:gap-2">
265
+ <button id="favorite-btn" class="favorite-btn text-lg sm:text-xl p-1 sm:p-2 rounded-full hover:bg-white/10">
266
+ <i class="far fa-star"></i>
267
+ </button>
268
+ <button id="screenshot-btn" class="screenshot-btn text-lg sm:text-xl p-1 sm:p-2 rounded-full hover:bg-white/10 tooltip">
269
+ <i class="fas fa-camera"></i>
270
+ <span class="tooltip-text">Take Screenshot</span>
271
+ </button>
272
+ <button id="share-btn" class="share-btn text-lg sm:text-xl p-1 sm:p-2 rounded-full hover:bg-white/10 tooltip">
273
+ <i class="fas fa-share-alt"></i>
274
+ <span class="tooltip-text">Share Dimension</span>
275
+ </button>
276
+ </div>
277
+ </div>
278
+ <div id="theme-display" class="mb-4 sm:mb-6 p-4 sm:p-6 rounded-xl bg-black/20 border border-white/10">
279
+ <div class="flex items-center gap-2 sm:gap-3 mb-2 sm:mb-4">
280
+ <span id="theme-icon" class="text-2xl sm:text-3xl"><i class="fas fa-question"></i></span>
281
+ <span id="theme-name" class="text-xl sm:text-2xl font-medium">Unknown Dimension</span>
282
+ </div>
283
+ <p id="theme-description" class="opacity-80 text-sm sm:text-base">
284
+ Waiting to discover your first random dimension...
285
+ </p>
286
+ </div>
287
+ <div class="grid grid-cols-5 gap-1 sm:gap-2 mb-3 sm:mb-4 color-grid">
288
+ <div id="color1" class="h-10 sm:h-12 rounded-md relative group">
289
+ <div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div>
290
+ </div>
291
+ <div id="color2" class="h-10 sm:h-12 rounded-md relative group">
292
+ <div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div>
293
+ </div>
294
+ <div id="color3" class="h-10 sm:h-12 rounded-md relative group">
295
+ <div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div>
296
+ </div>
297
+ <div id="color4" class="h-10 sm:h-12 rounded-md relative group">
298
+ <div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div>
299
+ </div>
300
+ <div id="color5" class="h-10 sm:h-12 rounded-md relative group">
301
+ <div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div>
302
+ </div>
303
+ </div>
304
+ <div class="flex justify-between items-center mb-4 sm:mb-6">
305
+ <div id="hex-codes" class="text-xs sm:text-sm opacity-80 flex gap-1 sm:gap-2 flex-wrap">
306
+ <!-- Hex codes will be displayed here -->
307
+ </div>
308
+ <button id="copy-hex-btn" class="copy-btn text-xs bg-white/10 hover:bg-white/20 px-2 sm:px-3 py-1 rounded-full flex items-center gap-1">
309
+ <i class="fas fa-copy"></i> Copy
310
+ </button>
311
+ </div>
312
+ <div class="flex flex-col sm:flex-row gap-2 sm:gap-4 mb-3 sm:mb-4 action-buttons">
313
+ <button id="generate-btn" class="pulsing flex-1 py-3 sm:py-4 px-4 sm:px-6 bg-gradient-to-r from-amber-400 to-pink-500 rounded-xl font-bold text-base sm:text-lg hover:opacity-90 transition-all duration-300 shadow-lg hover:shadow-xl active:scale-95">
314
+ <i class="fas fa-random mr-1 sm:mr-2"></i> Explore New Dimension
315
+ </button>
316
+ <button id="download-btn" class="download-btn py-3 sm:py-4 px-4 sm:px-6 bg-white/5 hover:bg-white/10 rounded-xl font-bold text-base sm:text-lg transition-all duration-300 shadow hover:shadow-lg">
317
+ <i class="fas fa-download"></i>
318
+ </button>
319
+ </div>
320
+ <button id="toggle-css-btn" class="w-full py-2 sm:py-3 px-4 sm:px-6 bg-white/5 hover:bg-white/10 rounded-xl font-medium transition-all duration-300 flex items-center justify-center gap-1 sm:gap-2">
321
+ <i class="fas fa-code"></i> Generate CSS Code
322
+ </button>
323
+ </div>
324
+ <div class="flex-1 w-full relative pattern-container">
325
+ <div class="relative h-48 sm:h-64 md:h-80 rounded-2xl overflow-hidden border-2 border-white/20">
326
+ <div id="pattern-display" class="absolute inset-0 flex items-center justify-center">
327
+ <div class="text-4xl sm:text-6xl opacity-20"><i class="fas fa-star"></i></div>
328
+ </div>
329
+ </div>
330
+ <div class="pattern-selector absolute bottom-2 sm:bottom-4 left-0 right-0 flex justify-center gap-1 sm:gap-2">
331
+ <button data-pattern="0" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip">
332
+ <i class="fas fa-border-all text-sm sm:text-base"></i>
333
+ <span class="tooltip-text">Grid Pattern</span>
334
+ </button>
335
+ <button data-pattern="1" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip">
336
+ <i class="fas fa-circle-notch text-sm sm:text-base"></i>
337
+ <span class="tooltip-text">Radial Pattern</span>
338
+ </button>
339
+ <button data-pattern="2" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip">
340
+ <i class="fas fa-dot-circle text-sm sm:text-base"></i>
341
+ <span class="tooltip-text">Particle Field</span>
342
+ </button>
343
+ <button data-pattern="3" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip">
344
+ <i class="fas fa-shapes text-sm sm:text-base"></i>
345
+ <span class="tooltip-text">Organic Shapes</span>
346
+ </button>
347
+ <button data-pattern="4" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip">
348
+ <i class="fas fa-grip-lines text-sm sm:text-base"></i>
349
+ <span class="tooltip-text">Stripes</span>
350
+ </button>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- CSS Code Container -->
356
+ <div id="css-code-container" class="code-container mt-4 sm:mt-6 bg-black/30 rounded-xl overflow-hidden">
357
+ <div class="p-3 sm:p-4 border-t border-white/10 flex justify-between items-center">
358
+ <h3 class="font-mono font-bold text-xs sm:text-sm">CSS Variables</h3>
359
+ <button id="copy-css-btn" class="copy-btn text-xs bg-white/10 hover:bg-white/20 px-2 sm:px-3 py-1 rounded-full flex items-center gap-1">
360
+ <i class="fas fa-copy"></i> Copy
361
+ </button>
362
+ </div>
363
+ <pre id="css-code" class="p-3 sm:p-4 text-xs sm:text-sm font-mono overflow-auto max-h-64 bg-black/20"></pre>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-8 sm:mb-12">
369
+ <div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all">
370
+ <div class="text-2xl sm:text-3xl mb-3 sm:mb-4 text-amber-300"><i class="fas fa-infinity"></i></div>
371
+ <h3 class="text-lg sm:text-xl font-bold mb-1 sm:mb-2">Infinite Variety</h3>
372
+ <p class="opacity-80 text-sm sm:text-base">Every dimension is completely unique with randomly generated colors and patterns.</p>
373
+ </div>
374
+ <div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all">
375
+ <div class="text-2xl sm:text-3xl mb-3 sm:mb-4 text-pink-400"><i class="fas fa-atom"></i></div>
376
+ <h3 class="text-lg sm:text-xl font-bold mb-1 sm:mb-2">Quantum Colors</h3>
377
+ <p class="opacity-80 text-sm sm:text-base">Colors are generated using quantum-inspired algorithms for maximum uniqueness.</p>
378
+ </div>
379
+ <div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all">
380
+ <div class="text-2xl sm:text-3xl mb-3 sm:mb-4 text-purple-300"><i class="fas fa-shapes"></i></div>
381
+ <h3 class="text-lg sm:text-xl font-bold mb-1 sm:mb-2">Dynamic Patterns</h3>
382
+ <p class="opacity-80 text-sm sm:text-base">Patterns are procedurally generated to match each dimension's unique properties.</p>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 mb-8 sm:mb-12">
387
+ <div class="flex justify-between items-center mb-3 sm:mb-4">
388
+ <h2 class="text-xl sm:text-2xl font-bold">Dimension History</h2>
389
+ <div class="flex gap-1 sm:gap-2">
390
+ <button id="clear-history" class="text-xs bg-red-500/20 hover:bg-red-500/30 text-red-300 px-2 sm:px-3 py-1 rounded-full flex items-center gap-1">
391
+ <i class="fas fa-trash"></i> Clear
392
+ </button>
393
+ </div>
394
+ </div>
395
+ <div id="history-container" class="flex overflow-x-auto pb-3 sm:pb-4 gap-3 sm:gap-4 gradient-mask scrollbar-hide">
396
+ <!-- History items will be added here -->
397
+ </div>
398
+ </div>
399
+
400
+ <div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 mb-8 sm:mb-12">
401
+ <h2 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-4">Favorites</h2>
402
+ <div id="favorites-container" class="flex overflow-x-auto pb-3 sm:pb-4 gap-3 sm:gap-4 gradient-mask scrollbar-hide">
403
+ <!-- Favorites will be added here -->
404
+ </div>
405
+ </div>
406
+ </main>
407
+
408
+ <footer class="text-center opacity-70 mt-12 sm:mt-20 pb-6 sm:pb-8">
409
+ <p>Journey through the infinite multiverse <i class="fas fa-infinity text-purple-300"></i></p>
410
+ </footer>
411
+ </div>
412
+
413
+ <script>
414
+ // Word banks for generating random theme names and descriptions
415
+ const prefixes = ["Quantum", "Neon", "Cosmic", "Hyper", "Digital", "Fractal", "Ethereal", "Void", "Celestial", "Nebula", "Chromatic", "Prismatic", "Luminous", "Dimensional", "Parallel", "Alternate", "Infinite", "Singularity", "Holographic", "Psychedelic"];
416
+ const suffixes = ["Realm", "Dimension", "Universe", "Expanse", "Continuum", "Vortex", "Matrix", "Spectrum", "Horizon", "Infinity", "Cosmos", "Nexus", "Plane", "Domain", "Eclipse", "Paradox", "Mandala", "Fabric", "Construct", "Abyss"];
417
+ const descriptors = ["where time folds upon itself", "of shimmering possibilities", "where colors sing", "beyond the veil of perception", "where physics takes a vacation", "of infinite reflections", "where light dances differently", "of impossible geometries", "where dreams take form", "of vibrating energy fields", "where reality glitches beautifully", "of chromatic harmony", "where dimensions intertwine", "of pure potentiality", "where the laws of nature rewrite themselves"];
418
+
419
+ // Icon options
420
+ const icons = [
421
+ "fa-atom", "fa-infinity", "fa-star", "fa-moon", "fa-sun",
422
+ "fa-galaxy", "fa-meteor", "fa-satellite", "fa-rocket", "fa-ufo",
423
+ "fa-shapes", "fa-cubes", "fa-dna", "fa-microscope", "fa-telescope",
424
+ "fa-mountain", "fa-water", "fa-fire", "fa-wind", "fa-leaf",
425
+ "fa-gem", "fa-crystal-ball", "fa-magic", "fa-hat-wizard", "fa-scroll"
426
+ ];
427
+
428
+ // DOM elements
429
+ const generateBtn = document.getElementById('generate-btn');
430
+ const themeName = document.getElementById('theme-name');
431
+ const themeIcon = document.getElementById('theme-icon');
432
+ const themeDescription = document.getElementById('theme-description');
433
+ const themeDisplay = document.getElementById('theme-display');
434
+ const patternDisplay = document.getElementById('pattern-display');
435
+ const body = document.querySelector('body');
436
+ const particlesContainer = document.getElementById('particles-container');
437
+ const historyContainer = document.getElementById('history-container');
438
+ const favoritesContainer = document.getElementById('favorites-container');
439
+ const hexCodesContainer = document.getElementById('hex-codes');
440
+ const copyHexBtn = document.getElementById('copy-hex-btn');
441
+ const toggleCssBtn = document.getElementById('toggle-css-btn');
442
+ const cssCodeContainer = document.getElementById('css-code-container');
443
+ const cssCode = document.getElementById('css-code');
444
+ const copyCssBtn = document.getElementById('copy-css-btn');
445
+ const favoriteBtn = document.getElementById('favorite-btn');
446
+ const screenshotBtn = document.getElementById('screenshot-btn');
447
+ const shareBtn = document.getElementById('share-btn');
448
+ const downloadBtn = document.getElementById('download-btn');
449
+ const clearHistoryBtn = document.getElementById('clear-history');
450
+ const patternBtns = document.querySelectorAll('.pattern-btn');
451
+ const modal = document.getElementById('modal');
452
+ const modalTitle = document.getElementById('modal-title');
453
+ const modalContent = document.getElementById('modal-content');
454
+ const closeModal = document.getElementById('close-modal');
455
+ const modalCancel = document.getElementById('modal-cancel');
456
+ const modalConfirm = document.getElementById('modal-confirm');
457
+
458
+ // Color elements
459
+ const colorElements = [
460
+ document.getElementById('color1'),
461
+ document.getElementById('color2'),
462
+ document.getElementById('color3'),
463
+ document.getElementById('color4'),
464
+ document.getElementById('color5')
465
+ ];
466
+
467
+ // Current theme
468
+ let currentTheme = null;
469
+ let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
470
+ let history = JSON.parse(localStorage.getItem('history')) || [];
471
+
472
+ // Convert HSL to Hex
473
+ function hslToHex(h, s, l) {
474
+ l /= 100;
475
+ const a = s * Math.min(l, 1 - l) / 100;
476
+ const f = n => {
477
+ const k = (n + h / 30) % 12;
478
+ const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
479
+ return Math.round(255 * color).toString(16).padStart(2, '0');
480
+ };
481
+ return `#${f(0)}${f(8)}${f(4)}`;
482
+ }
483
+
484
+ // Generate random HSL color
485
+ function generateRandomColor() {
486
+ const h = Math.floor(Math.random() * 360);
487
+ const s = Math.floor(Math.random() * 30) + 70; // 70-100% saturation
488
+ const l = Math.floor(Math.random() * 30) + 50; // 50-80% lightness
489
+ return {
490
+ hsl: `hsl(${h}, ${s}%, ${l}%)`,
491
+ hex: hslToHex(h, s, l)
492
+ };
493
+ }
494
+
495
+ // Generate a harmonious color palette
496
+ function generateColorPalette() {
497
+ const baseHue = Math.floor(Math.random() * 360);
498
+ const colors = [];
499
+
500
+ // Base color
501
+ const baseS = Math.floor(Math.random() * 30) + 70;
502
+ const baseL = Math.floor(Math.random() * 30) + 50;
503
+ colors.push({
504
+ hsl: `hsl(${baseHue}, ${baseS}%, ${baseL}%)`,
505
+ hex: hslToHex(baseHue, baseS, baseL)
506
+ });
507
+
508
+ // Analogous colors (adjacent hues)
509
+ const analogous1S = Math.floor(Math.random() * 20) + 70;
510
+ const analogous1L = Math.floor(Math.random() * 20) + 60;
511
+ colors.push({
512
+ hsl: `hsl(${(baseHue + 30) % 360}, ${analogous1S}%, ${analogous1L}%)`,
513
+ hex: hslToHex((baseHue + 30) % 360, analogous1S, analogous1L)
514
+ });
515
+
516
+ const analogous2S = Math.floor(Math.random() * 20) + 70;
517
+ const analogous2L = Math.floor(Math.random() * 20) + 60;
518
+ colors.push({
519
+ hsl: `hsl(${(baseHue - 30 + 360) % 360}, ${analogous2S}%, ${analogous2L}%)`,
520
+ hex: hslToHex((baseHue - 30 + 360) % 360, analogous2S, analogous2L)
521
+ });
522
+
523
+ // Complementary or split-complementary
524
+ if (Math.random() > 0.5) {
525
+ // Complementary
526
+ const compS = Math.floor(Math.random() * 30) + 60;
527
+ const compL = Math.floor(Math.random() * 20) + 40;
528
+ colors.push({
529
+ hsl: `hsl(${(baseHue + 180) % 360}, ${compS}%, ${compL}%)`,
530
+ hex: hslToHex((baseHue + 180) % 360, compS, compL)
531
+ });
532
+ } else {
533
+ // Split-complementary
534
+ const split1S = Math.floor(Math.random() * 20) + 60;
535
+ const split1L = Math.floor(Math.random() * 20) + 40;
536
+ colors.push({
537
+ hsl: `hsl(${(baseHue + 150) % 360}, ${split1S}%, ${split1L}%)`,
538
+ hex: hslToHex((baseHue + 150) % 360, split1S, split1L)
539
+ });
540
+
541
+ const split2S = Math.floor(Math.random() * 20) + 60;
542
+ const split2L = Math.floor(Math.random() * 20) + 40;
543
+ colors.push({
544
+ hsl: `hsl(${(baseHue + 210) % 360}, ${split2S}%, ${split2L}%)`,
545
+ hex: hslToHex((baseHue + 210) % 360, split2S, split2L)
546
+ });
547
+ }
548
+
549
+ // Accent color (either monochromatic or triadic)
550
+ if (Math.random() > 0.5) {
551
+ // Monochromatic
552
+ const monoL = Math.random() > 0.5 ? baseL + 20 : baseL - 20;
553
+ colors.push({
554
+ hsl: `hsl(${baseHue}, ${baseS}%, ${monoL}%)`,
555
+ hex: hslToHex(baseHue, baseS, monoL)
556
+ });
557
+ } else {
558
+ // Triadic
559
+ const triadS = Math.floor(Math.random() * 20) + 70;
560
+ const triadL = Math.floor(Math.random() * 20) + 50;
561
+ colors.push({
562
+ hsl: `hsl(${(baseHue + 120) % 360}, ${triadS}%, ${triadL}%)`,
563
+ hex: hslToHex((baseHue + 120) % 360, triadS, triadL)
564
+ });
565
+ }
566
+
567
+ // Shuffle and return exactly 5 colors
568
+ return colors.sort(() => Math.random() - 0.5).slice(0, 5);
569
+ }
570
+
571
+ // Generate random theme name
572
+ function generateThemeName() {
573
+ const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
574
+ const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
575
+ return `${prefix} ${suffix}`;
576
+ }
577
+
578
+ // Generate random description
579
+ function generateDescription() {
580
+ const descriptor = descriptors[Math.floor(Math.random() * descriptors.length)];
581
+ return `A mysterious dimension ${descriptor}.`;
582
+ }
583
+
584
+ // Random pattern generators
585
+ const patternGenerators = [
586
+ function(container, colors) {
587
+ // Geometric grid
588
+ const angle = Math.floor(Math.random() * 4) * 45;
589
+ const size = Math.floor(Math.random() * 30) + 20;
590
+ container.style.background = `
591
+ linear-gradient(${angle}deg, currentColor 1px, transparent 1px),
592
+ linear-gradient(${angle + 90}deg, currentColor 1px, transparent 1px)
593
+ `;
594
+ container.style.backgroundSize = `${size}px ${size}px`;
595
+ return `background: linear-gradient(${angle}deg, var(--color-primary) 1px, transparent 1px),
596
+ linear-gradient(${angle + 90}deg, var(--color-primary) 1px, transparent 1px); background-size: ${size}px ${size}px;`;
597
+ },
598
+ function(container, colors) {
599
+ // Radial gradient
600
+ container.style.background = `
601
+ radial-gradient(circle at 20% 30%, currentColor 0%, transparent 30%),
602
+ radial-gradient(circle at 80% 70%, currentColor 0%, transparent 30%)
603
+ `;
604
+ return `background: radial-gradient(circle at 20% 30%, var(--color-primary) 0%, transparent 30%),
605
+ radial-gradient(circle at 80% 70%, var(--color-primary) 0%, transparent 30%);`;
606
+ },
607
+ function(container, colors) {
608
+ // Particle field
609
+ container.innerHTML = '';
610
+ const particleCount = Math.floor(Math.random() * 30) + 20;
611
+ for (let i = 0; i < particleCount; i++) {
612
+ const particle = document.createElement('div');
613
+ particle.style.position = 'absolute';
614
+ particle.style.color = colors[Math.floor(Math.random() * colors.length)].hsl;
615
+ particle.style.opacity = Math.random() * 0.5 + 0.2;
616
+ particle.style.width = `${Math.random() * 10 + 2}px`;
617
+ particle.style.height = particle.style.width;
618
+ particle.style.borderRadius = '50%';
619
+ particle.style.left = `${Math.random() * 100}%`;
620
+ particle.style.top = `${Math.random() * 100}%`;
621
+ container.appendChild(particle);
622
+ }
623
+ return `/* Particle effect requires JavaScript to implement */`;
624
+ },
625
+ function(container, colors) {
626
+ // Organic shapes
627
+ container.innerHTML = '';
628
+ const shapeCount = Math.floor(Math.random() * 8) + 3;
629
+ for (let i = 0; i < shapeCount; i++) {
630
+ const shape = document.createElement('div');
631
+ shape.style.position = 'absolute';
632
+ shape.style.color = colors[Math.floor(Math.random() * colors.length)].hsl;
633
+ shape.style.opacity = Math.random() * 0.4 + 0.2;
634
+ shape.style.fontSize = `${Math.random() * 40 + 20}px`;
635
+ shape.style.left = `${Math.random() * 100}%`;
636
+ shape.style.top = `${Math.random() * 100}%`;
637
+ shape.style.transform = `rotate(${Math.random() * 360}deg) scale(${Math.random() * 1.5 + 0.5})`;
638
+
639
+ const shapeTypes = ['fa-star', "fa-cloud", "fa-circle", "fa-square", "fa-heart", "fa-certificate"];
640
+ const randomShape = shapeTypes[Math.floor(Math.random() * shapeTypes.length)];
641
+ shape.innerHTML = `<i class="fas ${randomShape}"></i>`;
642
+
643
+ container.appendChild(shape);
644
+ }
645
+ return `/* Organic shapes effect requires JavaScript to implement */`;
646
+ },
647
+ function(container, colors) {
648
+ // Stripes
649
+ const angle = Math.floor(Math.random() * 180);
650
+ const width = Math.floor(Math.random() * 30) + 10;
651
+ container.style.background = `repeating-linear-gradient(${angle}deg, currentColor 0px, currentColor ${width}px, transparent ${width}px, transparent ${width * 2}px)`;
652
+ return `background: repeating-linear-gradient(${angle}deg, var(--color-primary) 0px, var(--color-primary) ${width}px, transparent ${width}px, transparent ${width * 2}px);`;
653
+ }
654
+ ];
655
+
656
+ // Create floating particles
657
+ function createParticles(colors) {
658
+ // Clear existing particles
659
+ particlesContainer.innerHTML = '';
660
+
661
+ // Create new particles
662
+ const particleCount = Math.floor(Math.random() * 50) + 30;
663
+ for (let i = 0; i < particleCount; i++) {
664
+ const particle = document.createElement('div');
665
+ particle.className = 'particle';
666
+
667
+ // Random size between 2px and 8px
668
+ const size = Math.random() * 6 + 2;
669
+ particle.style.width = `${size}px`;
670
+ particle.style.height = `${size}px`;
671
+
672
+ // Random position
673
+ particle.style.left = `${Math.random() * 100}%`;
674
+ particle.style.top = `${Math.random() * 100}%`;
675
+
676
+ // Random color from theme
677
+ particle.style.color = colors[Math.floor(Math.random() * colors.length)].hsl;
678
+
679
+ // Random animation
680
+ const duration = Math.random() * 30 + 10;
681
+ const delay = Math.random() * 10;
682
+ const xMovement = (Math.random() - 0.5) * 200;
683
+ const yMovement = (Math.random() - 0.5) * 200;
684
+
685
+ particle.style.animation = `
686
+ float ${duration}s ease-in-out ${delay}s infinite,
687
+ fade ${duration * 0.7}s ease-in-out infinite
688
+ `;
689
+
690
+ // Keyframes for this particle
691
+ const keyframes = `
692
+ @keyframes float {
693
+ 0%, 100% { transform: translate(0, 0); }
694
+ 50% { transform: translate(${xMovement}px, ${yMovement}px); }
695
+ }
696
+ @keyframes fade {
697
+ 0%, 100% { opacity: 0; }
698
+ 50% { opacity: ${Math.random() * 0.6 + 0.1}; }
699
+ }
700
+ `;
701
+
702
+ const style = document.createElement('style');
703
+ style.innerHTML = keyframes;
704
+ document.head.appendChild(style);
705
+
706
+ particlesContainer.appendChild(particle);
707
+ }
708
+ }
709
+
710
+ // Add to history
711
+ function addToHistory(theme) {
712
+ // Check if theme already exists in history
713
+ const exists = history.some(t => t.name === theme.name &&
714
+ JSON.stringify(t.colors) === JSON.stringify(theme.colors));
715
+
716
+ if (!exists) {
717
+ history.unshift({
718
+ name: theme.name,
719
+ colors: theme.colors,
720
+ icon: theme.icon,
721
+ description: theme.description,
722
+ patternIndex: theme.patternIndex,
723
+ timestamp: new Date().toISOString()
724
+ });
725
+
726
+ // Limit history to 20 items
727
+ if (history.length > 20) {
728
+ history.pop();
729
+ }
730
+
731
+ localStorage.setItem('history', JSON.stringify(history));
732
+ renderHistory();
733
+ }
734
+ }
735
+
736
+ // Add to favorites
737
+ function addToFavorites(theme) {
738
+ // Check if theme already exists in favorites
739
+ const exists = favorites.some(t => t.name === theme.name &&
740
+ JSON.stringify(t.colors) === JSON.stringify(theme.colors));
741
+
742
+ if (!exists) {
743
+ favorites.unshift({
744
+ name: theme.name,
745
+ colors: theme.colors,
746
+ icon: theme.icon,
747
+ description: theme.description,
748
+ patternIndex: theme.patternIndex,
749
+ timestamp: new Date().toISOString()
750
+ });
751
+
752
+ localStorage.setItem('favorites', JSON.stringify(favorites));
753
+ renderFavorites();
754
+
755
+ // Show notification
756
+ showModal('Favorite Added', 'This dimension has been added to your favorites!');
757
+ } else {
758
+ // Remove from favorites
759
+ favorites = favorites.filter(t => !(t.name === theme.name &&
760
+ JSON.stringify(t.colors) === JSON.stringify(theme.colors)));
761
+
762
+ localStorage.setItem('favorites', JSON.stringify(favorites));
763
+ renderFavorites();
764
+
765
+ // Show notification
766
+ showModal('Favorite Removed', 'This dimension has been removed from your favorites.');
767
+ }
768
+
769
+ // Update favorite button state
770
+ updateFavoriteButton();
771
+ }
772
+
773
+ // Check if current theme is favorite
774
+ function isFavorite() {
775
+ if (!currentTheme) return false;
776
+
777
+ return favorites.some(t => t.name === currentTheme.name &&
778
+ JSON.stringify(t.colors) === JSON.stringify(currentTheme.colors));
779
+ }
780
+
781
+ // Update favorite button state
782
+ function updateFavoriteButton() {
783
+ if (isFavorite()) {
784
+ favoriteBtn.innerHTML = '<i class="fas fa-star"></i>';
785
+ favoriteBtn.classList.add('active');
786
+ } else {
787
+ favoriteBtn.innerHTML = '<i class="far fa-star"></i>';
788
+ favoriteBtn.classList.remove('active');
789
+ }
790
+ }
791
+
792
+ // Render history
793
+ function renderHistory() {
794
+ historyContainer.innerHTML = '';
795
+
796
+ if (history.length === 0) {
797
+ const emptyMessage = document.createElement('div');
798
+ emptyMessage.className = 'text-center w-full py-8 opacity-70';
799
+ emptyMessage.textContent = 'No history yet. Generate some dimensions!';
800
+ historyContainer.appendChild(emptyMessage);
801
+ return;
802
+ }
803
+
804
+ history.forEach((theme, index) => {
805
+ const historyItem = document.createElement('div');
806
+ historyItem.className = 'flex-shrink-0 w-20 sm:w-24 h-20 sm:h-24 rounded-xl overflow-hidden border-2 border-white/20 cursor-pointer transition-all hover:scale-105 history-item';
807
+ historyItem.style.background = `linear-gradient(135deg, ${theme.colors[0].hsl}, ${theme.colors[2].hsl})`;
808
+
809
+ const title = document.createElement('div');
810
+ title.className = 'history-item-title truncate';
811
+ title.textContent = theme.name;
812
+
813
+ historyItem.appendChild(title);
814
+
815
+ historyItem.addEventListener('click', () => {
816
+ applyTheme(theme);
817
+ });
818
+
819
+ historyContainer.appendChild(historyItem);
820
+ });
821
+ }
822
+
823
+ // Render favorites
824
+ function renderFavorites() {
825
+ favoritesContainer.innerHTML = '';
826
+
827
+ if (favorites.length === 0) {
828
+ const emptyMessage = document.createElement('div');
829
+ emptyMessage.className = 'text-center w-full py-8 opacity-70';
830
+ emptyMessage.textContent = 'No favorites yet. Click the star button to add some!';
831
+ favoritesContainer.appendChild(emptyMessage);
832
+ return;
833
+ }
834
+
835
+ favorites.forEach((theme, index) => {
836
+ const favoriteItem = document.createElement('div');
837
+ favoriteItem.className = 'flex-shrink-0 w-20 sm:w-24 h-20 sm:h-24 rounded-xl overflow-hidden border-2 border-white/20 cursor-pointer transition-all hover:scale-105 history-item';
838
+ favoriteItem.style.background = `linear-gradient(135deg, ${theme.colors[0].hsl}, ${theme.colors[2].hsl})`;
839
+
840
+ const title = document.createElement('div');
841
+ title.className = 'history-item-title truncate';
842
+ title.textContent = theme.name;
843
+
844
+ favoriteItem.appendChild(title);
845
+
846
+ favoriteItem.addEventListener('click', () => {
847
+ applyTheme(theme);
848
+ });
849
+
850
+ favoritesContainer.appendChild(favoriteItem);
851
+ });
852
+ }
853
+
854
+ // Clear history
855
+ function clearHistory() {
856
+ history = [];
857
+ localStorage.setItem('history', JSON.stringify(history));
858
+ renderHistory();
859
+ showModal('History Cleared', 'Your dimension history has been cleared.');
860
+ }
861
+
862
+ // Generate CSS code for the current theme
863
+ function generateCSSCode(theme) {
864
+ let css = `:root {
865
+ /* Color Variables */
866
+ --color-primary: ${theme.colors[0].hsl};
867
+ --color-secondary: ${theme.colors[1].hsl};
868
+ --color-accent: ${theme.colors[2].hsl};
869
+ --color-background: ${theme.colors[3].hsl};
870
+ --color-text: ${theme.colors[4].hsl};
871
+
872
+ /* Hex Codes */
873
+ /* Primary: ${theme.colors[0].hex} */
874
+ /* Secondary: ${theme.colors[1].hex} */
875
+ /* Accent: ${theme.colors[2].hex} */
876
+ /* Background: ${theme.colors[3].hex} */
877
+ /* Text: ${theme.colors[4].hex} */
878
+ }
879
+
880
+ body {
881
+ background: linear-gradient(to bottom right, var(--color-primary), var(--color-accent));
882
+ color: var(--color-text);
883
+ }
884
+
885
+ /* Pattern Styles */
886
+ .pattern {
887
+ ${theme.patternCSS}
888
+ }`;
889
+
890
+ return css;
891
+ }
892
+
893
+ // Update hex code display
894
+ function updateHexCodes(colors) {
895
+ hexCodesContainer.innerHTML = '';
896
+ colors.forEach((color, index) => {
897
+ const hexCode = document.createElement('div');
898
+ hexCode.className = 'flex items-center gap-1';
899
+ hexCode.innerHTML = `
900
+ <span class="inline-block w-2 sm:w-3 h-2 sm:h-3 rounded-full" style="background-color: ${color.hex}"></span>
901
+ <span>${color.hex}</span>
902
+ `;
903
+ hexCodesContainer.appendChild(hexCode);
904
+ });
905
+
906
+ // Update tooltips
907
+ colorElements.forEach((el, index) => {
908
+ const tooltip = el.querySelector('.hex-tooltip');
909
+ if (tooltip) {
910
+ tooltip.textContent = colors[index].hex;
911
+ }
912
+ });
913
+ }
914
+
915
+ // Apply a theme
916
+ function applyTheme(theme) {
917
+ currentTheme = theme;
918
+
919
+ // Update theme info
920
+ themeName.textContent = theme.name;
921
+ themeIcon.innerHTML = `<i class="fas ${theme.icon}"></i>`;
922
+ themeDescription.textContent = theme.description;
923
+
924
+ // Update colors
925
+ theme.colors.forEach((color, index) => {
926
+ colorElements[index].style.backgroundColor = color.hsl;
927
+ });
928
+
929
+ // Update hex codes
930
+ updateHexCodes(theme.colors);
931
+
932
+ // Set main color
933
+ const mainColor = theme.colors[0].hsl;
934
+ themeDisplay.style.borderColor = `${mainColor}80`;
935
+
936
+ // Apply pattern
937
+ patternDisplay.innerHTML = '';
938
+ patternDisplay.style.color = theme.colors[2].hsl;
939
+ theme.patternCSS = patternGenerators[theme.patternIndex](patternDisplay, theme.colors);
940
+
941
+ // Update background gradient
942
+ body.style.background = `linear-gradient(to bottom right, ${theme.colors[0].hsl}, ${theme.colors[2].hsl})`;
943
+
944
+ // Create particles
945
+ createParticles(theme.colors);
946
+
947
+ // Generate CSS code
948
+ cssCode.textContent = generateCSSCode(theme);
949
+
950
+ // Update favorite button state
951
+ updateFavoriteButton();
952
+ }
953
+
954
+ // Generate random theme
955
+ function generateRandomTheme() {
956
+ const colors = generateColorPalette();
957
+
958
+ const theme = {
959
+ name: generateThemeName(),
960
+ icon: icons[Math.floor(Math.random() * icons.length)],
961
+ description: generateDescription(),
962
+ colors: colors,
963
+ patternIndex: Math.floor(Math.random() * patternGenerators.length),
964
+ patternGenerator: patternGenerators[Math.floor(Math.random() * patternGenerators.length)],
965
+ patternCSS: ''
966
+ };
967
+
968
+ addToHistory(theme);
969
+ applyTheme(theme);
970
+ }
971
+
972
+ // Copy text to clipboard
973
+ function copyToClipboard(text, button) {
974
+ navigator.clipboard.writeText(text).then(() => {
975
+ button.classList.add('copied');
976
+ button.innerHTML = '<i class="fas fa-check"></i> Copied!';
977
+ setTimeout(() => {
978
+ button.classList.remove('copied');
979
+ if (button.id === 'copy-hex-btn') {
980
+ button.innerHTML = '<i class="fas fa-copy"></i> Copy';
981
+ } else {
982
+ button.innerHTML = '<i class="fas fa-copy"></i> Copy';
983
+ }
984
+ }, 2000);
985
+ }).catch(err => {
986
+ console.error('Failed to copy text: ', err);
987
+ showModal('Copy Failed', 'Failed to copy text to clipboard. Please try again.');
988
+ });
989
+ }
990
+
991
+ // Show modal
992
+ function showModal(title, content, isConfirm = false) {
993
+ modalTitle.textContent = title;
994
+ modalContent.textContent = content;
995
+
996
+ if (isConfirm) {
997
+ modalConfirm.style.display = 'block';
998
+ } else {
999
+ modalConfirm.style.display = 'none';
1000
+ }
1001
+
1002
+ modal.classList.remove('hidden');
1003
+ setTimeout(() => {
1004
+ modal.classList.add('opacity-100');
1005
+ }, 10);
1006
+ }
1007
+
1008
+ // Hide modal
1009
+ function hideModal() {
1010
+ modal.classList.remove('opacity-100');
1011
+ setTimeout(() => {
1012
+ modal.classList.add('hidden');
1013
+ }, 300);
1014
+ }
1015
+
1016
+ // Take screenshot
1017
+ function takeScreenshot() {
1018
+ showModal('Taking Screenshot', 'Preparing your dimension screenshot...');
1019
+
1020
+ // Capture the main content area
1021
+ const element = document.querySelector('.bg-white\\/10.backdrop-blur-lg.rounded-3xl');
1022
+
1023
+ html2canvas(element, {
1024
+ scale: 2,
1025
+ backgroundColor: null,
1026
+ logging: false,
1027
+ useCORS: true
1028
+ }).then(canvas => {
1029
+ // Create download link
1030
+ const link = document.createElement('a');
1031
+ link.download = `${currentTheme.name.toLowerCase().replace(/\s+/g, '-')}-screenshot.png`;
1032
+ link.href = canvas.toDataURL('image/png');
1033
+ link.click();
1034
+
1035
+ showModal('Screenshot Saved', 'Your dimension screenshot has been downloaded!');
1036
+ }).catch(err => {
1037
+ console.error('Failed to take screenshot: ', err);
1038
+ showModal('Screenshot Failed', 'Failed to capture screenshot. Please try again.');
1039
+ });
1040
+ }
1041
+
1042
+ // Share dimension
1043
+ function shareDimension() {
1044
+ if (!currentTheme) return;
1045
+
1046
+ if (navigator.share) {
1047
+ // Use Web Share API if available
1048
+ navigator.share({
1049
+ title: `Dimension: ${currentTheme.name}`,
1050
+ text: `Check out this amazing dimension I found: ${currentTheme.description}`,
1051
+ url: window.location.href
1052
+ }).then(() => {
1053
+ showModal('Shared Successfully', 'Thanks for sharing this dimension!');
1054
+ }).catch(err => {
1055
+ console.error('Error sharing:', err);
1056
+ showModal('Share Failed', 'Could not share the dimension. Please try again.');
1057
+ });
1058
+ } else {
1059
+ // Fallback for browsers without Web Share API
1060
+ const shareText = `Check out this amazing dimension: ${currentTheme.name} - ${currentTheme.description}`;
1061
+ copyToClipboard(shareText, shareBtn);
1062
+ showModal('Share Dimension', 'The dimension details have been copied to your clipboard. You can now paste it anywhere to share!');
1063
+ }
1064
+ }
1065
+
1066
+ // Download theme
1067
+ function downloadTheme() {
1068
+ if (!currentTheme) return;
1069
+
1070
+ const cssContent = generateCSSCode(currentTheme);
1071
+ const blob = new Blob([cssContent], { type: 'text/css' });
1072
+ const url = URL.createObjectURL(blob);
1073
+
1074
+ const a = document.createElement('a');
1075
+ a.href = url;
1076
+ a.download = `${currentTheme.name.toLowerCase().replace(/\s+/g, '-')}-theme.css`;
1077
+ document.body.appendChild(a);
1078
+ a.click();
1079
+ document.body.removeChild(a);
1080
+ URL.revokeObjectURL(url);
1081
+
1082
+ showModal('Download Complete', `The CSS for "${currentTheme.name}" has been downloaded.`);
1083
+ }
1084
+
1085
+ // Change pattern
1086
+ function changePattern(index) {
1087
+ if (!currentTheme) return;
1088
+
1089
+ currentTheme.patternIndex = index;
1090
+ currentTheme.patternGenerator = patternGenerators[index];
1091
+ applyTheme(currentTheme);
1092
+ }
1093
+
1094
+ // Initial generation
1095
+ generateRandomTheme();
1096
+ renderHistory();
1097
+ renderFavorites();
1098
+
1099
+ // Button click event
1100
+ generateBtn.addEventListener('click', () => {
1101
+ // Add click animation
1102
+ generateBtn.classList.add('active:scale-95');
1103
+ setTimeout(() => {
1104
+ generateBtn.classList.remove('active:scale-95');
1105
+ }, 150);
1106
+
1107
+ generateRandomTheme();
1108
+ });
1109
+
1110
+ // Toggle CSS code container
1111
+ toggleCssBtn.addEventListener('click', () => {
1112
+ cssCodeContainer.classList.toggle('open');
1113
+ if (cssCodeContainer.classList.contains('open')) {
1114
+ toggleCssBtn.innerHTML = '<i class="fas fa-code"></i> Hide CSS Code';
1115
+ } else {
1116
+ toggleCssBtn.innerHTML = '<i class="fas fa-code"></i> Generate CSS Code';
1117
+ }
1118
+ });
1119
+
1120
+ // Copy hex codes
1121
+ copyHexBtn.addEventListener('click', () => {
1122
+ const hexCodes = Array.from(hexCodesContainer.querySelectorAll('div')).map(div => {
1123
+ return div.textContent.trim().split('\n').pop().trim();
1124
+ }).join('\n');
1125
+ copyToClipboard(hexCodes, copyHexBtn);
1126
+ });
1127
+
1128
+ // Copy CSS code
1129
+ copyCssBtn.addEventListener('click', () => {
1130
+ copyToClipboard(cssCode.textContent, copyCssBtn);
1131
+ });
1132
+
1133
+ // Favorite button
1134
+ favoriteBtn.addEventListener('click', () => {
1135
+ if (currentTheme) {
1136
+ addToFavorites(currentTheme);
1137
+ }
1138
+ });
1139
+
1140
+ // Screenshot button
1141
+ screenshotBtn.addEventListener('click', takeScreenshot);
1142
+
1143
+ // Share button
1144
+ shareBtn.addEventListener('click', shareDimension);
1145
+
1146
+ // Download button
1147
+ downloadBtn.addEventListener('click', downloadTheme);
1148
+
1149
+ // Clear history button
1150
+ clearHistoryBtn.addEventListener('click', () => {
1151
+ showModal('Clear History', 'Are you sure you want to clear your dimension history?', true);
1152
+
1153
+ modalConfirm.onclick = () => {
1154
+ clearHistory();
1155
+ hideModal();
1156
+ };
1157
+ });
1158
+
1159
+ // Pattern buttons
1160
+ patternBtns.forEach(btn => {
1161
+ btn.addEventListener('click', () => {
1162
+ const patternIndex = parseInt(btn.dataset.pattern);
1163
+ changePattern(patternIndex);
1164
+ });
1165
+ });
1166
+
1167
+ // Modal events
1168
+ closeModal.addEventListener('click', hideModal);
1169
+ modalCancel.addEventListener('click', hideModal);
1170
+ modal.addEventListener('click', (e) => {
1171
+ if (e.target === modal) {
1172
+ hideModal();
1173
+ }
1174
+ });
1175
+
1176
+ // Initialize tooltips
1177
+ document.querySelectorAll('.tooltip').forEach(el => {
1178
+ el.addEventListener('mouseenter', () => {
1179
+ const tooltip = el.querySelector('.tooltip-text');
1180
+ tooltip.style.visibility = 'visible';
1181
+ tooltip.style.opacity = '1';
1182
+ });
1183
+ el.addEventListener('mouseleave', () => {
1184
+ const tooltip = el.querySelector('.tooltip-text');
1185
+ tooltip.style.visibility = 'hidden';
1186
+ tooltip.style.opacity = '0';
1187
+ });
1188
+ });
1189
+
1190
+ // Touch events for mobile tooltips
1191
+ document.querySelectorAll('.tooltip').forEach(el => {
1192
+ el.addEventListener('touchstart', () => {
1193
+ const tooltip = el.querySelector('.tooltip-text');
1194
+ tooltip.style.visibility = 'visible';
1195
+ tooltip.style.opacity = '1';
1196
+
1197
+ // Hide after 2 seconds
1198
+ setTimeout(() => {
1199
+ tooltip.style.visibility = 'hidden';
1200
+ tooltip.style.opacity = '0';
1201
+ }, 2000);
1202
+ });
1203
+ });
1204
+ </script>
1205
+ <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=druvx13/infinite-universe-explorer" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
1206
+ </html>