351 lines
No EOL
8.1 KiB
HTML
351 lines
No EOL
8.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>RGB // AUTH TERMINAL</title>
|
|
|
|
<style>
|
|
:root{
|
|
--bg: #050a06;
|
|
--bg2: #06140b;
|
|
--phosphor: #6dff8f;
|
|
--phosphor-dim: rgba(109,255,143,.65);
|
|
--phosphor-faint: rgba(109,255,143,.35);
|
|
--danger: #ff5a6a;
|
|
--frame: rgba(109,255,143,.22);
|
|
--glass: rgba(255,255,255,.03);
|
|
}
|
|
|
|
*{ box-sizing: border-box; }
|
|
body{
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 28px 14px;
|
|
background:
|
|
radial-gradient(1200px 800px at 50% 20%, rgba(109,255,143,.12), transparent 60%),
|
|
linear-gradient(180deg, var(--bg), var(--bg2));
|
|
color: var(--phosphor);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
/* CRT vignette + scanlines */
|
|
.crt{
|
|
width: min(980px, 100%);
|
|
position: relative;
|
|
padding: 26px;
|
|
border-radius: 18px;
|
|
border: 1px solid var(--frame);
|
|
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
|
|
box-shadow:
|
|
0 20px 70px rgba(0,0,0,.6),
|
|
inset 0 0 0 1px rgba(0,0,0,.35);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.crt::before{
|
|
content:"";
|
|
position:absolute;
|
|
inset:0;
|
|
pointer-events:none;
|
|
background:
|
|
repeating-linear-gradient(
|
|
to bottom,
|
|
rgba(0,0,0,.00),
|
|
rgba(0,0,0,.00) 2px,
|
|
rgba(0,0,0,.12) 3px
|
|
);
|
|
mix-blend-mode: multiply;
|
|
opacity: .55;
|
|
}
|
|
|
|
.crt::after{
|
|
content:"";
|
|
position:absolute;
|
|
inset:-20%;
|
|
pointer-events:none;
|
|
background: radial-gradient(circle at 50% 35%, rgba(109,255,143,.12), transparent 55%);
|
|
filter: blur(2px);
|
|
opacity: .9;
|
|
}
|
|
|
|
.inner{
|
|
position: relative;
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.header{
|
|
display: grid;
|
|
gap: 8px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px dashed rgba(109,255,143,.35);
|
|
}
|
|
|
|
.brand{
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.brand .badge{
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border: 1px solid rgba(109,255,143,.35);
|
|
border-radius: 10px;
|
|
background: rgba(109,255,143,.05);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.brand h1{
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sub{
|
|
margin: 0;
|
|
color: var(--phosphor-dim);
|
|
font-size: 12px;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.prompt{
|
|
margin-top: 4px;
|
|
color: var(--phosphor);
|
|
font-size: 13px;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.line{
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.caret{
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 16px;
|
|
margin-left: 2px;
|
|
background: var(--phosphor);
|
|
opacity: .85;
|
|
animation: blink 1s steps(1, end) infinite;
|
|
vertical-align: -2px;
|
|
}
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
|
|
form{
|
|
display: grid;
|
|
gap: 12px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.field{
|
|
display: grid;
|
|
grid-template-columns: 180px 1fr;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.label{
|
|
color: var(--phosphor-dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: .12em;
|
|
font-size: 12px;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"]{
|
|
width: 100%;
|
|
background: rgba(0,0,0,.45);
|
|
border: 1px solid rgba(109,255,143,.35);
|
|
border-radius: 10px;
|
|
padding: 10px 12px;
|
|
color: var(--phosphor);
|
|
outline: none;
|
|
box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
input::placeholder{
|
|
color: var(--phosphor-faint);
|
|
text-transform: uppercase;
|
|
letter-spacing: .10em;
|
|
}
|
|
|
|
input:focus{
|
|
border-color: rgba(109,255,143,.7);
|
|
box-shadow:
|
|
0 0 0 3px rgba(109,255,143,.12),
|
|
inset 0 0 0 1px rgba(0,0,0,.35);
|
|
}
|
|
|
|
.actions{
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
button{
|
|
appearance: none;
|
|
border: 1px solid rgba(109,255,143,.55);
|
|
background: rgba(109,255,143,.08);
|
|
color: var(--phosphor);
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
font-weight: 800;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
}
|
|
button:hover{
|
|
background: rgba(109,255,143,.14);
|
|
}
|
|
button:active{
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.hint{
|
|
color: var(--phosphor-dim);
|
|
font-size: 11px;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
line-height: 1.35;
|
|
border: 1px dashed rgba(109,255,143,.25);
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
background: rgba(0,0,0,.22);
|
|
}
|
|
|
|
.error{
|
|
border: 1px solid rgba(255,90,106,.55);
|
|
background: rgba(255,90,106,.10);
|
|
color: #ffb3bb;
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.error small{
|
|
font-weight: 600;
|
|
color: rgba(255,179,187,.8);
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.footer{
|
|
margin-top: 10px;
|
|
padding-top: 12px;
|
|
border-top: 1px dashed rgba(109,255,143,.35);
|
|
color: var(--phosphor-dim);
|
|
font-size: 11px;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
line-height: 1.4;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.glow{
|
|
text-shadow:
|
|
0 0 10px rgba(109,255,143,.35),
|
|
0 0 28px rgba(109,255,143,.12);
|
|
}
|
|
|
|
@media (max-width: 720px){
|
|
.field{ grid-template-columns: 1fr; }
|
|
.label{ font-size: 11px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="crt" role="application" aria-label="Authentication terminal">
|
|
<div class="inner glow">
|
|
<div class="header">
|
|
<div class="brand">
|
|
<span class="badge">RGB</span>
|
|
<h1>MAINFRAME ACCESS TERMINAL</h1>
|
|
<span class="badge">REV 26.01</span>
|
|
</div>
|
|
<p class="sub">
|
|
Radiant Gamut Bureau • Secure System • Unauthorized Access Prohibited
|
|
</p>
|
|
</div>
|
|
|
|
<div class="prompt">
|
|
SYSTEM READY.
|
|
ENTER CREDENTIALS TO PROCEED.
|
|
<span class="caret" aria-hidden="true"></span>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="error">
|
|
{{ error }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" action="/login" autocomplete="off">
|
|
<input type="hidden" name="next" value="{{ next|default('/agents') }}" />
|
|
|
|
<div class="field">
|
|
<div class="label">USERNAME</div>
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
placeholder="ENTER USERNAME"
|
|
autocapitalize="characters"
|
|
spellcheck="false"
|
|
required
|
|
autofocus
|
|
/>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="label">PASSWORD</div>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
placeholder="ENTER PASSWORD"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button type="submit">AUTHENTICATE</button>
|
|
<div class="hint">
|
|
NOTICE: INPUT IS RECORDED FOR SECURITY PURPOSES.
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="footer">
|
|
<div>CONNECTION: LOCALHOST • ENCRYPTION: PROBABLY</div>
|
|
<div>IF YOU ARE READING THIS, YOU ARE ALREADY ON A LIST.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |