merged
This commit is contained in:
kindtanton
commit
79c6195d42
56 changed files with 2616 additions and 179 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -67,5 +67,9 @@ app/config.py
|
|||
*.db
|
||||
|
||||
tmp/
|
||||
<<<<<<< HEAD
|
||||
|
||||
.tern-port
|
||||
|
||||
# Do not add scss cache
|
||||
*.sass-cache
|
||||
|
|
|
|||
|
|
@ -40,6 +40,8 @@ Finally run the webserver with
|
|||
|
||||
python3 app/app.py runserver
|
||||
|
||||
Make sure to use localhost instead of 127.0.0.1 if you want to be able to login.
|
||||
|
||||
## Development
|
||||
|
||||
### Changing the database
|
||||
|
|
|
|||
|
|
@ -73,7 +73,6 @@ def register_plugins(app: Flask) -> Manager:
|
|||
app_manager = Manager(app)
|
||||
app_manager.add_command("db", MigrateCommand)
|
||||
app_manager.add_command("runserver", Server(port=8000))
|
||||
|
||||
# Add admin interface
|
||||
init_admin(app, db)
|
||||
|
||||
|
|
|
|||
110
app/static/css/darkmode.css
Normal file
110
app/static/css/darkmode.css
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#D0D0D8;
|
||||
--dGray1:#8E8E93;
|
||||
--dGray2:#636366;
|
||||
--dGray3:#48484A;
|
||||
--dGray4:#3A3A3C;
|
||||
--dGray5:#2C2C2E;
|
||||
--dGray6:#1C1C1E;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
.table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
body{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
a {
|
||||
color: var(--dBlue);
|
||||
}
|
||||
.btn-primary {
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--dGray6);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a{
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a:hover{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
hr{
|
||||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
background-color: var(--dGray4);
|
||||
}
|
||||
.table tbody tr td {
|
||||
border-top: 1px solid var(--dGray3);
|
||||
}
|
||||
.table thead tr th {
|
||||
border-bottom: 2px solid var(--dGray2);
|
||||
}
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: var(--dGray0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-results__option{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
|
||||
.bootstrap-datetimepicker-widget table td.day:hover,
|
||||
.bootstrap-datetimepicker-widget table td.hour:hover,
|
||||
.bootstrap-datetimepicker-widget table td.minute:hover,
|
||||
.bootstrap-datetimepicker-widget table td span:hover,
|
||||
.bootstrap-datetimepicker-widget table td.second:hover {
|
||||
background: var(--dGray4);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option[aria-selected=true]{
|
||||
background-color: var(--dBlue);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-search{
|
||||
background-color: var(--dGray2);
|
||||
}
|
||||
.select2-search input{
|
||||
background-color: var(--dGray0);
|
||||
}
|
||||
.dropdown-menu{
|
||||
background-color: var(--dGray5);
|
||||
}
|
||||
.form-control{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
}
|
||||
.enter_darkmode>a {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -12,17 +12,20 @@
|
|||
--FontFamily:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
--FontSize:13px;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 70px;
|
||||
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
height: 100%;
|
||||
font-family: var(--FontFamily);
|
||||
font-size: var(--FontSize);
|
||||
}
|
||||
|
||||
.background{
|
||||
position: absolute;
|
||||
z-index: -1000;
|
||||
|
|
@ -64,6 +67,10 @@ body {
|
|||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.order_row {
|
||||
background: var(--dGray4);
|
||||
}
|
||||
|
||||
@media(min-width: 768px) and (max-width: 991px){
|
||||
/* Make sure the small map in the location page has the same with as the block above */
|
||||
.sm-no-side-padding {
|
||||
|
|
@ -90,10 +97,6 @@ div.box:hover {
|
|||
box-shadow: 2px 4px 4px -1px #888888;
|
||||
}
|
||||
|
||||
.darkmode .table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
|
||||
a.divLink {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -126,97 +129,96 @@ a.divLink {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.darkmode {
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
.table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
.darkmode a {
|
||||
a {
|
||||
color: var(--dBlue);
|
||||
}
|
||||
.darkmode .btn-primary {
|
||||
.btn-primary {
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
.darkmode .navbar {
|
||||
.navbar {
|
||||
background-color: var(--dGray6);
|
||||
}
|
||||
.darkmode .navbar-default .navbar-nav .active a{
|
||||
.navbar-default .navbar-nav .active a{
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.darkmode .navbar-default .navbar-nav .active a:hover{
|
||||
.navbar-default .navbar-nav .active a:hover{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .navbar-default .navbar-nav li a,.darkmode .navbar-default .navbar-brand{
|
||||
.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.darkmode .navbar-default .navbar-nav li a:hover,.darkmode .navbar-default .navbar-brand:hover{
|
||||
.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode hr{
|
||||
hr{
|
||||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
.darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6{
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
|
||||
.darkmode .jumbotron, .darkmode .darker {
|
||||
.jumbotron, .darker {
|
||||
background-color: var(--dGray4);
|
||||
}
|
||||
.darkmode .table tbody tr td {
|
||||
.table tbody tr td {
|
||||
border-top: 1px solid var(--dGray3);
|
||||
}
|
||||
.darkmode .table thead tr th {
|
||||
.table thead tr th {
|
||||
border-bottom: 2px solid var(--dGray2);
|
||||
}
|
||||
.darkmode .navbar-toggle .icon-bar {
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: var(--dGray0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.darkmode .select2-container--default .select2-selection--single{
|
||||
.select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .select2-results__option{
|
||||
.select2-results__option{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td.day:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td.hour:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td.minute:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td span:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td.second:hover {
|
||||
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
|
||||
.bootstrap-datetimepicker-widget table td.day:hover,
|
||||
.bootstrap-datetimepicker-widget table td.hour:hover,
|
||||
.bootstrap-datetimepicker-widget table td.minute:hover,
|
||||
.bootstrap-datetimepicker-widget table td span:hover,
|
||||
.bootstrap-datetimepicker-widget table td.second:hover {
|
||||
background: var(--dGray4);
|
||||
}
|
||||
|
||||
.darkmode .select2-container--default .select2-results__option[aria-selected=true]{
|
||||
.select2-container--default .select2-results__option[aria-selected=true]{
|
||||
background-color: var(--dBlue);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .select2-search{
|
||||
.select2-search{
|
||||
background-color: var(--dGray2);
|
||||
}
|
||||
.darkmode .select2-search input{
|
||||
.select2-search input{
|
||||
background-color: var(--dGray0);
|
||||
}
|
||||
.darkmode .dropdown-menu{
|
||||
.dropdown-menu{
|
||||
background-color: var(--dGray5);
|
||||
}
|
||||
.darkmode .form-control{
|
||||
.form-control{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .form-control::placeholder{
|
||||
.form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
}
|
||||
.enter_darkmode>a {
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
12
app/static/css/themes/highPerformance/darkmode.css
Normal file
12
app/static/css/themes/highPerformance/darkmode.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/*Darkmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#D0D0D8;
|
||||
--dGray1:#8E8E93;
|
||||
--dGray2:#636366;
|
||||
--dGray3:#48484A;
|
||||
--dGray4:#3A3A3C;
|
||||
--dGray5:#2C2C2E;
|
||||
--dGray6:#1C1C1E;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
4
app/static/css/themes/highPerformance/dataPrivacy.css
Normal file
4
app/static/css/themes/highPerformance/dataPrivacy.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.background {
|
||||
background-image: url("https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2");
|
||||
background-size: contain;
|
||||
}
|
||||
16
app/static/css/themes/highPerformance/halloween.css
Normal file
16
app/static/css/themes/highPerformance/halloween.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
/*halloween*/
|
||||
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#FFEB65;
|
||||
--dGray1:#F28705;
|
||||
--dGray2:#F25C05;
|
||||
--dGray3:#F27405;
|
||||
--dGray4:#8C3D0F;
|
||||
--dGray5:#260101;
|
||||
--dGray6:#260101;
|
||||
--dBlue:#D91604;
|
||||
}
|
||||
.table-hover tbody tr:hover{
|
||||
background-image: url("static/images/themes/halloween/Halloween.jpeg");
|
||||
}
|
||||
531
app/static/css/themes/highPerformance/kerstmis.css
Normal file
531
app/static/css/themes/highPerformance/kerstmis.css
Normal file
|
|
@ -0,0 +1,531 @@
|
|||
@charset "UTF-8";
|
||||
/*
|
||||
¡¡¡ OPGELET !!!
|
||||
Deze css bevat lelijke code.
|
||||
Dit komt doordat bootstrap lelijk en oud is.
|
||||
Ik zal later proberen de css te verbeteren en bootstrap weg te gooien.
|
||||
Enige discretie is aangeraden.
|
||||
|
||||
---=§[ Arnhoudt ]§=---
|
||||
|
||||
*/
|
||||
/*high performance kerstmis*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F28705;
|
||||
--dGray1:white;
|
||||
--dGray2:#590212;
|
||||
--dGray3:#590212;
|
||||
--dGray4:#274001;
|
||||
--dGray5:#274001;
|
||||
--dGray6:#F2778D;
|
||||
--dBlue:#F2778D; }
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: Radikal,Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
|
||||
background-color: #2F0000; }
|
||||
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url("static/fonts/radikal_regular.ttf");
|
||||
font-weight: normal; }
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url("static/fonts/radikal_light.ttf");
|
||||
font-weight: 200; }
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url("static/fonts/radikal_medium.ttf");
|
||||
font-weight: medium; }
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url("static/fonts/radikal_bold.ttf");
|
||||
font-weight: bold; }
|
||||
.btn {
|
||||
border-radius: 5rem;
|
||||
color: white;
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
background-image: linear-gradient(-40deg, #F53030, #F58B9E); }
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(-40deg, #A81111, #FF4B33); }
|
||||
|
||||
.navbar {
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
padding: 1.5rem;
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
text-transform: capitalize; }
|
||||
|
||||
.nav > li > a {
|
||||
padding-left: 1vw;
|
||||
padding-right: 1vw; }
|
||||
|
||||
.main {
|
||||
height: 90vh;
|
||||
overflow: scroll;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column; }
|
||||
|
||||
.navbar .container {
|
||||
width: 100%;
|
||||
padding: 0 4vw; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 100%; } }
|
||||
@media (min-width: 992px) {
|
||||
.main .container, .main .orders {
|
||||
width: 970px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.main .container, .main .orders {
|
||||
width: 1170px; } }
|
||||
.main {
|
||||
padding-top: 2.5rem; }
|
||||
|
||||
.order_data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 3rem;
|
||||
align-items: baseline; }
|
||||
|
||||
.order_row {
|
||||
background: transparent; }
|
||||
|
||||
.order_data h5 {
|
||||
max-width: 60%;
|
||||
padding-bottom: 3rem; }
|
||||
|
||||
.expand_button {
|
||||
padding: 1rem 0rem;
|
||||
margin-top: -1rem;
|
||||
width: 70%;
|
||||
margin-bottom: 1.5rem; }
|
||||
|
||||
.hi_im_haldis h2 {
|
||||
display: none; }
|
||||
|
||||
.hi_im_haldis h3 {
|
||||
width: 100%;
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
text-align: center; }
|
||||
|
||||
.hi_im_haldis {
|
||||
background: linear-gradient(70deg, rgba(203, 52, 68, 0.8), rgba(135, 32, 44, 0.8));
|
||||
border-radius: 0;
|
||||
width: 100%; }
|
||||
|
||||
.hi_im_haldis_wrapper {
|
||||
width: 100%; }
|
||||
|
||||
.darker:nth-child(even) {
|
||||
background-color: #B62937;
|
||||
border-radius: 2rem; }
|
||||
|
||||
.darker:nth-child(odd) {
|
||||
background-color: #821C25;
|
||||
border-radius: 2rem; }
|
||||
|
||||
.darker {
|
||||
padding: 1rem; }
|
||||
|
||||
.order_row:nth-child(even) .order_data {
|
||||
background-color: #B62937;
|
||||
border-radius: 2rem; }
|
||||
|
||||
.order_row:nth-child(odd) .order_data {
|
||||
background-color: #821C25;
|
||||
border-radius: 2rem; }
|
||||
|
||||
.order_row h5 {
|
||||
font-weight: bold; }
|
||||
|
||||
.order_row {
|
||||
margin-bottom: 3rem; }
|
||||
|
||||
h3 {
|
||||
padding-bottom: 1rem; }
|
||||
|
||||
.home_sir {
|
||||
font-weight: bold;
|
||||
color: #F45D68; }
|
||||
|
||||
.expand_button_wrapper {
|
||||
margin-top: -1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center; }
|
||||
|
||||
.time_data {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: right; }
|
||||
|
||||
.navbar .navbar-nav .active a {
|
||||
color: #ff9bae;
|
||||
border-bottom: 1px solid #ff9bae;
|
||||
padding-bottom: 1rem; }
|
||||
|
||||
.navbar-nav {
|
||||
padding-left: 2rem; }
|
||||
|
||||
.jumbotron, .darker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4rem; }
|
||||
|
||||
.row > div > h5 {
|
||||
font-weight: bold;
|
||||
padding-top: 1.5rem;
|
||||
font-size: 2.5rem; }
|
||||
|
||||
.row > div > .amount_of_orders {
|
||||
font-weight: lighter;
|
||||
font-size: 1.6rem; }
|
||||
|
||||
.row > div .time {
|
||||
font-weight: lighter; }
|
||||
|
||||
.jumbotron {
|
||||
background-color: transparent; }
|
||||
|
||||
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover {
|
||||
background-color: transparent; }
|
||||
|
||||
.background {
|
||||
-webkit-filter: blur(0px) brightness(80%);
|
||||
-moz-filter: blur(0px) brightness(80%);
|
||||
-o-filter: blur(0px) brightness(80%);
|
||||
-ms-filter: blur(0px) brightness(80%);
|
||||
filter: blur(0px) brightness(80%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
footer a {
|
||||
color: #69E8FF; }
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #CB3444;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
|
||||
footer > hr {
|
||||
display: none; }
|
||||
|
||||
#mapid {
|
||||
width: 100%; }
|
||||
|
||||
.order_overview, .order_order, .order_items, .order_ordered, .order_depts {
|
||||
padding: 1rem 5rem 3rem 5rem; }
|
||||
|
||||
.order_depts {
|
||||
width: 100%;
|
||||
margin-bottom: 10rem; }
|
||||
|
||||
.location_data, .location_products {
|
||||
width: 100%; }
|
||||
|
||||
.location_products {
|
||||
margin-bottom: 10rem; }
|
||||
|
||||
.locations_locations {
|
||||
padding: 1rem 5rem 3rem 5rem; }
|
||||
|
||||
.background_wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
|
||||
.christmas_background {
|
||||
z-index: -101;
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
background: linear-gradient(-45deg, #2F0000, #C20A12);
|
||||
animation: gradientBG 19s ease infinite; }
|
||||
|
||||
.sled {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
transition: transform 2s ease-in 5s, rotate 1s ease-in-out 2s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/sled.svg"); }
|
||||
|
||||
.sled_wrapper {
|
||||
top: 0.5rem;
|
||||
left: -7.5rem;
|
||||
position: absolute;
|
||||
transform: translate(-50vw, 40vh) rotate(0deg);
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
animation: sled 29s ease-in-out infinite; }
|
||||
|
||||
.train_button:checked ~ .sled_wrapper:hover {
|
||||
animation-play-state: paused; }
|
||||
|
||||
.train_button:checked ~ .sled_wrapper:hover .sled {
|
||||
transform: translateY(100vh) rotate(90deg); }
|
||||
|
||||
.snowman_wrapper {
|
||||
height: 17rem;
|
||||
width: 10rem;
|
||||
position: absolute;
|
||||
bottom: 15rem;
|
||||
left: -12rem;
|
||||
animation: snowman 37s ease infinite;
|
||||
transform-origin: right bottom; }
|
||||
|
||||
.snowman_head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/snowman_head.svg");
|
||||
animation: snowman_head 2s ease infinite; }
|
||||
|
||||
.snowman_body {
|
||||
position: absolute;
|
||||
top: 9.5rem;
|
||||
left: 0.5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/snowman_body.svg"); }
|
||||
|
||||
.train_button:checked ~ .merry_christmas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-image: url("static/images/themes/kerstmis/merry_christmas.svg");
|
||||
background-size: 25vw;
|
||||
background-repeat: no-repeat;
|
||||
animation: merry_christmas 5s ease infinite; }
|
||||
|
||||
.train_button {
|
||||
position: absolute;
|
||||
transform: scaleX(20) scaleY(8) translateX(-100rem);
|
||||
bottom: 5.5rem;
|
||||
left: 7rem;
|
||||
animation: follow_train 47s linear infinite;
|
||||
opacity: 0; }
|
||||
|
||||
.train_wrapper {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
transform: translateX(-80vw);
|
||||
animation: train 47s linear infinite; }
|
||||
|
||||
.wheel_big, .wheel_small {
|
||||
position: absolute;
|
||||
bottom: -0.4rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/wheel.svg"); }
|
||||
|
||||
.train {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
left: 30rem;
|
||||
width: 30rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/train.svg");
|
||||
animation: whobble 1s linear alternate-reverse infinite; }
|
||||
|
||||
.wheel_big {
|
||||
width: 3.2rem;
|
||||
height: 3.2rem; }
|
||||
|
||||
.wheel_small {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem; }
|
||||
|
||||
.train .wheel1 {
|
||||
animation: turn 2s linear infinite;
|
||||
left: 3.5rem; }
|
||||
|
||||
.train .wheel2 {
|
||||
animation: turn 2s linear infinite, -0.1s;
|
||||
left: 7rem; }
|
||||
|
||||
.train .wheel3 {
|
||||
animation: turn 2s linear infinite -0.3s;
|
||||
left: 10.5rem; }
|
||||
|
||||
.train .wheel4 {
|
||||
animation: turn 1.5s linear infinite -0.5s;
|
||||
left: 13.9rem; }
|
||||
|
||||
.train .wheel5 {
|
||||
animation: turn 1.5s linear infinite -0.7s;
|
||||
left: 16.6rem; }
|
||||
|
||||
.zeus_wagon, .mc_wagon {
|
||||
position: absolute;
|
||||
bottom: 1.25rem;
|
||||
width: 30rem;
|
||||
height: 7.5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
animation: whobble 1s linear alternate-reverse infinite; }
|
||||
|
||||
.mc_wagon {
|
||||
background-image: url("static/images/themes/kerstmis/mc_wagon.svg");
|
||||
left: 0rem; }
|
||||
|
||||
.zeus_wagon {
|
||||
background-image: url("static/images/themes/kerstmis/zeus_wagon.svg");
|
||||
left: 15rem; }
|
||||
|
||||
.zeus_wagon .wheel1, .mc_wagon .wheel1 {
|
||||
animation: turn 2s linear infinite;
|
||||
bottom: -1.1rem;
|
||||
left: 2.2rem; }
|
||||
|
||||
.zeus_wagon .wheel2, .mc_wagon .wheel2 {
|
||||
animation: turn 2s linear infinite, -0.1s;
|
||||
bottom: -1.1rem;
|
||||
left: 5.75rem; }
|
||||
|
||||
.zeus_wagon .wheel3, .mc_wagon .wheel3 {
|
||||
animation: turn 2s linear infinite -0.3s;
|
||||
bottom: -1.1rem;
|
||||
left: 9.3rem; }
|
||||
|
||||
.snow {
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: -100vh;
|
||||
animation-name: fall;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite; }
|
||||
|
||||
.layer1 {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
filter: blur(1.5px);
|
||||
box-shadow: 69.7vw 89.6vh 0 -0.44rem#fff,84.1vw 71.7vh 0 -0.35rem#fff,88.1vw 41.9vh 0 -0.49rem#fff,38.3vw 65.2vh 0 -0.37rem#fff,15.8vw 9vh 0 -0.13rem#fff,89.1vw 80vh 0 -0.28rem#fff,49.9vw 58.2vh 0 -0.42rem#fff,86.3vw 22.7vh 0 -0.11rem#fff,82.6vw 12.3vh 0 -0.42rem#fff,84.8vw 26.8vh 0 -0.44rem#fff,88.4vw 8.9vh 0 -0.26rem#fff,73.9vw 89.7vh 0 -0.11rem#fff,45.7vw 41.6vh 0 -0.34rem#fff,42.1vw 26.9vh 0 -0.22rem#fff,51.3vw 12.4vh 0 -0.07rem#fff,18.3vw 97vh 0 -0.38rem#fff,60.6vw 33.7vh 0 -0.22rem#fff,98.6vw 8.2vh 0 -0.2rem#fff,69.4vw 82.4vh 0 -0.45rem#fff,32.5vw 19vh 0 -0.18rem#fff,1.2vw 2.2vh 0 -0.44rem#fff,92.6vw 63.1vh 0 -0.06rem#fff,35.2vw 73.6vh 0 -0.31rem#fff,79vw 43.3vh 0 -0.25rem#fff,43.5vw 34.8vh 0 -0.18rem#fff,22.7vw 18.8vh 0 -0.43rem#fff,13.7vw 77.4vh 0 -0.15rem#fff,19.4vw 74.1vh 0 -0.2rem#fff,35vw 16vh 0 -0.5rem#fff,44.8vw 55.3vh 0 -0.43rem#fff,26.7vw 26.5vh 0 -0.02rem#fff,80.7vw 14.1vh 0 -0.29rem#fff,65.8vw 94.2vh 0 -0.27rem#fff,79.8vw 9.2vh 0 -0.13rem#fff,88.1vw 46.3vh 0 -0.19rem#fff,38.2vw 22.1vh 0 -0.14rem#fff,66.1vw 94.9vh 0 -0.48rem#fff,63.1vw 37.1vh 0 -0.5rem#fff,3.3vw 82.9vh 0 -0.13rem#fff,54.1vw 24.2vh 0 -0.38rem#fff,51.6vw 38.3vh 0 -0.3rem#fff,44vw 52.6vh 0 -0.5rem#fff,96.4vw 68.9vh 0 -0.12rem#fff,76.2vw 23.7vh 0 -0.19rem#fff,54vw 40.3vh 0 -0.47rem#fff,2.5vw 41.9vh 0 -0.17rem#fff,0.5vw 30.5vh 0 -0.26rem#fff,31.9vw 32vh 0 -0.28rem#fff,4.8vw 84.7vh 0 -0.1rem#fff,3vw 26.9vh 0 -0.41rem#fff,67.6vw 54.7vh 0 -0.27rem#fff,83.5vw 45.2vh 0 -0.28rem#fff,88.4vw 83.4vh 0 -0.02rem#fff,44.4vw 96vh 0 -0.09rem#fff,25.1vw 18.7vh 0 -0.49rem#fff,59.6vw 9.5vh 0 -0.46rem#fff,32.4vw 1.6vh 0 -0.42rem#fff,98.7vw 77.2vh 0 -0.06rem#fff,27vw 39.7vh 0 -0.41rem#fff,70.1vw 50.8vh 0 -0.04rem#fff,37.2vw 26.9vh 0 -0.08rem#fff,87.3vw 97.8vh 0 -0.16rem#fff,51.1vw 89.7vh 0 -0.31rem#fff,74.2vw 2.7vh 0 -0.23rem#fff,16.5vw 12.1vh 0 -0.13rem#fff,21.8vw 94.1vh 0 -0.13rem#fff,94.9vw 37.1vh 0 -0.48rem#fff,32.9vw 92vh 0 -0.04rem#fff,59.7vw 11.1vh 0 -0.42rem#fff,23.6vw 41.7vh 0 -0.44rem#fff,99.9vw 17.1vh 0 -0.5rem#fff,62.6vw 76.7vh 0 -0.19rem#fff,41.7vw 60.2vh 0 -0.14rem#fff,14.6vw 95.3vh 0 -0.16rem#fff,44.4vw 61.6vh 0 -0.28rem#fff,57.1vw 51vh 0 -0.42rem#fff,10.7vw 79.2vh 0 -0.2rem#fff,52.6vw 59.4vh 0 -0.29rem#fff,60.1vw 53.5vh 0 -0.36rem#fff,66.9vw 37.1vh 0 -0.11rem#fff,0.8vw 68.5vh 0 -0.36rem#fff,21.8vw 45.7vh 0 -0.13rem#fff,50.9vw 70.5vh 0 -0.19rem#fff,38.6vw 17.1vh 0 -0.47rem#fff,15.9vw 79.6vh 0 -0.11rem#fff,76.2vw 61.8vh 0 -0.3rem#fff,61.2vw 66vh 0 -0.41rem#fff,97.2vw 5vh 0 -0.31rem#fff,28.8vw 40.3vh 0 -0.49rem#fff,71.4vw 52.7vh 0 -0.42rem#fff,19.3vw 36.1vh 0 -0.48rem#fff,82.3vw 20.8vh 0 -0.43rem#fff,59vw 33.2vh 0 -0.41rem#fff,15.7vw 82.8vh 0 -0.28rem#fff,93.2vw 54.1vh 0 -0.02rem#fff,50.9vw 69.1vh 0 -0.15rem#fff,61.7vw 97.6vh 0 -0.31rem#fff,95.9vw 35.6vh 0 -0.34rem#fff,35.2vw 69.9vh 0 -0.4rem#fff,30.7vw 44.6vh 0 -0.46rem#fff;
|
||||
animation-duration: 18s; }
|
||||
|
||||
.layer1.a {
|
||||
animation-delay: -9s; }
|
||||
|
||||
.layer2 {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
filter: blur(3px);
|
||||
box-shadow: 39.5vw 44.4vh 0 -0.01rem#fff,14vw 36.8vh 0 -0.19rem#fff,48vw 32.2vh 0 -0.5rem#fff,71.5vw 66.8vh 0 -0.03rem#fff,89.1vw 40.9vh 0 -0.33rem#fff,16.8vw 7.1vh 0 -0.47rem#fff,77.1vw 20.9vh 0 -0.1rem#fff,21.7vw 66.7vh 0 -0.33rem#fff,49.7vw 89.7vh 0 -0.15rem#fff,80.4vw 55vh 0 -0.17rem#fff,3.2vw 33.1vh 0 -0.12rem#fff,46.5vw 5vh 0 -0.33rem#fff,7.9vw 54.2vh 0 -0.41rem#fff,74.7vw 43.9vh 0 -0.03rem#fff,82vw 24.4vh 0 -0.5rem#fff,50vw 35.8vh 0 -0.15rem#fff,89.7vw 0.7vh 0 -0.26rem#fff,33.3vw 98.3vh 0 -0.41rem#fff,75.7vw 45.3vh 0 -0.47rem#fff,21.8vw 58.2vh 0 -0.32rem#fff,4.6vw 84.3vh 0 -0.11rem#fff,50.9vw 7.1vh 0 -0.31rem#fff,11vw 72.6vh 0 -0.32rem#fff,40.1vw 53.9vh 0 -0.11rem#fff,26.2vw 28.5vh 0 -0.17rem#fff,8vw 46.5vh 0 -0.23rem#fff,91.5vw 84.5vh 0 -0.19rem#fff,92.9vw 60.2vh 0 -0.19rem#fff,25.8vw 82.7vh 0 -0.48rem#fff,82.6vw 51.9vh 0 -0.33rem#fff,98.2vw 50vh 0 -0.3rem#fff,96.6vw 66.6vh 0 -0.43rem#fff,36.9vw 8.4vh 0 -0.16rem#fff,62.6vw 24.4vh 0 -0.21rem#fff,24.6vw 46.3vh 0 -0.47rem#fff,30.1vw 83.8vh 0 -0.07rem#fff,50.3vw 33.8vh 0 -0.31rem#fff,4vw 86.4vh 0 -0.25rem#fff,70.6vw 32.8vh 0 -0.06rem#fff,87.4vw 42.9vh 0 -0.24rem#fff,75.7vw 30.6vh 0 -0.22rem#fff,17.7vw 54.6vh 0 -0.13rem#fff,30.2vw 67.1vh 0 -0.28rem#fff,90.8vw 86vh 0 -0.25rem#fff,98.8vw 22.3vh 0 -0.04rem#fff,56vw 48.7vh 0 -0.26rem#fff,68.3vw 45.2vh 0 -0.09rem#fff,39.1vw 14.6vh 0 -0.46rem#fff,39.5vw 1.8vh 0 -0.04rem#fff,68.3vw 62.2vh 0 -0.33rem#fff,29.7vw 42.7vh 0 -0.4rem#fff,78vw 22.6vh 0 -0.48rem#fff,62.5vw 61.4vh 0 -0.47rem#fff,87.2vw 3.1vh 0 -0.21rem#fff,14.2vw 20.6vh 0 -0.08rem#fff,63.2vw 36.3vh 0 -0.46rem#fff,34.5vw 67.1vh 0 -0.33rem#fff,59.8vw 12.5vh 0 -0.48rem#fff,65.1vw 43vh 0 -0.34rem#fff,22.9vw 19.9vh 0 -0.06rem#fff,90.3vw 4.3vh 0 -0.36rem#fff,91.8vw 58.2vh 0 -0.19rem#fff,76vw 66.3vh 0 -0.09rem#fff,91vw 10vh 0 -0.25rem#fff,36.5vw 98vh 0 -0.1rem#fff,29.4vw 73.9vh 0 -0.32rem#fff,6.4vw 75.5vh 0 -0.26rem#fff,33.2vw 17vh 0 -0.17rem#fff,11.1vw 50.6vh 0 -0.11rem#fff,63.2vw 98.1vh 0 -0.1rem#fff,67.7vw 17.2vh 0 -0.31rem#fff,51.6vw 71.7vh 0 -0.05rem#fff,39.1vw 92.2vh 0 -0.31rem#fff,57.7vw 67.7vh 0 -0.19rem#fff,30.4vw 98.6vh 0 -0.07rem#fff,13.9vw 18.6vh 0 -0.38rem#fff,66.7vw 26.1vh 0 -0.31rem#fff,61.9vw 53.1vh 0 -0.3rem#fff,80.7vw 78.5vh 0 -0.38rem#fff,32.8vw 9.4vh 0 -0.05rem#fff,89.5vw 82.6vh 0 -0.07rem#fff,92.8vw 70.1vh 0 -0.33rem#fff,32.6vw 74.9vh 0 -0.39rem#fff,72.5vw 23vh 0 -0.44rem#fff,13.9vw 54.7vh 0 -0.5rem#fff,38.5vw 67.2vh 0 -0.48rem#fff,10.8vw 95vh 0 -0.35rem#fff,6vw 65.7vh 0 -0.11rem#fff,63.6vw 22vh 0 -0.37rem#fff,93vw 53.6vh 0 -0.43rem#fff,24.8vw 73.9vh 0 -0.32rem#fff,23.4vw 7.9vh 0 -0.37rem#fff,69.8vw 84.4vh 0 -0.24rem#fff,42.1vw 39.7vh 0 -0.05rem#fff,48.4vw 87.5vh 0 -0.06rem#fff,94.7vw 80.6vh 0 -0.35rem#fff,88.8vw 19.4vh 0 -0.23rem#fff,74.1vw 5.3vh 0 -0.48rem#fff,41.5vw 29.8vh 0 -0.14rem#fff,61.4vw 59.9vh 0 -0.21rem#fff;
|
||||
animation-duration: 24s; }
|
||||
|
||||
.layer2.a {
|
||||
animation-delay: -12s; }
|
||||
|
||||
.layer3 {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
filter: blur(6px);
|
||||
box-shadow: 21.9vw 92.3vh 0 -0.13rem#fff,26vw 81.6vh 0 -0.36rem#fff,92.5vw 95.3vh 0 -0.05rem#fff,5.6vw 11.6vh 0 -0.11rem#fff,82vw 5.7vh 0 -0.08rem#fff,73.4vw 44.8vh 0 -0.4rem#fff,67.3vw 74.2vh 0 -0.09rem#fff,19.5vw 84.9vh 0 -0.17rem#fff,89.9vw 93.7vh 0 -0.12rem#fff,80.2vw 86.2vh 0 -0.13rem#fff,59.6vw 80.8vh 0 -0.19rem#fff,18.9vw 64.3vh 0 -0.43rem#fff,40.7vw 7.3vh 0 -0.36rem#fff,13.7vw 47.9vh 0 -0.31rem#fff,40vw 73.3vh 0 -0.14rem#fff,68.6vw 16vh 0 -0.38rem#fff,38.3vw 93.2vh 0 -0.48rem#fff,97.2vw 71.7vh 0 -0.04rem#fff,67.7vw 62.8vh 0 -0.43rem#fff,41.8vw 34.6vh 0 -0.13rem#fff,65.9vw 78.1vh 0 -0.16rem#fff,61.8vw 92.1vh 0 -0.25rem#fff,59.5vw 54.6vh 0 -0.22rem#fff,25.1vw 64vh 0 -0.42rem#fff,92vw 23.1vh 0 -0.16rem#fff,20.3vw 2.5vh 0 -0.4rem#fff,84.5vw 55.3vh 0 -0.13rem#fff,55.1vw 67.5vh 0 -0.37rem#fff,89.7vw 50.4vh 0 -0.43rem#fff,83.4vw 13.1vh 0 -0.07rem#fff,61.1vw 25.6vh 0 -0.45rem#fff,82.2vw 8.7vh 0 -0.26rem#fff,98vw 40vh 0 -0.02rem#fff,77.1vw 61.5vh 0 -0.44rem#fff,26.7vw 87.3vh 0 -0.41rem#fff,27.5vw 15.4vh 0 -0.14rem#fff,34.2vw 15.8vh 0 -0.09rem#fff,0.3vw 33.1vh 0 -0.4rem#fff,58.4vw 29vh 0 -0.3rem#fff,51.3vw 98.5vh 0 -0.31rem#fff,32.3vw 39.4vh 0 -0.39rem#fff,29.5vw 18.1vh 0 -0.25rem#fff,84.1vw 10.4vh 0 -0.19rem#fff,20.3vw 50.8vh 0 -0.2rem#fff,78.7vw 47vh 0 -0.12rem#fff,26.6vw 72.7vh 0 -0.04rem#fff,15.5vw 69.1vh 0 -0.49rem#fff,78.7vw 6vh 0 -0.25rem#fff,54.5vw 2vh 0 -0.08rem#fff,11.3vw 2.5vh 0 -0.36rem#fff,54.4vw 27.9vh 0 -0.47rem#fff,58.1vw 78.7vh 0 -0.22rem#fff,50.4vw 23vh 0 -0.19rem#fff,10.6vw 10.5vh 0 -0.41rem#fff,68vw 49.5vh 0 -0.18rem#fff,71.8vw 27.5vh 0 -0.03rem#fff,98vw 67.7vh 0 -0.48rem#fff,53.9vw 9.5vh 0 -0.04rem#fff,32.8vw 22.9vh 0 -0.21rem#fff,41.5vw 4.3vh 0 -0.25rem#fff,0.9vw 72.4vh 0 -0.06rem#fff,33.1vw 39.7vh 0 -0.31rem#fff,94.4vw 33.3vh 0 -0.2rem#fff,6.9vw 8.8vh 0 -0.01rem#fff,4.3vw 64.9vh 0 -0.37rem#fff,12.5vw 54.7vh 0 -0.37rem#fff,13.3vw 22.2vh 0 -0.45rem#fff,63.2vw 23.3vh 0 -0.07rem#fff,83.9vw 10.4vh 0 -0.09rem#fff,64.9vw 97.4vh 0 -0.22rem#fff,51.3vw 85.3vh 0 -0.25rem#fff,5.3vw 54.4vh 0 -0.46rem#fff,79.3vw 16.8vh 0 -0.26rem#fff,73.1vw 22.8vh 0 -0.47rem#fff,38vw 18.3vh 0 -0.04rem#fff,1.4vw 70.3vh 0 -0.06rem#fff,88.8vw 55.5vh 0 -0.17rem#fff,8.2vw 96.9vh 0 -0.24rem#fff,69.7vw 45.1vh 0 -0.4rem#fff,31.8vw 33vh 0 -0.27rem#fff,55.7vw 25vh 0 -0.28rem#fff,99.6vw 70.6vh 0 -0.14rem#fff,8.8vw 77vh 0 -0.2rem#fff,34.9vw 17.9vh 0 -0.47rem#fff,94.4vw 7.8vh 0 -0.34rem#fff,16.9vw 18.9vh 0 -0.12rem#fff,66.6vw 1.3vh 0 -0.34rem#fff,20.7vw 3.1vh 0 -0.38rem#fff,32.6vw 20.3vh 0 -0.03rem#fff,32.5vw 96.2vh 0 -0.26rem#fff,45.3vw 67.3vh 0 -0.04rem#fff,33vw 46.8vh 0 -0.29rem#fff,68.9vw 97.9vh 0 -0.33rem#fff,19.3vw 43.7vh 0 -0.33rem#fff,57.9vw 88.6vh 0 -0.01rem#fff,25.4vw 22.6vh 0 -0.36rem#fff,7.1vw 83.9vh 0 -0.43rem#fff,23.7vw 1.4vh 0 -0.09rem#fff,23.1vw 51.1vh 0 -0.1rem#fff,14.7vw 99.9vh 0 -0.12rem#fff;
|
||||
animation-duration: 30s; }
|
||||
|
||||
.layer3.a {
|
||||
animation-delay: -15s; }
|
||||
|
||||
@keyframes fall {
|
||||
100% {
|
||||
transform: translateY(200vh); } }
|
||||
@keyframes gradientBG {
|
||||
0% {
|
||||
transform: translate(-10%, -10%); }
|
||||
50% {
|
||||
transform: translate(-60%, -60%); }
|
||||
100% {
|
||||
transform: translate(-10%, -10%); } }
|
||||
@keyframes sled {
|
||||
0% {
|
||||
transform: translate(-50rem, 40vh) rotate(0deg); }
|
||||
4% {
|
||||
transform: translate(-50rem, 40vh) rotate(0deg); }
|
||||
20% {
|
||||
transform: translate(50vw, 10vh) rotate(20deg); }
|
||||
36% {
|
||||
transform: translate(150vw, 40vh) rotate(40deg); }
|
||||
100% {
|
||||
transform: translate(150vw, 40vh) rotate(40deg); } }
|
||||
@keyframes train {
|
||||
0% {
|
||||
transform: translateX(-80rem); }
|
||||
55% {
|
||||
transform: translateX(-80rem); }
|
||||
85% {
|
||||
transform: translateX(100vw); }
|
||||
100% {
|
||||
transform: translateX(100vw); } }
|
||||
@keyframes follow_train {
|
||||
0% {
|
||||
transform: translateX(-80rem) scaleX(20) scaleY(8); }
|
||||
55% {
|
||||
transform: translateX(-80rem) scaleX(20) scaleY(8); }
|
||||
85% {
|
||||
transform: translateX(100vw) scaleX(20) scaleY(8); }
|
||||
100% {
|
||||
transform: translateX(100vw) scaleX(20) scaleY(8); } }
|
||||
@keyframes turn {
|
||||
100% {
|
||||
transform: rotate(360deg); } }
|
||||
@keyframes whobble {
|
||||
100% {
|
||||
transform: translateY(0.5vh); } }
|
||||
@keyframes snowman {
|
||||
0% {
|
||||
transform: rotate(0); }
|
||||
20% {
|
||||
transform: rotate(0); }
|
||||
30% {
|
||||
transform: rotate(80deg); }
|
||||
54% {
|
||||
transform: rotate(80deg); }
|
||||
68% {
|
||||
transform: rotate(0); }
|
||||
100% {
|
||||
transform: rotate(0); } }
|
||||
@keyframes snowman_head {
|
||||
0% {
|
||||
transform: rotate(-3deg); }
|
||||
50% {
|
||||
transform: rotate(3deg); }
|
||||
100% {
|
||||
transform: rotate(-3deg); } }
|
||||
@keyframes merry_christmas {
|
||||
0% {
|
||||
opacity: 0.8; }
|
||||
50% {
|
||||
opacity: 0.6; }
|
||||
100% {
|
||||
opacity: 0.8; } }
|
||||
|
||||
/*# sourceMappingURL=kerstmis.css.map */
|
||||
7
app/static/css/themes/highPerformance/kerstmis.css.map
Normal file
7
app/static/css/themes/highPerformance/kerstmis.css.map
Normal file
File diff suppressed because one or more lines are too long
658
app/static/css/themes/highPerformance/kerstmis.scss
Normal file
658
app/static/css/themes/highPerformance/kerstmis.scss
Normal file
|
|
@ -0,0 +1,658 @@
|
|||
/*
|
||||
¡¡¡ OPGELET !!!
|
||||
Deze css bevat lelijke code.
|
||||
Dit komt doordat bootstrap lelijk en oud is.
|
||||
Ik zal later proberen de css te verbeteren en bootstrap weg te gooien.
|
||||
Enige discretie is aangeraden.
|
||||
|
||||
---=§[ Arnhoudt ]§=---
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/*high performance kerstmis*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F28705;
|
||||
--dGray1:white;
|
||||
--dGray2:#590212;
|
||||
--dGray3:#590212;
|
||||
--dGray4:#274001;
|
||||
--dGray5:#274001;
|
||||
--dGray6:#F2778D;
|
||||
--dBlue:#F2778D;
|
||||
}
|
||||
body{
|
||||
height: 100%;
|
||||
font-family: Radikal,Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
|
||||
background-color: #2F0000;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url('static/fonts/radikal_regular.ttf');
|
||||
font-weight: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url('static/fonts/radikal_light.ttf');
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url('static/fonts/radikal_medium.ttf');
|
||||
font-weight: medium;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url('static/fonts/radikal_bold.ttf');
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn{
|
||||
border-radius: 5rem;
|
||||
color: white;
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
background-image: linear-gradient(-40deg,#F53030, #F58B9E);
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
background-image: linear-gradient(-40deg, #A81111, #FF4B33);
|
||||
}
|
||||
.navbar {
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
padding: 1.5rem;
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.nav>li>a {
|
||||
padding-left: 1vw;
|
||||
padding-right: 1vw;
|
||||
}
|
||||
|
||||
.main{
|
||||
height: 90vh;
|
||||
overflow: scroll;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navbar .container{
|
||||
width: 100%;
|
||||
padding: 0 4vw;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px){
|
||||
.main .container, .main .orders {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px){
|
||||
.main .container, .main .orders {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main{
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
.order_data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 3rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
.order_row {
|
||||
background: transparent;
|
||||
}
|
||||
.order_data h5{
|
||||
max-width: 60%;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
.expand_button{
|
||||
padding: 1rem 0rem;
|
||||
margin-top: -1rem;
|
||||
width: 70%;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hi_im_haldis h2{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hi_im_haldis h3 {
|
||||
width: 100%;
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hi_im_haldis {
|
||||
background: linear-gradient(70deg,rgba(203, 52, 68,0.8), rgba(135, 32, 44,0.8));
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hi_im_haldis_wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.darker:nth-child(even){
|
||||
background-color: #B62937;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.darker:nth-child(odd){
|
||||
background-color: #821C25;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.darker{
|
||||
padding: 1rem;
|
||||
}
|
||||
.order_row:nth-child(even) .order_data {
|
||||
background-color: #B62937;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.order_row:nth-child(odd) .order_data {
|
||||
background-color: #821C25;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
.order_row h5{
|
||||
font-weight: bold;
|
||||
}
|
||||
.order_row{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h3{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.home_sir {
|
||||
font-weight: bold;
|
||||
color: #F45D68;
|
||||
}
|
||||
|
||||
.expand_button_wrapper{
|
||||
margin-top: -1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.time_data {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: right;
|
||||
}
|
||||
|
||||
.navbar .navbar-nav .active a{
|
||||
color: rgb(255, 155, 174);
|
||||
border-bottom: 1px solid rgb(255, 155, 174);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
|
||||
.row>div>h5 {
|
||||
font-weight: bold;
|
||||
padding-top: 1.5rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.row>div>.amount_of_orders{
|
||||
font-weight: lighter;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.row>div .time{
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.background {
|
||||
-webkit-filter: blur(0px) brightness(80%);
|
||||
-moz-filter: blur(0px) brightness(80%);
|
||||
-o-filter: blur(0px) brightness(80%);
|
||||
-ms-filter: blur(0px) brightness(80%);
|
||||
filter: blur(0px) brightness(80%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
footer a{
|
||||
color: #69E8FF;
|
||||
}
|
||||
|
||||
footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background:#CB3444;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
footer>hr{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mapid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.order_overview, .order_order, .order_items, .order_ordered, .order_depts {
|
||||
padding: 1rem 5rem 3rem 5rem;
|
||||
}
|
||||
|
||||
.order_depts {
|
||||
width: 100%;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.location_data, .location_products {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.location_products {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.locations_locations {
|
||||
padding: 1rem 5rem 3rem 5rem;
|
||||
}
|
||||
|
||||
.background_wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.christmas_background{
|
||||
z-index: -101;
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
background: linear-gradient(-45deg, #2F0000, #C20A12);
|
||||
animation: gradientBG 19s ease infinite;
|
||||
}
|
||||
|
||||
.sled {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
transition: transform 2s ease-in 5s, rotate 1s ease-in-out 2s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/sled.svg");
|
||||
}
|
||||
|
||||
.sled_wrapper{
|
||||
top: 0.5rem;
|
||||
left: -7.5rem;
|
||||
position: absolute;
|
||||
transform: translate(-50vw, 40vh) rotate(0deg);
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
animation: sled 29s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.train_button:checked ~ .sled_wrapper:hover{
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.train_button:checked ~ .sled_wrapper:hover .sled{
|
||||
transform: translateY(100vh) rotate(90deg);
|
||||
}
|
||||
|
||||
.snowman_wrapper{
|
||||
height: 17rem;
|
||||
width: 10rem;
|
||||
position: absolute;
|
||||
bottom: 15rem;
|
||||
left: -12rem;
|
||||
animation: snowman 37s ease infinite;
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
|
||||
|
||||
.snowman_head{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/snowman_head.svg");
|
||||
animation: snowman_head 2s ease infinite;
|
||||
}
|
||||
.snowman_body{
|
||||
position: absolute;
|
||||
top: 9.5rem;
|
||||
left: 0.5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/snowman_body.svg")
|
||||
}
|
||||
|
||||
.train_button:checked ~ .merry_christmas{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;;
|
||||
background-image: url("static/images/themes/kerstmis/merry_christmas.svg");
|
||||
background-size: 25vw;
|
||||
background-repeat: no-repeat;
|
||||
animation: merry_christmas 5s ease infinite;
|
||||
}
|
||||
|
||||
.train_button {
|
||||
position: absolute;
|
||||
transform: scaleX(20) scaleY(8) translateX(-100rem);
|
||||
bottom: 5.5rem;
|
||||
left: 7rem;
|
||||
animation: follow_train 47s linear infinite;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.train_wrapper{
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
transform: translateX(-80vw);
|
||||
animation: train 47s linear infinite;
|
||||
}
|
||||
.wheel_big, .wheel_small {
|
||||
position: absolute;
|
||||
bottom: -0.4rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/wheel.svg");
|
||||
//transform: translate(0vw, 60vh);
|
||||
}
|
||||
.train {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
left: 30rem;
|
||||
width: 30rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/train.svg");
|
||||
animation: whobble 1s linear alternate-reverse infinite;
|
||||
}
|
||||
|
||||
.wheel_big {
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
}
|
||||
|
||||
.wheel_small {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.train .wheel1 {
|
||||
animation: turn 2s linear infinite;
|
||||
left: 3.5rem;
|
||||
}
|
||||
|
||||
.train .wheel2{
|
||||
animation: turn 2s linear infinite, -0.1s;
|
||||
left: 7rem;
|
||||
}
|
||||
|
||||
.train .wheel3{
|
||||
animation: turn 2s linear infinite -0.3s;
|
||||
left: 10.5rem;
|
||||
}
|
||||
|
||||
.train .wheel4{
|
||||
animation: turn 1.5s linear infinite -0.5s;
|
||||
left: 13.9rem;
|
||||
}
|
||||
|
||||
.train .wheel5{
|
||||
animation: turn 1.5s linear infinite -0.7s;
|
||||
left: 16.6rem;
|
||||
}
|
||||
|
||||
.zeus_wagon, .mc_wagon {
|
||||
position: absolute;
|
||||
bottom: 1.25rem;
|
||||
width: 30rem;
|
||||
height: 7.5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
animation: whobble 1s linear alternate-reverse infinite;
|
||||
}
|
||||
|
||||
.mc_wagon {
|
||||
background-image: url("static/images/themes/kerstmis/mc_wagon.svg");
|
||||
left: 0rem;
|
||||
}
|
||||
|
||||
.zeus_wagon {
|
||||
background-image: url("static/images/themes/kerstmis/zeus_wagon.svg");
|
||||
left: 15rem;
|
||||
}
|
||||
|
||||
.zeus_wagon .wheel1, .mc_wagon .wheel1 {
|
||||
animation: turn 2s linear infinite;
|
||||
bottom: -1.1rem;
|
||||
left: 2.2rem;
|
||||
}
|
||||
|
||||
.zeus_wagon .wheel2, .mc_wagon .wheel2{
|
||||
animation: turn 2s linear infinite, -0.1s;
|
||||
bottom: -1.1rem;
|
||||
left: 5.75rem;
|
||||
}
|
||||
|
||||
.zeus_wagon .wheel3, .mc_wagon .wheel3{
|
||||
animation: turn 2s linear infinite -0.3s;
|
||||
bottom: -1.1rem;
|
||||
left: 9.3rem;
|
||||
}
|
||||
|
||||
$s1:"";
|
||||
$s2:"";
|
||||
$s3:"";
|
||||
@for $i from 1 through 100 {
|
||||
$s1: $s1 + random(1000)*0.1vw + " " + random(1000)*0.1vh + " " + 0 + " " + random(50)*-0.01rem + #fff;
|
||||
$s2: $s2 + random(1000)*0.1vw + " " + random(1000)*0.1vh + " " + 0 + " " + random(50)*-0.01rem + #fff;
|
||||
$s3: $s3 + random(1000)*0.1vw + " " + random(1000)*0.1vh + " " + 0 + " " + random(50)*-0.01rem + #fff;
|
||||
@if $i < 100 {
|
||||
$s1: $s1 + ",";
|
||||
$s2: $s2 + ",";
|
||||
$s3: $s3 + ",";
|
||||
}
|
||||
}
|
||||
.snow {
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top:-100vh;
|
||||
animation-name: fall;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.layer1 {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
filter:blur(1.5px);
|
||||
box-shadow: #{$s1};
|
||||
animation-duration: 18s;
|
||||
}
|
||||
.layer1.a {
|
||||
animation-delay: -9s;
|
||||
}
|
||||
.layer2 {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
filter:blur(3px);
|
||||
box-shadow: #{$s2};
|
||||
animation-duration: 24s;
|
||||
}
|
||||
.layer2.a {
|
||||
animation-delay: -12s;
|
||||
}
|
||||
.layer3 {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
filter:blur(6px);
|
||||
box-shadow: #{$s3};
|
||||
animation-duration: 30s;
|
||||
}
|
||||
.layer3.a {
|
||||
animation-delay: -15s;
|
||||
}
|
||||
@keyframes fall {
|
||||
100% {transform: translateY(200vh); }
|
||||
}
|
||||
@keyframes gradientBG {
|
||||
0% {
|
||||
transform: translate(-10%,-10%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-60%,-60%);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-10%,-10%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sled {
|
||||
0% {
|
||||
transform: translate(-50rem, 40vh) rotate(0deg);
|
||||
}
|
||||
4% {
|
||||
transform: translate(-50rem, 40vh) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(50vw,10vh) rotate(20deg);
|
||||
}
|
||||
36% {
|
||||
transform: translate(150vw,40vh) rotate(40deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(150vw,40vh) rotate(40deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes train {
|
||||
0%{
|
||||
transform: translateX(-80rem);
|
||||
}
|
||||
55%{
|
||||
transform: translateX(-80rem);
|
||||
}
|
||||
85% {
|
||||
transform: translateX(100vw);
|
||||
}
|
||||
100%{
|
||||
transform: translateX(100vw);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes follow_train {
|
||||
0%{
|
||||
transform: translateX(-80rem) scaleX(20) scaleY(8);
|
||||
}
|
||||
55%{
|
||||
transform: translateX(-80rem) scaleX(20) scaleY(8);
|
||||
}
|
||||
85%{
|
||||
transform: translateX(100vw) scaleX(20) scaleY(8);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100vw) scaleX(20) scaleY(8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes turn {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes whobble {
|
||||
100% {
|
||||
transform: translateY(0.5vh);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snowman {
|
||||
0%{
|
||||
transform: rotate(-0);
|
||||
}
|
||||
20%{
|
||||
transform: rotate(-0);
|
||||
}
|
||||
30%{
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
54%{
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
68%{
|
||||
transform: rotate(-0);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(-0);
|
||||
}
|
||||
}
|
||||
@keyframes snowman_head {
|
||||
0%{
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes merry_christmas {
|
||||
0%{
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
12
app/static/css/themes/highPerformance/lightmode.css
Normal file
12
app/static/css/themes/highPerformance/lightmode.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/*lightmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#444444;
|
||||
--dGray1:#666666;
|
||||
--dGray2:#212121;
|
||||
--dGray3:#ffffff;
|
||||
--dGray4:#f9f9f9;
|
||||
--dGray5:#ffffff;
|
||||
--dGray6:#ffffff;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
16
app/static/css/themes/highPerformance/sinterklaas.css
Normal file
16
app/static/css/themes/highPerformance/sinterklaas.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
/*sinterklaas*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F2EB80;
|
||||
--dGray1:#F2EF05;
|
||||
--dGray2:#F2EF05;
|
||||
--dGray3:#177EBF;
|
||||
--dGray4:#0C6AA6;
|
||||
--dGray5:#F20505;
|
||||
--dGray6:#F50B00;
|
||||
--dBlue:#35F546;
|
||||
}
|
||||
|
||||
.background{
|
||||
background-image: url("static/images/themes/sinterklaas/Sinterklaas.jpg");
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
12
app/static/css/themes/lowPerformance/darkmode.css
Normal file
12
app/static/css/themes/lowPerformance/darkmode.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/*Darkmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#D0D0D8;
|
||||
--dGray1:#8E8E93;
|
||||
--dGray2:#636366;
|
||||
--dGray3:#48484A;
|
||||
--dGray4:#3A3A3C;
|
||||
--dGray5:#2C2C2E;
|
||||
--dGray6:#1C1C1E;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
4
app/static/css/themes/lowPerformance/dataPrivacy.css
Normal file
4
app/static/css/themes/lowPerformance/dataPrivacy.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.background {
|
||||
background-image: url("https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2");
|
||||
background-size: contain;
|
||||
}
|
||||
16
app/static/css/themes/lowPerformance/halloween.css
Normal file
16
app/static/css/themes/lowPerformance/halloween.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
/*halloween*/
|
||||
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#FFEB65;
|
||||
--dGray1:#F28705;
|
||||
--dGray2:#F25C05;
|
||||
--dGray3:#F27405;
|
||||
--dGray4:#8C3D0F;
|
||||
--dGray5:#260101;
|
||||
--dGray6:#260101;
|
||||
--dBlue:#D91604;
|
||||
}
|
||||
.table-hover tbody tr:hover{
|
||||
background-image: url("static/images/themes/halloween/Halloween.jpeg");
|
||||
}
|
||||
439
app/static/css/themes/lowPerformance/kerstmis.css
Normal file
439
app/static/css/themes/lowPerformance/kerstmis.css
Normal file
|
|
@ -0,0 +1,439 @@
|
|||
@charset "UTF-8";
|
||||
/*
|
||||
¡¡¡ OPGELET !!!
|
||||
Deze css bevat lelijke code.
|
||||
Dit komt doordat bootstrap lelijk en oud is.
|
||||
Ik zal later proberen de css te verbeteren en bootstrap weg te gooien.
|
||||
Enige discretie is aangeraden.
|
||||
|
||||
---=§[ Arnhoudt ]§=---
|
||||
|
||||
*/
|
||||
/*low performance kerstmis*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F28705;
|
||||
--dGray1:white;
|
||||
--dGray2:#590212;
|
||||
--dGray3:#590212;
|
||||
--dGray4:#274001;
|
||||
--dGray5:#274001;
|
||||
--dGray6:#F2778D;
|
||||
--dBlue:#F2778D; }
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: Radikal,Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
|
||||
background-color: #2F0000; }
|
||||
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url("static/fonts/radikal_regular.ttf");
|
||||
font-weight: normal; }
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url("static/fonts/radikal_light.ttf");
|
||||
font-weight: 200; }
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url("static/fonts/radikal_bold.ttf");
|
||||
font-weight: bold; }
|
||||
.btn {
|
||||
border-radius: 5rem;
|
||||
color: white;
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
background-image: linear-gradient(-40deg, #F53030, #F58B9E); }
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(-40deg, #A81111, #FF4B33); }
|
||||
|
||||
.navbar {
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
padding: 1.5rem;
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
text-transform: capitalize; }
|
||||
|
||||
.nav > li > a {
|
||||
padding-left: 1vw;
|
||||
padding-right: 1vw; }
|
||||
|
||||
.main {
|
||||
height: 90vh;
|
||||
overflow: scroll;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column; }
|
||||
|
||||
.navbar .container {
|
||||
width: 100%;
|
||||
padding: 0 4vw; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 100%; } }
|
||||
@media (min-width: 992px) {
|
||||
.main .container, .main .orders {
|
||||
width: 970px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.main .container, .main .orders {
|
||||
width: 1170px; } }
|
||||
.main {
|
||||
padding-top: 2.5rem; }
|
||||
|
||||
.order_data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 3rem;
|
||||
align-items: baseline; }
|
||||
|
||||
.order_data h5 {
|
||||
max-width: 60%;
|
||||
padding-bottom: 3rem; }
|
||||
|
||||
.expand_button {
|
||||
padding: 1rem 0rem;
|
||||
margin-top: -1rem;
|
||||
width: 70%;
|
||||
margin-bottom: 1.5rem; }
|
||||
|
||||
.hi_im_haldis h2 {
|
||||
display: none; }
|
||||
|
||||
.hi_im_haldis h3 {
|
||||
width: 100%;
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
text-align: center; }
|
||||
|
||||
.hi_im_haldis {
|
||||
background: linear-gradient(70deg, rgba(203, 52, 68, 0.8), rgba(135, 32, 44, 0.8));
|
||||
border-radius: 0;
|
||||
width: 100%; }
|
||||
|
||||
.hi_im_haldis_wrapper {
|
||||
width: 100%; }
|
||||
|
||||
.darker:nth-child(even) {
|
||||
background-color: #B62937;
|
||||
border-radius: 2rem; }
|
||||
|
||||
.darker:nth-child(odd) {
|
||||
background-color: #821C25;
|
||||
border-radius: 2rem; }
|
||||
|
||||
.darker {
|
||||
padding: 1rem; }
|
||||
|
||||
.order_row:nth-child(even) .order_data {
|
||||
background-color: #B62937;
|
||||
border-radius: 2rem; }
|
||||
|
||||
.order_row {
|
||||
background: transparent; }
|
||||
|
||||
.order_row:nth-child(odd) .order_data {
|
||||
background-color: #821C25;
|
||||
border-radius: 2rem; }
|
||||
|
||||
.order_row h5 {
|
||||
font-weight: bold; }
|
||||
|
||||
.order_row {
|
||||
margin-bottom: 3rem; }
|
||||
|
||||
h3 {
|
||||
padding-bottom: 1rem; }
|
||||
|
||||
.home_sir {
|
||||
font-weight: bold;
|
||||
color: #F45D68; }
|
||||
|
||||
.expand_button_wrapper {
|
||||
margin-top: -1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center; }
|
||||
|
||||
.time_data {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: right; }
|
||||
|
||||
.navbar .navbar-nav .active a {
|
||||
color: #ff9bae;
|
||||
border-bottom: 1px solid #ff9bae;
|
||||
padding-bottom: 1rem; }
|
||||
|
||||
.navbar-nav {
|
||||
padding-left: 2rem; }
|
||||
|
||||
.jumbotron, .darker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4rem; }
|
||||
|
||||
.row > div > h5 {
|
||||
font-weight: bold;
|
||||
padding-top: 1.5rem;
|
||||
font-size: 2.5rem; }
|
||||
|
||||
.row > div > .amount_of_orders {
|
||||
font-weight: lighter;
|
||||
font-size: 1.6rem; }
|
||||
|
||||
.row > div .time {
|
||||
font-weight: lighter; }
|
||||
|
||||
.jumbotron {
|
||||
background-color: transparent; }
|
||||
|
||||
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover {
|
||||
background-color: transparent; }
|
||||
|
||||
.background {
|
||||
-webkit-filter: blur(0px) brightness(80%);
|
||||
-moz-filter: blur(0px) brightness(80%);
|
||||
-o-filter: blur(0px) brightness(80%);
|
||||
-ms-filter: blur(0px) brightness(80%);
|
||||
filter: blur(0px) brightness(80%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
footer a {
|
||||
color: #69E8FF; }
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #CB3444;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
|
||||
footer > hr {
|
||||
display: none; }
|
||||
|
||||
#mapid {
|
||||
width: 100%; }
|
||||
|
||||
.order_overview, .order_order, .order_items, .order_ordered, .order_depts {
|
||||
padding: 1rem 5rem 3rem 5rem; }
|
||||
|
||||
.order_depts {
|
||||
width: 100%;
|
||||
margin-bottom: 10rem; }
|
||||
|
||||
.location_data, .location_products {
|
||||
width: 100%; }
|
||||
|
||||
.location_products {
|
||||
margin-bottom: 10rem; }
|
||||
|
||||
.locations_locations {
|
||||
padding: 1rem 5rem 3rem 5rem; }
|
||||
|
||||
.background_wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
|
||||
.christmas_background {
|
||||
z-index: -101;
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
background: linear-gradient(-45deg, #2F0000, #C20A12); }
|
||||
|
||||
.sled {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
transition: transform 2s ease-in 5s, rotate 1s ease-in-out 2s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/sled.svg"); }
|
||||
|
||||
.sled_wrapper {
|
||||
top: 0.5rem;
|
||||
left: -7.5rem;
|
||||
position: absolute;
|
||||
transform: translate(-50vw, 40vh) rotate(0deg);
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
animation: sled 29s ease-in-out infinite; }
|
||||
|
||||
.snowman_wrapper {
|
||||
height: 17rem;
|
||||
width: 10rem;
|
||||
position: absolute;
|
||||
bottom: 15rem;
|
||||
left: -12rem;
|
||||
animation: snowman 37s ease infinite;
|
||||
transform-origin: right bottom; }
|
||||
|
||||
.snowman_head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/snowman_head.svg");
|
||||
animation: snowman_head 2s ease infinite; }
|
||||
|
||||
.snowman_body {
|
||||
position: absolute;
|
||||
top: 9.5rem;
|
||||
left: 0.5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/snowman_body.svg"); }
|
||||
|
||||
.train_button {
|
||||
visibility: hidden; }
|
||||
|
||||
.train_wrapper {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
transform: translateX(-80vw);
|
||||
animation: train 47s linear infinite; }
|
||||
|
||||
.wheel_big, .wheel_small {
|
||||
position: absolute;
|
||||
bottom: -0.4rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/wheel.svg"); }
|
||||
|
||||
.train {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
left: 30rem;
|
||||
width: 30rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/train.svg");
|
||||
animation: whobble 1s linear alternate-reverse infinite; }
|
||||
|
||||
.wheel_big {
|
||||
width: 3.2rem;
|
||||
height: 3.2rem; }
|
||||
|
||||
.wheel_small {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem; }
|
||||
|
||||
.train .wheel1 {
|
||||
animation: turn 2s linear infinite;
|
||||
left: 3.5rem; }
|
||||
|
||||
.train .wheel2 {
|
||||
animation: turn 2s linear infinite, -0.1s;
|
||||
left: 7rem; }
|
||||
|
||||
.train .wheel3 {
|
||||
animation: turn 2s linear infinite -0.3s;
|
||||
left: 10.5rem; }
|
||||
|
||||
.train .wheel4 {
|
||||
animation: turn 1.5s linear infinite -0.5s;
|
||||
left: 13.9rem; }
|
||||
|
||||
.train .wheel5 {
|
||||
animation: turn 1.5s linear infinite -0.7s;
|
||||
left: 16.6rem; }
|
||||
|
||||
.zeus_wagon, .mc_wagon {
|
||||
position: absolute;
|
||||
bottom: 1.25rem;
|
||||
width: 30rem;
|
||||
height: 7.5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
animation: whobble 1s linear alternate-reverse infinite; }
|
||||
|
||||
.mc_wagon {
|
||||
background-image: url("static/images/themes/kerstmis/mc_wagon.svg");
|
||||
left: 0rem; }
|
||||
|
||||
.zeus_wagon {
|
||||
background-image: url("static/images/themes/kerstmis/zeus_wagon.svg");
|
||||
left: 15rem; }
|
||||
|
||||
.zeus_wagon .wheel1, .mc_wagon .wheel1 {
|
||||
animation: turn 2s linear infinite;
|
||||
bottom: -1.1rem;
|
||||
left: 2.2rem; }
|
||||
|
||||
.zeus_wagon .wheel2, .mc_wagon .wheel2 {
|
||||
animation: turn 2s linear infinite, -0.1s;
|
||||
bottom: -1.1rem;
|
||||
left: 5.75rem; }
|
||||
|
||||
.zeus_wagon .wheel3, .mc_wagon .wheel3 {
|
||||
animation: turn 2s linear infinite -0.3s;
|
||||
bottom: -1.1rem;
|
||||
left: 9.3rem; }
|
||||
|
||||
@keyframes sled {
|
||||
0% {
|
||||
transform: translate(-50rem, 40vh) rotate(0deg); }
|
||||
4% {
|
||||
transform: translate(-50rem, 40vh) rotate(0deg); }
|
||||
20% {
|
||||
transform: translate(50vw, 10vh) rotate(20deg); }
|
||||
36% {
|
||||
transform: translate(150vw, 40vh) rotate(40deg); }
|
||||
100% {
|
||||
transform: translate(150vw, 40vh) rotate(40deg); } }
|
||||
@keyframes train {
|
||||
0% {
|
||||
transform: translateX(-80rem); }
|
||||
55% {
|
||||
transform: translateX(-80rem); }
|
||||
85% {
|
||||
transform: translateX(100vw); }
|
||||
100% {
|
||||
transform: translateX(100vw); } }
|
||||
@keyframes turn {
|
||||
100% {
|
||||
transform: rotate(360deg); } }
|
||||
@keyframes whobble {
|
||||
100% {
|
||||
transform: translateY(0.5vh); } }
|
||||
@keyframes snowman {
|
||||
0% {
|
||||
transform: rotate(0); }
|
||||
20% {
|
||||
transform: rotate(0); }
|
||||
30% {
|
||||
transform: rotate(80deg); }
|
||||
54% {
|
||||
transform: rotate(80deg); }
|
||||
68% {
|
||||
transform: rotate(0); }
|
||||
100% {
|
||||
transform: rotate(0); } }
|
||||
@keyframes snowman_head {
|
||||
0% {
|
||||
transform: rotate(-3deg); }
|
||||
50% {
|
||||
transform: rotate(3deg); }
|
||||
100% {
|
||||
transform: rotate(-3deg); } }
|
||||
|
||||
/*# sourceMappingURL=kerstmis.css.map */
|
||||
7
app/static/css/themes/lowPerformance/kerstmis.css.map
Normal file
7
app/static/css/themes/lowPerformance/kerstmis.css.map
Normal file
File diff suppressed because one or more lines are too long
534
app/static/css/themes/lowPerformance/kerstmis.scss
Normal file
534
app/static/css/themes/lowPerformance/kerstmis.scss
Normal file
|
|
@ -0,0 +1,534 @@
|
|||
/*
|
||||
¡¡¡ OPGELET !!!
|
||||
Deze css bevat lelijke code.
|
||||
Dit komt doordat bootstrap lelijk en oud is.
|
||||
Ik zal later proberen de css te verbeteren en bootstrap weg te gooien.
|
||||
Enige discretie is aangeraden.
|
||||
|
||||
---=§[ Arnhoudt ]§=---
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/*low performance kerstmis*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F28705;
|
||||
--dGray1:white;
|
||||
--dGray2:#590212;
|
||||
--dGray3:#590212;
|
||||
--dGray4:#274001;
|
||||
--dGray5:#274001;
|
||||
--dGray6:#F2778D;
|
||||
--dBlue:#F2778D;
|
||||
}
|
||||
body{
|
||||
height: 100%;
|
||||
font-family: Radikal,Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
|
||||
background-color: #2F0000;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url('static/fonts/radikal_regular.ttf');
|
||||
font-weight: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url('static/fonts/radikal_light.ttf');
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Radikal;
|
||||
src: url('static/fonts/radikal_bold.ttf');
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn{
|
||||
border-radius: 5rem;
|
||||
color: white;
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
background-image: linear-gradient(-40deg,#F53030, #F58B9E);
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
background-image: linear-gradient(-40deg, #A81111, #FF4B33);
|
||||
}
|
||||
.navbar {
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
padding: 1.5rem;
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.nav>li>a {
|
||||
padding-left: 1vw;
|
||||
padding-right: 1vw;
|
||||
}
|
||||
|
||||
.main{
|
||||
height: 90vh;
|
||||
overflow: scroll;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navbar .container{
|
||||
width: 100%;
|
||||
padding: 0 4vw;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px){
|
||||
.main .container, .main .orders {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px){
|
||||
.main .container, .main .orders {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main{
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
.order_data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 3rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
.order_data h5{
|
||||
max-width: 60%;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
.expand_button{
|
||||
padding: 1rem 0rem;
|
||||
margin-top: -1rem;
|
||||
width: 70%;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hi_im_haldis h2{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hi_im_haldis h3 {
|
||||
width: 100%;
|
||||
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hi_im_haldis {
|
||||
background: linear-gradient(70deg,rgba(203, 52, 68,0.8), rgba(135, 32, 44,0.8));
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hi_im_haldis_wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.darker:nth-child(even){
|
||||
background-color: #B62937;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.darker:nth-child(odd){
|
||||
background-color: #821C25;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.darker{
|
||||
padding: 1rem;
|
||||
}
|
||||
.order_row:nth-child(even) .order_data {
|
||||
background-color: #B62937;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
.order_row {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.order_row:nth-child(odd) .order_data {
|
||||
background-color: #821C25;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
.order_row h5{
|
||||
font-weight: bold;
|
||||
}
|
||||
.order_row{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h3{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.home_sir {
|
||||
font-weight: bold;
|
||||
color: #F45D68;
|
||||
}
|
||||
|
||||
.expand_button_wrapper{
|
||||
margin-top: -1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.time_data {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: right;
|
||||
}
|
||||
|
||||
.navbar .navbar-nav .active a{
|
||||
color: rgb(255, 155, 174);
|
||||
border-bottom: 1px solid rgb(255, 155, 174);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
|
||||
.row>div>h5 {
|
||||
font-weight: bold;
|
||||
padding-top: 1.5rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.row>div>.amount_of_orders{
|
||||
font-weight: lighter;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.row>div .time{
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.background {
|
||||
-webkit-filter: blur(0px) brightness(80%);
|
||||
-moz-filter: blur(0px) brightness(80%);
|
||||
-o-filter: blur(0px) brightness(80%);
|
||||
-ms-filter: blur(0px) brightness(80%);
|
||||
filter: blur(0px) brightness(80%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
footer a{
|
||||
color: #69E8FF;
|
||||
}
|
||||
|
||||
footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background:#CB3444;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
footer>hr{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mapid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.order_overview, .order_order, .order_items, .order_ordered, .order_depts {
|
||||
padding: 1rem 5rem 3rem 5rem;
|
||||
}
|
||||
|
||||
.order_depts {
|
||||
width: 100%;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.location_data, .location_products {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.location_products {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.locations_locations {
|
||||
padding: 1rem 5rem 3rem 5rem;
|
||||
}
|
||||
|
||||
.background_wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.christmas_background{
|
||||
z-index: -101;
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
background: linear-gradient(-45deg, #2F0000, #C20A12);
|
||||
}
|
||||
|
||||
.sled {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
transition: transform 2s ease-in 5s, rotate 1s ease-in-out 2s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/sled.svg");
|
||||
}
|
||||
|
||||
.sled_wrapper{
|
||||
top: 0.5rem;
|
||||
left: -7.5rem;
|
||||
position: absolute;
|
||||
transform: translate(-50vw, 40vh) rotate(0deg);
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
animation: sled 29s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.snowman_wrapper{
|
||||
height: 17rem;
|
||||
width: 10rem;
|
||||
position: absolute;
|
||||
bottom: 15rem;
|
||||
left: -12rem;
|
||||
animation: snowman 37s ease infinite;
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
|
||||
.snowman_head{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/snowman_head.svg");
|
||||
animation: snowman_head 2s ease infinite;
|
||||
}
|
||||
.snowman_body{
|
||||
position: absolute;
|
||||
top: 9.5rem;
|
||||
left: 0.5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/snowman_body.svg")
|
||||
}
|
||||
|
||||
.train_button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.train_wrapper{
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
transform: translateX(-80vw);
|
||||
animation: train 47s linear infinite;
|
||||
}
|
||||
.wheel_big, .wheel_small {
|
||||
position: absolute;
|
||||
bottom: -0.4rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/wheel.svg");
|
||||
//transform: translate(0vw, 60vh);
|
||||
}
|
||||
.train {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
left: 30rem;
|
||||
width: 30rem;
|
||||
height: 10rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("static/images/themes/kerstmis/train.svg");
|
||||
animation: whobble 1s linear alternate-reverse infinite;
|
||||
}
|
||||
|
||||
.wheel_big {
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
}
|
||||
|
||||
.wheel_small {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.train .wheel1 {
|
||||
animation: turn 2s linear infinite;
|
||||
left: 3.5rem;
|
||||
}
|
||||
|
||||
.train .wheel2{
|
||||
animation: turn 2s linear infinite, -0.1s;
|
||||
left: 7rem;
|
||||
}
|
||||
|
||||
.train .wheel3{
|
||||
animation: turn 2s linear infinite -0.3s;
|
||||
left: 10.5rem;
|
||||
}
|
||||
|
||||
.train .wheel4{
|
||||
animation: turn 1.5s linear infinite -0.5s;
|
||||
left: 13.9rem;
|
||||
}
|
||||
|
||||
.train .wheel5{
|
||||
animation: turn 1.5s linear infinite -0.7s;
|
||||
left: 16.6rem;
|
||||
}
|
||||
|
||||
.zeus_wagon, .mc_wagon {
|
||||
position: absolute;
|
||||
bottom: 1.25rem;
|
||||
width: 30rem;
|
||||
height: 7.5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
animation: whobble 1s linear alternate-reverse infinite;
|
||||
}
|
||||
|
||||
.mc_wagon {
|
||||
background-image: url("static/images/themes/kerstmis/mc_wagon.svg");
|
||||
left: 0rem;
|
||||
}
|
||||
|
||||
.zeus_wagon {
|
||||
background-image: url("static/images/themes/kerstmis/zeus_wagon.svg");
|
||||
left: 15rem;
|
||||
}
|
||||
|
||||
.zeus_wagon .wheel1, .mc_wagon .wheel1 {
|
||||
animation: turn 2s linear infinite;
|
||||
bottom: -1.1rem;
|
||||
left: 2.2rem;
|
||||
}
|
||||
|
||||
.zeus_wagon .wheel2, .mc_wagon .wheel2{
|
||||
animation: turn 2s linear infinite, -0.1s;
|
||||
bottom: -1.1rem;
|
||||
left: 5.75rem;
|
||||
}
|
||||
|
||||
.zeus_wagon .wheel3, .mc_wagon .wheel3{
|
||||
animation: turn 2s linear infinite -0.3s;
|
||||
bottom: -1.1rem;
|
||||
left: 9.3rem;
|
||||
}
|
||||
|
||||
@keyframes sled {
|
||||
0% {
|
||||
transform: translate(-50rem, 40vh) rotate(0deg);
|
||||
}
|
||||
4% {
|
||||
transform: translate(-50rem, 40vh) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(50vw,10vh) rotate(20deg);
|
||||
}
|
||||
36% {
|
||||
transform: translate(150vw,40vh) rotate(40deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(150vw,40vh) rotate(40deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes train {
|
||||
0%{
|
||||
transform: translateX(-80rem);
|
||||
}
|
||||
55%{
|
||||
transform: translateX(-80rem);
|
||||
}
|
||||
85% {
|
||||
transform: translateX(100vw);
|
||||
}
|
||||
100%{
|
||||
transform: translateX(100vw);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes turn {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes whobble {
|
||||
100% {
|
||||
transform: translateY(0.5vh);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snowman {
|
||||
0%{
|
||||
transform: rotate(-0);
|
||||
}
|
||||
20%{
|
||||
transform: rotate(-0);
|
||||
}
|
||||
30%{
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
54%{
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
68%{
|
||||
transform: rotate(-0);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(-0);
|
||||
}
|
||||
}
|
||||
@keyframes snowman_head {
|
||||
0%{
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
}
|
||||
12
app/static/css/themes/lowPerformance/lightmode.css
Normal file
12
app/static/css/themes/lowPerformance/lightmode.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/*lightmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#444444;
|
||||
--dGray1:#666666;
|
||||
--dGray2:#212121;
|
||||
--dGray3:#ffffff;
|
||||
--dGray4:#f9f9f9;
|
||||
--dGray5:#ffffff;
|
||||
--dGray6:#ffffff;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
16
app/static/css/themes/lowPerformance/sinterklaas.css
Normal file
16
app/static/css/themes/lowPerformance/sinterklaas.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
/*sinterklaas*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F2EB80;
|
||||
--dGray1:#F2EF05;
|
||||
--dGray2:#F2EF05;
|
||||
--dGray3:#177EBF;
|
||||
--dGray4:#0C6AA6;
|
||||
--dGray5:#F20505;
|
||||
--dGray6:#F50B00;
|
||||
--dBlue:#35F546;
|
||||
}
|
||||
|
||||
.background{
|
||||
background-image: url("static/images/themes/sinterklaas/Sinterklaas.jpg");
|
||||
}
|
||||
BIN
app/static/fonts/radikal_bold.ttf
Normal file
BIN
app/static/fonts/radikal_bold.ttf
Normal file
Binary file not shown.
BIN
app/static/fonts/radikal_light.ttf
Normal file
BIN
app/static/fonts/radikal_light.ttf
Normal file
Binary file not shown.
BIN
app/static/fonts/radikal_medium.ttf
Normal file
BIN
app/static/fonts/radikal_medium.ttf
Normal file
Binary file not shown.
BIN
app/static/fonts/radikal_regular.ttf
Normal file
BIN
app/static/fonts/radikal_regular.ttf
Normal file
Binary file not shown.
BIN
app/static/fonts/radikal_thin.ttf
Normal file
BIN
app/static/fonts/radikal_thin.ttf
Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 993 KiB After Width: | Height: | Size: 993 KiB |
1
app/static/images/themes/kerstmis/mc_wagon.svg
Normal file
1
app/static/images/themes/kerstmis/mc_wagon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
1
app/static/images/themes/kerstmis/merry_christmas.svg
Normal file
1
app/static/images/themes/kerstmis/merry_christmas.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
1
app/static/images/themes/kerstmis/sled.svg
Normal file
1
app/static/images/themes/kerstmis/sled.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
1
app/static/images/themes/kerstmis/snowman_body.svg
Normal file
1
app/static/images/themes/kerstmis/snowman_body.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 578.64 581.47"><defs><style>.cls-1{fill:#fff;}</style></defs><title>snowman_body</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M276.6,533.73c-33.55-3.29-64.43-11.45-93.73-25.32Q103.48,470.8,59.6,394.66C40.92,362.13,30,327,26,289.79a173.71,173.71,0,0,1-1.35-22.93c.09-3.45,1.33-4.21,4.23-2.42,12.28,7.57,23.83,16,31.78,28.38,4.88,7.62,6.69,15.8,4.38,24.82-1.19,4.62-2.91,10.17,2.1,13.27s9.63-.51,13.57-3.57c14.39-11.16,25.46-25.39,35.8-40.14,17.38-24.82,32.18-51,40.24-80.51.83-3.05,1.39-6.17,2.09-9.25,1-4.46,1.83-4.71,5.45-1.69a63.52,63.52,0,0,1,19.48,70.62c-.85,2.41-3.51,5.48-1.73,7.23s4.82-1,7.27-1.75c14.64-4.78,29.5-8.34,45-8.05,12.83.24,24.13,3.31,30.05,16.42,1.25,2.76,3.5,5,7.1,4.48,3.34-.46,4.56-3,5.55-5.76a50.56,50.56,0,0,0,2.61-14.7c1.09-22.76-.7-45.28-6.36-67.4-1.05-4.1-.76-5.52,4.15-5.32,45.53,1.89,90.91.95,135.69-8.78,29.52-6.41,57.78-16.05,83-33.27,13.47-9.22,25.46-20,33.55-34.4,2.18-3.88,3.35-3.52,5.56-.13,16.7,25.67,29.17,53.28,35.8,83.13,20.63,92.88-.29,175.54-63.87,246.4C462.94,493.68,407,521.93,341.74,532c-4.43.69-8.91,1-13.37,1.73M352.9,313.11a26.85,26.85,0,0,0-1.72-2.12c-10.34-10.63-20.75-21.19-31-31.9-2.15-2.25-3.49-2.11-5.63,0-10.28,10.21-20.6,20.4-31.14,30.33-2.91,2.74-2.39,4.25.11,6.75,9.53,9.54,18.79,19.37,28.35,28.89,2.75,2.73,2.91,4.37,0,7.18C299.59,364,287.66,376.15,275.43,388c-2.85,2.75-2.78,4.42,0,7.19,12.13,12.13,23.95,24.58,36.1,36.69,3.22,3.22,3.89,5.2.13,8.7C301.54,450,292,460,282,469.53c-2.69,2.58-2.73,4.22-.08,6.87q15,15,29.63,30.42c2.54,2.67,4.16,2.8,6.83.1q14.92-15.1,30.32-29.75c2.77-2.62,2.84-4.13.2-6.77-10-10-19.72-20.32-29.76-30.3-2.83-2.81-2.77-4.51.07-7.23,12.74-12.22,25.21-24.74,38-36.91,3-2.82,2.68-4.36,0-7.07-11.88-11.91-23.44-24.15-35.38-36-3.38-3.36-3-5.34.26-8.4,9.7-9.14,19.12-18.57,28.63-27.9C351.61,315.68,352.8,314.91,352.9,313.11Zm180.21,268-.06.35.32-.15Z"/><path class="cls-1" d="M145.76,0c20.38.69,36.93,8.71,52.05,20.33a161.06,161.06,0,0,1,19.25,18.14c1.45,1.55,2.91,3.39-.39,4.43-15.79,5-24.4,17.3-31.5,31-9.72,18.79-15.12,39.07-20,59.52-4.37,18.47-8,37.1-11.1,55.82-3.37,20.1-10.42,38.87-20,56.76-14,26.15-30.57,50.39-51.66,71.38a44.18,44.18,0,0,1-8.52,6.9c-.82.5-1.7,1.32-2.74.78-1.36-.72-.79-2.07-.64-3.14.63-4.6,2-9.1,1.63-13.84-1-15-9.72-25.5-20.28-34.86-14.26-12.64-31-21.17-48.25-28.9-1.32-.59-3.35-.66-3.63-2.26-.35-2,1.87-2.51,3.14-3.39,22-15.19,33.71-36.1,35.71-62.8,1.25-16.6,1.16-33.25,2.57-49.85,2.89-34,16.5-63.12,38.45-88.76C91.52,23.7,104.63,12.08,121.37,5.13A73.07,73.07,0,0,1,145.76,0Z"/><path class="cls-1" d="M314,170c-14.85-.77-31.18-.69-47.41-2.68-2.09-.26-3.89-.68-5-2.69-13.61-24.63-28.2-48.79-37-75.75-2.48-7.61-4.29-15.4-4-23.53a27.43,27.43,0,0,1,2.58-11.11c3.21-6.63,7.18-8.09,13.75-4.8,16.51,8.26,33.81,14.2,52.11,16.7,52.73,7.23,99.75-5.86,140.4-40.49,11.29-9.62,11-9.79,23.27-1.49a257.43,257.43,0,0,1,65.13,63.5c3.28,4.55,3.33,7.89,0,12.35-11.59,15.57-26.55,27-43.28,36.38-28.48,15.92-59.48,23.95-91.44,28.84C360.74,168.67,338.11,169.45,314,170Z"/><path class="cls-1" d="M217.37,50C209.48,74,219.05,94.31,228,114.58a381.92,381.92,0,0,0,23.17,44.23c12.55,20.72,18.19,43.48,21,67.16,1.63,13.89,2.6,27.84,1,41.83-.33,2.91.2,7.21-2.47,8.1s-3.08-3.58-4.58-5.58c-7.62-10.1-18.6-12.37-30.14-12.9-13.27-.61-26.15,2.12-38.91,5.49-5.73,1.52-5.77,1.48-4.56-4.19,3.76-17.65,1.1-34.11-9.28-49.06-5.4-7.79-10.52-15.82-18.12-21.81-2.15-1.68-3.76-3.69-3.17-6.82,5.89-30.92,11.47-61.92,23-91.4,4.74-12.15,10.5-23.81,20.43-32.79C208.57,53.85,212,51.05,217.37,50Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
1
app/static/images/themes/kerstmis/snowman_head.svg
Normal file
1
app/static/images/themes/kerstmis/snowman_head.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 474.09 518.52"><defs><style>.cls-1{fill:#fff;}</style></defs><title>snowman_head</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M169.27,0c9.59,19.05,19.57,37.86,31.47,55.63,22.86,34.1,51.08,63.1,83.3,88.36,2.95,2.31,5.55,2.84,9.12,1.5,8.59-3.22,17.34-6.09,26.74-4.83,8.65,1.15,12.68,6.89,11.14,15.58-1.77,9.9-6.57,18.48-12,26.71-16.11,24.37-36.42,45.05-57.92,64.56-25.23,22.88-52.15,43.61-81.5,61-17.37,10.28-35.06,20-55.15,24.07a37.56,37.56,0,0,1-6.94.71c-13.51.21-18.73-6.71-15-19.87,2.67-9.43,7.54-17.8,13.23-25.63,2.61-3.58,2.83-6.27.82-10.29C89.75,223.7,52,179.14,4,143.08c-5.15-3.88-5.18-3.94-1-9A530.69,530.69,0,0,1,157.81,5.58C161,3.81,164.12,1.86,167.27,0Z"/><path class="cls-1" d="M141.2,352c0-4.66-.08-9.33,0-14,.06-2.41.73-4.45,3.41-5.51,35.76-14.09,66.81-35.85,96.54-59.67,27.25-21.82,52.51-45.7,73.9-73.43,2.55-3.3,4.94-6.72,7.19-10.21,1.64-2.55,3.5-3.41,6.64-3,75.22,10.14,133.9,68.65,143.73,143.45,12,91.32-52.1,175.3-143,187.38S154.47,465,142.22,374.46A107.1,107.1,0,0,1,141.2,352Zm278,13.86a13.37,13.37,0,0,0-2-1.15c-31.27-9.34-62.57-18.61-93.82-28-4.36-1.32-6.9.42-9.23,3.75-7.76,11.09-8.11,32.92-.77,44.39,2.38,3.73,5,4.87,9.55,3.77,23.29-5.7,46.66-11.06,70-16.54ZM315.63,462.46a7.05,7.05,0,0,0,1.61-.74,119.77,119.77,0,0,0,15.49-14.11c1.74-1.91.28-2.94-1.13-4-4.87-3.5-9.73-7-13.89-11.38-1.89-2-3.33-1.5-5,.22-4,4.08-8.61,7.33-13.11,10.76-2.52,1.92-4.42,1.7-6.32-.79-2.53-3.3-5.29-6.43-7.75-9.78-1.44-2-2.79-2.46-5-1.24-3.94,2.16-8,4.17-12,6.1-2.31,1.1-3,2.42-1.38,4.63,2.76,3.75,5.57,7.47,8.19,11.32,1.82,2.67,3.77,2.7,6.31,1.12,3.82-2.38,7.81-4.47,11.57-6.93,2.27-1.49,3.7-1.12,5.56.76,4.11,4.12,8.49,8,12.79,11.9A6.34,6.34,0,0,0,315.63,462.46ZM295.18,293.59c.06-10.32-7.65-18.23-17.81-18.26A17.7,17.7,0,0,0,259.45,293c-.09,10.39,7.44,18.36,17.59,18.6A17.79,17.79,0,0,0,295.18,293.59Zm56.54-18.27a18.15,18.15,0,1,0,18.18,18.09A18.42,18.42,0,0,0,351.72,275.32Zm49.53,156.41c1.79.46,3.22-.81,3.88-3,.91-2.92,3.89-6.13,1.94-8.75-2.09-2.82-6.48-1.85-9.85-2.45-2.63-.47-2.9,2.25-3.63,4-3.48,8.24-3.46,8.25-11.82,5.59a9.71,9.71,0,0,1-1.4-.5c-3.46-1.72-5.61-.85-7.53,2.69-5.51,10.13-5.62,9.92,5.51,13.33,3.6,1.1,5.77.44,7-3.1,2.45-7.26,6.22-12,14.77-8A5.27,5.27,0,0,0,401.25,431.73Zm-51.88-1.22a2.65,2.65,0,0,0-2.5,1.34c-3.25,4-6.47,8-9.76,12-1.51,1.83-.24,2.69,1.11,3.48,4.31,2.51,8.65,5,13,7.46,1.83,1.05,3.46,1.06,4.81-.8,2.92-4.05,5.88-8.08,8.76-12.15.75-1.07,1.78-2.59.16-3.47C359.82,435.62,354.57,433.11,349.37,430.51Zm-94.14-4.6c-4,1.71-10.14,1.12-11.9,4.94s2.65,7.69,4.7,11.39c.85,1.54,2.35,1.52,3.93,1.23,11.19-2,12.24-4,7.06-13.65-.47-.88-.89-1.78-1.4-2.63S256.36,425.43,255.23,425.91Zm-24.66,5.78c2.57-1.74,7.72.83,9.24-3.68,1-3-4.61-11.18-6.36-10.4-3.31,1.46-8.91-1.57-9.9,3.87C222.74,426,227.1,431.72,230.57,431.69Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
1
app/static/images/themes/kerstmis/train.svg
Normal file
1
app/static/images/themes/kerstmis/train.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 221"><defs><style>.cls-1{fill:#fff;}</style></defs><title>train</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M18,25h89a0,0,0,0,1,0,0V43a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0v0A18,18,0,0,1,18,25Z"/><rect class="cls-1" x="107" y="35" width="13" height="4"/><rect class="cls-1" x="117" y="35" width="4" height="17"/><rect class="cls-1" x="114" y="51" width="10" height="29"/><polygon class="cls-1" points="57 51 57 65.04 71.23 51 57 51"/><polygon class="cls-1" points="87 90 87 66.14 64.76 90 87 90"/><polygon class="cls-1" points="87 51 76.99 51 57 71.94 57 84.99 87 54.93 87 51"/><path class="cls-1" d="M11,43V98H25V47H47V98h55V43ZM91,94H53V48H91Z"/><rect class="cls-1" x="147" y="11" width="3" height="12"/><rect class="cls-1" x="145" y="22" width="5" height="58"/><rect class="cls-1" x="265" width="38" height="80"/><rect class="cls-1" x="262" width="44" height="5"/><rect class="cls-1" x="262" y="16" width="44" height="4"/><rect class="cls-1" x="303" y="50" width="3" height="10"/><rect class="cls-1" x="306" y="53" width="38" height="4"/><rect class="cls-1" x="340" y="56" width="3" height="24"/><rect class="cls-1" x="362" y="80" width="8" height="66"/><polygon class="cls-1" points="405 113.35 375 80.7 375 146 405 113.35"/><rect class="cls-1" x="47" y="145" width="97" height="7"/><path class="cls-1" d="M102,80V98h43v9H47v13h98v6H47v9h98v5h10V113H144v-5h91v2a9,9,0,0,1,9-9v45h-9v7H356V80Zm99,14V88H165V98H151V94h10V84h44v7h53v7h-3V94Zm58,52H249V101h10Zm15,0H264V101h10Zm15,0H279V101h10Zm15,0H294V101h10Zm15,0H309V101h10Zm15,0h-9V101a9,9,0,0,1,9,9Z"/><rect class="cls-1" x="177" y="112" width="12" height="27"/><rect class="cls-1" x="160" y="112" width="12" height="27"/><rect class="cls-1" x="194" y="112" width="12" height="27"/><rect class="cls-1" x="228" y="112" width="7" height="27"/><rect class="cls-1" x="211" y="112" width="12" height="27"/><rect class="cls-1" x="144" y="139" width="1" height="6"/><path class="cls-1" d="M11,105H25a0,0,0,0,1,0,0v63.8a4.2,4.2,0,0,1-4.2,4.2H15.2a4.2,4.2,0,0,1-4.2-4.2V105a0,0,0,0,1,0,0Z"/><rect class="cls-1" x="25" y="145" width="72" height="12"/><rect class="cls-1" x="59" y="157" width="4" height="64"/><rect class="cls-1" x="33" y="157" width="4" height="64"/><rect class="cls-1" x="37" y="157" width="22" height="54"/><rect class="cls-1" x="306" y="153" width="50" height="4"/><rect class="cls-1" x="344" y="153" width="61" height="20"/><path class="cls-1" d="M387,173h43a3,3,0,0,1,3,3v0a3,3,0,0,1-3,3H387a0,0,0,0,1,0,0v-6a0,0,0,0,1,0,0Z"/><path class="cls-1" d="M386,214h76a3,3,0,0,1,3,3v0a3,3,0,0,1-3,3H386a0,0,0,0,1,0,0v-6A0,0,0,0,1,386,214Z"/><rect class="cls-1" x="387" y="179" width="6" height="35"/><polygon class="cls-1" points="406 214 402 214 398 179 402 179 406 214"/><polyline class="cls-1" points="410.45 179 419.45 214 415.45 214 406.45 179"/><polygon class="cls-1" points="434.45 214 430.45 214 416.45 179 420.45 179 434.45 214"/><polyline class="cls-1" points="429.1 179 453.1 214 449.1 214 425.1 179"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3 KiB |
1
app/static/images/themes/kerstmis/wheel.svg
Normal file
1
app/static/images/themes/kerstmis/wheel.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54.13 54.13"><defs><style>.cls-1,.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}.cls-1{stroke-width:3.95px;}.cls-2{stroke-width:2.32px;}</style></defs><title>wheel</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="27.06" cy="27.06" r="25.09"/><circle class="cls-2" cx="27.26" cy="27.45" r="6.95"/><line class="cls-2" x1="27.26" y1="1.98" x2="27.26" y2="20.5"/><line class="cls-2" x1="9.24" y1="9.44" x2="22.34" y2="22.54"/><line class="cls-2" x1="1.78" y1="27.45" x2="20.31" y2="27.45"/><line class="cls-2" x1="9.24" y1="45.46" x2="22.34" y2="32.36"/><line class="cls-2" x1="27.26" y1="52.92" x2="27.26" y2="34.4"/><line class="cls-2" x1="45.27" y1="45.46" x2="32.17" y2="32.36"/><line class="cls-2" x1="52.73" y1="27.45" x2="34.2" y2="27.45"/><line class="cls-2" x1="45.27" y1="9.44" x2="32.17" y2="22.54"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 936 B |
1
app/static/images/themes/kerstmis/zeus_wagon.svg
Normal file
1
app/static/images/themes/kerstmis/zeus_wagon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 157.5"><defs><style>.cls-1{fill:#fff;}</style></defs><title>zeus_wagon</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" y="60.5" width="15" height="97" rx="6.3"/><rect class="cls-1" y="127" width="36" height="16.5"/><path class="cls-1" d="M279,123.45h16.25a0,0,0,0,1,0,0v20.34a5.71,5.71,0,0,1-5.71,5.71h-4.84a5.71,5.71,0,0,1-5.71-5.71V123.45A0,0,0,0,1,279,123.45Z"/><path class="cls-1" d="M140.85,43.93q-1.65-1.77-5.13-1.77a8.26,8.26,0,0,0-5.32,1.67c-1.39,1.12-2.17,2.92-2.33,5.38h14.52A7.9,7.9,0,0,0,140.85,43.93Z"/><path class="cls-1" d="M185.75,81.66a9,9,0,0,0-2.51.37,10.21,10.21,0,0,0-2.47,1.07V96.64a6.87,6.87,0,0,0,1.84.43c.66.06,1.3.1,1.94.1a6.27,6.27,0,0,0,5.1-2q1.68-2,1.68-6T190,83.43A5,5,0,0,0,185.75,81.66Z"/><path class="cls-1" d="M279.12,0H20.88A20.88,20.88,0,0,0,0,20.88V128H300V20.88A20.88,20.88,0,0,0,279.12,0ZM153.82,36.25H165V53.56c0,1.77.06,3.23.17,4.4a7.72,7.72,0,0,0,.79,2.91,3.57,3.57,0,0,0,1.79,1.68,8.53,8.53,0,0,0,3.34.53,11.1,11.1,0,0,0,3.17-.53A13.43,13.43,0,0,0,177.66,61V36.25h11.22V71.16H177.66V67.3A32.33,32.33,0,0,1,172,70.89a14.17,14.17,0,0,1-6.15,1.23q-5.78,0-8.89-3.32T153.82,59Zm-25,47.34H77.07V72.06L107.73,34H78.56V22.05h48.56V33.79l-6.18,7.64a16.46,16.46,0,0,1,1.15-1.22q5.3-5,14.53-5.05,8.52,0,12.8,4.31t4.29,12.38v3.92H128.1a8.08,8.08,0,0,0,3.12,6.28q2.88,2.17,8.47,2.18A19,19,0,0,0,146.56,63a21.78,21.78,0,0,0,5.26-2.73h1.24v9a41.55,41.55,0,0,1-7.15,2.21,37.74,37.74,0,0,1-7.43.68q-10.5,0-16.1-4.72t-5.59-13.46q0-7.38,3.87-12.13L96.47,71.69h32.3ZM199.22,95a13.27,13.27,0,0,1-2.68,4.51,11.71,11.71,0,0,1-3.9,2.84,11.53,11.53,0,0,1-4.68,1,13.42,13.42,0,0,1-3.91-.5,17.71,17.71,0,0,1-3.28-1.38V112.7H172.1V76.63l-7.36,26.16h-8.33l-5-18.17-4.93,18.17h-8.41l-7.53-26.95h8.24L143,94.42l5.22-18.58h7l5,18.58,4.13-18.58h16.5v2.81a21.15,21.15,0,0,1,4.06-2.57,11,11,0,0,1,4.79-1,9.24,9.24,0,0,1,7.82,3.69q2.81,3.7,2.8,10.16A17.26,17.26,0,0,1,199.22,95Zm10.12,7.78h-8.66v-27h8.66Zm8.09-34q-4.86,3.31-13.28,3.31a37.9,37.9,0,0,1-8.45-.87,31.65,31.65,0,0,1-6.09-1.93v-9.2h1q.84.6,2,1.29a19.07,19.07,0,0,0,3.12,1.51,25.25,25.25,0,0,0,4,1.23,20.89,20.89,0,0,0,4.72.51,12.2,12.2,0,0,0,4.88-.73,2.33,2.33,0,0,0,1.59-2.16,2,2,0,0,0-.93-1.85,12.38,12.38,0,0,0-3.55-1.1c-.83-.19-2-.39-3.37-.61a37,37,0,0,1-3.87-.79,13.78,13.78,0,0,1-7.06-3.87,9.59,9.59,0,0,1-2.3-6.55q0-5,4.77-8.37t13-3.34a34.58,34.58,0,0,1,7.51.79,30.76,30.76,0,0,1,5.61,1.69V46.6h-1a22.68,22.68,0,0,0-5.67-2.78,20,20,0,0,0-6.46-1.07,12.35,12.35,0,0,0-4.55.74c-1.23.5-1.85,1.2-1.85,2.12A2.24,2.24,0,0,0,202,47.5a11.44,11.44,0,0,0,4,1.31c1.14.23,2.37.45,3.68.67s2.64.49,4,.82a12.45,12.45,0,0,1,6.52,3.62,9.17,9.17,0,0,1,2.12,6.17A10.12,10.12,0,0,1,217.43,68.81Z"/><path class="cls-1" d="M120.94,41.43c-.1.11-.19.23-.28.35Z"/><polygon class="cls-1" points="172.1 75.85 172.1 76.63 172.32 75.85 172.1 75.85"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
|
@ -1,116 +0,0 @@
|
|||
{
|
||||
const init = () => {
|
||||
const $darkmode = document.querySelector(".enter_darkmode");
|
||||
if($darkmode) $darkmode.addEventListener("click", ()=>toggleBetween("lightmode", "darkmode"));
|
||||
const $customThemes = document.querySelector(".custom__themes");
|
||||
if($customThemes) $customThemes.addEventListener("click", ()=>toggleBetween("darkmode", "sinterklaas")); //TODO: Create automatic custom team selector
|
||||
|
||||
reloadTheme();
|
||||
}
|
||||
|
||||
const toggleBetween = (first, second) => {
|
||||
if(localStorage.getItem("theme") == second){
|
||||
localStorage.setItem("theme", first)
|
||||
}else{
|
||||
localStorage.setItem("theme", second)
|
||||
}
|
||||
reloadTheme();
|
||||
}
|
||||
|
||||
const reloadTheme = () => {
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
if(localStorage.getItem("theme") !== null){
|
||||
setTheme();
|
||||
}else if((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)){
|
||||
document.querySelector('body').classList.remove('lightmode');
|
||||
document.querySelector('body').classList.add('darkmode');
|
||||
}
|
||||
} else {
|
||||
console.log('You browser does not support local storage, no darkmode for you!' )
|
||||
}
|
||||
}
|
||||
|
||||
const setTheme = () =>{
|
||||
document.querySelector('body').classList.add('darkmode');
|
||||
switch(localStorage.getItem("theme")){
|
||||
case "halloween":
|
||||
setThemeHalloween();
|
||||
break;
|
||||
case "sinterklaas":
|
||||
setThemeSinterklaas();
|
||||
break;
|
||||
case "darkmode":
|
||||
setThemeDarkMode();
|
||||
break;
|
||||
case "lightmode":
|
||||
default:
|
||||
setThemeLightMode();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//TODO: Use an external file to load themes
|
||||
//TODO: Darkness and blur variables
|
||||
|
||||
const setThemeLightMode = () => {
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#ffffff"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#ffffff");
|
||||
root.style.setProperty('--dGray4', "#f9f9f9");
|
||||
root.style.setProperty('--dGray3', "#ffffff");
|
||||
root.style.setProperty('--dGray2', "#212121");
|
||||
root.style.setProperty('--dGray1', "#666666");
|
||||
root.style.setProperty('--dGray0', "#444444"); //Light color
|
||||
root.style.setProperty('--dBlue', "#0A84FF");
|
||||
root.style.setProperty('--FontFamily', '"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif');
|
||||
root.style.setProperty('--FontSize', '13px');
|
||||
document.querySelector('.background').style.backgroundImage = 'none';
|
||||
}
|
||||
|
||||
const setThemeDarkMode = () => {
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#1C1C1E"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#2C2C2E");
|
||||
root.style.setProperty('--dGray4', "#3A3A3C");
|
||||
root.style.setProperty('--dGray3', "#48484A");
|
||||
root.style.setProperty('--dGray2', "#636366");
|
||||
root.style.setProperty('--dGray1', "#8E8E93");
|
||||
root.style.setProperty('--dGray0', "#E0E0E8"); //Light color
|
||||
root.style.setProperty('--dBlue', "#0A84FF");
|
||||
root.style.setProperty('--FontFamily', '"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif');
|
||||
root.style.setProperty('--FontSize', '13px');
|
||||
document.querySelector('.background').style.backgroundImage = 'none';
|
||||
}
|
||||
|
||||
const setThemeHalloween = () => {
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#260101"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#260101");
|
||||
root.style.setProperty('--dGray4', "#8C3D0F");
|
||||
root.style.setProperty('--dGray3', "#F27405");
|
||||
root.style.setProperty('--dGray2', "#F25C05");
|
||||
root.style.setProperty('--dGray1', "#F28705");
|
||||
root.style.setProperty('--dGray0', "#FFEB65"); //Light color
|
||||
root.style.setProperty('--dBlue', "#D91604");
|
||||
root.style.setProperty('--FontFamily', '"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif');
|
||||
root.style.setProperty('--FontSize', '13px');
|
||||
document.querySelector('.background').backgroundImage = "url('/static/images/Halloween.jpeg')";
|
||||
}
|
||||
|
||||
const setThemeSinterklaas = () => {
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#F50B00"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#F20505");
|
||||
root.style.setProperty('--dGray4', "#0C6AA6");
|
||||
root.style.setProperty('--dGray3', "#177EBF");
|
||||
root.style.setProperty('--dGray2', "#F2EF05");
|
||||
root.style.setProperty('--dGray1', "#F2EF05");
|
||||
root.style.setProperty('--dGray0', "#F2EB80"); //Light color
|
||||
root.style.setProperty('--dBlue', "#35F546");
|
||||
root.style.setProperty('--FontFamily', "cursive");
|
||||
root.style.setProperty('--FontSize', "20px");
|
||||
document.body.style.background = "#000000";
|
||||
document.querySelector('.background').style.backgroundImage = "url('/static/images/Sinterklaas.jpg')";
|
||||
}
|
||||
init();
|
||||
}
|
||||
35
app/static/js/theme.js
Normal file
35
app/static/js/theme.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
|
||||
{
|
||||
const init = () =>{
|
||||
document.cookie.split('; ').forEach(itCookie = cookie =>{ //I know that this is a shitty way of fixing things... But I'll try to fix it in the future.
|
||||
if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "darkmode"){
|
||||
document.querySelector(".toggleDarkmode").innerHTML = "<a>Enter lightmode</a>"
|
||||
document.querySelector(".toggleDarkmode").id = "lightmode";
|
||||
}
|
||||
|
||||
if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "customTheme"){
|
||||
document.querySelector(".background").innerHTML = '<div class="background_wrapper"><div class="christmas_background"></div><div class="snow layer1 a"></div><div class="snow layer1"></div> <div class="snow layer2 a"></div><div class="snow layer2"></div><div class="snow layer3 a"></div><div class="snow layer3"></div><div class="snowman_wrapper"><div class="snowman_head"></div><div class="snowman_body"></div></div><div class="train_wrapper"><div class="whole_train"><div class="mc_wagon"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div></div><div class="zeus_wagon"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div></div><div class="train"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div><div class="wheel_small wheel4"></div><div class="wheel_small wheel5"></div></div></div></div><input type="checkbox" class="train_button"><div class="merry_christmas"></div><div class="sled_wrapper"><div class="sled"></div></div></div>';
|
||||
}
|
||||
if(cookie.split("=")[0] == "performance" && cookie.split("=")[1] == "highPerformance" && document.querySelector(".changePerformance")){
|
||||
document.querySelector(".changePerformance").innerHTML = "enable low performance";
|
||||
document.querySelector(".changePerformance").id = "lowPerformance";
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('.changeThemeButton').forEach(changeThemeButton= e => {e.addEventListener(`click`, handleClickChangeTheme)});
|
||||
document.querySelectorAll('.changePerformance').forEach(changeThemeButton= e => {e.addEventListener(`click`, handleClickChangePerformance)});
|
||||
}
|
||||
|
||||
const handleClickChangePerformance = e => {
|
||||
document.cookie = "performance = "+e.currentTarget.id+";path=/";
|
||||
location.reload();
|
||||
}
|
||||
|
||||
const handleClickChangeTheme = e =>{
|
||||
document.cookie = "theme = "+e.currentTarget.id+";path=/";
|
||||
location.reload();
|
||||
}
|
||||
|
||||
|
||||
|
||||
init();
|
||||
}
|
||||
|
|
@ -4,13 +4,13 @@
|
|||
{% import "utils.html" as util -%}
|
||||
|
||||
{% block container %}
|
||||
<div class="row">
|
||||
<div class="jumbotron">
|
||||
<div class="row hi_im_haldis_wrapper">
|
||||
<div class="jumbotron hi_im_haldis">
|
||||
<h2>Hi, I'm Haldis</h2>
|
||||
<h3>What would you like to eat, sir?</h3>
|
||||
<h3>What would you like to <span class="home_sir">eat</span>?</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row container">
|
||||
<div class="col-sm-5">
|
||||
{% if orders|count > 0 -%}
|
||||
<h3>Open orders:</h3>
|
||||
|
|
|
|||
|
|
@ -24,17 +24,19 @@ Haldis - {{ active_page|capitalize }}
|
|||
{% block styles %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen">
|
||||
<link rel="stylesheet" href="/css" media="screen">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/darkmode.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/theme.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block navbar %}
|
||||
<div class="background"></div>
|
||||
<div class="foreground"></div>
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
|
|
@ -70,7 +72,7 @@ Haldis - {{ active_page|capitalize }}
|
|||
{% block content -%}
|
||||
{{ utils.flashed_messages(container=True) }}
|
||||
|
||||
<div class="container">
|
||||
<div class="container main">
|
||||
{% block container -%}
|
||||
{%- endblock %}
|
||||
</div>
|
||||
|
|
@ -80,7 +82,7 @@ Haldis - {{ active_page|capitalize }}
|
|||
<div class="container">
|
||||
<div class="footerWrapper">
|
||||
<div class="pull-left">Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a></div>
|
||||
<div class="enter_darkmode"><a>Toggle darkmode</a></div>
|
||||
<div class="changeThemeButton toggleDarkmode" id="darkmode"><a>Enter darkmode</a></div>
|
||||
<div class="pull-right"><a href="http://github.com/ZeusWPI/Haldis">© {{ ""|year }}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{% import "utils.html" as util %}
|
||||
|
||||
{% block container %}
|
||||
<div class="row" xmlns="http://www.w3.org/1999/html">
|
||||
<div class="row location_data" xmlns="http://www.w3.org/1999/html">
|
||||
<div class="col-md-push-1 col-md-5 darker">
|
||||
<h3>{{ location.name }}</h3>
|
||||
<span class="glyphicon glyphicon-home"></span> {{ location.address }} <br/>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row location_products">
|
||||
<div class="col-md-push-1 col-md-10 darker">
|
||||
<h3 id="order-title">Products</h3>
|
||||
<table class="table table-hover table-condensed">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
{% block container %}
|
||||
<div class="row">
|
||||
<div class="col-md-push-1 col-md-10 darker">
|
||||
<div class="col-md-push-1 col-md-10 darker locations_locations">
|
||||
<h3>Locations</h3>
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
{% block container %}
|
||||
<div class="row">
|
||||
<div class="col-md-push-1 col-md-10 darker" id="info"><!-- Shitty html-->
|
||||
<div class="col-md-push-1 col-md-10 darker order_overview" id="info"><!-- Shitty html -->
|
||||
<h3 id="order-title">Order {{ order.id }}
|
||||
<div class="pull-right">
|
||||
{% if order.can_close(current_user.id) -%}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
total price: {{ total_price|euro }} {% if courier_or_admin %}- remaining debts: {{ debts|euro }}{% endif %}
|
||||
</div>
|
||||
{% if form -%}
|
||||
<div class="col-md-push-1 col-md-10 darker" id="form">
|
||||
<div class="col-md-push-1 col-md-10 darker order_order" id="form">
|
||||
<h4>Order:</h4>
|
||||
<form method="post" action="{{ url_for('order_bp.order_item_create', order_id=order.id) }}">
|
||||
<span class="pull-right">
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
{%- endif %}
|
||||
</div>
|
||||
<div class="row" id="items">
|
||||
<div class="col-md-push-1 col-md-5 darker" id="items-list">
|
||||
<div class="col-md-push-1 col-md-5 darker order_items" id="items-list">
|
||||
<h3>Items</h3>
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-push-2 col-md-4 darker box" id="items-ordered">
|
||||
<div class="col-md-push-2 col-md-4 darker box order_ordered" id="items-ordered">
|
||||
<h3>Ordered products: {{ order.items.count() }}</h3>
|
||||
<a class="divLink" href="{{ url_for('order_bp.items_showcase', order_id=order.id) }}"></a>
|
||||
{% for key, value in order.group_by_product().items() -%}
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-push-1 col-md-5 darker" id="debts">
|
||||
<div class="col-md-push-1 col-md-5 darker order_depts" id="debts">
|
||||
<h3>Debts</h3>
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ Haldis - Order {{ order.id }}
|
|||
{% block styles %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen">
|
||||
<link rel="stylesheet" href="/css" media="screen">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{% import "utils.html" as util -%}
|
||||
|
||||
{% block container %}
|
||||
<div class="row">
|
||||
<div class="row orders">
|
||||
<div class="col-md-5">
|
||||
{% if orders|count > 0 -%}
|
||||
<h3>Open orders:</h3>
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@
|
|||
{% block container %}
|
||||
<h1>{{ current_user.username }}</h1>
|
||||
<h3>Themes</h3>
|
||||
<p><a class="custom__themes">enable custom themes</a></p>
|
||||
<p><a class="changeThemeButton" id="customTheme">enable custom themes</a></p>
|
||||
<p><a class="changePerformance" id="highPerformance">enable high performance</a></p>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
{% macro render_order(order) -%}
|
||||
<div class="row darker">
|
||||
<div class="col-md-8 col-lg-9">
|
||||
<div class="row darke order_row">
|
||||
<div class="col-md-8 col-lg-9 order_data">
|
||||
<h5>{{ order.location.name }}</h5>
|
||||
<p>
|
||||
<b class="amount_of_orders">{{ order.items.count() }} orders</b></p>
|
||||
<p class="time_data">
|
||||
{% if order.stoptime %}
|
||||
<b>Closing time: </b>{{ order.stoptime.strftime("%H:%M") }} (<span class="time">{{ order.stoptime|countdown }}</span>)
|
||||
<span><b>Closes </b>{{ order.stoptime.strftime("%H:%M") }}</span><span class="time">{{ order.stoptime|countdown }}</span>
|
||||
{% else %}open{% endif %}<br/>
|
||||
<b>Orders:</b> {{ order.items.count() }}</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-lg-3">
|
||||
<a class="btn btn-primary btn-block align-bottom" href="{{ url_for('order_bp.order_from_id', order_id=order.id) }}">Expand</a>
|
||||
<div class="col-md-4 col-lg-3 expand_button_wrapper">
|
||||
<a class="btn btn-primary btn-block align-bottom expand_button" href="{{ url_for('order_bp.order_from_id', order_id=order.id) }}">Expand</a>
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,15 @@
|
|||
import os
|
||||
from datetime import datetime, timedelta
|
||||
|
||||
from flask import Flask, render_template, make_response
|
||||
from flask import request
|
||||
from flask import Blueprint, abort
|
||||
from flask import current_app as app
|
||||
from flask import render_template, send_from_directory, url_for
|
||||
from flask import send_from_directory, url_for
|
||||
from flask_login import login_required
|
||||
|
||||
import yaml
|
||||
|
||||
from models import Location, Order
|
||||
# import views
|
||||
from views.order import get_orders
|
||||
|
|
@ -26,6 +30,72 @@ def home() -> str:
|
|||
)
|
||||
|
||||
|
||||
@general_bp.route("/css")
|
||||
def css():
|
||||
"Generate the css"
|
||||
if (request.cookies.get('performance') and request.cookies.get('performance') == 'highPerformance'):
|
||||
cssPath = 'app/static/css/themes/highPerformance/'
|
||||
else:
|
||||
cssPath = 'app/static/css/themes/lowPerformance/'
|
||||
if request.cookies.get('theme'):
|
||||
if request.cookies['theme'] == 'customTheme':
|
||||
#TODO: The custom theme is hardcoded :(. Make the server auto select a custom team.
|
||||
# Here seasonal themes will be returned; matching the current date.
|
||||
|
||||
# Open the YAML file with all the themes.
|
||||
with open('app/views/themes.yml', 'r') as stream:
|
||||
data = yaml.safe_load(stream)
|
||||
# Build a dictionary from the YAML file with all the themes and there attributes.
|
||||
themes = {}
|
||||
for item in data:
|
||||
key = list(item.keys())[0]
|
||||
themes[key] = item[key]
|
||||
|
||||
# Get the current date.
|
||||
current_day = datetime.now().day
|
||||
current_month = datetime.now().month
|
||||
|
||||
# Check each theme in the dictionary and return the first one that is "correct"
|
||||
for theme in themes.values():
|
||||
if theme['type'] == 'static-date':
|
||||
start_day, start_month = theme['start'].split('/')
|
||||
start_day = int(start_day)
|
||||
start_month = int(start_month)
|
||||
|
||||
end_day, end_month = theme['end'].split('/')
|
||||
end_day = int(end_day)
|
||||
end_month = int(end_month)
|
||||
|
||||
if end_month < start_month:
|
||||
# Hacky (werkt nu maar kan beter)
|
||||
end_month += 12
|
||||
|
||||
if theme['type'] == 'static-date':
|
||||
|
||||
if (((start_month == current_month) and
|
||||
(start_day <= current_day)) or
|
||||
(start_month <= current_month)):
|
||||
|
||||
if (((end_month == current_month) and
|
||||
(end_day >= current_day)) or
|
||||
(end_month > current_month)):
|
||||
|
||||
f = open(cssPath+theme['file'])
|
||||
break
|
||||
|
||||
else:
|
||||
try:
|
||||
f = open(cssPath+request.cookies['theme']+".css")
|
||||
except IOError:
|
||||
f = open(cssPath+"lightmode.css")
|
||||
else:
|
||||
f = open(cssPath+"lightmode.css")
|
||||
response = make_response(f.read())
|
||||
response.headers['Content-Type'] = 'text/css'
|
||||
f.close()
|
||||
return response
|
||||
|
||||
|
||||
@general_bp.route("/map")
|
||||
def map_view() -> str:
|
||||
"Generate the map view"
|
||||
|
|
|
|||
22
app/views/themes.yml
Normal file
22
app/views/themes.yml
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
# Seasonal themes for Haldis
|
||||
- lightmode:
|
||||
file: lightmode.css
|
||||
type: default
|
||||
- darkmode:
|
||||
file: darkmode.css
|
||||
type: default
|
||||
- halloween:
|
||||
file: halloween.css
|
||||
type: static-date
|
||||
start: 21/10
|
||||
end: 10/11
|
||||
- sinterklaas:
|
||||
file: sinterklaas.css
|
||||
type: static-date
|
||||
start: 28/11
|
||||
end: 5/12
|
||||
- kerstmis:
|
||||
file: kerstmis.css
|
||||
type: static-date
|
||||
start: 6/12
|
||||
end: 06/01
|
||||
|
|
@ -33,6 +33,7 @@ oauthlib==2.1.0 # via flask-oauthlib, requests-oauthlib
|
|||
pymysql==0.9.3
|
||||
python-dateutil==2.8.0 # via alembic
|
||||
python-editor==1.0.4 # via alembic
|
||||
PyYaml==5.1.2
|
||||
requests-oauthlib==1.1.0 # via flask-oauthlib
|
||||
requests==2.21.0 # via airbrake, requests-oauthlib
|
||||
six==1.12.0 # via python-dateutil
|
||||
|
|
|
|||
Loading…
Reference in a new issue