Hugging Face's logo

Spaces:
druvx13
/
infinite-universe-explorer
Running

App Files Community
druvx13 commited on
Commit
e28a3cf
·
verified ·
1 Parent(s): 8793378

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +634 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Infinite Universe Explorer
3
- emoji: 💻
4
- colorFrom: gray
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: infinite-universe-explorer
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
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,634 @@
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>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
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-20px); }
13
+ }
14
+ @keyframes spin {
15
+ 0% { transform: rotate(0deg); }
16
+ 100% { transform: rotate(360deg); }
17
+ }
18
+ @keyframes pulse {
19
+ 0%, 100% { transform: scale(1); }
20
+ 50% { transform: scale(1.05); }
21
+ }
22
+ .floating {
23
+ animation: float 6s ease-in-out infinite;
24
+ }
25
+ .spinning {
26
+ animation: spin 20s linear infinite;
27
+ }
28
+ .pulsing {
29
+ animation: pulse 3s ease infinite;
30
+ }
31
+ .theme-transition {
32
+ transition: all 0.5s ease;
33
+ }
34
+ .particle {
35
+ position: absolute;
36
+ background: currentColor;
37
+ border-radius: 50%;
38
+ pointer-events: none;
39
+ }
40
+ .gradient-mask {
41
+ mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
42
+ }
43
+ .code-container {
44
+ max-height: 0;
45
+ overflow: hidden;
46
+ transition: max-height 0.5s ease;
47
+ }
48
+ .code-container.open {
49
+ max-height: 500px;
50
+ }
51
+ .copy-btn {
52
+ transition: all 0.2s ease;
53
+ }
54
+ .copy-btn.copied {
55
+ background-color: #10B981 !important;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800 text-white theme-transition">
60
+ <div id="particles-container" class="fixed inset-0 overflow-hidden pointer-events-none"></div>
61
+
62
+ <div class="container mx-auto px-4 py-12">
63
+ <header class="text-center mb-16">
64
+ <div class="floating inline-block mb-6">
65
+ <div class="spinning text-6xl mb-2">
66
+ <i class="fas fa-infinity"></i>
67
+ </div>
68
+ </div>
69
+ <h1 class="text-5xl font-bold mb-4 tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-amber-300 to-pink-400">
70
+ Infinite Universe Explorer
71
+ </h1>
72
+ <p class="text-xl opacity-80 max-w-2xl mx-auto">
73
+ Discover truly infinite random themes with unique colors and patterns!
74
+ </p>
75
+ </header>
76
+
77
+ <main class="max-w-4xl mx-auto">
78
+ <div class="bg-white/10 backdrop-blur-lg rounded-3xl overflow-hidden border border-white/20 mb-12">
79
+ <div class="p-8 md:p-12">
80
+ <div class="flex flex-col md:flex-row gap-8 items-center">
81
+ <div class="flex-1">
82
+ <h2 class="text-3xl font-bold mb-4">Current Dimension</h2>
83
+ <div id="theme-display" class="mb-6 p-6 rounded-xl bg-black/20 border border-white/10">
84
+ <div class="flex items-center gap-3 mb-4">
85
+ <span id="theme-icon" class="text-3xl"><i class="fas fa-question"></i></span>
86
+ <span id="theme-name" class="text-2xl font-medium">Unknown Dimension</span>
87
+ </div>
88
+ <p id="theme-description" class="opacity-80">
89
+ Waiting to discover your first random dimension...
90
+ </p>
91
+ </div>
92
+ <div class="grid grid-cols-5 gap-2 mb-4">
93
+ <div id="color1" class="h-12 rounded-md relative group">
94
+ <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>
95
+ </div>
96
+ <div id="color2" class="h-12 rounded-md relative group">
97
+ <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>
98
+ </div>
99
+ <div id="color3" class="h-12 rounded-md relative group">
100
+ <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>
101
+ </div>
102
+ <div id="color4" class="h-12 rounded-md relative group">
103
+ <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>
104
+ </div>
105
+ <div id="color5" class="h-12 rounded-md relative group">
106
+ <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>
107
+ </div>
108
+ </div>
109
+ <div class="flex justify-between items-center mb-6">
110
+ <div id="hex-codes" class="text-sm opacity-80 flex gap-2 flex-wrap">
111
+ <!-- Hex codes will be displayed here -->
112
+ </div>
113
+ <button id="copy-hex-btn" class="copy-btn text-xs bg-white/10 hover:bg-white/20 px-3 py-1 rounded-full flex items-center gap-1">
114
+ <i class="fas fa-copy"></i> Copy
115
+ </button>
116
+ </div>
117
+ <button id="generate-btn" class="pulsing w-full py-4 px-6 bg-gradient-to-r from-amber-400 to-pink-500 rounded-xl font-bold text-lg hover:opacity-90 transition-all duration-300 shadow-lg hover:shadow-xl active:scale-95 mb-4">
118
+ <i class="fas fa-random mr-2"></i> Explore New Dimension
119
+ </button>
120
+ <button id="toggle-css-btn" class="w-full py-3 px-6 bg-white/5 hover:bg-white/10 rounded-xl font-medium transition-all duration-300 flex items-center justify-center gap-2">
121
+ <i class="fas fa-code"></i> Generate CSS Code
122
+ </button>
123
+ </div>
124
+ <div class="flex-1">
125
+ <div class="relative h-64 md:h-80 rounded-2xl overflow-hidden border-2 border-white/20">
126
+ <div id="pattern-display" class="absolute inset-0 flex items-center justify-center">
127
+ <div class="text-6xl opacity-20"><i class="fas fa-star"></i></div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- CSS Code Container -->
134
+ <div id="css-code-container" class="code-container mt-6 bg-black/30 rounded-xl overflow-hidden">
135
+ <div class="p-4 border-t border-white/10 flex justify-between items-center">
136
+ <h3 class="font-mono font-bold text-sm">CSS Variables</h3>
137
+ <button id="copy-css-btn" class="copy-btn text-xs bg-white/10 hover:bg-white/20 px-3 py-1 rounded-full flex items-center gap-1">
138
+ <i class="fas fa-copy"></i> Copy
139
+ </button>
140
+ </div>
141
+ <pre id="css-code" class="p-4 text-sm font-mono overflow-auto max-h-64 bg-black/20"></pre>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="grid md:grid-cols-3 gap-6 mb-12">
147
+ <div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all">
148
+ <div class="text-3xl mb-4 text-amber-300"><i class="fas fa-infinity"></i></div>
149
+ <h3 class="text-xl font-bold mb-2">Infinite Variety</h3>
150
+ <p class="opacity-80">Every dimension is completely unique with randomly generated colors and patterns.</p>
151
+ </div>
152
+ <div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all">
153
+ <div class="text-3xl mb-4 text-pink-400"><i class="fas fa-atom"></i></div>
154
+ <h3 class="text-xl font-bold mb-2">Quantum Colors</h3>
155
+ <p class="opacity-80">Colors are generated using quantum-inspired algorithms for maximum uniqueness.</p>
156
+ </div>
157
+ <div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all">
158
+ <div class="text-3xl mb-4 text-purple-300"><i class="fas fa-shapes"></i></div>
159
+ <h3 class="text-xl font-bold mb-2">Dynamic Patterns</h3>
160
+ <p class="opacity-80">Patterns are procedurally generated to match each dimension's unique properties.</p>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 mb-12">
165
+ <h2 class="text-2xl font-bold mb-4">Dimension History</h2>
166
+ <div id="history-container" class="flex overflow-x-auto pb-4 gap-4 gradient-mask">
167
+ <!-- History items will be added here -->
168
+ </div>
169
+ </div>
170
+ </main>
171
+
172
+ <footer class="text-center opacity-70 mt-20 pb-8">
173
+ <p>Journey through the infinite multiverse <i class="fas fa-infinity text-purple-300"></i></p>
174
+ </footer>
175
+ </div>
176
+
177
+ <script>
178
+ // Word banks for generating random theme names and descriptions
179
+ const prefixes = ["Quantum", "Neon", "Cosmic", "Hyper", "Digital", "Fractal", "Ethereal", "Void", "Celestial", "Nebula", "Chromatic", "Prismatic", "Luminous", "Dimensional", "Parallel", "Alternate", "Infinite", "Singularity", "Holographic", "Psychedelic"];
180
+ const suffixes = ["Realm", "Dimension", "Universe", "Expanse", "Continuum", "Vortex", "Matrix", "Spectrum", "Horizon", "Infinity", "Cosmos", "Nexus", "Plane", "Domain", "Eclipse", "Paradox", "Mandala", "Fabric", "Construct", "Abyss"];
181
+ 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"];
182
+
183
+ // Icon options
184
+ const icons = [
185
+ "fa-atom", "fa-infinity", "fa-star", "fa-moon", "fa-sun",
186
+ "fa-galaxy", "fa-meteor", "fa-satellite", "fa-rocket", "fa-ufo",
187
+ "fa-shapes", "fa-cubes", "fa-dna", "fa-microscope", "fa-telescope",
188
+ "fa-mountain", "fa-water", "fa-fire", "fa-wind", "fa-leaf",
189
+ "fa-gem", "fa-crystal-ball", "fa-magic", "fa-hat-wizard", "fa-scroll"
190
+ ];
191
+
192
+ // DOM elements
193
+ const generateBtn = document.getElementById('generate-btn');
194
+ const themeName = document.getElementById('theme-name');
195
+ const themeIcon = document.getElementById('theme-icon');
196
+ const themeDescription = document.getElementById('theme-description');
197
+ const themeDisplay = document.getElementById('theme-display');
198
+ const patternDisplay = document.getElementById('pattern-display');
199
+ const body = document.querySelector('body');
200
+ const particlesContainer = document.getElementById('particles-container');
201
+ const historyContainer = document.getElementById('history-container');
202
+ const hexCodesContainer = document.getElementById('hex-codes');
203
+ const copyHexBtn = document.getElementById('copy-hex-btn');
204
+ const toggleCssBtn = document.getElementById('toggle-css-btn');
205
+ const cssCodeContainer = document.getElementById('css-code-container');
206
+ const cssCode = document.getElementById('css-code');
207
+ const copyCssBtn = document.getElementById('copy-css-btn');
208
+
209
+ // Color elements
210
+ const colorElements = [
211
+ document.getElementById('color1'),
212
+ document.getElementById('color2'),
213
+ document.getElementById('color3'),
214
+ document.getElementById('color4'),
215
+ document.getElementById('color5')
216
+ ];
217
+
218
+ // Convert HSL to Hex
219
+ function hslToHex(h, s, l) {
220
+ l /= 100;
221
+ const a = s * Math.min(l, 1 - l) / 100;
222
+ const f = n => {
223
+ const k = (n + h / 30) % 12;
224
+ const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
225
+ return Math.round(255 * color).toString(16).padStart(2, '0');
226
+ };
227
+ return `#${f(0)}${f(8)}${f(4)}`;
228
+ }
229
+
230
+ // Generate random HSL color
231
+ function generateRandomColor() {
232
+ const h = Math.floor(Math.random() * 360);
233
+ const s = Math.floor(Math.random() * 30) + 70; // 70-100% saturation
234
+ const l = Math.floor(Math.random() * 30) + 50; // 50-80% lightness
235
+ return {
236
+ hsl: `hsl(${h}, ${s}%, ${l}%)`,
237
+ hex: hslToHex(h, s, l)
238
+ };
239
+ }
240
+
241
+ // Generate a harmonious color palette
242
+ function generateColorPalette() {
243
+ const baseHue = Math.floor(Math.random() * 360);
244
+ const colors = [];
245
+
246
+ // Base color
247
+ const baseS = Math.floor(Math.random() * 30) + 70;
248
+ const baseL = Math.floor(Math.random() * 30) + 50;
249
+ colors.push({
250
+ hsl: `hsl(${baseHue}, ${baseS}%, ${baseL}%)`,
251
+ hex: hslToHex(baseHue, baseS, baseL)
252
+ });
253
+
254
+ // Analogous colors (adjacent hues)
255
+ const analogous1S = Math.floor(Math.random() * 20) + 70;
256
+ const analogous1L = Math.floor(Math.random() * 20) + 60;
257
+ colors.push({
258
+ hsl: `hsl(${(baseHue + 30) % 360}, ${analogous1S}%, ${analogous1L}%)`,
259
+ hex: hslToHex((baseHue + 30) % 360, analogous1S, analogous1L)
260
+ });
261
+
262
+ const analogous2S = Math.floor(Math.random() * 20) + 70;
263
+ const analogous2L = Math.floor(Math.random() * 20) + 60;
264
+ colors.push({
265
+ hsl: `hsl(${(baseHue - 30 + 360) % 360}, ${analogous2S}%, ${analogous2L}%)`,
266
+ hex: hslToHex((baseHue - 30 + 360) % 360, analogous2S, analogous2L)
267
+ });
268
+
269
+ // Complementary or split-complementary
270
+ if (Math.random() > 0.5) {
271
+ // Complementary
272
+ const compS = Math.floor(Math.random() * 30) + 60;
273
+ const compL = Math.floor(Math.random() * 20) + 40;
274
+ colors.push({
275
+ hsl: `hsl(${(baseHue + 180) % 360}, ${compS}%, ${compL}%)`,
276
+ hex: hslToHex((baseHue + 180) % 360, compS, compL)
277
+ });
278
+ } else {
279
+ // Split-complementary
280
+ const split1S = Math.floor(Math.random() * 20) + 60;
281
+ const split1L = Math.floor(Math.random() * 20) + 40;
282
+ colors.push({
283
+ hsl: `hsl(${(baseHue + 150) % 360}, ${split1S}%, ${split1L}%)`,
284
+ hex: hslToHex((baseHue + 150) % 360, split1S, split1L)
285
+ });
286
+
287
+ const split2S = Math.floor(Math.random() * 20) + 60;
288
+ const split2L = Math.floor(Math.random() * 20) + 40;
289
+ colors.push({
290
+ hsl: `hsl(${(baseHue + 210) % 360}, ${split2S}%, ${split2L}%)`,
291
+ hex: hslToHex((baseHue + 210) % 360, split2S, split2L)
292
+ });
293
+ }
294
+
295
+ // Accent color (either monochromatic or triadic)
296
+ if (Math.random() > 0.5) {
297
+ // Monochromatic
298
+ const monoL = Math.random() > 0.5 ? baseL + 20 : baseL - 20;
299
+ colors.push({
300
+ hsl: `hsl(${baseHue}, ${baseS}%, ${monoL}%)`,
301
+ hex: hslToHex(baseHue, baseS, monoL)
302
+ });
303
+ } else {
304
+ // Triadic
305
+ const triadS = Math.floor(Math.random() * 20) + 70;
306
+ const triadL = Math.floor(Math.random() * 20) + 50;
307
+ colors.push({
308
+ hsl: `hsl(${(baseHue + 120) % 360}, ${triadS}%, ${triadL}%)`,
309
+ hex: hslToHex((baseHue + 120) % 360, triadS, triadL)
310
+ });
311
+ }
312
+
313
+ // Shuffle and return exactly 5 colors
314
+ return colors.sort(() => Math.random() - 0.5).slice(0, 5);
315
+ }
316
+
317
+ // Generate random theme name
318
+ function generateThemeName() {
319
+ const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
320
+ const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
321
+ return `${prefix} ${suffix}`;
322
+ }
323
+
324
+ // Generate random description
325
+ function generateDescription() {
326
+ const descriptor = descriptors[Math.floor(Math.random() * descriptors.length)];
327
+ return `A mysterious dimension ${descriptor}.`;
328
+ }
329
+
330
+ // Random pattern generators
331
+ const patternGenerators = [
332
+ function(container, colors) {
333
+ // Geometric grid
334
+ const angle = Math.floor(Math.random() * 4) * 45;
335
+ const size = Math.floor(Math.random() * 30) + 20;
336
+ container.style.background = `
337
+ linear-gradient(${angle}deg, currentColor 1px, transparent 1px),
338
+ linear-gradient(${angle + 90}deg, currentColor 1px, transparent 1px)
339
+ `;
340
+ container.style.backgroundSize = `${size}px ${size}px`;
341
+ return `background: linear-gradient(${angle}deg, var(--color-primary) 1px, transparent 1px),
342
+ linear-gradient(${angle + 90}deg, var(--color-primary) 1px, transparent 1px);
343
+ background-size: ${size}px ${size}px;`;
344
+ },
345
+ function(container, colors) {
346
+ // Radial gradient
347
+ container.style.background = `
348
+ radial-gradient(circle at 20% 30%, currentColor 0%, transparent 30%),
349
+ radial-gradient(circle at 80% 70%, currentColor 0%, transparent 30%)
350
+ `;
351
+ return `background: radial-gradient(circle at 20% 30%, var(--color-primary) 0%, transparent 30%),
352
+ radial-gradient(circle at 80% 70%, var(--color-primary) 0%, transparent 30%);`;
353
+ },
354
+ function(container, colors) {
355
+ // Particle field
356
+ container.innerHTML = '';
357
+ const particleCount = Math.floor(Math.random() * 30) + 20;
358
+ for (let i = 0; i < particleCount; i++) {
359
+ const particle = document.createElement('div');
360
+ particle.style.position = 'absolute';
361
+ particle.style.color = colors[Math.floor(Math.random() * colors.length)].hsl;
362
+ particle.style.opacity = Math.random() * 0.5 + 0.2;
363
+ particle.style.width = `${Math.random() * 10 + 2}px`;
364
+ particle.style.height = particle.style.width;
365
+ particle.style.borderRadius = '50%';
366
+ particle.style.left = `${Math.random() * 100}%`;
367
+ particle.style.top = `${Math.random() * 100}%`;
368
+ container.appendChild(particle);
369
+ }
370
+ return `/* Particle effect requires JavaScript to implement */`;
371
+ },
372
+ function(container, colors) {
373
+ // Organic shapes
374
+ container.innerHTML = '';
375
+ const shapeCount = Math.floor(Math.random() * 8) + 3;
376
+ for (let i = 0; i < shapeCount; i++) {
377
+ const shape = document.createElement('div');
378
+ shape.style.position = 'absolute';
379
+ shape.style.color = colors[Math.floor(Math.random() * colors.length)].hsl;
380
+ shape.style.opacity = Math.random() * 0.4 + 0.2;
381
+ shape.style.fontSize = `${Math.random() * 40 + 20}px`;
382
+ shape.style.left = `${Math.random() * 100}%`;
383
+ shape.style.top = `${Math.random() * 100}%`;
384
+ shape.style.transform = `rotate(${Math.random() * 360}deg) scale(${Math.random() * 1.5 + 0.5})`;
385
+
386
+ const shapeTypes = ['fa-star', 'fa-cloud', 'fa-circle', 'fa-square', 'fa-heart', 'fa-certificate'];
387
+ const randomShape = shapeTypes[Math.floor(Math.random() * shapeTypes.length)];
388
+ shape.innerHTML = `<i class="fas ${randomShape}"></i>`;
389
+
390
+ container.appendChild(shape);
391
+ }
392
+ return `/* Organic shapes effect requires JavaScript to implement */`;
393
+ },
394
+ function(container, colors) {
395
+ // Stripes
396
+ const angle = Math.floor(Math.random() * 180);
397
+ const width = Math.floor(Math.random() * 30) + 10;
398
+ container.style.background = `repeating-linear-gradient(${angle}deg, currentColor 0px, currentColor ${width}px, transparent ${width}px, transparent ${width * 2}px)`;
399
+ return `background: repeating-linear-gradient(${angle}deg, var(--color-primary) 0px, var(--color-primary) ${width}px, transparent ${width}px, transparent ${width * 2}px);`;
400
+ }
401
+ ];
402
+
403
+ // Create floating particles
404
+ function createParticles(colors) {
405
+ // Clear existing particles
406
+ particlesContainer.innerHTML = '';
407
+
408
+ // Create new particles
409
+ const particleCount = Math.floor(Math.random() * 50) + 30;
410
+ for (let i = 0; i < particleCount; i++) {
411
+ const particle = document.createElement('div');
412
+ particle.className = 'particle';
413
+
414
+ // Random size between 2px and 8px
415
+ const size = Math.random() * 6 + 2;
416
+ particle.style.width = `${size}px`;
417
+ particle.style.height = `${size}px`;
418
+
419
+ // Random position
420
+ particle.style.left = `${Math.random() * 100}%`;
421
+ particle.style.top = `${Math.random() * 100}%`;
422
+
423
+ // Random color from theme
424
+ particle.style.color = colors[Math.floor(Math.random() * colors.length)].hsl;
425
+
426
+ // Random animation
427
+ const duration = Math.random() * 30 + 10;
428
+ const delay = Math.random() * 10;
429
+ const xMovement = (Math.random() - 0.5) * 200;
430
+ const yMovement = (Math.random() - 0.5) * 200;
431
+
432
+ particle.style.animation = `
433
+ float ${duration}s ease-in-out ${delay}s infinite,
434
+ fade ${duration * 0.7}s ease-in-out infinite
435
+ `;
436
+
437
+ // Keyframes for this particle
438
+ const keyframes = `
439
+ @keyframes float {
440
+ 0%, 100% { transform: translate(0, 0); }
441
+ 50% { transform: translate(${xMovement}px, ${yMovement}px); }
442
+ }
443
+ @keyframes fade {
444
+ 0%, 100% { opacity: 0; }
445
+ 50% { opacity: ${Math.random() * 0.6 + 0.1}; }
446
+ }
447
+ `;
448
+
449
+ const style = document.createElement('style');
450
+ style.innerHTML = keyframes;
451
+ document.head.appendChild(style);
452
+
453
+ particlesContainer.appendChild(particle);
454
+ }
455
+ }
456
+
457
+ // Add to history
458
+ function addToHistory(theme) {
459
+ const historyItem = document.createElement('div');
460
+ historyItem.className = 'flex-shrink-0 w-24 h-24 rounded-xl overflow-hidden border-2 border-white/20 cursor-pointer transition-all hover:scale-105';
461
+ historyItem.style.background = `linear-gradient(135deg, ${theme.colors[0].hsl}, ${theme.colors[2].hsl})`;
462
+ historyItem.title = theme.name;
463
+
464
+ historyItem.addEventListener('click', () => {
465
+ applyTheme(theme);
466
+ });
467
+
468
+ historyContainer.insertBefore(historyItem, historyContainer.firstChild);
469
+
470
+ // Limit history to 10 items
471
+ if (historyContainer.children.length > 10) {
472
+ historyContainer.removeChild(historyContainer.lastChild);
473
+ }
474
+ }
475
+
476
+ // Generate CSS code for the current theme
477
+ function generateCSSCode(theme) {
478
+ let css = `:root {
479
+ /* Color Variables */
480
+ --color-primary: ${theme.colors[0].hsl};
481
+ --color-secondary: ${theme.colors[1].hsl};
482
+ --color-accent: ${theme.colors[2].hsl};
483
+ --color-background: ${theme.colors[3].hsl};
484
+ --color-text: ${theme.colors[4].hsl};
485
+
486
+ /* Hex Codes */
487
+ /* Primary: ${theme.colors[0].hex} */
488
+ /* Secondary: ${theme.colors[1].hex} */
489
+ /* Accent: ${theme.colors[2].hex} */
490
+ /* Background: ${theme.colors[3].hex} */
491
+ /* Text: ${theme.colors[4].hex} */
492
+ }
493
+
494
+ body {
495
+ background: linear-gradient(to bottom right, var(--color-primary), var(--color-accent));
496
+ color: var(--color-text);
497
+ }
498
+
499
+ /* Pattern Styles */
500
+ .pattern {
501
+ ${theme.patternCSS}
502
+ }`;
503
+
504
+ return css;
505
+ }
506
+
507
+ // Update hex code display
508
+ function updateHexCodes(colors) {
509
+ hexCodesContainer.innerHTML = '';
510
+ colors.forEach((color, index) => {
511
+ const hexCode = document.createElement('div');
512
+ hexCode.className = 'flex items-center gap-1';
513
+ hexCode.innerHTML = `
514
+ <span class="inline-block w-3 h-3 rounded-full" style="background-color: ${color.hex}"></span>
515
+ <span>${color.hex}</span>
516
+ `;
517
+ hexCodesContainer.appendChild(hexCode);
518
+ });
519
+
520
+ // Update tooltips
521
+ colorElements.forEach((el, index) => {
522
+ const tooltip = el.querySelector('.hex-tooltip');
523
+ if (tooltip) {
524
+ tooltip.textContent = colors[index].hex;
525
+ }
526
+ });
527
+ }
528
+
529
+ // Apply a theme
530
+ function applyTheme(theme) {
531
+ // Update theme info
532
+ themeName.textContent = theme.name;
533
+ themeIcon.innerHTML = `<i class="fas ${theme.icon}"></i>`;
534
+ themeDescription.textContent = theme.description;
535
+
536
+ // Update colors
537
+ theme.colors.forEach((color, index) => {
538
+ colorElements[index].style.backgroundColor = color.hsl;
539
+ });
540
+
541
+ // Update hex codes
542
+ updateHexCodes(theme.colors);
543
+
544
+ // Set main color
545
+ const mainColor = theme.colors[0].hsl;
546
+ themeDisplay.style.borderColor = `${mainColor}80`;
547
+
548
+ // Apply pattern
549
+ patternDisplay.innerHTML = '';
550
+ patternDisplay.style.color = theme.colors[2].hsl;
551
+ theme.patternCSS = theme.patternGenerator(patternDisplay, theme.colors);
552
+
553
+ // Update background gradient
554
+ body.style.background = `linear-gradient(to bottom right, ${theme.colors[0].hsl}, ${theme.colors[2].hsl})`;
555
+
556
+ // Create particles
557
+ createParticles(theme.colors);
558
+
559
+ // Generate CSS code
560
+ cssCode.textContent = generateCSSCode(theme);
561
+ }
562
+
563
+ // Generate random theme
564
+ function generateRandomTheme() {
565
+ const colors = generateColorPalette();
566
+
567
+ const theme = {
568
+ name: generateThemeName(),
569
+ icon: icons[Math.floor(Math.random() * icons.length)],
570
+ description: generateDescription(),
571
+ colors: colors,
572
+ patternGenerator: patternGenerators[Math.floor(Math.random() * patternGenerators.length)],
573
+ patternCSS: ''
574
+ };
575
+
576
+ addToHistory(theme);
577
+ applyTheme(theme);
578
+ }
579
+
580
+ // Copy text to clipboard
581
+ function copyToClipboard(text, button) {
582
+ navigator.clipboard.writeText(text).then(() => {
583
+ button.classList.add('copied');
584
+ button.innerHTML = '<i class="fas fa-check"></i> Copied!';
585
+ setTimeout(() => {
586
+ button.classList.remove('copied');
587
+ if (button.id === 'copy-hex-btn') {
588
+ button.innerHTML = '<i class="fas fa-copy"></i> Copy';
589
+ } else {
590
+ button.innerHTML = '<i class="fas fa-copy"></i> Copy';
591
+ }
592
+ }, 2000);
593
+ });
594
+ }
595
+
596
+ // Initial generation
597
+ generateRandomTheme();
598
+
599
+ // Button click event
600
+ generateBtn.addEventListener('click', () => {
601
+ // Add click animation
602
+ generateBtn.classList.add('active:scale-95');
603
+ setTimeout(() => {
604
+ generateBtn.classList.remove('active:scale-95');
605
+ }, 150);
606
+
607
+ generateRandomTheme();
608
+ });
609
+
610
+ // Toggle CSS code container
611
+ toggleCssBtn.addEventListener('click', () => {
612
+ cssCodeContainer.classList.toggle('open');
613
+ if (cssCodeContainer.classList.contains('open')) {
614
+ toggleCssBtn.innerHTML = '<i class="fas fa-code"></i> Hide CSS Code';
615
+ } else {
616
+ toggleCssBtn.innerHTML = '<i class="fas fa-code"></i> Generate CSS Code';
617
+ }
618
+ });
619
+
620
+ // Copy hex codes
621
+ copyHexBtn.addEventListener('click', () => {
622
+ const hexCodes = Array.from(hexCodesContainer.querySelectorAll('div')).map(div => {
623
+ return div.textContent.trim().split('\n').pop().trim();
624
+ }).join('\n');
625
+ copyToClipboard(hexCodes, copyHexBtn);
626
+ });
627
+
628
+ // Copy CSS code
629
+ copyCssBtn.addEventListener('click', () => {
630
+ copyToClipboard(cssCode.textContent, copyCssBtn);
631
+ });
632
+ </script>
633
+ <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>
634
+ </html>