style: align confirmation result page with adiuvAI brand
This commit is contained in:
102
app/routes.py
102
app/routes.py
@@ -104,15 +104,19 @@ async def confirm_email(
|
|||||||
|
|
||||||
|
|
||||||
def _result_page(*, success: bool) -> str:
|
def _result_page(*, success: bool) -> str:
|
||||||
"""Minimal HTML response for confirmation result."""
|
"""Branded HTML response for confirmation result, matching the adiuvAI landing page."""
|
||||||
if success:
|
if success:
|
||||||
title = "You're confirmed!"
|
title = "You’re confirmed!"
|
||||||
message = "Your email has been verified. We'll notify you when adiuvAI is ready."
|
message = "Your email has been verified. We’ll notify you when adiuvAI is ready."
|
||||||
color = "#16a34a"
|
icon_bg = "rgba(251,200,129,0.12)"
|
||||||
|
icon_border = "rgba(251,200,129,0.25)"
|
||||||
|
icon_svg = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e5a94e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>'
|
||||||
else:
|
else:
|
||||||
title = "Invalid or expired link"
|
title = "Invalid or expired link"
|
||||||
message = "This confirmation link is no longer valid. Please sign up again."
|
message = "This confirmation link is no longer valid. Please sign up again."
|
||||||
color = "#dc2626"
|
icon_bg = "rgba(220,38,38,0.08)"
|
||||||
|
icon_border = "rgba(220,38,38,0.18)"
|
||||||
|
icon_svg = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>'
|
||||||
|
|
||||||
return f"""\
|
return f"""\
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
@@ -121,22 +125,82 @@ def _result_page(*, success: bool) -> str:
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<title>{title} — adiuvAI</title>
|
<title>{title} — adiuvAI</title>
|
||||||
|
<style>
|
||||||
|
body {{
|
||||||
|
margin: 0; padding: 0; min-height: 100vh;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
background: #f4edf3;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}}
|
||||||
|
body::before {{
|
||||||
|
content: '';
|
||||||
|
position: fixed; inset: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 80% 60% at 25% 20%, rgba(251,200,129,0.10) 0%, transparent 60%),
|
||||||
|
radial-gradient(ellipse 70% 50% at 75% 70%, rgba(138,142,169,0.08) 0%, transparent 50%);
|
||||||
|
pointer-events: none; z-index: 0;
|
||||||
|
}}
|
||||||
|
.card {{
|
||||||
|
position: relative; z-index: 1;
|
||||||
|
text-align: center; max-width: 420px; width: 100%;
|
||||||
|
margin: 24px;
|
||||||
|
padding: 48px 40px 40px;
|
||||||
|
background: rgba(255,255,255,0.55);
|
||||||
|
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.65);
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02);
|
||||||
|
}}
|
||||||
|
.logo {{
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
font-size: 18px; font-weight: 400; color: #040404;
|
||||||
|
letter-spacing: -0.02em; margin-bottom: 28px;
|
||||||
|
}}
|
||||||
|
.logo .ai {{ font-weight: 700; color: #e5a94e; }}
|
||||||
|
.icon {{
|
||||||
|
width: 56px; height: 56px; border-radius: 50%;
|
||||||
|
background: {icon_bg}; border: 1.5px solid {icon_border};
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
}}
|
||||||
|
h1 {{
|
||||||
|
font-size: 22px; font-weight: 600; color: #040404;
|
||||||
|
letter-spacing: -0.03em; margin: 0 0 10px;
|
||||||
|
}}
|
||||||
|
p {{
|
||||||
|
font-size: 15px; color: #8a8ea9; line-height: 1.7;
|
||||||
|
margin: 0 0 28px;
|
||||||
|
}}
|
||||||
|
.btn {{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 28px; border-radius: 50px;
|
||||||
|
background: #040404; color: #fbfbfb;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px; font-weight: 600;
|
||||||
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}}
|
||||||
|
.btn:hover {{
|
||||||
|
background: #222;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||||
|
}}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body style="margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
|
<body>
|
||||||
background:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
|
<div class="card">
|
||||||
<div style="text-align:center;max-width:400px;padding:40px;">
|
<div class="logo">
|
||||||
<h1 style="font-size:28px;color:#18181b;margin:0 0 8px;">adiuvAI</h1>
|
<svg viewBox="0 0 64 64" width="28" height="28">
|
||||||
<div style="width:48px;height:48px;border-radius:50%;background:{color};margin:24px auto;
|
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
|
||||||
display:flex;align-items:center;justify-content:center;">
|
<path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
|
||||||
<span style="color:#fff;font-size:24px;">{'✓' if success else '✕'}</span>
|
<circle cx="32" cy="32" r="2.5" fill="#040404" opacity="0.18"/>
|
||||||
|
</svg>
|
||||||
|
<span>adiuv<span class="ai">AI</span></span>
|
||||||
</div>
|
</div>
|
||||||
<h2 style="font-size:20px;color:#18181b;margin:0 0 12px;">{title}</h2>
|
<div class="icon">{icon_svg}</div>
|
||||||
<p style="font-size:16px;color:#52525b;line-height:1.5;margin:0 0 24px;">{message}</p>
|
<h1>{title}</h1>
|
||||||
<a href="https://adiuvai.com"
|
<p>{message}</p>
|
||||||
style="display:inline-block;background:#18181b;color:#fafafa;text-decoration:none;
|
<a href="https://adiuvai.com" class="btn">Go to adiuvai.com</a>
|
||||||
padding:10px 24px;border-radius:8px;font-size:14px;">
|
|
||||||
Go to adiuvai.com
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>"""
|
</html>"""
|
||||||
|
|||||||
Reference in New Issue
Block a user