143 lines
8.5 KiB
HTML
143 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
|
<html lang="ru" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>СпортПортал — футбол, теннис, хоккей, бокс</title>
|
|
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
|
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
|
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
|
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
|
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
|
<script src="design-system/icons/kt-ai-icons.js"></script>
|
|
<style>
|
|
a.kt-ai-btn { text-decoration: none; }
|
|
.kt-ai-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; flex: none; }
|
|
.sport-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
|
.sport-badge { width: 36px; height: 36px; border-radius: 10px; background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); display: grid; place-items: center; }
|
|
.sport-tile p { color: var(--kt-ai-fg-muted); font-size: 14px; }
|
|
.tile-more { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
|
|
.tile-more .kt-ai-chip { font-size: 12px; }
|
|
table.kt-ai-table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
|
.kt-ai-table th { text-align: left; font-weight: 500; color: var(--kt-ai-fg-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--kt-ai-border); }
|
|
.kt-ai-table td { padding: 10px; border-bottom: 1px solid var(--kt-ai-border); }
|
|
.kt-ai-table tr:last-child td { border-bottom: none; }
|
|
.kt-ai-table tr.top td { font-weight: 500; }
|
|
.kt-ai-table tr.zone-1 td:first-child { box-shadow: inset 3px 0 0 var(--kt-ai-fg); }
|
|
.kt-ai-table tr.zone-1 td, .kt-ai-table tr.zone-2 td { background: var(--kt-ai-bg-soft); }
|
|
.kt-ai-table tr.zone-2 td:first-child { box-shadow: inset 3px 0 0 var(--kt-ai-fg-muted); }
|
|
.kt-ai-table tr.zone-4 td:first-child { box-shadow: inset 3px 0 0 var(--kt-ai-fg-faint); }
|
|
.pos { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--kt-ai-bg); border: 1px solid var(--kt-ai-border); font-size: 12px; color: var(--kt-ai-fg-muted); }
|
|
tr .pos.lead { background: var(--kt-ai-primary); border-color: transparent; color: var(--kt-ai-bg); }
|
|
.zone-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--kt-ai-fg-muted); }
|
|
.zone-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 1px; }
|
|
.leg-white::before { background: var(--kt-ai-fg); }
|
|
.leg-mut::before { background: var(--kt-ai-fg-muted); }
|
|
.leg-dim::before { background: var(--kt-ai-fg-faint); }
|
|
.table-status { font-size: 12px; color: var(--kt-ai-fg-muted); margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
.table-status .kt-ai-chip { font-size: 11px; }
|
|
.nums td { text-align: center; font-variant-numeric: tabular-nums; }
|
|
.nums th { text-align: center; }
|
|
.table-scroll { overflow-x: auto; }
|
|
.league-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
|
|
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
.article { display: flex; flex-direction: column; gap: 10px; }
|
|
.article h3 { font-size: 16px; font-weight: 500; line-height: 1.35; }
|
|
.article .excerpt { color: var(--kt-ai-fg-muted); font-size: 14px; flex: 1; }
|
|
.article-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--kt-ai-fg-muted); }
|
|
.sport-banner { border-radius: var(--vibe-card-radius); background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border); padding: clamp(24px, 5vw, 44px); }
|
|
.sport-banner h2 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 8px; }
|
|
.sport-banner p { color: var(--kt-ai-fg-muted); max-width: 560px; }
|
|
.match-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--kt-ai-space-8, 28px); }
|
|
.match { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--vibe-card-radius); padding: 12px 16px; box-shadow: var(--kt-ai-card-shadow); min-width: 200px; flex: 1; }
|
|
.match .vs { display: flex; justify-content: space-between; gap: 10px; font-weight: 500; }
|
|
.match .score { color: var(--kt-ai-fg-muted); font-size: 20px; font-variant-numeric: tabular-nums; text-align: center; margin: 4px 0; }
|
|
.match .info { font-size: 12px; color: var(--kt-ai-fg-muted); text-align: center; }
|
|
@media (max-width: 900px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
|
|
@media (max-width: 600px) { .article-grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="kt-ai-pagehead">
|
|
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
|
<strong>СпортПортал</strong>
|
|
<span class="kt-ai-spacer"></span>
|
|
<nav style="display:flex; gap: 6px; flex-wrap: wrap; align-items:center">
|
|
<a class="kt-ai-btn" data-variant="ghost" href="#sports">Спорты</a>
|
|
<a class="kt-ai-btn" data-variant="ghost" href="#tables">Таблицы</a>
|
|
<a class="kt-ai-btn" data-variant="ghost" href="#articles">Статьи</a>
|
|
<a class="kt-ai-btn" data-variant="primary" href="#tables">Матчи дня</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="kt-ai-hero" data-align="center">
|
|
<div class="kt-ai-wrap">
|
|
<h1>Весь спорт — <span class="vibe-highlight">на одной странице</span></h1>
|
|
<p class="kt-ai-hero-sub">Футбол, теннис, хоккей и бокс: свежие результаты, таблицы чемпионатов и интересные статьи каждый день.</p>
|
|
<div class="kt-ai-hero-actions">
|
|
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#tables">Смотреть таблицы</a>
|
|
<a class="kt-ai-btn" data-size="lg" href="#articles">Читать статьи</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="sports" class="kt-ai-section" data-divider="true">
|
|
<div class="kt-ai-wrap">
|
|
<div class="kt-ai-section-head">
|
|
<h2>Разделы</h2>
|
|
<p>Выбери любимый вид спорта — новости, таблицы и результаты.</p>
|
|
</div>
|
|
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)" id="sports-grid"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tables" class="kt-ai-section" data-divider="true">
|
|
<div class="kt-ai-wrap">
|
|
<div class="kt-ai-section-head">
|
|
<h2>Таблицы чемпионатов</h2>
|
|
<p>Реальные данные из футбольных лиг — обновляются каждые 15 минут. Подсвечены лидеры.</p>
|
|
</div>
|
|
<div class="league-tabs" id="league-tabs"></div>
|
|
<div id="table-status" class="table-status"></div>
|
|
<div class="kt-ai-card table-scroll" style="margin-top:16px; padding: 8px 12px;">
|
|
<table class="kt-ai-table" id="league-table"></table>
|
|
</div>
|
|
<div class="zone-legend" id="zone-legend"></div>
|
|
<div id="matches" style="margin-top: var(--kt-ai-space-8, 28px)">
|
|
<h3 style="margin-bottom: 12px; font-weight: 500;">Ближайшие матчи</h3>
|
|
<div class="match-strip" id="match-strip"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="articles" class="kt-ai-section" data-divider="true">
|
|
<div class="kt-ai-wrap">
|
|
<div class="kt-ai-section-head">
|
|
<h2>Интересные статьи</h2>
|
|
<p>Анализы, истории и цифры — то, что стоит прочитать на этой неделе.</p>
|
|
</div>
|
|
<div class="article-grid" style="margin-top: var(--kt-ai-space-9)" id="article-grid"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="kt-ai-cta">
|
|
<div class="kt-ai-wrap">
|
|
<h2>Следим за спортом вместе</h2>
|
|
<p>Сайт обновляется каждый день: новые результаты, перемены в таблицах и свежие статьи.</p>
|
|
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#top" style="margin-top: 12px;">Наверх</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
|
<span>© 2026 СпортПортал</span>
|
|
<span class="kt-ai-spacer"></span>
|
|
<span>Футбол · Теннис · Хоккей · Бокс</span>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|