vickytechkey
663e3cdbd7
All checks were successful
Deploy Beta (NATIVE) / deploy (push) Successful in 45s
82 lines
No EOL
5.1 KiB
HTML
82 lines
No EOL
5.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Verify Your Email Address - Tradhox</title>
|
|
<!-- Use Tailwind CSS for rapid styling, simulating pure HTML/CSS structure where possible -->
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@400;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">
|
|
|
|
<style>
|
|
/* Email client specific resets - simulated for standard web rendering here */
|
|
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #f5f3f3; }
|
|
table { border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
|
|
img { -ms-interpolation-mode: bicubic; }
|
|
/* Add some basic web-view styling to simulate the email frame */
|
|
.email-container { max-width: 600px; margin: 0 auto; background-color: #fbf9f8; }
|
|
</style>
|
|
|
|
<style>
|
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style:solid}}}.block{display:block}.inline{display:inline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-container-low font-body-md text-on-surface p-4 md:p-8" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #f5f3f3;">
|
|
<div class="email-container rounded-lg border border-outline-variant shadow-sm overflow-hidden my-8" style="max-width: 600px; margin: 0 auto; background-color: #fbf9f8;">
|
|
<!-- Header -->
|
|
<div class="bg-surface border-b border-outline-variant p-8 text-center">
|
|
<h1 class="font-headline-lg text-headline-lg text-primary italic m-0">Tradhox</h1>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="p-8 md:p-12 space-y-8 bg-surface">
|
|
<div class="text-center space-y-4">
|
|
<h2 class="font-headline-md text-headline-md text-on-surface m-0">Verify Your Email Address</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant m-0">
|
|
Welcome to Tradhox Artisanal Marketplace. To ensure the security of your account and protect the integrity of our community, please verify your email address.
|
|
</p>
|
|
</div>
|
|
<!-- Verification Action -->
|
|
<div class="bg-surface-container py-8 px-6 rounded text-center border border-outline-variant space-y-6">
|
|
<p class="font-label-caps text-label-caps text-secondary uppercase tracking-widest m-0">Your Verification Code</p>
|
|
<div class="font-display-lg text-display-lg text-primary tracking-widest py-4 bg-surface rounded inline-block px-8 border border-outline-variant shadow-sm">
|
|
7 4 9 2 0 1
|
|
</div>
|
|
<div class="flex items-center justify-center my-6">
|
|
<span class="h-px bg-outline-variant w-16"></span>
|
|
<span class="font-label-caps text-label-caps text-secondary mx-4">OR</span>
|
|
<span class="h-px bg-outline-variant w-16"></span>
|
|
</div>
|
|
<a class="inline-block bg-primary-container text-on-primary font-button text-button py-3 px-8 rounded hover:bg-primary transition-colors no-underline" href="{{ verification_link }}">
|
|
Verify Email Address →
|
|
</a>
|
|
</div>
|
|
<!-- Security Notice -->
|
|
<div class="pt-6 border-t border-outline-variant">
|
|
<h3 class="font-label-caps text-label-caps text-on-surface-variant mb-2">Why is this required?</h3>
|
|
<p class="font-body-md text-body-md text-secondary m-0 text-sm">
|
|
Verifying your email helps us maintain a trusted environment for our artisans and buyers. It ensures you receive important updates about your orders and protects your account from unauthorized access.
|
|
</p>
|
|
</div>
|
|
<div class="pt-4">
|
|
<p class="font-body-md text-body-md text-secondary m-0 text-sm">
|
|
If you did not create an account with Tradhox, you can safely ignore this email.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Footer (from JSON structure mapped to email) -->
|
|
<div class="bg-surface-container-low border-t border-outline-variant p-8 text-center space-y-4">
|
|
<h4 class="font-headline-md text-headline-md text-on-surface-variant m-0 text-lg">Tradhox</h4>
|
|
<div class="flex flex-wrap justify-center gap-4 text-sm font-label-caps text-label-caps">
|
|
<a class="text-on-secondary-container hover:text-primary underline" href="#">Privacy Policy</a>
|
|
<a class="text-on-secondary-container hover:text-primary underline" href="#">Terms of Service</a>
|
|
<a class="text-on-secondary-container hover:text-primary underline" href="#">Unsubscribe</a>
|
|
<a class="text-on-secondary-container hover:text-primary underline" href="#">Contact Us</a>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-secondary text-xs m-0 pt-4">
|
|
© {% now "Y" %} Tradhox Artisanal Marketplace. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body></html> |