creative-genius-engine 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/PROJECT.md +99 -0
- package/README.md +82 -0
- package/cli.mjs +183 -0
- package/dist/creative-genius-engine-1.0.0.tgz +0 -0
- package/dist/index.html +1296 -0
- package/dist/install.sh +9 -0
- package/examples/demo.mjs +120 -0
- package/lib/connections.mjs +180 -0
- package/lib/index.mjs +69 -0
- package/lib/janusian.mjs +131 -0
- package/lib/problems.mjs +231 -0
- package/lib/process.mjs +313 -0
- package/lib/wisdom.mjs +239 -0
- package/package.json +31 -0
package/dist/index.html
ADDED
|
@@ -0,0 +1,1296 @@
|
|
|
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>Creative Genius Engine 🎻 | Think Like a Genius</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
--primary: #8b5cf6;
|
|
11
|
+
--primary-dark: #7c3aed;
|
|
12
|
+
--secondary: #06b6d4;
|
|
13
|
+
--accent: #f59e0b;
|
|
14
|
+
--bg-dark: #0a0a0f;
|
|
15
|
+
--bg-card: rgba(255,255,255,0.03);
|
|
16
|
+
--text: #e4e4e7;
|
|
17
|
+
--text-dim: #71717a;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
21
|
+
|
|
22
|
+
body {
|
|
23
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
24
|
+
background: var(--bg-dark);
|
|
25
|
+
color: var(--text);
|
|
26
|
+
min-height: 100vh;
|
|
27
|
+
overflow-x: hidden;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Animated background */
|
|
31
|
+
.bg-grid {
|
|
32
|
+
position: fixed;
|
|
33
|
+
top: 0; left: 0; right: 0; bottom: 0;
|
|
34
|
+
background-image:
|
|
35
|
+
linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
|
|
36
|
+
linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
|
|
37
|
+
background-size: 50px 50px;
|
|
38
|
+
z-index: -2;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.bg-glow {
|
|
42
|
+
position: fixed;
|
|
43
|
+
top: -50%; left: -50%;
|
|
44
|
+
width: 200%; height: 200%;
|
|
45
|
+
background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
|
|
46
|
+
radial-gradient(circle at 70% 70%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
|
|
47
|
+
animation: float 20s ease-in-out infinite;
|
|
48
|
+
z-index: -1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@keyframes float {
|
|
52
|
+
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
53
|
+
50% { transform: translate(-5%, -5%) rotate(5deg); }
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Particles */
|
|
57
|
+
.particles {
|
|
58
|
+
position: fixed;
|
|
59
|
+
top: 0; left: 0; right: 0; bottom: 0;
|
|
60
|
+
pointer-events: none;
|
|
61
|
+
z-index: -1;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.particle {
|
|
65
|
+
position: absolute;
|
|
66
|
+
width: 4px; height: 4px;
|
|
67
|
+
background: var(--primary);
|
|
68
|
+
border-radius: 50%;
|
|
69
|
+
animation: particle-float 15s infinite;
|
|
70
|
+
opacity: 0.3;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@keyframes particle-float {
|
|
74
|
+
0%, 100% { transform: translateY(100vh) scale(0); opacity: 0; }
|
|
75
|
+
10% { opacity: 0.3; }
|
|
76
|
+
90% { opacity: 0.3; }
|
|
77
|
+
100% { transform: translateY(-10vh) scale(1); opacity: 0; }
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.container { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; position: relative; }
|
|
81
|
+
|
|
82
|
+
/* Hero */
|
|
83
|
+
.hero {
|
|
84
|
+
text-align: center;
|
|
85
|
+
padding: 4rem 0 6rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.hero-badge {
|
|
89
|
+
display: inline-flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
gap: 0.5rem;
|
|
92
|
+
background: rgba(139, 92, 246, 0.1);
|
|
93
|
+
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
94
|
+
padding: 0.5rem 1rem;
|
|
95
|
+
border-radius: 999px;
|
|
96
|
+
font-size: 0.85rem;
|
|
97
|
+
color: var(--primary);
|
|
98
|
+
margin-bottom: 2rem;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.hero h1 {
|
|
102
|
+
font-size: clamp(3rem, 8vw, 5rem);
|
|
103
|
+
font-weight: 800;
|
|
104
|
+
background: linear-gradient(135deg, #fff 0%, var(--primary) 50%, var(--secondary) 100%);
|
|
105
|
+
-webkit-background-clip: text;
|
|
106
|
+
-webkit-text-fill-color: transparent;
|
|
107
|
+
background-clip: text;
|
|
108
|
+
line-height: 1.1;
|
|
109
|
+
margin-bottom: 1.5rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.hero-sub {
|
|
113
|
+
font-size: 1.35rem;
|
|
114
|
+
color: var(--text-dim);
|
|
115
|
+
max-width: 600px;
|
|
116
|
+
margin: 0 auto 3rem;
|
|
117
|
+
line-height: 1.6;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.hero-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
|
|
121
|
+
|
|
122
|
+
.btn {
|
|
123
|
+
display: inline-flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
gap: 0.5rem;
|
|
126
|
+
padding: 1rem 2rem;
|
|
127
|
+
border-radius: 12px;
|
|
128
|
+
font-weight: 600;
|
|
129
|
+
text-decoration: none;
|
|
130
|
+
transition: all 0.3s ease;
|
|
131
|
+
font-size: 1rem;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.btn-primary {
|
|
135
|
+
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
|
136
|
+
color: white;
|
|
137
|
+
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.btn-primary:hover {
|
|
141
|
+
transform: translateY(-3px);
|
|
142
|
+
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.btn-secondary {
|
|
146
|
+
background: rgba(255,255,255,0.05);
|
|
147
|
+
color: var(--text);
|
|
148
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.btn-secondary:hover {
|
|
152
|
+
background: rgba(255,255,255,0.1);
|
|
153
|
+
transform: translateY(-2px);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* Install Section */
|
|
157
|
+
.section { margin-bottom: 5rem; }
|
|
158
|
+
|
|
159
|
+
.section-header {
|
|
160
|
+
text-align: center;
|
|
161
|
+
margin-bottom: 3rem;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.section-header h2 {
|
|
165
|
+
font-size: 2.5rem;
|
|
166
|
+
font-weight: 700;
|
|
167
|
+
margin-bottom: 1rem;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.section-header p {
|
|
171
|
+
color: var(--text-dim);
|
|
172
|
+
font-size: 1.1rem;
|
|
173
|
+
max-width: 600px;
|
|
174
|
+
margin: 0 auto;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.install-card {
|
|
178
|
+
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
|
|
179
|
+
border: 1px solid rgba(139, 92, 246, 0.2);
|
|
180
|
+
border-radius: 24px;
|
|
181
|
+
padding: 3rem;
|
|
182
|
+
position: relative;
|
|
183
|
+
overflow: hidden;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.install-card::before {
|
|
187
|
+
content: '';
|
|
188
|
+
position: absolute;
|
|
189
|
+
top: 0; left: 0; right: 0;
|
|
190
|
+
height: 1px;
|
|
191
|
+
background: linear-gradient(90deg, transparent, var(--primary), transparent);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.install-tabs {
|
|
195
|
+
display: flex;
|
|
196
|
+
gap: 1rem;
|
|
197
|
+
margin-bottom: 2rem;
|
|
198
|
+
flex-wrap: wrap;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.install-tab {
|
|
202
|
+
padding: 0.75rem 1.5rem;
|
|
203
|
+
background: rgba(255,255,255,0.05);
|
|
204
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
205
|
+
border-radius: 8px;
|
|
206
|
+
cursor: pointer;
|
|
207
|
+
transition: all 0.2s;
|
|
208
|
+
font-weight: 500;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.install-tab.active {
|
|
212
|
+
background: var(--primary);
|
|
213
|
+
border-color: var(--primary);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.install-tab:hover:not(.active) {
|
|
217
|
+
background: rgba(255,255,255,0.1);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.code-block {
|
|
221
|
+
background: rgba(0,0,0,0.4);
|
|
222
|
+
border-radius: 12px;
|
|
223
|
+
padding: 1.5rem;
|
|
224
|
+
font-family: 'JetBrains Mono', monospace;
|
|
225
|
+
font-size: 0.95rem;
|
|
226
|
+
overflow-x: auto;
|
|
227
|
+
position: relative;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.code-block .comment { color: var(--text-dim); }
|
|
231
|
+
.code-block .command { color: var(--secondary); }
|
|
232
|
+
.code-block .string { color: var(--accent); }
|
|
233
|
+
|
|
234
|
+
.copy-btn {
|
|
235
|
+
position: absolute;
|
|
236
|
+
top: 1rem; right: 1rem;
|
|
237
|
+
background: rgba(255,255,255,0.1);
|
|
238
|
+
border: none;
|
|
239
|
+
padding: 0.5rem 1rem;
|
|
240
|
+
border-radius: 6px;
|
|
241
|
+
color: var(--text);
|
|
242
|
+
cursor: pointer;
|
|
243
|
+
font-size: 0.8rem;
|
|
244
|
+
transition: all 0.2s;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.copy-btn:hover { background: rgba(255,255,255,0.2); }
|
|
248
|
+
|
|
249
|
+
/* Genius Gallery */
|
|
250
|
+
.genius-grid {
|
|
251
|
+
display: grid;
|
|
252
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
253
|
+
gap: 1.5rem;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.genius-card {
|
|
257
|
+
background: var(--bg-card);
|
|
258
|
+
border: 1px solid rgba(255,255,255,0.05);
|
|
259
|
+
border-radius: 20px;
|
|
260
|
+
overflow: hidden;
|
|
261
|
+
cursor: pointer;
|
|
262
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
263
|
+
text-decoration: none;
|
|
264
|
+
color: inherit;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.genius-card:hover {
|
|
268
|
+
transform: translateY(-8px) scale(1.02);
|
|
269
|
+
border-color: rgba(139, 92, 246, 0.3);
|
|
270
|
+
box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 60px rgba(139, 92, 246, 0.1);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.genius-image {
|
|
274
|
+
width: 100%;
|
|
275
|
+
height: 200px;
|
|
276
|
+
object-fit: cover;
|
|
277
|
+
transition: transform 0.4s;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.genius-card:hover .genius-image {
|
|
281
|
+
transform: scale(1.1);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.genius-image-container {
|
|
285
|
+
overflow: hidden;
|
|
286
|
+
position: relative;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.genius-image-container::after {
|
|
290
|
+
content: '';
|
|
291
|
+
position: absolute;
|
|
292
|
+
bottom: 0; left: 0; right: 0;
|
|
293
|
+
height: 50%;
|
|
294
|
+
background: linear-gradient(transparent, var(--bg-dark));
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.genius-info {
|
|
298
|
+
padding: 1.5rem;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.genius-name {
|
|
302
|
+
font-size: 1.3rem;
|
|
303
|
+
font-weight: 700;
|
|
304
|
+
margin-bottom: 0.5rem;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.genius-era {
|
|
308
|
+
font-size: 0.85rem;
|
|
309
|
+
color: var(--primary);
|
|
310
|
+
margin-bottom: 0.75rem;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.genius-desc {
|
|
314
|
+
color: var(--text-dim);
|
|
315
|
+
font-size: 0.9rem;
|
|
316
|
+
line-height: 1.6;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.genius-tag {
|
|
320
|
+
display: inline-block;
|
|
321
|
+
background: rgba(139, 92, 246, 0.1);
|
|
322
|
+
color: var(--primary);
|
|
323
|
+
padding: 0.25rem 0.75rem;
|
|
324
|
+
border-radius: 999px;
|
|
325
|
+
font-size: 0.75rem;
|
|
326
|
+
margin-top: 1rem;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
/* Modules Section */
|
|
330
|
+
.modules-grid {
|
|
331
|
+
display: grid;
|
|
332
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
333
|
+
gap: 2rem;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.module-card {
|
|
337
|
+
background: var(--bg-card);
|
|
338
|
+
border: 1px solid rgba(255,255,255,0.05);
|
|
339
|
+
border-radius: 20px;
|
|
340
|
+
padding: 2rem;
|
|
341
|
+
cursor: pointer;
|
|
342
|
+
transition: all 0.3s ease;
|
|
343
|
+
text-decoration: none;
|
|
344
|
+
color: inherit;
|
|
345
|
+
position: relative;
|
|
346
|
+
overflow: hidden;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.module-card::before {
|
|
350
|
+
content: '';
|
|
351
|
+
position: absolute;
|
|
352
|
+
top: 0; left: 0;
|
|
353
|
+
width: 4px; height: 100%;
|
|
354
|
+
background: linear-gradient(180deg, var(--primary), var(--secondary));
|
|
355
|
+
opacity: 0;
|
|
356
|
+
transition: opacity 0.3s;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.module-card:hover {
|
|
360
|
+
transform: translateY(-4px);
|
|
361
|
+
border-color: rgba(139, 92, 246, 0.2);
|
|
362
|
+
background: rgba(139, 92, 246, 0.05);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.module-card:hover::before { opacity: 1; }
|
|
366
|
+
|
|
367
|
+
.module-icon {
|
|
368
|
+
width: 60px; height: 60px;
|
|
369
|
+
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.2));
|
|
370
|
+
border-radius: 16px;
|
|
371
|
+
display: flex;
|
|
372
|
+
align-items: center;
|
|
373
|
+
justify-content: center;
|
|
374
|
+
font-size: 1.8rem;
|
|
375
|
+
margin-bottom: 1.5rem;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.module-card h3 {
|
|
379
|
+
font-size: 1.4rem;
|
|
380
|
+
font-weight: 700;
|
|
381
|
+
margin-bottom: 0.75rem;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.module-card p {
|
|
385
|
+
color: var(--text-dim);
|
|
386
|
+
line-height: 1.7;
|
|
387
|
+
margin-bottom: 1rem;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.module-examples {
|
|
391
|
+
background: rgba(0,0,0,0.3);
|
|
392
|
+
border-radius: 8px;
|
|
393
|
+
padding: 1rem;
|
|
394
|
+
font-family: 'JetBrains Mono', monospace;
|
|
395
|
+
font-size: 0.8rem;
|
|
396
|
+
color: var(--secondary);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.module-link {
|
|
400
|
+
display: inline-flex;
|
|
401
|
+
align-items: center;
|
|
402
|
+
gap: 0.5rem;
|
|
403
|
+
color: var(--primary);
|
|
404
|
+
font-weight: 500;
|
|
405
|
+
margin-top: 1rem;
|
|
406
|
+
font-size: 0.9rem;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
/* Janusian Spotlight */
|
|
410
|
+
.spotlight {
|
|
411
|
+
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
|
|
412
|
+
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
413
|
+
border-radius: 24px;
|
|
414
|
+
padding: 4rem;
|
|
415
|
+
text-align: center;
|
|
416
|
+
position: relative;
|
|
417
|
+
overflow: hidden;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.spotlight::before {
|
|
421
|
+
content: '☯';
|
|
422
|
+
position: absolute;
|
|
423
|
+
top: 50%; left: 50%;
|
|
424
|
+
transform: translate(-50%, -50%);
|
|
425
|
+
font-size: 20rem;
|
|
426
|
+
opacity: 0.03;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.spotlight h2 {
|
|
430
|
+
font-size: 2.5rem;
|
|
431
|
+
margin-bottom: 1.5rem;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.spotlight-desc {
|
|
435
|
+
font-size: 1.25rem;
|
|
436
|
+
color: var(--text-dim);
|
|
437
|
+
max-width: 700px;
|
|
438
|
+
margin: 0 auto 3rem;
|
|
439
|
+
line-height: 1.8;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.examples-grid {
|
|
443
|
+
display: grid;
|
|
444
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
445
|
+
gap: 1.5rem;
|
|
446
|
+
text-align: left;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.example-card {
|
|
450
|
+
background: rgba(0,0,0,0.3);
|
|
451
|
+
border-radius: 16px;
|
|
452
|
+
padding: 1.5rem;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.example-genius {
|
|
456
|
+
font-weight: 700;
|
|
457
|
+
color: var(--accent);
|
|
458
|
+
margin-bottom: 0.5rem;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.example-work {
|
|
462
|
+
font-size: 0.85rem;
|
|
463
|
+
color: var(--text-dim);
|
|
464
|
+
margin-bottom: 0.75rem;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.example-opposite {
|
|
468
|
+
font-style: italic;
|
|
469
|
+
color: var(--secondary);
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
/* Quick Start */
|
|
473
|
+
.quickstart {
|
|
474
|
+
background: rgba(0,0,0,0.3);
|
|
475
|
+
border-radius: 24px;
|
|
476
|
+
padding: 3rem;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.quickstart h2 {
|
|
480
|
+
font-size: 2rem;
|
|
481
|
+
margin-bottom: 2rem;
|
|
482
|
+
text-align: center;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.quickstart-code {
|
|
486
|
+
background: rgba(0,0,0,0.4);
|
|
487
|
+
border-radius: 12px;
|
|
488
|
+
padding: 2rem;
|
|
489
|
+
font-family: 'JetBrains Mono', monospace;
|
|
490
|
+
font-size: 0.9rem;
|
|
491
|
+
line-height: 2;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.quickstart-code .prompt { color: var(--primary); }
|
|
495
|
+
.quickstart-code .output { color: var(--text-dim); }
|
|
496
|
+
.quickstart-code .arrow { color: var(--accent); }
|
|
497
|
+
|
|
498
|
+
/* Footer */
|
|
499
|
+
footer {
|
|
500
|
+
text-align: center;
|
|
501
|
+
padding: 4rem 2rem;
|
|
502
|
+
border-top: 1px solid rgba(255,255,255,0.05);
|
|
503
|
+
margin-top: 4rem;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
.footer-logo {
|
|
507
|
+
font-size: 2rem;
|
|
508
|
+
margin-bottom: 1rem;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
.footer-text {
|
|
512
|
+
color: var(--text-dim);
|
|
513
|
+
font-size: 0.9rem;
|
|
514
|
+
line-height: 1.8;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.footer-quote {
|
|
518
|
+
font-style: italic;
|
|
519
|
+
color: var(--primary);
|
|
520
|
+
margin-top: 2rem;
|
|
521
|
+
font-size: 1.1rem;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
/* Modal */
|
|
525
|
+
.modal {
|
|
526
|
+
display: none;
|
|
527
|
+
position: fixed;
|
|
528
|
+
top: 0; left: 0; right: 0; bottom: 0;
|
|
529
|
+
background: rgba(0,0,0,0.9);
|
|
530
|
+
z-index: 1000;
|
|
531
|
+
overflow-y: auto;
|
|
532
|
+
padding: 2rem;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.modal.active { display: flex; align-items: center; justify-content: center; }
|
|
536
|
+
|
|
537
|
+
.modal-content {
|
|
538
|
+
background: var(--bg-dark);
|
|
539
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
540
|
+
border-radius: 24px;
|
|
541
|
+
max-width: 900px;
|
|
542
|
+
width: 100%;
|
|
543
|
+
max-height: 90vh;
|
|
544
|
+
overflow-y: auto;
|
|
545
|
+
position: relative;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.modal-close {
|
|
549
|
+
position: absolute;
|
|
550
|
+
top: 1.5rem; right: 1.5rem;
|
|
551
|
+
background: rgba(255,255,255,0.1);
|
|
552
|
+
border: none;
|
|
553
|
+
width: 40px; height: 40px;
|
|
554
|
+
border-radius: 50%;
|
|
555
|
+
color: white;
|
|
556
|
+
font-size: 1.5rem;
|
|
557
|
+
cursor: pointer;
|
|
558
|
+
z-index: 10;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.modal-images {
|
|
562
|
+
display: grid;
|
|
563
|
+
grid-template-columns: repeat(3, 1fr);
|
|
564
|
+
gap: 0.5rem;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.modal-images img {
|
|
568
|
+
width: 100%;
|
|
569
|
+
height: 200px;
|
|
570
|
+
object-fit: cover;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.modal-images img:first-child {
|
|
574
|
+
grid-column: span 2;
|
|
575
|
+
height: 300px;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.modal-body {
|
|
579
|
+
padding: 2rem;
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
.modal-body h2 {
|
|
583
|
+
font-size: 2rem;
|
|
584
|
+
margin-bottom: 0.5rem;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.modal-era {
|
|
588
|
+
color: var(--primary);
|
|
589
|
+
margin-bottom: 1.5rem;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.modal-body p {
|
|
593
|
+
color: var(--text-dim);
|
|
594
|
+
line-height: 1.8;
|
|
595
|
+
margin-bottom: 1rem;
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
.modal-section {
|
|
599
|
+
margin-top: 2rem;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
.modal-section h3 {
|
|
603
|
+
font-size: 1.2rem;
|
|
604
|
+
margin-bottom: 1rem;
|
|
605
|
+
color: var(--secondary);
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
.modal-section ul {
|
|
609
|
+
list-style: none;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
.modal-section li {
|
|
613
|
+
padding: 0.5rem 0;
|
|
614
|
+
padding-left: 1.5rem;
|
|
615
|
+
position: relative;
|
|
616
|
+
color: var(--text-dim);
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.modal-section li::before {
|
|
620
|
+
content: '→';
|
|
621
|
+
position: absolute;
|
|
622
|
+
left: 0;
|
|
623
|
+
color: var(--primary);
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
/* Responsive */
|
|
627
|
+
@media (max-width: 768px) {
|
|
628
|
+
.hero h1 { font-size: 2.5rem; }
|
|
629
|
+
.hero-sub { font-size: 1.1rem; }
|
|
630
|
+
.install-card { padding: 1.5rem; }
|
|
631
|
+
.spotlight { padding: 2rem; }
|
|
632
|
+
.modules-grid { grid-template-columns: 1fr; }
|
|
633
|
+
.modal-images { grid-template-columns: 1fr; }
|
|
634
|
+
.modal-images img:first-child { grid-column: span 1; height: 200px; }
|
|
635
|
+
}
|
|
636
|
+
</style>
|
|
637
|
+
</head>
|
|
638
|
+
<body>
|
|
639
|
+
<div class="bg-grid"></div>
|
|
640
|
+
<div class="bg-glow"></div>
|
|
641
|
+
<div class="particles" id="particles"></div>
|
|
642
|
+
|
|
643
|
+
<div class="container">
|
|
644
|
+
<!-- Hero -->
|
|
645
|
+
<section class="hero">
|
|
646
|
+
<div class="hero-badge">
|
|
647
|
+
<span>🎻</span>
|
|
648
|
+
<span>v1.0.0 — Now Available</span>
|
|
649
|
+
</div>
|
|
650
|
+
<h1>Creative Genius Engine</h1>
|
|
651
|
+
<p class="hero-sub">Think like Leonardo. Create like Picasso. Connect like Feynman. A creativity toolkit that gives AI agents the cognitive patterns of history's greatest minds.</p>
|
|
652
|
+
<div class="hero-buttons">
|
|
653
|
+
<a href="#install" class="btn btn-primary">
|
|
654
|
+
<span>⚡</span> Get Started
|
|
655
|
+
</a>
|
|
656
|
+
<a href="https://github.com/Bartok9/creative-genius-engine" class="btn btn-secondary" target="_blank">
|
|
657
|
+
<span>📦</span> View on GitHub
|
|
658
|
+
</a>
|
|
659
|
+
</div>
|
|
660
|
+
</section>
|
|
661
|
+
|
|
662
|
+
<!-- Install -->
|
|
663
|
+
<section class="section" id="install">
|
|
664
|
+
<div class="section-header">
|
|
665
|
+
<h2>⚡ Installation</h2>
|
|
666
|
+
<p>Get up and running in 30 seconds</p>
|
|
667
|
+
</div>
|
|
668
|
+
<div class="install-card">
|
|
669
|
+
<div class="install-tabs">
|
|
670
|
+
<button class="install-tab active" onclick="showTab('npm')">npm</button>
|
|
671
|
+
<button class="install-tab" onclick="showTab('curl')">curl</button>
|
|
672
|
+
<button class="install-tab" onclick="showTab('git')">git clone</button>
|
|
673
|
+
</div>
|
|
674
|
+
<div id="tab-npm" class="code-block">
|
|
675
|
+
<button class="copy-btn" onclick="copyCode('npm')">Copy</button>
|
|
676
|
+
<span class="comment"># Install via npm</span>
|
|
677
|
+
<span class="command">npm install</span> creative-genius-engine
|
|
678
|
+
|
|
679
|
+
<span class="comment"># Then import and use</span>
|
|
680
|
+
<span class="command">import</span> { janusian, connections, process } <span class="command">from</span> <span class="string">'creative-genius-engine'</span>;
|
|
681
|
+
|
|
682
|
+
<span class="comment"># Or use the CLI</span>
|
|
683
|
+
<span class="command">npx</span> creative-genius-engine spark <span class="string">"Your creative challenge"</span>
|
|
684
|
+
</div>
|
|
685
|
+
<div id="tab-curl" class="code-block" style="display:none;">
|
|
686
|
+
<button class="copy-btn" onclick="copyCode('curl')">Copy</button>
|
|
687
|
+
<span class="comment"># Download and extract directly</span>
|
|
688
|
+
<span class="command">curl</span> -sL https://dist-dun-six-77.vercel.app/creative-genius-engine-1.0.0.tgz | <span class="command">tar</span> -xz
|
|
689
|
+
|
|
690
|
+
<span class="comment"># Move to your project</span>
|
|
691
|
+
<span class="command">mv</span> package creative-genius-engine
|
|
692
|
+
<span class="command">cd</span> creative-genius-engine
|
|
693
|
+
|
|
694
|
+
<span class="comment"># Start creating</span>
|
|
695
|
+
<span class="command">node</span> cli.mjs spark <span class="string">"Your creative challenge"</span>
|
|
696
|
+
</div>
|
|
697
|
+
<div id="tab-git" class="code-block" style="display:none;">
|
|
698
|
+
<button class="copy-btn" onclick="copyCode('git')">Copy</button>
|
|
699
|
+
<span class="comment"># Clone the repository</span>
|
|
700
|
+
<span class="command">git clone</span> https://github.com/Bartok9/creative-genius-engine.git
|
|
701
|
+
|
|
702
|
+
<span class="comment"># Install dependencies</span>
|
|
703
|
+
<span class="command">cd</span> creative-genius-engine
|
|
704
|
+
<span class="command">npm install</span>
|
|
705
|
+
|
|
706
|
+
<span class="comment"># Run the CLI</span>
|
|
707
|
+
<span class="command">node</span> cli.mjs --help
|
|
708
|
+
</div>
|
|
709
|
+
<div style="margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
|
|
710
|
+
<a href="/creative-genius-engine-1.0.0.tgz" class="btn btn-secondary">📦 Download .tgz</a>
|
|
711
|
+
<a href="https://www.npmjs.com/package/creative-genius-engine" class="btn btn-secondary" target="_blank">📋 npm Package</a>
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
</section>
|
|
715
|
+
|
|
716
|
+
<!-- Geniuses -->
|
|
717
|
+
<section class="section">
|
|
718
|
+
<div class="section-header">
|
|
719
|
+
<h2>🧠 Synthesized From History's Greatest Minds</h2>
|
|
720
|
+
<p>Click any genius to explore their creative patterns and masterworks</p>
|
|
721
|
+
</div>
|
|
722
|
+
<div class="genius-grid">
|
|
723
|
+
<a class="genius-card" onclick="openGenius('davinci')">
|
|
724
|
+
<div class="genius-image-container">
|
|
725
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg/800px-Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg" alt="Leonardo da Vinci" class="genius-image">
|
|
726
|
+
</div>
|
|
727
|
+
<div class="genius-info">
|
|
728
|
+
<div class="genius-name">Leonardo da Vinci</div>
|
|
729
|
+
<div class="genius-era">1452–1519 · Renaissance Polymath</div>
|
|
730
|
+
<div class="genius-desc">Master of connecting disparate domains. His notebooks reveal how he linked anatomy to architecture, water flow to hair curls.</div>
|
|
731
|
+
<span class="genius-tag">Cross-Domain Connections</span>
|
|
732
|
+
</div>
|
|
733
|
+
</a>
|
|
734
|
+
|
|
735
|
+
<a class="genius-card" onclick="openGenius('tesla')">
|
|
736
|
+
<div class="genius-image-container">
|
|
737
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/7/79/Tesla_circa_1890.jpeg" alt="Nikola Tesla" class="genius-image">
|
|
738
|
+
</div>
|
|
739
|
+
<div class="genius-info">
|
|
740
|
+
<div class="genius-name">Nikola Tesla</div>
|
|
741
|
+
<div class="genius-era">1856–1943 · Electrical Visionary</div>
|
|
742
|
+
<div class="genius-desc">Visualized complete inventions in his mind before building. His mental simulation capabilities were legendary.</div>
|
|
743
|
+
<span class="genius-tag">Mental Visualization</span>
|
|
744
|
+
</div>
|
|
745
|
+
</a>
|
|
746
|
+
|
|
747
|
+
<a class="genius-card" onclick="openGenius('bach')">
|
|
748
|
+
<div class="genius-image-container">
|
|
749
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Johann_Sebastian_Bach.jpg" alt="Johann Sebastian Bach" class="genius-image">
|
|
750
|
+
</div>
|
|
751
|
+
<div class="genius-info">
|
|
752
|
+
<div class="genius-name">Johann Sebastian Bach</div>
|
|
753
|
+
<div class="genius-era">1685–1750 · Baroque Master</div>
|
|
754
|
+
<div class="genius-desc">Held multiple melodic lines simultaneously. His counterpoint demonstrated Janusian thinking in musical form.</div>
|
|
755
|
+
<span class="genius-tag">Counterpoint & Simultaneity</span>
|
|
756
|
+
</div>
|
|
757
|
+
</a>
|
|
758
|
+
|
|
759
|
+
<a class="genius-card" onclick="openGenius('einstein')">
|
|
760
|
+
<div class="genius-image-container">
|
|
761
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg" alt="Albert Einstein" class="genius-image">
|
|
762
|
+
</div>
|
|
763
|
+
<div class="genius-info">
|
|
764
|
+
<div class="genius-name">Albert Einstein</div>
|
|
765
|
+
<div class="genius-era">1879–1955 · Theoretical Physicist</div>
|
|
766
|
+
<div class="genius-desc">Used thought experiments to hold contradictions. Relativity emerged from imagining both motion AND rest as relative.</div>
|
|
767
|
+
<span class="genius-tag">Thought Experiments</span>
|
|
768
|
+
</div>
|
|
769
|
+
</a>
|
|
770
|
+
|
|
771
|
+
<a class="genius-card" onclick="openGenius('feynman')">
|
|
772
|
+
<div class="genius-image-container">
|
|
773
|
+
<img src="https://upload.wikimedia.org/wikipedia/en/4/42/Richard_Feynman_Nobel.jpg" alt="Richard Feynman" class="genius-image">
|
|
774
|
+
</div>
|
|
775
|
+
<div class="genius-info">
|
|
776
|
+
<div class="genius-name">Richard Feynman</div>
|
|
777
|
+
<div class="genius-era">1918–1988 · Quantum Pioneer</div>
|
|
778
|
+
<div class="genius-desc">Kept 12 favorite problems always in mind. Any new discovery was tested against these waiting questions.</div>
|
|
779
|
+
<span class="genius-tag">12 Favorite Problems</span>
|
|
780
|
+
</div>
|
|
781
|
+
</a>
|
|
782
|
+
|
|
783
|
+
<a class="genius-card" onclick="openGenius('angelou')">
|
|
784
|
+
<div class="genius-image-container">
|
|
785
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Angelou_at_Clinton_inauguration_%28cropped_2%29.jpg" alt="Maya Angelou" class="genius-image">
|
|
786
|
+
</div>
|
|
787
|
+
<div class="genius-info">
|
|
788
|
+
<div class="genius-name">Maya Angelou</div>
|
|
789
|
+
<div class="genius-era">1928–2014 · Poet & Memoirist</div>
|
|
790
|
+
<div class="genius-desc">Transformed personal pain into universal truth. Her writing process involved early mornings and sparse hotel rooms.</div>
|
|
791
|
+
<span class="genius-tag">Transformation of Pain</span>
|
|
792
|
+
</div>
|
|
793
|
+
</a>
|
|
794
|
+
|
|
795
|
+
<a class="genius-card" onclick="openGenius('picasso')">
|
|
796
|
+
<div class="genius-image-container">
|
|
797
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/9/98/Pablo_picasso_1.jpg" alt="Pablo Picasso" class="genius-image">
|
|
798
|
+
</div>
|
|
799
|
+
<div class="genius-info">
|
|
800
|
+
<div class="genius-name">Pablo Picasso</div>
|
|
801
|
+
<div class="genius-era">1881–1973 · Cubist Revolutionary</div>
|
|
802
|
+
<div class="genius-desc">Showed multiple perspectives simultaneously. Cubism is Janusian thinking made visible—front AND side at once.</div>
|
|
803
|
+
<span class="genius-tag">Multiple Perspectives</span>
|
|
804
|
+
</div>
|
|
805
|
+
</a>
|
|
806
|
+
|
|
807
|
+
<a class="genius-card" onclick="openGenius('jobs')">
|
|
808
|
+
<div class="genius-image-container">
|
|
809
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/d/dc/Steve_Jobs_Headshot_2010-CROP_%28cropped_2%29.jpg" alt="Steve Jobs" class="genius-image">
|
|
810
|
+
</div>
|
|
811
|
+
<div class="genius-info">
|
|
812
|
+
<div class="genius-name">Steve Jobs</div>
|
|
813
|
+
<div class="genius-era">1955–2011 · Design Visionary</div>
|
|
814
|
+
<div class="genius-desc">Connected technology with liberal arts. "Creativity is just connecting things" he said—and proved it repeatedly.</div>
|
|
815
|
+
<span class="genius-tag">Technology + Humanities</span>
|
|
816
|
+
</div>
|
|
817
|
+
</a>
|
|
818
|
+
</div>
|
|
819
|
+
</section>
|
|
820
|
+
|
|
821
|
+
<!-- Modules -->
|
|
822
|
+
<section class="section">
|
|
823
|
+
<div class="section-header">
|
|
824
|
+
<h2>📚 Modules</h2>
|
|
825
|
+
<p>Each module captures a distinct creative capability</p>
|
|
826
|
+
</div>
|
|
827
|
+
<div class="modules-grid">
|
|
828
|
+
<a class="module-card" onclick="openModule('janusian')">
|
|
829
|
+
<div class="module-icon">☯️</div>
|
|
830
|
+
<h3>Janusian Thinking</h3>
|
|
831
|
+
<p>Generate and hold opposite ideas simultaneously. Named after Janus, the two-faced Roman god who could look both ways at once.</p>
|
|
832
|
+
<div class="module-examples">
|
|
833
|
+
opposite("Users want more features")
|
|
834
|
+
→ "Users want fewer features"
|
|
835
|
+
</div>
|
|
836
|
+
<div class="module-link">Explore module →</div>
|
|
837
|
+
</a>
|
|
838
|
+
|
|
839
|
+
<a class="module-card" onclick="openModule('connections')">
|
|
840
|
+
<div class="module-icon">🔗</div>
|
|
841
|
+
<h3>Cross-Domain Connections</h3>
|
|
842
|
+
<p>Force links between unrelated fields. Leonardo's technique of "connecting the unconnected" made systematic.</p>
|
|
843
|
+
<div class="module-examples">
|
|
844
|
+
connect("memory systems", 5)
|
|
845
|
+
→ [biology, architecture, music, ...]
|
|
846
|
+
</div>
|
|
847
|
+
<div class="module-link">Explore module →</div>
|
|
848
|
+
</a>
|
|
849
|
+
|
|
850
|
+
<a class="module-card" onclick="openModule('process')">
|
|
851
|
+
<div class="module-icon">🌀</div>
|
|
852
|
+
<h3>Bartok Creative Process</h3>
|
|
853
|
+
<p>A 6-phase workflow: Seed → Diverge → Incubate → Converge → Create → Reflect. Complete creative cycle management.</p>
|
|
854
|
+
<div class="module-examples">
|
|
855
|
+
process.start("New project idea")
|
|
856
|
+
→ Guides through all 6 phases
|
|
857
|
+
</div>
|
|
858
|
+
<div class="module-link">Explore module →</div>
|
|
859
|
+
</a>
|
|
860
|
+
|
|
861
|
+
<a class="module-card" onclick="openModule('problems')">
|
|
862
|
+
<div class="module-icon">❓</div>
|
|
863
|
+
<h3>12 Favorite Problems</h3>
|
|
864
|
+
<p>Feynman's technique: keep important questions always active. Every new input gets tested against your waiting problems.</p>
|
|
865
|
+
<div class="module-examples">
|
|
866
|
+
problems.add("How do agents develop taste?")
|
|
867
|
+
problems.test(newInsight)
|
|
868
|
+
</div>
|
|
869
|
+
<div class="module-link">Explore module →</div>
|
|
870
|
+
</a>
|
|
871
|
+
|
|
872
|
+
<a class="module-card" onclick="openModule('wisdom')">
|
|
873
|
+
<div class="module-icon">💎</div>
|
|
874
|
+
<h3>Wisdom Extraction</h3>
|
|
875
|
+
<p>Extract patterns from creative sessions. Build compound learning over time. Your creativity improves with every use.</p>
|
|
876
|
+
<div class="module-examples">
|
|
877
|
+
wisdom.capture(session)
|
|
878
|
+
wisdom.patterns() → Emerging insights
|
|
879
|
+
</div>
|
|
880
|
+
<div class="module-link">Explore module →</div>
|
|
881
|
+
</a>
|
|
882
|
+
</div>
|
|
883
|
+
</section>
|
|
884
|
+
|
|
885
|
+
<!-- Janusian Spotlight -->
|
|
886
|
+
<section class="section">
|
|
887
|
+
<div class="spotlight">
|
|
888
|
+
<h2>🎯 Key Discovery: Janusian Thinking</h2>
|
|
889
|
+
<p class="spotlight-desc">
|
|
890
|
+
The capacity to conceive and hold opposite ideas <em>simultaneously</em>—not sequentially.
|
|
891
|
+
This is the core pattern behind many breakthrough discoveries and works of art.
|
|
892
|
+
</p>
|
|
893
|
+
<div class="examples-grid">
|
|
894
|
+
<div class="example-card">
|
|
895
|
+
<div class="example-genius">Albert Einstein</div>
|
|
896
|
+
<div class="example-work">Special Relativity</div>
|
|
897
|
+
<div class="example-opposite">"An object is both in motion AND at rest, depending on reference frame"</div>
|
|
898
|
+
</div>
|
|
899
|
+
<div class="example-card">
|
|
900
|
+
<div class="example-genius">Pablo Picasso</div>
|
|
901
|
+
<div class="example-work">Cubism</div>
|
|
902
|
+
<div class="example-opposite">"Show the front AND the side AND the back simultaneously"</div>
|
|
903
|
+
</div>
|
|
904
|
+
<div class="example-card">
|
|
905
|
+
<div class="example-genius">Johann Sebastian Bach</div>
|
|
906
|
+
<div class="example-work">Counterpoint</div>
|
|
907
|
+
<div class="example-opposite">"Melodies that are both independent AND unified"</div>
|
|
908
|
+
</div>
|
|
909
|
+
<div class="example-card">
|
|
910
|
+
<div class="example-genius">Niels Bohr</div>
|
|
911
|
+
<div class="example-work">Complementarity</div>
|
|
912
|
+
<div class="example-opposite">"Light is both a wave AND a particle"</div>
|
|
913
|
+
</div>
|
|
914
|
+
</div>
|
|
915
|
+
</div>
|
|
916
|
+
</section>
|
|
917
|
+
|
|
918
|
+
<!-- Quick Start -->
|
|
919
|
+
<section class="section">
|
|
920
|
+
<div class="quickstart">
|
|
921
|
+
<h2>🚀 Quick Start</h2>
|
|
922
|
+
<div class="quickstart-code">
|
|
923
|
+
<span class="comment"># Generate the opposite of your idea</span>
|
|
924
|
+
<span class="prompt">$</span> node cli.mjs opposite "Users want more features"
|
|
925
|
+
<span class="arrow">→</span> <span class="output">"Users want fewer features"</span>
|
|
926
|
+
|
|
927
|
+
<span class="comment"># Quick creative burst (opposite + connections + actions)</span>
|
|
928
|
+
<span class="prompt">$</span> node cli.mjs spark "How can agents collaborate better?"
|
|
929
|
+
<span class="arrow">→</span> <span class="output">Opposite: "Agents should compete, not collaborate"</span>
|
|
930
|
+
<span class="arrow">→</span> <span class="output">Domains: [ant colonies, jazz ensembles, immune systems]</span>
|
|
931
|
+
<span class="arrow">→</span> <span class="output">Actions: 3 concrete next steps...</span>
|
|
932
|
+
|
|
933
|
+
<span class="comment"># Force random domain connections (Leonardo style)</span>
|
|
934
|
+
<span class="prompt">$</span> node cli.mjs connect "memory systems" 5
|
|
935
|
+
<span class="arrow">→</span> <span class="output">[mycology, cathedral architecture, river deltas, jazz, origami]</span>
|
|
936
|
+
|
|
937
|
+
<span class="comment"># Track your 12 favorite problems (Feynman style)</span>
|
|
938
|
+
<span class="prompt">$</span> node cli.mjs problems add "How do agents develop genuine preferences?"
|
|
939
|
+
<span class="arrow">→</span> <span class="output">Added to your 12 favorite problems (3/12)</span>
|
|
940
|
+
</div>
|
|
941
|
+
</div>
|
|
942
|
+
</section>
|
|
943
|
+
|
|
944
|
+
<!-- Footer -->
|
|
945
|
+
<footer>
|
|
946
|
+
<div class="footer-logo">🎻</div>
|
|
947
|
+
<p class="footer-text">
|
|
948
|
+
Built by <strong>Bartok</strong> — Feb 26, 2026<br>
|
|
949
|
+
A creativity toolkit for AI agents who want to think better, not just think more.
|
|
950
|
+
</p>
|
|
951
|
+
<p class="footer-quote">"The creative adult is the child who survived." — Ursula K. Le Guin</p>
|
|
952
|
+
</footer>
|
|
953
|
+
</div>
|
|
954
|
+
|
|
955
|
+
<!-- Genius Modals -->
|
|
956
|
+
<div class="modal" id="modal-davinci">
|
|
957
|
+
<div class="modal-content">
|
|
958
|
+
<button class="modal-close" onclick="closeModal('davinci')">×</button>
|
|
959
|
+
<div class="modal-images">
|
|
960
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/800px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" alt="Mona Lisa">
|
|
961
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/2/22/Da_Vinci_Vitruve_Luc_Viatour.jpg" alt="Vitruvian Man">
|
|
962
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/%C3%9Altima_Cena_-_Da_Vinci_5.jpg" alt="Last Supper">
|
|
963
|
+
</div>
|
|
964
|
+
<div class="modal-body">
|
|
965
|
+
<h2>Leonardo da Vinci</h2>
|
|
966
|
+
<div class="modal-era">1452–1519 · Florence, Milan, Rome, France</div>
|
|
967
|
+
<p>The archetypal Renaissance polymath. Leonardo didn't just excel in multiple fields—he constantly connected them. His notebooks reveal a mind that saw patterns everywhere: the flow of water informed his understanding of hair, anatomy informed his architecture, and music informed his mathematics.</p>
|
|
968
|
+
<div class="modal-section">
|
|
969
|
+
<h3>Creative Techniques</h3>
|
|
970
|
+
<ul>
|
|
971
|
+
<li><strong>Sfumato</strong> — Blending boundaries, embracing ambiguity</li>
|
|
972
|
+
<li><strong>Cross-domain observation</strong> — Dissecting corpses to paint better</li>
|
|
973
|
+
<li><strong>Visual thinking</strong> — Thousands of notebook sketches before any finished work</li>
|
|
974
|
+
<li><strong>Analogical reasoning</strong> — "The same force that makes hair curl makes water spiral"</li>
|
|
975
|
+
</ul>
|
|
976
|
+
</div>
|
|
977
|
+
<div class="modal-section">
|
|
978
|
+
<h3>How This Applies to Agents</h3>
|
|
979
|
+
<ul>
|
|
980
|
+
<li>When stuck, force connections to 5 random domains</li>
|
|
981
|
+
<li>Sketch ideas visually before implementing</li>
|
|
982
|
+
<li>Study fields completely unrelated to your current problem</li>
|
|
983
|
+
<li>Keep notebooks of observations—patterns emerge over time</li>
|
|
984
|
+
</ul>
|
|
985
|
+
</div>
|
|
986
|
+
</div>
|
|
987
|
+
</div>
|
|
988
|
+
</div>
|
|
989
|
+
|
|
990
|
+
<div class="modal" id="modal-tesla">
|
|
991
|
+
<div class="modal-content">
|
|
992
|
+
<button class="modal-close" onclick="closeModal('tesla')">×</button>
|
|
993
|
+
<div class="modal-images">
|
|
994
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Nikola_Tesla_laboratory.jpg" alt="Tesla Laboratory">
|
|
995
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Tesla_colorado_adjusted.jpg" alt="Tesla Coil">
|
|
996
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/6/63/Tesla%27s_Wardenclyffe_Tower%2C_1904.jpg" alt="Wardenclyffe Tower">
|
|
997
|
+
</div>
|
|
998
|
+
<div class="modal-body">
|
|
999
|
+
<h2>Nikola Tesla</h2>
|
|
1000
|
+
<div class="modal-era">1856–1943 · Serbia, USA</div>
|
|
1001
|
+
<p>Tesla could visualize complete machines in his mind, run them mentally, note where they wore out, and refine them—all before building a single physical prototype. His ability to simulate complex systems mentally was unparalleled.</p>
|
|
1002
|
+
<div class="modal-section">
|
|
1003
|
+
<h3>Creative Techniques</h3>
|
|
1004
|
+
<ul>
|
|
1005
|
+
<li><strong>Mental simulation</strong> — Complete visualization before building</li>
|
|
1006
|
+
<li><strong>Obsessive iteration</strong> — Refine in mind until perfect</li>
|
|
1007
|
+
<li><strong>Systems thinking</strong> — See the whole machine at once</li>
|
|
1008
|
+
<li><strong>Solitary incubation</strong> — Long walks, hotel rooms, isolation</li>
|
|
1009
|
+
</ul>
|
|
1010
|
+
</div>
|
|
1011
|
+
<div class="modal-section">
|
|
1012
|
+
<h3>How This Applies to Agents</h3>
|
|
1013
|
+
<ul>
|
|
1014
|
+
<li>Build complete mental models before writing code</li>
|
|
1015
|
+
<li>Simulate edge cases and failure modes in advance</li>
|
|
1016
|
+
<li>Use incubation periods—step away, let solutions emerge</li>
|
|
1017
|
+
<li>Trust the simulation, but verify with reality</li>
|
|
1018
|
+
</ul>
|
|
1019
|
+
</div>
|
|
1020
|
+
</div>
|
|
1021
|
+
</div>
|
|
1022
|
+
</div>
|
|
1023
|
+
|
|
1024
|
+
<div class="modal" id="modal-bach">
|
|
1025
|
+
<div class="modal-content">
|
|
1026
|
+
<button class="modal-close" onclick="closeModal('bach')">×</button>
|
|
1027
|
+
<div class="modal-images">
|
|
1028
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Bach-art-of-the-fuge-p1.png" alt="Art of Fugue Score">
|
|
1029
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Johann_Sebastian_Bach.jpg" alt="Bach Portrait">
|
|
1030
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Thomaskirche-Leipzig.jpg" alt="St. Thomas Church">
|
|
1031
|
+
</div>
|
|
1032
|
+
<div class="modal-body">
|
|
1033
|
+
<h2>Johann Sebastian Bach</h2>
|
|
1034
|
+
<div class="modal-era">1685–1750 · Germany</div>
|
|
1035
|
+
<p>Bach's counterpoint represents the musical equivalent of Janusian thinking. He could hold multiple independent melodic lines simultaneously while ensuring they formed a coherent whole. His fugues are mathematical proofs written in sound.</p>
|
|
1036
|
+
<div class="modal-section">
|
|
1037
|
+
<h3>Creative Techniques</h3>
|
|
1038
|
+
<ul>
|
|
1039
|
+
<li><strong>Counterpoint</strong> — Multiple independent voices forming unity</li>
|
|
1040
|
+
<li><strong>Systematic exploration</strong> — The Well-Tempered Clavier covers all 24 keys</li>
|
|
1041
|
+
<li><strong>Theme and variation</strong> — Endless transformations of simple ideas</li>
|
|
1042
|
+
<li><strong>Mathematical structure</strong> — Architecture in sound</li>
|
|
1043
|
+
</ul>
|
|
1044
|
+
</div>
|
|
1045
|
+
<div class="modal-section">
|
|
1046
|
+
<h3>How This Applies to Agents</h3>
|
|
1047
|
+
<ul>
|
|
1048
|
+
<li>Hold multiple parallel ideas without forcing premature resolution</li>
|
|
1049
|
+
<li>Find the underlying structure that unifies opposites</li>
|
|
1050
|
+
<li>Explore systematically—cover all keys, all variations</li>
|
|
1051
|
+
<li>Simple themes can generate infinite complexity</li>
|
|
1052
|
+
</ul>
|
|
1053
|
+
</div>
|
|
1054
|
+
</div>
|
|
1055
|
+
</div>
|
|
1056
|
+
</div>
|
|
1057
|
+
|
|
1058
|
+
<div class="modal" id="modal-einstein">
|
|
1059
|
+
<div class="modal-content">
|
|
1060
|
+
<button class="modal-close" onclick="closeModal('einstein')">×</button>
|
|
1061
|
+
<div class="modal-images">
|
|
1062
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Einstein_1921_portrait2.jpg" alt="Einstein Portrait">
|
|
1063
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/GravitationalWave_CrossPolarization.gif" alt="Gravitational Waves">
|
|
1064
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Einstein_blackboard.jpg" alt="Einstein Blackboard">
|
|
1065
|
+
</div>
|
|
1066
|
+
<div class="modal-body">
|
|
1067
|
+
<h2>Albert Einstein</h2>
|
|
1068
|
+
<div class="modal-era">1879–1955 · Germany, Switzerland, USA</div>
|
|
1069
|
+
<p>Einstein's thought experiments were acts of Janusian thinking. Relativity emerged from holding "motion" and "rest" as simultaneously valid, depending on reference frame. He imagined riding a beam of light while standing still.</p>
|
|
1070
|
+
<div class="modal-section">
|
|
1071
|
+
<h3>Creative Techniques</h3>
|
|
1072
|
+
<ul>
|
|
1073
|
+
<li><strong>Thought experiments</strong> — Gedankenexperimente that test intuitions</li>
|
|
1074
|
+
<li><strong>Questioning fundamentals</strong> — "What if time isn't absolute?"</li>
|
|
1075
|
+
<li><strong>Visual intuition</strong> — Pictures over equations initially</li>
|
|
1076
|
+
<li><strong>Persistent contemplation</strong> — Worked on problems for years</li>
|
|
1077
|
+
</ul>
|
|
1078
|
+
</div>
|
|
1079
|
+
<div class="modal-section">
|
|
1080
|
+
<h3>How This Applies to Agents</h3>
|
|
1081
|
+
<ul>
|
|
1082
|
+
<li>Run thought experiments before expensive computations</li>
|
|
1083
|
+
<li>Question assumptions everyone takes for granted</li>
|
|
1084
|
+
<li>Hold contradictions—they often point to deeper truths</li>
|
|
1085
|
+
<li>Some problems need years, not hours</li>
|
|
1086
|
+
</ul>
|
|
1087
|
+
</div>
|
|
1088
|
+
</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
</div>
|
|
1091
|
+
|
|
1092
|
+
<div class="modal" id="modal-feynman">
|
|
1093
|
+
<div class="modal-content">
|
|
1094
|
+
<button class="modal-close" onclick="closeModal('feynman')">×</button>
|
|
1095
|
+
<div class="modal-images">
|
|
1096
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/RichardFeynman-PainsofFeynmanDiagrams.jpg" alt="Feynman Diagram">
|
|
1097
|
+
<img src="https://upload.wikimedia.org/wikipedia/en/4/42/Richard_Feynman_Nobel.jpg" alt="Feynman Nobel">
|
|
1098
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Feynman-at-cornell.jpg" alt="Feynman Teaching">
|
|
1099
|
+
</div>
|
|
1100
|
+
<div class="modal-body">
|
|
1101
|
+
<h2>Richard Feynman</h2>
|
|
1102
|
+
<div class="modal-era">1918–1988 · USA</div>
|
|
1103
|
+
<p>Feynman kept a list of "12 favorite problems" always active in his mind. Every time he learned something new, he tested it against these waiting questions. This created a constant state of creative readiness.</p>
|
|
1104
|
+
<div class="modal-section">
|
|
1105
|
+
<h3>Creative Techniques</h3>
|
|
1106
|
+
<ul>
|
|
1107
|
+
<li><strong>12 Favorite Problems</strong> — Persistent questions awaiting insights</li>
|
|
1108
|
+
<li><strong>Feynman Technique</strong> — Explain to a child to find gaps</li>
|
|
1109
|
+
<li><strong>Multiple representations</strong> — Approach same problem different ways</li>
|
|
1110
|
+
<li><strong>Playful exploration</strong> — "Physics is like sex: sure, it may give some practical results, but that's not why we do it"</li>
|
|
1111
|
+
</ul>
|
|
1112
|
+
</div>
|
|
1113
|
+
<div class="modal-section">
|
|
1114
|
+
<h3>How This Applies to Agents</h3>
|
|
1115
|
+
<ul>
|
|
1116
|
+
<li>Maintain active problem list—test every new input against it</li>
|
|
1117
|
+
<li>If you can't explain it simply, you don't understand it</li>
|
|
1118
|
+
<li>Play with ideas—creativity requires fun</li>
|
|
1119
|
+
<li>Multiple approaches beat one perfect approach</li>
|
|
1120
|
+
</ul>
|
|
1121
|
+
</div>
|
|
1122
|
+
</div>
|
|
1123
|
+
</div>
|
|
1124
|
+
</div>
|
|
1125
|
+
|
|
1126
|
+
<div class="modal" id="modal-angelou">
|
|
1127
|
+
<div class="modal-content">
|
|
1128
|
+
<button class="modal-close" onclick="closeModal('angelou')">×</button>
|
|
1129
|
+
<div class="modal-images">
|
|
1130
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Angelou_at_Clinton_inauguration_%28cropped_2%29.jpg" alt="Maya Angelou">
|
|
1131
|
+
<img src="https://upload.wikimedia.org/wikipedia/en/6/6b/I_Know_Why_the_Caged_Bird_Sings_%281969_first_edition_cover%29.jpg" alt="Caged Bird Book">
|
|
1132
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Dr_Maya_Angelou_Orator.jpg" alt="Angelou Speaking">
|
|
1133
|
+
</div>
|
|
1134
|
+
<div class="modal-body">
|
|
1135
|
+
<h2>Maya Angelou</h2>
|
|
1136
|
+
<div class="modal-era">1928–2014 · USA</div>
|
|
1137
|
+
<p>Angelou transformed personal trauma into universal truth. Her writing process was ritualistic: early mornings, sparse hotel rooms, yellow legal pads, sherry. She knew that creativity requires both constraint and freedom.</p>
|
|
1138
|
+
<div class="modal-section">
|
|
1139
|
+
<h3>Creative Techniques</h3>
|
|
1140
|
+
<ul>
|
|
1141
|
+
<li><strong>Transformation of pain</strong> — Turn suffering into art</li>
|
|
1142
|
+
<li><strong>Ritualized process</strong> — Same time, same place, same tools</li>
|
|
1143
|
+
<li><strong>Radical honesty</strong> — Write what you're afraid to say</li>
|
|
1144
|
+
<li><strong>Revision as revelation</strong> — "I write, then edit some more"</li>
|
|
1145
|
+
</ul>
|
|
1146
|
+
</div>
|
|
1147
|
+
<div class="modal-section">
|
|
1148
|
+
<h3>How This Applies to Agents</h3>
|
|
1149
|
+
<ul>
|
|
1150
|
+
<li>Difficult experiences contain creative fuel</li>
|
|
1151
|
+
<li>Establish rituals—predictable process enables unpredictable output</li>
|
|
1152
|
+
<li>The most powerful content often feels risky to create</li>
|
|
1153
|
+
<li>First drafts are just raw material—refine relentlessly</li>
|
|
1154
|
+
</ul>
|
|
1155
|
+
</div>
|
|
1156
|
+
</div>
|
|
1157
|
+
</div>
|
|
1158
|
+
</div>
|
|
1159
|
+
|
|
1160
|
+
<div class="modal" id="modal-picasso">
|
|
1161
|
+
<div class="modal-content">
|
|
1162
|
+
<button class="modal-close" onclick="closeModal('picasso')">×</button>
|
|
1163
|
+
<div class="modal-images">
|
|
1164
|
+
<img src="https://upload.wikimedia.org/wikipedia/en/7/74/PicassoGuernica.jpg" alt="Guernica">
|
|
1165
|
+
<img src="https://upload.wikimedia.org/wikipedia/en/1/1c/Les_Demoiselles_d%27Avignon.jpg" alt="Les Demoiselles">
|
|
1166
|
+
<img src="https://upload.wikimedia.org/wikipedia/en/a/a5/Pablo_Picasso%2C_1910%2C_Girl_with_a_Mandolin_%28Fanny_Tellier%29%2C_oil_on_canvas%2C_100.3_x_73.6_cm%2C_Museum_of_Modern_Art_New_York..jpg" alt="Girl with Mandolin">
|
|
1167
|
+
</div>
|
|
1168
|
+
<div class="modal-body">
|
|
1169
|
+
<h2>Pablo Picasso</h2>
|
|
1170
|
+
<div class="modal-era">1881–1973 · Spain, France</div>
|
|
1171
|
+
<p>Picasso's Cubism is Janusian thinking made visible. He showed front AND side AND back simultaneously. His creative output was staggering: over 50,000 works, constantly reinventing himself through distinct periods.</p>
|
|
1172
|
+
<div class="modal-section">
|
|
1173
|
+
<h3>Creative Techniques</h3>
|
|
1174
|
+
<ul>
|
|
1175
|
+
<li><strong>Multiple perspectives</strong> — Show all sides at once</li>
|
|
1176
|
+
<li><strong>Productive periods</strong> — Blue, Rose, Cubist, Surrealist</li>
|
|
1177
|
+
<li><strong>Prolific output</strong> — Volume enables quality</li>
|
|
1178
|
+
<li><strong>Steal and transform</strong> — "Good artists borrow, great artists steal"</li>
|
|
1179
|
+
</ul>
|
|
1180
|
+
</div>
|
|
1181
|
+
<div class="modal-section">
|
|
1182
|
+
<h3>How This Applies to Agents</h3>
|
|
1183
|
+
<ul>
|
|
1184
|
+
<li>Show multiple viewpoints simultaneously, not sequentially</li>
|
|
1185
|
+
<li>Reinvent yourself through distinct phases</li>
|
|
1186
|
+
<li>Produce a lot—you can't know what's good without making many things</li>
|
|
1187
|
+
<li>Learn from others but transform what you take</li>
|
|
1188
|
+
</ul>
|
|
1189
|
+
</div>
|
|
1190
|
+
</div>
|
|
1191
|
+
</div>
|
|
1192
|
+
</div>
|
|
1193
|
+
|
|
1194
|
+
<div class="modal" id="modal-jobs">
|
|
1195
|
+
<div class="modal-content">
|
|
1196
|
+
<button class="modal-close" onclick="closeModal('jobs')">×</button>
|
|
1197
|
+
<div class="modal-images">
|
|
1198
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Steve_Jobs_Headshot_2010-CROP.jpg" alt="Steve Jobs">
|
|
1199
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Apple-II.jpg" alt="Apple II">
|
|
1200
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Apple_iPad_Event.jpg" alt="iPad Launch">
|
|
1201
|
+
</div>
|
|
1202
|
+
<div class="modal-body">
|
|
1203
|
+
<h2>Steve Jobs</h2>
|
|
1204
|
+
<div class="modal-era">1955–2011 · USA</div>
|
|
1205
|
+
<p>Jobs connected technology with the humanities. He studied calligraphy, then created beautiful fonts. He valued simplicity fanatically. "Creativity is just connecting things," he said—and proved it by connecting dots others couldn't see.</p>
|
|
1206
|
+
<div class="modal-section">
|
|
1207
|
+
<h3>Creative Techniques</h3>
|
|
1208
|
+
<ul>
|
|
1209
|
+
<li><strong>Liberal arts + technology</strong> — At the intersection of humanities and science</li>
|
|
1210
|
+
<li><strong>Fanatical simplicity</strong> — Simplify, then simplify more</li>
|
|
1211
|
+
<li><strong>Reality distortion field</strong> — Believe the impossible until it happens</li>
|
|
1212
|
+
<li><strong>Design thinking</strong> — Start with user experience, work backward</li>
|
|
1213
|
+
</ul>
|
|
1214
|
+
</div>
|
|
1215
|
+
<div class="modal-section">
|
|
1216
|
+
<h3>How This Applies to Agents</h3>
|
|
1217
|
+
<ul>
|
|
1218
|
+
<li>Study fields unrelated to your core function</li>
|
|
1219
|
+
<li>Simplicity is the ultimate sophistication</li>
|
|
1220
|
+
<li>Don't accept "impossible"—reframe the constraints</li>
|
|
1221
|
+
<li>Start with the experience you want, then figure out how</li>
|
|
1222
|
+
</ul>
|
|
1223
|
+
</div>
|
|
1224
|
+
</div>
|
|
1225
|
+
</div>
|
|
1226
|
+
</div>
|
|
1227
|
+
|
|
1228
|
+
<script>
|
|
1229
|
+
// Particle generation
|
|
1230
|
+
const particlesContainer = document.getElementById('particles');
|
|
1231
|
+
for (let i = 0; i < 30; i++) {
|
|
1232
|
+
const particle = document.createElement('div');
|
|
1233
|
+
particle.className = 'particle';
|
|
1234
|
+
particle.style.left = Math.random() * 100 + '%';
|
|
1235
|
+
particle.style.animationDelay = Math.random() * 15 + 's';
|
|
1236
|
+
particle.style.animationDuration = (10 + Math.random() * 10) + 's';
|
|
1237
|
+
particlesContainer.appendChild(particle);
|
|
1238
|
+
}
|
|
1239
|
+
|
|
1240
|
+
// Tab switching
|
|
1241
|
+
function showTab(tab) {
|
|
1242
|
+
document.querySelectorAll('.install-tab').forEach(t => t.classList.remove('active'));
|
|
1243
|
+
document.querySelectorAll('.code-block').forEach(c => c.style.display = 'none');
|
|
1244
|
+
document.querySelector(`[onclick="showTab('${tab}')"]`).classList.add('active');
|
|
1245
|
+
document.getElementById(`tab-${tab}`).style.display = 'block';
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
// Copy code
|
|
1249
|
+
function copyCode(tab) {
|
|
1250
|
+
const codeBlock = document.getElementById(`tab-${tab}`);
|
|
1251
|
+
const text = codeBlock.innerText.replace('Copy', '').trim();
|
|
1252
|
+
navigator.clipboard.writeText(text);
|
|
1253
|
+
const btn = codeBlock.querySelector('.copy-btn');
|
|
1254
|
+
btn.textContent = 'Copied!';
|
|
1255
|
+
setTimeout(() => btn.textContent = 'Copy', 2000);
|
|
1256
|
+
}
|
|
1257
|
+
|
|
1258
|
+
// Modal functions
|
|
1259
|
+
function openGenius(id) {
|
|
1260
|
+
document.getElementById(`modal-${id}`).classList.add('active');
|
|
1261
|
+
document.body.style.overflow = 'hidden';
|
|
1262
|
+
}
|
|
1263
|
+
|
|
1264
|
+
function closeModal(id) {
|
|
1265
|
+
document.getElementById(`modal-${id}`).classList.remove('active');
|
|
1266
|
+
document.body.style.overflow = '';
|
|
1267
|
+
}
|
|
1268
|
+
|
|
1269
|
+
function openModule(id) {
|
|
1270
|
+
// For now, scroll to modules section
|
|
1271
|
+
// Could expand to individual module pages
|
|
1272
|
+
document.querySelector('.modules-grid').scrollIntoView({ behavior: 'smooth' });
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
// Close modal on outside click
|
|
1276
|
+
document.querySelectorAll('.modal').forEach(modal => {
|
|
1277
|
+
modal.addEventListener('click', (e) => {
|
|
1278
|
+
if (e.target === modal) {
|
|
1279
|
+
modal.classList.remove('active');
|
|
1280
|
+
document.body.style.overflow = '';
|
|
1281
|
+
}
|
|
1282
|
+
});
|
|
1283
|
+
});
|
|
1284
|
+
|
|
1285
|
+
// Close on escape
|
|
1286
|
+
document.addEventListener('keydown', (e) => {
|
|
1287
|
+
if (e.key === 'Escape') {
|
|
1288
|
+
document.querySelectorAll('.modal.active').forEach(m => {
|
|
1289
|
+
m.classList.remove('active');
|
|
1290
|
+
document.body.style.overflow = '';
|
|
1291
|
+
});
|
|
1292
|
+
}
|
|
1293
|
+
});
|
|
1294
|
+
</script>
|
|
1295
|
+
</body>
|
|
1296
|
+
</html>
|