Deepen neon palette and fix fun decoy rendering

This commit is contained in:
dan
2025-12-06 18:33:24 +03:00
parent 9dfc70f61e
commit 5703a7230d
3 changed files with 59 additions and 53 deletions

View File

@@ -1,25 +1,25 @@
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;600&display=swap');
:root {
--bg: #040410;
--bg-2: #0a0f25;
--panel: rgba(10, 17, 40, 0.82);
--panel-strong: rgba(12, 22, 52, 0.92);
--accent: #5ef2ff;
--accent-2: #ff6ad5;
--text: #e7f5ff;
--muted: #9bb3d6;
--bg: #05030a;
--bg-2: #0a0a18;
--panel: rgba(9, 7, 18, 0.9);
--panel-strong: rgba(14, 10, 24, 0.95);
--accent: #c66bff;
--accent-2: #7a1dff;
--text: #e6e0ff;
--muted: #9b90c8;
--mono-font: 'JetBrains Mono', 'Ubuntu Mono', monospace;
--pixel-font: 'Press Start 2P', 'JetBrains Mono', monospace;
}
[data-theme="light"] {
--bg: #eaf2ff;
--bg-2: #f6f8ff;
--panel: rgba(245, 248, 255, 0.9);
--panel-strong: rgba(238, 244, 255, 0.95);
--text: #0d1b2f;
--muted: #4b5873;
--bg: #f0eaff;
--bg-2: #e6ddff;
--panel: rgba(245, 240, 255, 0.9);
--panel-strong: rgba(235, 227, 255, 0.95);
--text: #1a1233;
--muted: #5d4d80;
}
* {
@@ -28,9 +28,9 @@
body {
background:
radial-gradient(circle at 18% 24%, rgba(255, 106, 213, 0.16), transparent 25%),
radial-gradient(circle at 82% 12%, rgba(94, 242, 255, 0.2), transparent 25%),
linear-gradient(135deg, #02030b 0%, #0b1535 50%, #050811 100%);
radial-gradient(circle at 18% 24%, rgba(198, 107, 255, 0.18), transparent 25%),
radial-gradient(circle at 82% 12%, rgba(122, 29, 255, 0.12), transparent 25%),
linear-gradient(135deg, #020107 0%, #0a0820 50%, #03010b 100%);
color: var(--text);
font-family: var(--pixel-font);
letter-spacing: 0.6px;
@@ -38,7 +38,7 @@ body {
}
body[data-theme="light"] {
background: linear-gradient(135deg, #f4f7ff 0%, #dfeaff 40%, #f8fbff 100%);
background: linear-gradient(135deg, #f0eaff 0%, #e6ddff 40%, #f6f1ff 100%);
}
#app {
@@ -48,7 +48,7 @@ body[data-theme="light"] {
.bg-lines {
position: fixed;
inset: 0;
background-image: linear-gradient(rgba(94, 242, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 106, 213, 0.08) 1px, transparent 1px);
background-image: linear-gradient(rgba(122, 29, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(198, 107, 255, 0.12) 1px, transparent 1px);
background-size: 120px 120px;
pointer-events: none;
z-index: 0;
@@ -62,8 +62,8 @@ body[data-theme="light"] {
.neon-navbar {
background: var(--panel-strong) !important;
border-bottom: 1px solid rgba(94, 242, 255, 0.35);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45), 0 0 25px rgba(255, 106, 213, 0.25);
border-bottom: 1px solid rgba(122, 29, 255, 0.45);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.55), 0 0 28px rgba(122, 29, 255, 0.35);
padding: 12px 18px;
}
@@ -81,7 +81,7 @@ body[data-theme="light"] {
height: 12px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
box-shadow: 0 0 10px rgba(94, 242, 255, 0.6);
box-shadow: 0 0 10px rgba(122, 29, 255, 0.65);
}
.navbar-sub {
@@ -99,8 +99,8 @@ body[data-theme="light"] {
}
.metric-chip {
background: rgba(94, 242, 255, 0.08);
border: 1px solid rgba(94, 242, 255, 0.25);
background: rgba(122, 29, 255, 0.12);
border: 1px solid rgba(122, 29, 255, 0.28);
color: var(--text);
padding: 8px 10px;
border-radius: 10px;
@@ -109,7 +109,7 @@ body[data-theme="light"] {
column-gap: 8px;
align-items: center;
font-size: 11px;
box-shadow: 0 0 14px rgba(94, 242, 255, 0.18);
box-shadow: 0 0 14px rgba(122, 29, 255, 0.24);
}
.metric-chip .label {
@@ -133,8 +133,8 @@ body[data-theme="light"] {
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active > .nav-link,
.neon-tab:hover {
background: rgba(255, 106, 213, 0.18);
box-shadow: 0 0 14px rgba(255, 106, 213, 0.2);
background: rgba(122, 29, 255, 0.24);
box-shadow: 0 0 16px rgba(122, 29, 255, 0.28);
color: #fff !important;
}
@@ -148,8 +148,8 @@ body[data-theme="light"] {
.app-main {
background: var(--panel);
border: 1px solid rgba(94, 242, 255, 0.28);
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35), 0 0 35px rgba(94, 242, 255, 0.16);
border: 1px solid rgba(122, 29, 255, 0.35);
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45), 0 0 38px rgba(122, 29, 255, 0.18);
border-radius: 18px;
padding: 28px;
margin-bottom: 24px;
@@ -158,8 +158,8 @@ body[data-theme="light"] {
.sidebar {
background: var(--panel);
border-right: 1px solid rgba(94, 242, 255, 0.25);
box-shadow: inset -10px 0 24px rgba(0, 0, 0, 0.25);
border-right: 1px solid rgba(122, 29, 255, 0.25);
box-shadow: inset -10px 0 24px rgba(0, 0, 0, 0.35);
min-height: calc(100vh - 84px);
padding-top: 14px;
}
@@ -168,7 +168,7 @@ body[data-theme="light"] {
font-family: var(--pixel-font);
letter-spacing: 0.6px;
border-radius: 10px;
border-color: rgba(94, 242, 255, 0.35);
border-color: rgba(122, 29, 255, 0.35);
color: var(--text);
}
@@ -180,7 +180,7 @@ body[data-theme="light"] {
}
.sidebar .btn:hover {
box-shadow: 0 0 12px rgba(255, 106, 213, 0.22);
box-shadow: 0 0 12px rgba(122, 29, 255, 0.3);
}
.sidebar-sticky {
@@ -192,9 +192,9 @@ body[data-theme="light"] {
.stream-item {
margin: 8px 0;
border-radius: 14px;
border: 1px solid rgba(94, 242, 255, 0.2);
background: linear-gradient(125deg, rgba(94, 242, 255, 0.06), rgba(255, 106, 213, 0.08));
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(122, 29, 255, 0.25);
background: linear-gradient(125deg, rgba(122, 29, 255, 0.12), rgba(7, 4, 15, 0.9));
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
.stream-item .nav-link {
@@ -203,12 +203,12 @@ body[data-theme="light"] {
}
.stream-item .nav-link:hover {
background: rgba(94, 242, 255, 0.08);
background: rgba(122, 29, 255, 0.12);
}
.highlight {
border-color: rgba(255, 106, 213, 0.45);
box-shadow: 0 0 12px rgba(255, 106, 213, 0.3);
border-color: rgba(122, 29, 255, 0.55);
box-shadow: 0 0 12px rgba(122, 29, 255, 0.35);
}
.legend-bar {
@@ -223,9 +223,9 @@ body[data-theme="light"] {
.legend-pill {
padding: 8px 10px;
border-radius: 10px;
border: 1px solid rgba(94, 242, 255, 0.35);
background: rgba(94, 242, 255, 0.08);
box-shadow: 0 0 12px rgba(94, 242, 255, 0.15);
border: 1px solid rgba(122, 29, 255, 0.35);
background: rgba(122, 29, 255, 0.12);
box-shadow: 0 0 12px rgba(122, 29, 255, 0.2);
color: var(--text);
}
@@ -233,11 +233,11 @@ body[data-theme="light"] {
border-radius: 16px;
padding: 14px;
margin-bottom: 14px;
border: 1px solid rgba(94, 242, 255, 0.22);
border: 1px solid rgba(122, 29, 255, 0.28);
}
.packet-incoming {
background: radial-gradient(circle at 18% 20%, rgba(94, 242, 255, 0.12), rgba(10, 17, 40, 0.9));
background: radial-gradient(circle at 18% 20%, rgba(122, 29, 255, 0.16), rgba(9, 7, 18, 0.92));
}
.packet-outgoing {
@@ -275,7 +275,7 @@ body[data-theme="light"] {
.modal-content {
background: var(--panel);
color: var(--text);
border: 1px solid rgba(94, 242, 255, 0.3);
border: 1px solid rgba(122, 29, 255, 0.35);
box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
}
@@ -289,7 +289,7 @@ body[data-theme="light"] {
}
.dropdown-item:hover {
background: rgba(94, 242, 255, 0.15);
background: rgba(122, 29, 255, 0.18);
}
.toast {

View File

@@ -198,7 +198,10 @@
}
.patterns-dropdown > .btn {
font-size: 12px;
font-size: 10.5px;
letter-spacing: 0.15px;
min-width: 115px;
width: 115px;
}
</style>
<style>

View File

@@ -15,6 +15,7 @@ import java.util.Base64;
import java.util.Collections;
import java.util.List;
import java.util.Objects;
import java.nio.charset.StandardCharsets;
@Slf4j
@Component
@@ -63,8 +64,10 @@ public class FakeAdminResponder {
}
public String funPageHtml() {
String phrases = toJson(getFunPhrases());
String images = toJson(encodedImages);
String phrasesJson = toJson(getFunPhrases());
String imagesJson = toJson(encodedImages);
String phrasesB64 = Base64.getEncoder().encodeToString(phrasesJson.getBytes(StandardCharsets.UTF_8));
String imagesB64 = Base64.getEncoder().encodeToString(imagesJson.getBytes(StandardCharsets.UTF_8));
String template = """
<!doctype html>
<html lang="en">
@@ -190,8 +193,8 @@ public class FakeAdminResponder {
<div class="footer-note">Real packets stay locked. This is your glitch gallery.</div>
</div>
<script>
const phrases = __PHRASES__;
const images = __IMAGES__;
const phrases = JSON.parse(atob('__PHRASES_B64__'));
const images = JSON.parse(atob('__IMAGES_B64__'));
const canvas = document.getElementById('snap-canvas');
const ctx = canvas.getContext('2d');
const textEl = document.getElementById('typed-text');
@@ -271,8 +274,8 @@ public class FakeAdminResponder {
</html>
""";
return template
.replace("__PHRASES__", phrases)
.replace("__IMAGES__", images);
.replace("__PHRASES_B64__", phrasesB64)
.replace("__IMAGES_B64__", imagesB64);
}
public String fakePacketsHtml() {