Dark mode ?

2023-05-15 16:13:18 -04:00 · 2023-05-15 16:13:18 -04:00 · bca7ae0a8c
commit bca7ae0a8c
parent b9a7e7a2dd
5 changed files with 373 additions and 10 deletions
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@ -0,0 +1,16 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="transform" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>
--- a/index.html
+++ b/index.html
@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheet.css">
+    <link rel="stylesheet" href="/static/css/darkmode.css">
    <title>*DEV* CAIU VCard Creator *DEV*</title>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
@ -40,6 +41,24 @@
            <input type="file" accept="image/png" class="nav-align" id="existingFile" name="existingFile">
            <button class="btn btn-primary nav-align" id="getFileDataBtn">Edit</button>
        </div>
+        <div class="nav-container">
+            <label for="theme" class="theme nav-align">
+                <span class="toggle-wrap">
+                    <input id="theme" class="toggle" type="checkbox" role="switch" name="theme" value="dark">
+                    <span class="icon">
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                    </span>
+                </span>
+            </label>
+        </div>
    </nav>

    <main class="page contact-page">
@ -104,6 +123,7 @@
        document.getElementById("checkBackendButton").addEventListener("click", checkBackend, false);
        document.getElementById("getFileDataBtn").addEventListener("click", loadFromExistingCard, false);
        document.getElementById("formSubmit").addEventListener("click", submitForm, false);
+        document.getElementById("theme").addEventListener("click", toggleDarkMode, false);
    </script>
 </body>
 </html>
--- a/script.js
+++ b/script.js
@ -37,7 +37,6 @@ function submitForm() {
        mode: 'cors',
        Headers: {
            'Accept': 'image/png',
-            'Content-Type': 'application/json'
        },
        body: body
    }).then(async response => {
@ -46,18 +45,32 @@ function submitForm() {
 }

 function loadFromExistingCard() {
+    const data = new FormData();
+    data.append("card", document.getElementById("existingFile").files[0]);
+
    fetchWithTimeout(backendUrl + "/backend/edit", {
        timeout: 5000,
        method: 'POST',
        mode: 'cors',
-        Headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'image/png'
+        headers: {
+            'Accept': 'application/json'
        },
-        body: document.getElementById("existingFile").files[0]
-    }).then(response => response.json(res => {
-
-    }))
+        body: data
+    }).then(response => response.json()).then(json => {
+        document.getElementById("full_name").value = json.Name;
+        document.getElementById("title").value = json.Title;
+        document.getElementById("email").value = json.Email;
+        document.getElementById("location").value = json.Location;
+        if (json.Extension === "") {
+            let directLineCheckbox = document.getElementById("directLineCheckbox");
+            if (directLineCheckbox.value === "on") {
+                document.getElementById("directLine").value = json.DirectNumber;
+            }
+        } else {
+            document.getElementById("extension").value = json.Extension;
+        }
+        document.getElementById("cellNumber").value = json.CellNumber;
+    });
 }

 function getLocations() {
@ -161,4 +174,37 @@ function downloadImage(arrayBuffer) {
    setTimeout(() => {
        URL.revokeObjectURL(link.href);
    }, 100);
+}
+
+function toggleDarkMode() {
+    const darkMode = document.body.classList.contains("dark-theme");
+    if (darkMode) {
+        document.body.classList.remove("dark-theme");
+    } else {
+        document.body.classList.add("dark-theme");
+    }
+}
+
+function getCookie(cookieName) {
+    let cookieArray = document.cookie.split(";");
+    for (let i = 0; i < cookieArray.length; i++) {
+        let cookie = cookieArray[i].split("=");
+        if (cookie[0] === cookieName) {
+            return cookie[1];
+        }
+    }
+    console.log("Unable to get cookie ", cookieName);
+    return "";
+}
+
+function setCookie(cookieName, cookieValue) {
+    let cookieArray = document.cookie.split(";");
+    for (let i = 0; i < cookieArray.length; i++) {
+        let cookie = cookieArray[i].split("=");
+        if (cookie[0] === cookieName) {
+            cookie[1] = cookieValue;
+            document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
+            console.log("Set backendUrl to ", backendUrl);
+        }
+    }
 }
--- a/static/css/darkmode.css
+++ b/static/css/darkmode.css
@ -0,0 +1,266 @@
+:root {
+    --trans-dur: 0.3s;
+}
+
+/* Default */
+.theme {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.icon,
+.toggle {
+    z-index: 1;
+}
+
+.icon,
+.icon-part {
+    position: absolute;
+}
+
+.icon {
+    display: block;
+    top: 0.75em;
+    left: 0.75em;
+    width: 1.5em;
+    height: 1.5em;
+    -webkit-transition: var(--trans-dur);
+    transition: var(--trans-dur);
+}
+
+.icon-part {
+    border-radius: 50%;
+    -webkit-box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;
+    box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+    width: 1em;
+    height: 1em;
+    -webkit-transition: opacity var(--trans-dur) ease-in-out,
+    -webkit-box-shadow var(--trans-dur) ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: opacity var(--trans-dur) ease-in-out,
+    -webkit-box-shadow var(--trans-dur) ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: box-shadow var(--trans-dur) ease-in-out,
+    opacity var(--trans-dur) ease-in-out,
+    transform var(--trans-dur) ease-in-out;
+    transition: box-shadow var(--trans-dur) ease-in-out,
+    opacity var(--trans-dur) ease-in-out,
+    transform var(--trans-dur) ease-in-out,
+    -webkit-box-shadow var(--trans-dur) ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    -webkit-transform: scale(0.5);
+    -ms-transform: scale(0.5);
+    transform: scale(0.5);
+}
+
+.icon-part ~ .icon-part {
+    background-color: hsl(0,0%,100%);
+    border-radius: 0.05em;
+    top: 50%;
+    left: calc(50% - 0.05em);
+    -webkit-transform: rotate(0deg) translateY(0.5em);
+    -ms-transform: rotate(0deg) translateY(0.5em);
+    transform: rotate(0deg) translateY(0.5em);
+    -webkit-transform-origin: 50% 0;
+    -ms-transform-origin: 50% 0;
+    transform-origin: 50% 0;
+    width: 0.1em;
+    height: 0.2em;
+}
+
+.icon-part:nth-child(3) {
+    -webkit-transform: rotate(45deg) translateY(0.45em);
+    -ms-transform: rotate(45deg) translateY(0.45em);
+    transform: rotate(45deg) translateY(0.45em);
+}
+
+.icon-part:nth-child(4) {
+    -webkit-transform: rotate(90deg) translateY(0.45em);
+    -ms-transform: rotate(90deg) translateY(0.45em);
+    transform: rotate(90deg) translateY(0.45em);
+}
+
+.icon-part:nth-child(5) {
+    -webkit-transform: rotate(135deg) translateY(0.45em);
+    -ms-transform: rotate(135deg) translateY(0.45em);
+    transform: rotate(135deg) translateY(0.45em);
+}
+
+.icon-part:nth-child(6) {
+    -webkit-transform: rotate(180deg) translateY(0.45em);
+    -ms-transform: rotate(180deg) translateY(0.45em);
+    transform: rotate(180deg) translateY(0.45em);
+}
+
+.icon-part:nth-child(7) {
+    -webkit-transform: rotate(225deg) translateY(0.45em);
+    -ms-transform: rotate(225deg) translateY(0.45em);
+    transform: rotate(225deg) translateY(0.45em);
+}
+
+.icon-part:nth-child(8) {
+    -webkit-transform: rotate(270deg) translateY(0.5em);
+    -ms-transform: rotate(270deg) translateY(0.5em);
+    transform: rotate(270deg) translateY(0.5em);
+}
+
+.icon-part:nth-child(9) {
+    -webkit-transform: rotate(315deg) translateY(0.5em);
+    -ms-transform: rotate(315deg) translateY(0.5em);
+    transform: rotate(315deg) translateY(0.5em);
+}
+
+.label,
+.toggle,
+.toggle-wrap {
+    position: relative;
+}
+
+.toggle,
+.toggle:before {
+    display: block;
+}
+
+.toggle {
+    background-color: hsl(48,90%,85%);
+    border-radius: 25% / 50%;
+    -webkit-box-shadow: 0 0 0 0.125em var(--secondary);
+    box-shadow: 0 0 0 0.125em var(--secondary);
+    padding: 0.25em !important;
+    width: 6em;
+    height: 3em;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-transition: background-color var(--trans-dur) ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: background-color var(--trans-dur) ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: background-color var(--trans-dur) ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    transform var(--trans-dur) ease-in-out;
+    transition: background-color var(--trans-dur) ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    transform var(--trans-dur) ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+}
+
+.toggle:before {
+    background-color: hsl(48,90%,55%);
+    border-radius: 50%;
+    content: "";
+    width: 2.5em;
+    height: 2.5em;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+}
+
+.toggle:focus {
+    -webkit-box-shadow: 0 0 0 0.125em var(--primary);
+    box-shadow: 0 0 0 0.125em var(--primary);
+    outline: transparent;
+}
+
+/* Checked */
+.toggle:checked {
+    background-color: hsl(198,90%,15%);
+}
+
+.toggle:checked:before,
+.toggle:checked ~ .icon {
+    -webkit-transform: translateX(3em);
+    -ms-transform: translateX(3em);
+    transform: translateX(3em);
+}
+
+.toggle:checked:before {
+    background-color: hsl(198,90%,55%);
+}
+
+.toggle:checked ~ .icon .icon-part:nth-child(1) {
+    -webkit-box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;
+    box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    top: 0.25em;
+    left: 0.25em;
+}
+
+.toggle:checked ~ .icon .icon-part ~ .icon-part {
+    opacity: 0;
+}
+
+.toggle:checked ~ .icon .icon-part:nth-child(2) {
+    -webkit-transform: rotate(45deg) translateY(0.8em);
+    -ms-transform: rotate(45deg) translateY(0.8em);
+    transform: rotate(45deg) translateY(0.8em);
+}
+
+.toggle:checked ~ .icon .icon-part:nth-child(3) {
+    -webkit-transform: rotate(90deg) translateY(0.8em);
+    -ms-transform: rotate(90deg) translateY(0.8em);
+    transform: rotate(90deg) translateY(0.8em);
+}
+
+.toggle:checked ~ .icon .icon-part:nth-child(4) {
+    -webkit-transform: rotate(135deg) translateY(0.8em);
+    -ms-transform: rotate(135deg) translateY(0.8em);
+    transform: rotate(135deg) translateY(0.8em);
+}
+
+.toggle:checked ~ .icon .icon-part:nth-child(5) {
+    -webkit-transform: rotate(180deg) translateY(0.8em);
+    -ms-transform: rotate(180deg) translateY(0.8em);
+    transform: rotate(180deg) translateY(0.8em);
+}
+
+.toggle:checked ~ .icon .icon-part:nth-child(6) {
+    -webkit-transform: rotate(225deg) translateY(0.8em);
+    -ms-transform: rotate(225deg) translateY(0.8em);
+    transform: rotate(225deg) translateY(0.8em);
+}
+
+.toggle:checked ~ .icon .icon-part:nth-child(7) {
+    -webkit-transform: rotate(270deg) translateY(0.8em);
+    -ms-transform: rotate(270deg) translateY(0.8em);
+    transform: rotate(270deg) translateY(0.8em);
+}
+
+.toggle:checked ~ .icon .icon-part:nth-child(8) {
+    -webkit-transform: rotate(315deg) translateY(0.8em);
+    -ms-transform: rotate(315deg) translateY(0.8em);
+    transform: rotate(315deg) translateY(0.8em);
+}
+
+.toggle:checked ~ .icon .icon-part:nth-child(9) {
+    -webkit-transform: rotate(360deg) translateY(0.8em);
+    -ms-transform: rotate(360deg) translateY(0.8em);
+    transform: rotate(360deg) translateY(0.8em);
+}
+
+.toggle-wrap {
+    margin: 0 0.75em;
+}
+
+@supports selector(:focus-visible) {
+    .toggle:focus {
+        -webkit-box-shadow: 0 0 0 0.125em var(--secondary);
+        box-shadow: 0 0 0 0.125em var(--secondary);
+    }
+
+    .toggle:focus-visible {
+        -webkit-box-shadow: 0 0 0 0.125em var(--primary);
+        box-shadow: 0 0 0 0.125em var(--primary);
+    }
+}
--- a/stylesheet.css
+++ b/stylesheet.css
@ -1,3 +1,18 @@
+:root {
+  --text-color: #212529;
+  --background-color: #ffffff;
+}
+
+.dark-theme {
+  --text-color: #ffffff;
+  --background-color: #212121;
+}
+
+body {
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
 .nav-align {
  width: fit-content;
  vertical-align: middle;
@ -41,9 +56,9 @@
 }

 .connected {
-  background: #28a745;
+  background: var(--success);
 }

 .disconnected {
-  background: #dc3545;
+  background: var(--danger);
 }