new design

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")
+- ##### ФРЕЙМВОРК: [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
-- ##### 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`*
+
+------------

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):

static/css/styles.css

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

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;
+    height: 631px;
-    top: 737px;
+    left: 209px;
-    left: 50%;
-    transform: translateX(-50%);
     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: 209px;
-    left: 50%;
-    transform: translateX(-50%);
     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;
+    padding: 0;
-    left: 50%;
+    box-sizing: border-box;
-    transform: translateX(-50%);
     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;
+}

templates/arts.html

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

templates/comics.html

@@ -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>
-    {% else %}
-        <p>No comics found</p>
         {% endfor %}
-</section>
+    </div>
-{% endblock %}
+    <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>

templates/content.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>

templates/navbar.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>

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;
+            top: 112px;
-            left: 50%;
-            transform: translateX(-50%);
         }
 
         .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: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>
 </head>
 <body>

templates/videos.html

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