bubble-chart-js 1.1.0 → 2.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/README.md +1 -1
- package/demo/glassmorphism.html +323 -0
- package/demo/index.html +739 -0
- package/dist/bubbleChart.cjs.js +1 -1
- package/dist/bubbleChart.esm.js +1 -1
- package/dist/bubbleChart.umd.js +1 -1
- package/docs/documentation.html +438 -0
- package/docs/examples.html +689 -0
- package/docs/index.html +432 -0
- package/docs/landing_test.html +337 -0
- package/docs/playground.html +345 -0
- package/docs/process_html.js +105 -0
- package/docs/temp/5a86d.html +248 -0
- package/docs/temp/b0cbe.html +276 -0
- package/docs/temp/docs_desktop.html +341 -0
- package/docs/temp/docs_mobile.html +291 -0
- package/docs/temp/examples_desktop.html +372 -0
- package/docs/temp/examples_mobile.html +317 -0
- package/docs/temp/landing_desktop.html +337 -0
- package/docs/temp/landing_mobile.html +270 -0
- package/docs/temp/playground_desktop.html +283 -0
- package/docs/temp/playground_mobile.html +236 -0
- package/examples/test2.html +103 -0
- package/package.json +5 -4
- package/spec/fixtures/3-bubbles.expected.json +27 -0
- package/spec/fixtures/equal-values.expected.json +34 -0
- package/spec/fixtures/many-bubbles.expected.json +76 -0
- package/spec/fixtures/single-bubble.expected.json +13 -0
- package/tsconfig.scripts.json +8 -0
|
@@ -0,0 +1,345 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<html class="dark" lang="en">
|
|
4
|
+
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="utf-8" />
|
|
7
|
+
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
8
|
+
<title>Playground | bubble-chart-js</title>
|
|
9
|
+
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
10
|
+
<link
|
|
11
|
+
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;700&display=swap"
|
|
12
|
+
rel="stylesheet" />
|
|
13
|
+
<link
|
|
14
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
|
15
|
+
rel="stylesheet" />
|
|
16
|
+
<link
|
|
17
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
|
18
|
+
rel="stylesheet" />
|
|
19
|
+
<script id="tailwind-config">
|
|
20
|
+
tailwind.config = {
|
|
21
|
+
darkMode: "class",
|
|
22
|
+
theme: {
|
|
23
|
+
extend: {
|
|
24
|
+
colors: {
|
|
25
|
+
"surface": "#090e1c",
|
|
26
|
+
"on-tertiary-container": "#005b29",
|
|
27
|
+
"on-error": "#490006",
|
|
28
|
+
"on-surface-variant": "#a6aabf",
|
|
29
|
+
"outline-variant": "#434759",
|
|
30
|
+
"surface-tint": "#72dcff",
|
|
31
|
+
"on-secondary-fixed": "#580078",
|
|
32
|
+
"surface-container": "#13192b",
|
|
33
|
+
"tertiary-fixed-dim": "#33ec7b",
|
|
34
|
+
"surface-container-highest": "#1e253b",
|
|
35
|
+
"error-container": "#9f0519",
|
|
36
|
+
"on-primary-fixed-variant": "#004c5e",
|
|
37
|
+
"on-tertiary-fixed-variant": "#00662e",
|
|
38
|
+
"inverse-surface": "#faf8ff",
|
|
39
|
+
"on-secondary-container": "#f1bfff",
|
|
40
|
+
"primary-fixed": "#00d2ff",
|
|
41
|
+
"on-surface": "#e1e4fa",
|
|
42
|
+
"secondary": "#dd8bfb",
|
|
43
|
+
"surface-variant": "#1e253b",
|
|
44
|
+
"primary-fixed-dim": "#00c3ed",
|
|
45
|
+
"surface-bright": "#242b43",
|
|
46
|
+
"on-primary-fixed": "#002c38",
|
|
47
|
+
"error-dim": "#d7383b",
|
|
48
|
+
"surface-dim": "#090e1c",
|
|
49
|
+
"on-secondary": "#4c0068",
|
|
50
|
+
"tertiary-dim": "#33ec7b",
|
|
51
|
+
"background": "#090e1c",
|
|
52
|
+
"secondary-dim": "#ce7eec",
|
|
53
|
+
"inverse-on-surface": "#505466",
|
|
54
|
+
"secondary-fixed-dim": "#ebadff",
|
|
55
|
+
"inverse-primary": "#00687f",
|
|
56
|
+
"tertiary": "#a6ffb5",
|
|
57
|
+
"on-error-container": "#ffa8a3",
|
|
58
|
+
"on-tertiary-fixed": "#00461e",
|
|
59
|
+
"tertiary-container": "#49fb87",
|
|
60
|
+
"surface-container-high": "#181f33",
|
|
61
|
+
"error": "#ff716c",
|
|
62
|
+
"primary-dim": "#00c3ed",
|
|
63
|
+
"secondary-container": "#6e208c",
|
|
64
|
+
"on-tertiary": "#00652e",
|
|
65
|
+
"on-primary": "#004c5e",
|
|
66
|
+
"surface-container-low": "#0d1323",
|
|
67
|
+
"on-primary-container": "#004253",
|
|
68
|
+
"outline": "#707588",
|
|
69
|
+
"on-background": "#e1e4fa",
|
|
70
|
+
"surface-container-lowest": "#000000",
|
|
71
|
+
"primary-container": "#00d2ff",
|
|
72
|
+
"on-secondary-fixed-variant": "#792c97",
|
|
73
|
+
"primary": "#72dcff",
|
|
74
|
+
"tertiary-fixed": "#49fb87",
|
|
75
|
+
"secondary-fixed": "#f2c1ff"
|
|
76
|
+
},
|
|
77
|
+
fontFamily: {
|
|
78
|
+
"headline": ["Manrope"],
|
|
79
|
+
"body": ["Inter"],
|
|
80
|
+
"label": ["Space Grotesk"]
|
|
81
|
+
},
|
|
82
|
+
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
}
|
|
86
|
+
</script>
|
|
87
|
+
<style>
|
|
88
|
+
.glass-panel {
|
|
89
|
+
background: rgba(30, 37, 59, 0.6);
|
|
90
|
+
backdrop-filter: blur(12px);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.material-symbols-outlined {
|
|
94
|
+
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.code-shadow {
|
|
98
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Custom range slider styling */
|
|
102
|
+
input[type=range] {
|
|
103
|
+
-webkit-appearance: none;
|
|
104
|
+
background: transparent;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
input[type=range]::-webkit-slider-runnable-track {
|
|
108
|
+
width: 100%;
|
|
109
|
+
height: 4px;
|
|
110
|
+
background: #434759;
|
|
111
|
+
border-radius: 2px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
input[type=range]::-webkit-slider-thumb {
|
|
115
|
+
-webkit-appearance: none;
|
|
116
|
+
height: 16px;
|
|
117
|
+
width: 16px;
|
|
118
|
+
border-radius: 50%;
|
|
119
|
+
background: #72dcff;
|
|
120
|
+
margin-top: -6px;
|
|
121
|
+
box-shadow: 0 0 10px rgba(114, 220, 255, 0.5);
|
|
122
|
+
}
|
|
123
|
+
</style>
|
|
124
|
+
</head>
|
|
125
|
+
|
|
126
|
+
<body class="bg-background text-on-surface font-body overflow-hidden">
|
|
127
|
+
<!-- TopNavBar -->
|
|
128
|
+
<header class="fixed top-0 w-full z-50 bg-[#090e1c]/60 backdrop-blur-xl shadow-[0_20px_40px_rgba(0,0,0,0.4)]">
|
|
129
|
+
<nav class="flex justify-between items-center h-16 px-8 max-w-7xl mx-auto">
|
|
130
|
+
<div class="flex items-center gap-8">
|
|
131
|
+
<a href="index.html" class="flex items-center gap-2 hover:opacity-80 transition-opacity"><span
|
|
132
|
+
class="text-xl font-black text-[#72dcff] tracking-tighter font-headline">bubble-chart-js</span></a>
|
|
133
|
+
<div id="mobile-menu"
|
|
134
|
+
class="hidden md:flex flex-col md:flex-row absolute md:relative top-16 md:top-0 left-0 w-full md:w-auto bg-[#090e1c]/95 md:bg-transparent p-6 md:p-0 items-center gap-6 font-headline font-bold tracking-tight border-b md:border-none border-outline-variant/15 shadow-[0_20px_40px_rgba(0,0,0,0.4)] md:shadow-none">
|
|
135
|
+
<a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
|
|
136
|
+
href="documentation.html">Docs</a>
|
|
137
|
+
<a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
|
|
138
|
+
href="examples.html">Examples</a>
|
|
139
|
+
<a class="text-[#72dcff] border-b-2 border-[#72dcff] pb-1 hover:text-[#dd8bfb] transition-colors duration-300"
|
|
140
|
+
href="playground.html">Playground</a>
|
|
141
|
+
<a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
|
|
142
|
+
href="https://github.com/praga-dev/bubble-chart-js">GitHub</a>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="flex items-center gap-4">
|
|
146
|
+
<button id="menu-btn"
|
|
147
|
+
class="md:hidden material-symbols-outlined text-[#e1e4fa] hover:text-[#72dcff] transition-colors">menu</button>
|
|
148
|
+
<button class="p-2 text-[#e1e4fa] hover:text-[#dd8bfb] transition-colors">
|
|
149
|
+
<span class="material-symbols-outlined">dark_mode</span>
|
|
150
|
+
</button>
|
|
151
|
+
<button
|
|
152
|
+
class="bg-gradient-to-br from-primary to-primary-fixed-variant px-5 py-2 rounded-lg text-on-primary-fixed font-headline font-bold text-sm hover:shadow-[0_0_15px_rgba(114,220,255,0.4)] transition-all active:scale-95 duration-200">
|
|
153
|
+
Get Started
|
|
154
|
+
</button>
|
|
155
|
+
</div>
|
|
156
|
+
</nav>
|
|
157
|
+
</header>
|
|
158
|
+
<main class="pt-16 h-screen flex flex-col md:flex-row">
|
|
159
|
+
<!-- Left: Config Editor -->
|
|
160
|
+
<section
|
|
161
|
+
class="w-full md:w-[450px] bg-surface-container border-r border-outline-variant/15 flex flex-col h-full z-10">
|
|
162
|
+
<!-- Header/Tabs -->
|
|
163
|
+
<div class="p-6 pb-2">
|
|
164
|
+
<span class="font-label text-xs uppercase tracking-[0.2em] text-secondary font-bold">Workspace</span>
|
|
165
|
+
<h1 class="text-2xl font-headline font-extrabold text-on-surface mt-1">Config Editor</h1>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="flex-1 overflow-y-auto px-6 space-y-8 py-4 custom-scrollbar">
|
|
168
|
+
<!-- JSON Code Area -->
|
|
169
|
+
<div class="space-y-3">
|
|
170
|
+
<div class="flex justify-between items-center">
|
|
171
|
+
<span
|
|
172
|
+
class="font-label text-[10px] uppercase text-on-surface-variant tracking-widest">chart-config.json</span>
|
|
173
|
+
<span class="text-[10px] text-tertiary">Live Sync Active</span>
|
|
174
|
+
</div>
|
|
175
|
+
<div
|
|
176
|
+
class="bg-surface-container-lowest rounded-xl p-4 code-shadow font-mono text-sm leading-relaxed border border-outline-variant/10">
|
|
177
|
+
<div class="text-secondary">{</div>
|
|
178
|
+
<div class="pl-4">
|
|
179
|
+
<span class="text-primary">"renderer"</span>: <span class="text-tertiary">"canvas"</span>,
|
|
180
|
+
</div>
|
|
181
|
+
<div class="pl-4">
|
|
182
|
+
<span class="text-primary">"count"</span>: <span class="text-tertiary">150</span>,
|
|
183
|
+
</div>
|
|
184
|
+
<div class="pl-4">
|
|
185
|
+
<span class="text-primary">"physics"</span>: {
|
|
186
|
+
</div>
|
|
187
|
+
<div class="pl-8">
|
|
188
|
+
<span class="text-primary">"gravity"</span>: <span class="text-tertiary">0.05</span>,
|
|
189
|
+
</div>
|
|
190
|
+
<div class="pl-8">
|
|
191
|
+
<span class="text-primary">"friction"</span>: <span class="text-tertiary">0.98</span>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="pl-4 text-secondary">}</div>
|
|
194
|
+
<div class="text-secondary">}</div>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
<!-- Control Panel Forms -->
|
|
198
|
+
<div class="glass-panel p-6 rounded-xl space-y-6">
|
|
199
|
+
<!-- Renderer Toggle -->
|
|
200
|
+
<div class="space-y-3">
|
|
201
|
+
<label class="font-label text-xs uppercase text-on-surface-variant font-bold">Renderer toggle</label>
|
|
202
|
+
<div class="grid grid-cols-2 bg-surface-container-highest p-1 rounded-lg">
|
|
203
|
+
<button
|
|
204
|
+
class="bg-primary text-on-primary-fixed text-xs font-bold py-2 rounded-md transition-all">SVG</button>
|
|
205
|
+
<button
|
|
206
|
+
class="text-on-surface-variant text-xs font-bold py-2 rounded-md hover:text-on-surface">Canvas</button>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
<!-- Bubble Count Slider -->
|
|
210
|
+
<div class="space-y-3">
|
|
211
|
+
<div class="flex justify-between items-center">
|
|
212
|
+
<label class="font-label text-xs uppercase text-on-surface-variant font-bold">Bubble count</label>
|
|
213
|
+
<span class="text-xs font-mono text-primary">150</span>
|
|
214
|
+
</div>
|
|
215
|
+
<input class="w-full" max="500" min="10" type="range" value="150" />
|
|
216
|
+
</div>
|
|
217
|
+
<!-- Physics Toggle -->
|
|
218
|
+
<div class="flex justify-between items-center">
|
|
219
|
+
<label class="font-label text-xs uppercase text-on-surface-variant font-bold">Physics simulation</label>
|
|
220
|
+
<button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary">
|
|
221
|
+
<span
|
|
222
|
+
class="inline-block h-4 w-4 translate-x-6 transform rounded-full bg-on-primary-fixed transition"></span>
|
|
223
|
+
</button>
|
|
224
|
+
</div>
|
|
225
|
+
<!-- Theme Switch -->
|
|
226
|
+
<div class="space-y-3">
|
|
227
|
+
<label class="font-label text-xs uppercase text-on-surface-variant font-bold">Visual Theme</label>
|
|
228
|
+
<select
|
|
229
|
+
class="w-full bg-surface-container-highest border-none rounded-lg text-sm text-on-surface focus:ring-1 focus:ring-primary py-3">
|
|
230
|
+
<option>Neon Observatory (Default)</option>
|
|
231
|
+
<option>Atmospheric Depth</option>
|
|
232
|
+
<option>Midnight Terminal</option>
|
|
233
|
+
</select>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
<!-- Export Action -->
|
|
237
|
+
<button
|
|
238
|
+
class="w-full py-4 glass-panel border border-primary/20 rounded-xl text-primary font-headline font-bold text-sm flex items-center justify-center gap-2 hover:bg-primary/5 transition-all group">
|
|
239
|
+
<span class="material-symbols-outlined text-sm group-hover:rotate-45 transition-transform">send</span>
|
|
240
|
+
Export Implementation
|
|
241
|
+
</button>
|
|
242
|
+
</div>
|
|
243
|
+
</section>
|
|
244
|
+
<!-- Right: Live Chart Preview -->
|
|
245
|
+
<section class="flex-1 relative bg-surface-dim overflow-hidden flex items-center justify-center">
|
|
246
|
+
<!-- Background Gradients -->
|
|
247
|
+
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
248
|
+
<div class="absolute -top-1/4 -right-1/4 w-1/2 h-1/2 bg-primary/10 blur-[120px] rounded-full"></div>
|
|
249
|
+
<div class="absolute -bottom-1/4 -left-1/4 w-1/2 h-1/2 bg-secondary/10 blur-[120px] rounded-full"></div>
|
|
250
|
+
</div>
|
|
251
|
+
<!-- Floating Bubble Elements (Visual Mockup) -->
|
|
252
|
+
<div class="absolute inset-0 flex items-center justify-center p-12">
|
|
253
|
+
<div
|
|
254
|
+
class="relative w-full h-full glass-panel rounded-3xl overflow-hidden border border-outline-variant/10 shadow-[0_40px_80px_rgba(0,0,0,0.6)] flex items-center justify-center">
|
|
255
|
+
<!-- Decorative Mock Bubbles -->
|
|
256
|
+
<div
|
|
257
|
+
class="absolute w-24 h-24 rounded-full bg-gradient-to-br from-primary/40 to-transparent blur-sm border border-primary/30 top-[15%] left-[20%]">
|
|
258
|
+
</div>
|
|
259
|
+
<div
|
|
260
|
+
class="absolute w-40 h-40 rounded-full bg-gradient-to-br from-secondary/30 to-transparent blur-md border border-secondary/20 bottom-[10%] right-[15%]">
|
|
261
|
+
</div>
|
|
262
|
+
<div
|
|
263
|
+
class="absolute w-16 h-16 rounded-full bg-gradient-to-br from-tertiary/40 to-transparent blur-sm border border-tertiary/30 top-[60%] left-[45%]">
|
|
264
|
+
</div>
|
|
265
|
+
<div
|
|
266
|
+
class="absolute w-12 h-12 rounded-full bg-on-surface/5 backdrop-blur-md border border-on-surface/20 top-[40%] right-[30%]">
|
|
267
|
+
</div>
|
|
268
|
+
<div class="absolute w-32 h-32 rounded-full bg-primary-fixed-dim/20 blur-xl bottom-[40%] left-[10%]"></div>
|
|
269
|
+
<!-- Live Indicator -->
|
|
270
|
+
<div
|
|
271
|
+
class="absolute top-6 left-6 flex items-center gap-2 bg-surface-container-lowest/40 backdrop-blur-md px-3 py-1.5 rounded-full border border-outline-variant/10">
|
|
272
|
+
<span class="w-2 h-2 rounded-full bg-tertiary animate-pulse"></span>
|
|
273
|
+
<span class="font-label text-[10px] uppercase font-bold tracking-widest">Live Rendering</span>
|
|
274
|
+
</div>
|
|
275
|
+
<!-- Zoom Controls Overlay -->
|
|
276
|
+
<div class="absolute bottom-6 right-6 flex flex-col gap-2">
|
|
277
|
+
<button
|
|
278
|
+
class="w-10 h-10 glass-panel rounded-lg flex items-center justify-center hover:bg-surface-bright transition-colors border border-outline-variant/10">
|
|
279
|
+
<span class="material-symbols-outlined text-on-surface-variant">add</span>
|
|
280
|
+
</button>
|
|
281
|
+
<button
|
|
282
|
+
class="w-10 h-10 glass-panel rounded-lg flex items-center justify-center hover:bg-surface-bright transition-colors border border-outline-variant/10">
|
|
283
|
+
<span class="material-symbols-outlined text-on-surface-variant">remove</span>
|
|
284
|
+
</button>
|
|
285
|
+
<button
|
|
286
|
+
class="w-10 h-10 glass-panel rounded-lg flex items-center justify-center hover:bg-surface-bright transition-colors border border-outline-variant/10">
|
|
287
|
+
<span class="material-symbols-outlined text-on-surface-variant">refresh</span>
|
|
288
|
+
</button>
|
|
289
|
+
</div>
|
|
290
|
+
<!-- Empty Space for "Simulation" -->
|
|
291
|
+
<div class="text-center space-y-4">
|
|
292
|
+
<div class="font-headline font-black text-6xl text-on-surface/5 pointer-events-none select-none">
|
|
293
|
+
BUBBLE_CANVAS_v2
|
|
294
|
+
</div>
|
|
295
|
+
<p class="font-label text-on-surface-variant/40 tracking-[0.4em] uppercase text-xs">Awaiting data stream</p>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
<!-- Tooltip Overlay (Interaction Mockup) -->
|
|
300
|
+
<div
|
|
301
|
+
class="absolute top-[25%] left-[60%] glass-panel p-4 rounded-xl border border-primary/30 shadow-2xl z-20 pointer-events-none">
|
|
302
|
+
<div class="flex items-center gap-3">
|
|
303
|
+
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center border border-primary/50">
|
|
304
|
+
<span class="material-symbols-outlined text-primary" data-weight="fill">bubble_chart</span>
|
|
305
|
+
</div>
|
|
306
|
+
<div>
|
|
307
|
+
<div class="text-[10px] font-label text-secondary font-bold uppercase tracking-widest">Node ID: 492</div>
|
|
308
|
+
<div class="text-sm font-headline font-bold text-on-surface">Momentum: 0.84</div>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
</section>
|
|
313
|
+
</main>
|
|
314
|
+
<!-- Footer Area (Condensed for Playground) -->
|
|
315
|
+
<footer class="fixed bottom-0 left-0 right-0 z-50 bg-[#090e1c] border-t border-[#434759]/15">
|
|
316
|
+
<div class="flex justify-between items-center h-10 px-6 max-w-7xl mx-auto">
|
|
317
|
+
<div class="flex gap-4">
|
|
318
|
+
<span class="font-label text-[10px] text-[#e1e4fa]/60 tracking-widest uppercase">FPS: 60.2</span>
|
|
319
|
+
<span class="font-label text-[10px] text-[#e1e4fa]/60 tracking-widest uppercase">Nodes: 150</span>
|
|
320
|
+
<span class="font-label text-[10px] text-[#e1e4fa]/60 tracking-widest uppercase">Heap: 12.4MB</span>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="flex gap-6 items-center">
|
|
323
|
+
<a class="text-[10px] font-label uppercase text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-colors"
|
|
324
|
+
href="#">v2.4.0-alpha</a>
|
|
325
|
+
<a class="text-[10px] font-label uppercase text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-colors"
|
|
326
|
+
href="#">Report Issue</a>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
</footer>
|
|
330
|
+
|
|
331
|
+
<script>
|
|
332
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
333
|
+
const menuBtn = document.getElementById('menu-btn');
|
|
334
|
+
const mobileMenu = document.getElementById('mobile-menu');
|
|
335
|
+
if (menuBtn && mobileMenu) {
|
|
336
|
+
menuBtn.addEventListener('click', () => {
|
|
337
|
+
mobileMenu.classList.toggle('hidden');
|
|
338
|
+
mobileMenu.classList.toggle('flex');
|
|
339
|
+
});
|
|
340
|
+
}
|
|
341
|
+
});
|
|
342
|
+
</script>
|
|
343
|
+
</body>
|
|
344
|
+
|
|
345
|
+
</html>
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
const fs = require("fs");
|
|
2
|
+
const path = require("path");
|
|
3
|
+
|
|
4
|
+
const filesToProcess = {
|
|
5
|
+
"landing_desktop.html": "index.html",
|
|
6
|
+
"examples_desktop.html": "examples.html",
|
|
7
|
+
"docs_desktop.html": "documentation.html",
|
|
8
|
+
"playground_desktop.html": "playground.html",
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const inputDir = path.join(__dirname, "temp");
|
|
12
|
+
const outputDir = path.join(__dirname);
|
|
13
|
+
|
|
14
|
+
for (const [inFile, outFile] of Object.entries(filesToProcess)) {
|
|
15
|
+
const inPath = path.join(inputDir, inFile);
|
|
16
|
+
const outPath = path.join(outputDir, outFile);
|
|
17
|
+
|
|
18
|
+
if (!fs.existsSync(inPath)) {
|
|
19
|
+
console.error(`File not found: ${inPath}`);
|
|
20
|
+
continue;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
let html = fs.readFileSync(inPath, "utf8");
|
|
24
|
+
|
|
25
|
+
// Wire up Navigation Links (Header & Footer)
|
|
26
|
+
html = html.replace(
|
|
27
|
+
/href="[^"]*">Docs<\/a>/g,
|
|
28
|
+
'href="documentation.html">Docs</a>'
|
|
29
|
+
);
|
|
30
|
+
html = html.replace(
|
|
31
|
+
/href="[^"]*">Examples<\/a>/g,
|
|
32
|
+
'href="examples.html">Examples</a>'
|
|
33
|
+
);
|
|
34
|
+
html = html.replace(
|
|
35
|
+
/href="[^"]*">Playground<\/a>/g,
|
|
36
|
+
'href="playground.html">Playground</a>'
|
|
37
|
+
);
|
|
38
|
+
html = html.replace(
|
|
39
|
+
/href="[^"]*">GitHub<\/a>/g,
|
|
40
|
+
'href="https://github.com/praga-dev/bubble-chart-js" target="_blank" rel="noopener noreferrer">GitHub</a>'
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
// Wire up the Logo to index.html
|
|
44
|
+
html = html.replace(
|
|
45
|
+
/<span class="[^"]*font-black text-\[#72dcff\][^"]*">bubble-chart-js<\/span>/g,
|
|
46
|
+
'<a href="index.html" class="flex items-center gap-2 hover:opacity-80 transition-opacity"><span class="text-xl font-black text-[#72dcff] tracking-tighter font-headline">bubble-chart-js</span></a>'
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
// Since 'examples_desktop' logo spans might be a bit different, let's catch standard text
|
|
50
|
+
html = html.replace(
|
|
51
|
+
/<div class="text-lg font-bold text-\[#72dcff\] mb-4 font-headline">bubble-chart-js<\/div>/g,
|
|
52
|
+
'<a href="index.html" class="text-lg font-bold text-[#72dcff] mb-4 font-headline block hover:opacity-80">bubble-chart-js</a>'
|
|
53
|
+
);
|
|
54
|
+
html = html.replace(
|
|
55
|
+
/<span class="text-lg font-bold text-\[#72dcff\] font-headline">bubble-chart-js<\/span>/g,
|
|
56
|
+
'<a href="index.html" class="text-lg font-bold text-[#72dcff] font-headline block hover:opacity-80">bubble-chart-js</a>'
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
// Fix buttons that act as links
|
|
60
|
+
html = html.replace(
|
|
61
|
+
/<button[^>]*>[\s]*View Playground[\s]*<\/button>/g,
|
|
62
|
+
'<a href="playground.html" class="px-8 py-4 glass-panel text-on-surface font-bold font-headline rounded-xl hover:bg-surface-variant/40 transition-colors text-center inline-block">View Playground</a>'
|
|
63
|
+
);
|
|
64
|
+
html = html.replace(
|
|
65
|
+
/<button[^>]*>[\s]*View Documentation[\s]*<\/button>/g,
|
|
66
|
+
'<a href="documentation.html" class="px-8 py-4 glass-panel text-on-surface font-bold font-headline rounded-xl hover:bg-surface-variant/40 transition-colors text-center inline-block">View Documentation</a>'
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
// Add Mobile Menu Toggle Button and adjust nav container
|
|
70
|
+
if (!html.includes('id="mobile-menu"')) {
|
|
71
|
+
html = html.replace(
|
|
72
|
+
/<div class="hidden md:flex items-center gap-8 font-headline font-bold tracking-tight">/g,
|
|
73
|
+
'<div id="mobile-menu" class="hidden md:flex flex-col md:flex-row absolute md:relative top-16 md:top-0 left-0 w-full md:w-auto bg-[#090e1c]/95 md:bg-transparent p-6 md:p-0 items-center gap-8 font-headline font-bold tracking-tight border-b md:border-none border-outline-variant/15 md:flex-1 md:justify-center">'
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
// Add hamburger button to the controls area
|
|
77
|
+
html = html.replace(
|
|
78
|
+
/<div class="flex items-center gap-4">/g,
|
|
79
|
+
'<div class="flex items-center gap-4">\n<button id="menu-btn" class="md:hidden material-symbols-outlined text-[#e1e4fa] hover:text-[#72dcff] transition-colors">menu</button>'
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
// Inject script at the end of body
|
|
83
|
+
html = html.replace(
|
|
84
|
+
/<\/body>/g,
|
|
85
|
+
`
|
|
86
|
+
<script>
|
|
87
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
88
|
+
const menuBtn = document.getElementById('menu-btn');
|
|
89
|
+
const mobileMenu = document.getElementById('mobile-menu');
|
|
90
|
+
if(menuBtn && mobileMenu) {
|
|
91
|
+
menuBtn.addEventListener('click', () => {
|
|
92
|
+
mobileMenu.classList.toggle('hidden');
|
|
93
|
+
mobileMenu.classList.toggle('flex');
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
</script>
|
|
98
|
+
</body>`
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Write finalized HTML
|
|
103
|
+
fs.writeFileSync(outPath, html, "utf8");
|
|
104
|
+
console.log(`Processed: ${inFile} -> ${outFile}`);
|
|
105
|
+
}
|