first release
This commit is contained in:
parent
9e4041cd0b
commit
9cc0929a09
28 changed files with 340 additions and 23 deletions
BIN
frontend/assets/steam-120.ico
Normal file
BIN
frontend/assets/steam-120.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
frontend/assets/steam-32.ico
Normal file
BIN
frontend/assets/steam-32.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -172,3 +172,76 @@ body {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Workshop</title>
|
||||
<title>workshop</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
|
||||
<link rel="icon" href="{{ url_for('static', filename='assets/steam-120.ico') }}" type="image/x-icon">
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<div class="image-wrapper">
|
||||
|
|
|
|||
|
|
@ -6,18 +6,64 @@ body {
|
|||
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: center;
|
||||
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;
|
||||
|
|
@ -485,3 +531,136 @@ body {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,15 +4,26 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Workshop</title>
|
||||
<title>workshop</title>
|
||||
<link rel="icon" href="{{ url_for('static', filename='assets/steam-120.ico') }}" type="image/x-icon">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='workshop.css') }}">
|
||||
<script src="{{ url_for('static', filename='workshop.js') }}" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<h1>Добро пожаловать в Workshop</h1>
|
||||
<div class="top-bar">
|
||||
<div class="left-text">
|
||||
<p>Сделал: ©️𝙎𝙃∆𝙈∆𝙉©️</p>
|
||||
<p>Неофициальный сайт<br>с картами для CS:GO<br>из мастерской Steam</p>
|
||||
</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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue