Files
landing/index.html
2026-01-04 20:22:16 +08:00

329 lines
12 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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 lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPTV Project</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #e0e0e0;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
min-height: 100vh;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 60px 20px;
}
header {
text-align: center;
margin-bottom: 50px;
}
.logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #64ffda 0%, #4fd1c5 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 2.5rem;
box-shadow: 0 10px 40px rgba(100, 255, 218, 0.3);
}
h1 {
font-size: 3rem;
color: #fff;
margin-bottom: 15px;
font-weight: 700;
letter-spacing: -1px;
}
.subtitle {
color: #8892b0;
font-size: 1.3rem;
max-width: 600px;
margin: 0 auto;
}
.hero-badge {
display: inline-block;
background: rgba(100, 255, 218, 0.1);
border: 1px solid rgba(100, 255, 218, 0.3);
color: #64ffda;
padding: 8px 16px;
border-radius: 30px;
font-size: 0.9rem;
margin-bottom: 20px;
}
section {
background: rgba(22, 33, 62, 0.8);
backdrop-filter: blur(10px);
padding: 35px;
border-radius: 16px;
margin-bottom: 25px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
section:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
h2 {
color: #fff;
margin-bottom: 20px;
font-size: 1.6rem;
display: flex;
align-items: center;
gap: 12px;
}
h2 .icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #64ffda 0%, #4fd1c5 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
p {
color: #b0b0b0;
margin-bottom: 15px;
font-size: 1.05rem;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 12px 0;
color: #b0b0b0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
gap: 10px;
}
li:last-child {
border-bottom: none;
}
li::before {
content: "→";
color: #64ffda;
font-weight: bold;
margin-right: 5px;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 25px;
}
.feature {
text-align: center;
padding: 30px 20px;
background: rgba(26, 26, 46, 0.6);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.feature:hover {
background: rgba(100, 255, 218, 0.05);
border-color: rgba(100, 255, 218, 0.2);
}
.feature .icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(100, 255, 218, 0.2) 0%, rgba(79, 209, 197, 0.2) 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 1.5rem;
}
.feature h3 {
color: #fff;
margin-bottom: 10px;
font-size: 1.1rem;
}
.feature p {
font-size: 0.95rem;
margin-bottom: 0;
}
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.link-card {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: rgba(26, 26, 46, 0.6);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
text-decoration: none;
color: #e0e0e0;
transition: all 0.3s ease;
}
.link-card:hover {
background: rgba(100, 255, 218, 0.08);
border-color: rgba(100, 255, 218, 0.3);
transform: translateX(5px);
}
.link-card .icon {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #64ffda 0%, #4fd1c5 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.link-card span {
font-weight: 500;
}
.link-card small {
display: block;
color: #8892b0;
font-size: 0.85rem;
margin-top: 3px;
}
.code-block {
background: #0d1117;
padding: 20px;
border-radius: 10px;
margin-top: 15px;
overflow-x: auto;
border: 1px solid rgba(100, 255, 218, 0.2);
}
.code-block code {
color: #64ffda;
font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
font-size: 0.95rem;
}
footer {
text-align: center;
padding: 40px 20px;
color: #5a6a8a;
}
footer a {
color: #64ffda;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<header>
<span class="hero-badge">✨ Открытый исходный код</span>
<div class="logo">📺</div>
<h1>IPTV Project</h1>
<p class="subtitle">Мощная и удобная платформа для агрегации, управления и воспроизведения IPTV плейлистов</p>
</header>
<section>
<h2><span class="icon"></span> О проекте</h2>
<p>IPTV Project — это комплексное решение для работы с IPTV контентом. Платформа объединяет плейлисты из разных источников, проверяет их актуальность и предоставляет единый интерфейс для просмотра. Проект полностью открыт и развивается силами сообщества.</p>
</section>
<section>
<h2><span class="icon"></span> Ключевые возможности</h2>
<div class="features">
<div class="feature">
<div class="icon">📋</div>
<h3>Агрегация плейлистов</h3>
<p>Объединение источников в единый универсальный плейлист</p>
</div>
<div class="feature">
<div class="icon"></div>
<h3>Проверка каналов</h3>
<p>Автоматическое отслеживание работоспособности потоков</p>
</div>
<div class="feature">
<div class="icon">🐳</div>
<h3>Docker-контейнеры</h3>
<p>Простое развёртывание в любой среде</p>
</div>
<div class="feature">
<div class="icon">⚙️</div>
<h3>CLI-утилита</h3>
<p>Полное управление из командной строки</p>
</div>
</div>
</section>
<section>
<h2><span class="icon">🔗</span> Ресурсы проекта</h2>
<div class="links-grid">
<a href="https://git.axenov.dev/IPTV" class="link-card" target="_blank">
<div class="icon">🐙</div>
<div>
<span>Репозиторий</span>
<small>git.axenov.dev/IPTV</small>
</div>
</a>
<a href="https://m3u.su/docs" class="link-card" target="_blank">
<div class="icon">📚</div>
<div>
<span>Документация</span>
<small>Подробные руководства</small>
</div>
</a>
<a href="https://m3u.su" class="link-card" target="_blank">
<div class="icon">🌐</div>
<div>
<span>Веб-интерфейс</span>
<small>m3u.su</small>
</div>
</a>
<a href="https://t.me/iptv_aggregator" class="link-card" target="_blank">
<div class="icon">✈️</div>
<div>
<span>Telegram-канал</span>
<small>Новости и обновления</small>
</div>
</a>
</div>
</section>
<section>
<h2><span class="icon">🛠️</span> Стек технологий</h2>
<ul>
<li>Docker & Docker Compose для контейнеризации</li>
<li>Nginx как веб-сервер и прокси</li>
<li>KeyDB для высокопроизводительного кэширования</li>
<li>Bash-скрипты для CLI-утилит</li>
<li>Поддержка форматов M3U и M3U8</li>
</ul>
</section>
<section>
<h2><span class="icon">🚀</span> Начало работы</h2>
<p>Для быстрой установки и настройки выполните следующую команду:</p>
<div class="code-block">
<code>wget -O - https://git.axenov.dev/IPTV/iptv-docker/raw/branch/master/iptv | bash -s -- init</code>
</div>
</section>
<footer>
<p>IPTV Project — бесплатное ПО с открытым исходным кодом</p>
<p style="margin-top: 10px;">Код доступен на <a href="https://git.axenov.dev/IPTV" target="_blank">Gitea</a></p>
</footer>
</div>
</body>
</html>