Split up static files into static and django_static

static/css/main.css

@@ -0,0 +1,572 @@
+/* Font */
+
+@font-face {
+    font-family: "Inter";
+    src: url('/static/fonts/Inter-Regular.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "Inter";
+    src: url('/static/fonts/Inter-Bold.ttf');
+    font-weight: bold;
+    font-style: normal;
+}
+
+/* Variables */
+
+:root {
+    --font-family: "Inter";
+    --color: #fafafa;
+    --color-error: #ff682c;
+    --bg-page-color: #222222;
+    --bg-color: #4e4e4e;
+    --bg-hover-color: #636363;
+    --bg-color2: #383838;
+    --bg-hover-color2: #4a4a4a;
+    --border-color: #808080;
+    --bg-globalmessage: #161616;
+    --border-radius: .5rem;
+}
+
+/* General */
+
+body {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    min-height: 100vh;
+    font-family: var(--font-family);
+    background: var(--bg-page-color);
+    color: var(--color);
+    overflow-x: hidden;
+}
+
+a {
+    color: var(--color);
+}
+
+h1 {
+    font-size: 1.8rem;
+}
+
+h1, h2, h3, h4 {
+    text-align: center;
+}
+
+input[type="number"] {
+    width: 8rem;
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button {
+    display: none;
+}
+
+input[type="text"], input[type="password"], input[type="number"], select {
+    padding: .6rem .8rem;
+    text-align: center;
+    font-size: 1rem;
+    color: var(--color);
+    border: none;
+    outline: none;
+    border-bottom: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background: var(--bg-color);
+    font-family: "Inter";
+}
+
+select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    height: 2.5rem;
+    background-image: url("/static/material-icons/arrow-drop-down.svg");
+    background-repeat: no-repeat;
+    background-position: right;
+    background-size: 1.5rem;
+    padding-right: 1.8rem;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-align: left;
+    border-radius: var(--border-radius);
+}
+
+tr > th,
+tr > td {
+    background: var(--bg-color);
+}
+
+tr:nth-child(2n+2) > td {
+    background: var(--bg-color2);
+}
+
+/*
+Rounded corners on table cells apparently don't work with
+Firefox, so Firefox users won't have rounded corners
+on tables. Can't fix that by myself.
+*/
+
+table tr:first-child th:first-child {
+    border-top-left-radius: var(--border-radius);
+}
+
+table tr:first-child th:last-child {
+    border-top-right-radius: var(--border-radius);
+}
+
+table tr:last-child td:first-child {
+    border-bottom-left-radius: var(--border-radius);
+}
+
+table tr:last-child td:last-child {
+    border-bottom-right-radius: var(--border-radius);
+}
+
+td, th {
+    padding: .5rem .8rem;
+}
+
+th {
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+/* Basic Layout */
+
+.baselayout {
+    justify-content: start;
+    align-items: center;
+    min-height: 100vh;
+    width: 100vw;
+    max-width: 100vw;
+}
+
+.globalmessage {
+    width: 100vw;
+    z-index: 999;
+    background: var(--bg-globalmessage);
+    padding: .3rem 0;
+}
+
+.globalmessage > div {
+    width: 96%;
+    word-break: keep-all;
+    word-wrap: break-word;
+    box-sizing: border-box;
+}
+
+.userpanel {
+    flex-direction: row;
+    margin-top: 1rem;
+    width: 94%;
+    gap: 1rem;
+}
+
+.userinfo {
+    font-size: 1.05rem;
+}
+
+.userinfo > span {
+    vertical-align: middle;
+}
+
+.userinfo > img {
+    vertical-align: middle;
+    width: 1.8rem;
+    height: 1.8rem;
+    margin: .5rem;
+}
+
+.userpanel-buttons {
+    gap: .5rem;
+}
+
+.userpanel-buttons > .button, .userpanel-buttons button {
+    height: 1.2rem;
+}
+
+.userbalancewarn {
+    color: var(--color-error);
+    font-weight: bold;
+}
+
+main {
+    justify-content: flex-start;
+    align-items: center;
+    flex-grow: 1;
+    width: 100%;
+}
+
+.content {
+    justify-content: start;
+    align-items: center;
+    flex-grow: 1;
+    padding: 2rem 0;
+}
+
+.footer-container {
+    z-index: 900;
+    margin-top: auto;
+    pointer-events: none;
+}
+
+.footer {
+    margin-top: 1.5rem;
+    padding-bottom: .3rem;
+    text-align: center;
+    pointer-events: initial;
+}
+
+.footer > div {
+    font-size: .95rem;
+    margin-top: .15rem;
+    margin-bottom: .15rem;
+}
+
+.footer > div::after {
+    margin-left: .5rem;
+    content: "-";
+    margin-right: .5rem;
+}
+
+.footer > div:last-child::after {
+    content: none;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/* Common */
+
+.flex {
+    display: flex;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+.flex-center {
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.text-align-right {
+    text-align: right;
+}
+
+.text-align-center {
+    text-align: center;
+}
+
+.gap-1rem {
+    gap: 1rem;
+}
+
+.fill {
+    height: 100%;
+    width: 100%;
+}
+
+.fill-vertical {
+    height: 100%;
+}
+
+.buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+    gap: 1rem;
+}
+
+.button, button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-family);
+    text-decoration: none;
+    text-align: center !important;
+    background: var(--bg-color);
+    color: var(--color);
+    font-size: 1rem;
+    padding: .6rem .8rem;
+    outline: none;
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    user-select: none;
+    box-sizing: content-box;
+    width: fit-content;
+}
+
+.button:hover, button:hover, .button:active, button:active {
+    background: var(--bg-hover-color);
+}
+
+.button:disabled, button:disabled {
+    opacity: 40%;
+}
+
+.appform > .forminfo {
+    width: 100%;
+    text-align: left;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 2rem;
+}
+
+.forminfo > span:last-child {
+    float: right;
+}
+
+.appform > .forminput {
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.appform > .statusinfo {
+    margin-top: .5rem;
+}
+
+.dropdownmenu {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    border-radius: var(--border-radius);
+}
+
+.dropdownbutton {
+    z-index: 190;
+}
+
+.dropdownbutton > img {
+    width: auto;
+    height: 100%;
+}
+
+.dropdownlist {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+    border-radius: var(--border-radius) !important;
+    z-index: 200;
+    margin-top: 3.2rem;
+    opacity: 0%;
+    transition: opacity 100ms;
+    box-shadow: 0 .25rem 1rem #00000090;
+}
+
+.dropdownchoice {
+    border-radius: 0 !important;
+    margin: 0;
+    text-align: center;
+    justify-content: center;
+    background: var(--bg-color2) !important;
+    backdrop-filter: none !important;
+    width: initial;
+}
+
+.dropdownchoice:hover {
+    background: var(--bg-hover-color2) !important;
+}
+
+.dropdownlist :first-child {
+    border-top-left-radius: var(--border-radius) !important;
+    border-top-right-radius: var(--border-radius) !important;
+}
+
+.dropdownlist :last-child {
+    border-bottom-left-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+}
+
+.dropdownvisible .dropdownlist {
+    opacity: 100%;
+    visibility: visible;
+    pointer-events: visible;
+}
+
+.customnumberinput {
+    height: 2.5rem;
+}
+
+.customnumberinput button {
+    min-width: 2.5rem !important;
+    width: 2.5rem !important;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+}
+
+.customnumberinput-minus {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    z-index: 10;
+}
+
+.customnumberinput-plus {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    z-index: 10;
+}
+
+.customnumberinput input[type="number"] {
+    height: 100%;
+    width: 4rem;
+    padding: 0;
+    margin: 0;
+    background: var(--bg-color2);
+    border-radius: 0 !important;
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+.errortext {
+    color: var(--color-error);
+}
+
+.nodisplay {
+    display: none !important;
+}
+
+/* Login */
+
+.userlist {
+    width: 60%;
+    list-style: none;
+    margin: 0;
+    padding: 1rem;
+    gap: 1rem;
+}
+
+.userlist > li {
+    margin-bottom: .5rem;
+    padding: 0 .5rem;
+}
+
+.userlist > li > img {
+    margin-right: auto;
+    margin-left: 0;
+    height: 2rem;
+    width: 2rem;
+}
+
+.userlist > li > div {
+    flex-grow: 1;
+    text-align: center;
+    padding: .8rem 1.1rem;
+}
+
+.loginform {
+    gap: 1rem;
+    flex-direction: row;
+}
+
+.loginform > .buttons {
+    margin-top: 0;
+}
+
+/* Drinks List */
+
+.drinks-list {
+    justify-content: center;
+    align-items: start;
+    padding: 0;
+    width: 60%;
+}
+
+.drinks-list > li {
+    flex-grow: 1;
+}
+
+.drinks-list > li > .button {
+    width: 100%;
+    justify-content: space-between;
+    padding: .8rem 1.1rem;
+}
+
+/* Statistics */
+
+.statistics-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: wrap;
+    max-width: 90vw;
+    gap: 1rem;
+}
+
+.statistics-container > div {
+    height: 100%;
+    width: 16rem;
+}
+
+/* Responsive */
+
+@media only screen and (max-width: 1200px) {
+    .userlist {
+        width: 75%;
+    }
+    .drinks-list {
+        width: 70%;
+    }
+}
+
+@media only screen and (max-width: 1000px) {
+    .userlist {
+        width: 90%;
+    }
+    .drinks-list {
+        width: 80%;
+    }
+}
+
+@media only screen and (max-width: 700px) {
+    .userpanel {
+        flex-direction: column;
+    }
+    .userlist {
+        gap: 0.25rem;
+    }
+    .userlist > li {
+        width: 100%;
+    }
+    .userlist > li > div {
+        margin-right: 2rem;
+    }
+    .loginform {
+        flex-direction: column;
+    }
+    .drinks-list {
+        width: 90%;
+    }
+    .dropdownlist {
+        width: 14rem;
+        right: calc(50vw - 7rem);
+        left: auto;
+    }
+}

static/css/simple-keyboard.css

@@ -0,0 +1,11 @@
+/*!
+ * 
+ *   simple-keyboard v3.5.22
+ *   https://github.com/hodgef/simple-keyboard
+ *
+ *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
+ *
+ *   This source code is licensed under the MIT license found in the
+ *   LICENSE file in the root directory of this source tree.
+ *
+ */.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit;outline:0}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;max-width:272px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;background:#d0d0d0;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}

static/css/simple-keyboard_dark.css

@@ -0,0 +1,24 @@
+.simple-keyboard.darkTheme.numeric {
+    width: 13rem;
+}
+.simple-keyboard.darkTheme {
+    width: 50rem;
+    max-width: 100%;
+    background: transparent;
+    font-family: "Inter";
+}
+.simple-keyboard.darkTheme .hg-button {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--bg-color);
+    color: white;
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+}
+.simple-keyboard.darkTheme .hg-button:active,
+.simple-keyboard.darkTheme .hg-button:hover {
+    color: white;
+    background: var(--bg-hover-color);
+}