diff --git a/README.md b/README.md index ef074ea..c846eb7 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,20 @@ [![](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") -- ##### ФРЕЙМВОРК: [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`* + +------------ \ No newline at end of file diff --git a/app.py b/app.py index e3cf26b..5adda33 100644 --- a/app.py +++ b/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/', methods=['POST']) @login_required def vote_art(image_id): diff --git a/static/css/styles.css b/static/css/styles.css deleted file mode 100644 index be2157a..0000000 --- a/static/css/styles.css +++ /dev/null @@ -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 */ diff --git a/static/css/styles.scss b/static/css/styles.scss index f57c711..5678dd8 100644 --- a/static/css/styles.scss +++ b/static/css/styles.scss @@ -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; @@ -425,4 +544,201 @@ color: white; position: absolute; 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; } \ No newline at end of file diff --git a/templates/arts.html b/templates/arts.html new file mode 100644 index 0000000..f9c17f7 --- /dev/null +++ b/templates/arts.html @@ -0,0 +1,113 @@ + + + + + + + {% include 'navbar.html' %} + {% include 'subnav.html' %} + {% include 'tags_list.html' %} +
+ НОВИНКИ +
+ {% for i in range(7) %} +
+
+
+
+ Totoka +
+
+ Лайк + 134 +
+
+ Просмотры + 32113 +
+
+
+

Big Brother Keep Hugging Me

+
+
+ {% endfor %} +
+ +
+
+ ПОПУЛЯРНОЕ +
+ {% for i in range(12) %} +
+
+
+
+ Totoka +
+
+ Лайк + 134 +
+
+ Просмотры + 32113 +
+
+
+

Big Brother Keep Hugging Me

+
+
+ {% endfor %} +
+ +
+
+ ПРОСМАТРИВАЕМОЕ +
+ {% for i in range(12) %} +
+
+
+
+ Totoka +
+
+ Лайк + 134 +
+
+ Просмотры + 32113 +
+
+
+

Big Brother Keep Hugging Me

+
+
+ {% endfor %} +
+ +
+
+ ПОПУЛЯРНЫЕ КАТЕГОРИИ + {% for i in range(6) %} +
+
+
+
+ Category + 14655 +
+
+
+ {% endfor %} + +
+ + \ No newline at end of file diff --git a/templates/comics.html b/templates/comics.html index 69b996f..f9c17f7 100644 --- a/templates/comics.html +++ b/templates/comics.html @@ -1,21 +1,113 @@ - - -{% extends "content.html" %} - -{% block title %}🫐comics - artberry🫐{% endblock %} - -{% block content %} -
- {% for comic in comics %} -
- - Comic Thumbnail - -

{{ comic.name }}

-

{{ comic.cookie_votes }} 🍪

+ + + + + + + {% include 'navbar.html' %} + {% include 'subnav.html' %} + {% include 'tags_list.html' %} +
+ НОВИНКИ +
+ {% for i in range(7) %} +
+
+
+
+ Totoka +
+
+ Лайк + 134 +
+
+ Просмотры + 32113 +
+
+
+

Big Brother Keep Hugging Me

+
- {% else %} -

No comics found

- {% endfor %} -
-{% endblock %} + {% endfor %} + + + +
+ ПОПУЛЯРНОЕ +
+ {% for i in range(12) %} +
+
+
+
+ Totoka +
+
+ Лайк + 134 +
+
+ Просмотры + 32113 +
+
+
+

Big Brother Keep Hugging Me

+
+
+ {% endfor %} +
+ +
+
+ ПРОСМАТРИВАЕМОЕ +
+ {% for i in range(12) %} +
+
+
+
+ Totoka +
+
+ Лайк + 134 +
+
+ Просмотры + 32113 +
+
+
+

Big Brother Keep Hugging Me

+
+
+ {% endfor %} +
+ +
+
+ ПОПУЛЯРНЫЕ КАТЕГОРИИ + {% for i in range(6) %} +
+
+
+
+ Category + 14655 +
+
+
+ {% endfor %} + +
+ + \ No newline at end of file diff --git a/templates/content.html b/templates/content.html index 693d7bd..e69de29 100644 --- a/templates/content.html +++ b/templates/content.html @@ -1,34 +0,0 @@ - - - - - - {% include 'navbar.html' %} - {% include 'subnav.html' %} - {% include 'tags_list.html' %} - {% block content %} - {% block new_content %} -
- НОВИНКИ - -
- {% endblock %} - -
- ПОПУЛЯРНОЕ - -
- -
- ПРОСМАТРИВАЕМОЕ - -
- -
- ПОПУЛЯРНЫЕ КАТЕГОРИИ - -
- {% endblock %} - - - \ No newline at end of file diff --git a/templates/navbar.html b/templates/navbar.html index da34541..5d2e295 100644 --- a/templates/navbar.html +++ b/templates/navbar.html @@ -4,51 +4,53 @@ Navbar - + + -
- -
-
- Поиск - Поиск (hover) -
- -
- Видео - Поднос -
-
Пункт 1
-
Пункт 2
-
Пункт 3
+
+
+ +
+
+ Поиск + Поиск (hover) +
+ +
+ Видео + Поднос +
+
Пункт 1
+
Пункт 2
+
Пункт 3
+
-
-
- Перевод - Перевод (hover) -
- -
-
- Discord - Discord Hover +
+ Перевод + Перевод (hover) +
+ +
+
+ Discord + Discord Hover +
+
-
- + - \ No newline at end of file diff --git a/templates/subnav.html b/templates/subnav.html index 2d40bbd..db698f3 100644 --- a/templates/subnav.html +++ b/templates/subnav.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; + } diff --git a/templates/videos.html b/templates/videos.html index e69de29..e450638 100644 --- a/templates/videos.html +++ b/templates/videos.html @@ -0,0 +1,108 @@ + + + + + + + {% include 'navbar.html' %} + {% include 'subnav.html' %} + {% include 'tags_list.html' %} +
+ НОВИНКИ +
+ {% for i in range(5) %} +
+
+
+
+ Totoka +
+
+ Лайк + 134 +
+
+ Просмотры + 32113 +
+
+
+

Big Brother Keep Hugging Me 4

+
+
+ {% endfor %} +
+ +
+
+ ПОПУЛЯРНОЕ +
+ {% for i in range(8) %} +
+
+
+
+ Totoka +
+
+ Лайк + 134 +
+
+ Просмотры + 32113 +
+
+
+

Big Brother Keep Hugging Me 4

+
+
+ {% endfor %} +
+ +
+
+ ПРОСМАТРИВАЕМОЕ +
+ {% for i in range(8) %} +
+
+
+
+ Totoka +
+
+ Лайк + 134 +
+
+ Просмотры + 32113 +
+
+
+

Big Brother Keep Hugging Me 4

+
+
+ {% endfor %} +
+ +
+ +
+ ПОПУЛЯРНЫЕ КАТЕГОРИИ + {% for i in range(6) %} +
+
+
+
+ Category + 14655 +
+
+
+ {% endfor %} + +
+ + \ No newline at end of file