Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c0b8d6bf94 |
5
.idea/.gitignore
vendored
Normal file
5
.idea/.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
16
.idea/inspectionProfiles/Project_Default.xml
Normal file
16
.idea/inspectionProfiles/Project_Default.xml
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
|
||||||
|
<option name="myCustomPropertiesEnabled" value="true" />
|
||||||
|
<option name="myIgnoreVendorSpecificProperties" value="false" />
|
||||||
|
<option name="myCustomPropertiesList">
|
||||||
|
<value>
|
||||||
|
<list size="1">
|
||||||
|
<item index="0" class="java.lang.String" itemvalue="transform" />
|
||||||
|
</list>
|
||||||
|
</value>
|
||||||
|
</option>
|
||||||
|
</inspection_tool>
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
@ -2,7 +2,7 @@
|
|||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="ProjectModuleManager">
|
<component name="ProjectModuleManager">
|
||||||
<modules>
|
<modules>
|
||||||
<module fileurl="file://$PROJECT_DIR$/.idea/SignatureCardFrontend.iml" filepath="$PROJECT_DIR$/.idea/SignatureCardFrontend.iml" />
|
<module fileurl="file://$PROJECT_DIR$/.idea/VCardFrontend.iml" filepath="$PROJECT_DIR$/.idea/VCardFrontend.iml" />
|
||||||
</modules>
|
</modules>
|
||||||
</component>
|
</component>
|
||||||
</project>
|
</project>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="VcsDirectoryMappings">
|
<component name="VcsDirectoryMappings">
|
||||||
<mapping directory="" vcs="Git" />
|
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||||
</component>
|
</component>
|
||||||
</project>
|
</project>
|
||||||
25
.idea/watcherTasks.xml
Normal file
25
.idea/watcherTasks.xml
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectTasksOptions">
|
||||||
|
<TaskOptions isEnabled="true">
|
||||||
|
<option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
|
||||||
|
<option name="checkSyntaxErrors" value="true" />
|
||||||
|
<option name="description" />
|
||||||
|
<option name="exitCodeBehavior" value="ERROR" />
|
||||||
|
<option name="fileExtension" value="scss" />
|
||||||
|
<option name="immediateSync" value="true" />
|
||||||
|
<option name="name" value="SCSS" />
|
||||||
|
<option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
|
||||||
|
<option name="outputFilters">
|
||||||
|
<array />
|
||||||
|
</option>
|
||||||
|
<option name="outputFromStdout" value="false" />
|
||||||
|
<option name="program" value="$PROJECT_DIR$/../../../../Program Files/sass/sass" />
|
||||||
|
<option name="runOnExternalChanges" value="true" />
|
||||||
|
<option name="scopeName" value="Project Files" />
|
||||||
|
<option name="trackOnlyRoot" value="true" />
|
||||||
|
<option name="workingDir" value="$FileDir$" />
|
||||||
|
<envs />
|
||||||
|
</TaskOptions>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
229
darkmode.css
229
darkmode.css
@ -1,229 +0,0 @@
|
|||||||
/* 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-fast);
|
|
||||||
transition: var(--trans-dur-fast);
|
|
||||||
}
|
|
||||||
.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-fast) ease-in-out,
|
|
||||||
-webkit-box-shadow var(--trans-dur-fast) ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur-fast) ease-in-out;
|
|
||||||
transition: opacity var(--trans-dur-fast) ease-in-out,
|
|
||||||
-webkit-box-shadow var(--trans-dur-fast) ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur-fast) ease-in-out;
|
|
||||||
transition: box-shadow var(--trans-dur-fast) ease-in-out,
|
|
||||||
opacity var(--trans-dur-fast) ease-in-out,
|
|
||||||
transform var(--trans-dur-fast) ease-in-out;
|
|
||||||
transition: box-shadow var(--trans-dur-fast) ease-in-out,
|
|
||||||
opacity var(--trans-dur-fast) ease-in-out,
|
|
||||||
transform var(--trans-dur-fast) ease-in-out,
|
|
||||||
-webkit-box-shadow var(--trans-dur-fast) ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur-fast) 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-fast) ease-in-out,
|
|
||||||
-webkit-box-shadow 0.15s ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur-fast) ease-in-out;
|
|
||||||
transition: background-color var(--trans-dur-fast) ease-in-out,
|
|
||||||
-webkit-box-shadow 0.15s ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur-fast) ease-in-out;
|
|
||||||
transition: background-color var(--trans-dur-fast) ease-in-out,
|
|
||||||
box-shadow 0.15s ease-in-out,
|
|
||||||
transform var(--trans-dur-fast) ease-in-out;
|
|
||||||
transition: background-color var(--trans-dur-fast) ease-in-out,
|
|
||||||
box-shadow 0.15s ease-in-out,
|
|
||||||
transform var(--trans-dur-fast) ease-in-out,
|
|
||||||
-webkit-box-shadow 0.15s ease-in-out,
|
|
||||||
-webkit-transform var(--trans-dur-fast) ease-in-out;
|
|
||||||
}
|
|
||||||
.toggle:before {
|
|
||||||
background-color: var(--yellow);
|
|
||||||
border-radius: 50%;
|
|
||||||
content: "";
|
|
||||||
width: 2.5em;
|
|
||||||
height: 2.5em;
|
|
||||||
-webkit-transition: var(--trans-dur-fast);
|
|
||||||
transition: var(--trans-dur-fast);
|
|
||||||
}
|
|
||||||
.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-gray);
|
|
||||||
}
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
42
darkmode.js
42
darkmode.js
@ -1,42 +0,0 @@
|
|||||||
const themeToggle = document.getElementById("theme");
|
|
||||||
let userPreference = getUserPreference();
|
|
||||||
|
|
||||||
setAppliedMode(getAppliedMode(userPreference));
|
|
||||||
|
|
||||||
themeToggle.addEventListener("click", togglePreference, false)
|
|
||||||
|
|
||||||
function getUserPreference() {
|
|
||||||
return localStorage.getItem("theme") || "light";
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveUserPreference(userPreference) {
|
|
||||||
localStorage.setItem("theme", userPreference);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getAppliedMode(userPreference) {
|
|
||||||
if (userPreference === "light") {
|
|
||||||
return "light";
|
|
||||||
}
|
|
||||||
if (userPreference === "dark") {
|
|
||||||
return "dark";
|
|
||||||
}
|
|
||||||
if (matchMedia("(prefers-color-scheme: light)").matches) {
|
|
||||||
return "light";
|
|
||||||
}
|
|
||||||
return "dark";
|
|
||||||
}
|
|
||||||
|
|
||||||
function setAppliedMode(mode) {
|
|
||||||
document.documentElement.dataset.appliedMode = mode;
|
|
||||||
themeToggle.checked = getAppliedMode(userPreference) === "dark";
|
|
||||||
}
|
|
||||||
|
|
||||||
function togglePreference() {
|
|
||||||
if (userPreference === "light") {
|
|
||||||
userPreference = "dark";
|
|
||||||
} else if (userPreference === "dark") {
|
|
||||||
userPreference = "light";
|
|
||||||
}
|
|
||||||
saveUserPreference(userPreference);
|
|
||||||
setAppliedMode(getAppliedMode(userPreference));
|
|
||||||
}
|
|
||||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
125
index.html
125
index.html
@ -1,15 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="stylesheet.css">
|
<link rel="stylesheet" href="stylesheet.css">
|
||||||
<link rel="stylesheet" href="darkmode.css">
|
<title>*DEV* CAIU VCard Creator *DEV*</title>
|
||||||
<title>CAIU Signature Card</title>
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const inputs = Array.from(
|
const inputs = Array.from(
|
||||||
document.querySelectorAll('input[name=extension], input[name=cellNumber], input[name=directNumber]')
|
document.querySelectorAll('input[name=extension], input[name=cellNumber], input[name=directLine]')
|
||||||
);
|
);
|
||||||
const inputListener = e => {
|
const inputListener = e => {
|
||||||
inputs.filter(i => i !== e.target).forEach(i => (i.required = !e.target.value.length));
|
inputs.filter(i => i !== e.target).forEach(i => (i.required = !e.target.value.length));
|
||||||
@ -17,62 +16,57 @@
|
|||||||
|
|
||||||
inputs.forEach(i => i.addEventListener('input', inputListener));
|
inputs.forEach(i => i.addEventListener('input', inputListener));
|
||||||
});
|
});
|
||||||
document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';
|
|
||||||
let id;
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<nav id="navbar" class="navbar navbar-light">
|
||||||
<a class="navbar-brand" href="https://www.caiu.org">
|
<a class="navbar-brand" href="#">
|
||||||
<img class="logo" src="logo.png" alt="CAIU Logo">
|
<img src="https://resources.finalsite.net/images/f_auto,q_auto/v1619001051/caiuorg/cjwogofoj9lsqxvuwnd8/Logo_CAIU_color1.png" alt="">
|
||||||
</a>
|
</a>
|
||||||
<div style="margin-right: 0.5em;">
|
<div class="nav-container">
|
||||||
<label for="theme" class="theme">
|
<label class="nav-align" for="newBackendUrlInput">Change Backend Url</label>
|
||||||
<span class="toggle-wrap">
|
<input type="text" class="form-control nav-align" id="newBackendUrlInput" name="newBackendUrlInput" onfocus="this.value=''" value="127.0.0.1:8090">
|
||||||
<input id="theme" class="toggle" type="checkbox" role="switch" name="theme" value="dark">
|
<button class="btn btn-primary nav-align" id="changeBackendButton">Change Backend Url</button>
|
||||||
<span class="icon">
|
</div>
|
||||||
<span class="icon-part"></span>
|
<div class="nav-container">
|
||||||
<span class="icon-part"></span>
|
<p class="nav-align">Backend Status</p>
|
||||||
<span class="icon-part"></span>
|
<div class="connected nav-align circle" id="statusCircle"> </div>
|
||||||
<span class="icon-part"></span>
|
<button class="btn btn-primary nav-align" id="checkBackendButton">Reload</button>
|
||||||
<span class="icon-part"></span>
|
</div>
|
||||||
<span class="icon-part"></span>
|
<div class="nav-container">
|
||||||
<span class="icon-part"></span>
|
<label class="nav-align" for="existingFile">Edit Existing VCard</label>
|
||||||
<span class="icon-part"></span>
|
<input type="file" accept="image/png" class="nav-align" id="existingFile" name="existingFile">
|
||||||
<span class="icon-part"></span>
|
<button class="btn btn-primary nav-align" id="getFileDataBtn">Edit</button>
|
||||||
</span>
|
</div>
|
||||||
</span>
|
<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>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
<nav class="navbar">
|
|
||||||
<ul>
|
|
||||||
<li><a class="active" href="#">Home</a></li>
|
|
||||||
<li><a href="install/">Install</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main>
|
<main class="page contact-page">
|
||||||
<section class="portfolio-block contact">
|
<section class="portfolio-block contact">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="text-center mt mb h1">Signature Card Creator</h1>
|
<h2 id="displayedUrl" class="text-center mt-5 h2">Current Backend Url: </h2>
|
||||||
<div class="card">
|
<h1 class="text-center mt-5 h1">** DEV ENV** - VCard Creator - ** DEV ENV **</h1>
|
||||||
<a id="card" href="#">
|
<a id="vcard" href="#"></a>
|
||||||
<canvas id="backgroundLayer" width="404" height="225" style="z-index: 0;"></canvas>
|
<label for="vcard" class="text-center"></label>
|
||||||
<canvas id="nameLayer" width="404" height="225" style="z-index: 1;"></canvas>
|
<div class="form-group mt-5">
|
||||||
<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">
|
<div class="form-group">
|
||||||
<label for="full_name">Full Name & Credentials</label>
|
<label for="full_name">Full Name & Credentials</label>
|
||||||
<input type="text" class="form-control" id="full_name" name="full_name" maxlength="36" required="">
|
<input type="text" class="form-control" id="full_name" name="full_name" maxlength="36" required="">
|
||||||
@ -86,12 +80,16 @@
|
|||||||
<input type="email" class="form-control" id="email" name="email" required="">
|
<input type="email" class="form-control" id="email" name="email" required="">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input type="checkbox" id="directNumberCheckbox" onclick="handleCheckbox()">
|
<label for="location">Location:</label>
|
||||||
<label for="directNumberCheckbox">Direct Line</label>
|
<select class="form-control" id="location" name="location"></select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group" id="directNumberInput" style="display:none">
|
<div class="form-group">
|
||||||
<label for="directNumber">Direct Line:</label>
|
<input type="checkbox" id="directLineCheckbox" onclick="handleCheckbox()">
|
||||||
<input type="text" class="form-control" id="directNumber" name="directNumber" maxlength="15" required="">
|
<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>
|
||||||
<div class="form-group" id="extensionInput">
|
<div class="form-group" id="extensionInput">
|
||||||
<label for="extension">Extension</label>
|
<label for="extension">Extension</label>
|
||||||
@ -101,23 +99,30 @@
|
|||||||
<label for="cellNumber">Cell Number</label>
|
<label for="cellNumber">Cell Number</label>
|
||||||
<input type="tel" class="form-control" id="cellNumber" name="cellNumber" maxlength="15" required="">
|
<input type="tel" class="form-control" id="cellNumber" name="cellNumber" maxlength="15" required="">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group" id="outlookDiv">
|
<div class="form-group">
|
||||||
<input type="radio" id="o365" name="outlookVer" value="1">
|
<input type="radio" id="o365" name="outlookVer" value="1">
|
||||||
<label id="o365Label" for="o365">MS Office 365</label>
|
<label id="o365Label" for="o365">MS Office 365</label>
|
||||||
<br>
|
<br>
|
||||||
<input type="radio" id="o2016" name="outlookVer" value="0">
|
<input type="radio" id="o2016" name="outlookVer" value="0">
|
||||||
<label id="o2016Label" for="o2016">MS Office 2016</label>
|
<label id="o2016Label" for="o2016">MS Office 2016</label>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-primary" id="formSubmit">Generate Signature Card</button>
|
<button class="btn btn-primary" id="formSubmit">Generate VCard</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>Made by the best intern!</footer>
|
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
<script src="darkmode.js"></script>
|
<script>
|
||||||
<script src="websocket.js"></script>
|
refreshDarkMode();
|
||||||
|
loadBackendUrl();
|
||||||
|
checkBackend();
|
||||||
|
|
||||||
|
document.getElementById("changeBackendButton").addEventListener("click", saveBackendUrl, false);
|
||||||
|
document.getElementById("checkBackendButton").addEventListener("click", checkBackend, false);
|
||||||
|
document.getElementById("getFileDataBtn").addEventListener("click", loadFromExistingCard, false);
|
||||||
|
document.getElementById("formSubmit").addEventListener("click", submitForm, false);
|
||||||
|
document.getElementById("theme").addEventListener("click", toggleDarkMode, false);
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
@ -1,65 +0,0 @@
|
|||||||
<!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">'
|
|
||||||
<link rel="icon" href="../favicon.ico">
|
|
||||||
<title>Install Card</title>
|
|
||||||
<script>document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';</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 href="../">Home</a></li>
|
|
||||||
<li><a class="active" href="#">Install</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<h1 class="text-center title">Signature Card Installation Guide</h1>
|
|
||||||
<article>
|
|
||||||
<p>1. Open up Outlook and create a new email.</p>
|
|
||||||
<p>2. Select the drop-down arrow under Signature along the top bar and select "Signatures"</p>
|
|
||||||
<figure><img src="assets/img1.png" alt="img1" width="60%"></figure>
|
|
||||||
<p>3. In the Signatures and Stationary window that appears, click "New" and name it whatever name you'd like for it.</p>
|
|
||||||
<p>4. Click the icon next to "Business Card" it will prompt you for a picture to load. Select the png of the business card you created.</p>
|
|
||||||
<p>5. Click the drop-down boxes next to both New Messages and Replies / Forwards and select the name of the signature.</p>
|
|
||||||
<figure><img src="assets/img2.png" alt="img2" width="60%"></figure>
|
|
||||||
<p>6. Left click, then right-click on the picture and select picture</p>
|
|
||||||
<figure><img src="assets/img3.png" alt="img3" width="60%"></figure>
|
|
||||||
<p>7. Go to Size and change the height to 1.75". The Width should change automatically to keep in aspect.</p>
|
|
||||||
<figure><img src="assets/img4.png" alt="img4" width="60%"></figure>
|
|
||||||
<p>8. Click OK, then OK again to save it, and you will now have the newly created business card included in the signatures.</p>
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>Made by the best intern!</footer>
|
|
||||||
<script src="../darkmode.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
231
script.js
231
script.js
@ -1,35 +1,79 @@
|
|||||||
let backendUrl = "https://signature.caiu.org"
|
|
||||||
let locations = JSON.parse("{}");
|
|
||||||
const locationSelector = document.getElementById("location");
|
|
||||||
|
|
||||||
loadLocations();
|
|
||||||
clearForm();
|
|
||||||
|
|
||||||
document.querySelectorAll('input[name = outlookVer]').forEach((element) => {
|
|
||||||
element.addEventListener("click", (e) => {
|
|
||||||
document.getElementById("outlookDiv").classList.remove("missing-info");
|
|
||||||
}, false);
|
|
||||||
});
|
|
||||||
locationSelector.addEventListener("click", (e) => {
|
|
||||||
locationSelector.classList.remove("missing-info");
|
|
||||||
}, false);
|
|
||||||
document.getElementById("formSubmit").addEventListener("click", submitForm, false);
|
|
||||||
|
|
||||||
function handleCheckbox() {
|
function handleCheckbox() {
|
||||||
const extensionInput = document.getElementById("extensionInput");
|
const extensionInput = document.getElementById("extensionInput");
|
||||||
const directNumberInput = document.getElementById("directNumberInput");
|
const directLineInput = document.getElementById("directLineInput");
|
||||||
if (document.getElementById("directNumberCheckbox").checked) {
|
if (document.getElementById("directLineCheckbox").checked) {
|
||||||
extensionInput.style.display = "none";
|
extensionInput.style.display = "none";
|
||||||
directNumberInput.style.display = "block";
|
directLineInput.style.display = "block";
|
||||||
document.getElementById("extension").value = "";
|
document.getElementById("extension").value = "";
|
||||||
} else {
|
} else {
|
||||||
extensionInput.style.display = "block";
|
extensionInput.style.display = "block";
|
||||||
directNumberInput.style.display = "none";
|
directLineInput.style.display = "none";
|
||||||
document.getElementById("directNumber").value = "";
|
document.getElementById("directLine").value = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadLocations() {
|
|
||||||
|
let backendUrl = "http://127.0.0.1:8090"
|
||||||
|
let locations = JSON.parse("{}");
|
||||||
|
|
||||||
|
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 +
|
||||||
|
"}";
|
||||||
|
|
||||||
|
console.log(body);
|
||||||
|
|
||||||
|
fetchWithTimeout(backendUrl + "/backend/generate", {
|
||||||
|
timeout: 5000,
|
||||||
|
method: 'POST',
|
||||||
|
mode: 'cors',
|
||||||
|
Headers: {
|
||||||
|
'Accept': 'image/png',
|
||||||
|
},
|
||||||
|
body: body
|
||||||
|
}).then(async response => {
|
||||||
|
downloadImage(await response.arrayBuffer());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadFromExistingCard() {
|
||||||
|
const data = new FormData();
|
||||||
|
data.append("card", document.getElementById("existingFile").files[0]);
|
||||||
|
|
||||||
|
fetchWithTimeout(backendUrl + "/backend/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 getLocations() {
|
||||||
let locationsList = document.getElementById("location");
|
let locationsList = document.getElementById("location");
|
||||||
|
|
||||||
fetchWithTimeout(backendUrl + "/backend/data/locations", {
|
fetchWithTimeout(backendUrl + "/backend/data/locations", {
|
||||||
@ -43,7 +87,6 @@ function loadLocations() {
|
|||||||
response.text().then(text => {
|
response.text().then(text => {
|
||||||
locations = JSON.parse(text);
|
locations = JSON.parse(text);
|
||||||
locationsList.innerText = "";
|
locationsList.innerText = "";
|
||||||
locationsList.options[0] = new Option("--- Select ---", "default");
|
|
||||||
for (let i = 0; i < locations.length; i++) {
|
for (let i = 0; i < locations.length; i++) {
|
||||||
locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
|
locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
|
||||||
}
|
}
|
||||||
@ -51,55 +94,57 @@ function loadLocations() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearForm() {
|
async function checkBackend() {
|
||||||
document.getElementById("location").value = "default";
|
const statusCircle = document.getElementById("statusCircle");
|
||||||
document.getElementById("full_name").value = "";
|
const previousState = statusCircle.classList.contains("connected") ? "connected" : "disconnected";
|
||||||
document.getElementById("title").value = "";
|
statusCircle.classList.replace(previousState, "loading");
|
||||||
document.getElementById("email").value = "";
|
try {
|
||||||
document.getElementById("extension").value = "";
|
const response = await fetchWithTimeout(backendUrl + "/backend/heartbeat", {
|
||||||
document.getElementById("directNumber").value = "";
|
timeout: 5000,
|
||||||
document.getElementById("cellNumber").value = "";
|
method: 'GET',
|
||||||
}
|
mode: 'cors',
|
||||||
|
headers: {
|
||||||
function submitForm() {
|
'Accept': 'application/json'
|
||||||
let missing = false;
|
}
|
||||||
if (locationSelector.value === "default") {
|
});
|
||||||
locationSelector.classList.add("missing-info");
|
if (response.status === 200) {
|
||||||
missing = true;
|
console.log('Backend up with code ', response.status);
|
||||||
}
|
} else {
|
||||||
if (document.querySelector('input[name = outlookVer]:checked') == null) {
|
console.log("Something weird happened: ", response.status);
|
||||||
document.getElementById("outlookDiv").classList.add("missing-info");
|
|
||||||
missing = true;
|
|
||||||
}
|
|
||||||
if (missing) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
fetchWithTimeout(backendUrl + "/backend/generate?id=" + id, {
|
|
||||||
timeout: 5000,
|
|
||||||
method: 'POST',
|
|
||||||
mode: 'cors',
|
|
||||||
Headers: {
|
|
||||||
'Accept': 'image/png',
|
|
||||||
}
|
|
||||||
}).then(async response => {
|
|
||||||
if (response.headers.get("Content-Type") === "text/plain") {
|
|
||||||
response.text().then(res => console.error(res));
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
downloadImage(await response.arrayBuffer());
|
statusCircle.classList.replace("loading", "connected");
|
||||||
});
|
} catch (err) {
|
||||||
clearForm();
|
console.log("Backend down with error ", err);
|
||||||
|
statusCircle.classList.replace("loading", "disconnected");
|
||||||
|
}
|
||||||
|
getLocations();
|
||||||
}
|
}
|
||||||
|
|
||||||
function downloadImage(arrayBuffer) {
|
function saveBackendUrl() {
|
||||||
const blob = new Blob([arrayBuffer], { type: "image/png" });
|
let url = document.getElementById("newBackendUrlInput").value;
|
||||||
const cardElement = document.getElementById("card");
|
document.getElementById("newBackendUrlInput").value = "";
|
||||||
|
if (!(url.includes("http://") || url.includes("https://") && url !== "")) {
|
||||||
|
url = "http://" + url;
|
||||||
|
}
|
||||||
|
backendUrl = url;
|
||||||
|
document.cookie = "backendUrl=" + backendUrl;
|
||||||
|
document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
|
||||||
|
console.log("Saved new backendUrl ", backendUrl);
|
||||||
|
checkBackend().then();
|
||||||
|
}
|
||||||
|
|
||||||
let urlCreator = window.URL || window.webkitURL;
|
function loadBackendUrl() {
|
||||||
cardElement.href = urlCreator.createObjectURL(blob);
|
let cookieArray = document.cookie.split(";");
|
||||||
cardElement.style.display = 'unset';
|
for (let i = 0; i < cookieArray.length; i++) {
|
||||||
cardElement.download = "card.png";
|
let cookie = cookieArray[i].split("=");
|
||||||
cardElement.click();
|
if (cookie[0] === "backendUrl") {
|
||||||
|
backendUrl = cookie[1];
|
||||||
|
document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
|
||||||
|
console.log("Set backendUrl to ", backendUrl);
|
||||||
|
} else {
|
||||||
|
console.log("Unable to load backendUrl from cookie, defaulting to 127.0.0.1:8090");
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchWithTimeout(resource, options = {}) {
|
async function fetchWithTimeout(resource, options = {}) {
|
||||||
@ -116,11 +161,47 @@ async function fetchWithTimeout(resource, options = {}) {
|
|||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
function isValidJson(json) {
|
function downloadImage(arrayBuffer) {
|
||||||
try {
|
const blob = new Blob([arrayBuffer], { type: "image/png" });
|
||||||
JSON.parse(json);
|
const link = document.createElement("a");
|
||||||
} catch (e) {
|
link.href = URL.createObjectURL(blob);
|
||||||
return false;
|
link.download = "vcard.png";
|
||||||
|
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
URL.revokeObjectURL(link.href);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
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");
|
||||||
|
} else {
|
||||||
|
if (document.body.classList.contains("dark-theme")) {
|
||||||
|
document.body.classList.remove("dark-theme");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return true;
|
}
|
||||||
|
|
||||||
|
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 "";
|
||||||
}
|
}
|
||||||
559
stylesheet.css
559
stylesheet.css
@ -20,16 +20,8 @@
|
|||||||
--light: #f8f9fa;
|
--light: #f8f9fa;
|
||||||
--dark: #343a40;
|
--dark: #343a40;
|
||||||
|
|
||||||
--theme-green: #658D1B;
|
--theme-blue: #007bff;
|
||||||
--theme-green-accent: #436e24;
|
--theme-dark-blue: hsl(198,90%,15%);
|
||||||
--theme-yellow-green: #C4D600;
|
|
||||||
--theme-tan: #F2F0A1;
|
|
||||||
--theme-gray: #A2B2C8;
|
|
||||||
--theme-blue: #071D49;
|
|
||||||
--theme-white: #e3e3e3;
|
|
||||||
--theme-white-accent: #bababa;
|
|
||||||
--theme-black: #2D2926;
|
|
||||||
--theme-black-accent: #000000;
|
|
||||||
|
|
||||||
--breakpoint-xs: 0;
|
--breakpoint-xs: 0;
|
||||||
--breakpoint-sm: 576px;
|
--breakpoint-sm: 576px;
|
||||||
@ -38,30 +30,12 @@
|
|||||||
--breakpoint-xl: 1200px;
|
--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-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;
|
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
||||||
|
--text-color: #212529;
|
||||||
--trans-dur-fast: 0.3s;
|
--background-color: #ffffff;
|
||||||
--trans-dur: 0.75s;
|
--secondary-color: #f8f9fa !important;
|
||||||
--trans-dur-slow: 1.5s;
|
--secondary-accent: #495057;
|
||||||
|
--trans-dur: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[data-applied-mode="light"] {
|
|
||||||
color-scheme: light;
|
|
||||||
--text-color: var(--theme-black-accent);
|
|
||||||
--text-color-negative: var(--white);
|
|
||||||
--background-color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-applied-mode="dark"] {
|
|
||||||
color-scheme: dark;
|
|
||||||
--text-color: var(--white);
|
|
||||||
--text-color-negative: var(--theme-black-accent);
|
|
||||||
--background-color: var(--theme-black);
|
|
||||||
}
|
|
||||||
|
|
||||||
*, ::after, ::before {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
@ -77,55 +51,28 @@ body {
|
|||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
}
|
}
|
||||||
header {
|
|
||||||
display: flex;
|
*, ::after, ::before {
|
||||||
justify-content: space-between;
|
box-sizing: border-box;
|
||||||
align-items: center;
|
|
||||||
background-color: var(--theme-blue);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||||
margin: 4em 10em;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
button, input, optgroup, select, textarea {
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
overflow: visible;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
button, input {
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
button, select {
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
@ -133,6 +80,10 @@ label {
|
|||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
@ -151,10 +102,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -170,15 +117,12 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
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 {
|
.btn-primary {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: var(--theme-green);
|
background-color: var(--theme-blue);
|
||||||
border-color: var(--theme-green-accent);
|
border-color: var(--theme-blue);
|
||||||
}
|
|
||||||
.btn-primary:hover:not(:disabled):not(.disabled) {
|
|
||||||
background-color: var(--theme-green-accent);
|
|
||||||
}
|
}
|
||||||
.btn:not(:disabled):not(.disabled) {
|
.btn:not(:disabled):not(.disabled) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -191,7 +135,6 @@ select.form-control:not([size]):not([multiple]) {
|
|||||||
input[type="checkbox"], input[type="radio"] {
|
input[type="checkbox"], input[type="radio"] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="reset"], [type="submit"], button, html [type="button"] {
|
[type="reset"], [type="submit"], button, html [type="button"] {
|
||||||
@ -200,16 +143,19 @@ input[type="checkbox"], input[type="radio"] {
|
|||||||
|
|
||||||
/*--------------------------------------*/
|
/*--------------------------------------*/
|
||||||
|
|
||||||
|
.dark-theme {
|
||||||
|
--text-color: #ffffff;
|
||||||
|
--background-color: #28272d;
|
||||||
|
--secondary-color: #1f1e23 !important;
|
||||||
|
--secondary-accent: #181818;
|
||||||
|
}
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt {
|
.mt-5, .my-5 {
|
||||||
margin-top: 1rem !important;
|
margin-top: 3rem !important;
|
||||||
}
|
|
||||||
|
|
||||||
.mb {
|
|
||||||
margin-bottom: 1rem !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
@ -222,183 +168,76 @@ input[type="checkbox"], input[type="radio"] {
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background-color: var(--background-color);
|
background-color: var(--secondary-color);
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: 1px solid #ced4da;
|
border: 1px solid #ced4da;
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
}
|
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 {
|
.navbar {
|
||||||
margin-top: -5px;
|
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 ul {
|
|
||||||
list-style-type: none;
|
.nav-align {
|
||||||
|
width: fit-content;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
float: right;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: var(--theme-green);
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
transition: color ease-in-out var(--trans-dur-fast), background-color ease-in-out var(--trans-dur-fast);
|
|
||||||
}
|
|
||||||
.navbar li a:hover:not(.active) {
|
|
||||||
color: var(--theme-black-accent);
|
|
||||||
background-color: var(--white);
|
|
||||||
transition: color ease-in-out var(--trans-dur-fast), background-color ease-in-out var(--trans-dur-fast);
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
background-color: var(--theme-green-accent);
|
|
||||||
}
|
|
||||||
.float-left {
|
|
||||||
float:left !important;
|
|
||||||
}
|
|
||||||
.float-right {
|
|
||||||
float: right !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand{
|
.nav-container {
|
||||||
padding-top:.3125rem;
|
display: inline-flex;
|
||||||
padding-bottom:.3125rem;
|
position: relative;
|
||||||
margin-right:1rem;
|
float: right;
|
||||||
font-size:1.25rem;
|
align-items: center;
|
||||||
line-height:inherit;
|
|
||||||
white-space:nowrap
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand:focus, .navbar-brand:hover {
|
.circle {
|
||||||
text-decoration:none;
|
width: 40px;
|
||||||
}
|
height: 40px;
|
||||||
|
|
||||||
.missing-info {
|
|
||||||
border: solid 2px var(--danger) !important;
|
|
||||||
border-radius: .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
margin: auto;
|
|
||||||
width: 404px;
|
|
||||||
height: 225px;
|
|
||||||
border: solid 2px var(--theme-gray)
|
|
||||||
}
|
|
||||||
.card canvas {
|
|
||||||
position: absolute;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
height: 100vh;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: white;
|
|
||||||
opacity: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x {
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: .75em;
|
-moz-border-radius: 50%;
|
||||||
background: var(--theme-green);
|
-webkit-border-radius: 50%;
|
||||||
border: 2px solid var(--theme-green-accent);
|
margin-right: 15px;
|
||||||
position: absolute;
|
padding: 0 !important;
|
||||||
right: -1.5em;
|
|
||||||
top: -1.5em;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.x div {
|
.loading {
|
||||||
height: 16px;
|
width: 40px;
|
||||||
width: 16px;
|
height: 40px;
|
||||||
font-size: 1.5rem;
|
border: 5px solid var(--white );
|
||||||
text-align: center;
|
border-top: 5px solid var(--theme-blue);
|
||||||
color: var(--text-color);
|
border-radius: 50%;
|
||||||
line-height: 8px !important;
|
-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 {
|
.connected {
|
||||||
opacity: 100% !important;
|
background: var(--success);
|
||||||
border-radius: .5rem;
|
|
||||||
padding: 1em;
|
|
||||||
border: solid 2px var(--theme-black);
|
|
||||||
background-color: var(--background-color);
|
|
||||||
position: fixed;
|
|
||||||
flex-direction: column;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 999;
|
|
||||||
width: 32em;
|
|
||||||
height: 20em;
|
|
||||||
left: 50%;
|
|
||||||
top: 14em;
|
|
||||||
margin-left: -20em;
|
|
||||||
}
|
}
|
||||||
|
.disconnected {
|
||||||
.upload img {
|
background: var(--danger);
|
||||||
width: 20em;
|
|
||||||
height: fit-content;
|
|
||||||
margin-left: 5% !important;
|
|
||||||
margin-right: 10% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload button {
|
|
||||||
width: 93%;
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled {
|
|
||||||
opacity: 75%;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hovering {
|
|
||||||
border-width: 3px !important;
|
|
||||||
font-weight: bold !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dotted {
|
|
||||||
display: flex;
|
|
||||||
border: dotted 2px var(--theme-black);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dotted label {
|
|
||||||
margin-left: 20%;
|
|
||||||
margin-right: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.with-img {
|
|
||||||
margin-left: 10% !important;
|
|
||||||
margin-right: 5% !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------*/
|
/*--------------------------------------*/
|
||||||
@ -430,3 +269,235 @@ input[type="checkbox"], input[type="radio"] {
|
|||||||
max-width: 1140px;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
95
websocket.js
95
websocket.js
@ -1,95 +0,0 @@
|
|||||||
let liveGenWS = new WebSocket("wss://signature.caiu.org/backend/generate/live");
|
|
||||||
|
|
||||||
let backgroundLayer = document.getElementById("backgroundLayer");
|
|
||||||
let loc = document.getElementById("location");
|
|
||||||
let locationLayer = document.getElementById("locationLayer");
|
|
||||||
let fullName = document.getElementById("full_name");
|
|
||||||
let nameLayer = document.getElementById("nameLayer");
|
|
||||||
let title = document.getElementById("title");
|
|
||||||
let titleLayer = document.getElementById("titleLayer");
|
|
||||||
let email = document.getElementById("email");
|
|
||||||
let emailLayer = document.getElementById("emailLayer");
|
|
||||||
let extension = document.getElementById("extension");
|
|
||||||
let directNumber = document.getElementById("directNumber");
|
|
||||||
let cellNumber = document.getElementById("cellNumber");
|
|
||||||
let numbersLayer = document.getElementById("numbersLayer");
|
|
||||||
|
|
||||||
let dataType = "";
|
|
||||||
|
|
||||||
liveGenWS.addEventListener("open", (e) => {
|
|
||||||
console.log("Websocket connection opened");
|
|
||||||
liveGenWS.send("start;");
|
|
||||||
}, false);
|
|
||||||
liveGenWS.addEventListener("message", (e) => {
|
|
||||||
const constDataType = dataType;
|
|
||||||
if (e.data instanceof ArrayBuffer || e.data instanceof Blob) {
|
|
||||||
let blob = e.data;
|
|
||||||
if (e.data instanceof ArrayBuffer) {
|
|
||||||
blob = new Blob([e.data], { type: "image/png" });
|
|
||||||
}
|
|
||||||
createImageBitmap(blob, 0, 0, 1080, 602, { resizeWidth: 404, resizeHeight: 225 }).then(img => {
|
|
||||||
updateLayer(constDataType, img);
|
|
||||||
});
|
|
||||||
} else if (typeof e.data === "string") {
|
|
||||||
let dataArray = e.data.split(";");
|
|
||||||
if (dataArray[0] === "success") {
|
|
||||||
console.log(dataArray[1]);
|
|
||||||
id = dataArray[1];
|
|
||||||
}
|
|
||||||
dataType = e.data;
|
|
||||||
}
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
function updateLayer(type, img) {
|
|
||||||
let workingLayer;
|
|
||||||
switch (type) {
|
|
||||||
case "location": {
|
|
||||||
workingLayer = locationLayer;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "background": {
|
|
||||||
workingLayer = backgroundLayer;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "name": {
|
|
||||||
workingLayer = nameLayer;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "title": {
|
|
||||||
workingLayer = titleLayer;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "email": {
|
|
||||||
workingLayer = emailLayer;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "extension":
|
|
||||||
case "directNumber": {
|
|
||||||
workingLayer = numbersLayer;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "cellNumber": {
|
|
||||||
workingLayer = numbersLayer;
|
|
||||||
handleUpdate("email", email);
|
|
||||||
handleUpdate("location", loc);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let ctx = workingLayer.getContext("2d");
|
|
||||||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
||||||
ctx.drawImage(img, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleUpdate(val, elem) {
|
|
||||||
liveGenWS.send(val + ";" + elem.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
loc.addEventListener("change", (e) => {
|
|
||||||
handleUpdate("location", loc);
|
|
||||||
handleUpdate("background", loc);
|
|
||||||
}, false);
|
|
||||||
fullName.addEventListener("keyup", (e) => handleUpdate("name", fullName), false);
|
|
||||||
title.addEventListener("keyup", (e) => handleUpdate("title", title), false);
|
|
||||||
email.addEventListener("keyup", (e) => handleUpdate("email", email), false);
|
|
||||||
extension.addEventListener("keyup", (e) => handleUpdate("extension", extension), false);
|
|
||||||
directNumber.addEventListener("keyup", (e) => handleUpdate("directNumber", directNumber), false);
|
|
||||||
cellNumber.addEventListener("keyup", (e) => handleUpdate("cellNumber", cellNumber), false);
|
|
||||||
Loading…
Reference in New Issue
Block a user