Merge branch 'marudor-darkMode'

21 files changed, 78 insertions, 48 deletions

diff --git a/templates/_cancelled.html.ep b/templates/_cancelled.html.ep
index feaca9a..82e1ed7 100644
--- a/templates/_cancelled.html.ep
+++ b/templates/_cancelled.html.ep
@@ -1,4 +1,4 @@
-<div class="card yellow lighten-4">
+<div class="card info-color">
 	<div class="card-content">
 		<span class="card-title">Zugausfall dokumentieren</span>
 		<p>Prinzipiell wärest du nun eingecheckt in
diff --git a/templates/_checked_in.html.ep b/templates/_checked_in.html.ep
index 3030325..d51097e 100644
--- a/templates/_checked_in.html.ep
+++ b/templates/_checked_in.html.ep
@@ -1,4 +1,4 @@
-<div class="card autorefresh blue-grey lighten-5">
+<div class="card autorefresh">
 	<div class="card-content">
 		<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
 		<span class="card-title">Eingecheckt in <%= $journey->{train_type} %> <%= $journey->{train_no} %></span>
@@ -31,8 +31,8 @@
 					Ankunft in mehr als zwei Stunden
 				% }
 			</div>
-			<div class="progress purple lighten-4" style="height: 1ex;">
-				<div class="determinate purple darken-3" style="width: <%= sprintf('%.2f', 100 * ($journey->{journey_completion} // 0)); %>%;"></div>
+			<div class="progress " style="height: 1ex;">
+				<div class="determinate" style="width: <%= sprintf('%.2f', 100 * ($journey->{journey_completion} // 0)); %>%;"></div>
 			</div>
 		</p>
 		% if ($journey->{arr_name}) {
diff --git a/templates/_checked_out.html.ep b/templates/_checked_out.html.ep
index 1b6113a..9c7ff48 100644
--- a/templates/_checked_out.html.ep
+++ b/templates/_checked_out.html.ep
@@ -1,5 +1,5 @@
-<div class="card grey darken-4">
-	<div class="card-content white-text">
+<div class="card">
+	<div class="card-content">
 		<span class="card-title">Ausgecheckt</span>
 		<p>Aus <%= $journey->{train_type} %> <%= $journey->{train_no} %>
 			bis <a href="/s/<%= $journey->{arr_ds100} %>"><%= $journey->{arr_name} %></a></p>
diff --git a/templates/_deletion_note.html.ep b/templates/_deletion_note.html.ep
index 89cf271..5be2f99 100644
--- a/templates/_deletion_note.html.ep
+++ b/templates/_deletion_note.html.ep
@@ -1,6 +1,6 @@
 <div class="row">
 	<div class="col s12">
-		<div class="card red darken-4">
+		<div class="card caution-color">
 			<div class="card-content white-text">
 				<span class="card-title">Account wird gelöscht</span>
 				<p>
diff --git a/templates/_history_stats.html.ep b/templates/_history_stats.html.ep
index 715fa1a..8197ed1 100644
--- a/templates/_history_stats.html.ep
+++ b/templates/_history_stats.html.ep
@@ -1,7 +1,7 @@
 % if (@{$stats->{inconsistencies}}) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card red darken-4">
+			<div class="card caution-color">
 				<div class="card-content white-text">
 					<i class="material-icons small right">warning</i>
 					<span class="card-title">Inkonsistente Reisedaten</span>
diff --git a/templates/_invalid_input.html.ep b/templates/_invalid_input.html.ep
index ad01c15..4cebf29 100644
--- a/templates/_invalid_input.html.ep
+++ b/templates/_invalid_input.html.ep
@@ -1,6 +1,6 @@
 <div class="row">
 	<div class="col s12">
-		<div class="card red darken-4">
+		<div class="card caution-color">
 			<div class="card-content white-text">
 				% if ($invalid eq 'csrf') {
 					<span class="card-title">Ungültiger CSRF-Token</span>
diff --git a/templates/_public_status_card.html.ep b/templates/_public_status_card.html.ep
index d19cb9f..0863723 100644
--- a/templates/_public_status_card.html.ep
+++ b/templates/_public_status_card.html.ep
@@ -1,5 +1,5 @@
 % if ($journey->{checked_in}) {
-	<div class="card white autorefresh">
+	<div class="card autorefresh">
 		<div class="card-content">
 			<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
 			<span class="card-title"><%= $name %> ist unterwegs</span>
@@ -80,8 +80,8 @@
 	</div>
 % }
 % else {
-	<div class="card grey darken-4 autorefresh">
-		<div class="card-content white-text">
+	<div class="card autorefresh">
+		<div class="card-content">
 			<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
 			<span class="card-title"><%= $name %> ist gerade nicht eingecheckt</span>
 			<p>
diff --git a/templates/account.html.ep b/templates/account.html.ep
index f41f07f..2c58a7b 100644
--- a/templates/account.html.ep
+++ b/templates/account.html.ep
@@ -5,7 +5,7 @@
 % if (my $success = flash('success')) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card green darken-4">
+			<div class="card success-color">
 				<div class="card-content white-text">
 					% if ($success eq 'mail') {
 						<span class="card-title">Mail-Adresse geändert</span>
@@ -119,7 +119,7 @@
 						<button class="btn waves-effect waves-light" type="submit" name="action" value="generate">
 							Generieren
 						</button>
-						<button class="btn waves-effect waves-light red" type="submit" name="action" value="delete">
+						<button class="btn waves-effect waves-light caution-color" type="submit" name="action" value="delete">
 							Löschen
 						</button>
 					%= end
@@ -213,7 +213,7 @@
 			</div>
 			<div class="input-field col s12 m12 l4 center-align">
 				%= csrf_field
-				<button class="btn waves-effect waves-light red" type="submit" name="action" value="delete">
+				<button class="btn waves-effect waves-light caution-color" type="submit" name="action" value="delete">
 					Account löschen
 				</button>
 			</div>
diff --git a/templates/add_journey.html.ep b/templates/add_journey.html.ep
index 10e74eb..02f30d5 100644
--- a/templates/add_journey.html.ep
+++ b/templates/add_journey.html.ep
@@ -2,7 +2,7 @@
 % if (not get_oldest_journey_ts()) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card yellow lighten-4">
+			<div class="card info-color">
 				<div class="card-content">
 					<span class="card-title">Hinweis</span>
 					<p>travelynx ist darauf ausgelegt, über die Hauptseite in
@@ -16,7 +16,7 @@
 % if ($error) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card red darken-4">
+			<div class="card caution-color">
 				<div class="card-content white-text">
 					<span class="card-title">Ungültige Eingabe</span>
 					<p><%= $error %></p>
diff --git a/templates/change_mail.html.ep b/templates/change_mail.html.ep
index 65d3d8d..4f9108a 100644
--- a/templates/change_mail.html.ep
+++ b/templates/change_mail.html.ep
@@ -5,7 +5,7 @@
 % if (stash('success')) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card green darken-4">
+			<div class="card success-color">
 				<div class="card-content white-text">
 					<span class="card-title">Mail-Änderung wird durchgeführt</span>
 					<p>
diff --git a/templates/departures.html.ep b/templates/departures.html.ep
index fb917f3..3c9638e 100644
--- a/templates/departures.html.ep
+++ b/templates/departures.html.ep
@@ -2,8 +2,8 @@
 	<div class="col s12">
 		% my $status = $self->get_user_status;
 		% if ($status->{checked_in}) {
-			<div class="card grey darken-4">
-				<div class="card-content white-text">
+			<div class="card">
+				<div class="card-content">
 					<span class="card-title">Aktuell eingecheckt</span>
 					<p>In <%= $status->{train_type} %> <%= $status->{train_no} %>
 						ab <%= $status->{dep_name} %></p>
diff --git a/templates/edit_journey.html.ep b/templates/edit_journey.html.ep
index c37adba..06338f6 100644
--- a/templates/edit_journey.html.ep
+++ b/templates/edit_journey.html.ep
@@ -2,7 +2,7 @@
 % if ($error and $error eq 'notfound') {
 	<div class="row">
 		<div class="col s12">
-			<div class="card red darken-4">
+			<div class="card caution-color">
 				<div class="card-content white-text">
 					<span class="card-title">Fehler</span>
 					<p>Zugfahrt nicht gefunden.</p>
@@ -15,7 +15,7 @@
 	% if ($error) {
 		<div class="row">
 			<div class="col s12">
-				<div class="card red darken-4">
+				<div class="card caution-color">
 					<div class="card-content white-text">
 						<span class="card-title">Ungültige Eingabe</span>
 						<p><%= $error %></p>
diff --git a/templates/exception.html.ep b/templates/exception.html.ep
index e4daf9a..290efc5 100644
--- a/templates/exception.html.ep
+++ b/templates/exception.html.ep
@@ -1,6 +1,6 @@
 <div class="row">
 	<div class="col s12">
-		<div class="card red darken-4">
+		<div class="card caution-color">
 			<div class="card-content white-text">
 				<span class="card-title">500 Internal Server Error</span>
 				<p>Das hätte nicht passieren sollen.</p>
diff --git a/templates/journey.html.ep b/templates/journey.html.ep
index 76e7f79..cd2b04e 100644
--- a/templates/journey.html.ep
+++ b/templates/journey.html.ep
@@ -1,7 +1,7 @@
 % if ($error) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card red darken-4">
+			<div class="card caution-color">
 				<div class="card-content white-text">
 					<span class="card-title">Fehler</span>
 					<p>Zugfahrt nicht gefunden.</p>
diff --git a/templates/landingpage.html.ep b/templates/landingpage.html.ep
index 7faa742..742f684 100644
--- a/templates/landingpage.html.ep
+++ b/templates/landingpage.html.ep
@@ -2,7 +2,7 @@
 	% if (stash('error')) {
 		<div class="row">
 			<div class="col s12">
-				<div class="card red darken-4">
+				<div class="card caution-color">
 					<div class="card-content white-text">
 						<span class="card-title">Backend-Fehler</span>
 						<p><%= stash('error') %></p>
@@ -18,7 +18,7 @@
 				%= include '_checked_in', journey => $status;
 			% }
 			% elsif ($status->{cancelled}) {
-				<div class="card yellow lighten-4">
+				<div class="card info-color">
 					<div class="card-content">
 						<span class="card-title">Zugausfall dokumentieren</span>
 						<p>Prinzipiell wärest du nun eingecheckt in
@@ -47,20 +47,20 @@
 				</div>
 			% }
 			% else {
-				<div class="card grey darken-4">
-					<div class="card-content white-text">
+				<div class="card">
+					<div class="card-content">
 						<span class="card-title">Hallo, <%= current_user()->{name} %>!</span>
 						<p>Du bist gerade nicht eingecheckt.</p>
 						<div class="geolocation">
-							<button class="btn waves-effect waves-light btn-flat white">Stationen in der Umgebung abfragen</button>
+							<button class="btn waves-effect waves-light btn-flat">Stationen in der Umgebung abfragen</button>
 						</div>
 						%= form_for 'list_departures' => begin
 							<div class="input-field">
-								%= text_field 'station', id => 'station', class => 'autocomplete white-text', required => undef
+								%= text_field 'station', id => 'station', class => 'autocomplete contrast-color-text', required => undef
 								<label for="station">Manuelle Eingabe (Name oder DS100)</label>
 							</div>
 							<div class="center-align">
-								<button class="btn waves-effect waves-light btn-flat white" type="submit" name="action" value="departures">
+								<button class="btn waves-effect waves-light btn-flat" type="submit" name="action" value="departures">
 									<i class="material-icons left">send</i>
 									Abfahrten
 								</button>
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index a63242c..76c130b 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -9,7 +9,7 @@
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 	<meta name="apple-mobile-web-app-title" content="Travelynx">
-	% my $av = 'v20'; # asset version
+	% my $av = 'v21'; # asset version
 	<link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-16x16.png" sizes="16x16">
 	<link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-32x32.png" sizes="32x32">
 	<link rel="icon" type="image/png" href="/static/<%= $av %>/icons/icon-96x96.png" sizes="96x96">
@@ -18,7 +18,37 @@
 	<link rel="apple-touch-icon" sizes="152x152" href="/static/<%= $av %>/icons/icon-152x152.png">
 	<link rel="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/icon-167x167.png">
 	<link rel="manifest" href="/static/<%= $av %>/manifest.json">
-	%= stylesheet "/static/${av}/css/materialize.min.css"
+	% if (session('theme') and session('theme') eq 'dark') {
+		%= stylesheet "/static/${av}/css/dark.min.css", id => 'theme'
+	% }
+	% else {
+		%= stylesheet "/static/${av}/css/light.min.css", id => 'theme'
+	% }
+	<script>
+		function addStyleSheet(name, id) {
+			var path = '/static/<%=$av%>/css/' + name + '.min.css';
+			var old = document.getElementById(id);
+			if (old && (old.href != path)) {
+				old.href = path;
+				document.cookie = 'theme=' + name;
+			}
+		}
+		var otherTheme = {
+			'dark': 'light',
+			'light': 'dark',
+		};
+		var currentTheme = localStorage.getItem('theme');
+		if (!otherTheme.hasOwnProperty(currentTheme)) {
+			currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
+		addStyleSheet(currentTheme, 'theme');
+
+		function toggleTheme() {
+			currentTheme = otherTheme[currentTheme] || 'light';
+			localStorage.setItem('theme', currentTheme);
+			addStyleSheet(currentTheme, 'theme');
+		}
+	</script>
 	%= stylesheet "/static/${av}/css/material-icons.css"
 	%= stylesheet "/static/${av}/css/local.css"
 	%= javascript "/static/${av}/js/jquery-3.4.1.min.js"
@@ -51,6 +81,9 @@
 						</div>
 					</div>
 				</li>
+				<li class="waves-effect waves-light">
+					<a onClick="javascript:toggleTheme()"><i class="material-icons">invert_colors</i></a>
+				</li>
 				% if (is_user_authenticated()) {
 					<li class="<%= navbar_class('/history') %>"><a href='/history' title="History"><i class="material-icons">history</i></a></li>
 					<li class="<%= navbar_class('/account') %>"><a href="/account" title="Account"><i class="material-icons">account_circle</i></a></li>
@@ -66,7 +99,7 @@
 % if (app->mode eq 'development') {
 <div class="container">
 	<div class="row">
-		<div class="col s12 red darken-4 white-text">
+		<div class="col s12 caution-color white-text">
 			Development Mode – Datenbank: <%= app->config->{db}->{database} %>
 			@ <%= app->config->{db}->{host} %>
 		</div>
@@ -87,10 +120,7 @@
 <script>
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/service-worker.js')
-        .then((reg) => {
-          console.log('Service worker registered.', reg);
-        });
+    navigator.serviceWorker.register('/service-worker.js');
   });
 }
 </script>
diff --git a/templates/login.html.ep b/templates/login.html.ep
index 474f165..a5aa8e3 100644
--- a/templates/login.html.ep
+++ b/templates/login.html.ep
@@ -1,8 +1,8 @@
 % if (my $user = current_user()) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card grey darken-4">
-				<div class="card-content white-text">
+			<div class="card">
+				<div class="card-content">
 					<span class="card-title">Hallo, <%= $user->{name} %>!</span>
 					<p>
 						Du bist bereits angemeldet. Falls du mehrere Accounts hast
@@ -27,8 +27,8 @@
 	<div class="row">
 		<div class="col s12">
 			% if ($from eq 'register') {
-				<div class="card grey darken-4">
-					<div class="card-content white-text">
+				<div class="card">
+					<div class="card-content">
 						<span class="card-title">Bitte warten</span>
 						<p>Ein Verifizierungslink wurde an die von dir angegebene
 						Mail-Adresse geschickt. Sobald du diesen angeklickt hast,
@@ -37,7 +37,7 @@
 				</div>
 			% }
 			% elsif ($from eq 'verification') {
-				<div class="card green darken-4">
+				<div class="card success-color">
 					<div class="card-content white-text">
 						<span class="card-title">Account freigeschaltet</span>
 						<p>Du kannst dich nun anmelden.</p>
diff --git a/templates/not_found.html.ep b/templates/not_found.html.ep
index de0d533..c2bc09f 100644
--- a/templates/not_found.html.ep
+++ b/templates/not_found.html.ep
@@ -1,6 +1,6 @@
 <div class="row">
 	<div class="col s12">
-		<div class="card red darken-4">
+		<div class="card caution-color">
 			<div class="card-content white-text">
 				<span class="card-title">404 Not Found</span>
 				<p>Diese Seite gibt es hier nicht.</p>
diff --git a/templates/privacy.html.ep b/templates/privacy.html.ep
index 9fa2048..4469154 100644
--- a/templates/privacy.html.ep
+++ b/templates/privacy.html.ep
@@ -14,7 +14,7 @@
 		<div class="input-field col s12">
 			<label>
 				%= check_box public_status => 1
-				<span class="black-text">Aktueller Status</span>
+				<span>Aktueller Status</span>
 			</label>
 		</div>
 	</div>
diff --git a/templates/recover_password.html.ep b/templates/recover_password.html.ep
index a3332c3..c56ffe2 100644
--- a/templates/recover_password.html.ep
+++ b/templates/recover_password.html.ep
@@ -5,7 +5,7 @@
 % if (stash('success')) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card green darken-4">
+			<div class="card success-color">
 				<div class="card-content white-text">
 					<span class="card-title">Passwort-Reset wird durchgeführt</span>
 					<p>
diff --git a/templates/webhooks.html.ep b/templates/webhooks.html.ep
index b782823..930732d 100644
--- a/templates/webhooks.html.ep
+++ b/templates/webhooks.html.ep
@@ -8,7 +8,7 @@
 	<div class="row">
 		<div class="col s12">
 			% if ($hook->{errored}) {
-				<div class="card red darken-4">
+				<div class="card caution-color">
 					<div class="card-content white-text">
 						<span class="card-title">Web-Hook fehlerhaft</span>
 						<p><%= $hook->{output} %></p>
@@ -16,7 +16,7 @@
 				</div>
 			% }
 			% else {
-				<div class="card green darken-4">
+				<div class="card success-color">
 					<div class="card-content white-text">
 						<span class="card-title">Web-Hook erfolgreich getestet</span>
 						<p><%= $hook->{output} %></p>