aneuhmanh/Artberry-web
aneuhmanh/Artberry-web
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new design

Browse Source
This commit is contained in:
aneuhmanh 2025-03-15 03:15:15 +02:00
parent 61da6bd8d1
commit 9cdbbaf2a3
10 changed files with 755 additions and 600 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
README.md
View File

@ -1,20 +1,20 @@
[![](https://artberry.xyz/static/Logo.svg "test")](https://artberry.xyz/static/Logo.svg "test") [![](https://artberry.xyz/static/Logo.svg "test")](https://artberry.xyz/static/Logo.svg "test")
### booru сайт нового поколения ### Booru сайт нового поколения
**репозиторий для разработки и тестирования новых версий веб-приложения artberry** **Открытый репозиторий веб-приложения [Artberry](https://artberry.xyz/ "Artberry")**
------------ ------------
### используемые технологии ### Используемые технологии
#### backend: #### Backend:
- ##### ЯП: [Python](http://https://www.python.org/ "Python") - ##### ЯП: [Python](http://https://www.python.org/ "Python")
- ##### ФРЕЙМВОРК: [Flask](http://https://flask.palletsprojects.com/en/stable/ "Flask") - ##### ФРЕЙМВОРК: [Flask](https://https://flask.palletsprojects.com/en/stable/ "Flask")
- ##### ШАБЛОНИЗАЦИЯ: [JINJA](http:/https://jinja.palletsprojects.com/en/stable// "JINJA") - ##### ШАБЛОНИЗАЦИЯ: [JINJA](https:/https://jinja.palletsprojects.com/en/stable// "JINJA")
#### frontend: #### Frontend:
- ##### HTML - ##### HTML
- ##### CSS - ##### CSS | [SASS](https://sass-lang.com/ "SASS")
- ##### JAVASCRIPT - ##### JAVASCRIPT
------------ ------------
@ -23,10 +23,10 @@
#### ЗАПУСК И ТЕСТИРОВАНИЕ #### ЗАПУСК И ТЕСТИРОВАНИЕ
#### Для удобства и скорости разработки выполните следующие шаги: #### Для удобства и скорости разработки выполните следующие шаги:
#### создайте виртуальное окружение: #### Создание виртуального окружения:
- `python -m venv venv` - `python -m venv venv`
#### запустите виртуальное окружение: #### Запуск виртуального окружения:
*WINDOWS*: *WINDOWS*:
- **powershell:** ` .\venv\Scripts\Activate` - **powershell:** ` .\venv\Scripts\Activate`
- **CMD:** `venv\Scripts\activate.bat` - **CMD:** `venv\Scripts\activate.bat`
@ -34,10 +34,10 @@
*LINUX* | *MAC*: *LINUX* | *MAC*:
- `source venv/bin/activate` - `source venv/bin/activate`
#### установите зависимости: #### Установка зависимостей:
- `pip install -r requirements.txt` - `pip install -r requirements.txt`
#### запустите проект #### Запуск проекта:
- `python app.py` или `flask run` - `python app.py` или `flask run`
#### Для отладки в конце файла `app.py` измените: #### Для отладки в конце файла `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
View File

@ -80,6 +80,12 @@ def index():
content_type='art' content_type='art'
) )
@app.route('/arts')
def arts():
return render_template(
'arts.html'
)
@app.route('/vote_art/<int:image_id>', methods=['POST']) @app.route('/vote_art/<int:image_id>', methods=['POST'])
@login_required @login_required
def vote_art(image_id): def vote_art(image_id):

459
static/css/styles.css
View File

@ -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 */

370
static/css/styles.scss
View File

@ -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 { .container {
position: absolute; position: absolute;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
background-color: #1f091b; background-color: #05040A;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
.new-content { .new-content {
width: 1500px; width: 1502px;
height: 340px; height: 340px;
top: 349px; top: 257px;
left: 50%; left: 50%;
transform: translateX(-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 { .popular-content {
@ -23,29 +48,76 @@
padding: 0px; padding: 0px;
gap: 20px; gap: 20px;
width: 1502px; width: 1502px;
height: 900px; height: 631px;
top: 737px; left: 209px;
left: 50%;
transform: translateX(-50%);
position: absolute; 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 { .viewed-content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 20px;
width: 1502px; width: 1502px;
height: 631px; height: 631px;
top: 1677px; left: 209px;
left: 50%;
transform: translateX(-50%);
position: absolute; 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 { .popular-categories {
display: flex;
justify-content: space-between;
align-items: center;
width: 1500px; width: 1500px;
height: 277px; height: 277px;
top: 2308px; padding: 0;
left: 50%; box-sizing: border-box;
transform: translateX(-50%);
position: absolute; 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 { .new-content-text {
@ -58,7 +130,6 @@
letter-spacing: 0%; letter-spacing: 0%;
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px;
color: #8784C9; color: #8784C9;
} }
@ -72,7 +143,6 @@
letter-spacing: 0%; letter-spacing: 0%;
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px;
color: #8784C9; color: #8784C9;
} }
@ -86,7 +156,6 @@
letter-spacing: 0%; letter-spacing: 0%;
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px;
color: #8784C9; color: #8784C9;
} }
@ -100,7 +169,6 @@
letter-spacing: 0%; letter-spacing: 0%;
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px;
color: #8784C9; color: #8784C9;
} }
@ -122,11 +190,56 @@
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
position: absolute; position: absolute;
bottom: 10px; bottom: -22px;
left: 50%; left: 50%;
transform: translateX(-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 { .new-context-button-text {
width: 134px; width: 134px;
height: 22px; height: 22px;
@ -137,16 +250,22 @@
letter-spacing: 0%; letter-spacing: 0%;
color: #3C3882; color: #3C3882;
} }
.navbar { .navbar {
width: 100%; width: 100%;
max-width: 1500px; max-width: 1500px;
height: 120px; height: 120px;
background: #05040A; background: #0D0C1C;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px; padding: 0 20px;
gap: 20px; gap: 20px;
margin: 0 auto; }
.navbar-wrapper {
width: 100%;
background: #0D0C1C;
display: flex;
justify-content: center;
} }
.logo { .logo {
width: 307px; width: 307px;
@ -160,7 +279,7 @@
border: 1px solid #8784C9; border: 1px solid #8784C9;
border-radius: 20px; border-radius: 20px;
padding: 15px; padding: 15px;
background: #05040A; background: #0D0C1C;
position: relative; position: relative;
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
} }
@ -199,7 +318,7 @@
font-size: 16px; font-size: 16px;
height: 24px; height: 24px;
color: #8784C9; color: #8784C9;
background-color: #05040A; background-color: #0D0C1C;
} }
.search-container:hover { .search-container:hover {
@ -235,7 +354,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #05040A; background: #0D0C1C;
cursor: pointer; cursor: pointer;
padding: 15px; padding: 15px;
transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease; transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
@ -331,21 +450,21 @@
font-weight: 500; font-weight: 500;
line-height: 21.82px; line-height: 21.82px;
letter-spacing: 0%; letter-spacing: 0%;
color: #05040A; color: #0D0C1C;
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
} }
.login-btn:hover { .login-btn:hover {
background-color: #3C3882; background-color: #3C3882;
color: #05040A; color: #0D0C1C;
border-color: #3C3882; border-color: #3C3882;
} }
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%; top: 100%;
right: 0; right: 0;
background: #05040A; background: #0D0C1C;
border: 1px solid #3C3882; border: 1px solid #3C3882;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@ -370,7 +489,7 @@ color: white;
width: 1500px; width: 1500px;
height: 35px; height: 35px;
position: absolute; position: absolute;
top: 266px; top: 192px;
left: 210px; left: 210px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -425,4 +544,201 @@ color: white;
position: absolute; position: absolute;
right: 0; right: 0;
background: linear-gradient(to right, rgba(5, 4, 10, 0) 30%, rgba(5, 4, 10, 0.5) 60%, #05040A 100%); 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
View 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>

132
templates/comics.html
View File

@ -1,21 +1,113 @@
<link rel="icon" href="{{ url_for('static', filename='artberry.ico') }}" type="image/x-icon"> <!DOCTYPE html>
<html>
{% extends "content.html" %} <head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
{% block title %}🫐comics - artberry🫐{% endblock %} </head>
<body>
{% block content %} {% include 'navbar.html' %}
<section class="gallery"> {% include 'subnav.html' %}
{% for comic in comics %} {% include 'tags_list.html' %}
<div class="card comic-card"> <div class="container img-new-content">
<a href="{{ url_for('view', content_type='comic', id=comic.id) }}"> <a class="new-content-text">НОВИНКИ</a>
<img src="{{ url_for('static', filename='comicthumbs/' + comic.comic_thumbnail_file) }}" alt="Comic Thumbnail"> <div class="img-small-cards-grid">
</a> {% for i in range(7) %}
<p>{{ comic.name }}</p> <div class="img-small-card">
<p>{{ comic.cookie_votes }} 🍪</p> <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> </div>
{% else %} {% endfor %}
<p>No comics found</p> </div>
{% endfor %} <button class="view-more-button" style="width: 1503px; height: 40px; gap: 10px; padding: 10px 86px;">
</section> <span class="new-context-button-text">Смотреть Больше</span>
{% endblock %} </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>

34
templates/content.html
View File

@ -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>

80
templates/navbar.html
View File

@ -4,51 +4,53 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar</title> <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> <body>
<div class="navbar"> <div class="navbar-wrapper">
<img src="{{ url_for('static', filename='navbar/logo.svg') }}" alt="Логотип" class="logo"> <div class="navbar">
<div class="search-container"> <img src="{{ url_for('static', filename='navbar/logo.svg') }}" alt="Логотип" class="logo">
<div class="search-icon-container"> <div class="search-container">
<img src="{{ url_for('static', filename='navbar/search-icon.svg') }}" alt="Поиск" class="search-icon"> <div class="search-icon-container">
<img src="{{ url_for('static', filename='navbar/search-hover.svg') }}" alt="Поиск (hover)" <img src="{{ url_for('static', filename='navbar/search-icon.svg') }}" alt="Поиск" class="search-icon">
class="search-hover-icon"> <img src="{{ url_for('static', filename='navbar/search-hover.svg') }}" alt="Поиск (hover)"
</div> class="search-hover-icon">
<input type="text" placeholder="Поиск" class="search-input" onfocus="this.placeholder=''" onblur="this.placeholder='Поиск'"> </div>
<div class="icon-container"> <input type="text" placeholder="Поиск" class="search-input" onfocus="this.placeholder=''" onblur="this.placeholder='Поиск'">
<img src="{{ url_for('static', filename='navbar/video-icon.svg') }}" alt="Видео" class="video-icon"> <div class="icon-container">
<img src="{{ url_for('static', filename='navbar/tray-icon.svg') }}" alt="Поднос" class="tray-icon"> <img src="{{ url_for('static', filename='navbar/video-icon.svg') }}" alt="Видео" class="video-icon">
<div class="dropdown-menu"> <img src="{{ url_for('static', filename='navbar/tray-icon.svg') }}" alt="Поднос" class="tray-icon">
<div class="dropdown-item">Пункт 1</div> <div class="dropdown-menu">
<div class="dropdown-item">Пункт 2</div> <div class="dropdown-item">Пункт 1</div>
<div class="dropdown-item">Пункт 3</div> <div class="dropdown-item">Пункт 2</div>
<div class="dropdown-item">Пункт 3</div>
</div>
</div> </div>
</div> </div>
</div> <div class="translate-btn">
<div class="translate-btn"> <img src="{{ url_for('static', filename='navbar/translate-icon.svg') }}" alt="Перевод"
<img src="{{ url_for('static', filename='navbar/translate-icon.svg') }}" alt="Перевод" class="translate-icon">
class="translate-icon"> <img src="{{ url_for('static', filename='navbar/translate-hover.svg') }}" alt="Перевод (hover)"
<img src="{{ url_for('static', filename='navbar/translate-hover.svg') }}" alt="Перевод (hover)" class="translate-hover-icon">
class="translate-hover-icon"> </div>
</div> <nav class="menu">
<nav class="menu"> <a href="/videos">ВИДЕО</a>
<a href="/videos">ВИДЕО</a> <a href="/">АРТЫ</a>
<a href="/">АРТЫ</a> <a href="/comics">МАНГА</a>
<a href="/comics">МАНГА</a> <a href="/gifs">ГИФКИ</a>
<a href="/gifs">ГИФКИ</a> </nav>
</nav> <div class="auth-container">
<div class="auth-container"> <div class="discord-icon-container">
<div class="discord-icon-container"> <img src="{{ url_for('static', filename='navbar/discord-icon.svg') }}" alt="Discord"
<img src="{{ url_for('static', filename='navbar/discord-icon.svg') }}" alt="Discord" class="discord-icon">
class="discord-icon"> <img src="{{ url_for('static', filename='navbar/discord-hover.svg') }}" alt="Discord Hover"
<img src="{{ url_for('static', filename='navbar/discord-hover.svg') }}" alt="Discord Hover" class="discord-hover-icon">
class="discord-hover-icon"> </div>
<button class="login-btn">ВОЙТИ</button>
</div> </div>
<button class="login-btn">ВОЙТИ</button>
</div> </div>
</div> </div>
<script src="{{ url_for('static', filename='js/navbar.js') }}"></script> <script src="{{ url_for('static', filename='js/navbar.js') }}"></script>
</body> </body>
</head>
</html> </html>

16
templates/subnav.html
View File

@ -12,7 +12,7 @@
} }
.subnav-container { .subnav-container {
max-width: 1500px; width: 100%;
height: 50px; height: 50px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -21,13 +21,11 @@
padding: 0 20px; padding: 0 20px;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
top: 168px; top: 112px;
left: 50%;
transform: translateX(-50%);
} }
.button { .button {
width: 375px; flex: 1;
height: 50px; height: 50px;
background-color: #3C3882; background-color: #3C3882;
border: none; border: none;
@ -35,12 +33,12 @@
cursor: pointer; cursor: pointer;
color: #8784C9; color: #8784C9;
box-sizing: border-box; box-sizing: border-box;
padding: 15px 0;
} }
.button:nth-child(1) { padding: 15px 139px; } .button:not(:last-child) {
.button:nth-child(2) { padding: 15px 134px; } margin-right: 20px;
.button:nth-child(3) { padding: 15px 136px; } }
.button:nth-child(4) { padding: 15px 136px; }
</style> </style>
</head> </head>
<body> <body>

108
templates/videos.html
View File

@ -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>