Skip to content

Commit 54fe94e

Browse files
SimpNick6703SimpNick6703
committed
Page Redesign
1 parent 7280728 commit 54fe94e

2 files changed

Lines changed: 118 additions & 43 deletions

File tree

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,10 @@ <h1 class="text-xl font-bold text-white tracking-wide font-mono">Video-Compressi
7575
<div class="inline-block px-3 py-1 mb-4 text-xs font-mono font-bold tracking-wider text-cyan-400 border border-cyan-400/50 rounded-full uppercase bg-cyan-900/20 shadow-[0_0_10px_rgba(6,182,212,0.2)]">
7676
Zero-Config Architecture
7777
</div>
78-
<h2 class="text-4xl md:text-7xl font-extrabold mb-6 tracking-tight neon-text bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 via-violet-400 to-fuchsia-400">
78+
<h2 class="fluid-title font-extrabold mb-6 tracking-tight neon-text bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 via-violet-400 to-fuchsia-400">
7979
Targeted Compression
8080
</h2>
81-
<p class="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed">
81+
<p class="fluid-subtitle text-slate-400 max-w-2xl mx-auto leading-relaxed">
8282
A standalone pipeline targeting strict platform upload limits. It intelligently probes, calculates optimal Bits-Per-Pixel, splits the file, and runs multithreaded hardware encoding.
8383
</p>
8484

‎docs/styles.css‎

Lines changed: 116 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,88 @@
11
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap');
22

33
:root {
4-
/* Default Dark Mode Variables */
5-
--bg-color: #0f172a;
6-
--text-main: #f8fafc;
7-
--glass-bg: rgba(30, 41, 59, 0.7);
8-
--glass-border: rgba(255, 255, 255, 0.1);
9-
--scroll-track: #1e293b;
10-
--scroll-thumb: #475569;
11-
}
12-
13-
/* --- LIGHT MODE CONFIGURATION --- */
4+
/* Premium Dark Mode Variables */
5+
--bg-color: #0b1120;
6+
--text-main: #e2e8f0;
7+
--glass-bg: rgba(15, 23, 42, 0.65);
8+
--glass-border: rgba(255, 255, 255, 0.06);
9+
--scroll-track: #0f172a;
10+
--scroll-thumb: #334155;
11+
--ambient-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
12+
13+
/* Theme Accents */
14+
--accent-primary: #06b6d4; /* cyan-500 */
15+
--accent-primary-hover: #0891b2; /* cyan-600 */
16+
--accent-secondary: #8b5cf6; /* violet-500 */
17+
--accent-glow: rgba(6, 182, 212, 0.5);
18+
--nav-focus: #22d3ee;
19+
}
20+
21+
/* --- LIGHT MODE CONFIGURATION (Alabaster Ether) --- */
1422
body.light-mode {
15-
/* Solarized Yellow to Light Cyan Gradient */
16-
background: linear-gradient(135deg, #FDF6E3 0%, #BEF0FF 100%) !important;
17-
--bg-color: #FDF6E3;
23+
/* Premium Soft Pastel Gradient */
24+
background: linear-gradient(135deg, #f0f9ff 0%, #fdf4ff 50%, #fffbeb 100%) !important;
25+
--bg-color: #f8f9fa;
1826
--text-main: #334155;
19-
--glass-bg: rgba(255, 255, 255, 0.65);
20-
--glass-border: rgba(148, 163, 184, 0.4);
27+
--glass-bg: rgba(248, 250, 252, 0.75);
28+
--glass-border: rgba(203, 213, 225, 0.5);
2129
--scroll-track: #f1f5f9;
22-
--scroll-thumb: #cbd5e1;
30+
--scroll-thumb: #94a3b8;
31+
--ambient-shadow: 0 20px 40px rgba(84, 96, 108, 0.08); /* Soft editorial shadow */
32+
33+
/* Light Mode Accents */
34+
--accent-primary: #0f766e; /* teal-700 */
35+
--accent-primary-hover: #115e59; /* teal-800 */
36+
--accent-secondary: #6d28d9; /* violet-700 */
37+
--accent-glow: transparent;
38+
--nav-focus: #0f766e;
2339
}
2440

2541
/* TAILWIND UTILITY OVERRIDES FOR LIGHT MODE */
26-
/* Forces standard Slate elements to adapt to the light theme */
42+
/* Eliminating #ffffff (Pure White) entirely */
2743
body.light-mode .text-white { color: #1e293b !important; }
2844
body.light-mode .text-slate-300 { color: #334155 !important; }
29-
body.light-mode .text-slate-400 { color: #64748b !important; }
30-
body.light-mode .text-slate-500 { color: #94a3b8 !important; }
45+
body.light-mode .text-slate-400 { color: #475569 !important; }
46+
body.light-mode .text-slate-500 { color: #64748b !important; }
47+
48+
/* Adjusting Accent text colors in light mode for contrast */
49+
body.light-mode .text-cyan-400 { color: #0891b2 !important; }
50+
body.light-mode .text-emerald-400 { color: #059669 !important; }
51+
body.light-mode .text-rose-400 { color: #e11d48 !important; }
52+
body.light-mode .text-violet-400 { color: #6d28d9 !important; }
53+
body.light-mode .text-fuchsia-400 { color: #c026d3 !important; }
3154

32-
body.light-mode .bg-slate-900 { background-color: #ffffff !important; border-color: #e2e8f0 !important; }
33-
body.light-mode .bg-slate-900\/40 { background-color: rgba(255,255,255,0.4) !important; }
34-
body.light-mode .bg-slate-900\/50 { background-color: #f8fafc !important; border-color: #e2e8f0 !important; }
35-
body.light-mode .bg-slate-900\/80 { background-color: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
55+
/* Overriding tailwind text gradients for light mode */
56+
body.light-mode .from-cyan-400 { --tw-gradient-from: #0891b2 var(--tw-gradient-from-position); --tw-gradient-to: rgba(8, 145, 178, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
57+
body.light-mode .via-violet-400 { --tw-gradient-to: rgba(109, 40, 217, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #6d28d9 var(--tw-gradient-via-position), var(--tw-gradient-to); }
58+
body.light-mode .to-fuchsia-400 { --tw-gradient-to: #c026d3 var(--tw-gradient-to-position); }
3659

37-
body.light-mode .bg-slate-800 { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }
38-
body.light-mode .bg-slate-800\/50 { background-color: #f1f5f9 !important; }
60+
body.light-mode .bg-slate-900 { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }
61+
body.light-mode .bg-slate-900\/40 { background-color: rgba(241, 245, 249, 0.6) !important; }
62+
body.light-mode .bg-slate-900\/50 { background-color: #e2e8f0 !important; border-color: #cbd5e1 !important; }
63+
body.light-mode .bg-slate-900\/80 { background-color: #fdf9ec !important; box-shadow: var(--ambient-shadow); }
3964

65+
body.light-mode .bg-slate-800 { background-color: #e2e8f0 !important; border-color: #cbd5e1 !important; }
66+
body.light-mode .bg-slate-800\/50 { background-color: #e2e8f0 !important; }
67+
68+
body.light-mode .bg-slate-700 { background-color: #cbd5e1 !important; }
69+
4070
body.light-mode .border-slate-700 { border-color: #cbd5e1 !important; }
4171
body.light-mode .border-slate-700\/50 { border-color: #cbd5e1 !important; }
4272
body.light-mode .border-slate-600 { border-color: #94a3b8 !important; }
4373

4474
/* Neon Text Taming */
45-
body.light-mode .neon-text { text-shadow: none; color: #0891b2 !important; }
46-
body.light-mode .neon-text-violet { text-shadow: none; color: #7c3aed !important; }
75+
body.light-mode .neon-text { text-shadow: none; color: var(--accent-primary) !important; }
76+
body.light-mode .neon-text-violet { text-shadow: none; color: var(--accent-secondary) !important; }
4777

4878
/* Interactive Elements - Light Mode */
49-
body.light-mode .nav-btn:hover { background-color: rgba(6, 182, 212, 0.1); border-radius: 4px; }
50-
body.light-mode .os-btn-active { background: #e0f2fe; color: #0284c7; border-color: #0284c7; }
79+
body.light-mode .nav-btn:hover { background-color: rgba(15, 118, 110, 0.08); border-radius: 4px; }
80+
body.light-mode .nav-btn:focus-visible { outline: 2px solid var(--nav-focus); outline-offset: 2px; border-radius: 4px; }
81+
body.light-mode .os-btn-active { background: #f1f5f9; color: var(--accent-primary); border-color: var(--accent-primary); box-shadow: 0 4px 6px -1px rgba(15, 118, 110, 0.15); }
5182

5283
body.light-mode .tab-active {
53-
color: #0891b2;
54-
border-bottom: 2px solid #0891b2;
84+
color: var(--accent-primary);
85+
border-bottom: 2px solid var(--accent-primary);
5586
text-shadow: none;
5687
}
5788

@@ -61,17 +92,45 @@
6192
background-color: #1e293b;
6293
color: #94a3b8;
6394
border-color: #334155;
64-
transition: all 0.3s ease;
95+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
96+
}
97+
#theme-toggle:hover {
98+
background-color: #334155;
99+
color: #f8fafc;
100+
transform: rotate(15deg) scale(1.05);
101+
}
102+
#theme-toggle:active {
103+
transform: scale(0.95);
104+
}
105+
#theme-toggle:focus-visible {
106+
outline: 2px solid #22d3ee;
107+
outline-offset: 2px;
65108
}
66109

67110
body.light-mode #theme-toggle {
68111
/* Light Mode State (Cream/Amber) */
69-
background-color: #fffbeb; /* Amber-50 */
112+
background-color: #fef3c7; /* Amber-100 */
70113
color: #d97706; /* Amber-600 */
71114
border-color: #fcd34d; /* Amber-300 */
72-
box-shadow: 0 2px 5px rgba(245, 158, 11, 0.2);
115+
box-shadow: 0 4px 10px rgba(245, 158, 11, 0.15);
116+
}
117+
body.light-mode #theme-toggle:focus-visible {
118+
outline: 2px solid #d97706;
119+
outline-offset: 2px;
73120
}
74121

122+
.nav-btn {
123+
outline: none;
124+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
125+
}
126+
.nav-btn:hover {
127+
transform: translateY(-1px);
128+
}
129+
.nav-btn:focus-visible {
130+
outline: 2px solid var(--nav-focus);
131+
outline-offset: 2px;
132+
border-radius: 4px;
133+
}
75134
/* --- GENERAL STYLES --- */
76135
body {
77136
font-family: 'Inter', sans-serif;
@@ -80,6 +139,14 @@
80139
transition: background-color 0.3s ease, color 0.3s ease;
81140
}
82141

142+
.fluid-title {
143+
font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
144+
line-height: 1.1;
145+
}
146+
.fluid-subtitle {
147+
font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
148+
}
149+
83150
.font-mono { font-family: 'JetBrains Mono', monospace; }
84151

85152
.chart-container {
@@ -102,10 +169,18 @@
102169

103170
.glass-panel {
104171
background: var(--glass-bg);
105-
backdrop-filter: blur(12px);
106-
-webkit-backdrop-filter: blur(12px);
172+
backdrop-filter: blur(16px);
173+
-webkit-backdrop-filter: blur(16px);
107174
border: 1px solid var(--glass-border);
108-
transition: background 0.3s, border-color 0.3s;
175+
box-shadow: var(--ambient-shadow);
176+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
177+
}
178+
.glass-panel:hover {
179+
transform: translateY(-2px);
180+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
181+
}
182+
body.light-mode .glass-panel:hover {
183+
box-shadow: 0 25px 50px -12px rgba(84, 96, 108, 0.15);
109184
}
110185

111186
.neon-text { text-shadow: 0 0 10px rgba(6, 182, 212, 0.5); }
@@ -135,15 +210,15 @@
135210
}
136211

137212
.tab-active {
138-
border-bottom: 2px solid #22d3ee;
139-
color: #22d3ee;
213+
border-bottom: 2px solid var(--nav-focus);
214+
color: var(--nav-focus);
140215
text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
141216
}
142217

143218
.os-btn-active {
144219
background: rgba(34, 211, 238, 0.1);
145-
border-color: #22d3ee;
146-
color: #22d3ee;
220+
border-color: var(--nav-focus);
221+
color: var(--nav-focus);
147222
box-shadow: inset 0 0 10px rgba(34, 211, 238, 0.2);
148223
}
149224

0 commit comments

Comments
 (0)