From 5ac3b2fac210c0f229820264fb82dcfb4871a924 Mon Sep 17 00:00:00 2001 From: sbiego Date: Thu, 30 May 2019 00:34:49 +0200 Subject: [PATCH] auto nightmode toggle and url \'night\' and some fix --- _index.html | 4 +++- css/main.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++++--- js/script.js | 39 ++++++++++++++++++++++++++++++++++ tornelo.py | 2 +- 4 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 js/script.js diff --git a/_index.html b/_index.html index 30f8d66..5771ec5 100644 --- a/_index.html +++ b/_index.html @@ -19,12 +19,14 @@ + + - +

PingPong '19

diff --git a/css/main.css b/css/main.css index a7be40f..887c957 100644 --- a/css/main.css +++ b/css/main.css @@ -14,6 +14,11 @@ body { position: absolute; width: 100%; min-height: 100%; + transition: background .3s; +} +body.dark { + background: hsl(210, 10%, 20%); + color: #eee; } #logo { @@ -25,9 +30,13 @@ body { border: 10px solid #fff; box-shadow: 0 9px 30px -21px rgba(0,0,0,.7); } +body.dark > #logo { + border: 10px solid hsla(210, 10%, 10%, 90%); + box-shadow: 0 10px 25px -10px rgba(0,0,0,.8); +} #titolo { - box-shadow: 0 -5px 30px -8px rgba(0,0,0,.4); + box-shadow: 0 -5px 30px 2px rgba(0,0,0,.4); position: fixed; width: 100%; top: 0; @@ -37,6 +46,11 @@ body { padding: 0; height: 56px; z-index: 10; + transition: background .3s; +} +body.dark > #titolo { + box-shadow: 0 -5px 30px 1px rgba(0, 0, 0, 0.45); + background: hsl(210, 10%, 10%); } #titolo > h1 { position: absolute; @@ -70,6 +84,10 @@ body { box-shadow: 0 -5px 30px -8px rgba(0, 0, 0, .4); background: #fafafa; z-index: 8; + transition: background .3s; +} +body.dark #menu { + background: hsl(180, 11%, 5%); } #menu span.torneo-icon { padding: 2px 5px; @@ -120,9 +138,34 @@ p.centered { color: #777; background: #ebebeb; } - +body.dark .adminButton:hover, +body.dark .adminButton:active { + color: #aaa; + background: rgba(0, 0, 0, .3); +} /* BOOTSTRAP */ +.table-dark td, .table-dark th, .table-dark thead th { + border-color: rgba(0,0,0,.1); +} + +body.dark .btn-outline-primary, +body.dark .btn-outline-danger { + border-color: hsla(210, 11%, 10%, 1); +} +.btn-outline-danger:not(:disabled):not(.disabled).active, +.btn-outline-danger:not(:disabled):not(.disabled):active, +.show>.btn-outline-danger.dropdown-toggle, +.btn-outline-primary:not(:disabled):not(.disabled).active, +.btn-outline-primary:not(:disabled):not(.disabled):active, +.show>.btn-outline-primary.dropdown-toggle { + color: hsla(210, 10%, 10%, 1) +} + +.btn { + transition: all .3s; +} + .btn > ion-icon { vertical-align: middle; } @@ -171,7 +214,18 @@ p.centered { color: #007bff; } - +body.dark .btn.bigFontButton, +body.dark .input-group-text, +body.dark .form-control, +body.dark .custom-select { + border: none; + color: #dedede; + background-color: hsla(180, 12%, 2%, 1); +} +body.dark .input-group-append > span, +body.dark .input-group-prepend > span { + background-color: hsla(180, 12%, 8%, 1); +} /* RESPONSIVE ########################## */ diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..03b38a8 --- /dev/null +++ b/js/script.js @@ -0,0 +1,39 @@ +function toggleTheme() { + // UI + $('body').toggleClass('dark'); + + // tabelle + $('table').toggleClass('table-dark'); + $('tr.success').toggleClass('bg-success'); + $('tr.success').toggleClass('table-success'); +} + +function getUrlVars() { + var vars = {}; + var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) { + vars[key] = value; + }); + return vars; +} + +/////////// Auto NIGHT MODE /////////////////// +window.onload = function () { + + var urlVars = getUrlVars(); + var d = new Date(); + var hour = d.getHours(); + + if (urlVars["night"]) { + if (urlVars["night"] == "true") { + nightMode(); + } else if (urlVars["night"] == "false") { + dayMode(); + } + + } else { + if ((hour > 0 || hour < 7) && (hour > 0 || hour < 7)) { + toggleTheme(); + console.log('auto-enabling dark mode...') + } + } +} \ No newline at end of file diff --git a/tornelo.py b/tornelo.py index 4f2568e..e0d76ec 100755 --- a/tornelo.py +++ b/tornelo.py @@ -291,7 +291,7 @@ def rankingHtml(torneo): for giocatore in torneo_rank['stabili']: # i evidenzia i primi 8 giocatori, selezionati per le eliminatorie if(torneo_rank['stabili'].index(giocatore) < torneo_rank['n_min_partite']): - classColore = 'table-success' + classColore = 'table-success success' else: classColore = '' -- 2.18.1