246 lines
7.2 KiB
HTML
246 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Fenja AI</title>
|
|
<style>
|
|
:root {
|
|
--paper: #faf6ee;
|
|
--paper-sink: #e7e1d0;
|
|
--paper-sink-deep: #ddd6c3;
|
|
--ink: #383831;
|
|
--ink-soft: #5f5e5e;
|
|
--ink-dim: #8a887f;
|
|
--walnut: #785f53;
|
|
--walnut-dim: #6b5348;
|
|
--crimson: #8a3a2f;
|
|
--ease: cubic-bezier(0.2, 0, 0, 1);
|
|
--dur: 240ms;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0; padding: 0;
|
|
min-height: 100%;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: "Manrope", system-ui, -apple-system, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
body {
|
|
min-height: 100vh;
|
|
background: radial-gradient(1100px 760px at 22% 42%, #fffcf7 0%, var(--paper) 58%, #f2ecdd 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* ───── Topographic currents ───── */
|
|
.currents {
|
|
position: fixed;
|
|
top: -22vh; right: -18vw;
|
|
width: 90vw; height: 130vh;
|
|
max-width: 1600px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
-webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 82%);
|
|
mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 82%);
|
|
opacity: 0;
|
|
transition: opacity 900ms var(--ease);
|
|
}
|
|
.currents.is-ready { opacity: 1; }
|
|
.currents svg { width: 100%; height: 100%; display: block; }
|
|
|
|
.entrance {
|
|
position: relative;
|
|
z-index: 10;
|
|
width: 100%;
|
|
padding: 0 112px;
|
|
}
|
|
.entrance-inner {
|
|
max-width: 560px;
|
|
}
|
|
|
|
/* ───── Steps ───── */
|
|
.step { display: none; }
|
|
.step.is-active {
|
|
display: block;
|
|
animation: enter 640ms var(--ease) forwards;
|
|
}
|
|
@keyframes enter {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ───── Tagline ───── */
|
|
.tagline {
|
|
font-family: "Newsreader", Georgia, "Times New Roman", serif;
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 34px;
|
|
line-height: 1.28;
|
|
letter-spacing: -0.012em;
|
|
color: var(--ink);
|
|
margin: 0 0 40px 0;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* ───── Field ───── */
|
|
.field { display: block; width: 100%; }
|
|
.field-input {
|
|
display: block; width: 100%;
|
|
height: 56px; padding: 0 18px;
|
|
background: var(--paper-sink);
|
|
color: var(--ink);
|
|
font-family: "Manrope", system-ui, sans-serif;
|
|
font-size: 17px; font-weight: 400;
|
|
border: 0;
|
|
border-radius: 12px 12px 0 0;
|
|
outline: 0;
|
|
box-shadow: inset 0 -1px 0 0 rgba(56, 56, 49, 0.25);
|
|
transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
|
|
}
|
|
.field-input::placeholder {
|
|
color: var(--ink-dim);
|
|
font-family: "Newsreader", Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 17px;
|
|
}
|
|
.field-input:focus {
|
|
background: #eae3d0;
|
|
box-shadow: inset 0 -2px 0 0 var(--walnut);
|
|
}
|
|
.field-input.is-error {
|
|
box-shadow: inset 0 -2px 0 0 var(--crimson);
|
|
}
|
|
.field-input:disabled { opacity: 0.55; cursor: default; }
|
|
|
|
/* ───── Six-digit code cells ───── */
|
|
.code-row {
|
|
display: flex; gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.code-cell {
|
|
width: 54px; height: 64px;
|
|
padding: 0; text-align: center;
|
|
background: var(--paper-sink);
|
|
color: var(--ink);
|
|
font-family: "Newsreader", Georgia, serif;
|
|
font-weight: 400; font-size: 28px;
|
|
border: 0; outline: 0;
|
|
border-radius: 10px 10px 0 0;
|
|
box-shadow: inset 0 -1px 0 0 rgba(56, 56, 49, 0.25);
|
|
transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
|
|
}
|
|
.code-cell:focus {
|
|
background: #eae3d0;
|
|
box-shadow: inset 0 -2px 0 0 var(--walnut);
|
|
}
|
|
.code-cell.is-filled {
|
|
box-shadow: inset 0 -1px 0 0 rgba(56, 56, 49, 0.4);
|
|
}
|
|
.code-cell.is-error {
|
|
box-shadow: inset 0 -2px 0 0 var(--crimson);
|
|
}
|
|
|
|
/* ───── Post-submit acknowledgement ───── */
|
|
.ack {
|
|
margin-top: 16px;
|
|
font-family: "Newsreader", Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 15px;
|
|
color: var(--ink-soft);
|
|
min-height: 22px;
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
|
|
}
|
|
.ack.is-visible { opacity: 1; transform: translateY(0); }
|
|
.ack.is-error { color: var(--crimson); }
|
|
|
|
/* ───── Quiet secondary action ───── */
|
|
.quiet {
|
|
margin-top: 28px;
|
|
background: transparent; border: 0; padding: 0;
|
|
cursor: pointer;
|
|
color: var(--ink-soft);
|
|
font-family: "Manrope", system-ui, sans-serif;
|
|
font-size: 14px;
|
|
letter-spacing: 0;
|
|
display: inline-flex; align-items: baseline; gap: 8px;
|
|
transition: color var(--dur) var(--ease);
|
|
}
|
|
.quiet:hover { color: var(--ink); }
|
|
.quiet .q-arrow {
|
|
font-family: "Newsreader", Georgia, serif;
|
|
font-style: italic;
|
|
color: var(--walnut);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.entrance { padding: 0 28px; }
|
|
.tagline { font-size: 26px; margin-bottom: 32px; }
|
|
.code-cell { width: 42px; height: 54px; font-size: 22px; }
|
|
.code-row { gap: 7px; }
|
|
.currents { opacity: 0.5; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="currents" id="currents" aria-hidden="true"></div>
|
|
|
|
<main class="entrance">
|
|
<div class="entrance-inner">
|
|
|
|
<!-- STEP 1 — EMAIL -->
|
|
<section class="step is-active" id="step-email">
|
|
<p class="tagline">
|
|
Thank you for your commitment and willingness to contribute.
|
|
</p>
|
|
<form class="field" id="email-form" novalidate>
|
|
<input
|
|
type="email"
|
|
class="field-input"
|
|
id="email-input"
|
|
name="email"
|
|
autocomplete="email"
|
|
spellcheck="false"
|
|
placeholder="your email"
|
|
aria-label="Email address"
|
|
required
|
|
/>
|
|
<div class="ack" id="email-ack" aria-live="polite"></div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- STEP 2 — CODE -->
|
|
<section class="step" id="step-code">
|
|
<p class="tagline">
|
|
A six-digit code is on its way. Enter it below.
|
|
</p>
|
|
<form class="field" id="code-form" novalidate>
|
|
<div class="code-row" id="code-row">
|
|
<input class="code-cell" type="text" inputmode="numeric" maxlength="1" autocomplete="one-time-code" aria-label="Digit 1" />
|
|
<input class="code-cell" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2" />
|
|
<input class="code-cell" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3" />
|
|
<input class="code-cell" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4" />
|
|
<input class="code-cell" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 5" />
|
|
<input class="code-cell" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 6" />
|
|
</div>
|
|
<div class="ack" id="code-ack" aria-live="polite"></div>
|
|
<button type="button" class="quiet" id="use-different">
|
|
<span>Use a different email</span>
|
|
<span class="q-arrow" aria-hidden="true">→</span>
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/entrance.js" defer></script>
|
|
|
|
</body>
|
|
</html>
|