Piotr Gaczkowski
2ec156422b
Closes #2 , #3 Co-authored-by: Piotr Gaczkowski <DoomHammerNG@gmail.com> Reviewed-on: #1 Reviewed-by: leming leming <leming@hs3.pl>
103 lines
4.6 KiB
HTML
103 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="plr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Najbliższe wydarzenia w Hackerspace Trójmiasto (HS3)</title>
|
|
<style>
|
|
/* Dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
.dark-mode-button {
|
|
background: #ffffff !important;
|
|
color: #000000 !important;
|
|
border: 1px solid #cccccc !important;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.event-table {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
}
|
|
.event-table tbody,
|
|
.event-table tr,
|
|
.event-table td {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
.event-image {
|
|
text-align: center !important;
|
|
padding: 20px 20px 10px 20px !important;
|
|
}
|
|
.event-content {
|
|
padding: 10px 10px 20px 10px !important;
|
|
width: 100% !important;
|
|
}
|
|
.event-image img {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
max-width: 300px !important;
|
|
}
|
|
/* Simplification mobile */
|
|
.event-content * {
|
|
max-width: none !important;
|
|
width: auto !important;
|
|
display: inline-block !important;
|
|
white-space: normal !important;
|
|
}
|
|
.event-content h2 {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
}
|
|
.event-content a {
|
|
display: inline-block !important;
|
|
width: auto !important;
|
|
max-width: 200px !important;
|
|
}
|
|
.event-content div[style*="background:#ff7105"] {
|
|
white-space: nowrap !important;
|
|
font-size: 12px !important;
|
|
padding: 4px 8px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="background-color:#f0f2f5; font-family:Helvetica,Arial,sans-serif; color:#333; padding:20px;">
|
|
<div style="max-width:800px; margin:0 auto; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 4px 16px #eee;">
|
|
<div style="text-align:center; padding:40px 20px 20px 20px; background:#4B64F2;">
|
|
<img src="https://img.notionusercontent.com/s3/prod-files-secure%2F00deef52-50e0-4f54-b2ee-5c2fbc2c4c6d%2F2ad5c423-a798-4a76-9a07-9be972f119cb%2FHS_LOGO_COLOR_BLACK.png/size/w=1440?exp=1773155386&sig=QdEp5ee-WNVt8umc9b3zwnO4lrUpbwRKYym5aG0zyL4&id=89cbb915-e2d5-4d18-85d7-2c8cf5bae1b5&table=block" alt="Hackerspace Trójmiasto" style="width:230px; display:block; margin:0 auto 24px auto;">
|
|
<h1 style="color:#fff; font-size:24px; font-weight:500; margin:0;">NAJBLIŻSZE WYDARZENIA W HACKERSPACE TRÓJMIASTO (HS3)</h1>
|
|
</div>
|
|
<div style="padding:32px 10px 10px 10px; overflow-x:hidden;">
|
|
{% for event in events %}
|
|
<table class="event-table" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:32px; background:#fff; border-radius:8px; border:1px solid #eee; table-layout:fixed;">
|
|
<tr>
|
|
{% if event.picture_url %}
|
|
<td class="event-image" width="220" valign="top" style="padding:20px;">
|
|
<img src="{{ event.picture_url }}" alt="Photo de l'événement" style="display:block; max-width:200px; height:auto;">
|
|
</td>
|
|
{% endif %}
|
|
<td class="event-content" valign="top" style="padding:20px; overflow:hidden;">
|
|
<h2 style="font-size:20px; color:#2a2a2a; margin:0 0 8px 0; line-height:1.2; max-width:100%; white-space:normal;">{{ event.title }}</h2>
|
|
<div style="background:#ff7105; color:#fff; padding:6px 12px; border-radius:20px; font-size:14px; margin-bottom:12px; margin-top:4px; display:inline-block; font-weight:500; white-space:nowrap;">
|
|
{{ event.full_date }}
|
|
</div>
|
|
{% if event.location %}
|
|
<div style="font-size:15px; color:#000; font-weight:500; margin-bottom:6px; max-width:100%; white-space:normal;">Gdzie : {{ event.location }}</div>
|
|
{% endif %}
|
|
<div style="font-size:15px; color:#444; margin-bottom:12px; max-width:100%; white-space:normal;">{{ event.description }}</div>
|
|
{% if event.link %}
|
|
<a href="{{ event.link }}" class="dark-mode-button" style="display:inline-block; background:#4B64F2; color:#fff; text-decoration:none; padding:10px 20px; border-radius:4px; font-weight:500;">Sprawdź na HS3 Events</a>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
{% endfor %}
|
|
</div>
|
|
<div style="padding:20px; text-align:center; font-size:14px; color:#777; background:#fafbfd;">
|
|
<p>Otrzymujesz ten newsletter ponieważ jesteś super cool 1337 osobą subskrybującą info HS3.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|