art catalogue
This commit is contained in:
parent
9cdbbaf2a3
commit
59b45fa553
6
app.py
6
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):
|
||||
|
||||
@ -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;
|
||||
background-color: #0D0C1C;
|
||||
color: $light-violet;
|
||||
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;
|
||||
border: 1px solid #8784C9;
|
||||
background: $light-violet;
|
||||
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%;
|
||||
@ -741,4 +728,135 @@ color: white;
|
||||
text-align: right;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
static/icons/left-arrow.svg
Normal file
3
static/icons/left-arrow.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 467 B |
3
static/icons/right-arrow.svg
Normal file
3
static/icons/right-arrow.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 470 B |
40
templates/arts-catalogue.html
Normal file
40
templates/arts-catalogue.html
Normal file
@ -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>
|
||||
13
templates/pagination.html
Normal file
13
templates/pagination.html
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user