Verified Commit b7c03b6d authored by glow's avatar glow 🐻

Add new glow theme

Three screen are included in this commit: index, login and priceentry
parent 4d773acd
body{
background-color: #222222;
color: white;
font-family: sans-serif;
padding: 0 4em;
}
*{
box-sizing:border-box;
font-size: 26px;
}
input{
border: 0px solid black;
padding: 1em;
border-radius: 0px;
}
.btn{
font-size: 50px;
display: block;
padding: 0.2em;
color: white;
text-decoration:none;
background: #2180b8;
text-align:left;
border: none;
}
.buttons-home{
display: grid;
grid-template-columns: repeat(1, 3fr);
grid-template-rows: 1fr;
grid-column-gap: 1em;
grid-row-gap: 0px;
}
.buttons-home .btn{
padding:1em;
}
.buttons-home .btn:nth-child(1){
background: #D60270;
}
.buttons-home .btn:nth-child(2){
background: #734F96;
}
.buttons-home .btn:nth-child(3){
background: #0038A8;
}
.buttons-numpad {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 1em;
grid-row-gap: 0.5em;
}
.buttons-numpad .btn-1{ grid-area: 1 / 1 / 2 / 2; }
.buttons-numpad .btn-2{ grid-area: 1 / 2 / 2 / 3; }
.buttons-numpad .btn-3{ grid-area: 1 / 3 / 2 / 4; }
.buttons-numpad .btn-4{ grid-area: 2 / 1 / 3 / 2; }
.buttons-numpad .btn-5{ grid-area: 2 / 2 / 3 / 3; }
.buttons-numpad .btn-6{ grid-area: 2 / 3 / 3 / 4; }
.buttons-numpad .btn-7{ grid-area: 3 / 1 / 4 / 2; }
.buttons-numpad .btn-8{ grid-area: 3 / 2 / 4 / 3; }
.buttons-numpad .btn-9{ grid-area: 3 / 3 / 4 / 4; }
.buttons-numpad .btn-0{ grid-area: 4 / 1 / 5 / 2; }
.buttons-numpad .btn-clear { grid-area: 4 / 3 / 5 / 4; }
.buttons-numpad .btn-clear-all { grid-area: 4 / 4 / 5 / 5; }
.buttons-numpad .btn-cancel { grid-area: 5 / 1 / 6 / 3; }
.buttons-numpad .btn-submit { grid-area: 5 / 3 / 6 / 5; }
.buttons-numpad .btn-point { grid-area: 4 / 2 / 5 / 3; }
.buttons-numpad .btn-add { grid-area: 3 / 4 / 4 / 5; }
.btn-cancel{
background: #ac4247;
}
.btn-clear{
background: #ffea83;
}
.btn-clear-all{
background: #ffea83;
}
.btn-submit{
background: #50a74e;
}
.btn.numpad{
text-align:center;
}
.form-login{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1em;
margin-bottom: 0.5em;
}
.form-login>*{
}
.form-login .userid { grid-area: 1 / 1 / 2 / 2; }
.form-login .userpin { grid-area: 1 / 2 / 2 / 5; }
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
color:black;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
}
.mymodal-dialog {
margin: 5% auto;
width: 800px;
}
.input-group .form-control {
z-index: 1;
}
.price-entry label{
width: 33%;
display: inline-block;
}
.modal-footer *{
display:inline-block;
padding-right: 1em;
}
.price-entry input{
width: 66%;
}
.price-entry>*{
padding-bottom: 1em;
}
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Prepaidmate</title> <title>Prepaidmate</title>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="../static/glow-theme.css " >
<link rel="stylesheet" href="static/css/bootstrap.css " > <script charset="utf-8" src="static/js/search2json.js" defer></script>
<script charset="utf-8" src="static/js/search2json.js" defer></script> <script charset="utf-8" src="static/js/failure.js" defer></script>
<script charset="utf-8" src="static/js/failure.js" defer></script> </head>
</head> <body>
<body> <div class="alert alert-danger" id="alert" hidden="">
<div class="alert alert-danger" id="alert" hidden=""> <strong>Transaction Failed!</strong> Please try again.
<strong>Transaction Failed!</strong> Please try again. <p id="error"></p>
<p id="error"></p> </div>
</div> <div class="container col-md-10">
<div class="container col-md-10"> <br />
<br /> <h1>Welcome to the Prepaidmate System!</h1>
<h1>Welcome to the Prepaidmate System!</h1> <p>Please select your desired action</p>
<p>Please select your desired action</p> <div class="buttons-home">
<div class="row"> <a class="btn" href="priceentry/" role="button">Buy Something</a>
<div class="container col-md-4"> <a class="btn" href="login/?next=../checkbalance/" role="button">Check Balance</a>
<a class="btn btn-primary btn-xl btn-block" href="priceentry/" role="button">Buy Something</a> <a class="btn" href="login/?next=../charge/" role="button">Charge Balance</a>
</div> </div>
<div class="container col-md-4"> </div>
<a class="btn btn-primary btn-xl btn-block" href="login/?next=../checkbalance/" role="button">Check Balance</a> </body>
</div>
<div class="container col-md-4">
<a class="btn btn-primary btn-xl btn-block" href="login/?next=../charge/" role="button">Charge Balance</a>
</div>
</div>
</div>
</body>
</html> </html>
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Login</title> <title>Login</title>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="../static/glow-theme.css " >
<link rel="stylesheet" href="../static/css/bootstrap.css " > <script charset="utf-8" src="../static/js/numpad.js" defer></script>
<script charset="utf-8" src="../static/js/numpad.js" defer></script> <script charset="utf-8" src="../static/js/sha256.js" defer></script>
<script charset="utf-8" src="../static/js/sha256.js" defer></script> <script charset="utf-8" src="../static/js/search2json.js" defer></script>
<script charset="utf-8" src="../static/js/search2json.js" defer></script> <script charset="utf-8" src="../static/js/buydrink.js" defer></script>
<script charset="utf-8" src="../static/js/buydrink.js" defer></script> </head>
</head> <body onLoad="window.setTimeout(function() {location.href='../logout';}, 60000)">
<body onLoad="window.setTimeout(function() {location.href='../logout';}, 60000)"> <div class="container" id="main">
<div class="container" id="main"> <div class="alert alert-danger" id="alert" hidden="">
<div class="alert alert-danger" id="alert" hidden=""> <strong>Transaction Failed!</strong> Please try again.
<strong>Transaction Failed!</strong> Please try again. </div>
</div> <form method="post" id="form" class="form-login">
<form method="post" id="form"> {% csrf_token %}
{% csrf_token %} <input autofocus="" placeholder="User ID" type="text" class="numpad userid form-control" name="username" id="id_username" value="" onfocus="field='id_username';" />
<div class="row"> <input type="password" placeholder="PIN Number Number" class="numpad userpin form-control" required name="password" id="id_password" value="" onfocus="field='id_password';"/>
<div class="container col-md-offset-4 col-md-8"> </form>
<h4>Please enter your User ID.</h4> <div class="buttons-numpad">
<input autofocus="" type="text" class="numpad userid form-control" name="username" id="id_username" value="" onfocus="field='id_username';" /> <button type="button" class="numpad btn btn-1">1</button>
</div> <button type="button" class="numpad btn btn-2">2</button>
</div> <button type="button" class="numpad btn btn-3">3</button>
<div class="row"> <button type="button" class="numpad btn btn-4">4</button>
<div class="container col-md-offset-4 col-md-8"> <button type="button" class="numpad btn btn-5">5</button>
<h4>Please enter your pin.</h4> <button type="button" class="numpad btn btn-6">6</button>
<input type="password" class="numpad userid form-control" required name="password" id="id_password" value="" onfocus="field='id_password';"/> <button type="button" class="numpad btn btn-7">7</button>
</div> <button type="button" class="numpad btn btn-8">8</button>
</div> <button type="button" class="numpad btn btn-9">9</button>
</form> <button type="button" class="numpad btn btn-0">0</button>
<div class="row"> <button type="button" id="numpadc" class="btn numpad btn-clear">C</button>
<div class="container col-md-4"> <a class="btn btn-cancel" href="../logout" role="button">Cancel</a>
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">1</button> <button class="btn btn-submit" id="buydrink" type="button" value="Submit">Submit</button>
</div> </div>
<div class="container col-md-4"> </div>
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">2</button> </div>
</div> </body>
<div class="container col-md-4">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">3</button>
</div>
</div>
<div class="row">
<div class="container col-md-4">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">4</button>
</div>
<div class="container col-md-4">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">5</button>
</div>
<div class="container col-md-4">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">6</button>
</div>
</div>
<div class="row">
<div class="container col-md-4">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">7</button>
</div>
<div class="container col-md-4">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">8</button>
</div>
<div class="container col-md-4">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">9</button>
</div>
</div>
<div class="row">
<div class="container col-md-8">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">0</button>
</div>
<div class="container col-md-4">
<button type="button" id="numpadc" class="btn btn-numpad btn-warning btn-block">C</button>
</div>
</div>
<div class="row">
<div class="container col-md-6">
<a class="btn btn-danger btn-block btn-numpad" href="../logout" role="button">Cancel</a>
</div>
<div class="container col-md-6">
<button class="btn btn-success btn-block btn-numpad" id="buydrink" type="button" value="Submit">Submit</button>
</div>
</div>
</div>
</body>
</html> </html>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>View Drink Details</title> <title>View Drink Details</title>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="../static/css/bootstrap.css"> <link rel="stylesheet" href="../static/glow-theme.css " >
<link rel="stylesheet" href="../static/css/modalstyle.css" > <script charset="utf-8" src="../static/js/priceentry.js" defer></script>
<script charset="utf-8" src="../static/js/priceentry.js" defer></script> </head>
</head> <body onLoad="window.setTimeout(function() {location.href='../logout';}, 60000)">
<body onLoad="window.setTimeout(function() {location.href='../logout';}, 60000)"> <div class="container">
<div class="container"> <div class="row">
<div class="row"> <div class="container col-md-8">
<div class="container col-md-8"> <div class="alert alert-warning" id="alert" hidden="">
<div class="alert alert-warning" id="alert" hidden=""> <strong>No Drink selected!</strong> Please select a drink.
<strong>No Drink selected!</strong> Please select a drink. </div>
</div> <h4>Please enter the amount you want to spend.</h4>
<h4>Please enter the amount you want to spend.</h4> </div>
</div> </div>
</div> <div class="price-entry">
<div class="row"> <form action="../buydrink/" method="post" id="cart">
<div class="container col-md-12"> {% csrf_token %}
<form action="../buydrink/" method="post" id="cart"> <div class="input-group">
{% csrf_token %} <label for="id_total">Total CHF</label>
<div class="input-group"> {{ form.total }}
<span class="input-group-addon">Total CHF</span> </div>
{{ form.total }} </form>
</div> <div>
</form> <label for="temptotal">Temporary Total CHF</label>
</div> <input class="form-control" type="text" name="total" id="temptotal" pattern="([0-9]*[.])?[0-9]+" placeholder="price" step="any"/>
<div class="container col-md-12"> </div>
<div class="input-group"> </div>
<span class="input-group-addon">Temporary Total CHF</span> <div class="buttons-numpad">
<input class="form-control" type="text" name="total" id="temptotal" pattern="([0-9]*[.])?[0-9]+" placeholder="price" step="any"/> <button type="button" class="price numpad btn btn-1">1</button>
</div> <button type="button" class="price numpad btn btn-2">2</button>
</div> <button type="button" class="price numpad btn btn-3">3</button>
</div> <button type="button" class="price numpad btn btn-4">4</button>
<div class="row"> <button type="button" class="price numpad btn btn-5">5</button>
<div class="container col-md-3"> <button type="button" class="price numpad btn btn-6">6</button>
<button type="button" class="price btn btn-numpad btn-primary btn-block">1</button> <button type="button" class="price numpad btn btn-7">7</button>
</div> <button type="button" class="price numpad btn btn-8">8</button>
<div class="container col-md-3"> <button type="button" class="price numpad btn btn-9">9</button>
<button type="button" class="price btn btn-numpad btn-primary btn-block">2</button> <button type="button" class="price numpad btn btn-0">0</button>
</div> <button type="button" id="numpadc" class="btn numpad btn-clear">C</button>
<div class="container col-md-3"> <a class="btn btn-cancel" href="../logout" role="button">Cancel</a>
<button type="button" class="price btn btn-numpad btn-primary btn-block">3</button> <button class="btn btn-submit" id="buy" type="button" value="Submit">Submit</button>
</div> <button type="button" id="add" class="btn numpad btn-add">+</button>
<div class="container col-md-3"></div> <button type="button" id="numpaddot" class="price numpad btn btn-point">.</button>
</div> <button type="button" id="numpadce" class="btn numpad btn-clear-all">CE</button>
<div class="row"> </div>
<div class="container col-md-3"> <div class="modal" id="confirm-delete">
<button type="button" class="price btn btn-numpad btn-primary btn-block">4</button> <div class="mymodal-dialog">
</div> <div class="modal-content">
<div class="container col-md-3"> <div class="modal-header">
<button type="button" class="price btn btn-numpad btn-primary btn-block">5</button> <h1>Confirm Charge</h1>
</div>
<div class="container col-md-3">
<button type="button" class="price btn btn-numpad btn-primary btn-block">6</button>
</div>
<div class="container col-md-3"></div>
</div>
<div class="row">
<div class="container col-md-3">
<button type="button" class="price btn btn-numpad btn-primary btn-block">7</button>
</div>
<div class="container col-md-3">
<button type="button" class="price btn btn-numpad btn-primary btn-block">8</button>
</div>
<div class="container col-md-3">
<button type="button" class="price btn btn-numpad btn-primary btn-block">9</button>
</div>
<div class="container col-md-3">
<button type="button" id="add" class="btn-info btn-numpad btn-primary btn-block">+</button>
</div>
</div>
<div class="row">
<div class="container col-md-3">
<button type="button" class="price btn btn-numpad btn-primary btn-block">0</button>
</div>
<div class="container col-md-3">
<button type="button" id="numpaddot" class="price btn btn-numpad btn-primary btn-block">.</button>
</div>
<div class="container col-md-3">
<button type="button" id="numpadc" class="btn btn-numpad btn-primary btn-block">C</button>
</div>
<div class="container col-md-3">
<button type="button" id="numpadce" class="btn-warning btn-numpad btn-primary btn-block">CE</button>
</div>
</div> </div>
<div class="row"> <div class="modal-body">
<div class="container col-md-6"> <h3>Are you sure you want to spend <strong id="price"></strong>?</h3>
<a class="btn btn-danger btn-block btn-numpad" href="../logout" role="button">Cancel</a>
</div>
<div class="container col-md-6">
<button class="btn btn-success btn-block btn-numpad" id="buy" type="button" value="Submit">Submit</button>
</div>
</div> </div>
<div class="modal" id="confirm-delete"> <div class="modal-footer">
<div class="mymodal-dialog"> <button id="modalcancel" type="button" class="btn btn-danger btn-lg btn-numpad">No!</button>
<div class="modal-content"> <button id="modalok" type="button" class="btn btn-success btn-lg btn-numpad">Yes!</button>
<div class="modal-header">
<h1>Confirm Charge</h1>
</div>
<div class="modal-body">
<h3>Are you sure you want to spend <strong id="price"></strong>?</h3>
</div>
<div class="modal-footer">
<button id="modalcancel" type="button" class="btn btn-danger btn-lg btn-numpad">No!</button>
<button id="modalok" type="button" class="btn btn-success btn-lg btn-numpad">Yes!</button>
</div>
</div>
</div>
</div> </div>
<br /> </div>
</div> </div>
</body> </div>
<br />
</div>
</body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment