-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcode.html
More file actions
216 lines (215 loc) · 11.3 KB
/
Copy pathcode.html
File metadata and controls
216 lines (215 loc) · 11.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"surface-bright": "#262c36",
"inverse-primary": "#006f16",
"surface-variant": "#20262f",
"on-primary": "#006413",
"on-secondary-fixed": "#003a42",
"primary-container": "#00fc40",
"outline-variant": "#44484f",
"secondary-fixed-dim": "#00d7f0",
"surface-container": "#151a21",
"tertiary-container": "#7631fd",
"surface-container-high": "#1b2028",
"on-tertiary-fixed": "#1e0053",
"primary-fixed-dim": "#00ec3b",
"surface-container-lowest": "#000000",
"on-primary-container": "#005a10",
"on-surface": "#f1f3fc",
"on-secondary-container": "#e8fbff",
"tertiary": "#aa8aff",
"on-error-container": "#ffd2c8",
"surface-container-highest": "#20262f",
"secondary": "#00e3fd",
"secondary-fixed": "#26e6ff",
"surface": "#0a0e14",
"error-container": "#b92902",
"on-tertiary-fixed-variant": "#4500a9",
"secondary-dim": "#00d4ec",
"on-secondary": "#004d57",
"on-background": "#f1f3fc",
"surface-dim": "#0a0e14",
"tertiary-dim": "#844eff",
"on-primary-fixed": "#00440a",
"on-surface-variant": "#a8abb3",
"inverse-surface": "#f8f9ff",
"primary-fixed": "#00fc40",
"tertiary-fixed": "#bba2ff",
"secondary-container": "#006875",
"tertiary-fixed-dim": "#af91ff",
"on-error": "#450900",
"error-dim": "#d53d18",
"error": "#ff7351",
"inverse-on-surface": "#51555c",
"primary": "#9cff93",
"on-tertiary": "#270068",
"primary-dim": "#00ec3b",
"on-secondary-fixed-variant": "#005964",
"background": "#0a0e14",
"on-tertiary-container": "#ffffff",
"surface-container-low": "#0f141a",
"on-primary-fixed-variant": "#006513",
"outline": "#72757d",
"surface-tint": "#9cff93"
},
fontFamily: {
"headline": ["Space Grotesk"],
"body": ["Manrope"],
"label": ["Space Grotesk"]
},
borderRadius: {"DEFAULT": "0px", "lg": "0px", "xl": "0px", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.clip-hud {
clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
}
.clip-button {
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.scanline {
background: linear-gradient(to bottom, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.drop-shadow-glow {
filter: drop-shadow(0 0 8px rgba(156, 255, 147, 0.5));
}
.glass-panel {
background: rgba(21, 26, 33, 0.6);
backdrop-filter: blur(20px);
}
</style>
</head>
<body class="bg-surface text-on-surface font-body min-h-screen selection:bg-primary selection:text-on-primary overflow-hidden">
<!-- Background Elements -->
<div class="fixed inset-0 z-0 overflow-hidden">
<!-- Geometric Orbs -->
<div class="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-tertiary rounded-full mix-blend-screen filter blur-[150px] opacity-20"></div>
<div class="absolute bottom-[-10%] right-[-5%] w-[600px] h-[600px] bg-secondary rounded-full mix-blend-screen filter blur-[150px] opacity-10"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-surface-container-highest rounded-full filter blur-[120px] opacity-30"></div>
<!-- Scanline Overlay -->
<div class="absolute inset-0 scanline z-10"></div>
<!-- Grid Pattern -->
<div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, #9cff93 1px, transparent 1px); background-size: 40px 40px;"></div>
</div>
<!-- Main Shell Implementation -->
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 w-full bg-[#0a0e14]/60 backdrop-blur-xl border-b border-[#9cff93]/10 shadow-[0_4px_30px_rgba(0,0,0,0.1)]">
<div class="flex items-center gap-2">
<span class="text-xl font-headline font-bold tracking-widest text-[#9cff93] drop-shadow-[0_0_8px_rgba(156,255,147,0.5)] uppercase">KINETIC_OS</span>
</div>
<div class="flex items-center gap-6">
<span class="material-symbols-outlined text-[#a8abb3] hover:text-[#9cff93] transition-colors duration-300 cursor-pointer">settings_input_antenna</span>
<span class="material-symbols-outlined text-[#a8abb3] hover:text-[#9cff93] transition-colors duration-300 cursor-pointer">security</span>
</div>
</header>
<!-- Auth Content -->
<main class="relative z-20 flex flex-col items-center justify-center min-h-screen px-4 pt-16">
<!-- Tactical Telemetry Clusters (Decoration) -->
<div class="hidden lg:block absolute left-12 top-1/3 space-y-4 opacity-40">
<div class="font-label text-[10px] tracking-widest text-primary uppercase">
<p>SYS_STABLE: 0.999</p>
<p>LINK_STATUS: ENCRYPTED</p>
<p>LATENCY: 12ms</p>
</div>
<div class="w-32 h-[1px] bg-primary/20"></div>
<div class="font-label text-[10px] text-on-surface-variant">
<p>0x44F2... LOGIN_REQ</p>
<p>0x91A0... BUFFER_OK</p>
</div>
</div>
<!-- Auth Card -->
<div class="w-full max-auto max-w-md relative">
<!-- Ghost Border Decoration -->
<div class="absolute -inset-[1px] bg-gradient-to-tr from-primary/40 via-transparent to-secondary/40 clip-hud opacity-50"></div>
<div class="glass-panel p-8 md:p-10 clip-hud relative border border-outline-variant/10">
<!-- Card Header -->
<div class="mb-10 text-center md:text-left">
<h1 class="font-headline text-3xl font-bold tracking-tighter text-primary uppercase drop-shadow-glow">OPERATOR_AUTH</h1>
<p class="font-body text-sm text-on-surface-variant mt-2 uppercase tracking-widest">Initialization sequence required for terminal access</p>
</div>
<!-- Form -->
<form class="space-y-6">
<!-- Email Field -->
<div class="space-y-2">
<label class="font-label text-[11px] uppercase tracking-widest text-secondary flex items-center gap-2">
<span class="w-1.5 h-1.5 bg-secondary"></span>
Email Address
</label>
<div class="relative group">
<input class="w-full bg-surface-container-low border-0 border-b border-outline-variant focus:border-primary focus:ring-0 text-on-surface placeholder:text-on-surface-variant/30 font-label tracking-tight py-4 px-0 transition-all duration-300 group-focus-within:bg-surface-container-high" placeholder="USER@KINETIC.NET" type="email"/>
<div class="absolute bottom-0 left-0 h-[2px] w-0 bg-primary transition-all duration-500 group-focus-within:w-full"></div>
</div>
</div>
<!-- Password Field -->
<div class="space-y-2">
<label class="font-label text-[11px] uppercase tracking-widest text-secondary flex items-center gap-2">
<span class="w-1.5 h-1.5 bg-secondary"></span>
Credential Token
</label>
<div class="relative group">
<input class="w-full bg-surface-container-low border-0 border-b border-outline-variant focus:border-primary focus:ring-0 text-on-surface placeholder:text-on-surface-variant/30 font-label tracking-tight py-4 px-0 transition-all duration-300 group-focus-within:bg-surface-container-high" placeholder="••••••••••••" type="password"/>
<div class="absolute bottom-0 left-0 h-[2px] w-0 bg-primary transition-all duration-500 group-focus-within:w-full"></div>
</div>
</div>
<!-- Actions -->
<div class="flex items-center justify-between pt-2">
<a class="font-label text-[10px] text-on-surface-variant hover:text-primary transition-colors tracking-widest uppercase cursor-pointer" href="#">_Forgot_Password?</a>
<div class="h-[1px] w-8 bg-outline-variant"></div>
</div>
<!-- Submit Button -->
<div class="pt-4">
<button class="w-full h-14 bg-gradient-to-r from-primary to-primary-container text-on-primary font-headline font-bold uppercase tracking-widest clip-button flex items-center justify-center gap-3 group hover:shadow-[0_0_20px_rgba(156,255,147,0.4)] transition-all duration-300 active:scale-[0.98]">
SIGN_IN
<span class="material-symbols-outlined text-xl group-hover:translate-x-1 transition-transform">arrow_forward</span>
</button>
</div>
</form>
<!-- Create Account Link -->
<div class="mt-8 text-center">
<p class="font-body text-xs text-on-surface-variant uppercase tracking-wide">
New Operator?
<a class="text-secondary font-headline font-semibold hover:text-secondary-fixed transition-colors ml-2 cursor-pointer" href="#">CREATE_PROFILE</a>
</p>
</div>
</div>
</div>
<!-- System Message Box (UI Detail) -->
<div class="mt-8 max-w-md w-full px-6 py-3 border-l-2 border-primary bg-primary/5">
<p class="font-label text-[10px] text-primary/80 leading-relaxed">
<span class="font-bold">[SYSTEM_NOTICE]</span>
All terminal activities are logged under Protocol 88-Delta. Unauthorized access attempts will trigger automatic containment.
</p>
</div>
</main>
<!-- Footer Cluster -->
<footer class="fixed bottom-0 w-full z-40 flex justify-between items-center px-8 py-4 w-full bg-transparent font-mono text-[10px] uppercase tracking-[0.2em] text-[#00FF41]">
<div class="flex items-center gap-4">
<span class="text-[#a8abb3]/40">TERMINAL_LOG</span>
<span class="text-[#a8abb3]/40">ENCRYPTION_PROTOCOL</span>
</div>
<div class="flex items-center gap-4">
<span class="text-[#9cff93]">SYSTEM_AUTH_v4.0.2 // ENCRYPTED_CONNECTION</span>
<div class="w-2 h-2 bg-primary animate-pulse rounded-full"></div>
</div>
</footer>
<!-- Image for Visual Flourish - Abstract Tech -->
<img class="fixed inset-0 w-full h-full object-cover opacity-10 mix-blend-color-dodge pointer-events-none z-0" data-alt="Abstract dark digital matrix code pattern with neon green highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCDRJfC0XmyKZKFGJAdarlfNT1BVbhNq6bPGKMRDZRYXZa6x3maRWlNAbuGAxnXghMTHn8hG777FfLkCZ6EZAzC2tPFitdfIfoF0TX0MfpE34h3a72gXo6dAQOEACbnSO9ow47IlZqWg2ITkA1UFAgNfHhMKK0u3Uq8IGucuir_1Os8MnbBF6WIwcu7_HCsoOaygUI9TZUuDN5qeVspIoj0AOfg0tTLqwrYy5wvZ95o43i9-pil8z3jICMIDA4b3v9g7Gw4VGS5k7M"/>
</body></html>