benjamyn/html_template
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Benjamyn Love 2020-01-31 09:13:26 +11:00
commit f702e7a004
13 changed files with 382 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
env/
.vscode/

38
main.py Normal file
View File

@ -0,0 +1,38 @@
from flask import Flask, render_template, request, abort
import json
import html
app = Flask(__name__)
app.config["DEBUG"] = True
@app.route("/", methods=["GET", "POST"])
def index():
buttons = {0: "418 error",1: "Json Reply",2: "Admin"}
users = [["benjamyn", 1], ["Test Case", 0]]
data = {"buttons": buttons, "users": users}
if request.method == "POST":
jsonData = json.loads(request.data)
if "button" in jsonData:
if jsonData["button"] == '0':
return abort(418)
elif jsonData["button"] == '1':
return json.dumps({"This is a test response": 1, "status": "Success"})
elif jsonData["button"] == '2':
return render_template("admin.html", data=data)
return f"{buttons[int(jsonData['button'])]} was pressed"
return render_template("testing.html", data=data)
return render_template("index.html", data=data)
@app.route("/otherpage", methods=["POST", "GET"])
def otherpage():
buttons = {0: "Other",1: "Pages",2: "Same",3: "Template"}
data = {"buttons": buttons}
if request.method == "POST":
jsonData = json.loads(request.data)
if jsonData["button"] == '0':
return render_template("list.html", data=data)
return jsonData
return render_template("index.html", data=data)
if __name__ == '__main__':
app.run(host="0.0.0.0")

57
static/css/main.css Normal file
View File

@ -0,0 +1,57 @@
.sidebar {
background-color: #2a2a2a;
position: fixed;
top: 0px;
left: 0px;
width: 15em;
height: 100%;
border-right: 1px dashed black;
}
.navbutton {
text-align: center;
padding-left: 2px;
border-left: 1px solid dimgray;
border-right: 1px solid dimgray;
}
#navbar {
position: absolute;
bottom: 0;
}
.content {
padding-left: 16em;
padding-right: 1em;
padding-top: 6em;
width: 100%;
}
.header {
position: fixed;
top: 0px;
left: 15em;
width: 100%;
height: 5em;
background-color: #2a2a2a;
}
.std {
color: azure;
background-color: #2a2a2a;
}
.fixed{
position:fixed;
top:0px;
left: 15em;
width:100px;
}
#header {
border-top: 1px solid azure;
}
body {
background-color: slategray;
}

BIN
static/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

11
static/js/call.js Normal file
View File

@ -0,0 +1,11 @@
function makeCall(btn) {
let makePost = new XMLHttpRequest();
postData = { "button": btn };
makePost.onreadystatechange = function () {
if (makePost.readyState === 4) {
document.getElementById("content").innerHTML = makePost.response;
}
}
makePost.open("POST", window.location.href, true);
makePost.send(JSON.stringify(postData));
}

59
templates/admin.html Normal file
View File

@ -0,0 +1,59 @@
<body>
<h1 class="text-center">LIST USERS</h1>
<div class="container">
<table class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Username</th>
<th scope="col">Admin</th>
<th style="text-align: right" scope="col">Change Password</th>
</tr>
</thead>
<tbody>
{% for x in data["users"] %}
<tr scope="row">
<td>{{x[0]}}</td>
<td>{% if x[1] == 1 %} Yes {% else %} No {% endif %}</td>
<td align="right"><form action="/post" method="POST"><input style="width: 70%; display: inline;" type="text" name="newpass" id="addbox"><button class="btn btn-secondary" type="submit" name="updatepass" value="{{x[2]}}"> Change Password </button></form></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<hr>
<h1 class="text-center">ADD NEW USERS</h1>
<div class="container">
<form class="loginform" action="/post" method="POST">
<div class="form-group row">
<label for="addbox" class="col-sm-2 col-form-label" >Username</label>
<div class="col-sm-10">
<input type=text class="form-control" id="addbox" type="text" name="username" />
</div>
</div>
<div class="form-group row">
<label for="addbox" class="col-sm-2 col-form-label" >Password</label>
<div class="col-sm-10">
<input class="form-control" id="addbox" type="password" name="password"/>
</div>
<div class="form-group" style="padding-top: 10px; padding-left: 10px;">
<input class="btn btn-secondary" id="logbtn" type="submit" name="newuser" value="Create new account" />
</div>
</div>
</form>
<div id="logout" style="padding-top: 3px;">
<a href="/">
<button onclick="window.location='admin'" class="btn btn-secondary"><i style="padding-top: 3px;"
class="material-icons">
home
</i></button></a>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

52
templates/default.html Normal file
View File

@ -0,0 +1,52 @@
<div class="card card-body" style="background-color: #5e6c79;">
<table table table-striped table-dark table-hover>
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Requester</th>
<th scope="col">Gottem?</th>
<th scope="col">Remove</th>
</tr>
</thead>
<tbody>
<tr scope="row" id="row-1">
<td>Water, 1 slab</td>
<td>Benjamyn</td>
<td>
<form><button class="btn btn-secondary" type="submit" formaction="/post" formmethod="POST"
name="got" value="1">No</button></form>
</td>
<td>
<form>
<button class="btn btn-secondary" type="submit" formaction="/post" formmethod="POST" name="rem"
value="1">Remove</button>
</form>
</td>
</tr>
<tr scope="row" id="row-2">
<td>V nice</td>
<td>Luke</td>
<td>
<form><button class="btn btn-secondary" type="submit" formaction="/post" formmethod="POST"
name="got" value="2">No</button></form>
</td>
<td>
</td>
</tr>
<tr scope="row" id="row-3">
<td>Pretty quick too</td>
<td>Luke</td>
<td>
<form><button class="btn btn-secondary" type="submit" formaction="/post" formmethod="POST"
name="got" value="3">No</button></form>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>

29
templates/header.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="header std">
<div class="d-flex flex-row bd-highlight mb-3" id="navbar">
<ul class="nav nav-tabs" style="border-bottom: 0px solid black;">
<li class="nav-item ">
<a class="nav-link" style="background-color: #2a2a2a; color: azure;" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" style="background-color: #2a2a2a; color: azure;" href="/otherpage">Other Page</a>
</li>
<li class="nav-item">
<a class="nav-link" style="background-color: #2a2a2a; color: azure;" href="https://lists.benjamyn-testing.com">Shopping Lists</a>
</li>
</ul>
</div>
</div>

21
templates/index.html Normal file
View File

@ -0,0 +1,21 @@
{% include "header.html" %}
{% include "sidebar.html" %}
<div class="content" id="content">
<h2>Press an option on the left to begin</h2>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="static/js/call.js"></script>
</body>
</html>

25
templates/list.html Normal file
View File

@ -0,0 +1,25 @@
<table class="table table-striped table-dark table-hover">
<thead class="">
<tr>
<th scope="col">Item</th>
<th scope="col">Requester</th>
</tr>
</thead>
<tbody>
{% for x in data["buttons"] %}
<tr scope="row" id="row-{{x[0]}}">
<td>{{data["buttons"][x]}}</td>
<td>{{x}}</td>
<td>
<form><button class="btn btn-secondary" type="submit" formaction="/post" formmethod="POST" name="got"
value="{{x[0]}}">No</button></form>
<td>
<form>
<button class="btn btn-secondary" type="submit" formaction="/post" formmethod="POST" name="rem"
value="{{x[0]}}">Remove</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>

70
templates/otherpage.html Normal file
View File

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="header std">
<div class="d-flex flex-row bd-highlight mb-3" id="navbar">
<ul class="nav nav-tabs" style="border-bottom: 0px solid black;">
<li class="nav-item ">
<a class="nav-link " href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" style="background-color: #2a2a2a; color: azure;" href="/otherpage.html">Other Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="container std">
<div class="text-center">
<h1>Site</h1>
<hr id="header">
</div>
<div style="padding-top: 2em;">
<button class="form-control btn btn-outline-light">Option 1</button>
</div>
<div style="padding-top: 5px;">
<button class="form-control btn btn-outline-light">Option 2</button>
</div>
<div style="padding-top: 5px;">
<button class="form-control btn btn-outline-light">Option 3</button>
</div>
<div style="padding-top: 5px;">
<button class="form-control btn btn-outline-light">Option 4</button>
</div>
<div style="padding-top: 5px;">
<button class="form-control btn btn-outline-light">Option 5</button>
</div>
</div>
</div>
<div class="content">
COOOONENT
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>

13
templates/sidebar.html Normal file
View File

@ -0,0 +1,13 @@
<div class="sidebar">
<div class="container std">
<div class="text-center" style="padding-bottom: 2em; padding-top: 1em;">
<h1><a href="/"><img height="50px" src="static/images/logo.png"></a></h1>
<hr id="header">
</div>
{% for x in data["buttons"] %}
<div style="padding-top: 5px;">
<button class="form-control btn btn-outline-light" onclick="makeCall('{{x}}')">{{data['buttons'][x]}}</button>
</div>
{% endfor %}
</div>
</div>

5
templates/testing.html Normal file
View File

@ -0,0 +1,5 @@
<body>
Testing page
This is neat
</body>