Commit 5e843518 authored by rexxnor's avatar rexxnor

Merge branch 'glow-theme' into 'master'

Add new glow theme

See merge request rexxnor/prepaid-mate-website!4
parents 4d773acd 3805655a
body {
background-color: #222222;
color: white;
font-family: sans-serif;
padding: 0 4em;
}
* {
box-sizing: border-box;
font-size: 25px;
}
.header {
margin-bottom: 1.5em;
}
.fields {
margin-bottom: 1.5em;
}
input {
border: 0 solid black;
padding: 1em;
border-radius: 0;
}
.btn {
font-size: 50px;
display: block;
padding: 0.2em;
color: white;
text-decoration: none;
background: #2180b8;
text-align: left;
font-weight: normal;
border: none;
}
.buttons-balance,
.buttons-home {
display: grid;
grid-template-columns: repeat(1, 3fr);
grid-template-rows: 1fr;
grid-column-gap: 1em;
grid-row-gap: 1em;
}
.buttons-balance .btn,
.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-balance .btn:nth-child(1) {
background: #ff228c;
}
.buttons-balance .btn:nth-child(2) {
background: #fed700;
color: black;
}
.buttons-balance .btn:nth-child(3) {
background: #1fb1fe;
}
.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;
}
.numpad-login .btn-1,
.numpad-login .btn-2,
.numpad-login .btn-3 {
background-color: #fd74a0;
}
.numpad-login .btn-4,
.numpad-login .btn-5,
.numpad-login .btn-6 {
background-color: #fefefe;
color: black;
}
.numpad-login .btn-7,
.numpad-login .btn-8,
.numpad-login .btn-9 {
background-color: #bd16d5;
}
.numpad-login .btn-0,
.numpad-login .btn-clear,
.numpad-login .btn-clear-all {
background-color: #000000;
color: white;
}
.numpad-login .btn-cancel,
.numpad-login .btn-submit {
background-color: #323dbb;
}
.numpad-priceentry .btn-1,
.numpad-priceentry .btn-2,
.numpad-priceentry .btn-3,
.numpad-priceentry .btn-cancel,
.numpad-priceentry .btn-submit {
background-color: #5bcffa;
}
.numpad-priceentry .btn-0,
.numpad-priceentry .btn-4,
.numpad-priceentry .btn-5,
.numpad-priceentry .btn-6,
.numpad-priceentry .btn-clear,
.numpad-priceentry .btn-clear-all,
.numpad-priceentry .btn-point {
background-color: #F5A9B8;
color: black;
}
.numpad-priceentry .btn-7,
.numpad-priceentry .btn-8,
.numpad-priceentry .btn-9,
.numpad-priceentry .btn-add {
background-color: white;
color: black;
}
.buttons-charge {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
}
.buttons-charge .btn-10 {
grid-area: 1 / 1 / 2 / 2;
}
.buttons-charge .btn-20 {
grid-area: 1 / 2 / 2 / 3;
}
.buttons-charge .btn-50 {
grid-area: 1 / 3 / 2 / 4;
}
.buttons-charge .btn-100 {
grid-area: 1 / 4 / 2 / 5;
}
.buttons-charge .btn-clear {
grid-area: 2 / 1 / 3 / 5;
background-color: #7f7f7f;
}
.buttons-charge .btn-cancel {
grid-area: 3 / 1 / 4 / 5;
background-color: #ffffff;
color: black;
}
.buttons-charge .btn-submit {
grid-area: 4 / 1 / 5 / 5;
background-color: #660066;
}
.buttons-charge .btn-10,
.buttons-charge .btn-100,
.buttons-charge .btn-20,
.buttons-charge .btn-50 {
background-color: #000000;
}
.btn.numpad {
text-align: center;
}
/* 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;
}
.form-login input {
width: 100%;
margin-bottom: 1em;
display: block;
}
.modal-footer * {
display: inline-block;
padding-right: 1em;
}
.price-entry input {
width: 66%;
}
.price-entry > * {
margin-bottom: 1em;
}
......@@ -20,3 +20,8 @@ document.getElementById("numpadc").addEventListener('click', function () {
id_password.value = ''
}
});
document.getElementById("numpadce").addEventListener('click', function () {
id_username.value = ''
id_password.value = ''
});
......@@ -6,22 +6,17 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../static/css/bootstrap.css " >
<link rel="stylesheet" href="../static/css/glow-theme.css " >
<script charset="utf-8" src="../static/js/search2json.js"></script>
</head>
<body onLoad="window.setTimeout(function() {location.href='../logout/';}, 10000)">
<div class="container">
<br />
<div class="header">
<h1>Balance</h1>
<div class="row">
<div class="col-md-12">
<button id="balance" class="btn-success btn-numpad btn-xl btn-block" onclick="window.location = '../logout/'">Your remaining balance is: <b>{{ balance }}</b></button>
<br />
<a class="btn btn-warning btn-block btn-numpad" href="../logout/" role="button">Back to Home</a>
</div>
</div>
</div>
</body>
</html>
<div class="buttons-balance">
<a id="balance" class="btn" role="button" href='../priceentry/'>Your remaining balance is: <b>{{ balance }}</b></button>
<a class="btn" href="../charge/" role="button">Charge Balance</a>
<a class="btn btn-warning btn-block btn-numpad" href="../logout/" role="button">Back to Home</a>
</div>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recharge your Card</title>
<title>Recharge your account</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../static/css/bootstrap.css">
<link rel="stylesheet" href="../static/css/modalstyle.css" >
<link rel="stylesheet" href="../static/css/glow-theme.css">
<script charset="utf-8" src="../static/js/search2json.js" defer></script>
<script charset="utf-8" src="../static/js/charge.js" defer></script>
<script charset="utf-8" src="../static/js/moneypad.js" defer></script>
</head>
<body onLoad="window.setTimeout(function() {location.href='../logout';}, 30000)">
<div class="container">
<div class="row">
<div class="container col-md-8">
<h1>Welcome to Card Recharge!</h1>
<p>Please enter the amount you want to charge on to your card.</p>
<p>If you want your balance to be over 200.- , please contact us at <b>kg@chaostreffbern.ch</b></p>
</div>
</div>
<div class="row">
<div class="container col-md-12">
<form action="../chargecard/" method="post" id="form">
{% csrf_token %}
<div class="input-group">
<span class="input-group-addon">CHF</span>
{{ form.total }}
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="container col-md-3">
<button type="button" id="plus5" class="numpad btn-info btn-numpad btn-success btn-block">100.00</button>
</div>
<div class="container col-md-3">
<button type="button" id="plus2" class="numpad btn-info btn-numpad btn-success btn-block">50.00</button>
</div>
<div class="container col-md-3">
<button type="button" id="plus1" class="numpad btn-info btn-numpad btn-success btn-block">20.00</button>
</div>
<div class="container col-md-3">
<button type="button" id="plusp5" class="numpad btn-info btn-numpad btn-success btn-block">10.00</button>
</div>
</div>
<div class="row">
<div class="container col-md-6">
<button type="button" id="numpadback" class="btn btn-numpad btn-primary btn-block" onclick="window.history.back()">Back</button>
</div>
<div class="container col-md-6">
<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="charge" type="button" value="Submit">Submit</button>
<div class="header">
<h1>Recharge your account!</h1>
<p>Please enter the amount you want to charge to your account.</p>
<p>If you want your balance to be over 200.- , please contact us at <b>kg@chaostreffbern.ch</b></p>
</div>
<div class="fields price-entry">
<form action="../chargecard/" method="post" id="form">
{% csrf_token %}
<label for="id_total">CHF</label>
{{ form.total }}
</div>
</div>
<div class="modal" id="confirm-delete">
<div class="mymodal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>Confirm Charge</h1>
</div>
<div class="modal-body">
<h3>Did you put <strong id="price"></strong> in the till?</h3>
</div>
<div class="modal-footer">
<button id="modalcancel" type="button" class="btn btn-danger btn-lg btn-numpad">I have not!</button>
<button id="modalok" type="button" class="btn btn-success btn-lg btn-numpad">I have!</button>
</div>
</form>
</div>
<div class="buttons-charge">
<button type="button" class="numpad btn btn-100">100.00</button>
<button type="button" class="numpad btn btn-50">50.00</button>
<button type="button" class="numpad btn btn-20">20.00</button>
<button type="button" class="numpad btn btn-10">10.00</button>
<button type="button" id="numpadc" class="btn btn-clear">C</button>
<a class="btn btn-cancel" href="../logout" role="button">Cancel</a>
<button class="btn btn-submit" id="charge" type="button" value="Submit">Submit</button>
</div>
<div class="modal" id="confirm-delete">
<div class="mymodal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>Confirm Charge</h1>
</div>
<div class="modal-body">
<h3>Did you put <strong id="price"></strong> in the till?</h3>
</div>
<div class="modal-footer">
<button id="modalcancel" type="button" class="btn btn-danger btn-lg btn-numpad">I have not!</button>
<button id="modalok" type="button" class="btn btn-success btn-lg btn-numpad">I have!</button>
</div>
</div>
</div>
<br />
</div>
</body>
<br />
</div>
</body>
</html>
......@@ -6,18 +6,16 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../static/css/bootstrap.css " >
<link rel="stylesheet" href="../static/css/glow-theme.css " >
<script charset="utf-8" src="../static/js/search2json.js" defer></script>
</head>
<body onLoad="window.setTimeout(function() {location.href='../';}, 5000)">
<div class="container">
<br />
<div class="alert alert-danger" id="alert">
<strong>Transaction Failed!</strong> Please try again.
<p id="error">{{ error_message }}</p>
</div>
<h1>You will be redirected shortly...</h1>
<div class="alert alert-danger" id="alert">
<strong>Transaction Failed!</strong> Please try again.
<p id="error">{{ error_message }}</p>
</div>
<div class="header">
<h2>You will be redirected shortly...</h2>
</div>
</body>
</html>
......@@ -6,8 +6,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="static/css/bootstrap.css " >
<link rel="stylesheet" href="../static/css/glow-theme.css " >
<script charset="utf-8" src="static/js/search2json.js" defer></script>
<script charset="utf-8" src="static/js/failure.js" defer></script>
</head>
......@@ -16,21 +15,15 @@
<strong>Transaction Failed!</strong> Please try again.
<p id="error"></p>
</div>
<div class="container col-md-10">
<br />
<h1>Welcome to the Prepaidmate System!</h1>
<div class="header">
<h2>Welcome to the Prepaidmate System!</h2>
<p>Please select your desired action</p>
<div class="row">
<div class="container col-md-4">
<a class="btn btn-primary btn-xl btn-block" href="priceentry/" role="button">Buy Something</a>
</div>
<div class="container col-md-4">
<a class="btn btn-primary btn-xl btn-block" href="login/?next=../checkbalance/" role="button">Check Balance</a>
</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>
<div class="buttons-home">
<a class="btn" href="priceentry/" role="button">Buy Something</a>
<a class="btn" href="checkbalance/" role="button">Check Balance</a>
<a class="btn" href="charge/" role="button">Charge Balance</a>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Login</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<title>Login</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 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/sha256.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>
</head>
<body onLoad="window.setTimeout(function() {location.href='../logout';}, 60000)">
<div class="container" id="main">
<div class="alert alert-danger" id="alert" hidden="">
<strong>Transaction Failed!</strong> Please try again.
</div>
<form method="post" id="form">
{% csrf_token %}
<div class="row">
<div class="container col-md-offset-4 col-md-8">
<h4>Please enter your User ID.</h4>
<input autofocus="" type="text" class="numpad userid form-control" name="username" id="id_username" value="" onfocus="field='id_username';" />
</div>
</div>
<div class="row">
<div class="container col-md-offset-4 col-md-8">
<h4>Please enter your pin.</h4>
<input type="password" class="numpad userid form-control" required name="password" id="id_password" value="" onfocus="field='id_password';"/>
</div>
</div>
</form>
<div class="row">
<div class="container col-md-4">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">1</button>
</div>
<div class="container col-md-4">
<button type="button" class="numpad btn btn-numpad btn-primary btn-block">2</button>
</div>
<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>
<link rel="stylesheet" href="../static/css/glow-theme.css " >
<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/search2json.js" defer></script>
<script charset="utf-8" src="../static/js/buydrink.js" defer></script>
</head>
<body onLoad="window.setTimeout(function() {location.href='../logout';}, 60000)">
<div class="alert alert-danger" id="alert" hidden="">
<strong>Transaction Failed!</strong> Please try again.
</div>
<div class="header">
<h2>Login</h2>
</div>
<div class="fields">
<form method="post" id="form" class="form-login">
{% csrf_token %}
<input autofocus="" placeholder="User ID" type="text" class="numpad userid form-control" name="username" id="id_username" value="" onfocus="field='id_username';" />
<input type="password" placeholder="PIN Number Number" class="numpad userpin form-control" required name="password" id="id_password" value="" onfocus="field='id_password';"/>
</form>
</div>
<div class="buttons-numpad numpad-login">
<button type="button" class="numpad btn btn-1">1</button>
<button type="button" class="numpad btn btn-2">2</button>
<button type="button" class="numpad btn btn-3">3</button>
<button type="button" class="numpad btn btn-4">4</button>
<button type="button" class="numpad btn btn-5">5</button>
<button type="button" class="numpad btn btn-6">6</button>
<button type="button" class="numpad btn btn-7">7</button>
<button type="button" class="numpad btn btn-8">8</button>
<button type="button" class="numpad btn btn-9">9</button>
<button type="button" class="numpad btn btn-0">0</button>
<button type="button" id="numpadc" class="btn numpad btn-clear">C</button>
<button type="button" id="numpadce" class="btn numpad btn-clear-all">CE</button>
<a class="btn btn-cancel" href="../logout" role="button">Cancel</a>
<button class="btn btn-submit" id="buydrink" type="button" value="Submit">Submit</button>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>View Drink Details</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<title>View Drink Details</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel=