116 lines
6.0 KiB
HTML
116 lines
6.0 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{{ event.title }} — MONT</title>
|
|
<meta name="description" content="{{ event.body[:160] | striptags | replace('\n',' ') }}" />
|
|
<meta name="robots" content="index, follow" />
|
|
<link rel="canonical" href="{{ base_url }}/events/{{ event.slug }}" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="{{ base_url }}/events/{{ event.slug }}" />
|
|
<meta property="og:title" content="{{ event.title }} — MONT" />
|
|
{% if event.image %}<meta property="og:image" content="{{ base_url }}/static/{{ event.image }}" />{% endif %}
|
|
<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(1100px, 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: 20px;
|
|
padding: 8px 16px; border-radius: 999px;
|
|
background: #fff; border: 1px solid #c8d8f7; transition: .15s ease;
|
|
}
|
|
.back-btn:hover { background: #eef4ff; transform: translateX(-2px); }
|
|
.article-card {
|
|
background: #fff; border-radius: 20px;
|
|
border: 1px solid #dae6ff;
|
|
box-shadow: 0 12px 40px rgba(16,43,95,.1);
|
|
overflow: hidden;
|
|
}
|
|
.article-header { display: flex; gap: 20px; align-items: flex-start; padding: 28px 32px 0; }
|
|
.article-hero-img { flex-shrink: 0; width: 160px; height: 106px; object-fit: cover; border-radius: 12px; display: block; }
|
|
.article-header-text { flex: 1; min-width: 0; }
|
|
.article-body-wrap { padding: 20px 32px 36px; }
|
|
.event-date-badge {
|
|
display: inline-block; background: linear-gradient(135deg,#1f4ea3,#3978e0);
|
|
color: #fff; font-size: 12px; font-weight: 800;
|
|
padding: 4px 14px; border-radius: 999px; margin-bottom: 10px;
|
|
}
|
|
.article-title { font-size: 24px; font-weight: 800; color: #1a3e79; margin: 0; line-height: 1.25; }
|
|
.article-body { font-size: 15px; color: #2e3f58; line-height: 1.75; }
|
|
.article-body p { margin: 0 0 16px; }
|
|
.article-body p:last-child { margin-bottom: 0; }
|
|
.article-body a { color: var(--brand); font-weight: 600; text-decoration: none; }
|
|
.article-body a:hover { text-decoration: underline; }
|
|
.article-body strong, .article-body b { font-weight: 700; color: #1a3e79; }
|
|
.article-body em, .article-body i { font-style: italic; }
|
|
.article-body ul, .article-body ol { margin: 0 0 16px 20px; padding: 0; }
|
|
.article-body li { margin-bottom: 6px; }
|
|
.article-body h2, .article-body h3, .article-body h4 { font-weight: 800; color: #1a3e79; margin: 20px 0 10px; }
|
|
.article-body h2 { font-size: 20px; }
|
|
.article-body h3 { font-size: 17px; }
|
|
.article-body blockquote { border-left: 3px solid var(--brand); margin: 16px 0; padding: 8px 16px; background: #f0f5ff; border-radius: 0 8px 8px 0; color: #526079; }
|
|
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
|
|
.article-body th, .article-body td { border: 1px solid #dae6ff; padding: 8px 12px; text-align: left; }
|
|
.article-body th { background: #eef4ff; font-weight: 700; color: #1a3e79; }
|
|
.article-contact { margin-top: 28px; padding-top: 20px; border-top: 1px solid #e8f0ff; font-size: 13px; color: #526079; }
|
|
.article-contact a { color: var(--brand); font-weight: 700; text-decoration: none; }
|
|
@media (max-width: 640px) {
|
|
.article-header { flex-direction: column; padding: 20px 20px 0; }
|
|
.article-hero-img { width: 100%; height: 140px; }
|
|
.article-body-wrap { padding: 16px 20px 28px; }
|
|
.article-title { font-size: 20px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<a href="/events" class="back-btn">← Все мероприятия</a>
|
|
<article class="article-card">
|
|
<div class="article-header">
|
|
{% if event.image %}
|
|
<img class="article-hero-img" src="/static/{{ event.image }}" alt="{{ event.title }}" />
|
|
{% endif %}
|
|
<div class="article-header-text">
|
|
<span class="event-date-badge">📅 {{ event.event_date[8:10] }}.{{ event.event_date[5:7] }}.{{ event.event_date[:4] }}</span>
|
|
<h1 class="article-title">{{ event.title }}</h1>
|
|
</div>
|
|
</div>
|
|
<div class="article-body-wrap">
|
|
<div class="article-body">
|
|
{% if '<' in event.body %}
|
|
{{ event.body | safe }}
|
|
{% else %}
|
|
{% for paragraph in event.body.split('\n\n') %}
|
|
<p>{{ paragraph }}</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
{% if event.register_url %}
|
|
<div style="margin-top:24px;">
|
|
<a href="{{ event.register_url }}" target="_blank" rel="noopener"
|
|
style="display:inline-block;background:linear-gradient(135deg,#1f4ea3,#3978e0);
|
|
color:#fff;font-weight:800;font-size:15px;padding:12px 28px;
|
|
border-radius:12px;text-decoration:none;transition:.15s;"
|
|
onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
|
|
Зарегистрироваться →
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
<div class="article-contact">
|
|
По вопросам участия: <a href="https://www.mont.ru/ru-ru/events" target="_blank" rel="noopener">mont.ru/events</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</body>
|
|
</html>
|