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

176
frontend/main.css
View file

@ -6,8 +6,9 @@ body {
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
min-height: 100vh;
overflow: auto;
font-family: Arial, sans-serif;
}
.main-container {
@ -15,13 +16,15 @@ body {
justify-content: center;
align-items: flex-start;
width: 100%;
padding-top: 50px;
max-width: 1200px;
padding: 20px;
box-sizing: border-box;
}
.image-wrapper {
background-color: #233B53;
width: 950px;
width: 100%;
max-width: 950px;
min-height: 555px;
display: flex;
flex-direction: row;
@ -32,20 +35,21 @@ body {
overflow: hidden;
flex-wrap: wrap;
height: auto;
box-sizing: border-box;
}
.image-container {
position: relative;
width: 635px;
height: 360px;
padding-top: 15px;
padding-left: 15px;
padding: 15px 15px 0 15px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
object-fit: cover;
border-radius: 5px;
}
.details-container {
@ -58,24 +62,32 @@ body {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 10px 15px 10px 15px;
padding: 15px;
margin-left: 15px;
position: relative;
}
.card-title {
font-size: 20px;
font-family: Arial, sans-serif;
font-weight: bold;
margin: 0;
}
.description {
font-size: 16px;
font-family: Arial, sans-serif;
font-size: 15px;
color: #A1B0C7;
margin-top: 10px;
line-height: 1.5;
word-wrap: break-word;
text-align: center;
}
.description img {
max-width: 100%;
height: auto;
display: block;
margin: 10px 0;
border-radius: 5px;
}
.download-btn {
@ -85,11 +97,10 @@ body {
color: white;
border: none;
border-radius: 2px;
font-family: Arial, sans-serif;
font-size: 19px;
cursor: pointer;
position: absolute;
top: 10px;
top: 15px;
right: 15px;
}
@ -97,98 +108,59 @@ body {
background: linear-gradient(to bottom, #8DC50E, #475F2D);
}
.game-mode {
position: absolute;
top: 15px;
left: 660px;
.game-mode,
.tags,
.file-size,
.added-time {
font-size: 13px;
color: #A1B0C7;
font-family: Arial, sans-serif;
font-weight: normal;
padding-left: 5px;
margin-top: 10px;
}
.game-mode { position: absolute; top: 15px; left: 660px; }
.tags { position: absolute; top: 100px; left: 660px; }
.file-size { position: absolute; top: 150px; left: 660px; }
.added-time { position: absolute; top: 170px; left: 660px; }
.dynamic-data {
font-size: 14px;
font-weight: normal;
color: white;
margin-left: 5px;
}
.tags {
position: absolute;
top: 100px;
left: 660px;
font-size: 13px;
color: #A1B0C7;
font-family: Arial, sans-serif;
font-weight: normal;
padding-left: 5px;
}
.file-size {
position: absolute;
top: 150px;
left: 660px;
font-size: 13px;
color: #A1B0C7;
font-family: Arial, sans-serif;
font-weight: normal;
padding-left: 5px;
}
.file-size .dynamic-data {
font-size: 13px;
font-weight: normal;
color: #A1B0C7;
margin-left: 16px;
}
.added-time {
position: absolute;
top: 170px;
left: 660px;
font-size: 13px;
color: #A1B0C7;
font-family: Arial, sans-serif;
font-weight: normal;
padding-left: 5px;
}
.file-size .dynamic-data,
.added-time .dynamic-data {
font-size: 13px;
font-weight: normal;
color: #A1B0C7;
margin-left: 45px;
}
.youtube-container {
margin-top: 15px;
width: 265px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 210px;
left: 660px;
}
/* Мобильная адаптация */
@media screen and (max-width: 768px) {
body {
flex-direction: column;
padding: 10px;
align-items: center;
padding: 0 10px;
}
.main-container {
padding-top: 20px;
padding: 10px 0;
}
.image-wrapper {
width: 100%;
max-width: 100%;
min-height: auto;
flex-direction: column;
align-items: center;
padding: 10px;
}
@ -201,21 +173,36 @@ body {
.image-container img {
width: 100%;
height: auto;
max-height: 300px;
object-fit: cover;
}
.details-container {
width: 100%;
margin-top: 15px;
margin-left: 0;
margin: 10px 0 0 0;
padding: 15px;
position: static;
}
.card-title {
font-size: 18px;
}
.description {
font-size: 14px;
}
.description img {
max-width: 100%;
height: auto;
}
.download-btn {
position: static;
margin-top: 15px;
width: 100%;
height: 40px;
font-size: 18px;
height: 45px;
font-size: 16px;
margin-top: 15px;
}
.game-mode,
@ -224,24 +211,59 @@ body {
.added-time {
position: static;
margin-top: 10px;
width: 100%;
text-align: left;
padding-left: 0;
}
.dynamic-data {
display: block;
margin-left: 0;
font-size: 14px;
font-size: 13px;
}
.youtube-container {
position: static;
margin-top: 15px;
width: 100%;
height: auto;
margin-top: 15px;
}
.youtube-container iframe {
width: 100%;
height: 200px;
}
}
@media screen and (max-width: 480px) {
.card-title {
font-size: 16px;
}
.description {
font-size: 13px;
}
.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;
}
}

22
frontend/main.html
View file

@ -1,19 +1,14 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>workshop</title>
<title data-i18n="title">workshop</title>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<<<<<<< HEAD
<link rel="icon" href="https://csgoworkshop.ru/favicon.ico" type="image/x-icon">
=======
<link rel="icon" href="{{ url_for('static', filename='assets/steam-120.ico') }}" type="image/x-icon">
>>>>>>> 9cc0929a09596abeb93ee7f2711527fb5da25f7a
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="{{ url_for('static', filename='main.js') }}" defer></script>
</head>
<body>
<div class="main-container">
<div class="image-wrapper">
@ -27,27 +22,27 @@
{{ description }}
</div>
<a href="{{ url_for('download_bsp', image_path=image_url) }}">
<button class="download-btn">Скачать</button>
<button class="download-btn" data-i18n="download">Скачать</button>
</a>
</div>
<div class="game-mode">
<span>Режим игры:</span>
<span data-i18n="game_mode_label">Режим игры:</span>
<span class="dynamic-data">{{ game_mode | default('Не указан') }}</span>
</div>
<div class="tags">
<span>Метки:</span>
<span data-i18n="tags_label">Метки:</span>
<span class="dynamic-data">{{ tags | default('Не указаны') }}</span>
</div>
<div class="file-size">
<span>Размер файла:</span>
<span data-i18n="file_size_label">Размер файла:</span>
<span class="dynamic-data">{{ file_size | default('Не указан') }}</span>
</div>
<div class="added-time">
<span>Добавлен:</span>
<span data-i18n="added_time_label">Добавлен:</span>
<span class="dynamic-data">{{ added_time | default('Не указано') }}</span>
</div>
@ -66,5 +61,4 @@
</div>
</div>
</body>
</html>

67
frontend/main.js
View file

@ -1,4 +1,71 @@
document.addEventListener('DOMContentLoaded', () => {
const translations = {
ru: {
title: "workshop",
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', () => {

223
frontend/workshop.css
View file

@ -1,3 +1,4 @@
body {
background-color: #1B2A3C;
color: white;
@ -7,8 +8,6 @@ body {
}
/* кнопка "Связаться" */
.contact-button {
position: absolute;
top: 10px;
@ -26,26 +25,25 @@ body {
text-decoration: underline;
}
.top-bar {
background-color: #171D25;
width: 100%;
height: 105px;
display: flex;
justify-content: space-between; /* Элементы слева и справа */
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
z-index: 1000;
padding-left: 20px; /* Отступ слева */
padding-right: 20px; /* Отступ справа */
padding-left: 20px;
padding-right: 20px;
}
.left-text {
color: white;
font-family: Arial, sans-serif;
font-size: 14px;
margin-right: 15px; /* Отступ справа для текста */
margin-right: 15px;
}
.left-text p {
@ -58,12 +56,11 @@ body {
font-family: Arial, sans-serif;
font-size: 28px;
text-align: center;
flex-grow: 1; /* Элемент займет всю доступную ширину */
margin-left: -500px; /* Это выравнивает текст по правому краю */
margin-right: auto; /* Это выравнивает текст по левому краю */
flex-grow: 1;
margin-left: -500px;
margin-right: auto;
}
.main-container {
display: flex;
justify-content: center;
@ -475,19 +472,6 @@ body {
object-fit: contain;
}
.filter-stars {
margin-top: 420px;
margin-right: 260px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.filter-title {
margin-bottom: 10px;
}
.filter-stars {
position: absolute;
margin-top: 420px;
@ -533,20 +517,45 @@ body {
}
/* Медиа-запросы для мобильной адаптации */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
.top-bar {
height: 80px;
height: 60px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.left-text {
display: none;
}
.center-text {
font-size: 24px;
margin: 0;
flex-grow: 0;
text-align: center;
}
.contact-button {
position: absolute;
top: 10px;
right: 30px;
font-size: 14px;
margin: 0;
}
.main-container {
flex-direction: column;
align-items: center;
margin-top: 80px;
padding: 0 10px;
margin-top: 70px;
padding: 10px;
}
.cards-container {
@ -557,110 +566,166 @@ body {
}
.card {
width: 90%; /* Карточки занимают почти весь экран */
max-width: 300px; /* Ограничение по ширине */
width: 90%;
max-width: 300px;
}
.card img:not(.stars) {
width: 100%;
height: auto;
}
.description-popup {
width: 90%;
left: 0;
top: 100%;
margin-top: 10px;
z-index: 100;
}
.description-popup::after {
display: none;
}
.right-rectangle {
width: 100%;
height: auto;
margin-left: 0;
margin: 20px 0;
padding: 10px;
}
.game-modes {
position: static;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
@media screen and (max-width: 768px) {
.game-mode {
width: 100%;
}
.game-mode:hover::after {
width: 100%;
height: 100%;
}
.sort-button-container {
justify-content: center;
margin: 10px 0;
}
.sort-button {
width: 100%;
max-width: 200px;
}
.search-container {
margin-top: 20px;
width: 100%;
}
.search-input {
width: 100%;
max-width: 100%;
}
.filter-stars {
position: static;
width: 100%;
margin: 20px 0;
height: auto;
}
.stars-filter {
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.pagination {
flex-wrap: wrap;
gap: 10px;
bottom: 0;
}
.modal {
width: 90%;
height: auto;
padding: 15px;
max-width: 500px; /* Ограничиваем максимальную ширину для больших мобильных устройств */
max-width: 500px;
}
.modal-content {
padding: 15px;
padding: 10px;
}
.close-btn {
top: -30px;
right: -10px;
right: 0;
font-size: 25px;
}
.modal-content h2 {
margin-left: 15px;
margin-left: 0;
font-size: 18px;
text-align: center;
}
.modal-rectangle {
position: static;
width: 100%;
height: 45px;
padding: 0 15px;
}
.modal-rectangle .text-left,
.modal-rectangle .text-center {
font-size: 14px;
padding: 5px 0;
height: auto;
flex-direction: column;
padding: 10px;
gap: 10px;
}
.date-input {
width: 100%;
height: 35px;
font-size: 16px;
margin-top: 10px;
}
.cancel-button,
.ok-button {
position: static;
margin-top: 20px;
width: 100%;
height: 40px;
font-size: 16px;
.modal-rectangle .text-left,
.modal-rectangle .text-center {
font-size: 14px;
}
.ok-button,
.cancel-button {
margin-bottom: 10px;
}
.ok-button {
margin-bottom: 10px;
}
}
.pagination {
flex-wrap: wrap;
}
.filter-stars {
width: 90%;
position: static;
width: 100%;
margin: 10px 0;
height: 40px;
}
}
.search-container {
margin-top: 20px;
@media screen and (max-width: 480px) {
.center-text {
font-size: 20px;
}
.search-input {
width: 90%;
.card-title {
font-size: 14px;
}
.sort-button-container {
flex-wrap: wrap;
justify-content: center;
.description-popup {
font-size: 12px;
}
.sort-button {
width: auto;
margin: 5px;
font-size: 12px;
}
.search-input {
height: 35px;
}
.filter-title {
font-size: 14px;
}
.stars-filter label {
font-size: 12px;
}
}

97
frontend/workshop.html
View file

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