0xb00b5/0xb00b5-packmate
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deepen neon palette and fix fun decoy rendering

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

5
frontend/src/components/PatternsDropdown.vue
View File

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

15
src/main/java/ru/serega6531/packmate/security/FakeAdminResponder.java
View File

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