new design
This commit is contained in:
parent
61da6bd8d1
commit
9cdbbaf2a3
37
README.md
37
README.md
@ -1,20 +1,20 @@
|
||||
[](https://artberry.xyz/static/Logo.svg "test")
|
||||
### booru сайт нового поколения
|
||||
### Booru сайт нового поколения
|
||||
|
||||
**репозиторий для разработки и тестирования новых версий веб-приложения artberry**
|
||||
**Открытый репозиторий веб-приложения [Artberry](https://artberry.xyz/ "Artberry")**
|
||||
|
||||
------------
|
||||
|
||||
|
||||
### используемые технологии
|
||||
#### backend:
|
||||
### Используемые технологии
|
||||
#### Backend:
|
||||
- ##### ЯП: [Python](http://https://www.python.org/ "Python")
|
||||
- ##### ФРЕЙМВОРК: [Flask](http://https://flask.palletsprojects.com/en/stable/ "Flask")
|
||||
- ##### ШАБЛОНИЗАЦИЯ: [JINJA](http:/https://jinja.palletsprojects.com/en/stable// "JINJA")
|
||||
- ##### ФРЕЙМВОРК: [Flask](https://https://flask.palletsprojects.com/en/stable/ "Flask")
|
||||
- ##### ШАБЛОНИЗАЦИЯ: [JINJA](https:/https://jinja.palletsprojects.com/en/stable// "JINJA")
|
||||
|
||||
#### frontend:
|
||||
#### Frontend:
|
||||
- ##### HTML
|
||||
- ##### CSS
|
||||
- ##### CSS | [SASS](https://sass-lang.com/ "SASS")
|
||||
- ##### JAVASCRIPT
|
||||
|
||||
------------
|
||||
@ -23,10 +23,10 @@
|
||||
#### ЗАПУСК И ТЕСТИРОВАНИЕ
|
||||
#### Для удобства и скорости разработки выполните следующие шаги:
|
||||
|
||||
#### создайте виртуальное окружение:
|
||||
#### Создание виртуального окружения:
|
||||
- `python -m venv venv`
|
||||
|
||||
#### запустите виртуальное окружение:
|
||||
#### Запуск виртуального окружения:
|
||||
*WINDOWS*:
|
||||
- **powershell:** ` .\venv\Scripts\Activate`
|
||||
- **CMD:** `venv\Scripts\activate.bat`
|
||||
@ -34,10 +34,10 @@
|
||||
*LINUX* | *MAC*:
|
||||
- `source venv/bin/activate`
|
||||
|
||||
#### установите зависимости:
|
||||
#### Установка зависимостей:
|
||||
- `pip install -r requirements.txt`
|
||||
|
||||
#### запустите проект
|
||||
#### Запуск проекта:
|
||||
- `python app.py` или `flask run`
|
||||
|
||||
#### Для отладки в конце файла `app.py` измените:
|
||||
@ -46,3 +46,16 @@
|
||||
|
||||
------------
|
||||
|
||||
#### КОМПИЛЯЦИЯ CSS ИЗ SASS
|
||||
|
||||
#### Для компиляции в реальном времени:
|
||||
- `sass --watch static/css/styles.scss:static/css/styles.css`
|
||||
|
||||
*Эта команда будет отслеживать изменения в файле `styles.scss` и автоматически компилировать его в `styles.css`*
|
||||
|
||||
#### Для одноразовой компиляции:
|
||||
- `sass static/css/styles.scss:static/css/styles.css`
|
||||
|
||||
*Эта команда выполнит одноразовую компиляцию из файла `styles.scss` в `styles.css`*
|
||||
|
||||
------------
|
||||
6
app.py
6
app.py
@ -80,6 +80,12 @@ def index():
|
||||
content_type='art'
|
||||
)
|
||||
|
||||
@app.route('/arts')
|
||||
def arts():
|
||||
return render_template(
|
||||
'arts.html'
|
||||
)
|
||||
|
||||
@app.route('/vote_art/<int:image_id>', methods=['POST'])
|
||||
@login_required
|
||||
def vote_art(image_id):
|
||||
|
||||
@ -1,459 +0,0 @@
|
||||
.container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
background-color: #1f091b;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.new-content {
|
||||
width: 1500px;
|
||||
height: 340px;
|
||||
top: 349px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.popular-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
gap: 20px;
|
||||
width: 1502px;
|
||||
height: 900px;
|
||||
top: 737px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.viewed-content {
|
||||
width: 1502px;
|
||||
height: 631px;
|
||||
top: 1677px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.popular-categories {
|
||||
width: 1500px;
|
||||
height: 277px;
|
||||
top: 2308px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.new-content-text {
|
||||
width: 123px;
|
||||
height: 33px;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: #8784C9;
|
||||
}
|
||||
|
||||
.popular-content-text {
|
||||
width: 123px;
|
||||
height: 33px;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: #8784C9;
|
||||
}
|
||||
|
||||
.viewed-content-text {
|
||||
width: 123px;
|
||||
height: 33px;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: #8784C9;
|
||||
}
|
||||
|
||||
.popular-categories-text {
|
||||
width: 321px;
|
||||
height: 33px;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: #8784C9;
|
||||
}
|
||||
|
||||
.view-more-button {
|
||||
width: 1500px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
gap: 10px;
|
||||
padding-top: 10px;
|
||||
padding-right: 679px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 679px;
|
||||
background-color: #8784C9;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.new-context-button-text {
|
||||
width: 134px;
|
||||
height: 22px;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
color: #3C3882;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
max-width: 1500px;
|
||||
height: 120px;
|
||||
background: #05040A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
gap: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 307px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 452.5px;
|
||||
height: 27px;
|
||||
border: 1px solid #8784C9;
|
||||
border-radius: 20px;
|
||||
padding: 15px;
|
||||
background: #05040A;
|
||||
position: relative;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-icon-container {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.search-icon,
|
||||
.search-hover-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.search-hover-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.search-container:hover .search-hover-icon,
|
||||
.search-container:focus-within .search-hover-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.search-container:hover .search-icon,
|
||||
.search-container:focus-within .search-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
flex-grow: 1;
|
||||
font-size: 16px;
|
||||
height: 24px;
|
||||
color: #8784C9;
|
||||
background-color: #05040A;
|
||||
}
|
||||
|
||||
.search-container:hover {
|
||||
border-color: #3C3882;
|
||||
}
|
||||
|
||||
.search-container:focus-within {
|
||||
border-color: #3C3882;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.video-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.tray-icon {
|
||||
width: 11px;
|
||||
height: 7px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.translate-btn {
|
||||
position: relative;
|
||||
width: 23px;
|
||||
height: 27px;
|
||||
border: 1px solid #8784C9;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #05040A;
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.translate-icon,
|
||||
.translate-hover-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.translate-hover-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.translate-btn:hover .translate-hover-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.translate-btn:hover .translate-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.translate-btn:hover {
|
||||
border-color: #3C3882;
|
||||
}
|
||||
|
||||
.overlay-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
font-family: Nunito, sans-serif;
|
||||
gap: 22px;
|
||||
width: 519.5px;
|
||||
height: 22px;
|
||||
justify-content: space-between;
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
text-decoration: none;
|
||||
color: #8784C9;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.menu a:hover {
|
||||
color: #3C3882;
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.discord-icon-container {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.discord-icon,
|
||||
.discord-hover-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.discord-hover-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.discord-icon-container:hover .discord-hover-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.discord-icon-container:hover .discord-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 87px;
|
||||
height: 42px;
|
||||
border-radius: 20px;
|
||||
background: #8784C9;
|
||||
border: 1px solid #8784C9;
|
||||
padding: 10px 15px;
|
||||
font-size: 16px;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 500;
|
||||
line-height: 21.82px;
|
||||
letter-spacing: 0%;
|
||||
color: #05040A;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background-color: #3C3882;
|
||||
color: #05040A;
|
||||
border-color: #3C3882;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background: #05040A;
|
||||
border: 1px solid #3C3882;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: 150px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
color: #8784C9;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: #3C3882;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
width: 1500px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
top: 266px;
|
||||
left: 210px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: none;
|
||||
background-color: #05040A;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tag {
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #3C3882;
|
||||
border: none;
|
||||
color: #8784C9;
|
||||
margin: 0;
|
||||
visibility: visible;
|
||||
transition: visibility 0.3s ease;
|
||||
}
|
||||
|
||||
.list-button {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #8784C9;
|
||||
background-color: transparent;
|
||||
color: #3C3882;
|
||||
margin-left: 10px;
|
||||
gap: 5px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tags-container > .list-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.taglist-shadow {
|
||||
width: 64px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: linear-gradient(to right, rgba(5, 4, 10, 0) 30%, rgba(5, 4, 10, 0.5) 60%, #05040A 100%);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
@ -1,19 +1,44 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Playwrite+IT+Moderna:wght@100..400&display=swap');
|
||||
body{
|
||||
background-color: #05040A;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
background-color: #1f091b;
|
||||
background-color: #05040A;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.new-content {
|
||||
width: 1500px;
|
||||
width: 1502px;
|
||||
height: 340px;
|
||||
top: 349px;
|
||||
top: 257px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.img-new-content {
|
||||
width: 1502px;
|
||||
height: 423px;
|
||||
top: 257px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.popular-content {
|
||||
@ -23,29 +48,76 @@
|
||||
padding: 0px;
|
||||
gap: 20px;
|
||||
width: 1502px;
|
||||
height: 900px;
|
||||
top: 737px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 631px;
|
||||
left: 209px;
|
||||
position: absolute;
|
||||
top: 653px;
|
||||
}
|
||||
|
||||
.img-popular-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
gap: 20px;
|
||||
width: 1502px;
|
||||
height: 817px;
|
||||
left: 209px;
|
||||
position: absolute;
|
||||
top: 740px;
|
||||
}
|
||||
|
||||
.viewed-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
gap: 20px;
|
||||
width: 1502px;
|
||||
height: 631px;
|
||||
top: 1677px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
left: 209px;
|
||||
position: absolute;
|
||||
top: 1340px;
|
||||
}
|
||||
.img-viewed-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
gap: 20px;
|
||||
width: 1502px;
|
||||
height: 631px;
|
||||
left: 209px;
|
||||
position: absolute;
|
||||
top: 1617px;
|
||||
}
|
||||
|
||||
|
||||
.popular-categories {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 1500px;
|
||||
height: 277px;
|
||||
top: 2308px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 2095px;
|
||||
left: 210px;
|
||||
gap: 20px;
|
||||
}
|
||||
.img-popular-categories {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 1500px;
|
||||
height: 277px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 2494px;
|
||||
left: 210px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.new-content-text {
|
||||
@ -58,7 +130,6 @@
|
||||
letter-spacing: 0%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: #8784C9;
|
||||
}
|
||||
|
||||
@ -72,7 +143,6 @@
|
||||
letter-spacing: 0%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: #8784C9;
|
||||
}
|
||||
|
||||
@ -86,7 +156,6 @@
|
||||
letter-spacing: 0%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: #8784C9;
|
||||
}
|
||||
|
||||
@ -100,7 +169,6 @@
|
||||
letter-spacing: 0%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
color: #8784C9;
|
||||
}
|
||||
|
||||
@ -122,11 +190,56 @@
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
bottom: -22px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.view-more-button:hover {
|
||||
background-color: #3C3882;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.view-more-button:hover .new-context-button-text {
|
||||
color: #8784C9;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
}
|
||||
|
||||
.img-view-more-button {
|
||||
width: 1500px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
gap: 10px;
|
||||
padding-top: 10px;
|
||||
padding-right: 679px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 679px;
|
||||
background-color: #8784C9;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
bottom: -22px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.img-view-more-button:hover {
|
||||
background-color: #3C3882;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.img-view-more-button:hover .new-context-button-text {
|
||||
color: #8784C9;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
}
|
||||
|
||||
.new-context-button-text {
|
||||
width: 134px;
|
||||
height: 22px;
|
||||
@ -137,16 +250,22 @@
|
||||
letter-spacing: 0%;
|
||||
color: #3C3882;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
max-width: 1500px;
|
||||
height: 120px;
|
||||
background: #05040A;
|
||||
background: #0D0C1C;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
gap: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.navbar-wrapper {
|
||||
width: 100%;
|
||||
background: #0D0C1C;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.logo {
|
||||
width: 307px;
|
||||
@ -160,7 +279,7 @@
|
||||
border: 1px solid #8784C9;
|
||||
border-radius: 20px;
|
||||
padding: 15px;
|
||||
background: #05040A;
|
||||
background: #0D0C1C;
|
||||
position: relative;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
@ -199,7 +318,7 @@
|
||||
font-size: 16px;
|
||||
height: 24px;
|
||||
color: #8784C9;
|
||||
background-color: #05040A;
|
||||
background-color: #0D0C1C;
|
||||
}
|
||||
|
||||
.search-container:hover {
|
||||
@ -235,7 +354,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #05040A;
|
||||
background: #0D0C1C;
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
|
||||
@ -331,21 +450,21 @@
|
||||
font-weight: 500;
|
||||
line-height: 21.82px;
|
||||
letter-spacing: 0%;
|
||||
color: #05040A;
|
||||
color: #0D0C1C;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
.login-btn:hover {
|
||||
background-color: #3C3882;
|
||||
color: #05040A;
|
||||
color: #0D0C1C;
|
||||
border-color: #3C3882;
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background: #05040A;
|
||||
background: #0D0C1C;
|
||||
border: 1px solid #3C3882;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
@ -370,7 +489,7 @@ color: white;
|
||||
width: 1500px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
top: 266px;
|
||||
top: 192px;
|
||||
left: 210px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -426,3 +545,200 @@ color: white;
|
||||
right: 0;
|
||||
background: linear-gradient(to right, rgba(5, 4, 10, 0) 30%, rgba(5, 4, 10, 0.5) 60%, #05040A 100%);
|
||||
}
|
||||
|
||||
.img-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-gap: 30px;
|
||||
width: 1500px;
|
||||
height: 708px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.img-card {
|
||||
width: 225px;
|
||||
height: 344px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Nunito, sans-serif;
|
||||
gap: 5px;
|
||||
}
|
||||
.img-card-cover {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
background: #1D1C2E;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 30px;
|
||||
width: 1500px;
|
||||
height: 518px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 244px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Nunito, sans-serif;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background: #1D1C2E;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
width: 100%;
|
||||
height: 59px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-stats {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-family: 'Nunito';
|
||||
font-size: 14px;
|
||||
color: #8784C9;
|
||||
}
|
||||
.img-small-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-gap: 30px;
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.img-small-card-cover {
|
||||
width: 189px;
|
||||
height: 250px;
|
||||
background: #1D1C2E;
|
||||
}
|
||||
.img-small-card {
|
||||
width: 189px;
|
||||
height: 314px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Nunito, sans-serif;
|
||||
gap: 5px;
|
||||
}
|
||||
.small-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-gap: 30px;
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.small-card {
|
||||
width: 100%;
|
||||
height: 227px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Nunito, sans-serif;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.small-card-cover {
|
||||
width: 100%;
|
||||
height: 163px;
|
||||
background: #1D1C2E;
|
||||
}
|
||||
|
||||
.small-card-info {
|
||||
width: 100%;
|
||||
height: 59px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.small-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.small-card-stats {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.small-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.small-card-text {
|
||||
font-family: 'Nunito';
|
||||
font-size: 14px;
|
||||
color: #8784C9;
|
||||
}
|
||||
.pc-card {
|
||||
width: 233px;
|
||||
height: 164px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.pc-card-cover {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background-color: #1D1C2E;
|
||||
}
|
||||
|
||||
.pc-card-stats {
|
||||
width: 100%;
|
||||
height: 19px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category-name-text {
|
||||
width: auto;
|
||||
max-width: 58px;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
color: #8784C9;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.categories-number {
|
||||
width: auto;
|
||||
max-width: 34px;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
color: #3C3882;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
right:5px;
|
||||
}
|
||||
113
templates/arts.html
Normal file
113
templates/arts.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
{% include 'navbar.html' %}
|
||||
{% include 'subnav.html' %}
|
||||
{% include 'tags_list.html' %}
|
||||
<div class="container img-new-content">
|
||||
<a class="new-content-text">НОВИНКИ</a>
|
||||
<div class="img-small-cards-grid">
|
||||
{% for i in range(7) %}
|
||||
<div class="img-small-card">
|
||||
<div class="img-small-card-cover"></div>
|
||||
<div class="small-card-info">
|
||||
<div class="small-card-header">
|
||||
<span class="small-card-text">Totoka</span>
|
||||
<div class="small-card-stats">
|
||||
<div class="small-stat">
|
||||
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
|
||||
<span class="small-card-text">134</span>
|
||||
</div>
|
||||
<div class="small-stat">
|
||||
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
|
||||
<span class="small-card-text">32113</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small-card-text">Big Brother Keep Hugging Me</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button class="view-more-button" style="width: 1503px; height: 40px; gap: 10px; padding: 10px 86px;">
|
||||
<span class="new-context-button-text">Смотреть Больше</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container img-popular-content">
|
||||
<a class="popular-content-text">ПОПУЛЯРНОЕ</a>
|
||||
<div class="img-cards-grid">
|
||||
{% for i in range(12) %}
|
||||
<div class="img-card">
|
||||
<div class="img-card-cover"></div>
|
||||
<div class="card-info">
|
||||
<div class="card-header">
|
||||
<span class="card-title" style="color: #3C3882;">Totoka</span>
|
||||
<div class="card-stats">
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
|
||||
<span style="color: #8784C9;">134</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
|
||||
<span style="color: #8784C9;">32113</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text" style="font-family: Nunito, sans-serif;">Big Brother Keep Hugging Me </p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button class="view-more-button" style="width: 1500px; height: 40px; padding: 10px 86px;">
|
||||
<span class="new-context-button-text">Смотреть Больше</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container img-viewed-content">
|
||||
<a class="viewed-content-text">ПРОСМАТРИВАЕМОЕ</a>
|
||||
<div class="img-cards-grid">
|
||||
{% for i in range(12) %}
|
||||
<div class="img-card">
|
||||
<div class="img-card-cover"></div>
|
||||
<div class="card-info">
|
||||
<div class="card-header">
|
||||
<span class="card-title" style="color: #3C3882;">Totoka</span>
|
||||
<div class="card-stats">
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
|
||||
<span style="color: #8784C9;">134</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
|
||||
<span style="color: #8784C9;">32113</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text" style="font-family: Nunito, sans-serif;">Big Brother Keep Hugging Me </p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button class="view-more-button" style="width: 1500px; height: 40px; padding: 10px 86px;margin-bottom: -170px;">
|
||||
<span class="new-context-button-text">Смотреть Больше</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container img-popular-categories">
|
||||
<a class="popular-categories-text">ПОПУЛЯРНЫЕ КАТЕГОРИИ</a>
|
||||
{% for i in range(6) %}
|
||||
<div class="pc-card">
|
||||
<div class="pc-card-cover"></div>
|
||||
<div class="pc-card-info">
|
||||
<div class="pc-card-stats">
|
||||
<span class="category-name-text">Category</span>
|
||||
<span class="categories-number" style="--length: 4;">14655</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,21 +1,113 @@
|
||||
<link rel="icon" href="{{ url_for('static', filename='artberry.ico') }}" type="image/x-icon">
|
||||
|
||||
{% extends "content.html" %}
|
||||
|
||||
{% block title %}🫐comics - artberry🫐{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="gallery">
|
||||
{% for comic in comics %}
|
||||
<div class="card comic-card">
|
||||
<a href="{{ url_for('view', content_type='comic', id=comic.id) }}">
|
||||
<img src="{{ url_for('static', filename='comicthumbs/' + comic.comic_thumbnail_file) }}" alt="Comic Thumbnail">
|
||||
</a>
|
||||
<p>{{ comic.name }}</p>
|
||||
<p>{{ comic.cookie_votes }} 🍪</p>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
{% include 'navbar.html' %}
|
||||
{% include 'subnav.html' %}
|
||||
{% include 'tags_list.html' %}
|
||||
<div class="container img-new-content">
|
||||
<a class="new-content-text">НОВИНКИ</a>
|
||||
<div class="img-small-cards-grid">
|
||||
{% for i in range(7) %}
|
||||
<div class="img-small-card">
|
||||
<div class="img-small-card-cover"></div>
|
||||
<div class="small-card-info">
|
||||
<div class="small-card-header">
|
||||
<span class="small-card-text">Totoka</span>
|
||||
<div class="small-card-stats">
|
||||
<div class="small-stat">
|
||||
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
|
||||
<span class="small-card-text">134</span>
|
||||
</div>
|
||||
<div class="small-stat">
|
||||
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
|
||||
<span class="small-card-text">32113</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small-card-text">Big Brother Keep Hugging Me</p>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>No comics found</p>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
</div>
|
||||
<button class="view-more-button" style="width: 1503px; height: 40px; gap: 10px; padding: 10px 86px;">
|
||||
<span class="new-context-button-text">Смотреть Больше</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container img-popular-content">
|
||||
<a class="popular-content-text">ПОПУЛЯРНОЕ</a>
|
||||
<div class="img-cards-grid">
|
||||
{% for i in range(12) %}
|
||||
<div class="img-card">
|
||||
<div class="img-card-cover"></div>
|
||||
<div class="card-info">
|
||||
<div class="card-header">
|
||||
<span class="card-title" style="color: #3C3882;">Totoka</span>
|
||||
<div class="card-stats">
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
|
||||
<span style="color: #8784C9;">134</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
|
||||
<span style="color: #8784C9;">32113</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text" style="font-family: Nunito, sans-serif;">Big Brother Keep Hugging Me </p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button class="view-more-button" style="width: 1500px; height: 40px; padding: 10px 86px;">
|
||||
<span class="new-context-button-text">Смотреть Больше</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container img-viewed-content">
|
||||
<a class="viewed-content-text">ПРОСМАТРИВАЕМОЕ</a>
|
||||
<div class="img-cards-grid">
|
||||
{% for i in range(12) %}
|
||||
<div class="img-card">
|
||||
<div class="img-card-cover"></div>
|
||||
<div class="card-info">
|
||||
<div class="card-header">
|
||||
<span class="card-title" style="color: #3C3882;">Totoka</span>
|
||||
<div class="card-stats">
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
|
||||
<span style="color: #8784C9;">134</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
|
||||
<span style="color: #8784C9;">32113</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text" style="font-family: Nunito, sans-serif;">Big Brother Keep Hugging Me </p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button class="view-more-button" style="width: 1500px; height: 40px; padding: 10px 86px;margin-bottom: -170px;">
|
||||
<span class="new-context-button-text">Смотреть Больше</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container img-popular-categories">
|
||||
<a class="popular-categories-text">ПОПУЛЯРНЫЕ КАТЕГОРИИ</a>
|
||||
{% for i in range(6) %}
|
||||
<div class="pc-card">
|
||||
<div class="pc-card-cover"></div>
|
||||
<div class="pc-card-info">
|
||||
<div class="pc-card-stats">
|
||||
<span class="category-name-text">Category</span>
|
||||
<span class="categories-number" style="--length: 4;">14655</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
<body>
|
||||
{% include 'navbar.html' %}
|
||||
{% include 'subnav.html' %}
|
||||
{% include 'tags_list.html' %}
|
||||
{% block content %}
|
||||
{% block new_content %}
|
||||
<div class="container new-content">
|
||||
<a class="new-content-text">НОВИНКИ</a>
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<div class="container popular-content">
|
||||
<a class="popular-content-text">ПОПУЛЯРНОЕ</a>
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
|
||||
<div class="container viewed-content">
|
||||
<a class="viewed-content-text">ПРОСМАТРИВАЕМОЕ</a>
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
|
||||
<div class="container popular-categories">
|
||||
<a class="popular-categories-text">ПОПУЛЯРНЫЕ КАТЕГОРИИ</a>
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</head>
|
||||
</html>
|
||||
@ -4,8 +4,10 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Navbar</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar-wrapper">
|
||||
<div class="navbar">
|
||||
<img src="{{ url_for('static', filename='navbar/logo.svg') }}" alt="Логотип" class="logo">
|
||||
<div class="search-container">
|
||||
@ -47,8 +49,8 @@
|
||||
<button class="login-btn">ВОЙТИ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/navbar.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/navbar.js') }}"></script>
|
||||
</body>
|
||||
</head>
|
||||
</html>
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
.subnav-container {
|
||||
max-width: 1500px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -21,13 +21,11 @@
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 168px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 112px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 375px;
|
||||
flex: 1;
|
||||
height: 50px;
|
||||
background-color: #3C3882;
|
||||
border: none;
|
||||
@ -35,12 +33,12 @@
|
||||
cursor: pointer;
|
||||
color: #8784C9;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.button:nth-child(1) { padding: 15px 139px; }
|
||||
.button:nth-child(2) { padding: 15px 134px; }
|
||||
.button:nth-child(3) { padding: 15px 136px; }
|
||||
.button:nth-child(4) { padding: 15px 136px; }
|
||||
.button:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
{% include 'navbar.html' %}
|
||||
{% include 'subnav.html' %}
|
||||
{% include 'tags_list.html' %}
|
||||
<div class="container new-content">
|
||||
<a class="new-content-text">НОВИНКИ</a>
|
||||
<div class="small-cards-grid">
|
||||
{% for i in range(5) %}
|
||||
<div class="small-card">
|
||||
<div class="small-card-cover"></div>
|
||||
<div class="small-card-info">
|
||||
<div class="small-card-header">
|
||||
<span class="small-card-text">Totoka</span>
|
||||
<div class="small-card-stats">
|
||||
<div class="small-stat">
|
||||
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
|
||||
<span class="small-card-text">134</span>
|
||||
</div>
|
||||
<div class="small-stat">
|
||||
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
|
||||
<span class="small-card-text">32113</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small-card-text">Big Brother Keep Hugging Me 4</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
<div class="container popular-content">
|
||||
<a class="popular-content-text">ПОПУЛЯРНОЕ</a>
|
||||
<div class="cards-grid">
|
||||
{% for i in range(8) %}
|
||||
<div class="card">
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-info">
|
||||
<div class="card-header">
|
||||
<span class="card-title" style="color: #3C3882;">Totoka</span>
|
||||
<div class="card-stats">
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
|
||||
<span style="color: #8784C9;">134</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
|
||||
<span style="color: #8784C9;">32113</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text" style="font-family: Nunito, sans-serif;">Big Brother Keep Hugging Me 4</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
<div class="container viewed-content">
|
||||
<a class="viewed-content-text">ПРОСМАТРИВАЕМОЕ</a>
|
||||
<div class="cards-grid">
|
||||
{% for i in range(8) %}
|
||||
<div class="card">
|
||||
<div class="card-cover"></div>
|
||||
<div class="card-info">
|
||||
<div class="card-header">
|
||||
<span class="card-title" style="color: #3C3882;">Totoka</span>
|
||||
<div class="card-stats">
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
|
||||
<span style="color: #8784C9;">134</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
|
||||
<span style="color: #8784C9;">32113</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text" style="font-family: Nunito, sans-serif;">Big Brother Keep Hugging Me 4</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
|
||||
<div class="container popular-categories">
|
||||
<a class="popular-categories-text">ПОПУЛЯРНЫЕ КАТЕГОРИИ</a>
|
||||
{% for i in range(6) %}
|
||||
<div class="pc-card">
|
||||
<div class="pc-card-cover"></div>
|
||||
<div class="pc-card-info">
|
||||
<div class="pc-card-stats">
|
||||
<span class="category-name-text">Category</span>
|
||||
<span class="categories-number" style="--length: 4;">14655</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user