UI!
This commit is contained in:
parent
e4853c2585
commit
0894ef9d03
@ -12,5 +12,10 @@
|
||||
</value>
|
||||
</option>
|
||||
</inspection_tool>
|
||||
<inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||
<Languages>
|
||||
<language minSize="63" name="JavaScript" />
|
||||
</Languages>
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
||||
229
darkmode.css
Normal file
229
darkmode.css
Normal file
@ -0,0 +1,229 @@
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
35
darkmode.js
Normal file
35
darkmode.js
Normal file
@ -0,0 +1,35 @@
|
||||
document.getElementById("theme").addEventListener("click", toggleDarkMode, false)
|
||||
|
||||
refreshDarkMode()
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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 "";
|
||||
}
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
70
index.html
70
index.html
@ -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 & 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>
|
||||
58
install/index.html
Normal file
58
install/index.html
Normal file
@ -0,0 +1,58 @@
|
||||
<!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="../stylesheet.css">
|
||||
<link rel="stylesheet" href="../darkmode.css">
|
||||
<title>Install Card</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a class="navbar-brand" href="#">
|
||||
<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 href="../">Home</a></li>
|
||||
<li><a class="active" href="#">Install</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1 class="text-center">Signature Card Installation Guide</h1>
|
||||
<figure>Fig</figure>
|
||||
<p>P</p>
|
||||
</article>
|
||||
<section>Sec</section>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<footer>Made by the best intern!</footer>
|
||||
<script src="../darkmode.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
prod/favicon.ico
Normal file
BIN
prod/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
119
prod/index.html
Normal file
119
prod/index.html
Normal file
@ -0,0 +1,119 @@
|
||||
<!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 & 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>
|
||||
BIN
prod/logo.png
Normal file
BIN
prod/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
160
prod/script.js
Normal file
160
prod/script.js
Normal file
@ -0,0 +1,160 @@
|
||||
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 "";
|
||||
}
|
||||
538
prod/stylesheet.css
Normal file
538
prod/stylesheet.css
Normal file
@ -0,0 +1,538 @@
|
||||
: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);
|
||||
}
|
||||
}
|
||||
40
script.js
40
script.js
@ -77,6 +77,14 @@ function downloadImage(arrayBuffer) {
|
||||
cardElement.click();
|
||||
}
|
||||
|
||||
function getCardToEdit() {
|
||||
let uploadDiv = document.getElementById("uploadDiv")
|
||||
let fadeDiv = document.getElementById("fade")
|
||||
uploadDiv.classList.remove("hidden")
|
||||
fadeDiv.classList.remove("hidden")
|
||||
|
||||
}
|
||||
|
||||
function loadFromExistingCard() {
|
||||
const data = new FormData();
|
||||
data.append("card", document.getElementById("existingFile").files[0]);
|
||||
@ -106,25 +114,6 @@ function loadFromExistingCard() {
|
||||
});
|
||||
}
|
||||
|
||||
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();
|
||||
@ -137,17 +126,4 @@ async function fetchWithTimeout(resource, options = {}) {
|
||||
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 "";
|
||||
}
|
||||
420
stylesheet.css
420
stylesheet.css
@ -21,7 +21,9 @@
|
||||
--dark: #343a40;
|
||||
|
||||
--theme-blue: #007bff;
|
||||
--theme-blue-hover: #0064d9;
|
||||
--theme-dark-blue: hsl(198,90%,15%);
|
||||
--theme-active: #002872;
|
||||
|
||||
--breakpoint-xs: 0;
|
||||
--breakpoint-sm: 576px;
|
||||
@ -31,11 +33,17 @@
|
||||
--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;
|
||||
--text-color-neg: #ffffff;
|
||||
--background-color: #ffffff;
|
||||
--secondary-color: #f8f9fa !important;
|
||||
--secondary-accent: #495057;
|
||||
--trans-dur: 0.3s;
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
@ -51,27 +59,49 @@ body {
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
button {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button, input {
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button, select {
|
||||
input {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
overflow: visible;
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
select {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@ -80,10 +110,6 @@ label {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
@ -145,6 +171,7 @@ input[type="checkbox"], input[type="radio"] {
|
||||
|
||||
.dark-theme {
|
||||
--text-color: #ffffff;
|
||||
--text-color-neg: #212529;
|
||||
--background-color: #28272d;
|
||||
--secondary-color: #1f1e23 !important;
|
||||
--secondary-accent: #181818;
|
||||
@ -154,11 +181,11 @@ input[type="checkbox"], input[type="radio"] {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.mt-5, .my-5 {
|
||||
.mt {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
.mb {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
@ -179,25 +206,53 @@ input[type="checkbox"], input[type="radio"] {
|
||||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: inline-block;
|
||||
padding-top: 0.25em;
|
||||
padding-bottom: 0.25em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: -5px;
|
||||
}
|
||||
.navbar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: var(--theme-blue);
|
||||
}
|
||||
.navbar li {
|
||||
float: left;
|
||||
}
|
||||
.navbar li:first-child {
|
||||
margin-left: 10em;
|
||||
}
|
||||
.navbar li:last-child {
|
||||
margin-right: 10em;
|
||||
}
|
||||
.navbar li a {
|
||||
display: block;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
padding: 1.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar li a:hover:not(.active) {
|
||||
background-color: var(--theme-blue-hover);
|
||||
}
|
||||
.active {
|
||||
background-color: var(--theme-active);
|
||||
}
|
||||
.float-left {
|
||||
float:left !important;
|
||||
}
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
display:inline-block;
|
||||
padding-top:.3125rem;
|
||||
padding-bottom:.3125rem;
|
||||
margin-right:1rem;
|
||||
@ -210,57 +265,46 @@ input[type="checkbox"], input[type="radio"] {
|
||||
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;
|
||||
.fade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.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) }
|
||||
.upload {
|
||||
opacity: 100% !important;
|
||||
border-radius: .5rem;
|
||||
padding: 1em;
|
||||
border: solid 2px var(--theme-dark-blue);
|
||||
background-color: var(--background-color);
|
||||
position: absolute;
|
||||
width: 16em;
|
||||
height: 9em;
|
||||
left: 50%;
|
||||
top: 14em;
|
||||
margin-left: -9em;
|
||||
}
|
||||
|
||||
.connected {
|
||||
background: var(--success);
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.disconnected {
|
||||
background: var(--danger);
|
||||
|
||||
.dotted {
|
||||
display: flex;
|
||||
border: dotted 2px var(--theme-dark-blue);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*--------------------------------------*/
|
||||
@ -292,235 +336,3 @@ input[type="checkbox"], input[type="radio"] {
|
||||
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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user