New UI Finished!

darkmode.js

@@ -2,14 +2,15 @@ document.getElementById("theme").addEventListener("click", toggleDarkMode, false
 
 refreshDarkMode()
 
+
 function toggleDarkMode() {
-    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
+    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off;path=/";
-    else document.cookie = "darkMode=on";
+    else document.cookie = "darkMode=on;path=/";
     refreshDarkMode();
 }
 
 function refreshDarkMode() {
-    let darkMode = getCookie("darkMode") === "on";
+    let darkMode = getCookie("darkMode", "off", "/") === "on";
     if (darkMode) {
         document.body.classList.add("dark-theme");
         document.getElementById("theme").checked = true;
@@ -21,7 +22,7 @@ function refreshDarkMode() {
     }
 }
 
-function getCookie(cookieName) {
+function getCookie(cookieName, valIfNotExists, path) {
     let cookieArray = document.cookie.split(";");
     for (let i = 0; i < cookieArray.length; i++) {
         let cookie = cookieArray[i].split("=");
@@ -30,6 +31,6 @@ function getCookie(cookieName) {
         }
     }
     console.warn("Cookie \"" + cookieName + "\" does not exist");
-    document.cookie = cookieName + "=";
+    document.cookie = cookieName + "=" + valIfNotExists + ";path=" + path;
-    return "";
+    return valIfNotExists;
 }

index.html

@@ -112,17 +112,31 @@
 
     <div class="hidden fade" id="fade"></div>
     <div class="upload hidden" id="uploadDiv">
-        <div class="dotted">
+        <a class="x h3" href="javascript:exitUpload()">
-            <label for="existingFile">Click or drag here to edit existing card</label>
+            <div>x</div>
+        </a>
+        <div class="dotted" id="dottedDiv">
+            <label for="existingFile" id="uploadLabel">Click or drag here to edit existing card</label>
+            <img src="" alt="card" class="hidden" id="previewImg">
         </div>
+        <button class="btn btn-primary disabled" id="editCardBtn">Edit Signature Card</button>
     </div>
     <input style="display: none" id="existingFile" type="file" accept="image/png" name="existingFile">
     <script src="script.js"></script>
     <script src="darkmode.js"></script>
     <script>
+        clearForm();
         loadLocations();
-
+        document.getElementById("fade").addEventListener("click", exitUpload, false);
+        document.getElementById("editCardBtn").addEventListener("click", loadFromExistingCard, false);
         document.getElementById("formSubmit").addEventListener("click", submitForm, false);
+        document.getElementById("dottedDiv").addEventListener("click", (e) => {
+            document.getElementById("existingFile").click();
+        }, false);
+        document.getElementById("existingFile").addEventListener("input", handleInput, false);
+        document.body.addEventListener("dragover", dragOverHandler, false);
+        document.body.addEventListener("dragleave", dragLeaveHandler, false);
+        document.getElementById("uploadDiv").addEventListener("drop", dropHandler, false);
     </script>
 </body>
 </html>

install/index.html

@@ -39,19 +39,25 @@
     </ul>
   </nav>
 
-
-
   <main>
+    <h1 class="text-center title">Signature Card Installation Guide</h1>
     <article>
-      <h1 class="text-center">Signature Card Installation Guide</h1>
+      <p>1. Open up Outlook and create a new email.</p>
-      <figure>Fig</figure>
+      <p>2. Select the drop-down arrow under Signature along the top bar and select "Signatures"</p>
-      <p>P</p>
+      <figure><img src="assets/img1.png" alt="img1" width="60%"></figure>
+      <p>3. In the Signatures and Stationary window that appears, click "New" and name it whatever name you'd like for it.</p>
+      <p>4. Click the icon next to "Business Card" it will prompt you for a picture to load. Select the png of the business card you created.</p>
+      <p>5. Click the drop-down boxes next to both New Messages and Replies / Forwards and select the name of the signature.</p>
+      <figure><img src="assets/img2.png" alt="img2" width="60%"></figure>
+      <p>6. Left click, then right-click on the picture and select picture</p>
+      <figure><img src="assets/img3.png" alt="img3" width="60%"></figure>
+      <p>7. Go to Size and change the height to 1.75". The Width should change automatically to keep in aspect.</p>
+      <figure><img src="assets/img4.png" alt="img4" width="60%"></figure>
+      <p>8. Click OK, then OK again to save it.</p>
+      <p>9. Click OK, and it will now have the newly created business card included in the signatures.</p>
     </article>
-    <section>Sec</section>
   </main>
 
-
-
   <footer>Made by the best intern!</footer>
   <script src="../darkmode.js"></script>
 </body>

prod/index.html

@@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="icon" href="/favicon.ico">
-  <link rel="stylesheet" href="stylesheet.css">
-  <title>CAIU Signature Card</title>
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const inputs = Array.from(
-              document.querySelectorAll('input[name=extension], input[name=cellNumber], input[name=directLine]')
-      );
-      const inputListener = e => {
-        inputs.filter(i => i !== e.target).forEach(i => (i.required = !e.target.value.length));
-      };
-
-      inputs.forEach(i => i.addEventListener('input', inputListener));
-    });
-  </script>
-</head>
-<body>
-
-<nav id="navbar" class="navbar navbar-light">
-  <a class="navbar-brand" href="#">
-    <img src="logo.png" alt="CAIU Logo">
-  </a>
-  <div class="nav-container">
-    <label class="nav-align" for="existingFile">Edit Existing Card</label>
-    <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">
-  <section class="portfolio-block contact">
-    <div class="container">
-      <h1 class="text-center mt-5 mb-5 h1">Signature Card Creator</h1>
-      <div class="card">
-        <a id="vcard" href="#" style="display: none">
-          <img class="card" id="cardImg"/>
-        </a>
-      </div>
-      <label for="vcard" class="text-center"></label>
-      <div class="form-group mt-5">
-        <div class="form-group">
-          <label for="full_name">Full Name &amp; Credentials</label>
-          <input type="text" class="form-control" id="full_name" name="full_name" maxlength="36" required="">
-        </div>
-        <div class="form-group">
-          <label for="title">Title</label>
-          <input type="text" class="form-control" id="title" name="title" maxlength="48" required="">
-        </div>
-        <div class="form-group">
-          <label for="email">Email</label>
-          <input type="email" class="form-control" id="email" name="email" required="">
-        </div>
-        <div class="form-group">
-          <label for="location">Location:</label>
-          <select class="form-control" id="location" name="location"></select>
-        </div>
-        <div class="form-group">
-          <input type="checkbox" id="directLineCheckbox" onclick="handleCheckbox()">
-          <label for="directLineCheckbox">Direct Line</label>
-        </div>
-        <div class="form-group" id="directLineInput" style="display:none">
-          <label for="directLine">Direct Line:</label>
-          <input type="text" class="form-control" id="directLine" name="directLine" maxlength="15" required="">
-        </div>
-        <div class="form-group" id="extensionInput">
-          <label for="extension">Extension</label>
-          <input type="tel" class="form-control" id="extension" name="extension" required="">
-        </div>
-        <div class="form-group">
-          <label for="cellNumber">Cell Number</label>
-          <input type="tel" class="form-control" id="cellNumber" name="cellNumber" maxlength="15" required="">
-        </div>
-        <div class="form-group">
-          <input type="radio" id="o365" name="outlookVer" value="1">
-          <label id="o365Label" for="o365">MS Office 365</label>
-          <br>
-          <input type="radio" id="o2016" name="outlookVer" value="0">
-          <label id="o2016Label" for="o2016">MS Office 2016</label>
-        </div>
-        <button class="btn btn-primary" id="formSubmit">Generate VCard</button>
-      </div>
-    </div>
-  </section>
-</main>
-
-<script src="script.js"></script>
-<script>
-  refreshDarkMode();
-  loadLocations();
-
-  document.getElementById("getFileDataBtn").addEventListener("click", loadFromExistingCard, false);
-  document.getElementById("formSubmit").addEventListener("click", submitForm, false);
-  document.getElementById("theme").addEventListener("click", toggleDarkMode, false);
-</script>
-</body>
-</html>

prod/script.js

@@ -1,160 +0,0 @@
-function handleCheckbox() {
-    const extensionInput = document.getElementById("extensionInput");
-    const directLineInput = document.getElementById("directLineInput");
-    if (document.getElementById("directLineCheckbox").checked) {
-        extensionInput.style.display = "none";
-        directLineInput.style.display = "block";
-        document.getElementById("extension").value = "";
-    } else {
-        extensionInput.style.display = "block";
-        directLineInput.style.display = "none";
-        document.getElementById("directLine").value = "";
-    }
-}
-
-let backendUrl = "https://vcard.caiu.org/backend"
-let locations = JSON.parse("{}");
-
-function loadLocations() {
-    let locationsList = document.getElementById("location");
-
-    fetchWithTimeout(backendUrl + "/data/locations", {
-        timeout: 5000,
-        method: 'GET',
-        mode: 'cors',
-        headers: {
-            'Accept': 'application/json'
-        }
-    }).then(response => {
-        response.text().then(text => {
-            locations = JSON.parse(text);
-            locationsList.innerText = "";
-            for (let i = 0; i < locations.length; i++) {
-                locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
-            }
-        })
-    });
-}
-
-function submitForm() {
-    let body =
-        "{" +
-        "\"name\":\"" + document.getElementById("full_name").value + "\"," +
-        "\"title\":\"" + document.getElementById("title").value + "\"," +
-        "\"email\":\"" + document.getElementById("email").value + "\"," +
-        "\"locationId\":\"" + document.getElementById("location").value + "\"," +
-        "\"extension\":\"" + document.getElementById("extension").value + "\"," +
-        "\"directNumber\":\"" + document.getElementById("directLine").value + "\"," +
-        "\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," +
-        "\"size\":" + document.querySelector('input[name = outlookVer]:checked').value +
-        "}";
-
-    fetchWithTimeout(backendUrl + "/generate", {
-        timeout: 5000,
-        method: 'POST',
-        mode: 'cors',
-        Headers: {
-            'Accept': 'image/png',
-        },
-        body: body
-    }).then(async response => {
-        downloadImage(await response.arrayBuffer());
-    });
-
-    document.getElementById("full_name").value = "";
-    document.getElementById("title").value = "";
-    document.getElementById("email").value = "";
-    document.getElementById("extension").value = "";
-    document.getElementById("directLine").value = "";
-    document.getElementById("cellNumber").value = "";
-}
-
-function downloadImage(arrayBuffer) {
-    const blob = new Blob([arrayBuffer], { type: "image/png" });
-    const cardElement = document.getElementById("vcard");
-    const imgElement = document.getElementById("cardImg");
-
-    let urlCreator = window.URL || window.webkitURL;
-    let imageUrl = urlCreator.createObjectURL(blob);
-
-    cardElement.href = imageUrl;
-    cardElement.style.display = 'unset';
-    imgElement.src = imageUrl;
-    cardElement.download = "card.png";
-    cardElement.click();
-}
-
-function loadFromExistingCard() {
-    const data = new FormData();
-    data.append("card", document.getElementById("existingFile").files[0]);
-
-    fetchWithTimeout(backendUrl + "/edit", {
-        timeout: 5000,
-        method: 'POST',
-        mode: 'cors',
-        headers: {
-            'Accept': 'application/json'
-        },
-        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 toggleDarkMode() {
-    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
-    else document.cookie = "darkMode=on";
-    refreshDarkMode();
-}
-
-function refreshDarkMode() {
-    let darkMode = getCookie("darkMode") === "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;
-    }
-}
-
-async function fetchWithTimeout(resource, options = {}) {
-    const { timeout = 8000 } = options;
-    const controller = new AbortController();
-    const id = setTimeout(() => controller.abort(), timeout);
-
-    const response = await fetch(resource, {
-        ...options,
-        signal: controller.signal
-    });
-    clearTimeout(id);
-
-    return response;
-}
-
-function getCookie(cookieName) {
-    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 + "=";
-    return "";
-}

prod/stylesheet.css

@@ -1,538 +0,0 @@
-:root {
-    --blue: #007bff;
-    --indigo: #6610f2;
-    --purple: #6f42c1;
-    --pink: #e83e8c;
-    --red: #dc3545;
-    --orange: #fd7e14;
-    --yellow: #ffc107;
-    --green: #28a745;
-    --teal: #20c997;
-    --cyan: #17a2b8;
-    --white: #fff;
-    --gray: #6c757d;
-    --gray-dark: #343a40;
-    --secondary: #6c757d;
-    --success: #28a745;
-    --info: #17a2b8;
-    --warning: #ffc107;
-    --danger: #dc3545;
-    --light: #f8f9fa;
-    --dark: #343a40;
-
-    --theme-blue: #007bff;
-    --theme-dark-blue: hsl(198,90%,15%);
-
-    --breakpoint-xs: 0;
-    --breakpoint-sm: 576px;
-    --breakpoint-md: 768px;
-    --breakpoint-lg: 992px;
-    --breakpoint-xl: 1200px;
-    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-    --text-color: #212529;
-    --background-color: #ffffff;
-    --secondary-color: #f8f9fa !important;
-    --secondary-accent: #495057;
-    --trans-dur: 0.3s;
-}
-* {
-    -webkit-transition: background-color ease .5s, text-color ease .5s, color ease .5s;
-    -moz-transition: background-color ease .5s, text-color ease .5s, color ease .5s;
-    -ms-transition: background-color ease .5s, text-color ease .5s, color ease .5s;
-    -o-transition: background-color ease .5s, text-color ease .5s, color ease .5s;
-    transition: background-color ease .5s, text-color ease .5s, color ease .5s;
-}
-html {
-    font-family: sans-serif;
-    line-height: 1.15;
-    -webkit-text-size-adjust: 100%;
-}
-body {
-    margin: 0;
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    text-align: left;
-    color: var(--text-color);
-    background-color: var(--background-color);
-}
-
-*, ::after, ::before {
-    box-sizing: border-box;
-}
-
-article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
-    display: block;
-}
-
-button, input, optgroup, select, textarea {
-    margin: 0;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-}
-
-button, input {
-    overflow: visible;
-}
-
-button, select {
-    text-transform: none;
-}
-
-label {
-    display: inline-block;
-    margin-bottom: .5rem;
-}
-
-input, textarea {
-    background-color: var(--secondary-color);
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin-top: 0;
-    margin-bottom: .5rem;
-}
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-    margin-bottom: .5rem;
-    font-family: inherit;
-    font-weight: 500;
-    line-height: 1.2;
-    color: inherit;
-}
-.h1, h1 {
-    font-size: 2.5rem;
-}
-.h2, h2 {
-    font-size: 2rem;
-}
-
-.btn {
-    display: inline-block;
-    font-weight: 400;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    border: 1px solid transparent;
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    border-radius: .25rem;
-    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-}
-.btn-primary {
-    color: #fff;
-    background-color: var(--theme-blue);
-    border-color: var(--theme-blue);
-}
-.btn:not(:disabled):not(.disabled) {
-    cursor: pointer;
-}
-
-select.form-control:not([size]):not([multiple]) {
-    height: calc(2.25rem + 2px);
-}
-
-input[type="checkbox"], input[type="radio"] {
-    box-sizing: border-box;
-    padding: 0;
-}
-
-[type="reset"], [type="submit"], button, html [type="button"] {
-    -webkit-appearance: button;
-}
-
-/*--------------------------------------*/
-
-.dark-theme {
-    --text-color: #ffffff;
-    --background-color: #28272d;
-    --secondary-color: #1f1e23 !important;
-    --secondary-accent: #181818;
-}
-
-.text-center {
-    text-align: center !important;
-}
-
-.mt-5, .my-5 {
-    margin-top: 1rem !important;
-}
-
-.mb-5 {
-    margin-bottom: 1rem !important;
-}
-
-.form-group {
-    margin-bottom: 1rem;
-}
-.form-control {
-    display: block;
-    width: 100%;
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    color: var(--text-color);
-    background-color: var(--secondary-color);
-    background-clip: padding-box;
-    border: 1px solid #ced4da;
-    border-radius: .25rem;
-
-    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
-    -moz-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
-    -ms-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
-    -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
-    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
-}
-
-.navbar {
-    background-color: var(--secondary-color);
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    padding: .5rem 1rem;
-}
-
-.navbar-brand{
-    display:inline-block;
-    padding-top:.3125rem;
-    padding-bottom:.3125rem;
-    margin-right:1rem;
-    font-size:1.25rem;
-    line-height:inherit;
-    white-space:nowrap
-}
-
-.navbar-brand:focus, .navbar-brand:hover {
-    text-decoration:none;
-}
-
-.nav-align {
-    width: fit-content;
-    vertical-align: middle;
-    padding-left: 20px;
-    padding-right: 20px;
-    float: right;
-    margin: 0;
-}
-
-.nav-container {
-    display: inline-flex;
-    position: relative;
-    float: right;
-    align-items: center;
-}
-
-.card {
-    margin: auto;
-    width: 24em;
-}
-
-.circle {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    -moz-border-radius: 50%;
-    -webkit-border-radius: 50%;
-    margin-right: 15px;
-    padding: 0 !important;
-}
-
-.loading {
-    width: 40px;
-    height: 40px;
-    border: 5px solid var(--white );
-    border-top: 5px solid var(--theme-blue);
-    border-radius: 50%;
-    -moz-border-radius: 50%;
-    -webkit-border-radius: 50%;
-    animation: spin 1.25s ease-in-out infinite;
-}
-@keyframes spin {
-    0% { transform: rotate(0deg) }
-    100% { transform: rotate(360deg) }
-}
-
-.connected {
-    background: var(--success);
-}
-.disconnected {
-    background: var(--danger);
-}
-
-/*--------------------------------------*/
-
-.container {
-    width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
-    margin-right: auto;
-    margin-left: auto;
-}
-@media (min-width: 576px) {
-    .container {
-        max-width: 540px;
-    }
-}
-@media (min-width: 768px) {
-    .container {
-        max-width: 720px;
-    }
-}
-@media (min-width: 992px) {
-    .container {
-        max-width: 960px;
-    }
-}
-@media (min-width: 1200px) {
-    .container {
-        max-width: 1140px;
-    }
-}
-
-/*---------------------------------------------*/
-
-/* 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 var(--white) inset;
-    box-shadow: 0.4em -0.4em 0 0.5em var(--white) 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: var(--white);
-    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: var(--yellow);
-    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(--theme-blue);
-    box-shadow: 0 0 0 0.125em var(--theme-blue);
-    outline: transparent;
-}
-/* Checked */
-.toggle:checked {
-    background-color: var(--theme-dark-blue);
-}
-.toggle:checked:before,
-.toggle:checked ~ .icon {
-    -webkit-transform: translateX(3em);
-    -ms-transform: translateX(3em);
-    transform: translateX(3em);
-}
-.toggle:checked:before {
-    background-color: var(--theme-blue);
-}
-.toggle:checked ~ .icon .icon-part:nth-child(1) {
-    -webkit-box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset;
-    box-shadow: 0.2em -0.2em 0 0.2em var(--white) 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(--theme-blue);
-        box-shadow: 0 0 0 0.125em var(--theme-blue);
-    }
-}

script.js

@@ -12,7 +12,7 @@ function handleCheckbox() {
     }
 }
 
-let backendUrl = "http://127.0.0.1:8080"
+let backendUrl = "https://vcard.caiu.org"
 let locations = JSON.parse("{}");
 
 function loadLocations() {
@@ -36,6 +36,16 @@ function loadLocations() {
     });
 }
 
+function clearForm() {
+    document.getElementById("full_name").value = "";
+    document.getElementById("title").value = "";
+    document.getElementById("email").value = "";
+    document.getElementById("extension").value = "";
+    document.getElementById("directLine").value = "";
+    document.getElementById("cellNumber").value = "";
+    document.getElementById("existingFile").value = ""
+}
+
 function submitForm() {
     let body =
         "{" +
@@ -60,6 +70,8 @@ function submitForm() {
     }).then(async response => {
         downloadImage(await response.arrayBuffer());
     });
+
+    clearForm();
 }
 
 function downloadImage(arrayBuffer) {
@@ -78,14 +90,57 @@ function downloadImage(arrayBuffer) {
 }
 
 function getCardToEdit() {
-    let uploadDiv = document.getElementById("uploadDiv")
+    let uploadDiv = document.getElementById("uploadDiv");
-    let fadeDiv = document.getElementById("fade")
+    let fadeDiv = document.getElementById("fade");
-    uploadDiv.classList.remove("hidden")
+    uploadDiv.classList.remove("hidden");
-    fadeDiv.classList.remove("hidden")
+    fadeDiv.classList.remove("hidden");
+}
 
+function exitUpload() {
+    document.getElementById("fade").classList.add("hidden");
+    document.getElementById("uploadDiv").classList.add("hidden");
+}
+
+function dragOverHandler(e) {
+    e.preventDefault();
+    document.getElementById("dottedDiv").classList.add("hovering");
+}
+
+function dragLeaveHandler(e) {
+    e.preventDefault();
+    document.getElementById("dottedDiv").classList.remove("hovering");
+}
+
+function dropHandler(e) {
+    let fileInput = document.getElementById("existingFile");
+    e.preventDefault();
+    document.getElementById("dottedDiv").classList.remove("hovering");
+    if (e.dataTransfer.items) {
+        if (e.dataTransfer.items[0].type === "image/png") {
+            let uploadedFile = e.dataTransfer.items[0].getAsFile();
+            let previewImg = document.getElementById("previewImg");
+            document.getElementById("uploadLabel").classList.add("with-img");
+            fileInput.files[0] = uploadedFile;
+            document.getElementById("uploadLabel").innerText = "Card To Edit:\n" + uploadedFile.name;
+            previewImg.src = URL.createObjectURL(uploadedFile);
+            previewImg.classList.remove("hidden");
+            document.getElementById("editCardBtn").classList.remove("disabled");
+        }
+    }
+}
+
+function handleInput() {
+    let fileInput = document.getElementById("existingFile");
+    let previewImg = document.getElementById("previewImg");
+    document.getElementById("uploadLabel").classList.add("with-img");
+    document.getElementById("uploadLabel").innerText = "Card To Edit:\n" + fileInput.files[0].name;
+    previewImg.src = URL.createObjectURL(fileInput.files[0]);
+    previewImg.classList.remove("hidden");
+    document.getElementById("editCardBtn").classList.remove("disabled");
 }
 
 function loadFromExistingCard() {
+    exitUpload();
     const data = new FormData();
     data.append("card", document.getElementById("existingFile").files[0]);
 

stylesheet.css

@@ -66,6 +66,10 @@ header {
   background-color: var(--secondary-color);
 }
 
+main {
+  margin: 4em 10em;
+}
+
 footer {
   text-align: center;
   font-size: 12px;
@@ -128,6 +132,10 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 2rem;
 }
 
+.title {
+  margin-bottom: 1em;
+}
+
 .btn {
   display: inline-block;
   font-weight: 400;
@@ -273,25 +281,71 @@ input[type="checkbox"], input[type="radio"] {
 .fade {
   position: absolute;
   top: 0;
-  bottom: 0;
+  height: 100vh;
   left: 0;
   right: 0;
   background-color: white;
   opacity: 50%;
 }
 
+.x {
+  border-radius: 50%;
+  padding: .75em;
+  background: var(--theme-blue);
+  border: 2px solid var(--theme-dark-blue);
+  position: absolute;
+  right: -1.5em;
+  top: -1.5em;
+  text-decoration: none;
+}
+
+.x div {
+  height: 16px;
+  width: 16px;
+  font-size: 1.5rem;
+  text-align: center;
+  color: var(--text-color-neg);
+  line-height: 8px !important;
+}
+
 .upload {
   opacity: 100% !important;
   border-radius: .5rem;
   padding: 1em;
   border: solid 2px var(--theme-dark-blue);
   background-color: var(--background-color);
-  position: absolute;
+  position: fixed;
-  width: 16em;
+  flex-direction: column;
-  height: 9em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  width: 32em;
+  height: 20em;
   left: 50%;
   top: 14em;
-  margin-left: -9em;
+  margin-left: -20em;
+}
+
+.upload img {
+  width: 100%;
+  height: fit-content;
+  margin-left: 5% !important;
+  margin-right: 10% !important;
+}
+
+.upload button {
+  width: 93%;
+  margin-top: 1em;
+}
+
+.disabled {
+  opacity: 75%;
+}
+
+.hovering {
+  border-width: 3px !important;
+  font-weight: bold !important;
 }
 
 .hidden {
@@ -307,6 +361,16 @@ input[type="checkbox"], input[type="radio"] {
   align-items: center;
 }
 
+.dotted label {
+  margin-left: 20%;
+  margin-right: 20%;
+}
+
+.with-img {
+  margin-left: 10% !important;
+  margin-right: 5% !important;
+}
+
 /*--------------------------------------*/
 
 .container {