Verified Commit 3805655a authored by glow's avatar glow 🐻

More different colors and unified page strucutre

I also changed some routes to be more sensible
parent 1d44c94f
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;
}
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; }
.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-4,
.numpad-priceentry .btn-5,
.numpad-priceentry .btn-6,
.numpad-priceentry .btn-0,
.numpad-priceentry .btn-point,
.numpad-priceentry .btn-clear,
.numpad-priceentry .btn-clear-all{
background-color: #F5A9B8;
}
.numpad-priceentry .btn-7,
.numpad-priceentry .btn-8,
.numpad-priceentry .btn-9,
.numpad-priceentry .btn-add{
background-color: white;
color:black;
}
.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;
}
......@@ -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>
<!doctype html>
<html lang="en">
<head>
<title>Prepaidmate</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<title>Prepaidmate</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../static/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>
<body>
<div class="alert alert-danger" id="alert" hidden="">
<strong>Transaction Failed!</strong> Please try again.