nova64 0.2.5 → 0.2.7
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 +25 -8
- package/bin/nova64.js +165 -0
- package/dist/assets/console-CY_kygm3.js +14 -0
- package/dist/assets/console-CY_kygm3.js.map +1 -0
- package/dist/assets/main-l0sNRNKZ.js.map +1 -0
- package/dist/assets/sky/studio/nx.png +0 -0
- package/dist/assets/sky/studio/ny.png +0 -0
- package/dist/assets/sky/studio/nz.png +0 -0
- package/dist/assets/sky/studio/px.png +0 -0
- package/dist/assets/sky/studio/py.png +0 -0
- package/dist/assets/sky/studio/pz.png +0 -0
- package/dist/assets/vanilla-Dcuy32gi.js +2 -0
- package/dist/assets/vanilla-Dcuy32gi.js.map +1 -0
- package/dist/console.html +899 -0
- package/dist/docs/BENCHMARK.md +77 -0
- package/dist/docs/CHEATSHEET.md +255 -0
- package/dist/docs/EFFECTS_API_GUIDE.md +577 -0
- package/dist/docs/EFFECTS_QUICK_REFERENCE.md +331 -0
- package/dist/docs/FONT_CHARACTER_REFERENCE.md +219 -0
- package/dist/docs/FREE_GLB_ASSETS.md +330 -0
- package/dist/docs/FULLSCREEN_BUTTON_FEATURE.md +296 -0
- package/dist/docs/GAMEPAD_SUPPORT.md +348 -0
- package/dist/docs/GAME_IMPROVEMENTS.md +278 -0
- package/dist/docs/GAME_QUALITY_STATUS.md +300 -0
- package/dist/docs/MIGRATION_GUIDE.md +553 -0
- package/dist/docs/NOVA64_3D_API.md +356 -0
- package/dist/docs/NOVA64_API_REFERENCE.md +1406 -0
- package/dist/docs/NOVA64_UI_API.md +503 -0
- package/dist/docs/UI_SYSTEM_SUMMARY.md +445 -0
- package/dist/docs/VOXEL_ENGINE_GUIDE.md +662 -0
- package/dist/docs/VOXEL_QUICK_REFERENCE.md +386 -0
- package/dist/docs/api-3d.html +750 -0
- package/dist/docs/api-effects.html +385 -0
- package/dist/docs/api-improvements.md +121 -0
- package/dist/docs/api-skybox.html +407 -0
- package/dist/docs/api-sprites.html +321 -0
- package/dist/docs/api-voxel.html +337 -0
- package/dist/docs/api.html +543 -0
- package/dist/docs/assets.html +306 -0
- package/dist/docs/audio.html +340 -0
- package/dist/docs/blogs.html +286 -0
- package/dist/docs/collision.html +316 -0
- package/dist/docs/console.html +247 -0
- package/dist/docs/editor.html +297 -0
- package/dist/docs/font.html +247 -0
- package/dist/docs/framebuffer.html +247 -0
- package/dist/docs/fullscreen-button.html +297 -0
- package/dist/docs/gpu-systems.html +247 -0
- package/dist/docs/index.html +580 -0
- package/dist/docs/input.html +491 -0
- package/dist/docs/physics.html +311 -0
- package/dist/docs/screens.html +311 -0
- package/dist/docs/storage.html +311 -0
- package/dist/docs/textinput.html +332 -0
- package/dist/docs/ui.html +488 -0
- package/dist/examples/3d-advanced/code.js +695 -0
- package/dist/examples/adventure-comic-3d/code.js +342 -0
- package/dist/examples/audio-lab/code.js +150 -0
- package/dist/examples/boids-flocking/code.js +270 -0
- package/dist/examples/crystal-cathedral-3d/code.js +706 -0
- package/dist/examples/cyberpunk-city-3d/code.js +1383 -0
- package/dist/examples/demoscene/README.md +192 -0
- package/dist/examples/demoscene/code.js +1081 -0
- package/dist/examples/demoscene/meta.json +21 -0
- package/dist/examples/dungeon-crawler-3d/code.js +1117 -0
- package/dist/examples/f-zero-nova-3d/code.js +865 -0
- package/dist/examples/f-zero-nova-3d/code_old.js +1555 -0
- package/dist/examples/fps-demo-3d/code.js +744 -0
- package/dist/examples/game-of-life-3d/code.js +338 -0
- package/dist/examples/generative-art/code.js +632 -0
- package/dist/examples/hello-3d/code.js +325 -0
- package/dist/examples/hello-skybox/code.js +183 -0
- package/dist/examples/hello-world/code.js +19 -0
- package/dist/examples/input-showcase/code.js +109 -0
- package/dist/examples/instancing-demo/code.js +315 -0
- package/dist/examples/minecraft-demo/code.js +387 -0
- package/dist/examples/model-viewer-3d/code.js +114 -0
- package/dist/examples/mystical-realm-3d/code.js +1203 -0
- package/dist/examples/nature-explorer-3d/code.js +1318 -0
- package/dist/examples/particles-demo/code.js +522 -0
- package/dist/examples/pbr-showcase/code.js +140 -0
- package/dist/examples/physics-demo-3d/code.js +948 -0
- package/dist/examples/screen-demo/code.js +267 -0
- package/dist/examples/shooter-demo-3d/code.js +1286 -0
- package/dist/examples/space-combat-3d/IMPLEMENTATION_SUMMARY.md +109 -0
- package/dist/examples/space-combat-3d/README.md +135 -0
- package/dist/examples/space-combat-3d/code.js +1332 -0
- package/dist/examples/space-harrier-3d/code.js +923 -0
- package/dist/examples/star-fox-nova-3d/code.js +1116 -0
- package/dist/examples/star-fox-nova-3d/code_backup.js +410 -0
- package/dist/examples/star-fox-nova-3d/code_broken.js +1821 -0
- package/dist/examples/storage-quest/code.js +209 -0
- package/dist/examples/strider-demo-3d/IMPROVEMENT_OPTIONS.md +285 -0
- package/dist/examples/strider-demo-3d/cache-test.html +132 -0
- package/dist/examples/strider-demo-3d/code-fixed.js +582 -0
- package/dist/examples/strider-demo-3d/code-old.js +1537 -0
- package/dist/examples/strider-demo-3d/code.js +1462 -0
- package/dist/examples/strider-demo-3d/code.js.bak2 +1169 -0
- package/dist/examples/strider-demo-3d/fix-game.sh +53 -0
- package/dist/examples/super-plumber-64/README.md +128 -0
- package/dist/examples/super-plumber-64/code.js +1185 -0
- package/dist/examples/super-plumber-64/index.html +88 -0
- package/dist/examples/test-2d-overlay/code.js +32 -0
- package/dist/examples/test-font/code.js +51 -0
- package/dist/examples/test-minimal/code.js +21 -0
- package/dist/examples/ui-demo/code.js +306 -0
- package/dist/examples/wing-commander-space/README.md +180 -0
- package/dist/examples/wing-commander-space/code.js +1285 -0
- package/dist/examples/wizardry-3d/CHANGELOG.md +366 -0
- package/dist/examples/wizardry-3d/code.js +3928 -0
- package/dist/index.html +666 -0
- package/dist/os9-shell/assets/index-DIHfrTaW.css +1 -0
- package/dist/os9-shell/assets/index-KchE_ngx.js +483 -0
- package/dist/os9-shell/assets/index-KchE_ngx.js.map +1 -0
- package/dist/os9-shell/index.html +23 -0
- package/dist/os9-shell/nova-icon.svg +12 -0
- package/dist/runtime/api-2d.js +1158 -0
- package/dist/runtime/api-3d/camera.js +73 -0
- package/dist/runtime/api-3d/instancing.js +180 -0
- package/dist/runtime/api-3d/lights.js +51 -0
- package/dist/runtime/api-3d/materials.js +47 -0
- package/dist/runtime/api-3d/models.js +84 -0
- package/dist/runtime/api-3d/particles.js +296 -0
- package/dist/runtime/api-3d/pbr.js +113 -0
- package/dist/runtime/api-3d/primitives.js +304 -0
- package/dist/runtime/api-3d/scene.js +169 -0
- package/dist/runtime/api-3d/transforms.js +161 -0
- package/dist/runtime/api-3d.js +166 -0
- package/dist/runtime/api-effects.js +840 -0
- package/dist/runtime/api-gameutils.js +476 -0
- package/dist/runtime/api-generative.js +610 -0
- package/dist/runtime/api-presets.js +85 -0
- package/dist/runtime/api-skybox.js +232 -0
- package/dist/runtime/api-sprites.js +100 -0
- package/dist/runtime/api-voxel.js +712 -0
- package/dist/runtime/api.js +201 -0
- package/dist/runtime/assets.js +27 -0
- package/dist/runtime/audio.js +114 -0
- package/dist/runtime/collision.js +47 -0
- package/dist/runtime/console.js +101 -0
- package/dist/runtime/editor.js +233 -0
- package/dist/runtime/font.js +233 -0
- package/dist/runtime/framebuffer.js +28 -0
- package/dist/runtime/fullscreen-button.js +185 -0
- package/dist/runtime/gpu-canvas2d.js +47 -0
- package/dist/runtime/gpu-threejs.js +643 -0
- package/dist/runtime/gpu-webgl2.js +310 -0
- package/dist/runtime/index.d.ts +682 -0
- package/dist/runtime/index.js +22 -0
- package/dist/runtime/input.js +225 -0
- package/dist/runtime/logger.js +60 -0
- package/dist/runtime/physics.js +101 -0
- package/dist/runtime/screens.js +213 -0
- package/dist/runtime/storage.js +38 -0
- package/dist/runtime/store.js +151 -0
- package/dist/runtime/textinput.js +68 -0
- package/dist/runtime/ui/buttons.js +124 -0
- package/dist/runtime/ui/panels.js +105 -0
- package/dist/runtime/ui/text.js +86 -0
- package/dist/runtime/ui/widgets.js +141 -0
- package/dist/runtime/ui.js +111 -0
- package/index.html +6 -1
- package/package.json +9 -2
- package/public/assets/sky/studio/nx.png +0 -0
- package/public/assets/sky/studio/ny.png +0 -0
- package/public/assets/sky/studio/nz.png +0 -0
- package/public/assets/sky/studio/px.png +0 -0
- package/public/assets/sky/studio/py.png +0 -0
- package/public/assets/sky/studio/pz.png +0 -0
- package/public/os9-shell/assets/index-KchE_ngx.js +483 -0
- package/public/os9-shell/assets/index-KchE_ngx.js.map +1 -0
- package/public/os9-shell/index.html +10 -1
- package/runtime/api-2d.js +301 -21
- package/runtime/api-3d/pbr.js +45 -1
- package/runtime/api-3d.js +1 -0
- package/runtime/api-effects.js +90 -3
- package/runtime/api-gameutils.js +476 -0
- package/runtime/api-generative.js +610 -0
- package/runtime/api-skybox.js +54 -0
- package/runtime/api-voxel.js +139 -28
- package/runtime/gpu-threejs.js +13 -9
- package/runtime/ui.js +2 -2
- package/src/main.js +20 -0
- package/public/os9-shell/assets/index-B1Uvacma.js +0 -32825
- package/public/os9-shell/assets/index-B1Uvacma.js.map +0 -1
package/dist/index.html
ADDED
|
@@ -0,0 +1,666 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>NOVA64 — Because JavaScript Deserves a GPU That Doesn't Suck</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<style>
|
|
8
|
+
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
|
9
|
+
|
|
10
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
11
|
+
|
|
12
|
+
:root {
|
|
13
|
+
--neon-cyan: #00ffff;
|
|
14
|
+
--neon-pink: #ff0080;
|
|
15
|
+
--neon-purple: #8338ec;
|
|
16
|
+
--dark-bg: #0a0e14;
|
|
17
|
+
--panel-bg: #151822;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
body {
|
|
21
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
22
|
+
background: var(--dark-bg);
|
|
23
|
+
color: #fff;
|
|
24
|
+
overflow-x: hidden;
|
|
25
|
+
line-height: 1.6;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Animated grid background */
|
|
29
|
+
|
|
30
|
+
.grid-bg {
|
|
31
|
+
position: fixed;
|
|
32
|
+
top: 0;
|
|
33
|
+
left: 0;
|
|
34
|
+
width: 100%;
|
|
35
|
+
height: 100%;
|
|
36
|
+
background:
|
|
37
|
+
linear-gradient(0deg, transparent 24%, rgba(0, 255, 255, .05) 25%, rgba(0, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, .05) 75%, rgba(0, 255, 255, .05) 76%, transparent 77%, transparent),
|
|
38
|
+
linear-gradient(90deg, transparent 24%, rgba(0, 255, 255, .05) 25%, rgba(0, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, .05) 75%, rgba(0, 255, 255, .05) 76%, transparent 77%, transparent);
|
|
39
|
+
background-size: 50px 50px;
|
|
40
|
+
animation: gridScroll 20s linear infinite;
|
|
41
|
+
z-index: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@keyframes gridScroll {
|
|
45
|
+
0% { transform: translateY(0); }
|
|
46
|
+
100% { transform: translateY(50px); }
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.container {
|
|
50
|
+
position: relative;
|
|
51
|
+
z-index: 1;
|
|
52
|
+
max-width: 1400px;
|
|
53
|
+
margin: 0 auto;
|
|
54
|
+
padding: 0 20px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Hero Section */
|
|
58
|
+
|
|
59
|
+
.hero {
|
|
60
|
+
min-height: 100vh;
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
align-items: center;
|
|
65
|
+
text-align: center;
|
|
66
|
+
position: relative;
|
|
67
|
+
padding: 40px 20px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.logo {
|
|
71
|
+
font-size: 6rem;
|
|
72
|
+
font-weight: 900;
|
|
73
|
+
background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-pink) 50%, var(--neon-purple) 100%);
|
|
74
|
+
-webkit-background-clip: text;
|
|
75
|
+
-webkit-text-fill-color: transparent;
|
|
76
|
+
background-clip: text;
|
|
77
|
+
animation: glow 2s ease-in-out infinite alternate;
|
|
78
|
+
margin-bottom: 20px;
|
|
79
|
+
text-shadow: 0 0 80px rgba(0, 255, 255, 0.5);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@keyframes glow {
|
|
83
|
+
from { filter: drop-shadow(0 0 20px var(--neon-cyan)); }
|
|
84
|
+
to { filter: drop-shadow(0 0 40px var(--neon-pink)); }
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.tagline {
|
|
88
|
+
font-size: 1.8rem;
|
|
89
|
+
margin-bottom: 15px;
|
|
90
|
+
color: var(--neon-cyan);
|
|
91
|
+
animation: slideInLeft 1s ease-out;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.subtitle {
|
|
95
|
+
font-size: 1.2rem;
|
|
96
|
+
color: #99a1b3;
|
|
97
|
+
max-width: 800px;
|
|
98
|
+
margin: 0 auto 40px;
|
|
99
|
+
animation: slideInRight 1s ease-out;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@keyframes slideInLeft {
|
|
103
|
+
from { opacity: 0; transform: translateX(-50px); }
|
|
104
|
+
to { opacity: 1; transform: translateX(0); }
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@keyframes slideInRight {
|
|
108
|
+
from { opacity: 0; transform: translateX(50px); }
|
|
109
|
+
to { opacity: 1; transform: translateX(0); }
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* CRT Terminal Effect */
|
|
113
|
+
|
|
114
|
+
.terminal {
|
|
115
|
+
background: #000;
|
|
116
|
+
border: 3px solid var(--neon-cyan);
|
|
117
|
+
border-radius: 10px;
|
|
118
|
+
padding: 20px;
|
|
119
|
+
font-family: 'Courier New', monospace;
|
|
120
|
+
font-size: 14px;
|
|
121
|
+
max-width: 600px;
|
|
122
|
+
margin: 30px auto;
|
|
123
|
+
box-shadow:
|
|
124
|
+
0 0 20px var(--neon-cyan),
|
|
125
|
+
inset 0 0 20px rgba(0, 255, 255, 0.1);
|
|
126
|
+
position: relative;
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.terminal::before {
|
|
131
|
+
content: '';
|
|
132
|
+
position: absolute;
|
|
133
|
+
top: 0;
|
|
134
|
+
left: 0;
|
|
135
|
+
width: 100%;
|
|
136
|
+
height: 100%;
|
|
137
|
+
background: repeating-linear-gradient(
|
|
138
|
+
0deg,
|
|
139
|
+
rgba(0, 255, 255, 0.03) 0px,
|
|
140
|
+
rgba(0, 255, 255, 0.03) 1px,
|
|
141
|
+
transparent 1px,
|
|
142
|
+
transparent 2px
|
|
143
|
+
);
|
|
144
|
+
pointer-events: none;
|
|
145
|
+
animation: scanlines 8s linear infinite;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
@keyframes scanlines {
|
|
149
|
+
0% { transform: translateY(0); }
|
|
150
|
+
100% { transform: translateY(10px); }
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.terminal-line {
|
|
154
|
+
margin: 8px 0;
|
|
155
|
+
color: var(--neon-cyan);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.terminal-line.error { color: var(--neon-pink); }
|
|
159
|
+
|
|
160
|
+
.terminal-line.success { color: #00ff00; }
|
|
161
|
+
|
|
162
|
+
.cursor {
|
|
163
|
+
display: inline-block;
|
|
164
|
+
width: 10px;
|
|
165
|
+
height: 15px;
|
|
166
|
+
background: var(--neon-cyan);
|
|
167
|
+
animation: blink 1s step-end infinite;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@keyframes blink {
|
|
171
|
+
50% { opacity: 0; }
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* Action Buttons */
|
|
175
|
+
|
|
176
|
+
.action-grid {
|
|
177
|
+
display: grid;
|
|
178
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
179
|
+
gap: 20px;
|
|
180
|
+
margin: 50px 0;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.action-card {
|
|
184
|
+
background: var(--panel-bg);
|
|
185
|
+
border: 2px solid var(--neon-cyan);
|
|
186
|
+
border-radius: 15px;
|
|
187
|
+
padding: 30px;
|
|
188
|
+
text-align: center;
|
|
189
|
+
cursor: pointer;
|
|
190
|
+
transition: all 0.3s ease;
|
|
191
|
+
position: relative;
|
|
192
|
+
overflow: hidden;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.action-card::before {
|
|
196
|
+
content: '';
|
|
197
|
+
position: absolute;
|
|
198
|
+
top: 0;
|
|
199
|
+
left: -100%;
|
|
200
|
+
width: 100%;
|
|
201
|
+
height: 100%;
|
|
202
|
+
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
|
|
203
|
+
transition: left 0.5s;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.action-card:hover::before {
|
|
207
|
+
left: 100%;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.action-card:hover {
|
|
211
|
+
transform: translateY(-10px) scale(1.05);
|
|
212
|
+
box-shadow: 0 10px 40px rgba(0, 255, 255, 0.4);
|
|
213
|
+
border-color: var(--neon-pink);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.action-card .icon {
|
|
217
|
+
font-size: 4rem;
|
|
218
|
+
margin-bottom: 15px;
|
|
219
|
+
display: block;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.action-card h3 {
|
|
223
|
+
font-size: 1.5rem;
|
|
224
|
+
margin-bottom: 10px;
|
|
225
|
+
color: var(--neon-cyan);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.action-card p {
|
|
229
|
+
color: #99a1b3;
|
|
230
|
+
font-size: 0.95rem;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* Features Grid */
|
|
234
|
+
|
|
235
|
+
.features {
|
|
236
|
+
padding: 80px 20px;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.section-title {
|
|
240
|
+
font-size: 3rem;
|
|
241
|
+
text-align: center;
|
|
242
|
+
margin-bottom: 60px;
|
|
243
|
+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
|
|
244
|
+
-webkit-background-clip: text;
|
|
245
|
+
-webkit-text-fill-color: transparent;
|
|
246
|
+
background-clip: text;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.feature-grid {
|
|
250
|
+
display: grid;
|
|
251
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
252
|
+
gap: 30px;
|
|
253
|
+
margin-top: 40px;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.feature-card {
|
|
257
|
+
background: var(--panel-bg);
|
|
258
|
+
border: 1px solid #2a324a;
|
|
259
|
+
border-radius: 10px;
|
|
260
|
+
padding: 25px;
|
|
261
|
+
transition: all 0.3s ease;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.feature-card:hover {
|
|
265
|
+
border-color: var(--neon-cyan);
|
|
266
|
+
transform: translateY(-5px);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.feature-card h4 {
|
|
270
|
+
color: var(--neon-cyan);
|
|
271
|
+
font-size: 1.3rem;
|
|
272
|
+
margin-bottom: 10px;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.feature-card ul {
|
|
276
|
+
list-style: none;
|
|
277
|
+
padding-left: 0;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.feature-card li {
|
|
281
|
+
padding: 5px 0;
|
|
282
|
+
color: #99a1b3;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.feature-card li::before {
|
|
286
|
+
content: '▸ ';
|
|
287
|
+
color: var(--neon-pink);
|
|
288
|
+
font-weight: bold;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* Demo Showcase */
|
|
292
|
+
|
|
293
|
+
.demo-showcase {
|
|
294
|
+
padding: 80px 20px;
|
|
295
|
+
background: linear-gradient(135deg, #0f1115 0%, #1a1625 50%, #0f1115 100%);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.demo-grid {
|
|
299
|
+
display: grid;
|
|
300
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
301
|
+
gap: 20px;
|
|
302
|
+
margin-top: 40px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.demo-card {
|
|
306
|
+
background: var(--panel-bg);
|
|
307
|
+
border: 2px solid #2a324a;
|
|
308
|
+
border-radius: 10px;
|
|
309
|
+
padding: 20px;
|
|
310
|
+
text-align: center;
|
|
311
|
+
cursor: pointer;
|
|
312
|
+
transition: all 0.3s ease;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.demo-card:hover {
|
|
316
|
+
border-color: var(--neon-purple);
|
|
317
|
+
transform: scale(1.05);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.demo-card .emoji {
|
|
321
|
+
font-size: 3rem;
|
|
322
|
+
display: block;
|
|
323
|
+
margin-bottom: 10px;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.demo-card h4 {
|
|
327
|
+
color: #fff;
|
|
328
|
+
font-size: 1.1rem;
|
|
329
|
+
margin-bottom: 5px;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.demo-card p {
|
|
333
|
+
color: #99a1b3;
|
|
334
|
+
font-size: 0.85rem;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
/* Why Section */
|
|
338
|
+
|
|
339
|
+
.why-section {
|
|
340
|
+
padding: 80px 20px;
|
|
341
|
+
text-align: center;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.why-grid {
|
|
345
|
+
display: grid;
|
|
346
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
347
|
+
gap: 30px;
|
|
348
|
+
margin-top: 50px;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.why-card {
|
|
352
|
+
background: var(--panel-bg);
|
|
353
|
+
padding: 30px;
|
|
354
|
+
border-radius: 15px;
|
|
355
|
+
border: 2px solid transparent;
|
|
356
|
+
transition: all 0.3s ease;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.why-card:hover {
|
|
360
|
+
border-color: var(--neon-cyan);
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.why-card h3 {
|
|
364
|
+
color: var(--neon-pink);
|
|
365
|
+
font-size: 1.8rem;
|
|
366
|
+
margin-bottom: 15px;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.why-card p {
|
|
370
|
+
color: #99a1b3;
|
|
371
|
+
font-size: 1.05rem;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/* Footer */
|
|
375
|
+
|
|
376
|
+
footer {
|
|
377
|
+
padding: 40px 20px;
|
|
378
|
+
text-align: center;
|
|
379
|
+
border-top: 1px solid #2a324a;
|
|
380
|
+
color: #99a1b3;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
footer a {
|
|
384
|
+
color: var(--neon-cyan);
|
|
385
|
+
text-decoration: none;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
footer a:hover {
|
|
389
|
+
text-decoration: underline;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
/* Floating particles */
|
|
393
|
+
|
|
394
|
+
.particle {
|
|
395
|
+
position: fixed;
|
|
396
|
+
width: 4px;
|
|
397
|
+
height: 4px;
|
|
398
|
+
background: var(--neon-cyan);
|
|
399
|
+
border-radius: 50%;
|
|
400
|
+
pointer-events: none;
|
|
401
|
+
opacity: 0;
|
|
402
|
+
animation: float 10s infinite;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
@keyframes float {
|
|
406
|
+
0% {
|
|
407
|
+
transform: translateY(100vh) translateX(0) scale(0);
|
|
408
|
+
opacity: 0;
|
|
409
|
+
}
|
|
410
|
+
10% {
|
|
411
|
+
opacity: 1;
|
|
412
|
+
}
|
|
413
|
+
90% {
|
|
414
|
+
opacity: 1;
|
|
415
|
+
}
|
|
416
|
+
100% {
|
|
417
|
+
transform: translateY(-100vh) translateX(100px) scale(1);
|
|
418
|
+
opacity: 0;
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
@media (max-width: 768px) {
|
|
423
|
+
.logo { font-size: 3rem; }
|
|
424
|
+
.tagline { font-size: 1.3rem; }
|
|
425
|
+
.subtitle { font-size: 1rem; }
|
|
426
|
+
.section-title { font-size: 2rem; }
|
|
427
|
+
}
|
|
428
|
+
</style>
|
|
429
|
+
</head>
|
|
430
|
+
<body>
|
|
431
|
+
<div class="grid-bg"></div>
|
|
432
|
+
|
|
433
|
+
<!-- Floating particles -->
|
|
434
|
+
<script>
|
|
435
|
+
for (let i = 0; i < 20; i++) {
|
|
436
|
+
const particle = document.createElement('div');
|
|
437
|
+
particle.className = 'particle';
|
|
438
|
+
particle.style.left = Math.random() * 100 + '%';
|
|
439
|
+
particle.style.animationDelay = Math.random() * 10 + 's';
|
|
440
|
+
particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
|
|
441
|
+
document.body.appendChild(particle);
|
|
442
|
+
}
|
|
443
|
+
</script>
|
|
444
|
+
|
|
445
|
+
<div class="container">
|
|
446
|
+
<!-- Hero Section -->
|
|
447
|
+
<section class="hero">
|
|
448
|
+
<h1 class="logo">NOVA64</h1>
|
|
449
|
+
<p class="tagline">Because JavaScript Deserves a GPU That Doesn't Suck</p>
|
|
450
|
+
<p class="subtitle">
|
|
451
|
+
A fantasy console that actually lets you make N64/PS1 era games without selling your soul to WebGL boilerplate.
|
|
452
|
+
It's like if the Nintendo 64 had a baby with modern web tech and that baby was really good at math.
|
|
453
|
+
</p>
|
|
454
|
+
|
|
455
|
+
<!-- Terminal Animation -->
|
|
456
|
+
<div class="terminal">
|
|
457
|
+
<div class="terminal-line">$ pnpm add -g nova64</div>
|
|
458
|
+
<div class="terminal-line success">✓ GPU acceleration initialized</div>
|
|
459
|
+
<div class="terminal-line success">✓ 3D engine loaded (with actual lighting!)</div>
|
|
460
|
+
<div class="terminal-line success">✓ Voxel renderer standing by</div>
|
|
461
|
+
<div class="terminal-line success">✓ Physics engine activated</div>
|
|
462
|
+
<div class="terminal-line success">✓ NovaOS shell... wait what?</div>
|
|
463
|
+
<div class="terminal-line">$ nova64 --start-demo</div>
|
|
464
|
+
<div class="terminal-line">>>> Let's make something cool <span class="cursor"></span></div>
|
|
465
|
+
</div>
|
|
466
|
+
|
|
467
|
+
<!-- Main Action Cards -->
|
|
468
|
+
<div class="action-grid">
|
|
469
|
+
<div class="action-card" onclick="window.location.href='/console.html'">
|
|
470
|
+
<span class="icon">🎮</span>
|
|
471
|
+
<h3>Launch Console</h3>
|
|
472
|
+
<p>Jump straight into the action. Play 20+ demos including F-Zero racing, Star Fox combat, and voxel Minecraft.</p>
|
|
473
|
+
</div>
|
|
474
|
+
|
|
475
|
+
<div class="action-card" onclick="window.open('/os9-shell/index.html', '_blank')">
|
|
476
|
+
<span class="icon">🖥️</span>
|
|
477
|
+
<h3>NovaOS</h3>
|
|
478
|
+
<p>A fully functional retro OS interface in your browser. Because nostalgia is a feature, not a bug.</p>
|
|
479
|
+
</div>
|
|
480
|
+
|
|
481
|
+
<div class="action-card" onclick="window.open('/docs/index.html', '_blank')">
|
|
482
|
+
<span class="icon">📚</span>
|
|
483
|
+
<h3>Documentation</h3>
|
|
484
|
+
<p>Learn the API. We promise it's easier than reading Three.js docs at 3 AM.</p>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
</section>
|
|
488
|
+
|
|
489
|
+
<!-- Why Nova64? -->
|
|
490
|
+
<section class="why-section">
|
|
491
|
+
<h2 class="section-title">Why Nova64 Exists</h2>
|
|
492
|
+
<div class="why-grid">
|
|
493
|
+
<div class="why-card">
|
|
494
|
+
<h3>🎯 No Boilerplate Hell</h3>
|
|
495
|
+
<p>Write actual game code, not 500 lines of WebGL initialization. We did the hard parts so you don't have to.</p>
|
|
496
|
+
</div>
|
|
497
|
+
<div class="why-card">
|
|
498
|
+
<h3>🚀 Real 3D Performance</h3>
|
|
499
|
+
<p>Three.js powered GPU acceleration. Runs at 60 FPS with lighting, shadows, and fog. Your GPU will actually break a sweat.</p>
|
|
500
|
+
</div>
|
|
501
|
+
<div class="why-card">
|
|
502
|
+
<h3>🎨 Complete Ecosystem</h3>
|
|
503
|
+
<p>3D engine, voxel renderer, physics, sprite editor, and a full OS shell. It's basically a game dev studio in a browser tab.</p>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
</section>
|
|
507
|
+
|
|
508
|
+
<!-- Features -->
|
|
509
|
+
<section class="features">
|
|
510
|
+
<h2 class="section-title">What's Inside This Beast?</h2>
|
|
511
|
+
<div class="feature-grid">
|
|
512
|
+
<div class="feature-card">
|
|
513
|
+
<h4>🎮 3D Graphics Engine</h4>
|
|
514
|
+
<ul>
|
|
515
|
+
<li>Full Three.js GPU acceleration</li>
|
|
516
|
+
<li>Directional & point lighting</li>
|
|
517
|
+
<li>Real-time shadows</li>
|
|
518
|
+
<li>Volumetric fog effects</li>
|
|
519
|
+
<li>Skybox support</li>
|
|
520
|
+
<li>N64/PS1 retro aesthetic</li>
|
|
521
|
+
</ul>
|
|
522
|
+
</div>
|
|
523
|
+
|
|
524
|
+
<div class="feature-card">
|
|
525
|
+
<h4>🧱 Voxel Engine</h4>
|
|
526
|
+
<ul>
|
|
527
|
+
<li>Minecraft-style worlds</li>
|
|
528
|
+
<li>Chunk-based rendering</li>
|
|
529
|
+
<li>Greedy meshing optimization</li>
|
|
530
|
+
<li>Block breaking/placing</li>
|
|
531
|
+
<li>Texture atlases</li>
|
|
532
|
+
</ul>
|
|
533
|
+
</div>
|
|
534
|
+
|
|
535
|
+
<div class="feature-card">
|
|
536
|
+
<h4>⚛️ Physics System</h4>
|
|
537
|
+
<ul>
|
|
538
|
+
<li>AABB collision detection</li>
|
|
539
|
+
<li>Gravity & friction</li>
|
|
540
|
+
<li>Raycasting</li>
|
|
541
|
+
<li>Trigger volumes</li>
|
|
542
|
+
<li>Character controllers</li>
|
|
543
|
+
</ul>
|
|
544
|
+
</div>
|
|
545
|
+
|
|
546
|
+
<div class="feature-card">
|
|
547
|
+
<h4>🖥️ NovaOS</h4>
|
|
548
|
+
<ul>
|
|
549
|
+
<li>Authentic Platinum theme</li>
|
|
550
|
+
<li>Window management</li>
|
|
551
|
+
<li>Virtual filesystem</li>
|
|
552
|
+
<li>Application framework</li>
|
|
553
|
+
<li>Paint & Notes apps</li>
|
|
554
|
+
</ul>
|
|
555
|
+
</div>
|
|
556
|
+
|
|
557
|
+
<div class="feature-card">
|
|
558
|
+
<h4>🎨 Creative Tools</h4>
|
|
559
|
+
<ul>
|
|
560
|
+
<li>Sprite editor with live preview</li>
|
|
561
|
+
<li>Color picker & brush tools</li>
|
|
562
|
+
<li>Layer support</li>
|
|
563
|
+
<li>Export to game assets</li>
|
|
564
|
+
<li>Font rendering system</li>
|
|
565
|
+
</ul>
|
|
566
|
+
</div>
|
|
567
|
+
|
|
568
|
+
<div class="feature-card">
|
|
569
|
+
<h4>🎯 Developer Friendly</h4>
|
|
570
|
+
<ul>
|
|
571
|
+
<li>Clean, simple API</li>
|
|
572
|
+
<li>TypeScript support</li>
|
|
573
|
+
<li>Hot reloading</li>
|
|
574
|
+
<li>Extensive documentation</li>
|
|
575
|
+
<li>20+ working examples</li>
|
|
576
|
+
</ul>
|
|
577
|
+
</div>
|
|
578
|
+
</div>
|
|
579
|
+
</section>
|
|
580
|
+
|
|
581
|
+
<!-- Demo Showcase -->
|
|
582
|
+
<section class="demo-showcase">
|
|
583
|
+
<h2 class="section-title">Check Out The Demos</h2>
|
|
584
|
+
<p style="text-align: center; color: #99a1b3; margin-bottom: 20px;">
|
|
585
|
+
These aren't just tech demos. They're actual playable games you can learn from.
|
|
586
|
+
</p>
|
|
587
|
+
<div class="demo-grid">
|
|
588
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=fps-demo-3d'">
|
|
589
|
+
<span class="emoji">🔫</span>
|
|
590
|
+
<h4>Nova Doom 3D</h4>
|
|
591
|
+
<p>Action First-Person Shooter</p>
|
|
592
|
+
</div>
|
|
593
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=adventure-comic-3d'">
|
|
594
|
+
<span class="emoji">🕵️</span>
|
|
595
|
+
<h4>The Verdict</h4>
|
|
596
|
+
<p>3D Comic Noir Adventure</p>
|
|
597
|
+
</div>
|
|
598
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=crystal-cathedral-3d'">
|
|
599
|
+
<span class="emoji">🏛️</span>
|
|
600
|
+
<h4>Crystal Cathedral</h4>
|
|
601
|
+
<p>Ultimate graphics showcase</p>
|
|
602
|
+
</div>
|
|
603
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=f-zero-nova-3d'">
|
|
604
|
+
<span class="emoji">🏁</span>
|
|
605
|
+
<h4>F-Zero Racing</h4>
|
|
606
|
+
<p>High-speed arcade action</p>
|
|
607
|
+
</div>
|
|
608
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=star-fox-nova-3d'">
|
|
609
|
+
<span class="emoji">🚀</span>
|
|
610
|
+
<h4>Star Fox Combat</h4>
|
|
611
|
+
<p>Space shooter mayhem</p>
|
|
612
|
+
</div>
|
|
613
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=minecraft-demo'">
|
|
614
|
+
<span class="emoji">⛏️</span>
|
|
615
|
+
<h4>Voxel Minecraft</h4>
|
|
616
|
+
<p>Block building sandbox</p>
|
|
617
|
+
</div>
|
|
618
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=super-plumber-64'">
|
|
619
|
+
<span class="emoji">🍄</span>
|
|
620
|
+
<h4>Super Plumber 64</h4>
|
|
621
|
+
<p>3D platformer classic</p>
|
|
622
|
+
</div>
|
|
623
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=cyberpunk-city-3d'">
|
|
624
|
+
<span class="emoji">🌃</span>
|
|
625
|
+
<h4>Cyberpunk City</h4>
|
|
626
|
+
<p>Open world exploration</p>
|
|
627
|
+
</div>
|
|
628
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=strider-demo-3d'">
|
|
629
|
+
<span class="emoji">⚔️</span>
|
|
630
|
+
<h4>Knight Platformer</h4>
|
|
631
|
+
<p>Action adventure</p>
|
|
632
|
+
</div>
|
|
633
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=model-viewer-3d'">
|
|
634
|
+
<span class="emoji">🦊</span>
|
|
635
|
+
<h4>Animated Models</h4>
|
|
636
|
+
<p>Rigged .glb animations</p>
|
|
637
|
+
</div>
|
|
638
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=demoscene'">
|
|
639
|
+
<span class="emoji">🎬</span>
|
|
640
|
+
<h4>Tron Demoscene</h4>
|
|
641
|
+
<p>Visual effects showcase</p>
|
|
642
|
+
</div>
|
|
643
|
+
<div class="demo-card" onclick="window.location.href='/console.html?demo=pbr-showcase'">
|
|
644
|
+
<span class="emoji">🔮</span>
|
|
645
|
+
<h4>PBR Showcase</h4>
|
|
646
|
+
<p>Metalness & roughness grid with IBL</p>
|
|
647
|
+
</div>
|
|
648
|
+
</div>
|
|
649
|
+
</section>
|
|
650
|
+
|
|
651
|
+
<!-- Footer -->
|
|
652
|
+
<footer>
|
|
653
|
+
<p>Built with ❤️ for retro computing enthusiasts and modern game developers</p>
|
|
654
|
+
<p style="margin-top: 10px;">
|
|
655
|
+
<a href="https://github.com/seacloud9/nova64" target="_blank">GitHub</a> •
|
|
656
|
+
<a href="/docs/index.html">API Docs</a> •
|
|
657
|
+
<a href="/console.html">Console</a> •
|
|
658
|
+
<a href="/os9-shell/index.html">NovaOS</a>
|
|
659
|
+
</p>
|
|
660
|
+
<p style="margin-top: 20px; font-size: 0.9rem;">
|
|
661
|
+
MIT License • No Nintendo 64s were harmed in the making of this project
|
|
662
|
+
</p>
|
|
663
|
+
</footer>
|
|
664
|
+
</div>
|
|
665
|
+
</body>
|
|
666
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--gnome-dark: #1c1c1c;--gnome-darker: #141414;--gnome-panel: #2c2c2c;--gnome-bg: #242424;--gnome-card: #303030;--gnome-hover: #383838;--gnome-active: #404040;--gnome-border: #3c3c3c;--gnome-blue: #3584e4;--gnome-blue-hover: #4a9af5;--gnome-blue-dark: #1c71d8;--gnome-blue-light: #78aeed;--gnome-text: #ffffff;--gnome-text-secondary: #c0c0c0;--gnome-text-disabled: #6e6e6e;--window-title-active: linear-gradient(to bottom, #2c2c2c 0%, #242424 100%);--window-title-inactive: #2c2c2c;--window-border: #1c1c1c;--window-border-light: #3c3c3c;--window-content-bg: #242424;--window-shadow: 0 20px 60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05), 0 0 100px rgba(53, 132, 228, .1);--menu-bg: #2c2c2c;--menu-border: #1c1c1c;--menu-highlight: #3584e4;--menu-text: #ffffff;--menu-text-disabled: #6e6e6e;--desktop-bg: linear-gradient(135deg, #0a0e27 0%, #16213e 20%, #1a2645 40%, #0f3460 60%, #16213e 80%, #0a0e27 100%);--desktop-pattern: radial-gradient(circle at 20% 20%, rgba(255, 0, 255, .15) 0%, transparent 30%), radial-gradient(circle at 80% 30%, rgba(0, 255, 255, .12) 0%, transparent 35%), radial-gradient(circle at 50% 80%, rgba(138, 43, 226, .15) 0%, transparent 40%), radial-gradient(circle at 15% 75%, rgba(0, 191, 255, .1) 0%, transparent 35%), radial-gradient(circle at 85% 85%, rgba(255, 20, 147, .12) 0%, transparent 30%), repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(0, 255, 255, .03) 49px, rgba(0, 255, 255, .03) 50px), repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(255, 0, 255, .03) 49px, rgba(255, 0, 255, .03) 50px), radial-gradient(circle at center, rgba(53, 132, 228, .08) 0%, transparent 60%);--desktop-animated-bg: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 255, 255, .05) 0%, transparent 50%);--scroll-bg: #2c2c2c;--scroll-track: #242424;--scroll-thumb: #505050;--scroll-thumb-hover: #606060;--button-bg: #303030;--button-border: #3c3c3c;--button-hover: #383838;--button-active: #3584e4;--button-text: #ffffff;--font-system: "Cantarell", "Ubuntu", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--font-size-system: 13px;--font-size-menu: 13px;--font-size-title: 13px;--font-size-large: 16px;--font-size-small: 11px;--spacing-xs: 2px;--spacing-sm: 4px;--spacing-md: 8px;--spacing-lg: 12px;--spacing-xl: 16px;--z-desktop: 0;--z-window-base: 100;--z-menu: 9000;--z-menubar: 10000;--z-modal: 15000;--z-control-strip: 8000;--transition-fast: .1s;--transition-normal: .2s;--transition-slow: .3s}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-system);font-size:var(--font-size-system);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:default;-webkit-user-select:none;user-select:none;background:var(--gnome-dark);color:var(--gnome-text)}.desktop{position:fixed;top:28px;left:0;right:0;bottom:0;background:var(--desktop-bg);background-image:var(--desktop-pattern);z-index:var(--z-desktop);overflow:hidden;animation:desktopFadeIn .8s ease-out,gradientShift 20s ease-in-out infinite}@keyframes desktopFadeIn{0%{opacity:0;transform:scale(1.02);filter:blur(10px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.desktop:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(255,0,255,.1) 0%,transparent 25%),radial-gradient(circle at 80% 20%,rgba(0,255,255,.1) 0%,transparent 25%),radial-gradient(circle at 40% 40%,rgba(138,43,226,.08) 0%,transparent 30%);animation:particleFloat 15s ease-in-out infinite;pointer-events:none}@keyframes particleFloat{0%,to{transform:translate(0) scale(1);opacity:.6}33%{transform:translate(30px,-30px) scale(1.1);opacity:.8}66%{transform:translate(-20px,20px) scale(.9);opacity:.7}}.desktop-icon{position:absolute;width:80px;text-align:center;cursor:pointer;padding:8px;border-radius:12px;transition:all .2s cubic-bezier(.4,0,.2,1)}.desktop-icon:hover{background-color:#3584e426;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateY(-2px)}.desktop-icon.selected{background-color:#3584e44d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 2px #3584e480}.desktop-icon-image{width:48px;height:48px;margin:0 auto 8px;font-size:48px;line-height:48px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.desktop-icon-label{font-size:12px;color:var(--gnome-text);text-shadow:0 1px 3px rgba(0,0,0,.8);word-wrap:break-word;line-height:1.3;font-weight:500}.window{position:absolute;display:flex;flex-direction:column;background-color:var(--window-content-bg);border:1px solid var(--window-border);border-radius:12px;box-shadow:var(--window-shadow);min-width:200px;min-height:100px;overflow:hidden;animation:windowSlideIn .2s cubic-bezier(.4,0,.2,1)}@keyframes windowSlideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.window.active .window-title{background:var(--window-title-active)}.window-title{height:40px;background:var(--window-title-inactive);display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:move;position:relative;border-bottom:1px solid var(--window-border-light)}.window-title-text{flex:1;text-align:center;font-size:var(--font-size-title);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 20px;color:var(--gnome-text)}.window-controls{display:flex;gap:8px;position:absolute;right:12px}.window-button{width:24px;height:24px;border-radius:50%;background:var(--gnome-card);border:1px solid var(--gnome-border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:var(--gnome-text-secondary);transition:all .15s ease}.window-button:hover{background:var(--gnome-hover);transform:scale(1.1)}.window-button:active{background:var(--gnome-active);transform:scale(.95)}.window-close:hover{background:#e74c3c;color:#fff}.window-zoom{position:absolute;right:44px}.window-zoom:hover{background:var(--gnome-blue);color:#fff}.window-content{flex:1;background:var(--window-content-bg);overflow:auto;position:relative;color:var(--gnome-text)}.window-resize-handle{position:absolute;bottom:2px;right:2px;width:16px;height:16px;cursor:nwse-resize;opacity:.3;transition:opacity .2s}.window-resize-handle:hover{opacity:.6}.window.shaded .window-content,.window.shaded .window-resize-handle{display:none}.menubar{position:fixed;top:0;left:0;right:0;height:28px;background:var(--gnome-panel);border-bottom:1px solid var(--gnome-dark);display:flex;align-items:center;z-index:var(--z-menubar);font-size:var(--font-size-menu);box-shadow:0 2px 8px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menubar-left{display:flex;align-items:stretch;flex:1}.menubar-right{display:flex;align-items:center;gap:8px;padding:0 8px}.menu-item{padding:0 16px;height:28px;display:flex;align-items:center;cursor:pointer;position:relative;color:var(--gnome-text);border-radius:6px;margin:0 2px;transition:all .15s ease;font-weight:500}.menu-item:hover,.menu-item.active{background:var(--gnome-hover)}.menu-logo{font-size:16px;padding:0 12px;font-weight:600;color:var(--gnome-text)}.menu-dropdown{position:absolute;top:100%;left:0;min-width:220px;background:var(--gnome-panel);border:1px solid var(--gnome-border);border-radius:8px;box-shadow:0 4px 16px #0009;z-index:var(--z-menu);margin-top:4px;overflow:hidden;animation:menuSlideIn .15s ease-out}@keyframes menuSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.menu-dropdown-item{padding:10px 20px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;position:relative;color:var(--gnome-text);transition:background .1s ease}.menu-dropdown-item:hover:not(.disabled){background:var(--gnome-blue)}.menu-dropdown-item.disabled{color:var(--gnome-text-disabled);cursor:default;opacity:.5}.menu-dropdown-item.separator{height:1px;background:var(--gnome-border);margin:6px 12px;padding:0;cursor:default}.menu-dropdown-item.separator:hover{background:var(--gnome-border)}.menu-accelerator{font-size:var(--font-size-small);margin-left:20px;opacity:.7;color:var(--gnome-text-secondary)}.menu-checkmark{position:absolute;left:6px}.control-strip{position:fixed;bottom:0;left:0;right:0;height:30px;background:var(--platinum-gray);border-top:1px solid var(--window-border);display:flex;align-items:center;padding:0 8px;gap:12px;z-index:var(--z-control-strip);transition:transform var(--transition-normal)}.control-strip.collapsed{transform:translateY(100%)}.control-strip-toggle{width:16px;height:16px;border:1px solid var(--platinum-black);background:var(--button-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px}.control-strip-item{display:flex;align-items:center;gap:4px;cursor:pointer;padding:2px 6px}.control-strip-item:hover{background:var(--platinum-gray-light)}.control-strip-icon{font-size:16px;line-height:1}.control-strip-label{font-size:11px}.button{padding:4px 16px;background:var(--button-bg);border:none;border-top:1px solid var(--button-border-top);border-left:1px solid var(--button-border-top);border-right:1px solid var(--button-border-bottom);border-bottom:1px solid var(--button-border-bottom);cursor:pointer;font-family:var(--font-system);font-size:var(--font-size-system);min-width:70px}.button:hover{background:var(--platinum-gray-light)}.button:active,.button.pressed{background:var(--button-pressed-bg);border-top:1px solid var(--button-border-bottom);border-left:1px solid var(--button-border-bottom);border-right:1px solid var(--button-border-top);border-bottom:1px solid var(--button-border-top)}.button.default{border:2px solid var(--platinum-black);font-weight:700}.button:disabled{color:var(--menu-text-disabled);cursor:default}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal)}.alert-dialog{background:var(--platinum-gray);border:2px solid var(--window-border);box-shadow:4px 4px 8px #00000080;min-width:300px;max-width:500px;padding:16px}.alert-content{display:flex;gap:16px;margin-bottom:16px}.alert-icon{font-size:32px;line-height:1}.alert-text{flex:1}.alert-title{font-weight:700;margin-bottom:8px}.alert-message{line-height:1.4}.alert-buttons{display:flex;gap:8px;justify-content:flex-end}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--scroll-track)}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:6px;border:2px solid var(--scroll-track)}::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}.activities-button{padding:0 20px;height:28px;background:transparent;border:none;color:var(--gnome-text);font-family:var(--font-system);font-size:var(--font-size-menu);font-weight:600;cursor:pointer;border-radius:6px;margin:0 4px;transition:all .15s ease}.activities-button:hover{background:var(--gnome-hover)}.activities-button:active{background:var(--gnome-active)}.app-launcher-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;animation:overlayFadeIn .2s ease-out}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.app-launcher{background:var(--gnome-panel);border-radius:16px;box-shadow:0 16px 48px #000c;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;animation:launcherSlideIn .3s cubic-bezier(.4,0,.2,1)}@keyframes launcherSlideIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.app-launcher-header{padding:24px;border-bottom:1px solid var(--gnome-border)}.app-launcher-search{width:100%;padding:12px 16px;background:var(--gnome-card);border:2px solid var(--gnome-border);border-radius:8px;color:var(--gnome-text);font-family:var(--font-system);font-size:var(--font-size-large);outline:none;transition:border-color .2s ease}.app-launcher-search:focus{border-color:var(--gnome-blue);box-shadow:0 0 0 3px #3584e433}.app-launcher-search::placeholder{color:var(--gnome-text-disabled)}.app-launcher-content{flex:1;overflow-y:auto;padding:24px}.app-launcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px}.app-launcher-item{display:flex;flex-direction:column;align-items:center;padding:20px;border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);background:var(--gnome-card);border:2px solid transparent}.app-launcher-item:hover{background:var(--gnome-hover);border-color:var(--gnome-blue);transform:translateY(-4px);box-shadow:0 8px 20px #3584e44d}.app-launcher-item:active{transform:translateY(-2px)}.app-launcher-icon{font-size:64px;margin-bottom:12px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}.app-launcher-name{font-size:var(--font-size-system);font-weight:600;color:var(--gnome-text);text-align:center;margin-bottom:4px}.app-launcher-description{font-size:var(--font-size-small);color:var(--gnome-text-secondary);text-align:center;line-height:1.3}.app-launcher-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--gnome-text-secondary)}.app-launcher-footer{padding:16px 24px;border-top:1px solid var(--gnome-border);display:flex;justify-content:flex-end}.app-launcher-close{padding:10px 24px;background:var(--gnome-blue);border:none;border-radius:6px;color:#fff;font-family:var(--font-system);font-size:var(--font-size-system);font-weight:600;cursor:pointer;transition:all .15s ease}.app-launcher-close:hover{background:var(--gnome-blue-hover);transform:translateY(-1px);box-shadow:0 4px 12px #3584e466}.app-launcher-close:active{transform:translateY(0)}.dragging{opacity:.7;cursor:move!important}.no-select{-webkit-user-select:none;user-select:none}.scanlines:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 1px,rgba(0,0,0,.1) 1px,rgba(0,0,0,.1) 2px);pointer-events:none;z-index:20000}.fps-counter{position:fixed;top:24px;right:8px;background:#000000b3;color:var(--platinum-white);padding:4px 8px;font-size:11px;font-family:monospace;z-index:19000;border-radius:2px}*:focus-visible{outline:1px dotted var(--platinum-black);outline-offset:2px}button:focus-visible{outline:2px solid var(--platinum-blue);outline-offset:1px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes glow{0%,to{box-shadow:0 0 5px #0066ff80}50%{box-shadow:0 0 20px #06fc}}.tok-comment{color:#6a9955;font-style:italic}.tok-string{color:#ce9178}.tok-number{color:#b5cea8}.tok-keyword{color:#569cd6;font-weight:500}
|