New UI Finished!

index.html

@@ -112,17 +112,31 @@
 
     <div class="hidden fade" id="fade"></div>
     <div class="upload hidden" id="uploadDiv">
-        <div class="dotted">
-            <label for="existingFile">Click or drag here to edit existing card</label>
+        <a class="x h3" href="javascript:exitUpload()">
+            <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>