Skip to content

Commit 2254ea6

Browse files
jbamptonjbampton
committed
Fix console position to top
1 parent 12e7e81 commit 2254ea6

File tree

2 files changed

+90
-47
lines changed

2 files changed

+90
-47
lines changed

‎src/assets/css/style.css‎

Lines changed: 72 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,31 @@
22
* 1. THEME VARIABLES & CORE RESET
33
*/
44
:root {
5-
--bg-page: #f8fafc;
5+
/* LIGHT: "Crystal Blue" - Clean, high-contrast, airy */
6+
--bg-page: #f0f4f8;
67
--bg-card: #ffffff;
7-
--bg-footer: #f1f5f9;
8-
--text-main: #0f172a;
9-
--text-muted: #64748b;
10-
--border-color: #e2e8f0;
8+
--bg-footer: #e2e8f0;
9+
--text-main: #1a202c;
10+
--text-muted: #4a5568;
11+
--border-color: #cbd5e0;
1112
--accent: #2563eb;
12-
--accent-light: #dbeafe;
13-
--accent-rgb: 37, 99, 235;
14-
--danger: #ef4444;
13+
--accent-light: #eff6ff;
14+
--danger: #dc2626;
15+
--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1516
}
1617

1718
.dark {
18-
--bg-page: #020617;
19+
/* DARK: "Deep Space" - Deep navy/black with glowing accents */
20+
--bg-page: #05070a;
1921
--bg-card: #0f172a;
20-
--bg-footer: #1e293b50;
21-
--text-main: #f8fafc;
22+
--bg-footer: #020617;
23+
--text-main: #f1f5f9;
2224
--text-muted: #94a3b8;
2325
--border-color: #1e293b;
24-
--accent: #60a5fa;
25-
--accent-light: rgba(96, 165, 250, 0.15);
26+
--accent: #38bdf8; /* Brighter Cyan for Dark Mode */
27+
--accent-light: rgba(56, 189, 248, 0.1);
28+
--danger: #f87171;
29+
--card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
2630
}
2731

2832
html, body {
@@ -37,6 +41,13 @@ html, body {
3741
/**
3842
* 2. USER CARDS & LEGIBILITY
3943
*/
44+
.user-card {
45+
background-color: var(--bg-card);
46+
border: 1px solid var(--border-color);
47+
box-shadow: var(--card-shadow);
48+
transition: transform 0.2s ease, border-color 0.2s ease;
49+
}
50+
4051
.user-card h2 {
4152
color: #1e40af !important;
4253
font-weight: 800;
@@ -112,49 +123,73 @@ html, body {
112123
}
113124

114125
/**
115-
* 4. DEVELOPER TOOLS & CONSOLE LOCK
126+
* 4. DEVELOPER TOOLS - PINNED TO TOP
116127
*/
117128
#dev-tools {
118-
backdrop-filter: blur(20px);
119-
background-color: rgba(15, 23, 42, 0.95);
120-
border: 2px solid var(--accent);
121-
padding: 1.5rem;
122-
border-radius: 1rem;
123-
z-index: 99999 !important;
124129
position: fixed !important;
130+
top: 1rem;
131+
right: 1rem;
132+
width: 280px;
133+
max-height: 80vh;
134+
overflow-y: auto;
135+
136+
/* Glassmorphism Effect */
137+
background: rgba(15, 23, 42, 0.85);
138+
backdrop-filter: blur(12px) saturate(180%);
139+
-webkit-backdrop-filter: blur(12px) saturate(180%);
140+
141+
border: 1px solid rgba(255, 255, 255, 0.1);
142+
border-left: 4px solid var(--accent); /* Accent strip */
143+
padding: 1.25rem;
144+
border-radius: 12px;
145+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
146+
147+
z-index: 99999;
148+
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
125149
}
126150

127-
/* NUCLEAR LOCK: Keeps console visible during Self Destruct & Shake */
151+
/* NUCLEAR LOCK: Override during Self Destruct */
128152
html body #dev-tools[data-lock="true"] {
129153
display: block !important;
130154
visibility: visible !important;
131155
opacity: 1 !important;
132-
position: fixed !important;
133-
top: 20px !important;
134-
right: 20px !important;
135-
z-index: 2147483647 !important;
156+
top: 1rem !important;
157+
right: 1rem !important;
158+
border-left-color: var(--danger) !important;
159+
box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
160+
animation: none !important; /* Prevent it from shaking with the body */
136161
transform: none !important;
137-
transition: none !important;
138-
pointer-events: auto !important;
139-
border-color: var(--danger);
140-
box-shadow: 0 0 50px rgba(239, 68, 68, 0.4);
141162
}
142163

164+
/* Custom Scrollbar for the console */
165+
#dev-tools::-webkit-scrollbar {
166+
width: 4px;
167+
}
168+
#dev-tools::-webkit-scrollbar-thumb {
169+
background: var(--accent);
170+
border-radius: 10px;
171+
}
143172
#dev-tools button {
144-
font-family: 'Courier New', monospace;
145-
background: rgba(0, 0, 0, 0.4);
146-
color: white;
173+
font-family: 'JetBrains Mono', 'Fira Code', monospace;
174+
font-size: 0.75rem;
175+
background: rgba(255, 255, 255, 0.03);
176+
color: #e2e8f0;
147177
display: flex;
148178
justify-content: space-between;
179+
align-items: center;
149180
width: 100%;
150-
padding: 0.6rem 0.8rem;
181+
padding: 0.5rem 0.75rem;
151182
margin-bottom: 0.5rem;
152-
border-radius: 0.5rem;
153-
border: 1px solid rgba(255, 255, 255, 0.1);
154-
transition: 0.2s;
155-
cursor: pointer;
183+
border-radius: 6px;
184+
border: 1px solid rgba(255, 255, 255, 0.05);
185+
transition: all 0.2s ease;
156186
}
157187

188+
#dev-tools button:hover {
189+
background: rgba(255, 255, 255, 0.1);
190+
border-color: var(--accent);
191+
transform: translateX(-4px); /* Slide slightly left toward the center */
192+
}
158193
/* Console Neon Overrides */
159194
#dev-tools button[onclick*="matrix"] { color: #00ff41 !important; border-color: rgba(0, 255, 65, 0.4) !important; }
160195
#dev-tools button[onclick*="konami"] { color: #ffcc00 !important; border-color: rgba(255, 204, 0, 0.4) !important; }

‎src/assets/js/script.js‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -174,30 +174,38 @@ function applyTheme(theme) {
174174
const heart = document.getElementById('footer-heart');
175175
localStorage.setItem('theme', theme);
176176

177+
// Reset classes
177178
html.classList.remove('dark');
178-
const props = ['--bg-page', '--bg-card', '--bg-footer', '--text-main', '--text-muted', '--border-color', '--accent'];
179+
const props = ['--bg-page', '--bg-card', '--bg-footer', '--text-main', '--text-muted', '--border-color', '--accent', '--accent-light'];
179180
props.forEach(p => html.style.removeProperty(p));
180181

181182
if (theme === 'dark') {
182183
html.classList.add('dark');
183184
if (heart) heart.innerText = '💜';
184185
}
185186
else if (theme === 'random') {
187+
// Generate a random Hue (0-360)
186188
const h = Math.floor(Math.random() * 360);
187-
html.style.setProperty('--bg-page', `hsl(${h}, 40%, 8%)`);
188-
html.style.setProperty('--bg-card', `hsl(${h}, 35%, 12%)`);
189-
html.style.setProperty('--bg-footer', `hsl(${h}, 35%, 10%)`);
189+
190+
// VIBRANT NEON LOGIC: Keep saturation high and lightness balanced
191+
html.style.setProperty('--bg-page', `hsl(${h}, 45%, 7%)`); // Very Dark
192+
html.style.setProperty('--bg-card', `hsl(${h}, 35%, 12%)`); // Slightly lighter
193+
html.style.setProperty('--bg-footer', `hsl(${h}, 40%, 5%)`); // Deepest
194+
html.style.setProperty('--text-main', `hsl(${h}, 20%, 95%)`); // Near White
195+
html.style.setProperty('--text-muted', `hsl(${h}, 15%, 70%)`); // Softened
196+
html.style.setProperty('--accent', `hsl(${h}, 90%, 60%)`); // Vivid Pop
197+
html.style.setProperty('--accent-light', `hsla(${h}, 90%, 60%, 0.15)`);
190198
html.style.setProperty('--border-color', `hsl(${h}, 30%, 20%)`);
191-
html.style.setProperty('--text-main', `hsl(${h}, 20%, 95%)`);
192-
html.style.setProperty('--text-muted', `hsl(${h}, 15%, 60%)`);
193-
html.style.setProperty('--accent', `hsl(${(h + 150) % 360}, 80%, 65%)`);
194199

195200
if (heart) {
196-
const hearts = ['💚', '💙', '💛', '🧡', '🤍', '🤎', '🖤', '💎', '🌈', '✨'];
197-
heart.innerText = hearts[Math.floor(Math.random() * hearts.length)];
201+
const symbols = ['💎', '🌈', '✨', '🔥', '🌀', '🧬'];
202+
heart.innerText = symbols[Math.floor(Math.random() * symbols.length)];
198203
}
199204
}
200-
else if (heart) { heart.innerText = '❤️'; }
205+
else {
206+
if (heart) heart.innerText = '❤️';
207+
}
208+
201209
updateThemeIcon(theme);
202210
}
203211

0 commit comments

Comments
 (0)