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

Almost perfect

Browse Source
This commit is contained in:
Steven Tracey 2023-06-01 11:25:27 -04:00
parent e15417f844
commit e8a367a3de
5 changed files with 133 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
darkmode.css
View File

@ -22,8 +22,8 @@
left: 0.75em; left: 0.75em;
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
-webkit-transition: var(--trans-dur); -webkit-transition: var(--trans-dur-fast);
transition: var(--trans-dur); transition: var(--trans-dur-fast);
} }
.icon-part { .icon-part {
border-radius: 50%; border-radius: 50%;
@ -33,20 +33,20 @@
left: calc(50% - 0.5em); left: calc(50% - 0.5em);
width: 1em; width: 1em;
height: 1em; height: 1em;
-webkit-transition: opacity var(--trans-dur) ease-in-out, -webkit-transition: opacity var(--trans-dur-fast) ease-in-out,
-webkit-box-shadow var(--trans-dur) ease-in-out, -webkit-box-shadow var(--trans-dur-fast) ease-in-out,
-webkit-transform var(--trans-dur) ease-in-out; -webkit-transform var(--trans-dur-fast) ease-in-out;
transition: opacity var(--trans-dur) ease-in-out, transition: opacity var(--trans-dur-fast) ease-in-out,
-webkit-box-shadow var(--trans-dur) ease-in-out, -webkit-box-shadow var(--trans-dur-fast) ease-in-out,
-webkit-transform var(--trans-dur) ease-in-out; -webkit-transform var(--trans-dur-fast) ease-in-out;
transition: box-shadow var(--trans-dur) ease-in-out, transition: box-shadow var(--trans-dur-fast) ease-in-out,
opacity var(--trans-dur) ease-in-out, opacity var(--trans-dur-fast) ease-in-out,
transform var(--trans-dur) ease-in-out; transform var(--trans-dur-fast) ease-in-out;
transition: box-shadow var(--trans-dur) ease-in-out, transition: box-shadow var(--trans-dur-fast) ease-in-out,
opacity var(--trans-dur) ease-in-out, opacity var(--trans-dur-fast) ease-in-out,
transform var(--trans-dur) ease-in-out, transform var(--trans-dur-fast) ease-in-out,
-webkit-box-shadow var(--trans-dur) ease-in-out, -webkit-box-shadow var(--trans-dur-fast) ease-in-out,
-webkit-transform var(--trans-dur) ease-in-out; -webkit-transform var(--trans-dur-fast) ease-in-out;
-webkit-transform: scale(0.5); -webkit-transform: scale(0.5);
-ms-transform: scale(0.5); -ms-transform: scale(0.5);
transform: scale(0.5); transform: scale(0.5);
@ -120,20 +120,20 @@
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
-webkit-transition: background-color var(--trans-dur) ease-in-out, -webkit-transition: background-color var(--trans-dur-fast) ease-in-out,
-webkit-box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out,
-webkit-transform var(--trans-dur) ease-in-out; -webkit-transform var(--trans-dur-fast) ease-in-out;
transition: background-color var(--trans-dur) ease-in-out, transition: background-color var(--trans-dur-fast) ease-in-out,
-webkit-box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out,
-webkit-transform var(--trans-dur) ease-in-out; -webkit-transform var(--trans-dur-fast) ease-in-out;
transition: background-color var(--trans-dur) ease-in-out, transition: background-color var(--trans-dur-fast) ease-in-out,
box-shadow 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
transform var(--trans-dur) ease-in-out; transform var(--trans-dur-fast) ease-in-out;
transition: background-color var(--trans-dur) ease-in-out, transition: background-color var(--trans-dur-fast) ease-in-out,
box-shadow 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
transform var(--trans-dur) ease-in-out, transform var(--trans-dur-fast) ease-in-out,
-webkit-box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out,
-webkit-transform var(--trans-dur) ease-in-out; -webkit-transform var(--trans-dur-fast) ease-in-out;
} }
.toggle:before { .toggle:before {
background-color: var(--yellow); background-color: var(--yellow);
@ -141,8 +141,8 @@
content: ""; content: "";
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
-webkit-transition: 0.3s; -webkit-transition: var(--trans-dur-fast);
transition: 0.3s; transition: var(--trans-dur-fast);
} }
.toggle:focus { .toggle:focus {
-webkit-box-shadow: 0 0 0 0.125em var(--theme-blue); -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
@ -151,7 +151,7 @@
} }
/* Checked */ /* Checked */
.toggle:checked { .toggle:checked {
background-color: var(--theme-dark-blue); background-color: var(--theme-gray);
} }
.toggle:checked:before, .toggle:checked:before,
.toggle:checked ~ .icon { .toggle:checked ~ .icon {

42
darkmode.js
View File

@ -1,7 +1,45 @@
document.getElementById("theme").addEventListener("click", toggleDarkMode, false) const themeToggle = document.getElementById("theme");
let userPreference = getUserPreference();
refreshDarkMode() 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;
}
function togglePreference() {
if (userPreference === "light") {
userPreference = "dark";
} else if (userPreference === "dark") {
userPreference = "light";
}
console.log(userPreference);
saveUserPreference(userPreference);
setAppliedMode(getAppliedMode(userPreference));
}
function toggleDarkMode() { function toggleDarkMode() {
if (getCookie("darkMode") === "on") document.cookie = "darkMode=off;path=/"; if (getCookie("darkMode") === "on") document.cookie = "darkMode=off;path=/";

1
index.html
View File

@ -17,6 +17,7 @@
inputs.forEach(i => i.addEventListener('input', inputListener)); inputs.forEach(i => i.addEventListener('input', inputListener));
}); });
document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';
</script> </script>
</head> </head>
<body> <body>

6
script.js
View File

@ -12,7 +12,7 @@ function handleCheckbox() {
} }
} }
let backendUrl = "https://vcard.caiu.org" let backendUrl = "https://signature.caiu.org"
let locations = JSON.parse("{}"); let locations = JSON.parse("{}");
function loadLocations() { function loadLocations() {
@ -167,6 +167,10 @@ function loadFromExistingCard() {
} }
document.getElementById("cellNumber").value = json.CellNumber; document.getElementById("cellNumber").value = json.CellNumber;
}); });
document.getElementById("previewImg").classList.add("hidden");
let uploadLabel = document.getElementById("uploadLabel");
uploadLabel.innerText = "Click or drag here to edit existing card";
uploadLabel.classList.remove("with-img");
} }
async function fetchWithTimeout(resource, options = {}) { async function fetchWithTimeout(resource, options = {}) {

93
stylesheet.css
View File

@ -20,10 +20,16 @@
--light: #f8f9fa; --light: #f8f9fa;
--dark: #343a40; --dark: #343a40;
--theme-blue: #007bff; --theme-green: #658D1B;
--theme-blue-hover: #0064d9; --theme-green-accent: #436e24;
--theme-dark-blue: hsl(198,90%,15%); --theme-yellow-green: #C4D600;
--theme-active: #002872; --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;
@ -32,12 +38,24 @@
--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;
--text-color-neg: #ffffff; --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 { *, ::after, ::before {
@ -58,12 +76,14 @@ body {
text-align: left; text-align: left;
color: var(--text-color); color: var(--text-color);
background-color: var(--background-color); background-color: var(--background-color);
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
} }
header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: var(--secondary-color); background-color: var(--theme-blue);
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
} }
main { main {
@ -90,7 +110,7 @@ input {
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
overflow: visible; overflow: visible;
background-color: var(--secondary-color); transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out;
} }
textarea { textarea {
@ -98,7 +118,8 @@ textarea {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
background-color: var(--secondary-color); background-color: var(--theme-blue);
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
} }
select { select {
@ -151,12 +172,16 @@ 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 .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; 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;
} }
.btn-primary { .btn-primary {
color: #fff; color: #fff;
background-color: var(--theme-blue); background-color: var(--theme-green);
border-color: var(--theme-blue); border-color: var(--theme-green-accent);
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur-fast);
}
.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;
@ -177,14 +202,6 @@ 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;
}
.text-center { .text-center {
text-align: center !important; text-align: center !important;
} }
@ -207,11 +224,11 @@ 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(--secondary-color); background-color: var(--background-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; transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out, border-color var(--trans-dur) ease-in-out, box-shadow .15s ease-in-out;
} }
.logo { .logo {
@ -229,7 +246,7 @@ input[type="checkbox"], input[type="radio"] {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: var(--theme-blue); background-color: var(--theme-green);
} }
.navbar li { .navbar li {
float: left; float: left;
@ -246,12 +263,15 @@ input[type="checkbox"], input[type="radio"] {
text-align: center; text-align: center;
padding: 1.5em; padding: 1.5em;
text-decoration: none; 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) { .navbar li a:hover:not(.active) {
background-color: var(--theme-blue-hover); 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 { .active {
background-color: var(--theme-active); background-color: var(--theme-green-accent);
} }
.float-left { .float-left {
float:left !important; float:left !important;
@ -292,11 +312,12 @@ input[type="checkbox"], input[type="radio"] {
border-radius: 50%; border-radius: 50%;
padding: .75em; padding: .75em;
background: var(--theme-blue); background: var(--theme-blue);
border: 2px solid var(--theme-dark-blue); border: 2px solid var(--theme-black);
position: absolute; position: absolute;
right: -1.5em; right: -1.5em;
top: -1.5em; top: -1.5em;
text-decoration: none; text-decoration: none;
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
} }
.x div { .x div {
@ -304,15 +325,16 @@ input[type="checkbox"], input[type="radio"] {
width: 16px; width: 16px;
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
color: var(--text-color-neg); color: var(--text-color-negative);
line-height: 8px !important; line-height: 8px !important;
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
} }
.upload { .upload {
opacity: 100% !important; opacity: 100% !important;
border-radius: .5rem; border-radius: .5rem;
padding: 1em; padding: 1em;
border: solid 2px var(--theme-dark-blue); border: solid 2px var(--theme-black);
background-color: var(--background-color); background-color: var(--background-color);
position: fixed; position: fixed;
flex-direction: column; flex-direction: column;
@ -325,10 +347,11 @@ input[type="checkbox"], input[type="radio"] {
left: 50%; left: 50%;
top: 14em; top: 14em;
margin-left: -20em; margin-left: -20em;
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
} }
.upload img { .upload img {
width: 100%; width: 20em;
height: fit-content; height: fit-content;
margin-left: 5% !important; margin-left: 5% !important;
margin-right: 10% !important; margin-right: 10% !important;
@ -341,6 +364,7 @@ input[type="checkbox"], input[type="radio"] {
.disabled { .disabled {
opacity: 75%; opacity: 75%;
cursor: not-allowed;
} }
.hovering { .hovering {
@ -354,11 +378,12 @@ input[type="checkbox"], input[type="radio"] {
.dotted { .dotted {
display: flex; display: flex;
border: dotted 2px var(--theme-dark-blue); border: dotted 2px var(--theme-black);
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
align-items: center; align-items: center;
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
} }
.dotted label { .dotted label {