Steven/SignatureCardFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI!

Browse Source
This commit is contained in:
Steven Tracey
2023-05-30 16:17:58 -04:00
parent e4853c2585
commit 0894ef9d03
13 changed files with 1308 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@@ -1,9 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="darkmode.css">
<title>CAIU Signature Card</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
@@ -20,46 +21,48 @@
</head>
<body>
<nav id="navbar" class="navbar navbar-light">
<header>
<a class="navbar-brand" href="#">
<img src="logo.png" alt="CAIU Logo">
<img class="logo" src="logo.png" alt="CAIU Logo">
</a>
<div class="nav-container">
<label class="nav-align" for="existingFile">Edit Existing VCard</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>
<div style="margin-right: 0.5em;">
<label for="theme" class="theme">
<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>
</header>
<nav class="navbar">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="install/">Install</a></li>
<li class="float-right"><a href="javascript:getCardToEdit()">Edit Card</a></li>
</ul>
</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>
<h1 class="text-center mt mb h1">Signature Card Creator</h1>
<div class="card">
<a id="vcard" href="#" style="display: none">
<img class="card" id="cardImg"/>
<img class="card" id="cardImg" alt="card"/>
</a>
</div>
<label for="vcard" class="text-center"></label>
<div class="form-group mt-5">
<div class="form-group mt">
<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="">
@@ -105,14 +108,21 @@
</section>
</main>
<footer>Made by the best intern!</footer>
<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>
</div>
</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>
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>