Skip to content

Commit e31c8aa

Browse files
gemmadlougemmadlou
committed
feat(styleguide): add "Forgot Password" proof-of-concept layout and update index
1 parent 734f01f commit e31c8aa

File tree

2 files changed

+90
-0
lines changed

2 files changed

+90
-0
lines changed

‎styleguide/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,15 @@ <h1 class="sg-index__title">Styleguide</h1>
116116
<span class="material-symbols-outlined">arrow_forward</span>
117117
</a>
118118
</li>
119+
<li class="sg-index__item">
120+
<a href="/styleguide/poc-forgot-password.html" class="sg-index__link">
121+
<div>
122+
<div class="sg-index__link-name">Forgot password (POC)</div>
123+
<div class="sg-index__link-desc">Same shell as signup POC — two columns, card with email + send CTA (not wired to reset flow)</div>
124+
</div>
125+
<span class="material-symbols-outlined">arrow_forward</span>
126+
</a>
127+
</li>
119128
</ul>
120129
</div>
121130

‎styleguide/poc-forgot-password.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Styleguide: Forgot Password / reset-link layout proof-of-concept (static HTML + public/css/app.css).
4+
Same shell as poc-signup.html / poc-login.html. Not wired to real auth — demo form only.
5+
-->
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<title>Styleguide — Forgot Password (POC)</title>
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap">
12+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200">
13+
<link rel="stylesheet" href="/css/app.css">
14+
</head>
15+
<body class="min-h-screen bg-gray-150 grid-bg text-charcoal flex flex-col font-sans">
16+
17+
<main class="flex-1 flex flex-col justify-center w-full max-w-6xl mx-auto px-6 py-12 lg:py-16">
18+
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
19+
<header class="mb-12 lg:mb-0 text-center lg:text-left">
20+
<div class="inline-flex flex-col items-center lg:items-start max-w-full">
21+
<h1 class="text-7xl font-bold tracking-tight text-gray-900 max-w-full text-center lg:text-left">Reset your password</h1>
22+
<p class="mt-6 text-base lg:text-lg text-slate-500 font-normal">We'll email you a link to get back into your workspace</p>
23+
<div class="bg-slate-500/50 h-1 w-14 rounded-full mt-8" aria-hidden="true"></div>
24+
</div>
25+
</header>
26+
27+
<div class="rounded-2xl bg-white border border-black/6 shadow-card p-8 lg:p-10 max-w-2xl mx-auto lg:mx-0 lg:ml-auto w-full">
28+
<div class="text-center mb-6">
29+
<div class="inline-flex items-center justify-center size-12 rounded-full bg-primary/10 mb-4">
30+
<span class="material-symbols-outlined !text-2xl text-primary" aria-hidden="true">lock_reset</span>
31+
</div>
32+
<h2 class="text-3xl font-bold text-charcoal tracking-tight">Forgot Password</h2>
33+
<p class="text-slate-500 mt-2">Enter your email and we'll send you a reset link</p>
34+
</div>
35+
36+
<form action="#" method="post" onsubmit="return false;" class="space-y-6" aria-label="Demo forgot password (does not submit)">
37+
<div>
38+
<label for="poc-forgot-email" class="text-2xs font-semibold uppercase tracking-overline text-gray-400 block mb-2">Email</label>
39+
<div class="flex items-center gap-3 rounded-xl bg-gray-100 px-4 py-1 focus-within:ring-2 focus-within:ring-primary/20">
40+
<span class="material-symbols-outlined text-slate-400 !text-xl shrink-0" aria-hidden="true">mail</span>
41+
<input
42+
id="poc-forgot-email"
43+
name="email"
44+
type="email"
45+
autocomplete="email"
46+
placeholder="[email protected]"
47+
class="form-input flex-1 w-full border-0 bg-transparent py-3 shadow-none focus:ring-0 focus:border-transparent rounded-lg placeholder:text-slate-400"
48+
>
49+
</div>
50+
</div>
51+
52+
<button type="button" class="w-full flex items-center justify-center gap-2 border-0 cursor-pointer transition bg-gradient-blue-cta shadow-blue-cta text-white py-4 px-6 rounded-full text-base font-semibold outline-none hover:brightness-105 focus-visible:shadow-submit">
53+
<span class="material-symbols-outlined !text-xl shrink-0" aria-hidden="true">send</span>
54+
Send reset link
55+
</button>
56+
</form>
57+
58+
<p class="mt-8 text-center text-sm text-slate-500">
59+
Remember your password?
60+
<a href="/login" class="font-semibold text-primary hover:text-primary/80">Log in</a>
61+
</p>
62+
</div>
63+
</div>
64+
</main>
65+
66+
<footer class="mt-auto shrink-0 py-8 px-6 text-center text-10 tracking-overline uppercase text-gray-400">
67+
<p class="mb-4">
68+
© 2026 Board Task. All rights reserved.
69+
</p>
70+
<nav class="flex flex-wrap justify-center items-center gap-x-8 gap-y-2" aria-label="Legal">
71+
<a href="#" class="text-inherit no-underline hover:text-blue-600">Privacy policy</a>
72+
<a href="#" class="text-inherit no-underline hover:text-blue-600">Terms of service</a>
73+
<a href="#" class="text-inherit no-underline hover:text-blue-600">Support</a>
74+
</nav>
75+
<p class="mt-6 text-slate-400 normal-case tracking-normal text-xs">
76+
<a href="/styleguide/" class="hover:text-primary">Styleguide index</a>
77+
</p>
78+
</footer>
79+
80+
</body>
81+
</html>

0 commit comments

Comments
 (0)