shaman/workshop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Загрузить файлы в «frontend»

Browse source
This commit is contained in:
shaman_lesnoy 2025-03-18 01:14:09 +03:00
parent 40f516ccf0
commit a122ce5499
5 changed files with 1296 additions and 1171 deletions
Download patch file Download diff file Expand all files Collapse all files

516
frontend/main.css
View file

@ -1,247 +1,269 @@
body { body {
background-color: #1B2838; background-color: #1B2838;
color: white; color: white;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
height: 100vh; min-height: 100vh;
overflow: auto; overflow: auto;
} font-family: Arial, sans-serif;
}
.main-container {
display: flex; .main-container {
justify-content: center; display: flex;
align-items: flex-start; justify-content: center;
width: 100%; align-items: flex-start;
padding-top: 50px; width: 100%;
box-sizing: border-box; max-width: 1200px;
} padding: 20px;
box-sizing: border-box;
.image-wrapper { }
background-color: #233B53;
width: 950px; .image-wrapper {
min-height: 555px; background-color: #233B53;
display: flex; width: 100%;
flex-direction: row; max-width: 950px;
justify-content: flex-start; min-height: 555px;
align-items: flex-start; display: flex;
position: relative; flex-direction: row;
border-radius: 5px; justify-content: flex-start;
overflow: hidden; align-items: flex-start;
flex-wrap: wrap; position: relative;
height: auto; border-radius: 5px;
} overflow: hidden;
flex-wrap: wrap;
.image-container { height: auto;
position: relative; box-sizing: border-box;
width: 635px; }
height: 360px;
padding-top: 15px; .image-container {
padding-left: 15px; position: relative;
} width: 635px;
height: 360px;
.image-container img { padding: 15px 15px 0 15px;
width: 100%; }
height: 100%;
object-fit: contain; .image-container img {
} width: 100%;
height: 100%;
.details-container { object-fit: cover;
width: 635px; border-radius: 5px;
height: auto; }
background-color: #19222C;
border: 3px solid #35465E; .details-container {
box-sizing: border-box; width: 635px;
margin-top: 20px; height: auto;
display: flex; background-color: #19222C;
flex-direction: column; border: 3px solid #35465E;
justify-content: flex-start; box-sizing: border-box;
padding: 10px 15px 10px 15px; margin-top: 20px;
margin-left: 15px; display: flex;
position: relative; flex-direction: column;
} justify-content: flex-start;
padding: 15px;
.card-title { margin-left: 15px;
font-size: 20px; position: relative;
font-family: Arial, sans-serif; }
font-weight: bold;
margin: 0; .card-title {
} font-size: 20px;
font-weight: bold;
.description { margin: 0;
font-size: 16px; }
font-family: Arial, sans-serif;
color: #A1B0C7; .description {
margin-top: 10px; font-size: 15px;
line-height: 1.5; color: #A1B0C7;
} margin-top: 10px;
line-height: 1.5;
.download-btn { word-wrap: break-word;
width: 138px; text-align: center;
height: 35px; }
background: linear-gradient(to bottom, #A4D007, #536904);
color: white; .description img {
border: none; max-width: 100%;
border-radius: 2px; height: auto;
font-family: Arial, sans-serif; display: block;
font-size: 19px; margin: 10px 0;
cursor: pointer; border-radius: 5px;
position: absolute; }
top: 10px;
right: 15px; .download-btn {
} width: 138px;
height: 35px;
.download-btn:hover { background: linear-gradient(to bottom, #A4D007, #536904);
background: linear-gradient(to bottom, #8DC50E, #475F2D); color: white;
} border: none;
border-radius: 2px;
.game-mode { font-size: 19px;
position: absolute; cursor: pointer;
top: 15px; position: absolute;
left: 660px; top: 15px;
font-size: 13px; right: 15px;
color: #A1B0C7; }
font-family: Arial, sans-serif;
font-weight: normal; .download-btn:hover {
padding-left: 5px; background: linear-gradient(to bottom, #8DC50E, #475F2D);
} }
.dynamic-data { .game-mode,
font-size: 14px; .tags,
font-weight: normal; .file-size,
color: white; .added-time {
} font-size: 13px;
color: #A1B0C7;
.tags { font-weight: normal;
position: absolute; padding-left: 5px;
top: 100px; margin-top: 10px;
left: 660px; }
font-size: 13px;
color: #A1B0C7; .game-mode { position: absolute; top: 15px; left: 660px; }
font-family: Arial, sans-serif; .tags { position: absolute; top: 100px; left: 660px; }
font-weight: normal; .file-size { position: absolute; top: 150px; left: 660px; }
padding-left: 5px; .added-time { position: absolute; top: 170px; left: 660px; }
}
.dynamic-data {
.file-size { font-size: 14px;
position: absolute; font-weight: normal;
top: 150px; color: white;
left: 660px; margin-left: 5px;
font-size: 13px; }
color: #A1B0C7;
font-family: Arial, sans-serif; .file-size .dynamic-data,
font-weight: normal; .added-time .dynamic-data {
padding-left: 5px; color: #A1B0C7;
} }
.file-size .dynamic-data { .youtube-container {
font-size: 13px; margin-top: 15px;
font-weight: normal; width: 265px;
color: #A1B0C7; height: 150px;
margin-left: 16px; position: absolute;
} top: 210px;
left: 660px;
.added-time { }
position: absolute;
top: 170px; /* Мобильная адаптация */
left: 660px; @media screen and (max-width: 768px) {
font-size: 13px; body {
color: #A1B0C7; padding: 10px;
font-family: Arial, sans-serif; align-items: center;
font-weight: normal; }
padding-left: 5px;
} .main-container {
padding: 10px 0;
.added-time .dynamic-data { }
font-size: 13px;
font-weight: normal; .image-wrapper {
color: #A1B0C7; width: 100%;
margin-left: 45px; max-width: 100%;
} min-height: auto;
flex-direction: column;
.youtube-container { padding: 10px;
margin-top: 15px; }
width: 265px;
height: 150px; .image-container {
display: flex; width: 100%;
justify-content: center; height: auto;
align-items: center; padding: 0;
position: absolute; }
top: 210px;
left: 660px; .image-container img {
} width: 100%;
height: auto;
max-height: 300px;
@media screen and (max-width: 768px) { object-fit: cover;
body { }
flex-direction: column;
align-items: center; .details-container {
padding: 0 10px; width: 100%;
} margin: 10px 0 0 0;
padding: 15px;
.main-container { position: static;
padding-top: 20px; }
}
.card-title {
.image-wrapper { font-size: 18px;
width: 100%; }
flex-direction: column;
align-items: center; .description {
padding: 10px; font-size: 14px;
} }
.image-container { .description img {
width: 100%; max-width: 100%;
height: auto; height: auto;
padding: 0; }
}
.download-btn {
.image-container img { position: static;
width: 100%; width: 100%;
height: auto; height: 45px;
} font-size: 16px;
margin-top: 15px;
.details-container { }
width: 100%;
margin-top: 15px; .game-mode,
margin-left: 0; .tags,
padding: 15px; .file-size,
} .added-time {
position: static;
.download-btn { margin-top: 10px;
position: static; padding-left: 0;
margin-top: 15px; }
width: 100%;
height: 40px; .dynamic-data {
font-size: 18px; display: block;
} margin-left: 0;
font-size: 13px;
.game-mode, }
.tags,
.file-size, .youtube-container {
.added-time { position: static;
position: static; width: 100%;
margin-top: 10px; height: auto;
width: 100%; margin-top: 15px;
text-align: left; }
}
.youtube-container iframe {
.dynamic-data { width: 100%;
margin-left: 0; height: 200px;
font-size: 14px; }
} }
.youtube-container { @media screen and (max-width: 480px) {
position: static; .card-title {
margin-top: 15px; font-size: 16px;
width: 100%; }
height: auto;
} .description {
font-size: 13px;
.youtube-container iframe { }
width: 100%;
height: auto; .description img {
} max-width: 100%;
} height: auto;
}
.download-btn {
height: 40px;
font-size: 14px;
}
.game-mode,
.tags,
.file-size,
.added-time {
font-size: 12px;
}
.dynamic-data {
font-size: 12px;
}
.youtube-container iframe {
height: 180px;
}
}

134
frontend/main.html
View file

@ -1,70 +1,64 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru"> <html lang="ru">
<head>
<head> <meta charset="UTF-8">
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title data-i18n="title">workshop</title>
<title>workshop</title> <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}"> <link rel="icon" href="https://csgoworkshop.ru/favicon.ico" type="image/x-icon">
<<<<<<< HEAD <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="icon" href="https://csgoworkshop.ru/favicon.ico" type="image/x-icon"> <script src="{{ url_for('static', filename='main.js') }}" defer></script>
======= </head>
<link rel="icon" href="{{ url_for('static', filename='assets/steam-120.ico') }}" type="image/x-icon"> <body>
>>>>>>> 9cc0929a09596abeb93ee7f2711527fb5da25f7a <div class="main-container">
</head> <div class="image-wrapper">
<div class="image-container">
<img src="{{ image_url }}" alt="Map Image">
<body> </div>
<div class="main-container">
<div class="image-wrapper"> <div class="details-container">
<div class="image-container"> <div class="card-title">{{ map_title }}</div>
<img src="{{ image_url }}" alt="Map Image"> <div class="description">
</div> {{ description }}
</div>
<div class="details-container"> <a href="{{ url_for('download_bsp', image_path=image_url) }}">
<div class="card-title">{{ map_title }}</div> <button class="download-btn" data-i18n="download">Скачать</button>
<div class="description"> </a>
{{ description }} </div>
</div>
<a href="{{ url_for('download_bsp', image_path=image_url) }}"> <div class="game-mode">
<button class="download-btn">Скачать</button> <span data-i18n="game_mode_label">Режим игры:</span>
</a> <span class="dynamic-data">{{ game_mode | default('Не указан') }}</span>
</div> </div>
<div class="game-mode"> <div class="tags">
<span>Режим игры:</span> <span data-i18n="tags_label">Метки:</span>
<span class="dynamic-data">{{ game_mode | default('Не указан') }}</span> <span class="dynamic-data">{{ tags | default('Не указаны') }}</span>
</div> </div>
<div class="tags"> <div class="file-size">
<span>Метки:</span> <span data-i18n="file_size_label">Размер файла:</span>
<span class="dynamic-data">{{ tags | default('Не указаны') }}</span> <span class="dynamic-data">{{ file_size | default('Не указан') }}</span>
</div> </div>
<div class="file-size"> <div class="added-time">
<span>Размер файла:</span> <span data-i18n="added_time_label">Добавлен:</span>
<span class="dynamic-data">{{ file_size | default('Не указан') }}</span> <span class="dynamic-data">{{ added_time | default('Не указано') }}</span>
</div> </div>
<div class="added-time"> {% if youtube_link %}
<span>Добавлен:</span> <div class="youtube-container">
<span class="dynamic-data">{{ added_time | default('Не указано') }}</span> <iframe
</div> width="265"
height="150"
{% if youtube_link %} src="{{ youtube_link | replace('watch?v=', 'embed/') }}"
<div class="youtube-container"> frameborder="0"
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
width="265" allowfullscreen>
height="150" </iframe>
src="{{ youtube_link | replace('watch?v=', 'embed/') }}" </div>
frameborder="0" {% endif %}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" </div>
allowfullscreen> </div>
</iframe> </body>
</div> </html>
{% endif %}
</div>
</div>
</body>
</html>

83
frontend/main.js
View file

@ -1,8 +1,75 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const cards = document.querySelectorAll('.card'); const translations = {
cards.forEach(card => { ru: {
card.addEventListener('click', () => { title: "workshop",
window.location.href = '/main'; download: "Скачать",
}); game_mode_label: "Режим игры:",
}); tags_label: "Метки:",
}); file_size_label: "Размер файла:",
added_time_label: "Добавлен:"
},
en: {
title: "Workshop",
download: "Download",
game_mode_label: "Game Mode:",
tags_label: "Tags:",
file_size_label: "File Size:",
added_time_label: "Added:"
}
};
const savedLang = localStorage.getItem('selectedLanguage');
const browserLang = (navigator.language || navigator.userLanguage).split('-')[0];
const defaultLang = savedLang && translations[savedLang] ? savedLang : (translations[browserLang] ? browserLang : 'ru');
function translatePage(lang) {
document.querySelectorAll('[data-i18n]').forEach(element => {
const key = element.getAttribute('data-i18n');
if (translations[lang][key]) {
element.innerHTML = translations[lang][key];
} else {
console.warn(`Translation missing for key: ${key} in language: ${lang}`);
}
});
document.documentElement.lang = lang;
localStorage.setItem('selectedLanguage', lang);
}
function convertBBCodeToMarkdown(text) {
let converted = text
.replace(/\n\s*\n/g, '\n\n') // Убираем лишние пробелы между строками
.trim();
// Преобразование [h1] и [h3] в Markdown-заголовки
converted = converted.replace(/\[h1\](.*?)\[\/h1\]/g, '# $1');
converted = converted.replace(/\[h3\](.*?)\[\/h3\]/g, '### $1');
// Преобразование изображений и ссылок
converted = converted.replace(/\[url=([^\]]+)\]\[img\]([^\[]+)\[\/img\]\[\/url\]/g, '[![]($2)]($1)');
converted = converted.replace(/\[img\]([^\[]+)\[\/img\]/g, '![]($1)');
converted = converted.replace(/\[url=([^\]]+)\]([^\[]+)\[\/url\]/g, '[$2]($1)');
return converted;
}
function renderDescription() {
const descriptionElement = document.querySelector('.description');
if (descriptionElement && window.marked) {
const rawText = descriptionElement.textContent;
const markdownText = convertBBCodeToMarkdown(rawText);
descriptionElement.innerHTML = marked.parse(markdownText);
} else {
console.warn('Marked.js не загружен или элемент .description не найден');
}
}
translatePage(defaultLang);
renderDescription();
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', () => {
window.location.href = '/main';
});
});
});

1397
frontend/workshop.css
View file

File diff suppressed because it is too large Load diff

337
frontend/workshop.html
View file

@ -1,180 +1,157 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru"> <html lang="ru">
<!-- НЕ ЛЕЗЬ СЮДА -->
<head> <head>
<meta charset="UTF-8"> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
<meta name="viewport" content="width=device-width, initial-scale=1.0"> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
<title>workshop</title> j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<<<<<<< HEAD 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
<link rel="icon" href="https://csgoworkshop.ru/favicon.ico" type="image/x-icon"> })(window,document,'script','dataLayer','GTM-5CSFWZX5');</script>
=======
<link rel="icon" href="{{ url_for('static', filename='assets/steam-120.ico') }}" type="image/x-icon"> <meta charset="UTF-8">
>>>>>>> 9cc0929a09596abeb93ee7f2711527fb5da25f7a <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='workshop.css') }}"> <title data-i18n="title">workshop</title>
<script src="{{ url_for('static', filename='workshop.js') }}" defer></script> <link rel="icon" href="https://csgoworkshop.ru/favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://csgoworkshop.ru/">
<!-- Yandex.Metrika counter --> <link rel="stylesheet" href="{{ url_for('static', filename='workshop.css') }}">
<script type="text/javascript"> <script src="{{ url_for('static', filename='workshop.js') }}" defer></script>
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date(); <script async src="https://www.googletagmanager.com/gtag/js?id=G-PGN3XJFDFF"></script>
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} <script>
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) window.dataLayer = window.dataLayer || [];
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
ym(99366428, "init", { gtag('config', 'G-PGN3XJFDFF');
clickmap:true, </script>
trackLinks:true, </head>
accurateTrackBounce:true <body>
}); <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5CSFWZX5"
</script> height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<noscript><div><img src="https://mc.yandex.ru/watch/99366428" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --> <div class="top-bar">
</head> <div class="left-text">
<p data-i18n="made_by">Сделал: ©️𝙎𝙃∆𝙈∆𝙉©️</p>
<body> <p data-i18n="description">Неофициальный сайт<br>с картами для CS:GO<br>из мастерской Steam</p>
<<<<<<< HEAD </div>
<div class="top-bar"> <h1 class="center-text" data-i18n="header">CS:GO Workshop</h1>
<div class="left-text"> <a href="https://cloud.shsr.ru/apps/forms/s/xr8NyqdpsodwcNnRBSrMzJ4N" class="contact-button" target="_blank" data-i18n="contact">Связаться</a>
<p>Сделал: ©️𝙎𝙃∆𝙈∆𝙉©️</p> </div>
<p>Неофициальный сайт<br>с картами для CS:GO<br>из мастерской Steam</p>
</div> <div class="main-container">
<h1 class="center-text">CS:GO Workshop</h1> <div class="cards-container">
<a href="https://cloud.s.shsr.ru/apps/forms/s/xr8NyqdpsodwcNnRBSrMzJ4N" class="contact-button" target="_blank">Связаться</a> {% for map in maps_data %}
======= <div class="card">
<div class="top-bar"> <a href="/main?image_url={{ get_image_path(map[0]) }}&map_title={{ map[1] }}&{{ filters }}">
<div class="left-text"> <img src="{{ get_image_path(map[0]) }}" alt="Map Image" width="200" height="110">
<p>Сделал: ©️𝙎𝙃∆𝙈∆𝙉©️</p> </a>
<p>Неофициальный сайт<br>с картами для CS:GO<br>из мастерской Steam</p> <img src="{{ get_star_image(map[2]) }}" alt="{{ map[2] }} stars" class="stars" width="81" height="14">
>>>>>>> 9cc0929a09596abeb93ee7f2711527fb5da25f7a <div class="card-title">{{ map[1] }}</div>
</div> <div class="description-popup">
<h1 class="center-text">Добро пожаловать в Workshop</h1> <strong>{{ map[1] }}</strong>
<a href="https://cloud.s.shsr.ru/apps/forms/s/xr8NyqdpsodwcNnRBSrMzJ4N" class="contact-button" target="_blank">Связаться</a> <!-- Добавлен target="_blank" --> <p>{{ map[3] }}</p>
</div> </div>
</div>
{% endfor %}
</div>
<div class="right-rectangle">
<div class="sort-button-container">
<div class="main-container"> <button class="sort-button" data-i18n="sort_by_date">Сортировать по дате</button>
<div class="cards-container"> </div>
{% for map in maps_data %} <div class="game-modes">
<div class="card"> <div class="show-products-title" data-i18n="show_products">Показать продукты, попадающие в каждую из выбранных категорий:</div>
<a href="/main?image_url={{ get_image_path(map[0]) }}&map_title={{ map[1] }}&{{ filters }}"> <div class="game-modes-title" data-i18n="game_modes">РЕЖИМ ИГРЫ</div>
<img src="{{ get_image_path(map[0]) }}" alt="Map Image" width="200" height="110">
</a> {% for mode, label in {
<img src="{{ get_star_image(map[2]) }}" alt="{{ map[2] }} stars" class="stars" width="81" height="14"> "Classic": "Классический",
<div class="card-title">{{ map[1] }}</div> "Deathmatch": "Бой насмерть",
<div class="description-popup"> "Demolition": "Уничтожение объекта",
<strong>{{ map[1] }}</strong> "Armsrace": "Гонка вооружений",
<p>{{ map[3] }}</p> "Custom": "Пользовательский",
</div> "Training": "Обучение",
</div> "Co-op Strike": "Совместный налёт",
{% endfor %} "Wingman": "Напарники",
</div> "Flying_Scoutsman": "Перелётные снайперы"
}.items() %}
<div class="right-rectangle"> <label class="game-mode">
<div class="sort-button-container"> <input type="checkbox" class="game-mode-checkbox" value="{{ mode }}" {% if mode in filters %}checked{% endif %}>
<button class="sort-button">Сортировать по дате</button> <span data-i18n="game_mode_{{ mode }}">{{ label }}</span>
</div> </label>
<div class="game-modes"> {% endfor %}
<div class="show-products-title"> </div>
Показать продукты, попадающие в каждую из выбранных категорий: <div class="search-container">
</div> <form method="get" action="/">
<div class="search-input-container">
<div class="game-modes-title">РЕЖИМ ИГРЫ</div> <input type="text" id="search" class="search-input" name="search_title" data-i18n-placeholder="search_placeholder" placeholder="Поиск по названию" value="{{ request.args.get('search_title', '') }}">
<button class="search-button" type="submit">
{% for mode, label in { <img src="/images/search-icon.png" alt="Поиск">
"Classic": "Классический", </button>
"Deathmatch": "Бой насмерть", </div>
"Demolition": "Уничтожение объекта", </form>
"Armsrace": "Гонка вооружений", </div>
"Custom": "Пользовательский", </div>
"Training": "Обучение",
"Co-op Strike": "Совместный налёт", <div id="sortModal" class="modal">
"Wingman": "Напарники", <div class="modal-content">
"Flying Scoutsman": "Перелётные снайперы" <span class="close-btn">×</span>
}.items() %} <h2 data-i18n="sort_by_date">Сортировать по дате</h2>
<label class="game-mode"> <div class="modal-rectangle">
<input type="checkbox" class="game-mode-checkbox" value="{{ mode }}" {% if mode in filters %}checked{% endif %}> <span class="text-left" data-i18n="from">С</span>
{{ label }} <div class="first-rectangle">
</label> <input type="date" class="date-input" />
{% endfor %} </div>
</div> <span class="text-center" data-i18n="to">ПО</span>
<div class="search-container"> <div class="second-rectangle">
<form method="get" action="/"> <input type="date" class="date-input" />
<div class="search-input-container"> </div>
<input type="text" id="search" class="search-input" name="search_title" placeholder="Поиск по названию" value="{{ request.args.get('search_title', '') }}"> </div>
<button class="search-button" type="submit"> <button class="ok-button" data-i18n="ok">ОК</button>
<img src="/images/search-icon.png" alt="Поиск"> <button class="cancel-button" data-i18n="cancel">Отмена</button>
</button> </div>
</div> </div>
</form>
</div> <div class="filter-stars">
</div> <div class="filter-title">
<label data-i18n="filter_by_stars">Фильтр по количеству звезд:</label>
<div id="sortModal" class="modal"> </div>
<div class="modal-content"> <div class="stars-filter">
<span class="close-btn">&times;</span> <label><input type="checkbox" name="stars" value="1" {% if 'stars' in request.args and '1' in request.args.getlist('stars') %}checked{% endif %}> 1</label>
<h2>Сортировать по дате</h2> <label><input type="checkbox" name="stars" value="2" {% if 'stars' in request.args and '2' in request.args.getlist('stars') %}checked{% endif %}> 2</label>
<div class="modal-rectangle"> <label><input type="checkbox" name="stars" value="3" {% if 'stars' in request.args and '3' in request.args.getlist('stars') %}checked{% endif %}> 3</label>
<span class="text-left">С</span> <label><input type="checkbox" name="stars" value="4" {% if 'stars' in request.args and '4' in request.args.getlist('stars') %}checked{% endif %}> 4</label>
<div class="first-rectangle"> <label><input type="checkbox" name="stars" value="5" {% if 'stars' in request.args and '5' in request.args.getlist('stars') %}checked{% endif %}> 5</label>
<input type="date" class="date-input" /> </div>
</div> </div>
<span class="text-center">ПО</span>
<div class="second-rectangle"> <div class="pagination">
<input type="date" class="date-input" /> {% if page > 1 %}
</div> <a class="pagebtn" href="/?page={{ page - 1 }}&{{ filters }}"><</a>
</div> {% endif %}
<button class="ok-button">ОК</button>
<button class="cancel-button">Отмена</button> {% if page > 3 %}
</div> <a class="pagelink" href="/?page=1&{{ filters }}">1</a>
</div> <span class="pagination_space">...</span>
{% endif %}
<div class="filter-stars">
<div class="filter-title"> {% for p in range(1, total_pages + 1) %}
<label>Фильтр по количеству звезд:</label> {% if p >= page - 1 and p <= page + 2 %}
</div> {% if p == page %}
<div class="stars-filter"> <span class="pagelink" style="color: #417A9B;">{{ p }}</span>
<label><input type="checkbox" name="stars" value="1" {% if 'stars' in request.args and '1' in request.args.getlist('stars') %}checked{% endif %}> 1</label> {% else %}
<label><input type="checkbox" name="stars" value="2" {% if 'stars' in request.args and '2' in request.args.getlist('stars') %}checked{% endif %}> 2</label> <a class="pagelink" href="/?page={{ p }}&{{ filters }}">{{ p }}</a>
<label><input type="checkbox" name="stars" value="3" {% if 'stars' in request.args and '3' in request.args.getlist('stars') %}checked{% endif %}> 3</label> {% endif %}
<label><input type="checkbox" name="stars" value="4" {% if 'stars' in request.args and '4' in request.args.getlist('stars') %}checked{% endif %}> 4</label> {% endif %}
<label><input type="checkbox" name="stars" value="5" {% if 'stars' in request.args and '5' in request.args.getlist('stars') %}checked{% endif %}> 5</label> {% endfor %}
</div>
</div> {% if total_pages > 3 and page < total_pages - 2 %}
<span class="pagination_space">...</span>
<div class="pagination"> <a class="pagelink" href="/?page={{ total_pages }}&{{ filters }}">{{ total_pages }}</a>
{% if page > 1 %} {% endif %}
<a class="pagebtn" href="/?page={{ page - 1 }}&{{ filters }}">&#60;</a>
{% endif %} {% if page < total_pages %}
<a class="pagebtn" href="/?page={{ page + 1 }}&{{ filters }}">></a>
{% if page > 3 %} {% endif %}
<a class="pagelink" href="/?page=1&{{ filters }}">1</a> </div>
<span class="pagination_space">...</span> </div>
{% endif %} </body>
</html>
{% for p in range(1, total_pages + 1) %}
{% if p >= page - 1 and p <= page + 2 %}
{% if p == page %}
<span class="pagelink" style="color: #417A9B;">{{ p }}</span>
{% else %}
<a class="pagelink" href="/?page={{ p }}&{{ filters }}">{{ p }}</a>
{% endif %}
{% endif %}
{% endfor %}
{% if total_pages > 3 and page < total_pages - 2 %}
<span class="pagination_space">...</span>
<a class="pagelink" href="/?page={{ total_pages }}&{{ filters }}">{{ total_pages }}</a>
{% endif %}
{% if page < total_pages %}
<a class="pagebtn" href="/?page={{ page + 1 }}&{{ filters }}">&#62;</a>
{% endif %}
</div>
</div>
</body>
</html>