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;
width: 1.5em;
height: 1.5em;
-webkit-transition: var(--trans-dur);
transition: var(--trans-dur);
-webkit-transition: var(--trans-dur-fast);
transition: var(--trans-dur-fast);
}
.icon-part {
border-radius: 50%;
@ -33,20 +33,20 @@
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-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);
@ -120,20 +120,20 @@
-webkit-appearance: none;
-moz-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-transform var(--trans-dur) ease-in-out;
transition: background-color var(--trans-dur) 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) ease-in-out;
transition: background-color var(--trans-dur) 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) ease-in-out;
transition: background-color var(--trans-dur) 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) ease-in-out,
transform var(--trans-dur-fast) 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 {
background-color: var(--yellow);
@ -141,8 +141,8 @@
content: "";
width: 2.5em;
height: 2.5em;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition: var(--trans-dur-fast);
transition: var(--trans-dur-fast);
}
.toggle:focus {
-webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
@ -151,7 +151,7 @@
}
/* Checked */
.toggle:checked {
background-color: var(--theme-dark-blue);
background-color: var(--theme-gray);
}
.toggle:checked:before,
.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() {
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));
});
document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';
</script>
</head>
<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("{}");
function loadLocations() {
@ -167,6 +167,10 @@ function loadFromExistingCard() {
}
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 = {}) {

93
stylesheet.css
View File

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