mirror of
https://github.com/Dvorinka/Bookra.git
synced 2026-06-03 20:13:00 +00:00
Tomas Dvorak
408 lines
20 KiB
HTML
408 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bookra Email Templates Preview</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Newsreader', Georgia, serif;
|
|
background: #fbf9f6;
|
|
margin: 0;
|
|
padding: 40px 20px;
|
|
color: #2a221e;
|
|
}
|
|
.container { max-width: 1400px; margin: 0 auto; }
|
|
h1 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
text-align: center;
|
|
color: #2a221e;
|
|
margin-bottom: 8px;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.subtitle {
|
|
text-align: center;
|
|
color: #5c514a;
|
|
margin-bottom: 48px;
|
|
font-size: 17px;
|
|
font-style: italic;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
|
|
gap: 32px;
|
|
}
|
|
.card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 6px -1px rgba(42, 34, 30, 0.05);
|
|
border: 1px solid #e8e2da;
|
|
}
|
|
.card-header {
|
|
background: #fbf9f6;
|
|
padding: 24px 28px;
|
|
border-bottom: 1px solid #e8e2da;
|
|
}
|
|
.card-header h2 {
|
|
margin: 0;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #2a221e;
|
|
}
|
|
.card-header p {
|
|
margin: 4px 0 0;
|
|
color: #5c514a;
|
|
font-size: 14px;
|
|
font-style: italic;
|
|
}
|
|
.card-body { padding: 0; }
|
|
iframe {
|
|
width: 100%;
|
|
height: 500px;
|
|
border: none;
|
|
background: white;
|
|
}
|
|
.toggle {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.toggle button {
|
|
padding: 12px 28px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e8e2da;
|
|
cursor: pointer;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
transition: all 0.2s;
|
|
background: white;
|
|
color: #5c514a;
|
|
}
|
|
.toggle button.active {
|
|
background: #a65c3e;
|
|
color: white;
|
|
border-color: #a65c3e;
|
|
}
|
|
.toggle button:not(.active):hover {
|
|
background: #f5f2ed;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Bookra Email Templates</h1>
|
|
<p class="subtitle">Warm editorial aesthetic with terracotta accents</p>
|
|
|
|
<div class="toggle">
|
|
<button class="active" onclick="showLang('en')">English</button>
|
|
<button onclick="showLang('cs')">Čeština</button>
|
|
</div>
|
|
|
|
<div class="grid" id="emailGrid">
|
|
<!-- Magic Link EN -->
|
|
<div class="card" data-lang="en">
|
|
<div class="card-header">
|
|
<h2>Magic Link</h2>
|
|
<p>Passwordless authentication</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<iframe srcdoc='
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { margin: 0; padding: 0; font-family: "Newsreader", Georgia, serif; background: #fbf9f6; }
|
|
.container { max-width: 600px; margin: 0 auto; background: white; }
|
|
.header { background: #fbf9f6; padding: 48px 40px; text-align: center; border-bottom: 1px solid #e8e2da; }
|
|
.logo { width: 56px; height: 56px; background: #24201d; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 700; color: #f7f2e8; }
|
|
.brand { color: #2a221e; font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 600; margin-top: 16px; letter-spacing: -0.02em; }
|
|
.tagline { color: #8b7f76; font-size: 15px; margin-top: 6px; font-style: italic; }
|
|
.content { padding: 48px 40px; }
|
|
.greeting { font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 600; color: #2a221e; margin-bottom: 16px; }
|
|
.message { font-size: 17px; line-height: 1.6; color: #5c514a; margin-bottom: 32px; }
|
|
.button-wrap { margin: 40px 0; }
|
|
.button { display: inline-block; background: #a65c3e; color: white; padding: 16px 40px; text-decoration: none; border-radius: 8px; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 15px; }
|
|
.link-box { background: #f5f2ed; border: 1px solid #e8e2da; border-radius: 8px; padding: 20px; margin: 32px 0; }
|
|
.link-label { font-size: 12px; font-weight: 600; color: #8b7f76; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; font-family: "Space Grotesk", sans-serif; }
|
|
.link-url { font-size: 14px; color: #5c514a; word-break: break-all; font-family: monospace; }
|
|
.expiry { background: #f5ebe7; border-left: 3px solid #a65c3e; padding: 16px 20px; margin: 32px 0; font-size: 15px; color: #a65c3e; }
|
|
.help { font-size: 15px; color: #8b7f76; margin-top: 40px; padding-top: 32px; border-top: 1px solid #e8e2da; font-style: italic; }
|
|
.footer { background: #fbf9f6; padding: 32px 40px; text-align: center; border-top: 1px solid #e8e2da; }
|
|
.footer-text { font-size: 14px; color: #8b7f76; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="logo">B</div>
|
|
<div class="brand">Bookra</div>
|
|
<div class="tagline">Calm booking software</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="greeting">Hi Sarah,</div>
|
|
<div class="message">
|
|
You requested a sign-in link for your Bookra account. Click below to access your account securely — no password needed.
|
|
</div>
|
|
<div class="button-wrap">
|
|
<a href="#" class="button">Sign In to Bookra</a>
|
|
</div>
|
|
<div class="link-box">
|
|
<div class="link-label">Or copy this link</div>
|
|
<div class="link-url">https://bookra.tdvorak.dev/auth/callback?token=xyz123...</div>
|
|
</div>
|
|
<div class="expiry">
|
|
This link expires in <strong>15 minutes</strong> for security.
|
|
</div>
|
|
<div class="help">
|
|
Didn't request this? You can safely ignore it.
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="footer-text">© 2024 Bookra</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>'>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Welcome EN -->
|
|
<div class="card" data-lang="en">
|
|
<div class="card-header">
|
|
<h2>Welcome Email</h2>
|
|
<p>New user onboarding</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<iframe srcdoc='
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { margin: 0; padding: 0; font-family: "Newsreader", Georgia, serif; background: #fbf9f6; }
|
|
.container { max-width: 600px; margin: 0 auto; background: white; }
|
|
.header { background: #fbf9f6; padding: 48px 40px; text-align: center; border-bottom: 1px solid #e8e2da; }
|
|
.logo { width: 56px; height: 56px; background: #24201d; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 700; color: #f7f2e8; }
|
|
.brand { color: #2a221e; font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 600; margin-top: 16px; }
|
|
.content { padding: 48px 40px; }
|
|
.greeting { font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 600; color: #2a221e; margin-bottom: 16px; }
|
|
.message { font-size: 18px; line-height: 1.6; color: #5c514a; margin-bottom: 32px; }
|
|
.features { background: #f5f2ed; border-radius: 12px; padding: 32px; margin: 32px 0; }
|
|
.feature { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
|
|
.feature:last-child { margin-bottom: 0; }
|
|
.feature-icon { width: 24px; height: 24px; background: #a65c3e; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; flex-shrink: 0; }
|
|
.feature-text { font-size: 16px; color: #5c514a; line-height: 1.5; }
|
|
.button-wrap { margin: 40px 0; text-align: center; }
|
|
.button { display: inline-block; background: #a65c3e; color: white; padding: 16px 40px; text-decoration: none; border-radius: 8px; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 15px; }
|
|
.footer { background: #fbf9f6; padding: 32px 40px; text-align: center; border-top: 1px solid #e8e2da; }
|
|
.footer-text { font-size: 14px; color: #8b7f76; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="logo">B</div>
|
|
<div class="brand">Bookra</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="greeting">Welcome, Sarah</div>
|
|
<div class="message">
|
|
Thanks for joining Bookra. We're here to help you manage bookings with calm and clarity.
|
|
</div>
|
|
<div class="features">
|
|
<div class="feature">
|
|
<div class="feature-icon">✓</div>
|
|
<div class="feature-text"><strong>Smart scheduling</strong> — Automatic conflict detection</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">✓</div>
|
|
<div class="feature-text"><strong>Customer insights</strong> — History and preferences</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">✓</div>
|
|
<div class="feature-text"><strong>Reminders</strong> — Reduce no-shows</div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<a href="#" class="button">Open Dashboard</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="footer-text">© 2024 Bookra</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>'>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Booking Confirmation EN -->
|
|
<div class="card" data-lang="en">
|
|
<div class="card-header">
|
|
<h2>Booking Confirmation</h2>
|
|
<p>Customer confirmation email</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<iframe srcdoc='
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { margin: 0; padding: 0; font-family: "Newsreader", Georgia, serif; background: #fbf9f6; }
|
|
.container { max-width: 600px; margin: 0 auto; background: white; }
|
|
.header { background: #fbf9f6; padding: 48px 40px; text-align: center; border-bottom: 1px solid #e8e2da; }
|
|
.logo { width: 56px; height: 56px; background: #24201d; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 700; color: #f7f2e8; }
|
|
.brand { color: #2a221e; font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 600; margin-top: 16px; }
|
|
.content { padding: 48px 40px; }
|
|
.badge { display: inline-block; background: #f5ebe7; color: #a65c3e; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; margin-bottom: 24px; font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.greeting { font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 600; color: #2a221e; margin-bottom: 8px; }
|
|
.message { font-size: 17px; color: #5c514a; margin-bottom: 32px; }
|
|
.details { background: #f5f2ed; border-radius: 12px; padding: 28px; margin: 32px 0; }
|
|
.detail-row { display: flex; padding: 14px 0; border-bottom: 1px solid #e8e2da; }
|
|
.detail-row:last-child { border-bottom: none; }
|
|
.detail-label { width: 120px; font-size: 12px; font-weight: 600; color: #8b7f76; text-transform: uppercase; letter-spacing: 0.05em; font-family: "Space Grotesk", sans-serif; }
|
|
.detail-value { flex: 1; font-size: 16px; color: #2a221e; font-weight: 500; }
|
|
.help { font-size: 15px; color: #8b7f76; margin-top: 32px; padding-top: 32px; border-top: 1px solid #e8e2da; font-style: italic; }
|
|
.footer { background: #fbf9f6; padding: 32px 40px; text-align: center; border-top: 1px solid #e8e2da; }
|
|
.footer-text { font-size: 14px; color: #8b7f76; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="logo">B</div>
|
|
<div class="brand">Bookra</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="badge">Confirmed</div>
|
|
<div class="greeting">Hello Sarah,</div>
|
|
<div class="message">
|
|
Your booking with <strong>Studio Ella</strong> is confirmed.
|
|
</div>
|
|
<div class="details">
|
|
<div class="detail-row">
|
|
<div class="detail-label">Service</div>
|
|
<div class="detail-value">Haircut & Styling</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">When</div>
|
|
<div class="detail-value">Monday, April 22 at 2:00 PM</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-label">Where</div>
|
|
<div class="detail-value">123 Main Street, Prague 1</div>
|
|
</div>
|
|
</div>
|
|
<div class="help">
|
|
Need to reschedule? Contact Studio Ella directly.
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="footer-text">© 2024 Bookra</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>'>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Magic Link CS -->
|
|
<div class="card" data-lang="cs" style="display:none">
|
|
<div class="card-header">
|
|
<h2>Magický Odkaz (CZ)</h2>
|
|
<p>Přihlášení bez hesla</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<iframe srcdoc='
|
|
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { margin: 0; padding: 0; font-family: "Newsreader", Georgia, serif; background: #fbf9f6; }
|
|
.container { max-width: 600px; margin: 0 auto; background: white; }
|
|
.header { background: #fbf9f6; padding: 48px 40px; text-align: center; border-bottom: 1px solid #e8e2da; }
|
|
.logo { width: 56px; height: 56px; background: #24201d; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 700; color: #f7f2e8; }
|
|
.brand { color: #2a221e; font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 600; margin-top: 16px; letter-spacing: -0.02em; }
|
|
.tagline { color: #8b7f76; font-size: 15px; margin-top: 6px; font-style: italic; }
|
|
.content { padding: 48px 40px; }
|
|
.greeting { font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 600; color: #2a221e; margin-bottom: 16px; }
|
|
.message { font-size: 17px; line-height: 1.6; color: #5c514a; margin-bottom: 32px; }
|
|
.button-wrap { margin: 40px 0; }
|
|
.button { display: inline-block; background: #a65c3e; color: white; padding: 16px 40px; text-decoration: none; border-radius: 8px; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 15px; }
|
|
.link-box { background: #f5f2ed; border: 1px solid #e8e2da; border-radius: 8px; padding: 20px; margin: 32px 0; }
|
|
.link-label { font-size: 12px; font-weight: 600; color: #8b7f76; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; font-family: "Space Grotesk", sans-serif; }
|
|
.link-url { font-size: 14px; color: #5c514a; word-break: break-all; font-family: monospace; }
|
|
.expiry { background: #f5ebe7; border-left: 3px solid #a65c3e; padding: 16px 20px; margin: 32px 0; font-size: 15px; color: #a65c3e; }
|
|
.help { font-size: 15px; color: #8b7f76; margin-top: 40px; padding-top: 32px; border-top: 1px solid #e8e2da; font-style: italic; }
|
|
.footer { background: #fbf9f6; padding: 32px 40px; text-align: center; border-top: 1px solid #e8e2da; }
|
|
.footer-text { font-size: 14px; color: #8b7f76; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="logo">B</div>
|
|
<div class="brand">Bookra</div>
|
|
<div class="tagline">Klidný rezervační software</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="greeting">Dobrý den Martino,</div>
|
|
<div class="message">
|
|
Požádali jste o přihlašovací odkaz k účtu Bookra. Klikněte níže pro bezpečný přístup — heslo není potřeba.
|
|
</div>
|
|
<div class="button-wrap">
|
|
<a href="#" class="button">Přihlásit se do Bookra</a>
|
|
</div>
|
|
<div class="link-box">
|
|
<div class="link-label">Nebo zkopírujte tento odkaz</div>
|
|
<div class="link-url">https://bookra.tdvorak.dev/auth/callback?token=xyz123...</div>
|
|
</div>
|
|
<div class="expiry">
|
|
Tento odkaz vyprší za <strong>15 minut</strong> z bezpečnostních důvodů.
|
|
</div>
|
|
<div class="help">
|
|
Nepožádali jste o tento email? Můžete ho bezpečně ignorovat.
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="footer-text">© 2024 Bookra</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>'>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showLang(lang) {
|
|
document.querySelectorAll(".toggle button").forEach(btn => btn.classList.remove("active"));
|
|
event.target.classList.add("active");
|
|
document.querySelectorAll("[data-lang]").forEach(card => {
|
|
card.style.display = card.dataset.lang === lang ? "block" : "none";
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|