diff --git a/static/css/base.css b/static/css/base.css index 2f4bc80..bc8c7e3 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -144,8 +144,8 @@ input[type="radio"] { float: left; border: 0px; border-radius: 10px; - padding-top: 25px; - padding-bottom: 25px; + height: 56px; + margin-top: 7px; background-color: var(--bg-nxt); color: var(--fg-nxt); font-weight: bold; @@ -179,6 +179,7 @@ input[type="radio"] { #next { min-width: 100%; + margin-top: 20px; } #questions { @@ -194,6 +195,14 @@ input[type="radio"] { .b { font-size: small; } + + .toggle { + min-width: 100%; + } + + .toggle_label { + min-width: 100%;; + } } @media (prefers-color-scheme: dark) { @@ -246,3 +255,111 @@ input[type="radio"] { color: var(--fg-lnk) !important; } } + +#toggle_checkbox { + display: none; +} + +.spacer { + width: 10%; + float: left; +} + +.toggle { + width: 10%; + float: left; + display: none; +} + +.toggle_label { + display: block; + position: relative; + top: 35px; + right: 0; + left: 0; + width: 80%; + height: 56px; + margin: 0 auto; + background-color: var(--bg-ab); + border-radius: 25px; + transform: translateY(-50%); + cursor: pointer; + transition: 0.3s ease background-color; + overflow: hidden; +} + +#star { + position: absolute; + top: 13px; + left: 13px; + width: 30px; + height: 30px; + transform: scale(1); + border-radius: 50%; + transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color; + z-index: 1; +} + +#star-1 { + position: relative; +} + +#star-2 { + position: absolute; + transform: rotateZ(36deg); +} + +.star { + top: 0; + left: -7px; + font-size: 54px; + line-height: 28px; + color: var(--bg-a); + transition: 0.3s ease color; +} + +#moon { + position: absolute; + bottom: -52px; + right: 8px; + width: 40px; + height: 40px; + background-color: var(--bg-a); + border-radius: 50%; + transition: 0.3s ease bottom; +} + +#moon:before { + content: ""; + position: absolute; + top: -12px; + left: -17px; + width: 40px; + height: 40px; + background-color: var(--bg-ab); + border-radius: 50%; + transition: 0.3s ease background-color; +} + +#toggle_checkbox:checked+label { + background-color: var(--bg-b); +} + +#toggle_checkbox:checked+label #star { + top: 0px; + left: 640px; + transform: scale(0.3); + background-color: var(--bg); +} + +#toggle_checkbox:checked+label .star { + color: var(--bg-a); +} + +#toggle_checkbox:checked+label #moon { + bottom: 8px; +} + +#toggle_checkbox:checked+label #moon:before { + background-color: var(--bg-b); +} \ No newline at end of file diff --git a/static/css/dark.css b/static/css/colors.css similarity index 56% rename from static/css/dark.css rename to static/css/colors.css index 71e48fa..2cbcb87 100644 --- a/static/css/dark.css +++ b/static/css/colors.css @@ -1,4 +1,29 @@ :root { + --bg: #E7E5E2; + --fg: #243233; + --br: #243233; + --fg-lnk: #8FA3A9; + + --bg-header: #8FA3A9; + --fg-header: #243233; + --bg-ab: #89A6C0; + + --bg-a: #F7D214; + --fg-a: #243233; + --bg-b: #243233; + --fg-b: #F7D214; + + --bg-ab-chkd: #B3472B; + --fg-ab-chkd: #E7E5E2; + --br-ab-chkd: #000000; + + --fg-sep: #243233; + --fg-que: #243233; + --bg-nxt: #8FA3A9; + --fg-nxt: #243233; +} + +[data-theme="dark"] { --bg: #243233; --fg: #E7E5E2; --br: #E7E5E2; diff --git a/static/css/light.css b/static/css/light.css deleted file mode 100644 index e6dbae5..0000000 --- a/static/css/light.css +++ /dev/null @@ -1,24 +0,0 @@ -:root { - --bg: #E7E5E2; - --fg: #243233; - --br: #243233; - --fg-lnk: #8FA3A9; - - --bg-header: #8FA3A9; - --fg-header: #243233; - --bg-ab: #89A6C0; - - --bg-a: #F7D214; - --fg-a: #243233; - --bg-b: #243233; - --fg-b: #F7D214; - - --bg-ab-chkd: #B3472B; - --fg-ab-chkd: #E7E5E2; - --br-ab-chkd: #000000; - - --fg-sep: #243233; - --fg-que: #243233; - --bg-nxt: #8FA3A9; - --fg-nxt: #243233; -} diff --git a/static/js/toggle.js b/static/js/toggle.js new file mode 100644 index 0000000..4b81c65 --- /dev/null +++ b/static/js/toggle.js @@ -0,0 +1,34 @@ +function initToggle() { + const toggleSwitch = document.querySelector('.toggle input[type="checkbox"]'); + const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null; + + function switchTheme(e) { + if (e.target.checked) { + document.documentElement.setAttribute('data-theme', 'dark'); + localStorage.setItem('theme', 'dark'); //add this + } + else { + document.documentElement.setAttribute('data-theme', 'light'); + localStorage.setItem('theme', 'light'); //add this + } + } + + toggleSwitch.addEventListener('change', switchTheme, false); + + if (currentTheme) { + document.documentElement.setAttribute('data-theme', currentTheme); + + if (currentTheme === 'dark') { + toggleSwitch.checked = true; + } else { + toggleSwitch.checked = false; + } + } + + document.querySelectorAll('.spacer').forEach(function (el) { + el.style.display = 'none'; + }); + document.querySelectorAll('.toggle').forEach(function (el) { + el.style.display = 'unset'; + }); +} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index c8e29bc..ccc2cac 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,14 +1,15 @@ <!DOCTYPE html> -<html lang="{{ lang }}"> +{%- if theme == "light" %} +<html lang="{{ lang }}" data-theme="dark"> +{%- else %} +<html lang="{{ lang }}" data-theme="light"> +{%- endif %} <head> <title>{{ title }}</title> + <script src="/js/toggle.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="/css/base.css?t={{ epoch }}"> - {%- if theme == "light" %} - <link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}"> - {%- else %} - <link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}"> - {%- endif %} + <link rel="stylesheet" type="text/css" href="/css/colors.css?t={{ epoch }}"> <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}"> <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}"> <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}"> @@ -45,13 +46,29 @@ <div id="footer"> <div id="questions">{{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}<br><a href="mailto:{{ mailto }}">Einreichen!</a></div> - <div class="separator"> </div> + <div class="spacer"> </div> + <div class="toggle"> + {%- if theme == "light" %} + <input type="checkbox" id="toggle_checkbox"> + {%- else %} + <input type="checkbox" id="toggle_checkbox" checked="checked"> + {%- endif %} + <label for="toggle_checkbox" class="toggle_label"> + <div id="star"> + <div class="star" id="star-1">★</div> + <div class="star" id="star-2">★</div> + </div> + <div id="moon"></div> + </label> + </div> <form action="/" method="get"> <input type="hidden" name="t" value="{{ epoch }}"> <button id="next" type="submit">{{ more }}</button> </form> </div> </div> + <script type="text/javascript"> + initToggle(); + </script> </body> - </html> \ No newline at end of file