Artberry-web/templates/videos.html
2025-04-03 10:53:55 +03:00

128 lines
7.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
{% include 'navbar.html' %}
{% include 'subnav.html' %}
{% include 'tags_list.html' %}
<div class="container new-content">
<a class="new-content-text">НОВИНКИ</a>
<div class="small-cards-grid">
{% for video_data in videos[:5] %}
<div class="small-card">
<div class="small-card-cover">
<img src="{{ url_for('static', filename='thumbnails/' + video_data.video.video_thumbnail_file) }}" alt="Thumbnail" class="thumbnail">
<video class="preview-video" muted preload="none" data-src="{{ url_for('static', filename='videos/' + video_data.video.video_file) }}">
<source type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="small-card-info">
<div class="small-card-header">
<span class="small-card-text">{{ video_data.video.username }}</span>
<div class="small-card-stats">
<div class="small-stat">
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
<span class="small-card-text">{{ video_data.video.cookie_votes }}</span>
</div>
<div class="small-stat">
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
<span class="small-card-text">{{ video_data.views_count }}</span>
</div>
</div>
</div>
<p class="small-card-text">{{ video_data.video.video_name }}</p>
</div>
</div>
{% endfor %}
</div>
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
</div>
<div class="container popular-content">
<a class="popular-content-text">ПОПУЛЯРНОЕ</a>
<div class="cards-grid">
{% for video_data in popular_videos[:8] %}
<div class="card">
<div class="card-cover">
<img src="{{ url_for('static', filename='thumbnails/' + video_data.video.video_thumbnail_file) }}" alt="Thumbnail" class="thumbnail">
<video class="preview-video" muted preload="none" data-src="{{ url_for('static', filename='videos/' + video_data.video.video_file) }}">
<source type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="card-info">
<div class="card-header">
<span class="card-title" style="color: #3C3882;">{{ video_data.video.username }}</span>
<div class="card-stats">
<div class="stat">
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
<span style="color: #8784C9;">{{ video_data.video.cookie_votes }}</span>
</div>
<div class="stat">
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
<span style="color: #8784C9;">{{ video_data.views_count }}</span>
</div>
</div>
</div>
<p class="card-text" style="font-family: Nunito, sans-serif;">{{ video_data.video.video_name }}</p>
</div>
</div>
{% endfor %}
</div>
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
</div>
<div class="container viewed-content">
<a class="viewed-content-text">ПРОСМАТРИВАЕМОЕ</a>
<div class="cards-grid">
{% for video_data in most_viewed_videos[:8] %}
<div class="card">
<div class="card-cover">
<img src="{{ url_for('static', filename='thumbnails/' + video_data.video.video_thumbnail_file) }}" alt="Thumbnail" class="thumbnail">
<video class="preview-video" muted preload="none" data-src="{{ url_for('static', filename='videos/' + video_data.video.video_file) }}">
<source type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="card-info">
<div class="card-header">
<span class="card-title" style="color: #3C3882;">{{ video_data.video.username }}</span>
<div class="card-stats">
<div class="stat">
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
<span style="color: #8784C9;">{{ video_data.video.cookie_votes }}</span>
</div>
<div class="stat">
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
<span style="color: #8784C9;">{{ video_data.views_count }}</span>
</div>
</div>
</div>
<p class="card-text" style="font-family: Nunito, sans-serif;">{{ video_data.video.video_name }}</p>
</div>
</div>
{% endfor %}
</div>
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
</div>
<div class="container popular-categories">
<a class="popular-categories-text">ПОПУЛЯРНЫЕ КАТЕГОРИИ</a>
{% for i in range(6) %}
<div class="pc-card">
<div class="pc-card-cover"></div>
<div class="pc-card-info">
<div class="pc-card-stats">
<span class="category-name-text">Category</span>
<span class="categories-number" style="--length: 4;">14655</span>
</div>
</div>
</div>
{% endfor %}
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
</div>
<script src="{{ url_for('static', filename='js/hoverPreview.js') }}"></script>
</body>
</html>