Redesign login page: AC logo, side-by-side fields, fading Alex time quotes
This commit is contained in:
Erik
parent
6e090eb4dc
commit
9f49038107
1 changed files with 181 additions and 48 deletions
|
|
@ -8,73 +8,115 @@
|
|||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0a0a0a;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 50% 30%, rgba(30, 20, 10, 0.8) 0%, transparent 70%),
|
||||
radial-gradient(ellipse at 50% 35%, rgba(30, 20, 10, 0.9) 0%, transparent 60%),
|
||||
linear-gradient(180deg, #0a0806 0%, #12100a 50%, #0a0806 100%);
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
||||
color: #d4c9a8;
|
||||
}
|
||||
.login-card {
|
||||
width: 360px;
|
||||
background: linear-gradient(180deg, #1a1610 0%, #0e0c08 100%);
|
||||
border: 2px solid #8a7a44;
|
||||
border-radius: 6px;
|
||||
padding: 32px 28px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(212, 175, 55, 0.1),
|
||||
0 8px 32px rgba(0, 0, 0, 0.8),
|
||||
0 0 60px rgba(138, 122, 68, 0.08);
|
||||
|
||||
.logo-container {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.login-title {
|
||||
.logo-container img {
|
||||
display: block;
|
||||
width: 380px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.quote-container {
|
||||
height: 44px;
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
font-size: 1.5rem;
|
||||
color: #d4af37;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
|
||||
width: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.quote-text {
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
color: #8a7a5a;
|
||||
line-height: 1.4;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease;
|
||||
}
|
||||
.quote-text.visible { opacity: 1; }
|
||||
.quote-attribution {
|
||||
display: block;
|
||||
font-size: 0.6rem;
|
||||
font-style: normal;
|
||||
color: #5a4a34;
|
||||
margin-top: 4px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.login-subtitle {
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: #8a7a5a;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.login-card {
|
||||
width: 440px;
|
||||
background: linear-gradient(180deg, #1a1610 0%, #0e0c08 100%);
|
||||
border: 1px solid #5a4a28;
|
||||
border-radius: 4px;
|
||||
padding: 24px 28px 20px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(212, 175, 55, 0.08),
|
||||
0 8px 32px rgba(0, 0, 0, 0.8),
|
||||
0 0 60px rgba(138, 122, 68, 0.06);
|
||||
}
|
||||
.form-group {
|
||||
|
||||
.login-title {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.75rem;
|
||||
color: #8a7a5a;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group label {
|
||||
.form-field {
|
||||
flex: 1;
|
||||
}
|
||||
.form-field label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: #a09070;
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.7rem;
|
||||
color: #7a6a4a;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.form-group input {
|
||||
.form-field input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
font-size: 0.95rem;
|
||||
padding: 9px 11px;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
background: #0e0c08;
|
||||
background: #080704;
|
||||
color: #d4c9a8;
|
||||
border: 1px solid #5a4a24;
|
||||
border: 1px solid #3a3018;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.form-group input:focus {
|
||||
.form-field input:focus {
|
||||
border-color: #d4af37;
|
||||
box-shadow: 0 0 6px rgba(212, 175, 55, 0.15);
|
||||
box-shadow: 0 0 6px rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
.form-field input::placeholder {
|
||||
color: #3a3220;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 8px;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
color: #1a1610;
|
||||
background: linear-gradient(180deg, #d4af37 0%, #a08520 100%);
|
||||
|
|
@ -92,6 +134,7 @@
|
|||
.login-btn:active {
|
||||
background: linear-gradient(180deg, #a08520 0%, #8a7a44 100%);
|
||||
}
|
||||
|
||||
.login-error {
|
||||
margin-top: 12px;
|
||||
padding: 8px;
|
||||
|
|
@ -103,36 +146,126 @@
|
|||
border-radius: 3px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 20px;
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
font-size: 0.65rem;
|
||||
color: #5a4a34;
|
||||
font-size: 0.6rem;
|
||||
color: #3a3220;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="logo-container">
|
||||
<img src="/icons/06001343.png" alt="Asheron's Call">
|
||||
</div>
|
||||
|
||||
<div class="quote-container">
|
||||
<div class="quote-text" id="quoteText"></div>
|
||||
</div>
|
||||
|
||||
<div class="login-card">
|
||||
<h1 class="login-title">Dereth Tracker</h1>
|
||||
<p class="login-subtitle">Mosswart Enjoyers Club</p>
|
||||
<div class="login-title">Dereth Tracker</div>
|
||||
|
||||
<form id="loginForm" onsubmit="return handleLogin(event)">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" autocomplete="username" autofocus required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" autocomplete="current-password" required>
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" autocomplete="username" autofocus required>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" autocomplete="current-password" required>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="login-btn" id="loginBtn">Enter Dereth</button>
|
||||
<div class="login-error" id="loginError"></div>
|
||||
</form>
|
||||
|
||||
<div class="login-footer">Authorized personnel only</div>
|
||||
<div class="login-footer">Mosswart Enjoyers Club</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const alexQuotes = [
|
||||
"I don't run late. I glide fashionably through time.",
|
||||
"Time is a flat circle\u2014and I'm still trying to find the starting point.",
|
||||
"Being on time is like spotting a unicorn: rare, beautiful, and definitely not me.",
|
||||
"Time zones are a social construct. I operate on instinct.",
|
||||
"Every time I try to be early, time responds with traffic.",
|
||||
"Time is an illusion. My ETA is performance art.",
|
||||
"I treat deadlines like speed limits: suggestions.",
|
||||
"I don't set alarms. I set vague intentions.",
|
||||
"If you want me to be on time, lie about when it starts.",
|
||||
"Why stress about time when you can just embrace chaos?",
|
||||
"My to-do list is a historical document.",
|
||||
"Time and I broke up. It was toxic.",
|
||||
"I'm not late. I'm temporally creative.",
|
||||
"'In five minutes' means something different in my language.",
|
||||
"I don't track time. I let it track me\u2014poorly.",
|
||||
"Time management is easy. Just avoid doing anything.",
|
||||
"Time is fleeting. So is my attention span.",
|
||||
"I live in the moment. Just never the right one.",
|
||||
"Time doesn't control me. It just heavily inconveniences me.",
|
||||
"I'm a time optimist: always wrong, always hopeful.",
|
||||
"Punctuality is for people who don't trust spontaneity.",
|
||||
"My life is a series of missed trains and strong coffee.",
|
||||
"If time is a river, I'm definitely upstream without a paddle.",
|
||||
"I don't watch the clock. I avoid eye contact with it.",
|
||||
"'ASAP' means 'as soon as procrastination ends.'",
|
||||
"Early is suspicious. On time is impressive. Late is expected.",
|
||||
"Time management? I prefer time improvisation.",
|
||||
"I like to keep time on its toes. Mostly by ignoring it.",
|
||||
"Alarms are like plot twists. I didn't see it coming, and I still ignore it.",
|
||||
"If being late was a sport, I'd already have missed the medal ceremony.",
|
||||
"I don't lose track of time. I just pretend it doesn't exist.",
|
||||
"Watches are decorative lies.",
|
||||
"Time flies. I miss every flight.",
|
||||
"My planner is just a coloring book for stress.",
|
||||
"I'm not in a hurry. I'm in denial.",
|
||||
"I live in the now, just usually a little bit after everyone else.",
|
||||
"My calendar and I are estranged, but we're working on it.",
|
||||
"The early bird catches the worm. I order food later.",
|
||||
"Time moves fast. I move slower.",
|
||||
"I was going to be on time, but then I remembered who I am.",
|
||||
"I see '9:00 AM' and read it as 'guideline.'",
|
||||
"Every plan is a maybe with extra steps.",
|
||||
"I don't have time blindness\u2014I just have time indifference.",
|
||||
"I'm not late. Reality is early.",
|
||||
"Time and I aren't speaking after what happened last Monday.",
|
||||
"Being on time is impressive. Being consistently late is a brand.",
|
||||
"I'm in sync with the universe\u2014just in a different dimension.",
|
||||
"My sense of time is like my sock drawer: chaotic and mostly missing.",
|
||||
"Some people chase time. I let it wander off.",
|
||||
"I'm not running late. I'm setting the tone for a relaxed experience.",
|
||||
];
|
||||
|
||||
function shuffle(arr) {
|
||||
for (let i = arr.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[arr[i], arr[j]] = [arr[j], arr[i]];
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
const shuffled = shuffle([...alexQuotes]);
|
||||
let idx = 0;
|
||||
const el = document.getElementById('quoteText');
|
||||
|
||||
function showQuote() {
|
||||
el.classList.remove('visible');
|
||||
setTimeout(() => {
|
||||
if (idx >= shuffled.length) { idx = 0; shuffle(shuffled); }
|
||||
el.innerHTML = '\u201C' + shuffled[idx] + '\u201D'
|
||||
+ '<span class="quote-attribution">\u2014 Time according to Alex</span>';
|
||||
idx++;
|
||||
el.classList.add('visible');
|
||||
}, 800);
|
||||
}
|
||||
|
||||
showQuote();
|
||||
setInterval(showQuote, 5000);
|
||||
|
||||
async function handleLogin(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('loginBtn');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue