Divided html into templates
This commit is contained in:
parent
54877495f0
commit
2f63b6e89c
18
README.md
18
README.md
@ -1,3 +1,19 @@
|
|||||||
|
---
|
||||||
|
runme:
|
||||||
|
id: 01HK0BF4BTBSKR9VWAP1KGD2S7
|
||||||
|
version: v2.0
|
||||||
|
---
|
||||||
|
|
||||||
# WMGZON
|
# WMGZON
|
||||||
|
|
||||||
Flask web application serving WMGZON and its relevant backend services.
|
``` Flask web application serving WMGZON and its relevant backend services. ```
|
||||||
|
|
||||||
|
## Initialisation
|
||||||
|
|
||||||
|
To start you need to create a virtual environment and load in the required dependencies for the project
|
||||||
|
|
||||||
|
```sh {"closeTerminalOnSuccess":"false","id":"01HK0BJCK9BR05J127F1X0RZP9"}
|
||||||
|
python -m venv .venv
|
||||||
|
./.venv/Scripts/Activate.ps1
|
||||||
|
pip install -r requirements.txt
|
||||||
|
```
|
||||||
10
app.py
10
app.py
@ -1,4 +1,5 @@
|
|||||||
from flask import Flask, render_template
|
from flask import Flask, render_template
|
||||||
|
from os import environ
|
||||||
from web import blueprint
|
from web import blueprint
|
||||||
'''
|
'''
|
||||||
Main entrypoint for Flask application.
|
Main entrypoint for Flask application.
|
||||||
@ -8,6 +9,15 @@ from web import blueprint
|
|||||||
def main():
|
def main():
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
# Set app secret key to sign session cookies
|
||||||
|
secret_key = environ.get("APPSECRET")
|
||||||
|
if secret_key == None:
|
||||||
|
# NO Secret Key set!
|
||||||
|
print("No app secret set, please set one before deploying in production")
|
||||||
|
app.secret_key = "DEFUALTKEY"
|
||||||
|
else:
|
||||||
|
app.secret_key = secret_key
|
||||||
|
|
||||||
# Register a blueprint
|
# Register a blueprint
|
||||||
app.register_blueprint(blueprint)
|
app.register_blueprint(blueprint)
|
||||||
app.run(debug=True)
|
app.run(debug=True)
|
||||||
|
|||||||
64
templates/content.html
Normal file
64
templates/content.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<div class="container">
|
||||||
|
<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="{{url_for('static', filename='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="{{url_for('static', filename='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="{{url_for('static', filename='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>
|
||||||
19
templates/header.html
Normal file
19
templates/header.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<nav class="navbar">
|
||||||
|
<img src="{{url_for('static', filename='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>
|
||||||
|
|
||||||
|
<centre>
|
||||||
|
<div class="categories">
|
||||||
|
<a href="CarParts" 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>
|
||||||
|
</centre>
|
||||||
@ -3,97 +3,13 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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="{{url_for('static', filename='css/style.css')}}" />
|
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}" />
|
||||||
<link href="http://fonts.cdnfonts.com/css/uk-number-plate" rel="stylesheet">
|
<link href="http://fonts.cdnfonts.com/css/uk-number-plate" rel="stylesheet">
|
||||||
<title>WMGZON</title>
|
<title>WMGZON</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar">
|
{% include 'header.html' %}
|
||||||
<img src="{{url_for('static', filename='assets/img/wmgzon.png')}}" id="logo" class="not-required" alt="WMGZON Logo">
|
|
||||||
<form action="test.html" method="get">
|
{% include 'content.html' %}
|
||||||
<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="{{url_for('static', filename='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="{{url_for('static', filename='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="{{url_for('static', filename='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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user