SignatureCardFrontend/index.html

102 lines
5.1 KiB
HTML

<!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="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet.css">
<title>*DEV* CAIU VCard Creator *DEV*</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 class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://resources.finalsite.net/images/f_auto,q_auto/v1619001051/caiuorg/cjwogofoj9lsqxvuwnd8/Logo_CAIU_color1.png" alt="">
</a>
<div class="nav-container">
<label class="nav-align" for="newBackendUrlInput">Change Backend Url</label>
<input type="text" class="form-control nav-align" id="newBackendUrlInput" name="newBackendUrlInput" onfocus="this.value=''" value="127.0.0.1:8090">
<button class="btn btn-primary nav-align" id="changeBackendButton">Change Backend Url</button>
</div>
<div class="nav-container">
<p class="nav-align">Backend Status</p>
<div class="connected nav-align circle" id="statusCircle">&nbsp;</div>
<button class="btn btn-primary nav-align" id="checkBackendButton">Reload</button>
</div>
</nav>
<main class="page contact-page">
<section class="portfolio-block contact">
<div class="container">
<h2 id="displayedUrl" class="text-center mt-5 h2">Current Backend Url: </h2>
<h1 class="text-center mt-5 h1">** DEV ENV** - VCard Creator - ** DEV ENV **</h1>
<form method="post" 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">
<option value="Capital Area Intermediate Unit">Capital Area Intermediate Unit</option>
<option value="Capital Area Early Learning Center">Capital Area Early Learning Center</option>
<option value="Hill Top Academy">Hill Top Academy</option>
</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>
<button type="submit" class="btn btn-primary" id="formSubmit">Submit</button>
</form>
</div>
</section>
</main>
<script src="script.js"></script>
<script>
loadBackendUrl();
checkBackend();
document.getElementById("changeBackendButton").addEventListener("click", saveBackendUrl, false);
document.getElementById("checkBackendButton").addEventListener("click", checkBackend, false);
document.getElementById("formSubmit").addEventListener("click", submitForm, false);
</script>
</body>
</html>