vickytechkey
663e3cdbd7
All checks were successful
Deploy Beta (NATIVE) / deploy (push) Successful in 45s
262 lines
No EOL
11 KiB
HTML
262 lines
No EOL
11 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Reset Your Password - Tradhox</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@400;500;600;700&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>
|
|
/* Base styles for email clients */
|
|
body, table, td, a {
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
table, td {
|
|
mso-table-lspace: 0pt;
|
|
mso-table-rspace: 0pt;
|
|
}
|
|
img {
|
|
-ms-interpolation-mode: bicubic;
|
|
border: 0;
|
|
height: auto;
|
|
line-height: 100%;
|
|
outline: none;
|
|
text-decoration: none;
|
|
}
|
|
/* Design System Colors & Fonts */
|
|
:root {
|
|
--surface: #fbf9f8;
|
|
--on-surface: #1b1c1c;
|
|
--primary-container: #6b1a2c;
|
|
--on-primary-container: #ef8191;
|
|
--on-primary: #ffffff;
|
|
--secondary: #5f5e5b;
|
|
--outline-variant: #dac0c2;
|
|
--surface-container-low: #f5f3f3;
|
|
--primary: #4d0218;
|
|
|
|
--font-headline: 'Libre Caslon Text', serif;
|
|
--font-body: 'Work Sans', sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100% !important;
|
|
background-color: var(--surface-container-low);
|
|
font-family: var(--font-body);
|
|
color: var(--on-surface);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.wrapper {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
background-color: #f5f3f3;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.main-container {
|
|
background-color: #ffffff;
|
|
margin: 40px auto 0;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
border: 1px solid #dac0c2;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(107, 26, 44, 0.02);
|
|
}
|
|
|
|
.header {
|
|
padding: 40px 32px 32px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #dac0c2;
|
|
background-color: #fbf9f8;
|
|
}
|
|
|
|
.brand-logo {
|
|
font-family: var(--font-headline);
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #4d0218;
|
|
font-style: italic;
|
|
margin: 0;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.content {
|
|
padding: 48px 40px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--font-headline);
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #1b1c1c;
|
|
margin: 0 0 24px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
p {
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: #1b1c1c;
|
|
margin: 0 0 24px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.button-container {
|
|
text-align: center;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
background-color: #6b1a2c;
|
|
color: #ffffff;
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
padding: 14px 32px;
|
|
border-radius: 2px;
|
|
line-height: 20px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #4d0218;
|
|
}
|
|
|
|
.secondary-text {
|
|
color: #5f5e5b;
|
|
font-size: 14px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
background-color: #dac0c2;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.footer {
|
|
background-color: #f5f3f3;
|
|
padding: 32px 40px;
|
|
text-align: center;
|
|
border-top: 1px solid #dac0c2;
|
|
}
|
|
|
|
.footer p {
|
|
font-size: 12px;
|
|
color: #5f5e5b;
|
|
line-height: 18px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.footer h4 {
|
|
font-family: var(--font-headline);
|
|
font-size: 16px;
|
|
color: #1b1c1c;
|
|
margin: 0 0 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.security-tips {
|
|
text-align: left;
|
|
background-color: #fbf9f8;
|
|
padding: 24px;
|
|
border-radius: 4px;
|
|
border: 1px solid #dac0c2;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.security-tips ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
color: #5f5e5b;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.links {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.links a {
|
|
color: #5f5e5b;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
margin: 0 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.links a:hover {
|
|
color: #4d0218;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.main-container {
|
|
margin-top: 20px;
|
|
border-radius: 0;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
.content, .footer, .header {
|
|
padding-left: 24px !important;
|
|
padding-right: 24px !important;
|
|
}
|
|
}
|
|
</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 style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; background-color: #f5f3f3; font-family: 'Work Sans', sans-serif; color: #1b1c1c; -webkit-font-smoothing: antialiased; width: 100% !important;">
|
|
<center class="wrapper" style="width: 100%; table-layout: fixed; background-color: #f5f3f3; padding-bottom: 60px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" class="main-container" role="presentation" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; margin: 40px auto 0; width: 100%; max-width: 600px; border: 1px solid #dac0c2; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 20px rgba(107, 26, 44, 0.02);" width="100%" bgcolor="#ffffff">
|
|
<tbody><tr>
|
|
<td class="header" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 40px 32px 32px; text-align: center; border-bottom: 1px solid #dac0c2; background-color: #fbf9f8;" align="center" bgcolor="#fbf9f8">
|
|
<p class="brand-logo" style="font-family: 'Libre Caslon Text', serif; font-size: 32px; font-weight: 700; color: #4d0218; font-style: italic; margin: 0; line-height: 40px;">Tradhox</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="content" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 48px 40px; background-color: #ffffff;" bgcolor="#ffffff">
|
|
<h1 style="font-family: 'Libre Caslon Text', serif; font-size: 24px; font-weight: 600; color: #1b1c1c; margin: 0 0 24px; line-height: 32px;">Reset Your Password</h1>
|
|
<p style="font-family: 'Work Sans', sans-serif; font-size: 16px; line-height: 24px; color: #1b1c1c; margin: 0 0 24px; font-weight: 400;">We received a request to reset the password for your Tradhox account. We are here to help you regain access securely.</p>
|
|
<p style="font-family: 'Work Sans', sans-serif; font-size: 16px; line-height: 24px; color: #1b1c1c; margin: 0 0 24px; font-weight: 400;">Click the button below to choose a new password. This link will expire in 24 hours for your security.</p>
|
|
<div class="button-container" style="text-align: center; margin: 40px 0;">
|
|
<a class="btn" href="{{ reset_link }}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; display: inline-block; background-color: #6b1a2c; color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; padding: 14px 32px; border-radius: 2px; line-height: 20px; letter-spacing: 0.5px;">Reset Password →</a>
|
|
</div>
|
|
<div class="divider" style="height: 1px; background-color: #dac0c2; margin: 32px 0;"></div>
|
|
<p class="secondary-text" style="font-family: 'Work Sans', sans-serif; line-height: 24px; margin: 0 0 24px; font-weight: 400; color: #5f5e5b; font-size: 14px; margin-bottom: 0;"><strong>Didn't request this change?</strong><br>
|
|
If you did not initiate this password reset, you can safely ignore this email. Your password will remain unchanged and your account is secure. We recommend reviewing your recent account activity if you are concerned.</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="footer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f5f3f3; padding: 32px 40px; text-align: center; border-top: 1px solid #dac0c2;" bgcolor="#f5f3f3" align="center">
|
|
<div class="security-tips" style="text-align: left; background-color: #fbf9f8; padding: 24px; border-radius: 4px; border: 1px solid #dac0c2; margin-top: 24px;">
|
|
<h4 style="font-family: 'Libre Caslon Text', serif; font-size: 16px; color: #1b1c1c; margin: 0 0 12px; font-weight: 600;">Security Tips</h4>
|
|
<ul style="margin: 0; padding-left: 20px; color: #5f5e5b; font-size: 14px; line-height: 22px;">
|
|
<li>Never share your password with anyone.</li>
|
|
<li>Create a strong password using a mix of letters, numbers, and symbols.</li>
|
|
<li>Ensure you are on the official Tradhox website before entering credentials.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="links" style="margin-top: 24px;">
|
|
<a href="#" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #5f5e5b; text-decoration: none; font-size: 12px; margin: 0 8px; font-weight: 500;">Privacy Policy</a> |
|
|
<a href="#" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #5f5e5b; text-decoration: none; font-size: 12px; margin: 0 8px; font-weight: 500;">Terms of Service</a> |
|
|
<a href="#" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #5f5e5b; text-decoration: none; font-size: 12px; margin: 0 8px; font-weight: 500;">Contact Us</a>
|
|
</div>
|
|
<p style="font-family: 'Work Sans', sans-serif; margin: 0 0 24px; font-weight: 400; font-size: 12px; color: #5f5e5b; line-height: 18px; margin-bottom: 12px; margin-top: 24px;">© {% now "Y" %} Tradhox Artisanal Marketplace. All rights reserved.</p>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</center>
|
|
</body></html> |