style: align confirmation result page with adiuvAI brand
Some checks failed
Test & Deploy Waitlist / test (push) Failing after 33s
Test & Deploy Waitlist / deploy (push) Has been skipped

This commit is contained in:
Roberto Musso
2026-04-11 18:58:12 +02:00
parent f956f0a260
commit e9fb6102ab

View File

@@ -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>"""