Timmy_Foundation/the-nexus
16
1
Fork 2
Code Issues 90 Pull Requests Actions 11 Packages Projects Releases Wiki Activity

feat: cyberpunk UI overhaul with CRT overlays, glassmorphism, and neon bloom (#198)
Some checks failed
Deploy Nexus / deploy (push) Has been cancelled
Details

Browse Source
This commit was merged in pull request #198.
This commit is contained in:
Timmy Time
2026-03-24 04:33:41 +00:00
parent c082f32180
commit 1dc82b656f
3 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
apply_cyberpunk.py Normal file
View File

@@ -0,0 +1,66 @@
import re
import os
# 1. Update style.css
with open('style.css', 'a') as f:
f.write('''
/* === CRT / CYBERPUNK OVERLAY === */
.crt-overlay {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
background:
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
background-size: 100% 4px, 4px 100%;
animation: flicker 0.15s infinite;
box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}
@keyframes flicker {
0% { opacity: 0.95; }
50% { opacity: 1; }
100% { opacity: 0.98; }
}
.crt-overlay::after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(18, 16, 16, 0.1);
opacity: 0;
z-index: 999;
pointer-events: none;
animation: crt-pulse 4s linear infinite;
}
@keyframes crt-pulse {
0% { opacity: 0.05; }
50% { opacity: 0.15; }
100% { opacity: 0.05; }
}
''')
# 2. Update index.html
if os.path.exists('index.html'):
with open('index.html', 'r') as f:
html = f.read()
if '<div class="crt-overlay"></div>' not in html:
html = html.replace('</body>', ' <div class="crt-overlay"></div>\n</body>')
with open('index.html', 'w') as f:
f.write(html)
# 3. Update app.js UnrealBloomPass
if os.path.exists('app.js'):
with open('app.js', 'r') as f:
js = f.read()
new_js = re.sub(r'UnrealBloomPass\([^,]+,\s*0\.6\s*,', r'UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5,', js)
with open('app.js', 'w') as f:
f.write(new_js)
print("Applied Cyberpunk Overhaul!")

1
index.html
View File

@@ -52,5 +52,6 @@
<div id="loading" style="position: fixed; top: 0; left: 0; right: 0; height: 4px; background: #222; z-index: 1000;">
<div id="loading-bar" style="height: 100%; background: var(--color-accent); width: 0;"></div>
</div>
<div class="crt-overlay"></div>
</body>
</html>

41
style.css
View File

@@ -183,3 +183,44 @@ body.photo-mode #overview-indicator {
40% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* === CRT / CYBERPUNK OVERLAY === */
.crt-overlay {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
background:
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
background-size: 100% 4px, 4px 100%;
animation: flicker 0.15s infinite;
box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}
@keyframes flicker {
0% { opacity: 0.95; }
50% { opacity: 1; }
100% { opacity: 0.98; }
}
.crt-overlay::after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(18, 16, 16, 0.1);
opacity: 0;
z-index: 999;
pointer-events: none;
animation: crt-pulse 4s linear infinite;
}
@keyframes crt-pulse {
0% { opacity: 0.05; }
50% { opacity: 0.15; }
100% { opacity: 0.05; }
}