art catalogue

app.py

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

static/css/styles.scss

@@ -1,6 +1,11 @@
+$dark-violet: #0D0C1C;
+$violet: #3c3882;
+$light-violet: #8784C9;
 @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');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 body{
     background-color: #05040A;
+    font-family: Nunito, sans-serif;
 }
 .container {
     position: absolute;
@@ -123,53 +128,49 @@ body{
 .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;
-    color: #8784C9;
+    color: $light-violet;
 }
 
 .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;
-    color: #8784C9;
+    color: $light-violet;
 }
 
 .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;
-    color: #8784C9;
+    color: $light-violet;
 }
 
 .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;
-    color: #8784C9;
+    color: $light-violet;
 }
 
 .view-more-button {
@@ -181,10 +182,9 @@ body{
     padding-right: 679px;
     padding-bottom: 10px;
     padding-left: 679px;
-    background-color: #8784C9;
+    background-color: $light-violet;
     border: none;
     color: #fff;
-    font-family: Nunito, sans-serif;
     font-weight: 500;
     font-size: 16px;
     cursor: pointer;
@@ -201,7 +201,7 @@ body{
 }
 
 .view-more-button:hover .new-context-button-text {
-    color: #8784C9;
+    color: $light-violet;
     transition: color 0.3s ease;
 
 }
@@ -215,10 +215,9 @@ body{
     padding-right: 679px;
     padding-bottom: 10px;
     padding-left: 679px;
-    background-color: #8784C9;
+    background-color: $light-violet;
     border: none;
     color: #fff;
-    font-family: Nunito, sans-serif;
     font-weight: 500;
     font-size: 16px;
     cursor: pointer;
@@ -235,7 +234,7 @@ body{
 }
 
 .img-view-more-button:hover .new-context-button-text {
-    color: #8784C9;
+    color: $light-violet;
     transition: color 0.3s ease;
 
 }
@@ -243,7 +242,6 @@ body{
 .new-context-button-text {
     width: 134px;
     height: 22px;
-    font-family: Nunito, sans-serif;
     font-weight: 500;
     font-size: 16px;
     line-height: 100%;
@@ -255,7 +253,7 @@ body{
     width: 100%;
     max-width: 1500px;
     height: 120px;
-    background: #0D0C1C;
+    background: $dark-violet;
     display: flex;
     align-items: center;
     padding: 0 20px;
@@ -263,7 +261,7 @@ body{
 }
 .navbar-wrapper {
     width: 100%;
-    background: #0D0C1C;
+    background: $dark-violet;
     display: flex;
     justify-content: center;
 }
@@ -276,10 +274,10 @@ body{
     align-items: center;
     width: 452.5px;
     height: 27px;
-    border: 1px solid #8784C9;
+    border: 1px solid $light-violet;
     border-radius: 20px;
     padding: 15px;
-    background: #0D0C1C;
+    background: $dark-violet;
     position: relative;
     transition: border-color 0.3s ease;
 }
@@ -317,8 +315,8 @@ body{
     flex-grow: 1;
     font-size: 16px;
     height: 24px;
-    color: #8784C9;
+    color: $light-violet;
-    background-color: #0D0C1C;
+    background-color: $dark-violet;
 }
 
 .search-container:hover {
@@ -349,12 +347,12 @@ body{
     position: relative;
     width: 23px;
     height: 27px;
-    border: 1px solid #8784C9;
+    border: 1px solid $light-violet;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #0D0C1C;
+    background: $dark-violet;
     cursor: pointer;
     padding: 15px;
     transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
@@ -393,7 +391,6 @@ body{
 }
 .menu {
     display: flex;
-    font-family: Nunito, sans-serif;
     gap: 22px;
     width: 519.5px;
     height: 22px;
@@ -403,7 +400,7 @@ body{
 }
 .menu a {
     text-decoration: none;
-    color: #8784C9;
+    color: $light-violet;
     font-size: 16px;
     transition: color 0.3s ease;
 }
@@ -442,29 +439,28 @@ body{
     width: 87px;
     height: 42px;
     border-radius: 20px;
-    background: #8784C9;
+    background: $light-violet;
-    border: 1px solid #8784C9;
+    border: 1px solid $light-violet;
     padding: 10px 15px;
     font-size: 16px;
-    font-family: Nunito, sans-serif;
     font-weight: 500;
     line-height: 21.82px;
     letter-spacing: 0%;
-    color: #0D0C1C;
+    color: $dark-violet;
     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: #0D0C1C;
+    color: $dark-violet;
     border-color: #3C3882;
 }
 .dropdown-menu {
 position: absolute;
 top: 100%;
 right: 0;
-background: #0D0C1C;
+background: $dark-violet;
 border: 1px solid #3C3882;
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -477,7 +473,7 @@ z-index: 10;
 padding: 10px 15px;
 font-size: 14px;
 border-radius:4px;
-color: #8784C9;
+color: $light-violet;
 cursor: pointer;
 transition: background 0.3s ease, color 0.3s ease;
 }
@@ -498,6 +494,12 @@ color: white;
     border: none;
     background-color: #05040A;
     overflow: hidden;
+
+    > .list-button {
+        position: absolute;
+        right: 0;
+        z-index: 2;
+    }
 }
 
 .tag {
@@ -509,7 +511,7 @@ color: white;
     justify-content: center;
     background-color: #3C3882;
     border: none;
-    color: #8784C9;
+    color: $light-violet;
     margin: 0;
     visibility: visible;
     transition: visibility 0.3s ease;
@@ -523,7 +525,7 @@ color: white;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 2px solid #8784C9;
+    border: 2px solid $light-violet;
     background-color: transparent;
     color: #3C3882;
     margin-left: 10px;
@@ -532,12 +534,6 @@ color: white;
     z-index: 2;
 }
 
-.tags-container > .list-button {
-    position: absolute;
-    right: 0;
-    z-index: 2;
-}
-
 .taglist-shadow {
     width: 64px;
     height: 35px;
@@ -545,7 +541,6 @@ 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);
@@ -559,7 +554,6 @@ color: white;
     height: 344px;
     display: flex;
     flex-direction: column;
-    font-family: Nunito, sans-serif;
     gap: 5px;
 }
 .img-card-cover {
@@ -582,7 +576,6 @@ color: white;
     height: 244px;
     display: flex;
     flex-direction: column;
-    font-family: Nunito, sans-serif;
     gap: 5px;
 }
 
@@ -618,9 +611,8 @@ color: white;
 }
 
 .card-text {
-    font-family: 'Nunito';
     font-size: 14px;
-    color: #8784C9;
+    color: $light-violet;
 }
 .img-small-cards-grid {
     display: grid;
@@ -639,7 +631,6 @@ color: white;
     height: 314px;
     display: flex;
     flex-direction: column;
-    font-family: Nunito, sans-serif;
     gap: 5px;
 }
 .small-cards-grid {
@@ -655,7 +646,6 @@ color: white;
     height: 227px;
     display: flex;
     flex-direction: column;
-    font-family: Nunito, sans-serif;
     gap: 5px;
 }
 
@@ -691,9 +681,8 @@ color: white;
 }
 
 .small-card-text {
-    font-family: 'Nunito';
     font-size: 14px;
-    color: #8784C9;
+    color: $light-violet;
 }
 .pc-card {
     width: 233px;
@@ -720,19 +709,17 @@ color: white;
 .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;
+    color: $light-violet;
     margin-left: -2px;
 }
 
 .categories-number {
     width: auto;
     max-width: 34px;
-    font-family: Nunito, sans-serif;
     font-weight: 400;
     font-size: 14px;
     line-height: 100%;
@@ -742,3 +729,134 @@ color: white;
     position: relative;
     right:5px;
 }
+
+.ac-img-small-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-gap: 30px;
+    width: 100%;
+    margin-top: 60px;
+}
+
+.ct-img-card {
+    width: 225px;
+    height: 344px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.ct-img-card-cover {
+    width: 100%;
+    height: 280px;
+    background: #1D1C2E;
+}
+
+.ct-small-card-info {
+    width: 100%;
+    height: 59px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.ct-small-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ct-small-card-stats {
+    display: flex;
+    gap: 10px;
+}
+
+.ct-small-stat {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.ct-small-card-text {
+    font-size: 14px;
+    color: $light-violet;
+}
+
+.ac-img-small-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-gap: 30px;
+    width: 100%;
+    margin-top: 60px;
+}
+
+.most-new-button {
+    width: 276px;
+    height: 40px;
+    border-radius: 10px;
+    background-color: #3C3882;
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    text-align: center;
+    margin-left: -298px;
+}
+
+.most-new-button-text {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    white-space: nowrap;
+}
+.pagination-container {
+    width: 626px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    position: absolute;
+    bottom: -180%;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .swipe-button {
+        width: 128px;
+        height: 50px;
+        border-radius: 5px;
+        padding: 7px 45px;
+        background-color: $violet;
+        border: none;
+        color: #fff;
+        font-weight: 500;
+        font-size: 16px;
+        cursor: pointer;
+        transform: rotate(0deg);
+
+    }
+
+    .page-buttons-container {
+        width: 350px;
+        height: 50px;
+        display: flex;
+        gap: 10px;
+
+        .page-button {
+            width: 50px;
+            height: 50px;
+            border-radius: 5px;
+            padding: 1px 6px;
+            background-color: $violet;
+            border: none;
+            color: white;
+            font-weight: 500;
+            size: 16px;
+            cursor: pointer;
+            font-family: Inter;
+        }
+    }
+}

static/icons/left-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.93934 21.0607C1.35355 20.4749 1.35355 19.5251 1.93934 18.9393L11.4853 9.3934C12.0711 8.80761 13.0208 8.80761 13.6066 9.3934C14.1924 9.97919 14.1924 10.9289 13.6066 11.5147L5.12132 20L13.6066 28.4853C14.1924 29.0711 14.1924 30.0208 13.6066 30.6066C13.0208 31.1924 12.0711 31.1924 11.4853 30.6066L1.93934 21.0607ZM4 21.5H3V18.5H4V21.5Z" fill="#595959"/>
+</svg>

static/icons/right-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0607 21.0607C22.6464 20.4749 22.6464 19.5251 22.0607 18.9393L12.5147 9.3934C11.9289 8.80761 10.9792 8.80761 10.3934 9.3934C9.80761 9.97919 9.80761 10.9289 10.3934 11.5147L18.8787 20L10.3934 28.4853C9.80761 29.0711 9.80761 30.0208 10.3934 30.6066C10.9792 31.1924 11.9289 31.1924 12.5147 30.6066L22.0607 21.0607ZM20 21.5H21V18.5H20V21.5Z" fill="#595959"/>
+</svg>

templates/arts-catalogue.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body>
+    {% include 'navbar.html' %}
+    {% include 'subnav.html' %}
+    <div class="container img-new-content">
+        <a class="new-content-text">ПОПУЛЯРНОЕ</a>
+        <div class="ac-img-small-cards-grid">
+            {% for i in range(36) %}
+            <div class="ct-img-card">
+                <div class="ct-img-card-cover"></div>
+                <div class="ct-small-card-info">
+                    <div class="ct-small-card-header">
+                        <span class="ct-small-card-text">Totoka</span>
+                        <div class="ct-small-card-stats">
+                            <div class="ct-small-stat">
+                                <img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
+                                <span class="ct-small-card-text">134</span>
+                            </div>
+                            <div class="ct-small-stat">
+                                <img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
+                                <span class="ct-small-card-text">32113</span>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="ct-small-card-text">Big Brother Keep Hugging Me</p>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        <button class="most-new-button">
+            <span class="most-new-button-text">Смотреть Больше</span>
+        </button>
+    </div>
+    {% include 'pagination.html' %}
+</body>
+</html>

templates/pagination.html

@@ -0,0 +1,13 @@
+<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+<div class="pagination-container">
+    <button class="swipe-button left-swipe-button"><img src="{{ url_for('static', filename='/icons/left-arrow.svg') }}"></button>
+    <div class="page-buttons-container">
+        <button class="page-button">1</button>
+        <button class="page-button">2</button>
+        <button class="page-button">3</button>
+        <button class="page-button">4</button>
+        <button class="page-button">5</button>
+        <button class="page-button">10</button>
+    </div>
+    <button class="swipe-button right-swipe-button"><img src="{{ url_for('static', filename='/icons/right-arrow.svg') }}"></button>
+</div>