mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 18:19:43 +00:00
Update
This commit is contained in:
1 parent
5b97bc6f56
commit
5a7e62a578
104 files changed
+2986
No files matched your search
@@ -0,0 +1,94 @@
|
||||
# Sauci Email Templates
|
||||
|
||||
Premium, on-brand email templates for Supabase authentication.
|
||||
|
||||
## Templates Included
|
||||
|
||||
| Template | Supabase Setting | Purpose |
|
||||
|----------|------------------|---------|
|
||||
| `confirmation.html` | Confirm signup | Email verification after user signs up |
|
||||
| `magic-link.html` | Magic Link | Passwordless sign-in links |
|
||||
| `password-reset.html` | Reset Password | Password recovery emails |
|
||||
| `email-change.html` | Change Email Address | Confirm email address updates |
|
||||
| `invite.html` | Invite user | Admin user invitations |
|
||||
|
||||
## How to Apply
|
||||
|
||||
### Option 1: Supabase Dashboard (Recommended)
|
||||
|
||||
1. Go to your Supabase project dashboard
|
||||
2. Navigate to **Authentication** → **Email Templates**
|
||||
3. For each template:
|
||||
- Select the template type from the tabs
|
||||
- Copy the HTML content from the corresponding `.html` file
|
||||
- Paste into the **Body** field
|
||||
- Update the **Subject** field (suggestions below)
|
||||
- Click **Save**
|
||||
|
||||
### Option 2: Supabase CLI
|
||||
|
||||
```bash
|
||||
# Update config.toml in supabase/config.toml
|
||||
# Add template paths under [auth.email]
|
||||
```
|
||||
|
||||
## Recommended Subject Lines
|
||||
|
||||
| Template | Subject Line |
|
||||
|----------|-------------|
|
||||
| Confirm signup | `Welcome to Sauci - Confirm Your Email` |
|
||||
| Magic Link | `Your Sauci Sign In Link` |
|
||||
| Reset Password | `Reset Your Sauci Password` |
|
||||
| Change Email | `Confirm Your New Email Address - Sauci` |
|
||||
| Invite user | `You've Been Invited to Sauci` |
|
||||
|
||||
## Template Variables
|
||||
|
||||
These templates use Supabase's Go template syntax:
|
||||
|
||||
- `{{ .ConfirmationURL }}` - The action URL (confirm, reset, sign in)
|
||||
- `{{ .Email }}` - The user's email address (available but not used)
|
||||
- `{{ .Token }}` - Raw token (available but not used)
|
||||
|
||||
## Design System
|
||||
|
||||
Templates match Sauci's premium glass-morphism aesthetic:
|
||||
|
||||
**Colors:**
|
||||
- Primary: `#e94560` (Rose Pink)
|
||||
- Secondary: `#9b59b6` (Purple)
|
||||
- Background: `#0d0d1a` (Deep Dark)
|
||||
- Surface: `#1a1a2e` / `#16213e`
|
||||
- Text: `#ffffff` with varying opacity
|
||||
|
||||
**Features:**
|
||||
- Gradient accent bar at top of cards
|
||||
- Subtle border styling (rgba white 8%)
|
||||
- Linear gradients for backgrounds
|
||||
- Shadow effects on CTA buttons
|
||||
- Responsive design for all devices
|
||||
- Outlook/Windows Mail compatible
|
||||
|
||||
## Testing
|
||||
|
||||
1. Use Supabase's "Send test email" feature in the dashboard
|
||||
2. Test on multiple email clients:
|
||||
- Gmail (web & mobile)
|
||||
- Apple Mail
|
||||
- Outlook
|
||||
- Yahoo Mail
|
||||
|
||||
## Customization
|
||||
|
||||
To customize for your needs:
|
||||
|
||||
1. **Logo**: Replace the text "Sauci" with an `<img>` tag if you have a logo image hosted
|
||||
2. **Colors**: Find/replace the hex values to match any brand updates
|
||||
3. **Copy**: Adjust the messaging to fit your tone
|
||||
|
||||
## Notes
|
||||
|
||||
- Templates use table-based layouts for maximum email client compatibility
|
||||
- Inline styles are used (email clients strip `<style>` tags)
|
||||
- Background gradients may not render in all clients; solid fallback colors are defined
|
||||
- Test thoroughly before deploying to production
|
||||
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Confirm Your Email - Sauci</title>
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
|
||||
<tr>
|
||||
<td align="center" style="padding: 40px 20px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
|
||||
|
||||
<!-- Logo Section -->
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
|
||||
Sauci
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Main Card -->
|
||||
<tr>
|
||||
<td>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
|
||||
|
||||
<!-- Top Gradient Accent -->
|
||||
<tr>
|
||||
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
|
||||
</tr>
|
||||
|
||||
<!-- Card Content -->
|
||||
<tr>
|
||||
<td style="padding: 40px 32px;">
|
||||
|
||||
<!-- Icon -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 24px;">
|
||||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
|
||||
💌
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Heading -->
|
||||
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
|
||||
Welcome to Sauci
|
||||
</h1>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
|
||||
You're one step away from deepening your connection. Confirm your email to start your journey together.
|
||||
</p>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
|
||||
Confirm Email
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Divider -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding-bottom: 24px;">
|
||||
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Alternative Link -->
|
||||
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
|
||||
If the button doesn't work, copy and paste this link into your browser:
|
||||
</p>
|
||||
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
|
||||
{{ .ConfirmationURL }}
|
||||
</p>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td style="padding: 32px 16px;">
|
||||
<p style="margin: 0 0 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center;">
|
||||
This link will expire in 24 hours.
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
|
||||
If you didn't create an account, you can safely ignore this email.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Confirm Email Change - Sauci</title>
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
|
||||
<tr>
|
||||
<td align="center" style="padding: 40px 20px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
|
||||
|
||||
<!-- Logo Section -->
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
|
||||
Sauci
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Main Card -->
|
||||
<tr>
|
||||
<td>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
|
||||
|
||||
<!-- Top Gradient Accent -->
|
||||
<tr>
|
||||
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
|
||||
</tr>
|
||||
|
||||
<!-- Card Content -->
|
||||
<tr>
|
||||
<td style="padding: 40px 32px;">
|
||||
|
||||
<!-- Icon -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 24px;">
|
||||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
|
||||
✉
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Heading -->
|
||||
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
|
||||
Confirm Email Change
|
||||
</h1>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
|
||||
You requested to change your email address. Click the button below to confirm this change.
|
||||
</p>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
|
||||
Confirm New Email
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Info Notice -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(155, 89, 182, 0.08); border-radius: 8px; border: 1px solid rgba(155, 89, 182, 0.15);">
|
||||
<tr>
|
||||
<td style="padding: 16px;">
|
||||
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.5;">
|
||||
📩 After confirming, you'll use your new email address to sign in to Sauci.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Divider -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 24px 0;">
|
||||
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Alternative Link -->
|
||||
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
|
||||
If the button doesn't work, copy and paste this link into your browser:
|
||||
</p>
|
||||
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
|
||||
{{ .ConfirmationURL }}
|
||||
</p>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td style="padding: 32px 16px;">
|
||||
<p style="margin: 0 0 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center;">
|
||||
Didn't request this change?
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
|
||||
If you didn't request an email change, please secure your account by resetting your password immediately.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>You're Invited to Sauci</title>
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
|
||||
<tr>
|
||||
<td align="center" style="padding: 40px 20px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
|
||||
|
||||
<!-- Logo Section -->
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
|
||||
Sauci
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Main Card -->
|
||||
<tr>
|
||||
<td>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
|
||||
|
||||
<!-- Top Gradient Accent -->
|
||||
<tr>
|
||||
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
|
||||
</tr>
|
||||
|
||||
<!-- Card Content -->
|
||||
<tr>
|
||||
<td style="padding: 40px 32px;">
|
||||
|
||||
<!-- Icon -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 24px;">
|
||||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
|
||||
💕
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Heading -->
|
||||
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
|
||||
You've Been Invited
|
||||
</h1>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
|
||||
Someone special has invited you to join Sauci, the app designed to help couples deepen their connection and discover new things about each other.
|
||||
</p>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
|
||||
Accept Invitation
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Features Section -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(22, 33, 62, 0.6); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05);">
|
||||
<tr>
|
||||
<td style="padding: 20px;">
|
||||
<p style="margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-align: center; text-transform: uppercase; letter-spacing: 1px;">
|
||||
What awaits you
|
||||
</p>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 8px 0;">
|
||||
<p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
|
||||
🔥 Thoughtful questions to spark conversations
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 8px 0;">
|
||||
<p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
|
||||
💌 Discover mutual interests with your partner
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 8px 0;">
|
||||
<p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
|
||||
💬 Private chats when you both match
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Divider -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 24px 0;">
|
||||
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Alternative Link -->
|
||||
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
|
||||
If the button doesn't work, copy and paste this link into your browser:
|
||||
</p>
|
||||
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
|
||||
{{ .ConfirmationURL }}
|
||||
</p>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td style="padding: 32px 16px;">
|
||||
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
|
||||
This invitation link will expire in 7 days. If you didn't expect this invitation, you can safely ignore this email.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Sign In to Sauci</title>
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
|
||||
<tr>
|
||||
<td align="center" style="padding: 40px 20px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
|
||||
|
||||
<!-- Logo Section -->
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
|
||||
Sauci
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Main Card -->
|
||||
<tr>
|
||||
<td>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
|
||||
|
||||
<!-- Top Gradient Accent -->
|
||||
<tr>
|
||||
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
|
||||
</tr>
|
||||
|
||||
<!-- Card Content -->
|
||||
<tr>
|
||||
<td style="padding: 40px 32px;">
|
||||
|
||||
<!-- Icon -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 24px;">
|
||||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
|
||||
✨
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Heading -->
|
||||
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
|
||||
Your Magic Link
|
||||
</h1>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
|
||||
Click the button below to securely sign in to your Sauci account. No password needed.
|
||||
</p>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
|
||||
Sign In to Sauci
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Security Notice -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(233, 69, 96, 0.08); border-radius: 8px; border: 1px solid rgba(233, 69, 96, 0.15);">
|
||||
<tr>
|
||||
<td style="padding: 16px;">
|
||||
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.5;">
|
||||
🔒 This link is unique to you and expires in 1 hour for your security.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Divider -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 24px 0;">
|
||||
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Alternative Link -->
|
||||
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
|
||||
If the button doesn't work, copy and paste this link into your browser:
|
||||
</p>
|
||||
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
|
||||
{{ .ConfirmationURL }}
|
||||
</p>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td style="padding: 32px 16px;">
|
||||
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
|
||||
If you didn't request this sign in link, you can safely ignore this email.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Reset Your Password - Sauci</title>
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
|
||||
<tr>
|
||||
<td align="center" style="padding: 40px 20px;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
|
||||
|
||||
<!-- Logo Section -->
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
|
||||
Sauci
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Main Card -->
|
||||
<tr>
|
||||
<td>
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
|
||||
|
||||
<!-- Top Gradient Accent -->
|
||||
<tr>
|
||||
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
|
||||
</tr>
|
||||
|
||||
<!-- Card Content -->
|
||||
<tr>
|
||||
<td style="padding: 40px 32px;">
|
||||
|
||||
<!-- Icon -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 24px;">
|
||||
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
|
||||
🔐
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Heading -->
|
||||
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
|
||||
Reset Your Password
|
||||
</h1>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
|
||||
We received a request to reset your password. Click the button below to choose a new one.
|
||||
</p>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="padding-bottom: 32px;">
|
||||
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
|
||||
Reset Password
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Security Notice -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(155, 89, 182, 0.08); border-radius: 8px; border: 1px solid rgba(155, 89, 182, 0.15);">
|
||||
<tr>
|
||||
<td style="padding: 16px;">
|
||||
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.5;">
|
||||
⏰ This link expires in 1 hour. After resetting, you'll need to sign in again on all devices.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Divider -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 24px 0;">
|
||||
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Alternative Link -->
|
||||
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
|
||||
If the button doesn't work, copy and paste this link into your browser:
|
||||
</p>
|
||||
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
|
||||
{{ .ConfirmationURL }}
|
||||
</p>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td style="padding: 32px 16px;">
|
||||
<p style="margin: 0 0 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center;">
|
||||
Didn't request this?
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
|
||||
If you didn't request a password reset, you can safely ignore this email. Your password won't change until you click the link above.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user