155 lines
7.5 KiB
HTML
155 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="light" lang="en"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"primary-fixed": "#baeaff",
|
||
"error-container": "#ffdad6",
|
||
"on-error-container": "#93000a",
|
||
"tertiary": "#865219",
|
||
"surface-tint": "#0c6780",
|
||
"on-secondary-fixed-variant": "#194c64",
|
||
"surface-bright": "#f7f9fc",
|
||
"primary-fixed-dim": "#89d0ed",
|
||
"outline": "#6f787d",
|
||
"on-secondary": "#ffffff",
|
||
"surface-container-high": "#e6e8ea",
|
||
"primary-container": "#87ceeb",
|
||
"secondary-fixed-dim": "#9fccea",
|
||
"on-primary-fixed-variant": "#004d62",
|
||
"surface-variant": "#e0e3e5",
|
||
"on-primary-fixed": "#001f29",
|
||
"tertiary-fixed": "#ffdcbf",
|
||
"secondary-fixed": "#c5e7ff",
|
||
"on-secondary-container": "#36647e",
|
||
"inverse-primary": "#89d0ed",
|
||
"on-tertiary-fixed-variant": "#6a3b01",
|
||
"on-tertiary-fixed": "#2d1600",
|
||
"on-surface": "#191c1e",
|
||
"surface-container-low": "#f2f4f6",
|
||
"on-background": "#191c1e",
|
||
"surface-container-lowest": "#ffffff",
|
||
"on-tertiary-container": "#76450c",
|
||
"inverse-surface": "#2d3133",
|
||
"surface-container": "#eceef0",
|
||
"secondary-container": "#b2e0fe",
|
||
"surface-container-highest": "#e0e3e5",
|
||
"tertiary-fixed-dim": "#feb876",
|
||
"on-secondary-fixed": "#001e2d",
|
||
"error": "#ba1a1a",
|
||
"surface-dim": "#d8dadc",
|
||
"on-error": "#ffffff",
|
||
"on-primary": "#ffffff",
|
||
"primary": "#0c6780",
|
||
"on-surface-variant": "#3f484c",
|
||
"inverse-on-surface": "#eff1f3",
|
||
"outline-variant": "#bfc8cd",
|
||
"background": "#f7f9fc",
|
||
"secondary": "#35637d",
|
||
"on-primary-container": "#005870",
|
||
"tertiary-container": "#fbb674",
|
||
"surface": "#f7f9fc",
|
||
"on-tertiary": "#ffffff"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.125rem",
|
||
"lg": "0.25rem",
|
||
"xl": "0.5rem",
|
||
"full": "0.75rem"
|
||
},
|
||
"fontFamily": {
|
||
"headline": ["Manrope"],
|
||
"body": ["Inter"],
|
||
"label": ["Inter"]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.glass-morphism {
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
}
|
||
.primary-gradient {
|
||
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-surface font-body text-on-surface min-h-screen flex flex-col items-center justify-center relative overflow-hidden">
|
||
<!-- Architectural Background Elements -->
|
||
<div class="absolute top-0 left-0 w-full h-full pointer-events-none z-0">
|
||
<div class="absolute top-[-10%] left-[-5%] w-[40%] h-[60%] bg-primary-fixed/20 rounded-full blur-[120px]"></div>
|
||
<div class="absolute bottom-[-10%] right-[-5%] w-[40%] h-[60%] bg-secondary-fixed/20 rounded-full blur-[120px]"></div>
|
||
</div>
|
||
<!-- Success Screen Container -->
|
||
<main class="z-10 w-full max-w-xl px-6 py-12 flex flex-col items-center text-center">
|
||
<!-- Logo Section -->
|
||
<div class="mb-12">
|
||
<img alt="ZappCare Logo" class="h-10 w-auto" data-alt="minimalist abstract geometric logo for ZappCare in professional shades of blue on a clean white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDVIQMFmCfXNIpGefIbM9oVgaW5EENddsWhvhLUabNoZwayYLDpqvtgGk9KGvdYnqZmi1EGw2i_DDM4e-zovISR9e7u6r9b2qxqdouotsPlWYTpzPaORg4MUO0BhQ3laFTX-K-NK0BHamg9hU-wIYqti4PYDPM0Y8_ZsTk3GgWIIPCJ1_eT0EIgJDuQmMj2ilEh62NQ6NyQg9aKry8bdjf9jIiyjVqEhQJoPY5J-b8wA_lEktDzS0aFb0t3wpsn8YV7KvVUaO0qQd0"/>
|
||
<h1 class="mt-4 font-headline text-2xl font-black text-primary tracking-tighter uppercase">ZappCare</h1>
|
||
</div>
|
||
<!-- Tonal Architecture Card -->
|
||
<div class="w-full bg-surface-container-lowest rounded-full p-12 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.06)] border border-outline-variant/15 flex flex-col items-center">
|
||
<!-- Icon/Visual Header -->
|
||
<div class="relative mb-10">
|
||
<!-- Decorative Circle -->
|
||
<div class="absolute inset-0 bg-primary-container/30 rounded-full scale-150 blur-xl"></div>
|
||
<!-- Main Icon Container -->
|
||
<div class="relative w-24 h-24 primary-gradient rounded-full flex items-center justify-center text-white shadow-lg">
|
||
<span class="material-symbols-outlined text-5xl" style="font-variation-settings: 'FILL' 1;">mark_email_read</span>
|
||
</div>
|
||
<!-- Flying Accents -->
|
||
<div class="absolute -top-2 -right-4 w-8 h-8 bg-secondary-container rounded-full flex items-center justify-center text-on-secondary-container shadow-md">
|
||
<span class="material-symbols-outlined text-sm">done_all</span>
|
||
</div>
|
||
</div>
|
||
<!-- Content -->
|
||
<h2 class="font-headline text-4xl font-extrabold text-on-surface tracking-tight mb-4">Check Your Email</h2>
|
||
<p class="text-on-surface-variant text-lg leading-relaxed max-w-md mb-10 font-body">
|
||
We’ve sent a password reset link to your inbox. Please follow the instructions in the email to reset your password.
|
||
</p>
|
||
<!-- Primary Action -->
|
||
<a class="primary-gradient text-white font-headline font-bold py-4 px-10 rounded-full shadow-md transition-all duration-200 hover:scale-[1.02] active:scale-95 flex items-center gap-2 group" href="#">
|
||
Open Mail App
|
||
<span class="material-symbols-outlined transition-transform duration-200 group-hover:translate-x-1">open_in_new</span>
|
||
</a>
|
||
<!-- Secondary Info -->
|
||
<div class="mt-8 pt-8 border-t border-outline-variant/15 w-full flex flex-col items-center gap-4">
|
||
<p class="text-sm text-on-surface-variant">
|
||
Didn't receive the email?
|
||
<a class="text-primary font-semibold hover:underline transition-all duration-200" href="#">Resend Email</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Footer / Back to Login -->
|
||
<div class="mt-10">
|
||
<a class="flex items-center gap-2 text-on-surface-variant font-medium hover:text-primary transition-colors duration-200 group" href="#">
|
||
<span class="material-symbols-outlined text-xl transition-transform duration-200 group-hover:-translate-x-1">arrow_back</span>
|
||
Back to Login
|
||
</a>
|
||
</div>
|
||
</main>
|
||
<!-- Footer Shell from JSON (Adapted for transaction context) -->
|
||
<footer class="mt-auto w-full py-8 flex flex-col items-center gap-2 opacity-50 font-body text-xs text-slate-500">
|
||
<div class="flex gap-6 mb-2">
|
||
<a class="hover:text-primary transition-colors duration-200" href="#">Privacy Policy</a>
|
||
<a class="hover:text-primary transition-colors duration-200" href="#">Terms of Service</a>
|
||
<a class="hover:text-primary transition-colors duration-200" href="#">Support</a>
|
||
</div>
|
||
<p>© 2024 ZappCare. Built with Tonal Architecture.</p>
|
||
</footer>
|
||
</body></html> |