style: align confirmation result page with adiuvAI brand
This commit is contained in:
Roberto Musso
102
app/routes.py
102
app/routes.py
@@ -104,15 +104,19 @@ async def confirm_email(
|
||||
|
||||
|
||||
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:
|
||||
title = "You're confirmed!"
|
||||
message = "Your email has been verified. We'll notify you when adiuvAI is ready."
|
||||
color = "#16a34a"
|
||||
title = "You’re confirmed!"
|
||||
message = "Your email has been verified. We’ll notify you when adiuvAI is ready."
|
||||
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:
|
||||
title = "Invalid or expired link"
|
||||
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"""\
|
||||
<!DOCTYPE html>
|
||||
@@ -121,22 +125,82 @@ def _result_page(*, success: bool) -> str:
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<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>
|
||||
<body style="margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
|
||||
background:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
|
||||
<div style="text-align:center;max-width:400px;padding:40px;">
|
||||
<h1 style="font-size:28px;color:#18181b;margin:0 0 8px;">adiuvAI</h1>
|
||||
<div style="width:48px;height:48px;border-radius:50%;background:{color};margin:24px auto;
|
||||
display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#fff;font-size:24px;">{'✓' if success else '✕'}</span>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="logo">
|
||||
<svg viewBox="0 0 64 64" width="28" height="28">
|
||||
<path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
|
||||
<path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
|
||||
<circle cx="32" cy="32" r="2.5" fill="#040404" opacity="0.18"/>
|
||||
</svg>
|
||||
<span>adiuv<span class="ai">AI</span></span>
|
||||
</div>
|
||||
<h2 style="font-size:20px;color:#18181b;margin:0 0 12px;">{title}</h2>
|
||||
<p style="font-size:16px;color:#52525b;line-height:1.5;margin:0 0 24px;">{message}</p>
|
||||
<a href="https://adiuvai.com"
|
||||
style="display:inline-block;background:#18181b;color:#fafafa;text-decoration:none;
|
||||
padding:10px 24px;border-radius:8px;font-size:14px;">
|
||||
Go to adiuvai.com
|
||||
</a>
|
||||
<div class="icon">{icon_svg}</div>
|
||||
<h1>{title}</h1>
|
||||
<p>{message}</p>
|
||||
<a href="https://adiuvai.com" class="btn">Go to adiuvai.com</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>"""
|
||||
|
||||
Reference in New Issue
Block a user