123 lines
5.9 KiB
HTML
123 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<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 () {
|
|
const inputs = Array.from(
|
|
document.querySelectorAll('input[name=extension], input[name=cellNumber], input[name=directNumber]')
|
|
);
|
|
const inputListener = e => {
|
|
inputs.filter(i => i !== e.target).forEach(i => (i.required = !e.target.value.length));
|
|
};
|
|
|
|
inputs.forEach(i => i.addEventListener('input', inputListener));
|
|
});
|
|
document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';
|
|
let id;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<a class="navbar-brand" href="https://www.caiu.org">
|
|
<img class="logo" src="logo.png" alt="CAIU Logo">
|
|
</a>
|
|
<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>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main>
|
|
<section class="portfolio-block contact">
|
|
<div class="container">
|
|
<h1 class="text-center mt mb h1">Signature Card Creator</h1>
|
|
<div class="card">
|
|
<a id="card" href="#">
|
|
<canvas id="backgroundLayer" width="404" height="225" style="z-index: 0;"></canvas>
|
|
<canvas id="nameLayer" width="404" height="225" style="z-index: 1;"></canvas>
|
|
<canvas id="titleLayer" width="404" height="225" style="z-index: 2;"></canvas>
|
|
<canvas id="emailLayer" width="404" height="225" style="z-index: 3;"></canvas>
|
|
<canvas id="locationLayer" width="404" height="225" style="z-index: 4;"></canvas>
|
|
<canvas id="numbersLayer" width="404" height="225" style="z-index: 5;"></canvas>
|
|
</a>
|
|
</div>
|
|
<label for="card" class="text-center"></label>
|
|
<div class="form-group mt">
|
|
<div class="form-group">
|
|
<label for="location">Location:</label>
|
|
<select class="form-control" id="location" name="location"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="full_name">Full Name & 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">
|
|
<input type="checkbox" id="directNumberCheckbox" onclick="handleCheckbox()">
|
|
<label for="directNumberCheckbox">Direct Line</label>
|
|
</div>
|
|
<div class="form-group" id="directNumberInput" style="display:none">
|
|
<label for="directNumber">Direct Line:</label>
|
|
<input type="text" class="form-control" id="directNumber" name="directNumber" 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" id="outlookDiv">
|
|
<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 Signature Card</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>Made by the best intern!</footer>
|
|
|
|
<script src="script.js"></script>
|
|
<script src="darkmode.js"></script>
|
|
<script src="websocket.js"></script>
|
|
</body>
|
|
</html> |