184 lines
4.2 KiB
TypeScript
184 lines
4.2 KiB
TypeScript
export const authOTP = (otp: number) => (
|
|
`
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Your Verification Code</title>
|
|
|
|
<style>
|
|
body{
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
background:#f4f7fb;
|
|
margin:0;
|
|
padding:0;
|
|
color:#374151;
|
|
}
|
|
|
|
.container{
|
|
max-width:600px;
|
|
margin:40px auto;
|
|
background:#ffffff;
|
|
border-radius:10px;
|
|
padding:40px;
|
|
box-shadow:0 8px 25px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.logo{
|
|
text-align:center;
|
|
font-size:24px;
|
|
font-weight:700;
|
|
color:#2563eb;
|
|
margin-bottom:30px;
|
|
}
|
|
|
|
h1{
|
|
font-size:22px;
|
|
margin-bottom:10px;
|
|
color:#111827;
|
|
}
|
|
|
|
p{
|
|
font-size:15px;
|
|
color:#4b5563;
|
|
line-height:1.6;
|
|
}
|
|
|
|
.otp-box{
|
|
margin:35px 0;
|
|
text-align:center;
|
|
}
|
|
|
|
.otp{
|
|
display:inline-block;
|
|
font-size:32px;
|
|
letter-spacing:8px;
|
|
font-weight:700;
|
|
background:#f1f5ff;
|
|
color:#1d4ed8;
|
|
padding:18px 30px;
|
|
border-radius:8px;
|
|
}
|
|
|
|
.expiry{
|
|
margin-top:12px;
|
|
font-size:13px;
|
|
color:#6b7280;
|
|
}
|
|
|
|
.warning{
|
|
margin-top:20px;
|
|
font-size:13px;
|
|
color:#6b7280;
|
|
background:#f9fafb;
|
|
padding:12px;
|
|
border-radius:6px;
|
|
}
|
|
|
|
.footer{
|
|
text-align:center;
|
|
font-size:12px;
|
|
color:#9ca3af;
|
|
margin-top:35px;
|
|
}
|
|
|
|
.divider{
|
|
height:1px;
|
|
background:#e5e7eb;
|
|
margin:30px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="logo">MultiTenant SaaS</div>
|
|
|
|
<h1>Your Verification Code</h1>
|
|
|
|
<p>Hello,</p>
|
|
|
|
<p>
|
|
Use the following One-Time Password (OTP) to continue signing in to your
|
|
<strong>MultiTenant SaaS</strong> account.
|
|
</p>
|
|
|
|
<div class="otp-box">
|
|
<div class="otp">${otp}</div>
|
|
<div class="expiry">This code is valid for <strong>5 minutes</strong> only.</div>
|
|
</div>
|
|
|
|
<p>
|
|
Enter this code in the verification screen to complete your login or signup.
|
|
</p>
|
|
|
|
<div class="warning">
|
|
For security reasons, never share this code with anyone. Our team will never ask you for your OTP.
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<p>
|
|
If you did not request this code, you can safely ignore this email.
|
|
</p>
|
|
|
|
<div class="footer">
|
|
© 2026 MultiTenant SaaS. All rights reserved.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
`
|
|
)
|
|
|
|
export const welcomeToApp =
|
|
`
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Welcome to Research Shock</title>
|
|
<style>
|
|
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 0; background-color: #f4f7f9; }
|
|
.container { max-width: 600px; margin: 20px auto; background: #ffffff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
|
|
.logo { font-size: 24px; font-weight: bold; color: #2563eb; margin-bottom: 20px; text-align: center; }
|
|
h1 { font-size: 22px; color: #111827; }
|
|
p { margin-bottom: 20px; color: #4b5563; }
|
|
.button { display: inline-block; padding: 12px 24px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 5px; font-weight: 600; transition: background 0.3s ease; }
|
|
.footer { margin-top: 30px; font-size: 12px; color: #9ca3af; text-align: center; }
|
|
.divider { height: 1px; background: #e5e7eb; margin: 30px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="logo">MultiTenant SaaS</div>
|
|
<h1>Welcome to the team!</h1>
|
|
<p>Hi there,</p>
|
|
<p>Thanks for signing up for <strong>MultiTenant Saas</strong>. We're excited to help you around.</p>
|
|
<p>To get started, we recommend setting up your organization profile and inviting your first team member.</p>
|
|
|
|
<div style="text-align: center; margin: 35px 0;">
|
|
<a href="http://localhost:3000" class="button">Go to Dashboard</a>
|
|
</div>
|
|
|
|
<p>If you have any questions, just reply to this email. We're here to help!</p>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<p>Cheers,<br>Team</p>
|
|
|
|
<div class="footer">
|
|
© 2026 App. All rights reserved.<br>
|
|
If you didn't create an account, you can safely ignore this email.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`
|