{% translate "Barplan" %}
{% for shift in bartendershifts %} -{% translate "Velkommen til Fredagscaféens webside, her kan du finde information om åbningstider, sortiment, udlejning af fadølsanlæg og grill mm." %}
diff --git a/guides/templates/guides.html b/guides/templates/guides.html
index a4497cd..fe97039 100644
--- a/guides/templates/guides.html
+++ b/guides/templates/guides.html
@@ -18,7 +18,7 @@
{% translate "Guides" %}
{% for category, guides in guides %}
-
-
{{ category }}
+ {{ category }}
-
{% for guide in guides %}
diff --git a/web/static/css/stylesheet.css b/web/static/css/stylesheet.css
index d1bc386..9f8e08d 100644
--- a/web/static/css/stylesheet.css
+++ b/web/static/css/stylesheet.css
@@ -1,165 +1,510 @@
:root {
--datblue: #152ff5;
- }
-
-.banner h1 {
- color: var(--datblue);
- font-family: "Times New Roman", Times, serif;
- display: inline-block;
}
-.logo {
- height: 50px;
- display: inline-block;
- padding-bottom: 12px;
-}
+/* light theme */
+html.light {
+ html, body {
+ background-color: white;
+ }
-.locale {
- float: right;
- margin: 10px;
- padding: 0px;
- height: 25px;
- border: solid;
- border-width: 0px;
- border-radius: 5px;
- border-color: white;
-}
+ .banner h1 {
+ color: var(--datblue);
+ font-family: "Times New Roman", Times, serif;
+ display: inline-block;
+ }
-.center-align {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
+ .logo {
+ height: 50px;
+ display: inline-block;
+ padding-bottom: 12px;
+ }
-ul.navbar-nav {
- margin: 0px !important;
-}
+ .locale {
+ float: right;
+ margin: 10px;
+ padding: 0px;
+ height: 25px;
+ border: solid;
+ border-width: 0px;
+ border-radius: 5px;
+ border-color: white;
+ }
-.navbar-brand {
- font-family: "Times New Roman", Times, serif;
-}
+ .center-align {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
-.navbar-default .navbar-nav > li > a {
- color: #337ab7 !important;
-}
+ ul.navbar-nav {
+ margin: 0px !important;
+ }
-.navbar-collapse {
- padding-left: 0px !important;
- padding-right: 0px !important;
-}
+ .navbar-brand {
+ font-family: "Times New Roman", Times, serif;
+ }
-.navbar-collapse li:hover {
- background-color: #eee;
-}
+ .navbar-default .navbar-nav > li > a {
+ color: #337ab7 !important;
+ }
-.board-image {
- height: 100px;
- width: 100px;
- background-size: contain;
- background-position: center;
- background-repeat: no-repeat;
- flex-shrink: 0;
-}
+ .navbar-collapse {
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+ }
-#sortiment-count {
- font-size: 0.8em;
- display: inline;
-}
+ .navbar-collapse li:hover {
+ background-color: #eee;
+ }
-.wrapper {
- min-height: 100%;
- height: auto !important;
- height: 100%;
- margin: 0 auto -120px;
- padding-bottom: 120px;
- }
-
-footer {
- display: flex !important;
- align-items: center;
- text-align: center;
- height: 120px;
-}
+ .board-image {
+ height: 100px;
+ width: 100px;
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+ flex-shrink: 0;
+ }
-#sortiment-search input {
- border-radius: 48px;
- border: 1px solid #aaa;
- width: 200px;
- text-indent: 16px;
- height: 32px;
- outline: none;
-}
+ #sortiment-count {
+ font-size: 0.8em;
+ display: inline;
+ }
+
+ .wrapper {
+ min-height: 100%;
+ height: auto !important;
+ height: 100%;
+ margin: 0 auto -120px;
+ padding-bottom: 120px;
+ }
+
+ footer {
+ display: flex !important;
+ align-items: center;
+ text-align: center;
+ height: 120px;
+ }
+
+ #sortiment-search input {
+ border-radius: 48px;
+ border: 1px solid #aaa;
+ width: 200px;
+ text-indent: 16px;
+ height: 32px;
+ outline: none;
+ }
-#sortiment-search input:focus, #sortiment-search input:hover {
- border: 1px solid #337ab7;
+ #sortiment-search input:focus, #sortiment-search input:hover {
+ border: 1px solid #337ab7;
+ }
+
+
+ @media screen and (min-width: 480px) {
+ #sortiment-row {
+ display: flex;
+ align-items: center;
+ }
+
+ #sortiment-search {
+ text-align: right;
+ }
+ }
+
+
+ @media screen and (max-width: 480px) {
+ #sortiment-search {
+ display: flex;
+ }
+
+ #sortiment-search input {
+ flex-grow: 1;
+ }
+
+ #items {
+ font-size: 0.8em;
+ }
+ }
+
+ #unavailable_dates_table {
+ width: initial !important;
+ }
+ #unavailable_dates_table td {
+ padding: 0 !important;
+ user-select: none;
+ }
+ #unavailable_dates_table label {
+ display: block !important;
+ padding: 8px !important;
+ }
+
+ .google-maps {
+ max-width: 600px;
+ max-height: 450px;
+ position: relative;
+ padding-bottom: 450px;
+ height: 0;
+ overflow: hidden;
+ }
+
+ .google-maps iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100% !important;
+ height: 100% !important;
+ }
+
+ .social-link {
+ flex: right;
+ padding: 0px;
+ height: 25px;
+ border: solid;
+ border-width: 0px;
+ border-radius: 5px;
+ border-color: white;
+ }
+
+ .social-link:hover {
+ opacity: 0.6;
+ }
+
+ .switch {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 24px;
+ }
+
+ .switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ .slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ .slider:before {
+ position: absolute;
+ content: "";
+ height: 16px;
+ width: 16px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ input:checked + .slider {
+ background-color: var(--datblue);
+ }
+
+ input:focus + .slider {
+ box-shadow: 0 0 1px var(--datblue);
+ }
+
+ input:checked + .slider:before {
+ -webkit-transform: translateX(16px);
+ -ms-transform: translateX(16px);
+ transform: translateX(16px);
+ }
+
+ /* Rounded sliders */
+ .slider.round {
+ border-radius: 34px;
+ }
+
+ .slider.round:before {
+ border-radius: 50%;
+ }
}
+/* dark theme */
+html.dark {
+ html, body {
+ background-color: #151515;
+ }
+
+ button {
+ background-color: #151515;
+ color: #c3c3c3;
+ }
+
+ code {
+ background-color: #351b1b;
+ }
+
+ input, textarea, select, .input-group-addon, .panel, td {
+ background-color: #282828;
+ border-color: #282828;
+ color: white;
+ }
+
+ .list-group-item {
+ background-color: #282828;
+ border-color: #282828;
+ }
+
+ .list-group-item-success, .success- {
+ background-color: #4c8542;
+ color: white;
+ }
-@media screen and (min-width: 480px) {
- #sortiment-row {
+ .list-group-item-warning {
+ background-color: #857e40;
+ color: white;
+ }
+
+ .is-user-shift {
+ background-color: lightBlue;
+ }
+
+ .danger- {
+ background-color: #854040;
+ color: white;
+ }
+
+ p, h1, h2, h3, h4, h5, label, th, b, li {
+ color: white;
+ }
+
+ .banner h1 {
+ color: var(--datblue);
+ font-family: "Times New Roman", Times, serif;
+ display: inline-block;
+ }
+
+ .logo {
+ height: 50px;
+ display: inline-block;
+ padding-bottom: 12px;
+ }
+
+ .locale {
+ float: right;
+ margin: 10px;
+ padding: 0px;
+ height: 25px;
+ border: solid;
+ border-width: 0px;
+ border-radius: 5px;
+ border-color: #151515;
+ }
+
+ .center-align {
display: flex;
align-items: center;
+ justify-content: space-between;
}
- #sortiment-search {
- text-align: right;
+ ul.navbar-nav {
+ margin: 0px !important;
}
-}
+ .navbar-brand {
+ font-family: "Times New Roman", Times, serif;
+ }
-@media screen and (max-width: 480px) {
- #sortiment-search {
- display: flex;
+ .navbar-default .navbar-nav > li > a {
+ color: #337ab7 !important;
+ text-shadow: None;
}
- #sortiment-search input {
- flex-grow: 1;
+ .navbar-collapse {
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+ }
+
+ .navbar-collapse li:hover {
+ background-color: #232323;
}
- #items {
+ .board-image {
+ height: 100px;
+ width: 100px;
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+ flex-shrink: 0;
+ }
+
+ #sortiment-count {
font-size: 0.8em;
+ display: inline;
}
-}
-#unavailable_dates_table {
- width: initial !important;
-}
-#unavailable_dates_table td {
- padding: 0 !important;
- user-select: none;
-}
-#unavailable_dates_table label {
- display: block !important;
- padding: 8px !important;
-}
+ .wrapper {
+ min-height: 100%;
+ height: auto !important;
+ height: 100%;
+ margin: 0 auto -120px;
+ padding-bottom: 120px;
+ }
-.google-maps {
- max-width: 600px;
- max-height: 450px;
- position: relative;
- padding-bottom: 450px;
- height: 0;
- overflow: hidden;
-}
+ footer {
+ display: flex !important;
+ align-items: center;
+ text-align: center;
+ height: 120px;
+ }
-.google-maps iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100% !important;
- height: 100% !important;
-}
+ #sortiment-search input {
+ border-radius: 48px;
+ border: 1px solid #515151;
+ width: 200px;
+ text-indent: 16px;
+ height: 32px;
+ outline: none;
+ }
-.social-link {
- flex: right;
- padding: 0px;
- height: 25px;
- border: solid;
- border-width: 0px;
- border-radius: 5px;
- border-color: white;
-}
+ #sortiment-search input:focus, #sortiment-search input:hover {
+ border: 1px solid #337ab7;
+ }
-.social-link:hover {
- opacity: 0.6;
+
+ @media screen and (min-width: 480px) {
+ #sortiment-row {
+ display: flex;
+ align-items: center;
+ }
+
+ #sortiment-search {
+ text-align: right;
+ }
+ }
+
+
+ @media screen and (max-width: 480px) {
+ #sortiment-search {
+ display: flex;
+ }
+
+ #sortiment-search input {
+ flex-grow: 1;
+ }
+
+ #items {
+ font-size: 0.8em;
+ }
+ }
+
+ #unavailable_dates_table {
+ width: initial !important;
+ }
+ #unavailable_dates_table td {
+ padding: 0 !important;
+ user-select: none;
+ }
+ #unavailable_dates_table label {
+ display: block !important;
+ padding: 8px !important;
+ }
+
+ .google-maps {
+ max-width: 600px;
+ max-height: 450px;
+ position: relative;
+ padding-bottom: 450px;
+ height: 0;
+ overflow: hidden;
+ }
+
+ .google-maps iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100% !important;
+ height: 100% !important;
+ border: 0;
+ }
+
+ .social-link {
+ flex: right;
+ padding: 0px;
+ height: 25px;
+ border: solid;
+ border-width: 0px;
+ border-radius: 5px;
+ border-color: #151515;
+ }
+
+ .social-link:hover {
+ opacity: 0.6;
+ }
+
+ .image-inverted {
+ filter: brightness(0) invert(1);
+ }
+
+ .switch {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 24px;
+ }
+
+ .switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ .slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #303030;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ .slider:before {
+ position: absolute;
+ content: "";
+ height: 16px;
+ width: 16px;
+ left: 4px;
+ bottom: 4px;
+ background-color: #151515;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ input:checked + .slider {
+ background-color: var(--datblue);
+ }
+
+ input:focus + .slider {
+ box-shadow: 0 0 1px var(--datblue);
+ }
+
+ input:checked + .slider:before {
+ -webkit-transform: translateX(16px);
+ -ms-transform: translateX(16px);
+ transform: translateX(16px);
+ }
+
+ /* Rounded sliders */
+ .slider.round {
+ border-radius: 24px;
+ }
+
+ .slider.round:before {
+ border-radius: 50%;
+ }
}
diff --git a/web/static/images/facebook.png b/web/static/images/facebook.png
index bc92a32..2b9b961 100644
Binary files a/web/static/images/facebook.png and b/web/static/images/facebook.png differ
diff --git a/web/static/images/facebook_negative.png b/web/static/images/facebook_negative.png
deleted file mode 100644
index 1c1eabe..0000000
Binary files a/web/static/images/facebook_negative.png and /dev/null differ
diff --git a/web/static/images/github.png b/web/static/images/github.png
index e0edec5..53a972a 100644
Binary files a/web/static/images/github.png and b/web/static/images/github.png differ
diff --git a/web/static/images/github_negative.png b/web/static/images/github_negative.png
deleted file mode 100644
index 903c52b..0000000
Binary files a/web/static/images/github_negative.png and /dev/null differ
diff --git a/web/static/images/instagram.png b/web/static/images/instagram.png
index 845b7b6..dc0d6a3 100644
Binary files a/web/static/images/instagram.png and b/web/static/images/instagram.png differ
diff --git a/web/static/images/instagram_negative.png b/web/static/images/instagram_negative.png
deleted file mode 100644
index 0fd9b16..0000000
Binary files a/web/static/images/instagram_negative.png and /dev/null differ
diff --git a/web/static/images/logo.png b/web/static/images/logo.png
index fb1458a..3426ddd 100644
Binary files a/web/static/images/logo.png and b/web/static/images/logo.png differ
diff --git a/web/static/js/darkModeState.js b/web/static/js/darkModeState.js
new file mode 100644
index 0000000..c639633
--- /dev/null
+++ b/web/static/js/darkModeState.js
@@ -0,0 +1,54 @@
+/*jshint esversion: 11 */
+
+function switchTheme() {
+ "use strict";
+ const isLightMode = document.documentElement.classList.contains("light");
+ document.documentElement.classList.toggle("light", !isLightMode);
+ document.documentElement.classList.toggle("dark", isLightMode);
+ localStorage.setItem("lightMode", !isLightMode);
+ localStorage.setItem("darkMode", isLightMode);
+ if (isLightMode) {
+ document.getElementById("facebook-link").setAttribute("class", "image-inverted social-link");
+ document.getElementById("instagram-link").setAttribute("class", "image-inverted social-link");
+ document.getElementById("github-link").setAttribute("class", "image-inverted social-link");
+ try {
+ document.getElementById("google-maps").setAttribute("style", "filter: invert(90%) hue-rotate(180deg); border: 0;");
+ } catch(err) {
+ // Page not selected
+ }
+ } else {
+ document.getElementById("facebook-link").setAttribute("class", "social-link");
+ document.getElementById("instagram-link").setAttribute("class", "social-link");
+ document.getElementById("github-link").setAttribute("class", "social-link");
+ try {
+ document.getElementById("google-maps").setAttribute("style", "border: 0;");
+ } catch(err) {
+ // Page not selected
+ }
+ }
+}
+
+function setTheme() {
+ "use strict";
+ const prefersLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
+ const isDarkMode = localStorage.getItem("darkMode") === "true" || (localStorage.getItem("darkMode") !== "false" && !prefersLightMode);
+
+ document.documentElement.classList.toggle("dark", isDarkMode);
+ document.documentElement.classList.toggle("light", !isDarkMode);
+}
+
+function setThemeToggle() {
+ "use strict";
+ const isDarkMode = document.documentElement.classList.contains("dark");
+ if (isDarkMode) {
+ document.getElementById("themeToggle").checked = true;
+ document.getElementById("facebook-link").setAttribute("class", "image-inverted social-link");
+ document.getElementById("instagram-link").setAttribute("class", "image-inverted social-link");
+ document.getElementById("github-link").setAttribute("class", "image-inverted social-link");
+ try {
+ document.getElementById("google-maps").setAttribute("style", "filter: invert(90%) hue-rotate(180deg); border: 0;");
+ } catch(err) {
+ // Page not selected
+ }
+ }
+}
diff --git a/web/templates/about.html b/web/templates/about.html
index 9d100b8..dde0399 100644
--- a/web/templates/about.html
+++ b/web/templates/about.html
@@ -9,7 +9,7 @@
{% translate "Generel info" %}
{% translate "Baren har åbent" %} {% translate "alle" context "Baren har åbent alle fredage..." %} {% translate "fredage fra klokken 15.00 til vi lukker." %}
-
+
@@ -35,7 +35,7 @@
{% translate "Postadresse" %}
{% translate "Bestyrelsen kan kontaktes på" %} best@fredagscafeen.dk
diff --git a/web/templates/base.html b/web/templates/base.html index 4dacfe0..d4889bc 100644 --- a/web/templates/base.html +++ b/web/templates/base.html @@ -15,6 +15,7 @@
Fredagscaféen
+
{% if LANGUAGE_CODE == 'da' %}
@@ -24,9 +25,15 @@
{% endif %}
+
+
+
+
@@ -24,9 +25,15 @@ 