Рестайл общего шаблона и главной страницы

This commit is contained in:
2025-07-19 15:10:37 +08:00
parent 0b41503131
commit 1e188be6f3
2 changed files with 200 additions and 152 deletions

View File

@@ -10,119 +10,127 @@
{% block metakeywords %}самообновляемые,бесплатные,iptv-плейлисты,iptv,плейлисты{% endblock %}
{% block head %}
<style>
.card {transition: box-shadow .2s, transform .2s}
.card.hover-success:hover {transform: translateY(-7px); box-shadow: rgba(var(--bs-success-rgb), 1) 0 5px 20px -5px}
.card.hover-danger:hover {transform: translateY(-7px); box-shadow: rgba(var(--bs-danger-rgb), 1) 0 5px 20px -5px}
.card.hover-secondary:hover {transform: translateY(-7px); box-shadow: rgba(var(--bs-secondary-rgb), 1) 0 5px 20px -5px}
</style>
<script>
function setDefaultLogo(imgtag) {
imgtag.onerror = null
imgtag.src = '/no-tvg-logo.png'
}
</script>
{% endblock %}
{% block header %}
<div class="row text-muted small">
<div class="col-md">
Список изменён:&nbsp;{{ updatedAt }}&nbsp;МСК<br/>
Плейлистов в списке:&nbsp;<strong>{{ count }}</strong>
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
<div class="mb-2">
<h2 class="mb-0">Список плейлистов ({{ count }})</h2>
<div class="text-muted small">Изменён {{ updatedAt }} МСК</div>
</div>
<div class="col-md">
Состояние проверки:<br />
<span class="me-1">
<span class="badge me-1 bg-success text-dark">online</span>{{ onlineCount }}
</span>
<span class="me-1">
<span class="badge me-1 bg-danger text-dark">offline</span>{{ offlineCount }}
</span>
<span class="me-1">
<span class="badge me-1 bg-secondary text-dark" title="В очереди на проверку">unknown</span>{{ uncheckedCount }}
</span>
<div class="d-flex flex-wrap gap-2 mb-2">
<span class="badge bg-success">online: {{ onlineCount }}</span>
<span class="badge bg-danger">offline: {{ offlineCount }}</span>
<span class="badge bg-secondary">unknown: {{ uncheckedCount }}</span>
</div>
</div>
<hr/>
{% endblock %}
{% block content %}
<div class="table-responsive">
<table class="table table-responsive table-dark table-hover small">
<thead>
<tr>
<th class="col-1 text-center">Код</th>
<th class="col-8">Информация о плейлисте</th>
<th class="col-1 text-center">Каналов</th>
<th class="col-2 d-none d-sm-table-cell">Ссылка для ТВ</th>
</tr>
</thead>
<tbody>
<div class="row g-4">
{% for code, playlist in playlists %}
<tr class="pls" data-playlist-code="{{ code }}">
<td class="text-center font-monospace code">{{ code }}</td>
<td class="info">
{% if playlist.isOnline is same as(true) %}
<span class="badge small bg-success text-dark">online</span>
{% elseif playlist.isOnline is same as(false) %}
<span class="badge small bg-danger text-dark">offline</span>
{% elseif playlist.isOnline is same as(null) %}
<span class="badge small bg-secondary text-dark" title="В очереди на проверку">unknown</span>
{% endif %}
{% if "adult" in playlist.tags %}
<span class="badge small bg-warning text-dark" title="Есть каналы для взрослых!">18+</span>
{% endif %}
<a href="/{{ code }}/details" class="text-light fw-bold text-decoration-none">{{ playlist.name }}</a>
<div class="small mt-2">
<p class="my-1 d-none d-lg-block">
{% set statusClass = 'secondary' %}
{% if playlist.isOnline is same as(true) %}
{% set statusClass = 'success' %}
{% elseif playlist.isOnline is same as(false) %}
{% set statusClass = 'danger' %}
{% endif %}
<div class="col-md-6 col-lg-4">
<div class="card bg-dark text-light h-100 border border-{{ statusClass }} hover-{{ statusClass }} position-relative">
<a href="/{{ code }}/details" class="text-decoration-none">
<div class="card-header d-flex align-items-center gap-2">
<span class="font-monospace text-{{ statusClass }}">{{ code }}</span>
<span class="badge bg-{{ statusClass }} ms-auto">
{% if playlist.isOnline is same as(true) %}online
{% elseif playlist.isOnline is same as(false) %}offline
{% elseif playlist.isOnline is same as(null) %}unknown
{% endif %}
</span>
{% if "adult" in playlist.tags %}
<span class="badge bg-warning text-dark" title="Есть каналы для взрослых!">18+</span>
{% endif %}
</div>
</a>
<div class="card-body position-relative z-2">
<a href="/{{ code }}/details" class="text-decoration-none">
<h5 class="card-title text-light">{{ playlist.name }}</h5>
</a>
<p class="card-text small text-secondary">{{ playlist.description }}</p>
<div class="d-flex flex-wrap gap-2 mb-1">
<span class="badge border border-secondary">
<ion-icon name="videocam-outline" class="me-1"></ion-icon>
{% if playlist.isOnline is not same as(null) %}
{{ playlist.channels|length }}&nbsp;каналов
{% endif %}
</span>
{% if playlist.groups|length > 0 %}
<ion-icon name="folder-open-outline" title="Каналы разбиты на группы"></ion-icon>
<span class="badge border border-secondary">
<ion-icon name="folder-open-outline" class="me-1"></ion-icon>&nbsp;{{ playlist.groups|length }}&nbsp;групп
</span>
{% endif %}
{% if playlist.hasTvg %}
<ion-icon name="newspaper-outline" title="Есть программа передач"></ion-icon>
<span class="badge border border-secondary">
<ion-icon name="newspaper-outline" class="me-1"></ion-icon>&nbsp;ТВ-программа
</span>
{% endif %}
{% if playlist.hasCatchup %}
<ion-icon name="play-back-outline" title="Есть перемотка (архив)"></ion-icon>
<span class="badge border border-secondary">
<ion-icon name="play-back-outline" class="me-1"></ion-icon>&nbsp;Архив
</span>
{% endif %}
{{ playlist.description }}
</p>
{% if playlist.tags|length > 0 %}
<p class="my-1 d-none d-lg-block text-muted" title="Теги, присвоенные каналам при проверке">
<ion-icon name="pricetag-outline" class="me-1"></ion-icon>
{% for tag in playlist.tags %}
<span class="chtag">#{{ tag }}</span>
{% endfor %}
</p>
{% endif %}
<a href="/{{ code }}/details" class="text-light">Подробнее...</a>
</div>
</div>
</td>
<td class="text-center">
{% if (playlist.isOnline is not same as(null)) %}
{{ playlist.channels|length }}
{% else %}
?
{% endif %}
</td>
<td class="d-none d-sm-table-cell">
<span onclick="prompt('Скопируй адрес плейлиста. Если не работает, добавь \'.m3u\' в конец.', '{{ mirror_url(playlist.code) }}')"
title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
class="font-monospace cursor-pointer"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
<div class="card-footer cursor-pointer"
onclick="prompt('Скопируй адрес плейлиста. Если не работает, добавь \'.m3u\' в конец.', '{{ mirror_url(playlist.code) }}')"
title="Нажми чтобы скопировать"
>
{{ mirror_url(playlist.code) }}
</span>
</td>
</tr>
<div class="d-flex justify-content-between align-items-center small">
<span class="font-monospace text-truncate">
{{ mirror_url(playlist.code) }}
</span>
<ion-icon name="copy-outline"></ion-icon>
</div>
</div>
<a href="/{{ code }}/details" class="text-decoration-none">
</a>
</div>
</div>
{% endfor %}
</tbody>
</table>
{% if pageCount > 1 %}
<div aria-label="pages">
<ul class="pagination justify-content-center">
{% for page in range(1, pageCount) %}
{% if page == pageCurrent %}
<li class="page-item active" aria-current="page">
<span class="page-link">{{ page }}</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link bg-dark border-secondary text-light" href="page/{{ page }}">{{ page }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% if pageCount > 1 %}
<nav class="mt-4">
<ul class="pagination justify-content-center">
{% for page in range(1, pageCount) %}
{% if page == pageCurrent %}
<li class="page-item active" aria-current="page">
<span class="page-link">{{ page }}</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link bg-dark text-light" href="page/{{ page }}">{{ page }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
{% endif %}
</div>
{% endblock %}
{% block footer %}