Files
MyClub/templates/emails/base.html
T
Tomas Dvorak 16e4533202 dev day #75
2025-10-29 21:20:16 +01:00

234 lines
7.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{.Subject}}</title>
<style type="text/css">
/* Base styles */
body, html {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333333;
background-color: #f5f5f5;
}
/* Email container */
.email-container {
max-width: 600px;
margin: 0 auto;
background: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Header */
.email-header {
background: linear-gradient(135deg, {{.PrimaryColor}} 0%, {{.AccentColor}} 100%);
padding: 30px 20px;
text-align: center;
border-bottom: 4px solid {{.AccentColor}};
}
.email-header img {
max-width: 180px;
height: auto;
margin-bottom: 10px;
}
.club-name {
color: #ffffff;
margin: 10px 0 0;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.5px;
}
.club-slogan {
color: #a0aec0;
margin: 5px 0 0;
font-size: 14px;
font-weight: 400;
}
/* Content */
.email-content {
padding: 30px;
color: #2d3748;
font-size: 15px;
line-height: 1.7;
}
.email-content h1 {
color: #2d3748;
margin-top: 0;
font-size: 22px;
font-weight: 600;
}
.email-content p {
margin: 0 0 20px;
}
/* Footer */
.email-footer {
background-color: #f8fafc;
padding: 20px;
text-align: center;
font-size: 13px;
color: #718096;
border-top: 1px solid #e2e8f0;
}
.social-links {
margin: 15px 0;
}
.social-links a {
display: inline-block;
margin: 0 8px;
color: #4a5568;
text-decoration: none;
font-size: 14px;
}
.social-links a:hover {
color: #2b6cb0;
}
.unsubscribe-link {
color: #4a5568;
text-decoration: none;
font-size: 12px;
}
.unsubscribe-link:hover {
text-decoration: underline;
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 28px;
background: linear-gradient(135deg, {{.AccentColor}} 0%, {{.PrimaryColor}} 100%);
color: #ffffff !important;
text-decoration: none;
border-radius: 6px;
margin: 15px 0;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn:hover {
background: linear-gradient(135deg, {{.PrimaryColor}} 0%, {{.AccentColor}} 100%);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.btn-secondary {
background: #e2e8f0;
color: #4a5568 !important;
}
.btn-secondary:hover {
background: #cbd5e0;
}
/* Responsive */
@media only screen and (max-width: 600px) {
.email-container {
width: 100% !important;
border-radius: 0;
}
.email-content {
padding: 25px 20px !important;
}
.email-header {
padding: 25px 15px !important;
}
.email-header img {
max-width: 150px !important;
}
.btn {
width: 100% !important;
text-align: center;
margin: 10px 0 !important;
}
</style>
</head>
<body>
<div class="email-container">
<div class="email-header">
<img src="{{if .ClubLogoURL}}{{.ClubLogoURL}}{{else}}https://your-club-logo.png{{end}}" alt="{{.ClubName}} Logo" />
<h1 class="club-name">{{.ClubName}}</h1>
<p class="club-slogan">Srdcem na hřišti, duší v každém zápase</p>
</div>
<div class="email-content">
{{template "content" .}}
{{if or .ManageURL .ClubURL .WebsiteURL}}
<div style="margin: 24px 0; text-align: center;">
{{if .ManageURL}}
<a href="{{.ManageURL}}" class="btn" style="display:inline-block; padding:12px 24px; background: linear-gradient(135deg, {{.AccentColor}} 0%, {{.PrimaryColor}} 100%); color:#fff !important; text-decoration:none; border-radius:6px;">
Upravit předvolby
</a>
{{end}}
{{if .WebsiteURL}}
<a href="{{.WebsiteURL}}" class="btn btn-secondary" style="display:inline-block; padding:12px 24px; margin-left:8px; text-decoration:none; border-radius:6px;">
Otevřít web
</a>
{{else if .ClubURL}}
<a href="{{.ClubURL}}" class="btn btn-secondary" style="display:inline-block; padding:12px 24px; margin-left:8px; text-decoration:none; border-radius:6px;">
Otevřít web
</a>
{{end}}
</div>
{{end}}
</div>
<div class="email-footer">
{{if or .ContactEmail .ContactURL}}
<p>
Máte dotaz?
{{if .ContactURL}}<a href="{{.ContactURL}}" target="_blank">Napsat nám</a>{{end}}
{{if and .ContactURL .ContactEmail}} • {{end}}
{{if .ContactEmail}}<a href="mailto:{{.ContactEmail}}">E-mail</a>{{end}}
</p>
{{end}}
{{if .RecipientEmail}}
<p>Tento email byl odeslán na adresu <strong>{{.RecipientEmail}}</strong>.</p>
{{end}}
{{if or .UnsubscribeURL .ManageURL}}
<p>
{{if .UnsubscribeURL}}<a href="{{.UnsubscribeURL}}" class="unsubscribe-link">Odhlásit odběr</a>{{end}}
{{if and .UnsubscribeURL .ManageURL}} | {{end}}
{{if .ManageURL}}<a href="{{.ManageURL}}" class="unsubscribe-link">Upravit předvolby</a>{{end}}
</p>
{{end}}
{{if or .FacebookURL .InstagramURL .YouTubeURL .TwitterURL}}
<div class="social-links">
{{if .FacebookURL}}<a href="{{.FacebookURL}}" target="_blank">Facebook</a>{{end}}
{{if .InstagramURL}}<a href="{{.InstagramURL}}" target="_blank">Instagram</a>{{end}}
{{if .YouTubeURL}}<a href="{{.YouTubeURL}}" target="_blank">YouTube</a>{{end}}
{{if .TwitterURL}}<a href="{{.TwitterURL}}" target="_blank">Twitter</a>{{end}}
</div>
{{end}}
<p>{{.ClubName}} &copy; {{now.Format "2006"}}. Všechna práva vyhrazena.</p>
<p>Pokud jste tento email obdrželi omylem, prosíme o jeho smazání.</p>
<p style="margin-top: 12px; font-size: 12px; color: #a0aec0;">
Made by <a href="https://sportcreative.cz/myclub" target="_blank" style="color:#718096;">MyClub by Sportcreative</a>
</p>
</div>
</div>
{{if .OpenPixelURL}}
<img src="{{.OpenPixelURL}}" width="1" height="1" alt="" style="display:none;" />
{{end}}
</body>
</html>