football2801
0e4d78471b
CI / test (push) Has been cancelled
Twig login page was hardcoded with v1 cream/terracotta colors and had no [data-design=v2] overrides. Cookie + html attribute injection were working but had nothing to style off. Adding v2 overrides inline so the login page matches the v2 register the rest of the app uses. Default v2 palette on login uses ocean-dusk values (navy + cream text + yellow V brand) since user isn't logged in yet so we can't read their theme preference. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
164 lines
6.2 KiB
Twig
164 lines
6.2 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="en" data-design="{{ app.request.cookies.get('wevisto_design')|default('v1') }}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type="image/svg+xml" href="/build/favicon.svg?v=20260515-vviewfinder">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
|
|
<title>Sign in — WeVisto</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: system-ui, sans-serif;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100dvh;
|
|
background: #fdf6ee;
|
|
color: #3a2e22;
|
|
}
|
|
.card {
|
|
width: 100%;
|
|
max-width: 380px;
|
|
margin: 1rem;
|
|
padding: 2rem;
|
|
background: #fff9f2;
|
|
border-radius: 16px;
|
|
border: 1px solid #e8d9c4;
|
|
}
|
|
h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; }
|
|
.field { margin-bottom: 1rem; }
|
|
label { display: block; font-size: 0.8125rem; font-weight: 600; color: #8a7060; margin-bottom: 0.375rem; }
|
|
input[type="email"],
|
|
input[type="password"] {
|
|
width: 100%;
|
|
min-height: 44px;
|
|
padding: 0 0.875rem;
|
|
border: 1px solid #e8d9c4;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
font-size: 1rem;
|
|
color: #3a2e22;
|
|
transition: border-color 0.15s;
|
|
}
|
|
input:focus { outline: none; border-color: #c97c3a; }
|
|
input[aria-invalid="true"] { border-color: #c0392b; }
|
|
.field-error {
|
|
margin-top: 0.25rem;
|
|
font-size: 0.8125rem;
|
|
color: #c0392b;
|
|
min-height: 1.2em;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
min-height: 44px;
|
|
margin-top: 1.25rem;
|
|
background: #c97c3a;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 9999px;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.btn:hover { opacity: 0.9; }
|
|
.register-link { display: block; text-align: center; margin-top: 1rem; font-size: 0.875rem; color: #8a7060; }
|
|
.register-link a { color: #c97c3a; text-decoration: none; font-weight: 600; }
|
|
.logo-badge { display: block; width: 88px; height: 88px; margin: 0 auto 1.25rem; border-radius: 14px; overflow: hidden; border: 1px solid #e8d9c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
|
|
.logo-badge img { display: block; width: 100%; height: 100%; }
|
|
|
|
/* ── v2 (atmospheric dusks) overrides ── */
|
|
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital@0;1&display=swap');
|
|
[data-design="v2"] body {
|
|
background: radial-gradient(ellipse 90% 70% at 50% 30%, #142a40 0%, transparent 70%), #06121f;
|
|
color: #f4eed8;
|
|
}
|
|
[data-design="v2"] .card {
|
|
background: #0e2030;
|
|
border: 1px solid rgba(180,210,235,0.20);
|
|
box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
|
|
}
|
|
[data-design="v2"] h1 {
|
|
font-family: 'Marcellus', Georgia, serif;
|
|
font-weight: 400;
|
|
color: #f4eed8;
|
|
}
|
|
[data-design="v2"] label {
|
|
color: #b8c8d8;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
[data-design="v2"] input[type="email"],
|
|
[data-design="v2"] input[type="password"] {
|
|
background: rgba(0,0,0,0.3);
|
|
border-color: rgba(180,210,235,0.20);
|
|
color: #f4eed8;
|
|
}
|
|
[data-design="v2"] input:focus { border-color: #f0d000; }
|
|
[data-design="v2"] .btn {
|
|
background: #4e9fc8;
|
|
color: #06121f;
|
|
}
|
|
[data-design="v2"] .field-error { color: #e08070; }
|
|
[data-design="v2"] .register-link { color: #b8c8d8; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; }
|
|
[data-design="v2"] .register-link a { color: #f0d000; font-style: normal; }
|
|
[data-design="v2"] .logo-badge {
|
|
border-color: rgba(180,210,235,0.20);
|
|
box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<a href="/" class="logo-badge" aria-label="WeVisto"><img src="/build/logo.svg" alt=""></a>
|
|
<h1>Sign in</h1>
|
|
|
|
<form method="post" novalidate>
|
|
<div class="field">
|
|
<label for="inputEmail">Email address</label>
|
|
<input
|
|
type="email"
|
|
id="inputEmail"
|
|
name="_username"
|
|
value="{{ last_username }}"
|
|
autocomplete="email"
|
|
aria-describedby="login-error"
|
|
{% if error %}aria-invalid="true"{% endif %}
|
|
autofocus
|
|
>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="inputPassword">Password</label>
|
|
<input
|
|
type="password"
|
|
id="inputPassword"
|
|
name="_password"
|
|
autocomplete="current-password"
|
|
aria-describedby="login-error"
|
|
{% if error %}aria-invalid="true"{% endif %}
|
|
>
|
|
{% if error %}
|
|
<p id="login-error" class="field-error" role="alert">Incorrect email or password</p>
|
|
{% else %}
|
|
<p id="login-error" class="field-error"></p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
|
|
|
<button type="submit" class="btn">Sign in</button>
|
|
</form>
|
|
|
|
<p class="register-link">Don't have an account? <a href="/register">Create one</a></p>
|
|
</div>
|
|
</body>
|
|
</html>
|