diff --git a/darkmode.js b/darkmode.js index fb4f9af..349c61f 100644 --- a/darkmode.js +++ b/darkmode.js @@ -28,6 +28,7 @@ function getAppliedMode(userPreference) { function setAppliedMode(mode) { document.documentElement.dataset.appliedMode = mode; + themeToggle.checked = getAppliedMode(userPreference) === "dark"; } function togglePreference() { @@ -36,39 +37,6 @@ function togglePreference() { } else if (userPreference === "dark") { userPreference = "light"; } - console.log(userPreference); saveUserPreference(userPreference); setAppliedMode(getAppliedMode(userPreference)); -} - -function toggleDarkMode() { - if (getCookie("darkMode") === "on") document.cookie = "darkMode=off;path=/"; - else document.cookie = "darkMode=on;path=/"; - refreshDarkMode(); -} - -function refreshDarkMode() { - let darkMode = getCookie("darkMode", "off", "/") === "on"; - if (darkMode) { - document.body.classList.add("dark-theme"); - document.getElementById("theme").checked = true; - } else { - if (document.body.classList.contains("dark-theme")) { - document.body.classList.remove("dark-theme"); - } - document.getElementById("theme").checked = false; - } -} - -function getCookie(cookieName, valIfNotExists, path) { - let cookieArray = document.cookie.split(";"); - for (let i = 0; i < cookieArray.length; i++) { - let cookie = cookieArray[i].split("="); - if (cookie[0].trim() === cookieName) { - return cookie[1]; - } - } - console.warn("Cookie \"" + cookieName + "\" does not exist"); - document.cookie = cookieName + "=" + valIfNotExists + ";path=" + path; - return valIfNotExists; } \ No newline at end of file diff --git a/index.html b/index.html index a3fb601..8daaebd 100644 --- a/index.html +++ b/index.html @@ -58,11 +58,11 @@

Signature Card Creator

-
- +
@@ -96,14 +96,14 @@
-
+

- +
@@ -125,19 +125,5 @@ - \ No newline at end of file diff --git a/install/assets/img1.png b/install/assets/img1.png index 6f5495a..89e2a74 100644 Binary files a/install/assets/img1.png and b/install/assets/img1.png differ diff --git a/install/assets/img2.png b/install/assets/img2.png index 2d9f5b6..b47ecd0 100644 Binary files a/install/assets/img2.png and b/install/assets/img2.png differ diff --git a/install/assets/img3.png b/install/assets/img3.png index 9a78bbb..bae2a05 100644 Binary files a/install/assets/img3.png and b/install/assets/img3.png differ diff --git a/install/assets/img4.png b/install/assets/img4.png index d2f5b08..0ab4f07 100644 Binary files a/install/assets/img4.png and b/install/assets/img4.png differ diff --git a/install/index.html b/install/index.html index 33af65a..6a2ed34 100644 --- a/install/index.html +++ b/install/index.html @@ -6,6 +6,7 @@ Install Card + @@ -53,8 +54,7 @@
img3

7. Go to Size and change the height to 1.75". The Width should change automatically to keep in aspect.

img4
-

8. Click OK, then OK again to save it.

-

9. Click OK, and it will now have the newly created business card included in the signatures.

+

8. Click OK, then OK again to save it, and you will now have the newly created business card included in the signatures.

diff --git a/script.js b/script.js index 320ae0f..a81a11a 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,29 @@ +let backendUrl = "https://signature.caiu.org" +let locations = JSON.parse("{}"); +const locationSelector = document.getElementById("location"); + +loadLocations(); +clearForm(); + +document.body.addEventListener("dragover", dragOverHandler, false); +document.body.addEventListener("dragleave", dragLeaveHandler, false); +document.querySelectorAll('input[name = outlookVer]').forEach((element) => { + element.addEventListener("click", (e) => { + document.getElementById("outlookDiv").classList.remove("missing-info"); + }, false); +}); +locationSelector.addEventListener("click", (e) => { + locationSelector.classList.remove("missing-info"); +}, false); +document.getElementById("dottedDiv").addEventListener("click", (e) => { + document.getElementById("existingFile").click(); +}, false); +document.getElementById("fade").addEventListener("click", exitUpload, false); +document.getElementById("editCardBtn").addEventListener("click", loadFromExistingCard, false); +document.getElementById("formSubmit").addEventListener("click", submitForm, false); +document.getElementById("existingFile").addEventListener("input", handleInput, false); +document.getElementById("uploadDiv").addEventListener("drop", dropHandler, false); + function handleCheckbox() { const extensionInput = document.getElementById("extensionInput"); const directLineInput = document.getElementById("directLineInput"); @@ -12,9 +38,6 @@ function handleCheckbox() { } } -let backendUrl = "https://signature.caiu.org" -let locations = JSON.parse("{}"); - function loadLocations() { let locationsList = document.getElementById("location"); @@ -29,6 +52,7 @@ function loadLocations() { response.text().then(text => { locations = JSON.parse(text); locationsList.innerText = ""; + locationsList.options[0] = new Option("--- Select ---", "default"); for (let i = 0; i < locations.length; i++) { locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id); } @@ -47,6 +71,19 @@ function clearForm() { } function submitForm() { + let missing = false; + if (locationSelector.value === "default") { + locationSelector.classList.add("missing-info"); + missing = true; + } + if (document.querySelector('input[name = outlookVer]:checked') == null) { + document.getElementById("outlookDiv").classList.add("missing-info"); + missing = true; + } + if (missing) { + return; + } + let body = "{" + "\"name\":\"" + document.getElementById("full_name").value + "\"," + @@ -76,7 +113,7 @@ function submitForm() { function downloadImage(arrayBuffer) { const blob = new Blob([arrayBuffer], { type: "image/png" }); - const cardElement = document.getElementById("vcard"); + const cardElement = document.getElementById("card"); const imgElement = document.getElementById("cardImg"); let urlCreator = window.URL || window.webkitURL; @@ -140,6 +177,10 @@ function handleInput() { } function loadFromExistingCard() { + if (document.getElementById("editCardBtn").classList.contains("disabled")) { + return; + } + exitUpload(); const data = new FormData(); data.append("card", document.getElementById("existingFile").files[0]); diff --git a/stylesheet.css b/stylesheet.css index 7cc4b43..501d38e 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -76,14 +76,12 @@ body { text-align: left; color: var(--text-color); background-color: var(--background-color); - transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur); } header { display: flex; justify-content: space-between; align-items: center; background-color: var(--theme-blue); - transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur); } main { @@ -93,6 +91,7 @@ main { footer { text-align: center; font-size: 12px; + margin-bottom: 1em; } button { @@ -110,7 +109,6 @@ input { font-size: inherit; line-height: inherit; overflow: visible; - transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out; } textarea { @@ -119,7 +117,6 @@ textarea { font-size: inherit; line-height: inherit; background-color: var(--theme-blue); - transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur); } select { @@ -128,6 +125,7 @@ select { font-size: inherit; line-height: inherit; text-transform: none; + cursor: pointer; } label { @@ -178,7 +176,6 @@ h1, h2, h3, h4, h5, h6 { color: #fff; background-color: var(--theme-green); border-color: var(--theme-green-accent); - transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur-fast); } .btn-primary:hover:not(:disabled):not(.disabled) { background-color: var(--theme-green-accent); @@ -194,6 +191,7 @@ select.form-control:not([size]):not([multiple]) { input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; + cursor: pointer; } [type="reset"], [type="submit"], button, html [type="button"] { @@ -228,7 +226,6 @@ input[type="checkbox"], input[type="radio"] { background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; - transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out, border-color var(--trans-dur) ease-in-out, box-shadow .15s ease-in-out; } .logo { @@ -293,6 +290,11 @@ input[type="checkbox"], input[type="radio"] { text-decoration:none; } +.missing-info { + border: solid 2px var(--danger) !important; + border-radius: .25rem; +} + .card { margin: auto; width: 24em; @@ -311,13 +313,12 @@ input[type="checkbox"], input[type="radio"] { .x { border-radius: 50%; padding: .75em; - background: var(--theme-blue); - border: 2px solid var(--theme-black); + background: var(--theme-green); + border: 2px solid var(--theme-green-accent); position: absolute; right: -1.5em; top: -1.5em; text-decoration: none; - transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur); } .x div { @@ -325,9 +326,8 @@ input[type="checkbox"], input[type="radio"] { width: 16px; font-size: 1.5rem; text-align: center; - color: var(--text-color-negative); + color: var(--text-color); line-height: 8px !important; - transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur); } .upload { @@ -347,7 +347,6 @@ input[type="checkbox"], input[type="radio"] { left: 50%; top: 14em; margin-left: -20em; - transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur); } .upload img {