194 lines
6.8 KiB
HTML
194 lines
6.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Create Account</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
.screen-content {
|
||
|
|
padding: var(--space-6) var(--space-4) var(--space-10);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-apple {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: var(--space-3);
|
||
|
|
height: 52px;
|
||
|
|
background: var(--pure-light);
|
||
|
|
color: var(--void);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
text-decoration: none;
|
||
|
|
transition: opacity 0.2s ease-out;
|
||
|
|
font-family: var(--font-primary);
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-apple:hover { opacity: 0.9; }
|
||
|
|
|
||
|
|
.btn-google {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: var(--space-3);
|
||
|
|
height: 52px;
|
||
|
|
background: transparent;
|
||
|
|
color: var(--soft-light);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
text-decoration: none;
|
||
|
|
transition: all 0.2s ease-out;
|
||
|
|
font-family: var(--font-primary);
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-google:hover { border-color: var(--faint-light); background: rgba(255,255,255,0.03); }
|
||
|
|
|
||
|
|
.social-btns {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--space-3);
|
||
|
|
margin-bottom: var(--space-5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-3);
|
||
|
|
margin-bottom: var(--space-5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider-line {
|
||
|
|
flex: 1;
|
||
|
|
height: 1px;
|
||
|
|
background: var(--twilight);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-fields {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--space-3);
|
||
|
|
margin-bottom: var(--space-5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.field-group {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--space-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-create {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 52px;
|
||
|
|
width: 100%;
|
||
|
|
background: var(--amethyst);
|
||
|
|
color: var(--pure-light);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
text-decoration: none;
|
||
|
|
box-shadow: var(--glow-amethyst);
|
||
|
|
margin-bottom: var(--space-4);
|
||
|
|
font-family: var(--font-primary);
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
transition: all 0.2s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-create:hover { background: var(--amethyst-light); }
|
||
|
|
|
||
|
|
.signin-link {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.signin-link a {
|
||
|
|
color: var(--amethyst-light);
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-note {
|
||
|
|
text-align: center;
|
||
|
|
color: var(--faint-light);
|
||
|
|
margin-top: var(--space-4);
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-note a {
|
||
|
|
color: var(--dim-light);
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="device-frame">
|
||
|
|
<div class="status-bar">
|
||
|
|
<span class="time">9:41</span>
|
||
|
|
<div class="icons">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
||
|
|
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="screen-content">
|
||
|
|
<h1 class="display-md text-pure" style="margin-bottom: var(--space-2);">Create your account</h1>
|
||
|
|
<p class="body text-dim" style="margin-bottom: var(--space-6);">Your thoughts stay private. Always.</p>
|
||
|
|
|
||
|
|
<div class="social-btns">
|
||
|
|
<a href="08-first-turn.html" class="btn-apple">
|
||
|
|
<!-- Apple logo SVG (monochrome) -->
|
||
|
|
<svg width="18" height="22" viewBox="0 0 18 22" fill="none">
|
||
|
|
<path d="M14.98 11.47c-.02-2.53 2.07-3.75 2.16-3.81-1.18-1.72-3.01-1.96-3.66-1.98-1.56-.16-3.04.92-3.83.92-.79 0-2.01-.9-3.31-.87C4.59 5.76 3 6.64 2.1 8.06.27 10.93 1.64 15.24 3.42 17.61c.9 1.29 1.96 2.74 3.36 2.69 1.35-.05 1.86-.87 3.49-.87 1.63 0 2.09.87 3.52.84 1.46-.02 2.38-1.32 3.27-2.62.73-1.07 1.02-2.12 1.04-2.17-.02-.01-2.1-.8-2.12-3.01z" fill="#000"/>
|
||
|
|
<path d="M12.44 3.83C13.17 2.94 13.67 1.7 13.53.44c-1.06.04-2.34.71-3.1 1.59-.67.77-1.27 2.01-1.11 3.19 1.18.09 2.39-.59 3.12-1.39z" fill="#000"/>
|
||
|
|
</svg>
|
||
|
|
Sign in with Apple
|
||
|
|
</a>
|
||
|
|
<a href="08-first-turn.html" class="btn-google">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
|
|
<path d="M19.6 10.2c0-.7-.1-1.4-.2-2H10v3.8h5.4c-.2 1.3-1 2.4-2.1 3.1v2.6h3.4c2-1.8 3.1-4.5 3.1-7.5z" fill="#4285F4"/>
|
||
|
|
<path d="M10 20c2.7 0 5-.9 6.6-2.4l-3.4-2.6c-.9.6-2 1-3.2 1-2.5 0-4.6-1.7-5.4-4H1.1v2.7C2.7 17.7 6.1 20 10 20z" fill="#34A853"/>
|
||
|
|
<path d="M4.6 12c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V5.3H1.1C.4 6.7 0 8.3 0 10s.4 3.3 1.1 4.7l3.5-2.7z" fill="#FBBC05"/>
|
||
|
|
<path d="M10 4c1.4 0 2.6.5 3.6 1.4L16.7 2.4C15 .8 12.7 0 10 0 6.1 0 2.7 2.3 1.1 5.7l3.5 2.7C5.4 5.7 7.5 4 10 4z" fill="#EA4335"/>
|
||
|
|
</svg>
|
||
|
|
Sign in with Google
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="divider-row">
|
||
|
|
<div class="divider-line"></div>
|
||
|
|
<span class="label text-faint">or</span>
|
||
|
|
<div class="divider-line"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-fields">
|
||
|
|
<div class="field-group">
|
||
|
|
<label class="input-label">Email</label>
|
||
|
|
<input type="email" class="input-field" placeholder="you@example.com">
|
||
|
|
</div>
|
||
|
|
<div class="field-group">
|
||
|
|
<label class="input-label">Password</label>
|
||
|
|
<input type="password" class="input-field" placeholder="Create a strong password">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="08-first-turn.html" class="btn-create">Create Account</a>
|
||
|
|
|
||
|
|
<div class="signin-link body-sm text-dim">
|
||
|
|
Already have an account? <a href="#">Sign in</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="privacy-note body-sm">
|
||
|
|
By continuing, you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.<br>
|
||
|
|
We never sell your data.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|