diff --git a/frontend/main.css b/frontend/main.css index 020c740..1dd309d 100644 --- a/frontend/main.css +++ b/frontend/main.css @@ -1,247 +1,269 @@ -body { - background-color: #1B2838; - color: white; - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: flex-start; - height: 100vh; - overflow: auto; -} - -.main-container { - display: flex; - justify-content: center; - align-items: flex-start; - width: 100%; - padding-top: 50px; - box-sizing: border-box; -} - -.image-wrapper { - background-color: #233B53; - width: 950px; - min-height: 555px; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - position: relative; - border-radius: 5px; - overflow: hidden; - flex-wrap: wrap; - height: auto; -} - -.image-container { - position: relative; - width: 635px; - height: 360px; - padding-top: 15px; - padding-left: 15px; -} - -.image-container img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.details-container { - width: 635px; - height: auto; - background-color: #19222C; - border: 3px solid #35465E; - box-sizing: border-box; - margin-top: 20px; - display: flex; - flex-direction: column; - justify-content: flex-start; - padding: 10px 15px 10px 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; - color: #A1B0C7; - margin-top: 10px; - line-height: 1.5; -} - -.download-btn { - width: 138px; - height: 35px; - background: linear-gradient(to bottom, #A4D007, #536904); - color: white; - border: none; - border-radius: 2px; - font-family: Arial, sans-serif; - font-size: 19px; - cursor: pointer; - position: absolute; - top: 10px; - right: 15px; -} - -.download-btn:hover { - background: linear-gradient(to bottom, #8DC50E, #475F2D); -} - -.game-mode { - position: absolute; - top: 15px; - left: 660px; - font-size: 13px; - color: #A1B0C7; - font-family: Arial, sans-serif; - font-weight: normal; - padding-left: 5px; -} - -.dynamic-data { - font-size: 14px; - font-weight: normal; - color: white; -} - -.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; -} - -.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; - align-items: center; - padding: 0 10px; - } - - .main-container { - padding-top: 20px; - } - - .image-wrapper { - width: 100%; - flex-direction: column; - align-items: center; - padding: 10px; - } - - .image-container { - width: 100%; - height: auto; - padding: 0; - } - - .image-container img { - width: 100%; - height: auto; - } - - .details-container { - width: 100%; - margin-top: 15px; - margin-left: 0; - padding: 15px; - } - - .download-btn { - position: static; - margin-top: 15px; - width: 100%; - height: 40px; - font-size: 18px; - } - - .game-mode, - .tags, - .file-size, - .added-time { - position: static; - margin-top: 10px; - width: 100%; - text-align: left; - } - - .dynamic-data { - margin-left: 0; - font-size: 14px; - } - - .youtube-container { - position: static; - margin-top: 15px; - width: 100%; - height: auto; - } - - .youtube-container iframe { - width: 100%; - height: auto; - } -} +body { + background-color: #1B2838; + color: white; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: flex-start; + min-height: 100vh; + overflow: auto; + font-family: Arial, sans-serif; +} + +.main-container { + display: flex; + justify-content: center; + align-items: flex-start; + width: 100%; + max-width: 1200px; + padding: 20px; + box-sizing: border-box; +} + +.image-wrapper { + background-color: #233B53; + width: 100%; + max-width: 950px; + min-height: 555px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + position: relative; + border-radius: 5px; + overflow: hidden; + flex-wrap: wrap; + height: auto; + box-sizing: border-box; +} + +.image-container { + position: relative; + width: 635px; + height: 360px; + padding: 15px 15px 0 15px; +} + +.image-container img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 5px; +} + +.details-container { + width: 635px; + height: auto; + background-color: #19222C; + border: 3px solid #35465E; + box-sizing: border-box; + margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 15px; + margin-left: 15px; + position: relative; +} + +.card-title { + font-size: 20px; + font-weight: bold; + margin: 0; +} + +.description { + 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 { + width: 138px; + height: 35px; + background: linear-gradient(to bottom, #A4D007, #536904); + color: white; + border: none; + border-radius: 2px; + font-size: 19px; + cursor: pointer; + position: absolute; + top: 15px; + right: 15px; +} + +.download-btn:hover { + background: linear-gradient(to bottom, #8DC50E, #475F2D); +} + +.game-mode, +.tags, +.file-size, +.added-time { + font-size: 13px; + color: #A1B0C7; + 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; +} + +.file-size .dynamic-data, +.added-time .dynamic-data { + color: #A1B0C7; +} + +.youtube-container { + margin-top: 15px; + width: 265px; + height: 150px; + position: absolute; + top: 210px; + left: 660px; +} + +/* Мобильная адаптация */ +@media screen and (max-width: 768px) { + body { + padding: 10px; + align-items: center; + } + + .main-container { + padding: 10px 0; + } + + .image-wrapper { + width: 100%; + max-width: 100%; + min-height: auto; + flex-direction: column; + padding: 10px; + } + + .image-container { + width: 100%; + height: auto; + padding: 0; + } + + .image-container img { + width: 100%; + height: auto; + max-height: 300px; + object-fit: cover; + } + + .details-container { + width: 100%; + 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; + width: 100%; + height: 45px; + font-size: 16px; + margin-top: 15px; + } + + .game-mode, + .tags, + .file-size, + .added-time { + position: static; + margin-top: 10px; + padding-left: 0; + } + + .dynamic-data { + display: block; + margin-left: 0; + font-size: 13px; + } + + .youtube-container { + position: static; + 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; + } +} \ No newline at end of file diff --git a/frontend/main.html b/frontend/main.html index 6f303cf..87091fd 100644 --- a/frontend/main.html +++ b/frontend/main.html @@ -1,70 +1,64 @@ - - - - - - - workshop - -<<<<<<< HEAD - -======= - ->>>>>>> 9cc0929a09596abeb93ee7f2711527fb5da25f7a - - - - -
-
-
- Map Image -
- -
-
{{ map_title }}
-
- {{ description }} -
- - - -
- -
- Режим игры: - {{ game_mode | default('Не указан') }} -
- -
- Метки: - {{ tags | default('Не указаны') }} -
- -
- Размер файла: - {{ file_size | default('Не указан') }} -
- -
- Добавлен: - {{ added_time | default('Не указано') }} -
- - {% if youtube_link %} -
- -
- {% endif %} -
-
- - - + + + + + + workshop + + + + + + +
+
+
+ Map Image +
+ +
+
{{ map_title }}
+
+ {{ description }} +
+ + + +
+ +
+ Режим игры: + {{ game_mode | default('Не указан') }} +
+ +
+ Метки: + {{ tags | default('Не указаны') }} +
+ +
+ Размер файла: + {{ file_size | default('Не указан') }} +
+ +
+ Добавлен: + {{ added_time | default('Не указано') }} +
+ + {% if youtube_link %} +
+ +
+ {% endif %} +
+
+ + \ No newline at end of file diff --git a/frontend/main.js b/frontend/main.js index 69cf651..00ce976 100644 --- a/frontend/main.js +++ b/frontend/main.js @@ -1,8 +1,75 @@ -document.addEventListener('DOMContentLoaded', () => { - const cards = document.querySelectorAll('.card'); - cards.forEach(card => { - card.addEventListener('click', () => { - window.location.href = '/main'; - }); - }); -}); +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', () => { + window.location.href = '/main'; + }); + }); +}); \ No newline at end of file diff --git a/frontend/workshop.css b/frontend/workshop.css index bb0f02c..c3a5f3c 100644 --- a/frontend/workshop.css +++ b/frontend/workshop.css @@ -1,666 +1,731 @@ -body { - background-color: #1B2A3C; - color: white; - margin: 0; - padding: 0; - display: block; -} - - - -/* кнопка "Связаться" */ -.contact-button { - position: absolute; - top: 10px; - right: 50px; - font-size: 14px; - color: #417A9B; - text-decoration: none; - font-weight: bold; - background-color: transparent; - border: none; - cursor: pointer; -} - -.contact-button:hover { - text-decoration: underline; -} - - -.top-bar { - background-color: #171D25; - width: 100%; - height: 105px; - display: flex; - justify-content: space-between; /* Элементы слева и справа */ - align-items: center; - position: fixed; - top: 0; - z-index: 1000; - padding-left: 20px; /* Отступ слева */ - padding-right: 20px; /* Отступ справа */ -} - -.left-text { - color: white; - font-family: Arial, sans-serif; - font-size: 14px; - margin-right: 15px; /* Отступ справа для текста */ -} - -.left-text p { - margin: 0; - padding: 0; -} - -.center-text { - color: white; - font-family: Arial, sans-serif; - font-size: 28px; - text-align: center; - flex-grow: 1; /* Элемент займет всю доступную ширину */ - margin-left: -500px; /* Это выравнивает текст по правому краю */ - margin-right: auto; /* Это выравнивает текст по левому краю */ -} - - -.main-container { - display: flex; - justify-content: center; - align-items: flex-start; - margin-top: 105px; - width: 100%; - position: relative; - flex-wrap: wrap; -} - -.cards-container { - display: grid; - grid-template-columns: repeat(3, 200px); - grid-gap: 105px 20px; - justify-content: center; - margin-bottom: 40px; -} - -.right-rectangle { - width: 295px; - height: 370px; - background: linear-gradient(to left, #0E141C, #111A23, #15202C); - margin-left: 20px; - margin-top: 40px; - border-radius: 0; - position: relative; -} - -.show-products-title { - font-family: Arial, sans-serif; - font-size: 12px; - color: rgba(255, 255, 255, 0.7); - margin-bottom: 5px; - margin-left: 5px; -} - -.game-modes-title { - font-family: Arial, sans-serif; - font-size: 12px; - color: rgba(255, 255, 255, 0.7); - margin-bottom: 0px; - margin-left: 5px; -} - -.game-modes { - display: flex; - flex-direction: column; - gap: 5px; - position: absolute; - bottom: 10px; - left: 10px; -} - -.game-mode { - font-family: Arial, sans-serif; - font-size: 13px; - color: rgba(255, 255, 255, 0.7); - display: flex; - align-items: center; - position: relative; -} - -.game-mode input[type="checkbox"] { - margin-right: 10px; - width: 16px; - height: 16px; - cursor: pointer; - accent-color: blue; -} - -.game-mode:hover { - background-color: #1B2A3C; -} - -.game-mode:hover::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 295px; - height: 10px; - background-color: #1B2A3C; - z-index: -1; -} - -.card { - position: relative; - width: 200px; - display: flex; - flex-direction: column; - align-items: flex-start; -} - -.stars { - width: 81px; - height: 14px; - margin: 5px 0; -} - -.card-title { - font-size: 16px; - color: white; - margin-top: 5px; - text-align: left; -} - -.card img:not(.stars) { - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); -} - -.description-popup { - display: none; - position: absolute; - width: 300px; - background-color: #61ABD7; - color: white; - font-size: 14px; - padding: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - z-index: 10; - left: 220px; - top: 0; - white-space: normal; - word-wrap: break-word; -} - -.description-popup::after { - content: ""; - position: absolute; - top: 10px; - left: -20px; - border-width: 10px; - border-style: solid; - border-color: transparent #61ABD7 transparent transparent; -} - -.description-popup strong { - font-size: 16px; - margin-bottom: 10px; - display: block; -} - -.description-popup p { - font-size: 14px; - color: rgba(255, 255, 255, 0.7); - margin: 0; -} - -.card:hover .description-popup { - display: block; -} - -.pagination { - display: flex; - justify-content: center; - align-items: center; - margin-top: 20px; - position: relative; - bottom: 25px; - left: 0px; - width: 100%; -} - -.pagebtn { - width: 40px; - height: 16px; - background-color: #2B475E; - color: #63AFCD; - font-family: Arial, sans-serif; - font-size: 16px; - display: flex; - justify-content: center; - align-items: center; - text-decoration: none; - margin: 0 10px; - border-radius: 2px; - transition: background-color 0.3s, color 0.3s; - border: none; -} - -.pagebtn:hover { - background-color: #66C0F4; - color: white; -} - -.pagelink { - background-color: transparent; - color: white; - font-family: Arial, sans-serif; - font-size: 16px; - text-decoration: none; - margin: 0 5px; -} - -.pagination_space { - margin: 0 5px; -} - -.pagebtn:hover, .pagelink:hover { - background-color: #2A5B70; -} - -.sort-button-container { - display: flex; - justify-content: flex-start; - margin-top: 15px; - margin-left: 15px; -} - -.sort-button { - width: 148px; - height: 30px; - background: linear-gradient(to top, #384A65, #57749E); - color: white; - font-family: Arial, sans-serif; - font-size: 13px; - font-weight: normal; - border: none; - border-radius: 3px; - cursor: pointer; - transition: background-color 0.3s ease, box-shadow 0.3s ease; - margin-top: 0px; -} - -.sort-button:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); -} - -.sort-button:active { - background: linear-gradient(to top, #2C3E55, #3D5B80); -} - -.modal { - display: none; - position: fixed; - z-index: 1001; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 530px; - height: 315px; - background: linear-gradient(to left, #333840, #333840); - padding: 20px; -} - -.modal-content { - color: white; - font-family: Arial, sans-serif; - position: relative; -} - -.close-btn { - position: absolute; - top: -40px; - right: -15px; - color: white; - font-size: 30px; - cursor: pointer; - opacity: 0.7; -} - -.close-btn:hover { - color: #f1f1f1; - opacity: 1; -} - -.modal-content h2 { - margin-left: 25px; -} - -.modal-rectangle { - position: absolute; - top: 105px; - left: 25px; - width: 480px; - height: 42px; - background-color: #292B2F; - border-radius: 3px; - z-index: 1002; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 10px; -} - -.modal-rectangle .text-left { - font-family: Arial, sans-serif; - font-weight: bold; - font-size: 15px; -} - -.modal-rectangle .text-center { - left: 240px; - font-family: Arial, sans-serif; - font-weight: bold; - font-size: 15px; -} - -.date-input { - background-color: #33363E; - color: white; - border: none; - font-size: 14px; - height: 30px; - width: 205px; - border-radius: 3px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); - z-index: 1003; -} - -.date-input::-webkit-calendar-picker-indicator { - display: none; -} - -.date-input:focus { - outline: none; - background-color: #4c4f58; -} - -.cancel-button { - position: absolute; - bottom: -270px; - right: 25px; - width: 80px; - height: 30px; - background-color: #32363F; - color: white; - font-size: 14px; - font-family: Arial, sans-serif; - border: none; - border-radius: 3px; - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); - cursor: pointer; - transition: background-color 0.3s ease, box-shadow 0.3s ease; -} - -.cancel-button:hover { - background-color: #4A4F5A; - box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); -} - -.ok-button { - position: absolute; - bottom: -270px; - right: 130px; - width: 50px; - height: 30px; - background-color: #6EA720; - color: white; - font-size: 14px; - font-family: Arial, sans-serif; - border: none; - border-radius: 3px; - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); - cursor: pointer; - transition: background-color 0.3s ease, box-shadow 0.3s ease; -} - -.ok-button:hover { - background-color: #A6FC30; - box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); -} - -.search-container { - margin-top: 420px; - display: flex; - justify-content: center; -} - -.search-input-container { - position: relative; -} - -.search-input { - width: 250px; - height: 40px; - background-color: #2C3E55; - color: white; - font-size: 14px; - border: none; - border-radius: 3px; - padding-left: 10px; - outline: none; - padding-right: 40px; -} - -.search-input::placeholder { - color: rgba(255, 255, 255, 0.7); -} - -.search-input:focus { - background-color: #3E4A61; -} - -.search-button { - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - background: none; - border: none; - cursor: pointer; - padding: 0; -} - -.search-button img { - width: 25px; - height: 25px; - 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; - margin-right: -660px; - display: flex; - flex-direction: column; - align-items: center; - background-color: #2C3E55; - width: 300px; - height: 80px; - border-radius: 3px; - padding: 10px; - box-sizing: border-box; -} - -.filter-title { - margin-bottom: 10px; - color: white; - font-size: 16px; -} - -.stars-filter { - display: flex; - justify-content: space-between; - width: 100%; -} - -.stars-filter label { - font-family: Arial, sans-serif; - font-size: 14px; - color: white; - display: flex; - flex-direction: column-reverse; - align-items: center; -} - -.stars-filter input[type="checkbox"] { - margin-bottom: 5px; - width: 16px; - height: 16px; - cursor: pointer; - accent-color: #63AFCD; -} - - -@media screen and (max-width: 768px) { - body { - font-size: 14px; - } - - .top-bar { - height: 80px; - } - - .main-container { - flex-direction: column; - align-items: center; - margin-top: 80px; - padding: 0 10px; - } - - .cards-container { - grid-template-columns: 1fr; - grid-gap: 20px; - width: 100%; - justify-items: center; - } - - .card { - width: 90%; /* Карточки занимают почти весь экран */ - max-width: 300px; /* Ограничение по ширине */ - } - - .right-rectangle { - width: 100%; - height: auto; - margin-left: 0; - } - - .game-modes { - position: static; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - gap: 10px; - } - - @media screen and (max-width: 768px) { - .modal { - width: 90%; - height: auto; - padding: 15px; - max-width: 500px; /* Ограничиваем максимальную ширину для больших мобильных устройств */ - } - - .modal-content { - padding: 15px; - } - - .close-btn { - top: -30px; - right: -10px; - font-size: 25px; - } - - .modal-content h2 { - margin-left: 15px; - font-size: 18px; - } - - .modal-rectangle { - width: 100%; - height: 45px; - padding: 0 15px; - } - - .modal-rectangle .text-left, - .modal-rectangle .text-center { - font-size: 14px; - padding: 5px 0; - } - - .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; - } - - .cancel-button { - margin-bottom: 10px; - } - - .ok-button { - margin-bottom: 10px; - } -} - - - .pagination { - flex-wrap: wrap; - } - - .filter-stars { - width: 90%; - position: static; - margin: 10px 0; - } - - .search-container { - margin-top: 20px; - } - - .search-input { - width: 90%; - } - - .sort-button-container { - flex-wrap: wrap; - justify-content: center; - } - - .sort-button { - width: auto; - margin: 5px; - } -} + +body { + background-color: #1B2A3C; + color: white; + margin: 0; + padding: 0; + display: block; +} + + +.contact-button { + position: absolute; + top: 10px; + right: 50px; + font-size: 14px; + color: #417A9B; + text-decoration: none; + font-weight: bold; + background-color: transparent; + border: none; + cursor: pointer; +} + +.contact-button:hover { + text-decoration: underline; +} + +.top-bar { + background-color: #171D25; + width: 100%; + height: 105px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + z-index: 1000; + padding-left: 20px; + padding-right: 20px; +} + +.left-text { + color: white; + font-family: Arial, sans-serif; + font-size: 14px; + margin-right: 15px; +} + +.left-text p { + margin: 0; + padding: 0; +} + +.center-text { + color: white; + font-family: Arial, sans-serif; + font-size: 28px; + text-align: center; + flex-grow: 1; + margin-left: -500px; + margin-right: auto; +} + +.main-container { + display: flex; + justify-content: center; + align-items: flex-start; + margin-top: 105px; + width: 100%; + position: relative; + flex-wrap: wrap; +} + +.cards-container { + display: grid; + grid-template-columns: repeat(3, 200px); + grid-gap: 105px 20px; + justify-content: center; + margin-bottom: 40px; +} + +.right-rectangle { + width: 295px; + height: 370px; + background: linear-gradient(to left, #0E141C, #111A23, #15202C); + margin-left: 20px; + margin-top: 40px; + border-radius: 0; + position: relative; +} + +.show-products-title { + font-family: Arial, sans-serif; + font-size: 12px; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 5px; + margin-left: 5px; +} + +.game-modes-title { + font-family: Arial, sans-serif; + font-size: 12px; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 0px; + margin-left: 5px; +} + +.game-modes { + display: flex; + flex-direction: column; + gap: 5px; + position: absolute; + bottom: 10px; + left: 10px; +} + +.game-mode { + font-family: Arial, sans-serif; + font-size: 13px; + color: rgba(255, 255, 255, 0.7); + display: flex; + align-items: center; + position: relative; +} + +.game-mode input[type="checkbox"] { + margin-right: 10px; + width: 16px; + height: 16px; + cursor: pointer; + accent-color: blue; +} + +.game-mode:hover { + background-color: #1B2A3C; +} + +.game-mode:hover::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 295px; + height: 10px; + background-color: #1B2A3C; + z-index: -1; +} + +.card { + position: relative; + width: 200px; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.stars { + width: 81px; + height: 14px; + margin: 5px 0; +} + +.card-title { + font-size: 16px; + color: white; + margin-top: 5px; + text-align: left; +} + +.card img:not(.stars) { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); +} + +.description-popup { + display: none; + position: absolute; + width: 300px; + background-color: #61ABD7; + color: white; + font-size: 14px; + padding: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + z-index: 10; + left: 220px; + top: 0; + white-space: normal; + word-wrap: break-word; +} + +.description-popup::after { + content: ""; + position: absolute; + top: 10px; + left: -20px; + border-width: 10px; + border-style: solid; + border-color: transparent #61ABD7 transparent transparent; +} + +.description-popup strong { + font-size: 16px; + margin-bottom: 10px; + display: block; +} + +.description-popup p { + font-size: 14px; + color: rgba(255, 255, 255, 0.7); + margin: 0; +} + +.card:hover .description-popup { + display: block; +} + +.pagination { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + position: relative; + bottom: 25px; + left: 0px; + width: 100%; +} + +.pagebtn { + width: 40px; + height: 16px; + background-color: #2B475E; + color: #63AFCD; + font-family: Arial, sans-serif; + font-size: 16px; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + margin: 0 10px; + border-radius: 2px; + transition: background-color 0.3s, color 0.3s; + border: none; +} + +.pagebtn:hover { + background-color: #66C0F4; + color: white; +} + +.pagelink { + background-color: transparent; + color: white; + font-family: Arial, sans-serif; + font-size: 16px; + text-decoration: none; + margin: 0 5px; +} + +.pagination_space { + margin: 0 5px; +} + +.pagebtn:hover, .pagelink:hover { + background-color: #2A5B70; +} + +.sort-button-container { + display: flex; + justify-content: flex-start; + margin-top: 15px; + margin-left: 15px; +} + +.sort-button { + width: 148px; + height: 30px; + background: linear-gradient(to top, #384A65, #57749E); + color: white; + font-family: Arial, sans-serif; + font-size: 13px; + font-weight: normal; + border: none; + border-radius: 3px; + cursor: pointer; + transition: background-color 0.3s ease, box-shadow 0.3s ease; + margin-top: 0px; +} + +.sort-button:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); +} + +.sort-button:active { + background: linear-gradient(to top, #2C3E55, #3D5B80); +} + +.modal { + display: none; + position: fixed; + z-index: 1001; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 530px; + height: 315px; + background: linear-gradient(to left, #333840, #333840); + padding: 20px; +} + +.modal-content { + color: white; + font-family: Arial, sans-serif; + position: relative; +} + +.close-btn { + position: absolute; + top: -40px; + right: -15px; + color: white; + font-size: 30px; + cursor: pointer; + opacity: 0.7; +} + +.close-btn:hover { + color: #f1f1f1; + opacity: 1; +} + +.modal-content h2 { + margin-left: 25px; +} + +.modal-rectangle { + position: absolute; + top: 105px; + left: 25px; + width: 480px; + height: 42px; + background-color: #292B2F; + border-radius: 3px; + z-index: 1002; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 10px; +} + +.modal-rectangle .text-left { + font-family: Arial, sans-serif; + font-weight: bold; + font-size: 15px; +} + +.modal-rectangle .text-center { + left: 240px; + font-family: Arial, sans-serif; + font-weight: bold; + font-size: 15px; +} + +.date-input { + background-color: #33363E; + color: white; + border: none; + font-size: 14px; + height: 30px; + width: 205px; + border-radius: 3px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); + z-index: 1003; +} + +.date-input::-webkit-calendar-picker-indicator { + display: none; +} + +.date-input:focus { + outline: none; + background-color: #4c4f58; +} + +.cancel-button { + position: absolute; + bottom: -270px; + right: 25px; + width: 80px; + height: 30px; + background-color: #32363F; + color: white; + font-size: 14px; + font-family: Arial, sans-serif; + border: none; + border-radius: 3px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: background-color 0.3s ease, box-shadow 0.3s ease; +} + +.cancel-button:hover { + background-color: #4A4F5A; + box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); +} + +.ok-button { + position: absolute; + bottom: -270px; + right: 130px; + width: 50px; + height: 30px; + background-color: #6EA720; + color: white; + font-size: 14px; + font-family: Arial, sans-serif; + border: none; + border-radius: 3px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: background-color 0.3s ease, box-shadow 0.3s ease; +} + +.ok-button:hover { + background-color: #A6FC30; + box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); +} + +.search-container { + margin-top: 420px; + display: flex; + justify-content: center; +} + +.search-input-container { + position: relative; +} + +.search-input { + width: 250px; + height: 40px; + background-color: #2C3E55; + color: white; + font-size: 14px; + border: none; + border-radius: 3px; + padding-left: 10px; + outline: none; + padding-right: 40px; +} + +.search-input::placeholder { + color: rgba(255, 255, 255, 0.7); +} + +.search-input:focus { + background-color: #3E4A61; +} + +.search-button { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +.search-button img { + width: 25px; + height: 25px; + object-fit: contain; +} + +.filter-stars { + position: absolute; + margin-top: 420px; + margin-right: -660px; + display: flex; + flex-direction: column; + align-items: center; + background-color: #2C3E55; + width: 300px; + height: 80px; + border-radius: 3px; + padding: 10px; + box-sizing: border-box; +} + +.filter-title { + margin-bottom: 10px; + color: white; + font-size: 16px; +} + +.stars-filter { + display: flex; + justify-content: space-between; + width: 100%; +} + +.stars-filter label { + font-family: Arial, sans-serif; + font-size: 14px; + color: white; + display: flex; + flex-direction: column-reverse; + align-items: center; +} + +.stars-filter input[type="checkbox"] { + margin-bottom: 5px; + width: 16px; + height: 16px; + cursor: pointer; + accent-color: #63AFCD; +} + + +/* Медиа-запросы для мобильной адаптации */ +@media screen and (max-width: 768px) { + body { + font-size: 14px; + } + + .top-bar { + 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: 70px; + padding: 10px; + } + + .cards-container { + grid-template-columns: 1fr; + grid-gap: 20px; + width: 100%; + justify-items: center; + } + + .card { + 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: 20px 0; + padding: 10px; + } + + .game-modes { + position: static; + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + + .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; + } + + .modal-content { + padding: 10px; + } + + .close-btn { + top: -30px; + right: 0; + font-size: 25px; + } + + .modal-content h2 { + margin-left: 0; + font-size: 18px; + text-align: center; + } + + .modal-rectangle { + position: static; + width: 100%; + height: auto; + flex-direction: column; + padding: 10px; + gap: 10px; + } + + .date-input { + width: 100%; + height: 35px; + } + + .modal-rectangle .text-left, + .modal-rectangle .text-center { + font-size: 14px; + } + + .ok-button, + .cancel-button { + position: static; + width: 100%; + margin: 10px 0; + height: 40px; + } +} + +@media screen and (max-width: 480px) { + .center-text { + font-size: 20px; + } + + .card-title { + font-size: 14px; + } + + .description-popup { + font-size: 12px; + } + + .sort-button { + font-size: 12px; + } + + .search-input { + height: 35px; + } + + .filter-title { + font-size: 14px; + } + + .stars-filter label { + font-size: 12px; + } +} \ No newline at end of file diff --git a/frontend/workshop.html b/frontend/workshop.html index ba6dabd..5733b24 100644 --- a/frontend/workshop.html +++ b/frontend/workshop.html @@ -1,180 +1,157 @@ - - - - - - - workshop -<<<<<<< HEAD - -======= - ->>>>>>> 9cc0929a09596abeb93ee7f2711527fb5da25f7a - - - - - - - - - - -<<<<<<< HEAD -
-
-

Сделал: ©️𝙎𝙃∆𝙈∆𝙉©️

-

Неофициальный сайт
с картами для CS:GO
из мастерской Steam

-
-

CS:GO Workshop

- Связаться -======= -
-
-

Сделал: ©️𝙎𝙃∆𝙈∆𝙉©️

-

Неофициальный сайт
с картами для CS:GO
из мастерской Steam

->>>>>>> 9cc0929a09596abeb93ee7f2711527fb5da25f7a -
-

Добро пожаловать в Workshop

- Связаться -
- - - - - - -
-
- {% for map in maps_data %} -
- - Map Image - - {{ map[2] }} stars -
{{ map[1] }}
-
- {{ map[1] }} -

{{ map[3] }}

-
-
- {% endfor %} -
- -
-
- -
-
-
- Показать продукты, попадающие в каждую из выбранных категорий: -
- -
РЕЖИМ ИГРЫ
- - {% for mode, label in { - "Classic": "Классический", - "Deathmatch": "Бой насмерть", - "Demolition": "Уничтожение объекта", - "Armsrace": "Гонка вооружений", - "Custom": "Пользовательский", - "Training": "Обучение", - "Co-op Strike": "Совместный налёт", - "Wingman": "Напарники", - "Flying Scoutsman": "Перелётные снайперы" - }.items() %} - - {% endfor %} -
-
-
-
- - -
-
-
-
- - - -
-
- -
-
- - - - - -
-
- - -
- - - + + + + + + + + + workshop + + + + + + + + + + + +
+
+

Сделал: ©️𝙎𝙃∆𝙈∆𝙉©️

+

Неофициальный сайт
с картами для CS:GO
из мастерской Steam

+
+

CS:GO Workshop

+ Связаться +
+ +
+
+ {% for map in maps_data %} +
+ + Map Image + + {{ map[2] }} stars +
{{ map[1] }}
+
+ {{ map[1] }} +

{{ map[3] }}

+
+
+ {% endfor %} +
+ +
+
+ +
+
+
Показать продукты, попадающие в каждую из выбранных категорий:
+
РЕЖИМ ИГРЫ
+ + {% for mode, label in { + "Classic": "Классический", + "Deathmatch": "Бой насмерть", + "Demolition": "Уничтожение объекта", + "Armsrace": "Гонка вооружений", + "Custom": "Пользовательский", + "Training": "Обучение", + "Co-op Strike": "Совместный налёт", + "Wingman": "Напарники", + "Flying_Scoutsman": "Перелётные снайперы" + }.items() %} + + {% endfor %} +
+
+
+
+ + +
+
+
+
+ + + +
+
+ +
+
+ + + + + +
+
+ + +
+ + \ No newline at end of file