luke-else/WMGZON
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created base flask instance and moved static templates into correct location so they can be loaded using Jinja

Browse Source
This commit is contained in:
Luke Else
2023-12-27 21:36:53 +00:00
parent f64c378248
commit 1c5aa09668
8 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/assets/img/WMGZON.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
static/assets/img/products/brake-disks.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

286
static/css/style.css
View File

@ -1,286 +0,0 @@
:root {
--bg: #282c34;
--bg-secondary: #474d57;
--bg-grad-1: #484e58;
--bg-grad-2: #4e5560;
--bg-grad-3: #59616d;
--bg-grad-4: #606a7b;
--bg-grad-5: #606978;
--input: #4e5560;
--fg: #ABB2BF;
--header: #E06C75;
--link: #FFF;
--hover: #888;
--green: #98C379;
--red: #E06C75;
}
html {
background-color: var(--bg);
color: var(--fg);
padding: 2%;
font-size: 160%;
font-family: 'Courier New', Courier, monospace;
overflow-y: hidden;
}
body {
display: flex;
height: 100vh;
flex-direction: column;
gap: 1rem;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 120%;
}
form {
display: flex;
justify-content: center;
align-items: center;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: -2rem;
}
#logo {
width: 8rem;
height: auto;
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
width: 26px;
border-radius: 13px;
background-clip: padding-box;
border: 10px solid transparent;
color: var(--fg);
}
*::-webkit-scrollbar-thumb:hover{
color: var(--link);
}
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px;
}
@media (max-width:1000px) {
.not-required {
display: none;
}
}
a {
text-decoration: none;
position: relative;
color: var(--link);
white-space: nowrap;
transition: 0.4s;
align-content: center;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 15%;
width: 0%;
border-bottom: 2px solid var(--fg);
transition: 0.4s;
}
a:hover:after {
width: 70%;
color: var(--hover);
}
a:hover {
color: var(--hover);
}
a:active {
color: var(--header);
}
.categories {
background-color: var(--bg);
display: flex;
justify-content: center;
}
.category {
margin: .5rem 0rem;
padding: 0rem 1rem;
border-left: .125rem solid var(--fg);
}
.category:first-child {
border-left: none;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
gap: 1rem;
flex-direction: column;
flex-grow: 1;
height: 90%;
}
.search-bar {
padding: .25rem;
margin-top: .25rem;
font-size: 1rem;
width: 15rem;
border: none;
transition: width 0.4s ease-in-out;
background-color: var(--fg);
}
@media (min-width:1500px) {
.search-bar:focus {
width: 30rem;
}
}
.search-button {
padding: .25rem .5rem;
margin-top: .25rem;
margin-right: .5rem;
background: #ddd;
font-size: 1rem;
border: none;
background-color: orange;
}
.filter-pane {
padding: .5rem 2rem;
background-color: var(--bg-grad-3);
border-radius: 1rem;
}
.filter-items {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.product-filter {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: var(--bg-grad-2);
color: var(--fg);
font-size: .75rem;
}
/* Number Plate*/
.number-plate {
display: flex;
align-items: center;
}
.country-identifier {
width: auto;
display: flex;
flex-direction: column;
align-items: center;
color: #ffffff;
font-weight: bold;
height: 60px;
justify-content: center;
}
.country-identifier img {
border-radius: 8px 0 0 8px;
}
.vrn {
width: 10rem;
height: 63px;
border: 1px solid #ead809;
background-color: #ead809;
border-radius: 0 8px 8px 0;
}
.vrn .vrn-text {
width: -webkit-fill-available;
height: -webkit-fill-available;
border-radius: 0;
border: 0;
font-family: "UKNumberPlate", sans-serif;
font-size: 180%;
text-transform: uppercase;
text-align: center;
outline: 0;
background-color: transparent;
}
.vrn .vrn-text:focus {
outline: 0;
}
/* Product Information*/
.product-container {
width: 95%;
margin: .5rem 0rem;
background-color: var(--bg-grad-3);
border-radius: 1rem;
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 2rem 1.5rem;
padding: 2rem 1rem 3rem;
transition: all 0.2s;
overflow-y: scroll;
}
.product {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
flex: 4 0 1rem;
padding: .5rem 1rem 2rem 2rem;
background: var(--bg-secondary);
border-radius: .5rem;
transition: all 0.2s;
}
.product-information {
display: flex;
flex-direction: row;
gap: 1rem 1rem;
}
.product-details {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem 1rem;
}
.product-description {
font-size: 70%;
}

230
static/index.html
View File

@ -1,230 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> -->
<link rel="stylesheet" href="css/style.css" />
<link href="http://fonts.cdnfonts.com/css/uk-number-plate" rel="stylesheet">
<title>WMGZON</title>
</head>
<body>
<nav class="navbar">
<img src="assets/img/WMGZON.png" id="logo" class="not-required" alt="WMGZON Logo">
<form action="test.html" method="get">
<input type="text" name="search" placeholder="Find your favourite products" class="search-bar">
<input type="submit" class="search-button">
</form>
<a href="login.html">Login/Signup</a>
</nav>
<div class="container">
<div class="categories">
<a href="Car Parts" class="category">Car Parts</a>
<a href="Animals" class="category">Animals</a>
<a href="Sports" class="category">Sports</a>
<a href="Books" class="category">Books</a>
<a href="Phones" class="category">Phones</a>
<a href="Music" class="category">Music</a>
</div>
<div class="filter-pane">
<form action="" class="filter-items">
<div class="number-plate">
<span class="country-identifier">
<img src="https://mycarneedsa.com/assets/flint/img/flag_europe_gb.png" alt="">
</span>
<span class="vrn">
<input type="text" class="vrn-text" placeholder="YOUR REG" name="vrn">
</span>
</div>
<select class="product-filter not-required" name="filter">
<option value="relevance">Most Relevant</option>
<option value="price-lh">Price: Low -> High</option>
<option value="price-hl">Price: High -> Low</option>
</select>
</form>
</div>
<div class="product-container">
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
<div class="product">
<div class="product-title">12" Brake Disks</div>
<div class="product-information">
<div class="product-image">
<img src="assets/img/products/brake-disks.png" alt="Brake Disks"/>
</div>
<div class="product-details">
<div class="product-price">£64.50</div>
<div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
</div>
</div>
<div class="product-add-to-cart"></div>
</div>
</div>
</div>
<!-- <div style="height: 100rem;"></div> -->
</body>
</html>