130 lines
6.8 KiB
HTML
130 lines
6.8 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Мероприятия MONT</title>
|
|
<meta name="description" content="Предстоящие мероприятия, вебинары и конференции дистрибьютора MONT." />
|
|
<meta name="robots" content="index, follow" />
|
|
<link rel="canonical" href="{{ base_url }}/events" />
|
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
|
|
<link rel="icon" type="image/png" href="/static/favicon.png" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root { --brand: #1f4ea3; --brand2: #3978e0; --bg: #eef4ff; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; font-family: Manrope, sans-serif; background: var(--bg); color: #15203b; min-height: 100vh; }
|
|
.wrap { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 60px; }
|
|
.back-btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
font-size: 13px; font-weight: 700; color: var(--brand);
|
|
text-decoration: none; margin-bottom: 24px;
|
|
padding: 8px 16px; border-radius: 999px;
|
|
background: #fff; border: 1px solid #c8d8f7; transition: .15s;
|
|
}
|
|
.back-btn:hover { background: #eef4ff; transform: translateX(-2px); }
|
|
h1 { font-size: 28px; font-weight: 800; color: #1a3e79; margin: 0 0 24px; }
|
|
.top3 { margin-bottom: 32px; }
|
|
.top3-label {
|
|
font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
|
|
text-transform: uppercase; color: #7a9bc0; margin-bottom: 14px;
|
|
}
|
|
.top3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
.top3-card {
|
|
background: #fff; border-radius: 16px; border: 1px solid #dae6ff;
|
|
box-shadow: 0 6px 20px rgba(16,43,95,.08);
|
|
overflow: hidden; text-decoration: none; color: inherit;
|
|
transition: .18s ease; display: flex; flex-direction: column;
|
|
}
|
|
.top3-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16,43,95,.14); }
|
|
.top3-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
|
|
.top3-card .no-img { width: 100%; height: 100px; background: linear-gradient(135deg, #e8f4f0, #d0eee4); display: flex; align-items: center; justify-content: center; }
|
|
.top3-card .no-img-icon { font-size: 36px; opacity: .5; }
|
|
.top3-card-body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
|
|
.event-date-badge {
|
|
display: inline-block; background: linear-gradient(135deg,#1f4ea3,#3978e0);
|
|
color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px;
|
|
padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; align-self: flex-start;
|
|
}
|
|
.top3-card-title { font-size: 14px; font-weight: 800; color: #1a3e79; line-height: 1.4; flex: 1; margin: 0 0 12px; }
|
|
.top3-card-excerpt { font-size: 12px; color: #5a7090; line-height: 1.55; margin: 0 0 12px; flex: 1;
|
|
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.read-more { font-size: 12px; font-weight: 700; color: var(--brand2); }
|
|
.divider { border: none; border-top: 2px solid #e0eaff; margin: 0 0 24px; }
|
|
.rest-label { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #7a9bc0; margin-bottom: 16px; }
|
|
.event-row {
|
|
background: #fff; border-radius: 14px; border: 1px solid #dae6ff;
|
|
display: flex; gap: 0; overflow: hidden; margin-bottom: 12px;
|
|
text-decoration: none; color: inherit;
|
|
transition: .18s ease; box-shadow: 0 4px 14px rgba(16,43,95,.06);
|
|
}
|
|
.event-row:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,43,95,.12); }
|
|
.event-row img { width: 120px; height: 90px; object-fit: cover; flex-shrink: 0; }
|
|
.event-row .no-img-row { width: 80px; flex-shrink: 0; background: linear-gradient(135deg, #e8f4f0, #d0eee4); }
|
|
.event-row-body { padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; }
|
|
.event-row-date { font-size: 11px; color: #3978e0; font-weight: 700; margin-bottom: 4px; }
|
|
.event-row-title { font-size: 14px; font-weight: 800; color: #1a3e79; line-height: 1.35; margin: 0 0 6px; }
|
|
.event-row-excerpt { font-size: 12px; color: #5a7090; line-height: 1.5; margin: 0;
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.empty { text-align: center; padding: 60px 0; color: #9ab0d0; font-size: 15px; }
|
|
@media (max-width: 700px) { .top3-grid { grid-template-columns: 1fr; } .event-row img { width: 90px; height: 70px; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<a href="/" class="back-btn">← На главную</a>
|
|
<h1>Мероприятия MONT</h1>
|
|
|
|
{% if events %}
|
|
{% set top3 = events[:3] %}
|
|
{% set rest = events[3:] %}
|
|
|
|
<div class="top3">
|
|
<div class="top3-label">Ближайшие мероприятия</div>
|
|
<div class="top3-grid">
|
|
{% for e in top3 %}
|
|
<a class="top3-card" href="/events/{{ e.slug }}">
|
|
{% if e.image %}
|
|
<img src="/static/{{ e.image }}" alt="{{ e.title }}" />
|
|
{% else %}
|
|
<div class="no-img"><span class="no-img-icon">📅</span></div>
|
|
{% endif %}
|
|
<div class="top3-card-body">
|
|
<span class="event-date-badge">{{ e.event_date[8:10] }}.{{ e.event_date[5:7] }}.{{ e.event_date[:4] }}</span>
|
|
<h2 class="top3-card-title">{{ e.title }}</h2>
|
|
<p class="top3-card-excerpt">{{ e.body | striptags | truncate(180, true, '...') }}</p>
|
|
<span class="read-more">Подробнее →</span>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if rest %}
|
|
<hr class="divider" />
|
|
<div class="rest-label">Все мероприятия</div>
|
|
{% for e in rest %}
|
|
<a class="event-row" href="/events/{{ e.slug }}">
|
|
{% if e.image %}
|
|
<img src="/static/{{ e.image }}" alt="{{ e.title }}" />
|
|
{% else %}
|
|
<div class="no-img-row"></div>
|
|
{% endif %}
|
|
<div class="event-row-body">
|
|
<div class="event-row-date">📅 {{ e.event_date[8:10] }}.{{ e.event_date[5:7] }}.{{ e.event_date[:4] }}</div>
|
|
<div class="event-row-title">{{ e.title }}</div>
|
|
<p class="event-row-excerpt">{{ e.body | striptags | truncate(160, true, '...') }}</p>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<div class="empty">Актуальных мероприятий нет</div>
|
|
{% endif %}
|
|
</div>
|
|
</body>
|
|
</html>
|