From 3abe8af17cb8b615e30e2bf3a0b81f50cfc88eac Mon Sep 17 00:00:00 2001 From: Arkadiusz Adamski Date: Sat, 5 Oct 2024 17:26:38 +0200 Subject: [PATCH] chore: add `biome` for lint and format CSS and JS --- .vscode/extensions.json | 3 +- cardie/static/main/authentication.css | 105 +- cardie/static/main/card.css | 189 +-- cardie/static/main/card_view.css | 56 +- cardie/static/main/editor.css | 625 +++++----- cardie/static/main/editor_print.css | 266 ++-- cardie/static/main/footer.css | 473 ++++--- cardie/static/main/home.css | 287 +++-- cardie/static/main/index.css | 355 +++--- cardie/static/main/notifications.css | 113 +- cardie/static/main/privacy.css | 102 +- .../scripts/authentication/authentication.js | 350 +++--- .../main/scripts/card_view/card_view.js | 245 ++-- cardie/static/main/scripts/editor/editor.js | 28 +- .../main/scripts/editor/editor_information.js | 226 ++-- cardie/static/main/scripts/editor/icons.js | 128 +- cardie/static/main/scripts/editor/print.js | 153 +-- cardie/static/main/scripts/editor/rename.js | 47 +- .../main/scripts/external/qrcode.min.js | 1101 ++++++++++++++++- .../main/scripts/global/background_blur.js | 22 +- cardie/static/main/scripts/global/card.js | 349 +++--- cardie/static/main/scripts/global/favicon.js | 70 +- .../static/main/scripts/global/font_styles.js | 86 +- cardie/static/main/scripts/global/logging.js | 86 +- .../main/scripts/global/notifications.js | 58 +- cardie/static/main/scripts/home/home.js | 612 +++++---- cardie/static/main/scripts/index/index.js | 46 +- cardie/static/main/ui.css | 691 +++++------ cardie/static/main/variables.css | 27 +- 29 files changed, 4115 insertions(+), 2784 deletions(-) diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 3ff560f..c074ed9 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,6 @@ { "recommendations": [ - "charliermarsh.ruff" + "charliermarsh.ruff", + "biomejs.biome" ] } diff --git a/cardie/static/main/authentication.css b/cardie/static/main/authentication.css index 165cb7d..aae02f1 100644 --- a/cardie/static/main/authentication.css +++ b/cardie/static/main/authentication.css @@ -1,87 +1,92 @@ html { - background: rgb(37, 40, 49); + background: rgb(37, 40, 49); } #authentication-box { - position: absolute; - top: 50%; - left: 50%; - translate: -50% -50%; + position: absolute; + top: 50%; + left: 50%; + translate: -50% -50%; - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - z-index: 1; + z-index: 1; } #authentication-box-image { - width: clamp(30vh, 300px, 30vw); - height: auto; + width: clamp(30vh, 300px, 30vw); + height: auto; - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; - cursor: pointer; - transition: var(--default-transition); + cursor: pointer; + transition: var(--default-transition); } #authentication-box-image:hover { - scale: 1.05; + scale: 1.05; } #signin-box { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - align-items: center; + align-items: center; } #createaccount-box { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - align-items: center; + align-items: center; } #authentication-error { - opacity: 0; - scale: 0.8; - transition: var(--default-transition); + opacity: 0; + scale: 0.8; + transition: var(--default-transition); } #authentication-error.show { - opacity: 1; - scale: 1; + opacity: 1; + scale: 1; } #blob { - position: absolute; - top: 50%; - left: 50%; - translate: -50% -50%; - - width: clamp(40vh, 400px, 40vw); - height: auto; - aspect-ratio: 1; - border-radius: 200px; - filter: blur(70px); - - z-index: 0; - - background: rgb(61,132,148); - background: linear-gradient(120deg, rgb(61, 84, 148) 9%, rgb(62, 34, 139) 47%, rgb(37, 210, 187) 91%); + position: absolute; + top: 50%; + left: 50%; + translate: -50% -50%; + + width: clamp(40vh, 400px, 40vw); + height: auto; + aspect-ratio: 1; + border-radius: 200px; + filter: blur(70px); + + z-index: 0; + + background: rgb(61, 132, 148); + background: linear-gradient( + 120deg, + rgb(61, 84, 148) 9%, + rgb(62, 34, 139) 47%, + rgb(37, 210, 187) 91% + ); } #authentication_privacypolicy { - color: var(--default-text-color); - font-family: var(--default-font-family); - transition: var(--default-transition); - text-align: center; - cursor: pointer; - opacity: 0.8; + color: var(--default-text-color); + font-family: var(--default-font-family); + transition: var(--default-transition); + text-align: center; + cursor: pointer; + opacity: 0.8; } #authentication_privacypolicy:hover { - scale: 1.1; - opacity: 1; -} \ No newline at end of file + scale: 1.1; + opacity: 1; +} diff --git a/cardie/static/main/card.css b/cardie/static/main/card.css index 293f228..917942b 100644 --- a/cardie/static/main/card.css +++ b/cardie/static/main/card.css @@ -1,201 +1,202 @@ /* Styles for the Card UI element */ .card_card { - margin: 10px; - - width: 600px; - aspect-ratio: 1.75; + margin: 10px; - transition: all 0.2s; - perspective: 900px; - display: block; + width: 600px; + aspect-ratio: 1.75; + + transition: all 0.2s; + perspective: 900px; + display: block; } -.card_card_front, .card_card_back { - position: absolute; - top: 0; - width: 100%; - min-height: 100%; - text-align: left; - backface-visibility: hidden; - transform-style: preserve3d; - transition: all 0.4s; +.card_card_front, +.card_card_back { + position: absolute; + top: 0; + width: 100%; + min-height: 100%; + text-align: left; + backface-visibility: hidden; + transform-style: preserve3d; + transition: all 0.4s; - border-radius: 10px; + border-radius: 10px; - -webkit-box-shadow: 0px 10px 29px 0px rgba(0, 0, 0, 0.75); - -moz-box-shadow: 0px 10px 29px 0px rgba(0, 0, 0, 0.75); - box-shadow: 0px 10px 29px 0px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 0px 10px 29px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 10px 29px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 10px 29px 0px rgba(0, 0, 0, 0.75); - background-color: white; + background-color: white; } .card_card_front[card-align="left"] { - text-align: left; + text-align: left; } .card_card_front[card-align="right"] { - text-align: right; + text-align: right; } .card_card_front[card-align="center"] { - text-align: center; + text-align: center; } .card_card_front[card-align="left"] .card_item_text { - justify-content: left; + justify-content: left; } .card_card_front[card-align="right"] .card_item_text { - justify-content: right; + justify-content: right; } .card_card_front[card-align="center"] .card_item_text { - justify-content: center; + justify-content: center; } .card_card_front[card-align="left"] .card_item_link { - justify-content: left; + justify-content: left; } .card_card_front[card-align="right"] .card_item_link { - justify-content: right; + justify-content: right; } .card_card_front[card-align="center"] .card_item_link { - justify-content: center; + justify-content: center; } .card_content { - padding: clamp(3vh, 30px, 3vw); + padding: clamp(3vh, 30px, 3vw); } .card_card_back { - transform: rotateY(-180deg); + transform: rotateY(-180deg); } .card_flipped .card_card_back { - transform: rotateY(0deg); + transform: rotateY(0deg); } .card_flipped .card_card_front { - transform: rotateY(180deg); + transform: rotateY(180deg); } .card_top { - display: flex; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: row; + align-items: center; - margin-bottom: clamp(1vh, 10px, 1vw); + margin-bottom: clamp(1vh, 10px, 1vw); } .card_top_text { - display: flex; - flex-direction: column; - margin-left: clamp(1vh, 10px, 1vw); + display: flex; + flex-direction: column; + margin-left: clamp(1vh, 10px, 1vw); } .card_top_profilepicture { - aspect-ratio: 1; - width: clamp(5vh, 50px, 5vw); - height: clamp(5vh, 50px, 5vw); - border: 1px solid gray; - border-radius: 50px; + aspect-ratio: 1; + width: clamp(5vh, 50px, 5vw); + height: clamp(5vh, 50px, 5vw); + border: 1px solid gray; + border-radius: 50px; - /* TODO: Hidden for now, will be fixed once the ability to add profile pictures is implemented */ - display: none; + /* TODO: Hidden for now, will be fixed once the ability to add profile pictures is implemented */ + display: none; } .card_top_text_username { - font-family: var(--default-font-family); + font-family: var(--default-font-family); - margin: 0px; - padding: 0px; + margin: 0px; + padding: 0px; - font-size: clamp(3vh, 30px, 3vw); + font-size: clamp(3vh, 30px, 3vw); } .card_top_text_pronouns { - font-family: var(--default-font-family); + font-family: var(--default-font-family); - margin: 0px; - padding: 0px; - margin-left: clamp(1vh, 10px, 1w); + margin: 0px; + padding: 0px; + margin-left: clamp(1vh, 10px, 1w); - font-size: clamp(1.6vh, 16px, 1.6vw); - opacity: 0.8; + font-size: clamp(1.6vh, 16px, 1.6vw); + opacity: 0.8; } .card_item_text { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .card_item_link { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .card_item_text > p { - font-family: var(--default-font-family); + font-family: var(--default-font-family); - margin: 0px; - padding: 0px; - margin-left: clamp(0.4vh, 4px, 0.4vw); + margin: 0px; + padding: 0px; + margin-left: clamp(0.4vh, 4px, 0.4vw); } .card_item_link > button { - all: unset; - font-family: var(--default-font-family); - cursor: pointer; + all: unset; + font-family: var(--default-font-family); + cursor: pointer; - margin-left: clamp(0.4vh, 4px, 0.4vw); - border: none; - background-color: none; - color: rgb(64, 163, 255); + margin-left: clamp(0.4vh, 4px, 0.4vw); + border: none; + background-color: none; + color: rgb(64, 163, 255); } .card_wrap { - max-width: 100vh; - display: flex; - flex-direction: row; - justify-content: left; - align-items: start; + max-width: 100vh; + display: flex; + flex-direction: row; + justify-content: left; + align-items: start; } .card_card p { - transition: var(--default-transition); + transition: var(--default-transition); } .card_card i { - transition: var(--default-transition); + transition: var(--default-transition); } .card_top_text { - width: 100%; + width: 100%; } #dialog_card_menu_items { - padding-left: clamp(1.5vh, 15px, 1.5vw); - padding-right: clamp(1.5vh, 15px, 1.5vw); + padding-left: clamp(1.5vh, 15px, 1.5vw); + padding-right: clamp(1.5vh, 15px, 1.5vw); } #dialog_card_menu_items > .card_item_text { - color: white; + color: white; } #dialog_card_menu_items > .card_item_link { - color: white; + color: white; } #dialog_card_menu_button { - all: unset; - font-family: var(--default-font-family); - cursor: pointer; - - margin-left: clamp(0.4vh, 4px, 0.4vw); - border: none; - background-color: none; - color: rgb(64, 163, 255); -} \ No newline at end of file + all: unset; + font-family: var(--default-font-family); + cursor: pointer; + + margin-left: clamp(0.4vh, 4px, 0.4vw); + border: none; + background-color: none; + color: rgb(64, 163, 255); +} diff --git a/cardie/static/main/card_view.css b/cardie/static/main/card_view.css index ee7f5c5..00f7763 100644 --- a/cardie/static/main/card_view.css +++ b/cardie/static/main/card_view.css @@ -1,58 +1,58 @@ html { - background: rgb(37, 40, 49); + background: rgb(37, 40, 49); } #cardview { - position: fixed; - top: 50%; - left: 50%; - translate: -50% -50%; + position: fixed; + top: 50%; + left: 50%; + translate: -50% -50%; - width: fit-content; - height: fit-content; - max-width: 100vw; + width: fit-content; + height: fit-content; + max-width: 100vw; } #cardview_text { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - margin-left: clamp(1vh, 10px, 1vw); - margin-bottom: clamp(2vh, 20px, 2vw); + margin-left: clamp(1vh, 10px, 1vw); + margin-bottom: clamp(2vh, 20px, 2vw); } #cardview_text_username { - opacity: 0.7; - margin-left: 20px; + opacity: 0.7; + margin-left: 20px; } #cardview_top { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } #cardview_logo { - height: clamp(5vh, 50px, 5vw); - transition: var(--default-transition); + height: clamp(5vh, 50px, 5vw); + transition: var(--default-transition); } #cardview_logo:hover { - scale: 1.1; + scale: 1.1; } #cardview_bottom { - display: flex; - flex-direction: column; - align-items: center; - margin-top: clamp(1vh, 10px, 1vw); + display: flex; + flex-direction: column; + align-items: center; + margin-top: clamp(1vh, 10px, 1vw); } #cardview_card { - display: flex; - flex-direction: row; - justify-content: center; + display: flex; + flex-direction: row; + justify-content: center; } #cardview_bottom_owned { - opacity: 0.8; -} \ No newline at end of file + opacity: 0.8; +} diff --git a/cardie/static/main/editor.css b/cardie/static/main/editor.css index 4ed4315..6268288 100644 --- a/cardie/static/main/editor.css +++ b/cardie/static/main/editor.css @@ -1,492 +1,491 @@ html { - background: rgb(37, 40, 49); + background: rgb(37, 40, 49); } #editor_header { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } #editor_header_title { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } #editor_header_title_image { - height: clamp(5vh, 50px, 5vw); + height: clamp(5vh, 50px, 5vw); } #editor_header_title_text { - font-family: var(--default-font-family); - font-size: clamp(3vh, 30px, 3vw); - color: white; - margin: 0; - padding: 0; + font-family: var(--default-font-family); + font-size: clamp(3vh, 30px, 3vw); + color: white; + margin: 0; + padding: 0; - margin-left: clamp(1vh, 10px, 1vw); - margin-top: clamp(0.5vh, 5px, 0.5vw); + margin-left: clamp(1vh, 10px, 1vw); + margin-top: clamp(0.5vh, 5px, 0.5vw); } #editor_header_title_home { - margin-left: 0px; + margin-left: 0px; } #editor_header_name { - display: flex; - flex-direction: row; - margin-left: clamp(2vh, 20px, 2vw); + display: flex; + flex-direction: row; + margin-left: clamp(2vh, 20px, 2vw); } #editor_header_name_button { - background-color: rgba(99, 99, 99, 0.4); - border: 2px solid rgba(145, 145, 145, 0.6); - border: none; - color: white; + background-color: rgba(99, 99, 99, 0.4); + border: 2px solid rgba(145, 145, 145, 0.6); + border: none; + color: white; - aspect-ratio: 1; - width: clamp(3vh, 30px, 3vw); - height: clamp(3vh, 30px, 3vw); - border-radius: 100px; - padding: 0; + aspect-ratio: 1; + width: clamp(3vh, 30px, 3vw); + height: clamp(3vh, 30px, 3vw); + border-radius: 100px; + padding: 0; - margin-top: auto; - margin-bottom: auto; - transition: var(--default-transition); + margin-top: auto; + margin-bottom: auto; + transition: var(--default-transition); } #editor_header_name_button:hover { - scale: 1.1; - background-color: rgba(99, 99, 99, 0.6); + scale: 1.1; + background-color: rgba(99, 99, 99, 0.6); } #editor_header_name_button:active { - scale: 0.9; + scale: 0.9; } #editor_header_name_text_cardname { - color: white; - padding-left: clamp(1vh, 10px, 1vw); + color: white; + padding-left: clamp(1vh, 10px, 1vw); } #editor_header_name_text_username { - color: white; - margin-left: clamp(0.8vh, 8px, 0.8vw); + color: white; + margin-left: clamp(0.8vh, 8px, 0.8vw); } #editor_status { - color: white; - font-family: var(--default-font-family); - font-size: clamp(1.4vh, 14px, 1.4vw); + color: white; + font-family: var(--default-font-family); + font-size: clamp(1.4vh, 14px, 1.4vw); - padding: clamp(0.5vh, 5px, 0.5vw); - padding-left: clamp(1vh, 10px, 1vw); - padding-right: clamp(1vh, 10px, 1vw); - margin: 0px; - margin-left: clamp(2vh, 20px, 2vw); + padding: clamp(0.5vh, 5px, 0.5vw); + padding-left: clamp(1vh, 10px, 1vw); + padding-right: clamp(1vh, 10px, 1vw); + margin: 0px; + margin-left: clamp(2vh, 20px, 2vw); - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 20px; + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 20px; - width: fit-content; + width: fit-content; } @media (min-width: 1000px) { - /* Large screens */ + /* Large screens */ - #editor_main { - display: flex; - flex-direction: row; - } + #editor_main { + display: flex; + flex-direction: row; + } } @media (max-width: 1000px) { - /* Small Screens */ + /* Small Screens */ - #editor_main { - display: flex; - flex-direction: column; - } + #editor_main { + display: flex; + flex-direction: column; + } } #editor_main_settings { - margin-left: clamp(2vh, 20px, 2vw); - margin-right: clamp(2vh, 20px, 2vw); - padding-top: clamp(2vh, 20px, 2vw); + margin-left: clamp(2vh, 20px, 2vw); + margin-right: clamp(2vh, 20px, 2vw); + padding-top: clamp(2vh, 20px, 2vw); - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } #editor_main_settings_layout_buttons { - display: flex; - flex-direction: row; - margin-top: clamp(1vh, 10px, 1vw); - margin-left: auto; - margin-right: auto; + display: flex; + flex-direction: row; + margin-top: clamp(1vh, 10px, 1vw); + margin-left: auto; + margin-right: auto; } .text_item { - display: flex; - flex-direction: row-reverse; + display: flex; + flex-direction: row-reverse; } .link_item { - display: flex; - flex-direction: row-reverse; + display: flex; + flex-direction: row-reverse; } @keyframes show-iconselector { - from { - opacity: 0; - scale: 0.8; - } + from { + opacity: 0; + scale: 0.8; + } - to { - opacity: 1; - scale: 1; - } + to { + opacity: 1; + scale: 1; + } } @keyframes hide-iconselector { - from { - opacity: 1; - scale: 1; - } + from { + opacity: 1; + scale: 1; + } - to { - opacity: 0; - scale: 0.8; - } + to { + opacity: 0; + scale: 0.8; + } } .show-iconselector { - animation: show-iconselector 0.2s ease-in-out forwards; + animation: show-iconselector 0.2s ease-in-out forwards; } .hide-iconselector { - animation: hide-iconselector 0.2s ease-in-out forwards; + animation: hide-iconselector 0.2s ease-in-out forwards; } @media (min-width: 1000px) { - /* Large screens */ - - #editor-iconselector { - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 20px; - - aspect-ratio: 1; - width: auto; - height: 40%; - max-height: 40%; - - z-index: 3; - - position: fixed; - top: 50%; - left: 50%; - translate: -50% -50%; - - padding: clamp(1.5vh, 15px, 1.5vw); - - display: flex; - flex-direction: column; - - display: none; /* Keep hidden until needed */ - - /* Starting properties for animation */ - opacity: 0; - scale: 0.8; - } + /* Large screens */ + + #editor-iconselector { + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 20px; + + aspect-ratio: 1; + width: auto; + height: 40%; + max-height: 40%; + + z-index: 3; + + position: fixed; + top: 50%; + left: 50%; + translate: -50% -50%; + + padding: clamp(1.5vh, 15px, 1.5vw); + + display: flex; + flex-direction: column; + + display: none; /* Keep hidden until needed */ + + /* Starting properties for animation */ + opacity: 0; + scale: 0.8; + } } @media (max-width: 1000px) { - /* Small Screens */ - - #editor-iconselector { - background-color: var(--default-glass-background); - backdrop-filter: var(--default-glass-blur); - - aspect-ratio: 1; - width: calc(100vw - 1.5vh); - height: 100vh; - max-height: 100vh; - - z-index: 3; - - position: fixed; - top: 0px; - left: 0px; - - padding: clamp(1.5vh, 15px, 1.5vw); - - display: flex; - flex-direction: column; - - display: none; /* Keep hidden until needed */ - - /* Starting properties for animation */ - opacity: 0; - scale: 0.8; - } + /* Small Screens */ + + #editor-iconselector { + background-color: var(--default-glass-background); + backdrop-filter: var(--default-glass-blur); + + aspect-ratio: 1; + width: calc(100vw - 1.5vh); + height: 100vh; + max-height: 100vh; + + z-index: 3; + + position: fixed; + top: 0px; + left: 0px; + + padding: clamp(1.5vh, 15px, 1.5vw); + + display: flex; + flex-direction: column; + + display: none; /* Keep hidden until needed */ + + /* Starting properties for animation */ + opacity: 0; + scale: 0.8; + } } #editor-iconselector-top { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } #editor-iconselector-top-search { - height: clamp(2vh, 20px, 2vw); - max-height: clamp(2vh, 20px, 2vw); - margin-bottom: clamp(1vh, 10px, 1vw); + height: clamp(2vh, 20px, 2vw); + max-height: clamp(2vh, 20px, 2vw); + margin-bottom: clamp(1vh, 10px, 1vw); } #editor-iconselector-icons { - display: flex; - flex-wrap: wrap; - overflow-y: auto; + display: flex; + flex-wrap: wrap; + overflow-y: auto; - margin-top: clamp(0.5vh, 5px, 0.5vw); + margin-top: clamp(0.5vh, 5px, 0.5vw); } .editor-iconselector-icon { - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - transition: var(--default-transition); - border-radius: 10px; + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + transition: var(--default-transition); + border-radius: 10px; - width: 15%; - height: auto; - aspect-ratio: 1; + width: 15%; + height: auto; + aspect-ratio: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: clamp(0.8vh, 8px, 0.8vw); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: clamp(0.8vh, 8px, 0.8vw); - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .editor-iconselector-icon:hover { - scale: 1.05; + scale: 1.05; } .editor-iconselector-icon:active { - scale: 0.95; + scale: 0.95; } .editor-iconselector-icon-icon { - color: white; - font-size: clamp(3vh, 30px, 3vw); - text-align: center; - margin-top: clamp(0.3vh, 3px, 0.3vw); + color: white; + font-size: clamp(3vh, 30px, 3vw); + text-align: center; + margin-top: clamp(0.3vh, 3px, 0.3vw); } .editor-iconselector-icon-text { - color: white; - font-family: "Noto Sans Mono", "Courier New", monospace; - font-size: clamp(1vh, 10px, 1vw); - text-align: center; - user-select: none; + color: white; + font-family: "Noto Sans Mono", "Courier New", monospace; + font-size: clamp(1vh, 10px, 1vw); + text-align: center; + user-select: none; } @keyframes show-rename { - from { - opacity: 0; - scale: 0.8; - } + from { + opacity: 0; + scale: 0.8; + } - to { - opacity: 1; - scale: 1; - } + to { + opacity: 1; + scale: 1; + } } @keyframes hide-rename { - from { - opacity: 1; - scale: 1; - } + from { + opacity: 1; + scale: 1; + } - to { - opacity: 0; - scale: 0.8; - } + to { + opacity: 0; + scale: 0.8; + } } .show-rename { - animation: show-rename 0.2s ease-in-out forwards; + animation: show-rename 0.2s ease-in-out forwards; } .hide-rename { - animation: hide-rename 0.2s ease-in-out forwards; + animation: hide-rename 0.2s ease-in-out forwards; } @media (min-width: 1000px) { - /* Large screens */ - - #editor_rename { - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 20px; - - z-index: 3; - - position: fixed; - top: 50%; - left: 50%; - translate: -50% -50%; - - padding: clamp(2vh, 20px, 2vw); - - display: flex; - flex-direction: column; - - display: none; /* Keep hidden until needed */ - - /* Starting properties for animation */ - opacity: 0; - scale: 0.8; - } - - #editor_rename_input { - width: clamp(40vh, 400px, 40vw); - } + /* Large screens */ + + #editor_rename { + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 20px; + + z-index: 3; + + position: fixed; + top: 50%; + left: 50%; + translate: -50% -50%; + + padding: clamp(2vh, 20px, 2vw); + + display: flex; + flex-direction: column; + + display: none; /* Keep hidden until needed */ + + /* Starting properties for animation */ + opacity: 0; + scale: 0.8; + } + + #editor_rename_input { + width: clamp(40vh, 400px, 40vw); + } } @media (max-width: 1000px) { - /* Small Screens */ - - #editor_rename { - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 20px; - - z-index: 3; - - position: fixed; - top: 50vh; - left: 50vw; - translate: -50% -50%; - - padding: clamp(2vh, 20px, 2vw); - - display: flex; - flex-direction: column; - - display: none; /* Keep hidden until needed */ - - /* Starting properties for animation */ - opacity: 0; - scale: 0.8; - } - - #editor_rename_input { - width: clamp(30vh, 300px, 30vw); - } + /* Small Screens */ + + #editor_rename { + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 20px; + + z-index: 3; + + position: fixed; + top: 50vh; + left: 50vw; + translate: -50% -50%; + + padding: clamp(2vh, 20px, 2vw); + + display: flex; + flex-direction: column; + + display: none; /* Keep hidden until needed */ + + /* Starting properties for animation */ + opacity: 0; + scale: 0.8; + } + + #editor_rename_input { + width: clamp(30vh, 300px, 30vw); + } } #editor_rename_top { - display: flex; - flex-direction: row; - justify-content: space-between; - margin-bottom: 10px; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 10px; } #editor_main_preview_share { - margin-top: clamp(2vh, 20px, 2vw); - margin-bottom: clamp(2vh, 20px, 2vw); + margin-top: clamp(2vh, 20px, 2vw); + margin-bottom: clamp(2vh, 20px, 2vw); } #editor_main_preview_demo { - margin-top: clamp(2vh, 20px, 2vw); - margin-bottom: clamp(2vh, 20px, 2vw); + margin-top: clamp(2vh, 20px, 2vw); + margin-bottom: clamp(2vh, 20px, 2vw); } #qrcode { - display: none; + display: none; } .item { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .item_item { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .item_menu { - display: flex; - flex-direction: column; - margin-left: clamp(5vh, 50px, 5vw); + display: flex; + flex-direction: column; + margin-left: clamp(5vh, 50px, 5vw); - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 20px; - padding: 5px; + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 20px; + padding: 5px; } .item_menu > button { - text-align: left; + text-align: left; } .editor_main_setting { - margin-bottom: clamp(2vh, 20px, 2vw); + margin-bottom: clamp(2vh, 20px, 2vw); } #editor_main_setting_font_selector { - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 20px; - margin-top: clamp(1vh, 10px, 1vw); + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 20px; + margin-top: clamp(1vh, 10px, 1vw); } #editor_main_setting_font_selector_top { - display: flex; - flex-direction: row; - justify-content: space-between; - vertical-align: middle; - align-items: baseline; - padding-left: clamp(1.5vh, 15px, 1.5vw); + display: flex; + flex-direction: row; + justify-content: space-between; + vertical-align: middle; + align-items: baseline; + padding-left: clamp(1.5vh, 15px, 1.5vw); } .editor_font_item { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } #editor_main_setting_font_selector_items { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .editor_font_item > button { - display: flex; - flex-direction: row; - width: 100%; + display: flex; + flex-direction: row; + width: 100%; } .editor_main_setting_font_selector_items_labels { - display: flex; - flex-direction: column; - text-align: right; - align-items: end; + display: flex; + flex-direction: column; + text-align: right; + align-items: end; - margin-left: clamp(1.5vh, 15px, 1.5vw); - margin-right: clamp(1vh, 10px, 1vw); - -} \ No newline at end of file + margin-left: clamp(1.5vh, 15px, 1.5vw); + margin-right: clamp(1vh, 10px, 1vw); +} diff --git a/cardie/static/main/editor_print.css b/cardie/static/main/editor_print.css index dad0e6e..361fe6e 100644 --- a/cardie/static/main/editor_print.css +++ b/cardie/static/main/editor_print.css @@ -1,134 +1,134 @@ @media print { - /* For when the page is printed */ - - * { - visibility: hidden; - margin: 0; - padding: 0; - } - - html { - max-height: 11.5in; - } - - #editor_main_preview { - position: absolute; - top: 0px; - left: 0px; - - display: grid; - grid-template-columns: repeat(2, 3.5in); - grid-template-rows: repeat(2, 4in); - grid-column-gap: 0.25in; - grid-row-gap: 0.25in; - } - - #editor_main_preview.twosided { - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, 0%); - - display: flex; - flex-direction: column; - } - - .card_card * { - visibility: visible; - } - - .card_card { - display: flex; - flex-direction: column; - perspective: unset; - - width: 3.5in; - height: 2in; - min-width: 3.5in; - min-height: 2in; - max-width: 3.5in; - max-height: 2in; - - } - - .card_card_front, .card_card_back { - position: unset; - top: unset; - border: 2px solid rgb(0, 0, 0); - -webkit-box-shadow: unset; - -moz-box-shadow: unset; - box-shadow: unset; - - backface-visibility: unset; - transform-style: unset; - - width: 3.5in; - height: 2in; - overflow: hidden; - } - - .card_card_back, .card_card_front { - transform: rotateY(0); - } - - .card_card > .card_card_back { - margin-top: 0.1in; - } - - #editor_main_settings { - display: none; - } - - #editor_header { - display: none; - } - - #editor_main_preview_share { - display: none; - } - - #editor_main_preview > .ui_separator_horizontal { - display: none; - } - - .footer { - display: none !important; - } - - .notifications { - display: none; - } - - #dialog_print { - display: none; - } - - #print_front_div { - visibility: visible; - - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(3, 1fr); - grid-column-gap: 0.1in; - grid-row-gap: 0.1in; - } - - #print_back_div { - visibility: visible; - - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(3, 1fr); - grid-column-gap: 0.1in; - grid-row-gap: 0.1in; - - } - - #print_front_div * { - visibility: visible; - } - - #print_back_div * { - visibility: visible; - } -} \ No newline at end of file + /* For when the page is printed */ + + * { + visibility: hidden; + margin: 0; + padding: 0; + } + + html { + max-height: 11.5in; + } + + #editor_main_preview { + position: absolute; + top: 0px; + left: 0px; + + display: grid; + grid-template-columns: repeat(2, 3.5in); + grid-template-rows: repeat(2, 4in); + grid-column-gap: 0.25in; + grid-row-gap: 0.25in; + } + + #editor_main_preview.twosided { + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, 0%); + + display: flex; + flex-direction: column; + } + + .card_card * { + visibility: visible; + } + + .card_card { + display: flex; + flex-direction: column; + perspective: unset; + + width: 3.5in; + height: 2in; + min-width: 3.5in; + min-height: 2in; + max-width: 3.5in; + max-height: 2in; + } + + .card_card_front, + .card_card_back { + position: unset; + top: unset; + border: 2px solid rgb(0, 0, 0); + -webkit-box-shadow: unset; + -moz-box-shadow: unset; + box-shadow: unset; + + backface-visibility: unset; + transform-style: unset; + + width: 3.5in; + height: 2in; + overflow: hidden; + } + + .card_card_back, + .card_card_front { + transform: rotateY(0); + } + + .card_card > .card_card_back { + margin-top: 0.1in; + } + + #editor_main_settings { + display: none; + } + + #editor_header { + display: none; + } + + #editor_main_preview_share { + display: none; + } + + #editor_main_preview > .ui_separator_horizontal { + display: none; + } + + .footer { + display: none !important; + } + + .notifications { + display: none; + } + + #dialog_print { + display: none; + } + + #print_front_div { + visibility: visible; + + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); + grid-column-gap: 0.1in; + grid-row-gap: 0.1in; + } + + #print_back_div { + visibility: visible; + + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); + grid-column-gap: 0.1in; + grid-row-gap: 0.1in; + } + + #print_front_div * { + visibility: visible; + } + + #print_back_div * { + visibility: visible; + } +} diff --git a/cardie/static/main/footer.css b/cardie/static/main/footer.css index a6df232..bc5daa0 100644 --- a/cardie/static/main/footer.css +++ b/cardie/static/main/footer.css @@ -1,260 +1,257 @@ - @media (min-width: 1000px) { - /* Large screens */ - - .footer { - position: fixed; - bottom: 20px; - left: 20px; - - display: flex; - flex-direction: column; - } - - .footer_main_button { - width: clamp(6vh, 60px, 6vw); - height: clamp(6vh, 60px, 6vw); - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 50px; - - display: flex; - align-items: center; - justify-content: center; - } - - .footer_main_button_image { - width: clamp(4vh, 40px, 4vw); - height: auto; - } - - .footer_main_button_icon { - color: white; - font-size: clamp(3vh, 30px, 3vw); - } - - .footer_main_contents { - display: flex; - flex-direction: row; - - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 10px; - - padding: clamp(0.5vh, 5px, 0.5vw); - margin-left: clamp(1vh, 10px, 1vw); - - height: fit-content; - } - - .footer_main_contents_link { - font-family: var(--default-font-family); - font-size: clamp(1.4vh, 14px, 1.4vwS); - color: white; - opacity: 0.7; - text-decoration: none; - transition: var(--default-transition); - margin-left: clamp(0.5vh, 5px, 0.5vw); - margin-right: clamp(0.5vh, 5px, 0.5vw); - } - - .footer_warning { - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: clamp(1vh, 10px, 1vw); - } - - .footer_warning_button { - width: clamp(6vh, 60px, 6vw); - height: clamp(6vh, 60px, 6vw); - background-color: rgba(178, 145, 60, 0.4); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: clamp(5vh, 50px, 5vw); - - display: flex; - align-items: center; - justify-content: center; - } - - .footer_warning_contents { - display: flex; - flex-direction: column; - - background-color: rgba(178, 145, 60, 0.4); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 10px; - - padding: clamp(1vh, 10px, 1vw); - margin-left: clamp(1vh, 10px, 1vw); - - height: fit-content; - } - - .footer_warning_contents_title { - color: white; - font-family: var(--default-font-family); - opacity: 0.7; - font-weight: 600; - font-size: clamp(1.4vh, 14px, 1.4vw); - - margin: 0px; - } - - .footer_warning_contents_text { - color: white; - font-family: var(--default-font-family); - opacity: 0.7; - font-size: clamp(1.2vh, 12pv, 1.2vw); - - margin: 0px; - } + /* Large screens */ + + .footer { + position: fixed; + bottom: 20px; + left: 20px; + + display: flex; + flex-direction: column; + } + + .footer_main_button { + width: clamp(6vh, 60px, 6vw); + height: clamp(6vh, 60px, 6vw); + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 50px; + + display: flex; + align-items: center; + justify-content: center; + } + + .footer_main_button_image { + width: clamp(4vh, 40px, 4vw); + height: auto; + } + + .footer_main_button_icon { + color: white; + font-size: clamp(3vh, 30px, 3vw); + } + + .footer_main_contents { + display: flex; + flex-direction: row; + + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 10px; + padding: clamp(0.5vh, 5px, 0.5vw); + margin-left: clamp(1vh, 10px, 1vw); + + height: fit-content; + } + + .footer_main_contents_link { + font-family: var(--default-font-family); + font-size: clamp(1.4vh, 14px, 1.4vws); + color: white; + opacity: 0.7; + text-decoration: none; + transition: var(--default-transition); + margin-left: clamp(0.5vh, 5px, 0.5vw); + margin-right: clamp(0.5vh, 5px, 0.5vw); + } + + .footer_warning { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: clamp(1vh, 10px, 1vw); + } + + .footer_warning_button { + width: clamp(6vh, 60px, 6vw); + height: clamp(6vh, 60px, 6vw); + background-color: rgba(178, 145, 60, 0.4); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: clamp(5vh, 50px, 5vw); + + display: flex; + align-items: center; + justify-content: center; + } + + .footer_warning_contents { + display: flex; + flex-direction: column; + + background-color: rgba(178, 145, 60, 0.4); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 10px; + + padding: clamp(1vh, 10px, 1vw); + margin-left: clamp(1vh, 10px, 1vw); + + height: fit-content; + } + + .footer_warning_contents_title { + color: white; + font-family: var(--default-font-family); + opacity: 0.7; + font-weight: 600; + font-size: clamp(1.4vh, 14px, 1.4vw); + + margin: 0px; + } + + .footer_warning_contents_text { + color: white; + font-family: var(--default-font-family); + opacity: 0.7; + font-size: clamp(1.2vh, 12pv, 1.2vw); + + margin: 0px; + } } @media (max-width: 1000px) { - /* Small Screens */ - - .footer { - position: fixed; - bottom: 10px; - left: 10px; - - display: flex; - flex-direction: column; - } - - .footer_main_button { - width: clamp(5vh, 50px, 5vw); - height: clamp(5vh, 50px, 5vw); - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 50px; - - display: flex; - align-items: center; - justify-content: center; - } - - .footer_main_button_image { - width: clamp(4vh, 40px, 4vw); - height: auto; - } - - .footer_main_button_icon { - color: white; - font-size: clamp(3vh, 30px, 3vw); - } - - .footer_main_contents { - display: flex; - flex-direction: row; - - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 10px; - - padding: clamp(0.2vh, 2px, 0.2vw); - margin-left: clamp(0.5vh, 5px, 0.5vw); - - height: fit-content; - } - - .footer_main_contents_link { - font-family: var(--default-font-family); - font-size: clamp(1.2vh, 12px, 1.2vwS); - color: white; - opacity: 0.7; - text-decoration: none; - transition: var(--default-transition); - margin-left: clamp(0.4vh, 4px, 0.4vw); - margin-right: clamp(0.4vh, 4px, 0.4vw); - } - - .footer_warning { - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: clamp(1vh, 10px, 1vw); - } - - .footer_warning_button { - width: clamp(5vh, 50px, 5vw); - height: clamp(5vh, 50px, 5vw); - background-color: rgba(178, 145, 60, 0.4); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 50px; - - display: flex; - align-items: center; - justify-content: center; - } - - .footer_warning_contents { - display: flex; - flex-direction: column; - - background-color: rgba(178, 145, 60, 0.4); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 10px; - - padding: clamp(0.2vh, 2px, 0.2vw); - margin-left: clamp(0.5vh, 5px, 0.5vw); - - height: fit-content; - } - - .footer_warning_contents_title { - color: white; - font-family: var(--default-font-family); - opacity: 0.7; - font-weight: 600; - font-size: 14px; - - margin: 0px; - } - - .footer_warning_contents_text { - color: white; - font-family: var(--default-font-family); - opacity: 0.7; - font-size: 12px; - - margin: 0px; - } + /* Small Screens */ -} + .footer { + position: fixed; + bottom: 10px; + left: 10px; -.footer_main { + display: flex; + flex-direction: column; + } + + .footer_main_button { + width: clamp(5vh, 50px, 5vw); + height: clamp(5vh, 50px, 5vw); + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 50px; + + display: flex; + align-items: center; + justify-content: center; + } + + .footer_main_button_image { + width: clamp(4vh, 40px, 4vw); + height: auto; + } + + .footer_main_button_icon { + color: white; + font-size: clamp(3vh, 30px, 3vw); + } + + .footer_main_contents { + display: flex; + flex-direction: row; + + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 10px; + + padding: clamp(0.2vh, 2px, 0.2vw); + margin-left: clamp(0.5vh, 5px, 0.5vw); + + height: fit-content; + } + + .footer_main_contents_link { + font-family: var(--default-font-family); + font-size: clamp(1.2vh, 12px, 1.2vws); + color: white; + opacity: 0.7; + text-decoration: none; + transition: var(--default-transition); + margin-left: clamp(0.4vh, 4px, 0.4vw); + margin-right: clamp(0.4vh, 4px, 0.4vw); + } + + .footer_warning { display: flex; flex-direction: row; align-items: center; + margin-bottom: clamp(1vh, 10px, 1vw); + } + + .footer_warning_button { + width: clamp(5vh, 50px, 5vw); + height: clamp(5vh, 50px, 5vw); + background-color: rgba(178, 145, 60, 0.4); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 50px; + + display: flex; + align-items: center; + justify-content: center; + } + + .footer_warning_contents { + display: flex; + flex-direction: column; + + background-color: rgba(178, 145, 60, 0.4); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 10px; + + padding: clamp(0.2vh, 2px, 0.2vw); + margin-left: clamp(0.5vh, 5px, 0.5vw); + + height: fit-content; + } + + .footer_warning_contents_title { + color: white; + font-family: var(--default-font-family); + opacity: 0.7; + font-weight: 600; + font-size: 14px; + + margin: 0px; + } + + .footer_warning_contents_text { + color: white; + font-family: var(--default-font-family); + opacity: 0.7; + font-size: 12px; + + margin: 0px; + } +} + +.footer_main { + display: flex; + flex-direction: row; + align-items: center; } .footer_main_contents_link:hover { - opacity: 1; - scale: 1.05; + opacity: 1; + scale: 1.05; } .footer_main_contents_link:active { - opacity: 1; - scale: 0.95; - color: white; + opacity: 1; + scale: 0.95; + color: white; } .footer_main_contents_link:visited { - color: white; + color: white; } .footer_warning_contents_text > a { - color: white; - font-weight: 500; -} \ No newline at end of file + color: white; + font-weight: 500; +} diff --git a/cardie/static/main/home.css b/cardie/static/main/home.css index 47fe569..f80ec41 100644 --- a/cardie/static/main/home.css +++ b/cardie/static/main/home.css @@ -1,207 +1,206 @@ html { - background: rgb(37, 40, 49); + background: rgb(37, 40, 49); } @media (min-width: 1000px) { - /* Large screens */ - - #home-top { - display: flex; - flex-direction: row; - justify-content: space-between; - - margin-left: clamp(5vh, 50px, 5vw); - margin-right: clamp(5vh, 50px, 5vw); - margin-top: clamp(5vh, 50px, 5vw); - } - - #home-top-text { - margin-left: clamp(6vh, 60px, 6vw); - } - - #home-navigation { - margin-top: clamp(1vh, 10px, 1vw); - margin-left: clamp(12vh, 120px, 12vw); - margin-bottom: clamp(2vh, 20px, 2vw); - } - - #home-wallet { - margin-left: clamp(12vh, 120px, 12vw); - display: flex; - flex-direction: column; - } - - #home-cards { - margin-left: clamp(12vh, 120px, 12vw); - display: flex; - flex-direction: column; - } - - #home-top-image { - width: clamp(30vh, 300px, 30vw); - height: auto; - transition: var(--default-transition); - cursor: pointer; - } + /* Large screens */ + + #home-top { + display: flex; + flex-direction: row; + justify-content: space-between; + + margin-left: clamp(5vh, 50px, 5vw); + margin-right: clamp(5vh, 50px, 5vw); + margin-top: clamp(5vh, 50px, 5vw); + } + + #home-top-text { + margin-left: clamp(6vh, 60px, 6vw); + } + + #home-navigation { + margin-top: clamp(1vh, 10px, 1vw); + margin-left: clamp(12vh, 120px, 12vw); + margin-bottom: clamp(2vh, 20px, 2vw); + } + + #home-wallet { + margin-left: clamp(12vh, 120px, 12vw); + display: flex; + flex-direction: column; + } + + #home-cards { + margin-left: clamp(12vh, 120px, 12vw); + display: flex; + flex-direction: column; + } + + #home-top-image { + width: clamp(30vh, 300px, 30vw); + height: auto; + transition: var(--default-transition); + cursor: pointer; + } } @media (max-width: 1000px) { - /* Small Screens */ - - #home-top { - display: flex; - flex-direction: row; - justify-content: space-between; - - margin-left: clamp(1vh, 10px, 1vw); - margin-right: clamp(1vh, 10px, 1vw); - margin-top: clamp(1vh, 10px, 1vw); - } - - #home-top-text { - margin-left: clamp(2vh, 20px, 2vw); - } - - #home-navigation { - margin-top: clamp(1vh, 10px, 1vw); - margin-left: clamp(2vh, 20px, 2vw); - margin-bottom: clamp(1vh, 10px, 1vw); - } - - #home-wallet { - margin-left: clamp(2vh, 20px, 2vw); - display: flex; - flex-direction: column; - } - - #home-cards { - margin-left: clamp(2vh, 20px, 2vw); - display: flex; - flex-direction: column; - } - - #home-top-image { - width: clamp(20vh, 200px, 20vw); - height: auto; - transition: var(--default-transition); - cursor: pointer; - } + /* Small Screens */ + + #home-top { + display: flex; + flex-direction: row; + justify-content: space-between; + + margin-left: clamp(1vh, 10px, 1vw); + margin-right: clamp(1vh, 10px, 1vw); + margin-top: clamp(1vh, 10px, 1vw); + } + + #home-top-text { + margin-left: clamp(2vh, 20px, 2vw); + } + + #home-navigation { + margin-top: clamp(1vh, 10px, 1vw); + margin-left: clamp(2vh, 20px, 2vw); + margin-bottom: clamp(1vh, 10px, 1vw); + } + + #home-wallet { + margin-left: clamp(2vh, 20px, 2vw); + display: flex; + flex-direction: column; + } + + #home-cards { + margin-left: clamp(2vh, 20px, 2vw); + display: flex; + flex-direction: column; + } + + #home-top-image { + width: clamp(20vh, 200px, 20vw); + height: auto; + transition: var(--default-transition); + cursor: pointer; + } } #home-top-image:hover { - scale: 1.05; + scale: 1.05; } .home_card { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - transition: var(--default-transition); - border-radius: 20px; + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + transition: var(--default-transition); + border-radius: 20px; - padding: clamp(0.8vh, 8px, 0.8vw); - padding-left: clamp(1.5vh, 15px 1.5vw); - padding-right: clamp(1.5vh, 15px 1.5vw); - width: fit-content; - margin: clamp(0.5vh, 5px, 0.5vw); + padding: clamp(0.8vh, 8px, 0.8vw); + padding-left: clamp(1.5vh, 15px 1.5vw); + padding-right: clamp(1.5vh, 15px 1.5vw); + width: fit-content; + margin: clamp(0.5vh, 5px, 0.5vw); } .home_card_text { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .home_card_text_name { - color: white; - font-family: var(--default-font-family); - font-size: clamp(1.6vh, 16px, 1.6vw); + color: white; + font-family: var(--default-font-family); + font-size: clamp(1.6vh, 16px, 1.6vw); - margin: 0px; - padding: 0px; + margin: 0px; + padding: 0px; } .home_card_text_uuid { - color: white; - font-family: "Noto Sans Mono", "Courier New", monospace; - font-size: clamp(1.2vh, 12px, 1.2vw); - opacity: 0.7; + color: white; + font-family: "Noto Sans Mono", "Courier New", monospace; + font-size: clamp(1.2vh, 12px, 1.2vw); + opacity: 0.7; - margin: 0px; - padding: 0px; + margin: 0px; + padding: 0px; } #home_cards_create { - width: fit-content; + width: fit-content; } #home-top-profile { - position: relative; + position: relative; } #home-top-username { - height: fit-content; + height: fit-content; } #home-top-profile-dropdown { - position: absolute; - top: 30%; + position: absolute; + top: 30%; - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 20px; + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 20px; - max-width: clamp(30vh, 300px, 30vw); - width: fit-content; + max-width: clamp(30vh, 300px, 30vw); + width: fit-content; } #home-top-profile-dropdown > button { - white-space: nowrap; + white-space: nowrap; } #home_card_menu { - position: absolute; - top: 100%; - left: 0px; - display: flex; - flex-direction: column; + position: absolute; + top: 100%; + left: 0px; + display: flex; + flex-direction: column; - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 15px; - transition: opacity 0.3s ease, - scale 0.3s ease; - z-index: 3; + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 15px; + transition: opacity 0.3s ease, scale 0.3s ease; + z-index: 3; - /* Starting properties for animation */ - opacity: 0; - scale: 0.9; + /* Starting properties for animation */ + opacity: 0; + scale: 0.9; } #home_card_menu.show { - opacity: 1; - scale: 1; + opacity: 1; + scale: 1; } #home_card_menu > button { - text-align: left; + text-align: left; } #home_menu_delete:hover { - color: rgb(255, 117, 117); - background-color: rgb(75, 61, 61); + color: rgb(255, 117, 117); + background-color: rgb(75, 61, 61); } #dialog_home_rename { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } #dialog_home_delete { - display: flex; - flex-direction: column; -} \ No newline at end of file + display: flex; + flex-direction: column; +} diff --git a/cardie/static/main/index.css b/cardie/static/main/index.css index b289922..8d6048d 100644 --- a/cardie/static/main/index.css +++ b/cardie/static/main/index.css @@ -1,213 +1,216 @@ html { - background: rgb(37, 40, 49); + background: rgb(37, 40, 49); } -body, html { - margin: 0px; - scroll-snap-points-y: repeat(100vh); - scroll-snap-type: y mandatory; +body, +html { + margin: 0px; + scroll-snap-points-y: repeat(100vh); + scroll-snap-type: y mandatory; } #welcome_box { - height: 100vh; - position: relative; + height: 100vh; + position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; - z-index: 1; - scroll-snap-align: center; + z-index: 1; + scroll-snap-align: center; } #welcome_box_image { - width: clamp(40vh, 400px, 40vw); - height: auto; + width: clamp(40vh, 400px, 40vw); + height: auto; - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } #welcome_box_buttons { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - margin-left: auto; - margin-right: auto; - margin-top: clamp(2vh, 20px, 2vw); + margin-left: auto; + margin-right: auto; + margin-top: clamp(2vh, 20px, 2vw); - align-items: center; + align-items: center; } #blob { + position: absolute; + top: 50%; + left: 50%; + translate: -50% -50%; + + width: clamp(40vh, 400px, 40vw); + height: auto; + aspect-ratio: 1; + border-radius: 200px; + filter: blur(70px); + + z-index: -10; + + background: rgb(61, 132, 148); + background: linear-gradient( + 120deg, + rgba(61, 132, 148, 1) 9%, + rgba(34, 73, 139, 1) 47%, + rgba(37, 210, 108, 1) 91% + ); +} + +@media (min-width: 1000px) { + /* Large screens */ + + #index_top { + margin-top: clamp(1vh, 10px, 1vw); position: absolute; - top: 50%; - left: 50%; - translate: -50% -50%; + top: 0px; + + display: flex; + flex-direction: row; + + justify-content: space-between; + align-items: center; + z-index: 5; - width: clamp(40vh, 400px, 40vw); + width: 100%; + } + + #index_top_image { + width: clamp(6vh, 60px, 6vw); + margin-left: clamp(1vh, 10px, 1vw); height: auto; - aspect-ratio: 1; - border-radius: 200px; - filter: blur(70px); + } - z-index: -10; + #index_top_links { + display: flex; + flex-direction: row; + align-items: center; + } - background: rgb(61,132,148); - background: linear-gradient(120deg, rgba(61,132,148,1) 9%, rgba(34,73,139,1) 47%, rgba(37,210,108,1) 91%); -} + #index_top_account { + display: flex; + flex-direction: row; + align-items: center; + margin-right: clamp(2vh, 20px, 2vw); + } -@media (min-width: 1000px) { - /* Large screens */ - - #index_top { - margin-top: clamp(1vh, 10px, 1vw); - position: absolute; - top: 0px; - - display: flex; - flex-direction: row; - - justify-content: space-between; - align-items: center; - z-index: 5; - - width: 100%; - } - - #index_top_image { - width: clamp(6vh, 60px, 6vw); - margin-left: clamp(1vh, 10px, 1vw); - height: auto; - } - - #index_top_links { - display: flex; - flex-direction: row; - align-items: center; - } - - #index_top_account { - display: flex; - flex-direction: row; - align-items: center; - margin-right: clamp(2vh, 20px, 2vw); - } - - #index_top_toggle { - display: none; - } + #index_top_toggle { + display: none; + } } @media (max-width: 1000px) { - /* Small Screens */ - - #index_top { - position: absolute; - top: 0px; - display: flex; - flex-direction: column-reverse; - - z-index: 5; - - width: 100%; - } - - #index_top_image { - display: none; - } - - #index_top_links { - display: flex; - flex-direction: column; - justify-content: left; - margin-left: clamp(3vh, 30px, 3vw); - margin-top: clamp(1vh, 10px, 1vw); - } - - #index_top_account { - display: flex; - flex-direction: column; - justify-content: left; - } - - #index_top_toggle { - margin-top: clamp(1vh, 10px, 1vw); - margin-bottom: clamp(1vh, 10px, 1vw); - } -} + /* Small Screens */ + + #index_top { + position: absolute; + top: 0px; + display: flex; + flex-direction: column-reverse; + + z-index: 5; + + width: 100%; + } + + #index_top_image { + display: none; + } + #index_top_links { + display: flex; + flex-direction: column; + justify-content: left; + margin-left: clamp(3vh, 30px, 3vw); + margin-top: clamp(1vh, 10px, 1vw); + } + + #index_top_account { + display: flex; + flex-direction: column; + justify-content: left; + } + #index_top_toggle { + margin-top: clamp(1vh, 10px, 1vw); + margin-bottom: clamp(1vh, 10px, 1vw); + } +} @media (min-width: 1000px) { - /* Large screens */ - - #home_card { - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - flex-direction: row-reverse; - padding-left: clamp(4vh, 40px, 4vw); - scroll-snap-align: center; - } - - #home_card_image { - width: 60vw; - height: auto; - } - - #home_editor { - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - padding-left: clamp(4vh, 40px, 4vw); - scroll-snap-align: center; - } - - #home_editor_image { - width: 60vw; - height: auto; - } + /* Large screens */ + + #home_card { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row-reverse; + padding-left: clamp(4vh, 40px, 4vw); + scroll-snap-align: center; + } + + #home_card_image { + width: 60vw; + height: auto; + } + #home_editor { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + padding-left: clamp(4vh, 40px, 4vw); + scroll-snap-align: center; + } + + #home_editor_image { + width: 60vw; + height: auto; + } } @media (max-width: 1000px) { - /* Small Screens */ - - #home_card { - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - scroll-snap-align: center; - } - - #home_card_image { - width: 90vw; - height: auto; - } - - #home_editor { - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - scroll-snap-align: center; - } - - #home_editor_image { - width: 90vw; - height: auto; - } - - #home_card_text, #home_editor_text { - margin-left: clamp(2vh, 20px, 2vw); - } - -} \ No newline at end of file + /* Small Screens */ + + #home_card { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + scroll-snap-align: center; + } + + #home_card_image { + width: 90vw; + height: auto; + } + + #home_editor { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + scroll-snap-align: center; + } + + #home_editor_image { + width: 90vw; + height: auto; + } + + #home_card_text, + #home_editor_text { + margin-left: clamp(2vh, 20px, 2vw); + } +} diff --git a/cardie/static/main/notifications.css b/cardie/static/main/notifications.css index 5a6ece3..8538e1e 100644 --- a/cardie/static/main/notifications.css +++ b/cardie/static/main/notifications.css @@ -1,88 +1,87 @@ .notifications { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - position: fixed; - bottom: 10px; - right: 10px; + position: fixed; + bottom: 10px; + right: 10px; } @media (min-width: 1000px) { - /* Large screens */ + /* Large screens */ - .notifications { - display: flex; - flex-direction: column; - - position: fixed; - bottom: clamp(1vh, 10px, 1vw); - right: clamp(1vh, 10px, 1vw); - } + .notifications { + display: flex; + flex-direction: column; + position: fixed; + bottom: clamp(1vh, 10px, 1vw); + right: clamp(1vh, 10px, 1vw); + } } @media (max-width: 1000px) { - /* Small Screens */ - - .notifications { - display: flex; - flex-direction: column; - - position: fixed; - top: clamp(1vh, 10px, 1vw); - left: 50%; - transform: translateX(-50%); - height: min-content; - } + /* Small Screens */ + + .notifications { + display: flex; + flex-direction: column; + + position: fixed; + top: clamp(1vh, 10px, 1vw); + left: 50%; + transform: translateX(-50%); + height: min-content; + } } .notification { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 20px; - padding: clamp(1vh, 10px, 1vw); - min-width: clamp(30vh, 300px, 30vw); - transition: var(--default-transition); - margin-bottom: clamp(1vh, 10px, 1vw); + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 20px; + padding: clamp(1vh, 10px, 1vw); + min-width: clamp(30vh, 300px, 30vw); + transition: var(--default-transition); + margin-bottom: clamp(1vh, 10px, 1vw); - opacity: 0; - scale: 0.8; + opacity: 0; + scale: 0.8; - z-index: 10; + z-index: 10; } .notification.show { - opacity: 1; - scale: 1; + opacity: 1; + scale: 1; } .notification_text { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .notification_header { - font-family: var(--default-font-family); - font-weight: 600; - color: white; - font-size: clamp(2vh, 20px, 2vq); - margin: 0; + font-family: var(--default-font-family); + font-weight: 600; + color: white; + font-size: clamp(2vh, 20px, 2vq); + margin: 0; } .notification_body { - font-family: var(--default-font-family); - font-weight: 400; - color: white; - font-size: clamp(1.6vh, 16px, 1.6vw); - margin: 0; + font-family: var(--default-font-family); + font-weight: 400; + color: white; + font-size: clamp(1.6vh, 16px, 1.6vw); + margin: 0; } .notification_icon { - color: white; - font-size: clamp(3vh, 30px, 3vw); - margin-right: 10px; -} \ No newline at end of file + color: white; + font-size: clamp(3vh, 30px, 3vw); + margin-right: 10px; +} diff --git a/cardie/static/main/privacy.css b/cardie/static/main/privacy.css index 07002e8..d11d5ce 100644 --- a/cardie/static/main/privacy.css +++ b/cardie/static/main/privacy.css @@ -1,57 +1,55 @@ +@media (min-width: 1000px) { + /* Large screens */ + #privacy { + margin-left: clamp(4vh, 40px, 4vw); + margin-top: clamp(4vh, 40px, 4vw); + width: fit-content; + } -@media (min-width: 1000px) { - /* Large screens */ - - #privacy { - margin-left: clamp(4vh, 40px, 4vw); - margin-top: clamp(4vh, 40px, 4vw); - width: fit-content; - } - - #privacy_lastupdated { - margin-left: clamp(2vh, 20px, 2vw); - } - - #privacy_content { - margin-left: clamp(2vh, 20px, 2vw); - margin-top: clamp(2vh, 20px, 2vw); - } - - .privacy_content_section { - margin-left: clamp(2vh, 20px, 2vw); - margin-top: clamp(2vh, 20px, 2vw); - } - - .privacy_header { - margin-top: clamp(2vh, 20px, 2vw); - } + #privacy_lastupdated { + margin-left: clamp(2vh, 20px, 2vw); + } + + #privacy_content { + margin-left: clamp(2vh, 20px, 2vw); + margin-top: clamp(2vh, 20px, 2vw); + } + + .privacy_content_section { + margin-left: clamp(2vh, 20px, 2vw); + margin-top: clamp(2vh, 20px, 2vw); + } + + .privacy_header { + margin-top: clamp(2vh, 20px, 2vw); + } } @media (max-width: 1000px) { - /* Small Screens */ - - #privacy { - margin-left: clamp(2vh, 20px, 2vw); - margin-top: clamp(2vh, 20px, 2vw); - width: fit-content; - } - - #privacy_lastupdated { - margin-left: clamp(1vh, 10px, 1vw); - } - - #privacy_content { - margin-left: clamp(1vh, 10px, 1vw); - margin-top: clamp(2vh, 20px, 2vw); - } - - .privacy_content_section { - margin-left: clamp(1vh, 10px, 1vw); - margin-top: clamp(2vh, 20px, 2vw); - } - - .privacy_header { - margin-top: clamp(2vh, 20px, 2vw); - } -} \ No newline at end of file + /* Small Screens */ + + #privacy { + margin-left: clamp(2vh, 20px, 2vw); + margin-top: clamp(2vh, 20px, 2vw); + width: fit-content; + } + + #privacy_lastupdated { + margin-left: clamp(1vh, 10px, 1vw); + } + + #privacy_content { + margin-left: clamp(1vh, 10px, 1vw); + margin-top: clamp(2vh, 20px, 2vw); + } + + .privacy_content_section { + margin-left: clamp(1vh, 10px, 1vw); + margin-top: clamp(2vh, 20px, 2vw); + } + + .privacy_header { + margin-top: clamp(2vh, 20px, 2vw); + } +} diff --git a/cardie/static/main/scripts/authentication/authentication.js b/cardie/static/main/scripts/authentication/authentication.js index f6656a4..d8106ed 100644 --- a/cardie/static/main/scripts/authentication/authentication.js +++ b/cardie/static/main/scripts/authentication/authentication.js @@ -1,209 +1,213 @@ try { - var temp_uuid = new URL(window.location.href).searchParams.get("temp_uuid"); - + var temp_uuid = new URL(window.location.href).searchParams.get("temp_uuid"); } catch { - var temp_uuid = false; + var temp_uuid = false; } try { - var ref = new URL(window.location.href).searchParams.get("ref"); - + var ref = new URL(window.location.href).searchParams.get("ref"); } catch { - var ref = false; + var ref = false; } function show_warning(warning) { - log("WARNING", warning) - document.querySelector("#authentication-error > p").innerText = warning; - document.querySelector("#authentication-error").style.display = "flex"; + log("WARNING", warning); + document.querySelector("#authentication-error > p").innerText = warning; + document.querySelector("#authentication-error").style.display = "flex"; - setTimeout(function() { - document.querySelector("#authentication-error").classList.add("show"); - }, 100); + setTimeout(() => { + document.querySelector("#authentication-error").classList.add("show"); + }, 100); } async function sign_in() { - log("INFO", "Signing the user in..."); - var username = document.querySelector("#signin-username").value; - var password = document.querySelector("#signin-password").value; - - if (temp_uuid) { - var response = await fetch(server_ip + "/auth/signin", { - method: "GET", - headers: { - "X-CSRFToken": document.querySelector('input[name="csrfmiddlewaretoken"]').value, - "Internal": true, - "Username": username, - "Password": password, - "TempUUID": temp_uuid - } - }); - + log("INFO", "Signing the user in..."); + var username = document.querySelector("#signin-username").value; + var password = document.querySelector("#signin-password").value; + + if (temp_uuid) { + var response = await fetch(server_ip + "/auth/signin", { + method: "GET", + headers: { + "X-CSRFToken": document.querySelector( + 'input[name="csrfmiddlewaretoken"]', + ).value, + Internal: true, + Username: username, + Password: password, + TempUUID: temp_uuid, + }, + }); + } else { + var response = await fetch(server_ip + "/auth/signin", { + method: "GET", + headers: { + "X-CSRFToken": document.querySelector( + 'input[name="csrfmiddlewaretoken"]', + ).value, + Internal: true, + Username: username, + Password: password, + }, + }); + } + + log("DEBUG", temp_uuid); + + response.text().then((text) => { + if (text == "success") { + log("INFO", "Success!"); + + if (ref) { + window.location.href = ref; + } else { + window.location.href = `${server_ip}/home`; + } + } else if (text == "error_missing_headers_and_session") { + show_warning("Missing headers and no session data!"); + } else if (text == "error_password_wrong") { + show_warning("Your password is incorrect!"); + } else if (text == "error_no_accounts") { + show_warning("No accounts match that username!"); + } else if (text == "error_multiple_accounts_exist") { + show_warning( + "Multiple accounts exist with that username... that's really not supposed to happen...", + ); + } else if (text == "error_sign_in_disabled") { + show_warning("Signing in is disabled on this server"); + } else if (text.includes("card_added_to_account")) { + window.location.href = `${server_ip}/editor?uuid=${text.replace("card_added_to_account ", "")}`; } else { - var response = await fetch(server_ip + "/auth/signin", { - method: "GET", - headers: { - "X-CSRFToken": document.querySelector('input[name="csrfmiddlewaretoken"]').value, - "Internal": true, - "Username": username, - "Password": password - } - }); + show_warning("There was a problem signing you in!"); } - - log("DEBUG", temp_uuid) - - response.text().then(function (text) { - if (text == "success") { - log("INFO", "Success!"); - - if (ref) { - window.location.href = ref; - } else { - window.location.href = `${server_ip}/home`; - } - - - } else if (text == "error_missing_headers_and_session") { - show_warning("Missing headers and no session data!"); - - } else if (text == "error_password_wrong") { - show_warning("Your password is incorrect!"); - - } else if (text == "error_no_accounts") { - show_warning("No accounts match that username!"); - - } else if (text == "error_multiple_accounts_exist") { - show_warning("Multiple accounts exist with that username... that's really not supposed to happen..."); - - } else if (text == "error_sign_in_disabled") { - show_warning("Signing in is disabled on this server"); - - } else if (text.includes("card_added_to_account")) { - window.location.href = `${server_ip}/editor?uuid=${text.replace("card_added_to_account ", "")}`; - - } else { - show_warning("There was a problem signing you in!"); - } - }); + }); } async function create_account() { - log("INFO", "Creating an account for the user..."); - var username = document.querySelector("#createaccount-username").value; - var password = document.querySelector("#createaccount-password").value; - var email = document.querySelector("#createaccount-email").value; - - if (temp_uuid) { - var response = await fetch(server_ip + "/auth/createaccount", { - method: "GET", - headers: { - "X-CSRFToken": document.querySelector('input[name="csrfmiddlewaretoken"]').value, - "Internal": true, - "Username": username, - "Password": password, - "Email": email, - "TempUUID": temp_uuid - } - }); + log("INFO", "Creating an account for the user..."); + var username = document.querySelector("#createaccount-username").value; + var password = document.querySelector("#createaccount-password").value; + var email = document.querySelector("#createaccount-email").value; + + if (temp_uuid) { + var response = await fetch(server_ip + "/auth/createaccount", { + method: "GET", + headers: { + "X-CSRFToken": document.querySelector( + 'input[name="csrfmiddlewaretoken"]', + ).value, + Internal: true, + Username: username, + Password: password, + Email: email, + TempUUID: temp_uuid, + }, + }); + } else { + var response = await fetch(server_ip + "/auth/createaccount", { + method: "GET", + headers: { + "X-CSRFToken": document.querySelector( + 'input[name="csrfmiddlewaretoken"]', + ).value, + Internal: true, + Username: username, + Password: password, + Email: email, + }, + }); + } + + response.text().then((text) => { + if (text == "success") { + log("INFO", "Success!"); + + if (ref) { + window.location.href = ref; + } else { + window.location.href = `${server_ip}/home`; + } + } else if (text == "no_username") { + show_warning("Your account needs an username!"); + } else if (text == "no_password") { + show_warning("Your account needs an password!"); + } else if (text == "no_email") { + show_warning("Your account needs an email!"); + } else if (text == "error_account_already_exists") { + show_warning("An account with that username already exists!"); + } else if (text == "error_missing_headers") { + show_warning("There is missing header data!"); + } else if (text == "error_missing_headers_and_session") { + show_warning("Missing headers and no session data!"); + } else if (text == "error_password_wrong") { + show_warning("Your password is incorrect!"); + } else if (text == "error_no_accounts") { + show_warning("No accounts match that username!"); + } else if (text == "error_multiple_accounts_exist") { + show_warning( + "Multiple accounts exist with that username... that's really not supposed to happen...", + ); + } else if (text == "error_create_account_disabled") { + show_warning("Creating accounts is disabled on this server"); + } else if (text.includes("card_added_to_account")) { + window.location.href = `${server_ip}/editor?uuid=${text.replace("card_added_to_account ", "")}`; } else { - var response = await fetch(server_ip + "/auth/createaccount", { - method: "GET", - headers: { - "X-CSRFToken": document.querySelector('input[name="csrfmiddlewaretoken"]').value, - "Internal": true, - "Username": username, - "Password": password, - "Email": email - } - }); + show_warning("There was a problem creating your account!"); } - response.text().then(function (text) { - if (text == "success") { - log("INFO", "Success!"); - - if (ref) { - window.location.href = ref; - } else { - window.location.href = `${server_ip}/home`; - } - - } else if (text == "no_username") { - show_warning("Your account needs an username!"); - - } else if (text == "no_password") { - show_warning("Your account needs an password!"); - - } else if (text == "no_email") { - show_warning("Your account needs an email!"); - - } else if (text == "error_account_already_exists") { - show_warning("An account with that username already exists!"); - - } else if (text == "error_missing_headers") { - show_warning("There is missing header data!"); - - } else if (text == "error_missing_headers_and_session") { - show_warning("Missing headers and no session data!"); - - } else if (text == "error_password_wrong") { - show_warning("Your password is incorrect!"); - - } else if (text == "error_no_accounts") { - show_warning("No accounts match that username!"); - - } else if (text == "error_multiple_accounts_exist") { - show_warning("Multiple accounts exist with that username... that's really not supposed to happen..."); - - } else if (text == "error_create_account_disabled") { - show_warning("Creating accounts is disabled on this server"); - - } else if (text.includes("card_added_to_account")) { - window.location.href = `${server_ip}/editor?uuid=${text.replace("card_added_to_account ", "")}`; - - } else { - show_warning("There was a problem creating your account!"); - } - - console.log(text); - }); + console.log(text); + }); } function check_sign_in() { - document.querySelector("#signin-signin").disabled = !( - document.querySelector("#signin-username").value != "" && - document.querySelector("#signin-password").value != "" - ); + document.querySelector("#signin-signin").disabled = !( + document.querySelector("#signin-username").value != "" && + document.querySelector("#signin-password").value != "" + ); } function check_create_account() { - document.querySelector("#createaccount-createaccount").disabled = !( - document.querySelector("#createaccount-username").value != "" && - document.querySelector("#createaccount-password").value != "" && - document.querySelector("#createaccount-email").value != "" - ); + document.querySelector("#createaccount-createaccount").disabled = !( + document.querySelector("#createaccount-username").value != "" && + document.querySelector("#createaccount-password").value != "" && + document.querySelector("#createaccount-email").value != "" + ); } document.querySelector("#signin-signin").addEventListener("click", sign_in); -document.querySelector("#createaccount-createaccount").addEventListener("click", create_account); - -document.querySelector("#signin-username").addEventListener("input", check_sign_in); -document.querySelector("#signin-password").addEventListener("input", check_sign_in); -document.querySelector("#createaccount-username").addEventListener("input", check_create_account); -document.querySelector("#createaccount-password").addEventListener("input", check_create_account); -document.querySelector("#createaccount-email").addEventListener("input", check_create_account); +document + .querySelector("#createaccount-createaccount") + .addEventListener("click", create_account); + +document + .querySelector("#signin-username") + .addEventListener("input", check_sign_in); +document + .querySelector("#signin-password") + .addEventListener("input", check_sign_in); +document + .querySelector("#createaccount-username") + .addEventListener("input", check_create_account); +document + .querySelector("#createaccount-password") + .addEventListener("input", check_create_account); +document + .querySelector("#createaccount-email") + .addEventListener("input", check_create_account); document.querySelector("#signin-signin").disabled = true; document.querySelector("#createaccount-createaccount").disabled = true; -document.addEventListener("keyup", (event) => { +document.addEventListener( + "keyup", + (event) => { if (event.code === "Enter") { - if (document.querySelector("#signin-box").style.display != "none") { - sign_in(); - - } else { - create_account(); - } + if (document.querySelector("#signin-box").style.display != "none") { + sign_in(); + } else { + create_account(); + } } -}, false); \ No newline at end of file + }, + false, +); diff --git a/cardie/static/main/scripts/card_view/card_view.js b/cardie/static/main/scripts/card_view/card_view.js index d2819aa..3ed212b 100644 --- a/cardie/static/main/scripts/card_view/card_view.js +++ b/cardie/static/main/scripts/card_view/card_view.js @@ -1,127 +1,154 @@ var cardview_json; async function render_card_view() { - let uuid_param = new URL(window.location.href).searchParams.get("uuid"); - - if (uuid_param == null) { - log("WARNING", "No UUID"); - // TODO: Show that the card cannot be found - - } else { - const response = await fetch(server_ip + "/getcard", { - method: "POST", - headers: { - "UUID": uuid_param, - } - }); - - response.text().then(function (text) { - if (text == "Request is not a POST request") { - log("WARNING", text); - create_notification("There was an issue fetching the card", text, "warning"); - - } else if (text == "Card does not exist!") { - // TODO: Show that the card cannot be found - log("WARNING", "Card does not exist"); - create_notification("That card could not be found", text, "warning"); - - } else { - log("INFO", "This card exists on the server!"); - card_render_from_json(".card_card", text); - cardview_json = text; - - document.querySelector("#cardview_text_cardname").innerText = JSON.parse(text)["name"]; - document.querySelector("#cardview_text_username").innerText = `Created by ${JSON.parse(text)["author"]}`; - show_cardview_status(); - } - }); - } + const uuid_param = new URL(window.location.href).searchParams.get("uuid"); + + if (uuid_param == null) { + log("WARNING", "No UUID"); + // TODO: Show that the card cannot be found + } else { + const response = await fetch(server_ip + "/getcard", { + method: "POST", + headers: { + UUID: uuid_param, + }, + }); + + response.text().then((text) => { + if (text == "Request is not a POST request") { + log("WARNING", text); + create_notification( + "There was an issue fetching the card", + text, + "warning", + ); + } else if (text == "Card does not exist!") { + // TODO: Show that the card cannot be found + log("WARNING", "Card does not exist"); + create_notification("That card could not be found", text, "warning"); + } else { + log("INFO", "This card exists on the server!"); + card_render_from_json(".card_card", text); + cardview_json = text; + + document.querySelector("#cardview_text_cardname").innerText = + JSON.parse(text)["name"]; + document.querySelector("#cardview_text_username").innerText = + `Created by ${JSON.parse(text)["author"]}`; + show_cardview_status(); + } + }); + } } function show_cardview_status() { - try { - var from_wallet_param = new URL(window.location.href).searchParams.get("from_wallet"); - } catch { - var from_wallet_param = false; - } - - if (from_wallet_param) { - document.querySelector("#cardview_bottom_createaccount").style.display = "none"; - document.querySelector("#cardview_bottom_save").style.display = "none"; - document.querySelector("#cardview_bottom_owned").style.display = "none"; - + try { + var from_wallet_param = new URL(window.location.href).searchParams.get( + "from_wallet", + ); + } catch { + var from_wallet_param = false; + } + + if (from_wallet_param) { + document.querySelector("#cardview_bottom_createaccount").style.display = + "none"; + document.querySelector("#cardview_bottom_save").style.display = "none"; + document.querySelector("#cardview_bottom_owned").style.display = "none"; + } else { + if (username == JSON.parse(cardview_json)["author"]) { + document.querySelector("#cardview_bottom_createaccount").style.display = + "none"; + document.querySelector("#cardview_bottom_save").style.display = "none"; + document.querySelector("#cardview_bottom_owned").style.display = "block"; + } else if (username) { + document.querySelector("#cardview_bottom_createaccount").style.display = + "none"; + document.querySelector("#cardview_bottom_save").style.display = "block"; + document.querySelector("#cardview_bottom_owned").style.display = "none"; } else { - if (username == JSON.parse(cardview_json)["author"]) { - document.querySelector("#cardview_bottom_createaccount").style.display = "none"; - document.querySelector("#cardview_bottom_save").style.display = "none"; - document.querySelector("#cardview_bottom_owned").style.display = "block"; - - } else if (username) { - document.querySelector("#cardview_bottom_createaccount").style.display = "none"; - document.querySelector("#cardview_bottom_save").style.display = "block"; - document.querySelector("#cardview_bottom_owned").style.display = "none"; - - } else { - document.querySelector("#cardview_bottom_createaccount").style.display = "block"; - document.querySelector("#cardview_bottom_save").style.display = "none"; - document.querySelector("#cardview_bottom_owned").style.display = "none"; - } + document.querySelector("#cardview_bottom_createaccount").style.display = + "block"; + document.querySelector("#cardview_bottom_save").style.display = "none"; + document.querySelector("#cardview_bottom_owned").style.display = "none"; } - - + } } async function save_to_wallet() { - let uuid_param = new URL(window.location.href).searchParams.get("uuid"); - - if (uuid_param == null) { - log("WARNING", "No UUID"); - // TODO: Show that the card cannot be found - - } else { - const response = await fetch(server_ip + "/savetowallet", { - method: "POST", - headers: { - "UUID": uuid_param, - } - }); - - response.text().then(function (text) { - if (text == "Request is not a POST request") { - log("WARNING", text); - create_notification("There was an issue fetching the card", text, "warning"); - - } else if (text == "Missing headers") { - log("WARNING", text); - create_notification("There was a problem saving your card", text, "warning"); - - } else if (text == "Not signed in") { - log("WARNING", text); - create_notification("There was a problem saving your card", text, "warning"); - window.location.href = `${server_ip}/authentication`; - - } else if (text == "Card not found") { - log("WARNING", text); - create_notification("There was a problem saving your card", text, "warning"); - - } else if (text == "Success") { - log("INFO", "Card saved to wallet"); - create_notification("Card saved", "This card has been saved to your wallet", "check-circle"); - - } else { - log("WARNING", "There was an unknown error saving that card to your wallet"); - create_notification("There was a problem saving your card", "There was an unknown error", "warning"); - } - }); - } + const uuid_param = new URL(window.location.href).searchParams.get("uuid"); + + if (uuid_param == null) { + log("WARNING", "No UUID"); + // TODO: Show that the card cannot be found + } else { + const response = await fetch(server_ip + "/savetowallet", { + method: "POST", + headers: { + UUID: uuid_param, + }, + }); + + response.text().then((text) => { + if (text == "Request is not a POST request") { + log("WARNING", text); + create_notification( + "There was an issue fetching the card", + text, + "warning", + ); + } else if (text == "Missing headers") { + log("WARNING", text); + create_notification( + "There was a problem saving your card", + text, + "warning", + ); + } else if (text == "Not signed in") { + log("WARNING", text); + create_notification( + "There was a problem saving your card", + text, + "warning", + ); + window.location.href = `${server_ip}/authentication`; + } else if (text == "Card not found") { + log("WARNING", text); + create_notification( + "There was a problem saving your card", + text, + "warning", + ); + } else if (text == "Success") { + log("INFO", "Card saved to wallet"); + create_notification( + "Card saved", + "This card has been saved to your wallet", + "check-circle", + ); + } else { + log( + "WARNING", + "There was an unknown error saving that card to your wallet", + ); + create_notification( + "There was a problem saving your card", + "There was an unknown error", + "warning", + ); + } + }); + } } -document.querySelector("#cardview_signin").addEventListener("click", (event) => { - window.location.href = `${server_ip}/authentication?sign_in=true&ref=${window.location.href}` -}); +document + .querySelector("#cardview_signin") + .addEventListener("click", (event) => { + window.location.href = `${server_ip}/authentication?sign_in=true&ref=${window.location.href}`; + }); document.querySelector("#cardview_save").addEventListener("click", (event) => { - save_to_wallet(); + save_to_wallet(); }); render_card_view(); diff --git a/cardie/static/main/scripts/editor/editor.js b/cardie/static/main/scripts/editor/editor.js index bfccb71..dbc29bc 100644 --- a/cardie/static/main/scripts/editor/editor.js +++ b/cardie/static/main/scripts/editor/editor.js @@ -13,12 +13,12 @@ try { async function start_editor() { if (demo_param == false) { - let uuid_param = new URL(window.location.href).searchParams.get("uuid"); + const uuid_param = new URL(window.location.href).searchParams.get("uuid"); document.querySelector("#editor_main_preview_demo").style.display = "none"; if (uuid_param == null) { - let new_uuid = crypto.randomUUID(); + const new_uuid = crypto.randomUUID(); const response = await fetch(server_ip + "/createcard", { method: "POST", @@ -27,7 +27,7 @@ async function start_editor() { } }); - response.text().then(function (text) { + response.text().then((text) => { if (text == "Done") { var refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?uuid=' + new_uuid; window.history.pushState({ path: refresh }, '', refresh); @@ -50,7 +50,7 @@ async function start_editor() { } }); - response.text().then(function (text) { + response.text().then((text) => { if (text == "Request is not a POST request") { status_error(); log("WARNING", "There was a problem"); @@ -82,7 +82,7 @@ async function start_editor() { async function save_card(card_json) { status_saving(); - let uuid_param = new URL(window.location.href).searchParams.get("uuid"); + const uuid_param = new URL(window.location.href).searchParams.get("uuid"); const response = await fetch(server_ip + "/savecard", { method: "POST", @@ -92,7 +92,7 @@ async function save_card(card_json) { } }); - response.text().then(function (text) { + response.text().then((text) => { if (text == "Done") { log("INFO", "Data has been saved") status_saved(); @@ -136,7 +136,7 @@ async function editor_demo_auth(sign_in) { } }); - response.text().then(function (text) { + response.text().then((text) => { if (text == "Missing headers") { log("WARNING", text); create_notification("There was an error creating the temporary card", "Missing headers in the request", "warning"); @@ -161,8 +161,8 @@ async function editor_demo_auth(sign_in) { } function setup_qrcode() { - let uuid_param = new URL(window.location.href).searchParams.get("uuid"); - let url = `${server_ip}/card?uuid=${uuid_param}&` + const uuid_param = new URL(window.location.href).searchParams.get("uuid"); + const url = `${server_ip}/card?uuid=${uuid_param}&` qrcode = new QRCode("qrcode", { url: url, @@ -207,7 +207,7 @@ document.querySelector("#editor_header_title_home").addEventListener("click", (e }); document.querySelector("#editor_share_copylink").addEventListener("click", async (event) => { - let uuid_param = new URL(window.location.href).searchParams.get("uuid"); + const uuid_param = new URL(window.location.href).searchParams.get("uuid"); await navigator.clipboard.writeText(`${server_ip}/card?uuid=${uuid_param}&`).then(() => { event.target.innerHTML = ` Copied!`; @@ -219,8 +219,8 @@ document.querySelector("#editor_share_copylink").addEventListener("click", async }); document.querySelector("#editor_share_copyqr").addEventListener("click", async (event) => { - let uuid_param = new URL(window.location.href).searchParams.get("uuid"); - let url = `${server_ip}/card?uuid=${uuid_param}&` + const uuid_param = new URL(window.location.href).searchParams.get("uuid"); + const url = `${server_ip}/card?uuid=${uuid_param}&` qrcode.makeCode(url); @@ -236,8 +236,8 @@ document.querySelector("#editor_share_copyqr").addEventListener("click", async ( }); document.querySelector("#editor_share_downloadqr").addEventListener("click", (event) => { - let uuid_param = new URL(window.location.href).searchParams.get("uuid"); - let url = `${server_ip}/card?uuid=${uuid_param}&` + const uuid_param = new URL(window.location.href).searchParams.get("uuid"); + const url = `${server_ip}/card?uuid=${uuid_param}&` qrcode.makeCode(url); diff --git a/cardie/static/main/scripts/editor/editor_information.js b/cardie/static/main/scripts/editor/editor_information.js index 48ada73..891e1bd 100644 --- a/cardie/static/main/scripts/editor/editor_information.js +++ b/cardie/static/main/scripts/editor/editor_information.js @@ -5,121 +5,145 @@ var currently_editing_icon; var items_list; function open_iconselector_foritem(event) { - let item = event.target.closest(".link_item, .text_item"); - currently_editing_icon = item; - show_iconselector(); + const item = event.target.closest(".link_item, .text_item"); + currently_editing_icon = item; + show_iconselector(); } function editor_create_json() { - let card_json = { - "uuid": "unknown", - "name": "", - "author": "unknown", - "layout": "left", - "details": { - "primary": "", - "secondary": "" - }, - "information": { - "items": [] - }, - "colors": { - "background": "#ffffff", - "accent": "#000000", - "text": "#000000" - }, - "font_style": "Simple", - "version": 4 - } - - card_json["name"] = document.querySelector("#editor_header_name_text_cardname").innerText; - card_json["author"] = username; - card_json["layout"] = layout; - card_json["details"]["primary"] = document.querySelector("#editor_main_settings_details_primary").value; - card_json["details"]["secondary"] = document.querySelector("#editor_main_settings_details_secondary").value; - - card_json["colors"]["background"] = document.querySelector("#editor_main_settings_colors_background").value; - card_json["colors"]["accent"] = document.querySelector("#editor_main_settings_colors_accent").value; - card_json["colors"]["text"] = document.querySelector("#editor_main_settings_colors_text").value; - card_json["font_style"] = font_style; - - for (const item in items_list) { - let item_uuid = items_list[item].id; - let item_icon = items_list[item].icon; - let item_text = items_list[item].text; - let item_url = items_list[item].url; - let item_url_enabled = items_list[item].url_enabled; - let item_position = items_list[item].position; - - let item_json = { - "uuid": item_uuid, - "icon": item_icon, - "text": item_text, - "url": item_url, - "url_enabled": item_url_enabled, - "position": item_position - } - - card_json["information"]["items"].push(item_json); - - card_json["information"]["items"].sort((a, b) => a.position - b.position) - } - - return card_json; + const card_json = { + uuid: "unknown", + name: "", + author: "unknown", + layout: "left", + details: { + primary: "", + secondary: "", + }, + information: { + items: [], + }, + colors: { + background: "#ffffff", + accent: "#000000", + text: "#000000", + }, + font_style: "Simple", + version: 4, + }; + + card_json["name"] = document.querySelector( + "#editor_header_name_text_cardname", + ).innerText; + card_json["author"] = username; + card_json["layout"] = layout; + card_json["details"]["primary"] = document.querySelector( + "#editor_main_settings_details_primary", + ).value; + card_json["details"]["secondary"] = document.querySelector( + "#editor_main_settings_details_secondary", + ).value; + + card_json["colors"]["background"] = document.querySelector( + "#editor_main_settings_colors_background", + ).value; + card_json["colors"]["accent"] = document.querySelector( + "#editor_main_settings_colors_accent", + ).value; + card_json["colors"]["text"] = document.querySelector( + "#editor_main_settings_colors_text", + ).value; + card_json["font_style"] = font_style; + + for (const item in items_list) { + const item_uuid = items_list[item].id; + const item_icon = items_list[item].icon; + const item_text = items_list[item].text; + const item_url = items_list[item].url; + const item_url_enabled = items_list[item].url_enabled; + const item_position = items_list[item].position; + + const item_json = { + uuid: item_uuid, + icon: item_icon, + text: item_text, + url: item_url, + url_enabled: item_url_enabled, + position: item_position, + }; + + card_json["information"]["items"].push(item_json); + + card_json["information"]["items"].sort((a, b) => a.position - b.position); + } + + return card_json; } function editor_load_from_json(json) { - // Sets up all the buttons based on the json - - json = JSON.parse(json); - - document.querySelector("#editor_header_name_text_cardname").innerText = json["name"]; - document.querySelector("#editor_main_settings_details_primary").value = json["details"]["primary"]; - document.querySelector("#editor_main_settings_details_secondary").value = json["details"]["secondary"]; - - document.querySelector("#editor_main_settings_colors_background").value = json["colors"]["background"]; - document.querySelector("#editor_main_settings_colors_accent").value = json["colors"]["accent"]; - document.querySelector("#editor_main_settings_colors_text").value = json["colors"]["text"]; - font_style = json["font_style"]; - - card_set_font(".card_card", font_style); - window.dispatchEvent(new CustomEvent('sendLoadedFontFromJson', { - detail: { font_style } - })); - - card_set_layout(".card_card", json["layout"]); - layout = json["layout"]; - - json["information"]["items"].sort((a, b) => a.position - b.position) - - for (const item in json["information"]["items"]) { - let uuid = json["information"]["items"][item]["uuid"]; - let text = json["information"]["items"][item]["text"]; - let icon = json["information"]["items"][item]["icon"]; - let url = json["information"]["items"][item]["url"]; - let url_enabled = json["information"]["items"][item]["url_enabled"]; - let position = json["information"]["items"][item]["position"]; - - window.dispatchEvent(new CustomEvent('createItem', { - detail: { uuid, text, icon, url, url_enabled, position } - })); - } + // Sets up all the buttons based on the json + + json = JSON.parse(json); + + document.querySelector("#editor_header_name_text_cardname").innerText = + json["name"]; + document.querySelector("#editor_main_settings_details_primary").value = + json["details"]["primary"]; + document.querySelector("#editor_main_settings_details_secondary").value = + json["details"]["secondary"]; + + document.querySelector("#editor_main_settings_colors_background").value = + json["colors"]["background"]; + document.querySelector("#editor_main_settings_colors_accent").value = + json["colors"]["accent"]; + document.querySelector("#editor_main_settings_colors_text").value = + json["colors"]["text"]; + font_style = json["font_style"]; + + card_set_font(".card_card", font_style); + window.dispatchEvent( + new CustomEvent("sendLoadedFontFromJson", { + detail: { font_style }, + }), + ); + + card_set_layout(".card_card", json["layout"]); + layout = json["layout"]; + + json["information"]["items"].sort((a, b) => a.position - b.position); + + for (const item in json["information"]["items"]) { + const uuid = json["information"]["items"][item]["uuid"]; + const text = json["information"]["items"][item]["text"]; + const icon = json["information"]["items"][item]["icon"]; + const url = json["information"]["items"][item]["url"]; + const url_enabled = json["information"]["items"][item]["url_enabled"]; + const position = json["information"]["items"][item]["position"]; + + window.dispatchEvent( + new CustomEvent("createItem", { + detail: { uuid, text, icon, url, url_enabled, position }, + }), + ); + } } function status_saved() { - document.querySelector("#editor_status").innerHTML = ' Saved'; + document.querySelector("#editor_status").innerHTML = + ' Saved'; } function status_saving() { - document.querySelector("#editor_status").innerHTML = ' Saving...'; + document.querySelector("#editor_status").innerHTML = + ' Saving...'; } function status_error() { - document.querySelector("#editor_status").innerHTML = ' Error'; - + document.querySelector("#editor_status").innerHTML = + ' Error'; } -window.addEventListener('itemData', (event) => { - const { items } = event.detail; - items_list = items; -}); \ No newline at end of file +window.addEventListener("itemData", (event) => { + const { items } = event.detail; + items_list = items; +}); diff --git a/cardie/static/main/scripts/editor/icons.js b/cardie/static/main/scripts/editor/icons.js index acca6a9..7236f6d 100644 --- a/cardie/static/main/scripts/editor/icons.js +++ b/cardie/static/main/scripts/editor/icons.js @@ -1,102 +1,124 @@ // TODO: Support {{ server_url }} -let icons_url = "http://127.0.0.1:8000/iconlist"; +const icons_url = "http://127.0.0.1:8000/iconlist"; const itemsData = []; // Array to store item data var icon_selected_item; function create_icon(icon) { - let div_element = document.createElement("div"); - div_element.classList.add("editor-iconselector-icon"); - div_element.setAttribute("icon", icon); + const div_element = document.createElement("div"); + div_element.classList.add("editor-iconselector-icon"); + div_element.setAttribute("icon", icon); - icon_element = document.createElement("i"); - icon_element.className = "editor-iconselector-icon-icon ph-bold"; - icon_element.classList.add("ph-" + icon); + icon_element = document.createElement("i"); + icon_element.className = "editor-iconselector-icon-icon ph-bold"; + icon_element.classList.add("ph-" + icon); - text_element = document.createElement("p"); - text_element.classList.add("editor-iconselector-icon-text"); - text_element.innerText = icon; + text_element = document.createElement("p"); + text_element.classList.add("editor-iconselector-icon-text"); + text_element.innerText = icon; - div_element.appendChild(icon_element); - div_element.appendChild(text_element); - div_element.addEventListener("click", icon_clicked); + div_element.appendChild(icon_element); + div_element.appendChild(text_element); + div_element.addEventListener("click", icon_clicked); - itemsData.push(div_element); + itemsData.push(div_element); - document.querySelector("#editor-iconselector-icons").appendChild(div_element) + document.querySelector("#editor-iconselector-icons").appendChild(div_element); } function render_icons(icons) { - icons = JSON.parse(icons); - for (const icon in icons) { - create_icon(icons[icon]); - } + icons = JSON.parse(icons); + for (const icon in icons) { + create_icon(icons[icon]); + } } async function fetch_icon_list() { - response = await fetch(icons_url); - const text = await response.text(); - render_icons(text); + response = await fetch(icons_url); + const text = await response.text(); + render_icons(text); } document.addEventListener("DOMContentLoaded", (event) => { - fetch_icon_list(); + fetch_icon_list(); }); // Function to render items const renderItems = (filteredItems) => { - document.querySelector("#editor-iconselector-icons").innerHTML = ''; - filteredItems.forEach(item => document.querySelector("#editor-iconselector-icons").appendChild(item)); + document.querySelector("#editor-iconselector-icons").innerHTML = ""; + filteredItems.forEach((item) => + document.querySelector("#editor-iconselector-icons").appendChild(item), + ); }; // Function to sort items alphabetically by the icon attribute const sortItems = (items) => { - return items.sort((a, b) => a.getAttribute('icon').localeCompare(b.getAttribute('icon'))); + return items.sort((a, b) => + a.getAttribute("icon").localeCompare(b.getAttribute("icon")), + ); }; // Function to filter items based on search query const filterItems = (query) => { - const lowerCaseQuery = query.toLowerCase(); - return itemsData.filter(item => item.getAttribute('icon').toLowerCase().includes(lowerCaseQuery)); + const lowerCaseQuery = query.toLowerCase(); + return itemsData.filter((item) => + item.getAttribute("icon").toLowerCase().includes(lowerCaseQuery), + ); }; // Event listener for the search box -document.querySelector("#editor-iconselector-top-search").addEventListener('input', (e) => { +document + .querySelector("#editor-iconselector-top-search") + .addEventListener("input", (e) => { const query = e.target.value; const filteredItems = filterItems(query); const sortedItems = sortItems(filteredItems); renderItems(sortedItems); -}); + }); function show_iconselector(item) { - icon_selected_item = item; - show_background_blur(); - - document.querySelector("#editor-iconselector").style.display = "flex"; - document.querySelector("#editor-iconselector").classList.remove("hide-iconselector"); - document.querySelector("#editor-iconselector").classList.add("show-iconselector"); + icon_selected_item = item; + show_background_blur(); + + document.querySelector("#editor-iconselector").style.display = "flex"; + document + .querySelector("#editor-iconselector") + .classList.remove("hide-iconselector"); + document + .querySelector("#editor-iconselector") + .classList.add("show-iconselector"); } function hide_iconselector() { - document.querySelector("#editor-iconselector").classList.add("hide-iconselector"); - - setTimeout(function() { - document.querySelector("#editor-iconselector").classList.remove("show-iconselector"); - document.querySelector("#editor-iconselector").style.display = "none"; - hide_background_blur(); - }, 500); + document + .querySelector("#editor-iconselector") + .classList.add("hide-iconselector"); + + setTimeout(() => { + document + .querySelector("#editor-iconselector") + .classList.remove("show-iconselector"); + document.querySelector("#editor-iconselector").style.display = "none"; + hide_background_blur(); + }, 500); } function icon_clicked(event) { - let icon = event.target.closest(".editor-iconselector-icon").getAttribute("icon"); - console.log(icon_selected_item, icon) - - window.dispatchEvent(new CustomEvent('iconSelected', { - detail: { icon_selected_item, icon } - })); - - hide_iconselector(); + const icon = event.target + .closest(".editor-iconselector-icon") + .getAttribute("icon"); + console.log(icon_selected_item, icon); + + window.dispatchEvent( + new CustomEvent("iconSelected", { + detail: { icon_selected_item, icon }, + }), + ); + + hide_iconselector(); } -document.querySelector("#editor-iconselector-top-close").addEventListener("click", (event) => { +document + .querySelector("#editor-iconselector-top-close") + .addEventListener("click", (event) => { hide_iconselector(); -}); \ No newline at end of file + }); diff --git a/cardie/static/main/scripts/editor/print.js b/cardie/static/main/scripts/editor/print.js index a4dee2e..6055bf3 100644 --- a/cardie/static/main/scripts/editor/print.js +++ b/cardie/static/main/scripts/editor/print.js @@ -1,90 +1,105 @@ var print_single = false; -document.querySelector("#editor_share_print").addEventListener("click", (event) => { - document.querySelector("#dialog_print").showModal() -}); - -document.querySelector("#dialog_print > .ui_dialog_generic_top > .ui_dialog_generic_top_close").addEventListener("click", (event) => { +document + .querySelector("#editor_share_print") + .addEventListener("click", (event) => { + document.querySelector("#dialog_print").showModal(); + }); + +document + .querySelector( + "#dialog_print > .ui_dialog_generic_top > .ui_dialog_generic_top_close", + ) + .addEventListener("click", (event) => { document.querySelector("#dialog_print").close(); -}); + }); -document.querySelector("#dialog_print_single").addEventListener("click", (event) => { +document + .querySelector("#dialog_print_single") + .addEventListener("click", (event) => { print_single = true; -}); + }); -document.querySelector("#dialog_print_double").addEventListener("click", (event) => { +document + .querySelector("#dialog_print_double") + .addEventListener("click", (event) => { print_single = false; -}); + }); -document.querySelector("#dialog_print_print").addEventListener("click", (event) => { +document + .querySelector("#dialog_print_print") + .addEventListener("click", (event) => { log("INFO", "Opening print dialog"); window.print(); -}); + }); window.addEventListener("beforeprint", (event) => { - log("INFO", "Preparing DOM for printing"); - - if (print_single) { - for (let card = 0; card < 3; card++) { - let new_card = document.querySelector(".card_card").cloneNode(true); - new_card.classList.add("print-card"); - document.querySelector("#editor_main_preview").appendChild(new_card); - } - - } else { - let front_div = document.createElement("div"); - front_div.classList.add("print-div"); - front_div.id = "print_front_div"; - - let back_div = document.createElement("div"); - back_div.classList.add("print-div"); - back_div.id = "print_back_div"; - - document.querySelector("#editor_main_preview").appendChild(front_div); - document.querySelector("#editor_main_preview").appendChild(back_div); - - for (let card = 0; card < 8; card++) { - let card_front = document.querySelector(".card_card > .card_card_front").cloneNode(true); - card_front.classList.add("print-card"); - document.querySelector("#print_front_div").appendChild(card_front); - } - - for (let card = 0; card < 8; card++) { - let card_back = document.querySelector(".card_card > .card_card_back").cloneNode(true); - card_back.classList.add("print-card"); - document.querySelector("#print_back_div").appendChild(card_back); - } - - document.querySelector(".card_card").style.display = "none"; - document.querySelector("#editor_main_preview").classList.add("twosided"); + log("INFO", "Preparing DOM for printing"); + + if (print_single) { + for (let card = 0; card < 3; card++) { + const new_card = document.querySelector(".card_card").cloneNode(true); + new_card.classList.add("print-card"); + document.querySelector("#editor_main_preview").appendChild(new_card); + } + } else { + const front_div = document.createElement("div"); + front_div.classList.add("print-div"); + front_div.id = "print_front_div"; + + const back_div = document.createElement("div"); + back_div.classList.add("print-div"); + back_div.id = "print_back_div"; + + document.querySelector("#editor_main_preview").appendChild(front_div); + document.querySelector("#editor_main_preview").appendChild(back_div); + + for (let card = 0; card < 8; card++) { + const card_front = document + .querySelector(".card_card > .card_card_front") + .cloneNode(true); + card_front.classList.add("print-card"); + document.querySelector("#print_front_div").appendChild(card_front); } + + for (let card = 0; card < 8; card++) { + const card_back = document + .querySelector(".card_card > .card_card_back") + .cloneNode(true); + card_back.classList.add("print-card"); + document.querySelector("#print_back_div").appendChild(card_back); + } + + document.querySelector(".card_card").style.display = "none"; + document.querySelector("#editor_main_preview").classList.add("twosided"); + } }); window.addEventListener("afterprint", (event) => { - log("INFO", "Cleaning up DOM after printing"); + log("INFO", "Cleaning up DOM after printing"); - document.querySelector("#editor_main_preview").classList.remove("twosided") - document.querySelector(".card_card").style.display = "block"; + document.querySelector("#editor_main_preview").classList.remove("twosided"); + document.querySelector(".card_card").style.display = "block"; - let cards = document.querySelectorAll(".print-card"); + const cards = document.querySelectorAll(".print-card"); - // TODO: Throws an exception but still works - try { - for (const card in cards) { - cards[card].remove(); - } - } catch { - null; + // TODO: Throws an exception but still works + try { + for (const card in cards) { + cards[card].remove(); } - - try { - let divs = document.querySelectorAll(".print-div"); - - // TODO: Throws an exception but still works - for (const div in divs) { - divs[div].remove(); - } - } catch { - null; + } catch { + null; + } + + try { + const divs = document.querySelectorAll(".print-div"); + + // TODO: Throws an exception but still works + for (const div in divs) { + divs[div].remove(); } -}); \ No newline at end of file + } catch { + null; + } +}); diff --git a/cardie/static/main/scripts/editor/rename.js b/cardie/static/main/scripts/editor/rename.js index 90536c0..d13206e 100644 --- a/cardie/static/main/scripts/editor/rename.js +++ b/cardie/static/main/scripts/editor/rename.js @@ -1,37 +1,44 @@ -function show_rename() { - show_background_blur(); +function show_rename() { + show_background_blur(); - document.querySelector("#editor_rename").style.display = "flex"; - document.querySelector("#editor_rename").classList.remove("hide-rename"); - document.querySelector("#editor_rename").classList.add("show-rename"); + document.querySelector("#editor_rename").style.display = "flex"; + document.querySelector("#editor_rename").classList.remove("hide-rename"); + document.querySelector("#editor_rename").classList.add("show-rename"); } function hide_rename() { - document.querySelector("#editor_rename").classList.add("hide-rename"); + document.querySelector("#editor_rename").classList.add("hide-rename"); - setTimeout(function() { - document.querySelector("#editor_rename").classList.remove("show-rename"); - document.querySelector("#editor_rename").style.display = "none"; + setTimeout(() => { + document.querySelector("#editor_rename").classList.remove("show-rename"); + document.querySelector("#editor_rename").style.display = "none"; - hide_background_blur(); - }, 500); + hide_background_blur(); + }, 500); } function rename_card() { - let card_name = document.querySelector("#editor_rename_input").value; + const card_name = document.querySelector("#editor_rename_input").value; - document.querySelector("#editor_header_name_text_cardname").innerText = card_name; - hide_rename(); + document.querySelector("#editor_header_name_text_cardname").innerText = + card_name; + hide_rename(); } -document.querySelector("#editor_rename_top_close").addEventListener("click", (event) => { +document + .querySelector("#editor_rename_top_close") + .addEventListener("click", (event) => { hide_rename(); -}); + }); -document.querySelector("#editor_rename_submit").addEventListener("click", (event) => { +document + .querySelector("#editor_rename_submit") + .addEventListener("click", (event) => { rename_card(); -}); + }); -document.querySelector("#editor_header_name_button").addEventListener("click", (event) => { +document + .querySelector("#editor_header_name_button") + .addEventListener("click", (event) => { show_rename(); -}); \ No newline at end of file + }); diff --git a/cardie/static/main/scripts/external/qrcode.min.js b/cardie/static/main/scripts/external/qrcode.min.js index 993e88f..fff2b60 100644 --- a/cardie/static/main/scripts/external/qrcode.min.js +++ b/cardie/static/main/scripts/external/qrcode.min.js @@ -1 +1,1100 @@ -var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,this.data=a,this.parsedData=[];for(var b=[],d=0,e=this.data.length;e>d;d++){var f=this.data.charCodeAt(d);f>65536?(b[0]=240|(1835008&f)>>>18,b[1]=128|(258048&f)>>>12,b[2]=128|(4032&f)>>>6,b[3]=128|63&f):f>2048?(b[0]=224|(61440&f)>>>12,b[1]=128|(4032&f)>>>6,b[2]=128|63&f):f>128?(b[0]=192|(1984&f)>>>6,b[1]=128|63&f):b[0]=f,this.parsedData=this.parsedData.concat(b)}this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(a,b){this.typeNumber=a,this.errorCorrectLevel=b,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}function i(a,b){if(void 0==a.length)throw new Error(a.length+"/"+b);for(var c=0;c=f;f++){var h=0;switch(b){case d.L:h=l[f][0];break;case d.M:h=l[f][1];break;case d.Q:h=l[f][2];break;case d.H:h=l[f][3]}if(h>=e)break;c++}if(c>l.length)throw new Error("Too long data");return c}function s(a){var b=encodeURI(a).toString().replace(/\%[0-9a-fA-F]{2}/g,"a");return b.length+(b.length!=a?3:0)}a.prototype={getLength:function(){return this.parsedData.length},write:function(a){for(var b=0,c=this.parsedData.length;c>b;b++)a.put(this.parsedData[b],8)}},b.prototype={addData:function(b){var c=new a(b);this.dataList.push(c),this.dataCache=null},isDark:function(a,b){if(0>a||this.moduleCount<=a||0>b||this.moduleCount<=b)throw new Error(a+","+b);return this.modules[a][b]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var d=0;d=7&&this.setupTypeNumber(a),null==this.dataCache&&(this.dataCache=b.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,b){for(var c=-1;7>=c;c++)if(!(-1>=a+c||this.moduleCount<=a+c))for(var d=-1;7>=d;d++)-1>=b+d||this.moduleCount<=b+d||(this.modules[a+c][b+d]=c>=0&&6>=c&&(0==d||6==d)||d>=0&&6>=d&&(0==c||6==c)||c>=2&&4>=c&&d>=2&&4>=d?!0:!1)},getBestMaskPattern:function(){for(var a=0,b=0,c=0;8>c;c++){this.makeImpl(!0,c);var d=f.getLostPoint(this);(0==c||a>d)&&(a=d,b=c)}return b},createMovieClip:function(a,b,c){var d=a.createEmptyMovieClip(b,c),e=1;this.make();for(var f=0;f=g;g++)for(var h=-2;2>=h;h++)this.modules[d+g][e+h]=-2==g||2==g||-2==h||2==h||0==g&&0==h?!0:!1}},setupTypeNumber:function(a){for(var b=f.getBCHTypeNumber(this.typeNumber),c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[Math.floor(c/3)][c%3+this.moduleCount-8-3]=d}for(var c=0;18>c;c++){var d=!a&&1==(1&b>>c);this.modules[c%3+this.moduleCount-8-3][Math.floor(c/3)]=d}},setupTypeInfo:function(a,b){for(var c=this.errorCorrectLevel<<3|b,d=f.getBCHTypeInfo(c),e=0;15>e;e++){var g=!a&&1==(1&d>>e);6>e?this.modules[e][8]=g:8>e?this.modules[e+1][8]=g:this.modules[this.moduleCount-15+e][8]=g}for(var e=0;15>e;e++){var g=!a&&1==(1&d>>e);8>e?this.modules[8][this.moduleCount-e-1]=g:9>e?this.modules[8][15-e-1+1]=g:this.modules[8][15-e-1]=g}this.modules[this.moduleCount-8][8]=!a},mapData:function(a,b){for(var c=-1,d=this.moduleCount-1,e=7,g=0,h=this.moduleCount-1;h>0;h-=2)for(6==h&&h--;;){for(var i=0;2>i;i++)if(null==this.modules[d][h-i]){var j=!1;g>>e));var k=f.getMask(b,d,h-i);k&&(j=!j),this.modules[d][h-i]=j,e--,-1==e&&(g++,e=7)}if(d+=c,0>d||this.moduleCount<=d){d-=c,c=-c;break}}}},b.PAD0=236,b.PAD1=17,b.createData=function(a,c,d){for(var e=j.getRSBlocks(a,c),g=new k,h=0;h8*l)throw new Error("code length overflow. ("+g.getLengthInBits()+">"+8*l+")");for(g.getLengthInBits()+4<=8*l&&g.put(0,4);0!=g.getLengthInBits()%8;)g.putBit(!1);for(;;){if(g.getLengthInBits()>=8*l)break;if(g.put(b.PAD0,8),g.getLengthInBits()>=8*l)break;g.put(b.PAD1,8)}return b.createBytes(g,e)},b.createBytes=function(a,b){for(var c=0,d=0,e=0,g=new Array(b.length),h=new Array(b.length),j=0;j=0?p.get(q):0}}for(var r=0,m=0;mm;m++)for(var j=0;jm;m++)for(var j=0;j=0;)b^=f.G15<=0;)b^=f.G18<>>=1;return b},getPatternPosition:function(a){return f.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,b,c){switch(a){case e.PATTERN000:return 0==(b+c)%2;case e.PATTERN001:return 0==b%2;case e.PATTERN010:return 0==c%3;case e.PATTERN011:return 0==(b+c)%3;case e.PATTERN100:return 0==(Math.floor(b/2)+Math.floor(c/3))%2;case e.PATTERN101:return 0==b*c%2+b*c%3;case e.PATTERN110:return 0==(b*c%2+b*c%3)%2;case e.PATTERN111:return 0==(b*c%3+(b+c)%2)%2;default:throw new Error("bad maskPattern:"+a)}},getErrorCorrectPolynomial:function(a){for(var b=new i([1],0),c=0;a>c;c++)b=b.multiply(new i([1,g.gexp(c)],0));return b},getLengthInBits:function(a,b){if(b>=1&&10>b)switch(a){case c.MODE_NUMBER:return 10;case c.MODE_ALPHA_NUM:return 9;case c.MODE_8BIT_BYTE:return 8;case c.MODE_KANJI:return 8;default:throw new Error("mode:"+a)}else if(27>b)switch(a){case c.MODE_NUMBER:return 12;case c.MODE_ALPHA_NUM:return 11;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 10;default:throw new Error("mode:"+a)}else{if(!(41>b))throw new Error("type:"+b);switch(a){case c.MODE_NUMBER:return 14;case c.MODE_ALPHA_NUM:return 13;case c.MODE_8BIT_BYTE:return 16;case c.MODE_KANJI:return 12;default:throw new Error("mode:"+a)}}},getLostPoint:function(a){for(var b=a.getModuleCount(),c=0,d=0;b>d;d++)for(var e=0;b>e;e++){for(var f=0,g=a.isDark(d,e),h=-1;1>=h;h++)if(!(0>d+h||d+h>=b))for(var i=-1;1>=i;i++)0>e+i||e+i>=b||(0!=h||0!=i)&&g==a.isDark(d+h,e+i)&&f++;f>5&&(c+=3+f-5)}for(var d=0;b-1>d;d++)for(var e=0;b-1>e;e++){var j=0;a.isDark(d,e)&&j++,a.isDark(d+1,e)&&j++,a.isDark(d,e+1)&&j++,a.isDark(d+1,e+1)&&j++,(0==j||4==j)&&(c+=3)}for(var d=0;b>d;d++)for(var e=0;b-6>e;e++)a.isDark(d,e)&&!a.isDark(d,e+1)&&a.isDark(d,e+2)&&a.isDark(d,e+3)&&a.isDark(d,e+4)&&!a.isDark(d,e+5)&&a.isDark(d,e+6)&&(c+=40);for(var e=0;b>e;e++)for(var d=0;b-6>d;d++)a.isDark(d,e)&&!a.isDark(d+1,e)&&a.isDark(d+2,e)&&a.isDark(d+3,e)&&a.isDark(d+4,e)&&!a.isDark(d+5,e)&&a.isDark(d+6,e)&&(c+=40);for(var k=0,e=0;b>e;e++)for(var d=0;b>d;d++)a.isDark(d,e)&&k++;var l=Math.abs(100*k/b/b-50)/5;return c+=10*l}},g={glog:function(a){if(1>a)throw new Error("glog("+a+")");return g.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;a>=256;)a-=255;return g.EXP_TABLE[a]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},h=0;8>h;h++)g.EXP_TABLE[h]=1<h;h++)g.EXP_TABLE[h]=g.EXP_TABLE[h-4]^g.EXP_TABLE[h-5]^g.EXP_TABLE[h-6]^g.EXP_TABLE[h-8];for(var h=0;255>h;h++)g.LOG_TABLE[g.EXP_TABLE[h]]=h;i.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var b=new Array(this.getLength()+a.getLength()-1),c=0;cf;f++)for(var g=c[3*f+0],h=c[3*f+1],i=c[3*f+2],k=0;g>k;k++)e.push(new j(h,i));return e},j.getRsBlockTable=function(a,b){switch(b){case d.L:return j.RS_BLOCK_TABLE[4*(a-1)+0];case d.M:return j.RS_BLOCK_TABLE[4*(a-1)+1];case d.Q:return j.RS_BLOCK_TABLE[4*(a-1)+2];case d.H:return j.RS_BLOCK_TABLE[4*(a-1)+3];default:return void 0}},k.prototype={get:function(a){var b=Math.floor(a/8);return 1==(1&this.buffer[b]>>>7-a%8)},put:function(a,b){for(var c=0;b>c;c++)this.putBit(1==(1&a>>>b-c-1))},getLengthInBits:function(){return this.length},putBit:function(a){var b=Math.floor(this.length/8);this.buffer.length<=b&&this.buffer.push(0),a&&(this.buffer[b]|=128>>>this.length%8),this.length++}};var l=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]],o=function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){function g(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg",a);for(var d in b)b.hasOwnProperty(d)&&c.setAttribute(d,b[d]);return c}var b=this._htOption,c=this._el,d=a.getModuleCount();Math.floor(b.width/d),Math.floor(b.height/d),this.clear();var h=g("svg",{viewBox:"0 0 "+String(d)+" "+String(d),width:"100%",height:"100%",fill:b.colorLight});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),c.appendChild(h),h.appendChild(g("rect",{fill:b.colorDark,width:"1",height:"1",id:"template"}));for(var i=0;d>i;i++)for(var j=0;d>j;j++)if(a.isDark(i,j)){var k=g("use",{x:String(i),y:String(j)});k.setAttributeNS("http://www.w3.org/1999/xlink","href","#template"),h.appendChild(k)}},a.prototype.clear=function(){for(;this._el.hasChildNodes();)this._el.removeChild(this._el.lastChild)},a}(),p="svg"===document.documentElement.tagName.toLowerCase(),q=p?o:m()?function(){function a(){this._elImage.src=this._elCanvas.toDataURL("image/png"),this._elImage.style.display="block",this._elCanvas.style.display="none"}function d(a,b){var c=this;if(c._fFail=b,c._fSuccess=a,null===c._bSupportDataURI){var d=document.createElement("img"),e=function(){c._bSupportDataURI=!1,c._fFail&&_fFail.call(c)},f=function(){c._bSupportDataURI=!0,c._fSuccess&&c._fSuccess.call(c)};return d.onabort=e,d.onerror=e,d.onload=f,d.src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",void 0}c._bSupportDataURI===!0&&c._fSuccess?c._fSuccess.call(c):c._bSupportDataURI===!1&&c._fFail&&c._fFail.call(c)}if(this._android&&this._android<=2.1){var b=1/window.devicePixelRatio,c=CanvasRenderingContext2D.prototype.drawImage;CanvasRenderingContext2D.prototype.drawImage=function(a,d,e,f,g,h,i,j){if("nodeName"in a&&/img/i.test(a.nodeName))for(var l=arguments.length-1;l>=1;l--)arguments[l]=arguments[l]*b;else"undefined"==typeof j&&(arguments[1]*=b,arguments[2]*=b,arguments[3]*=b,arguments[4]*=b);c.apply(this,arguments)}}var e=function(a,b){this._bIsPainted=!1,this._android=n(),this._htOption=b,this._elCanvas=document.createElement("canvas"),this._elCanvas.width=b.width,this._elCanvas.height=b.height,a.appendChild(this._elCanvas),this._el=a,this._oContext=this._elCanvas.getContext("2d"),this._bIsPainted=!1,this._elImage=document.createElement("img"),this._elImage.style.display="none",this._el.appendChild(this._elImage),this._bSupportDataURI=null};return e.prototype.draw=function(a){var b=this._elImage,c=this._oContext,d=this._htOption,e=a.getModuleCount(),f=d.width/e,g=d.height/e,h=Math.round(f),i=Math.round(g);b.style.display="none",this.clear();for(var j=0;e>j;j++)for(var k=0;e>k;k++){var l=a.isDark(j,k),m=k*f,n=j*g;c.strokeStyle=l?d.colorDark:d.colorLight,c.lineWidth=1,c.fillStyle=l?d.colorDark:d.colorLight,c.fillRect(m,n,f,g),c.strokeRect(Math.floor(m)+.5,Math.floor(n)+.5,h,i),c.strokeRect(Math.ceil(m)-.5,Math.ceil(n)-.5,h,i)}this._bIsPainted=!0},e.prototype.makeImage=function(){this._bIsPainted&&d.call(this,a)},e.prototype.isPainted=function(){return this._bIsPainted},e.prototype.clear=function(){this._oContext.clearRect(0,0,this._elCanvas.width,this._elCanvas.height),this._bIsPainted=!1},e.prototype.round=function(a){return a?Math.floor(1e3*a)/1e3:a},e}():function(){var a=function(a,b){this._el=a,this._htOption=b};return a.prototype.draw=function(a){for(var b=this._htOption,c=this._el,d=a.getModuleCount(),e=Math.floor(b.width/d),f=Math.floor(b.height/d),g=[''],h=0;d>h;h++){g.push("");for(var i=0;d>i;i++)g.push('');g.push("")}g.push("
"),c.innerHTML=g.join("");var j=c.childNodes[0],k=(b.width-j.offsetWidth)/2,l=(b.height-j.offsetHeight)/2;k>0&&l>0&&(j.style.margin=l+"px "+k+"px")},a.prototype.clear=function(){this._el.innerHTML=""},a}();QRCode=function(a,b){if(this._htOption={width:256,height:256,typeNumber:4,colorDark:"#000000",colorLight:"#ffffff",correctLevel:d.H},"string"==typeof b&&(b={text:b}),b)for(var c in b)this._htOption[c]=b[c];"string"==typeof a&&(a=document.getElementById(a)),this._android=n(),this._el=a,this._oQRCode=null,this._oDrawing=new q(this._el,this._htOption),this._htOption.text&&this.makeCode(this._htOption.text)},QRCode.prototype.makeCode=function(a){this._oQRCode=new b(r(a,this._htOption.correctLevel),this._htOption.correctLevel),this._oQRCode.addData(a),this._oQRCode.make(),this._el.title=a,this._oDrawing.draw(this._oQRCode),this.makeImage()},QRCode.prototype.makeImage=function(){"function"==typeof this._oDrawing.makeImage&&(!this._android||this._android>=3)&&this._oDrawing.makeImage()},QRCode.prototype.clear=function(){this._oDrawing.clear()},QRCode.CorrectLevel=d}(); \ No newline at end of file +var QRCode; +!(() => { + function a(a) { + (this.mode = c.MODE_8BIT_BYTE), (this.data = a), (this.parsedData = []); + for (var b = [], d = 0, e = this.data.length; e > d; d++) { + var f = this.data.charCodeAt(d); + f > 65536 + ? ((b[0] = 240 | ((1835008 & f) >>> 18)), + (b[1] = 128 | ((258048 & f) >>> 12)), + (b[2] = 128 | ((4032 & f) >>> 6)), + (b[3] = 128 | (63 & f))) + : f > 2048 + ? ((b[0] = 224 | ((61440 & f) >>> 12)), + (b[1] = 128 | ((4032 & f) >>> 6)), + (b[2] = 128 | (63 & f))) + : f > 128 + ? ((b[0] = 192 | ((1984 & f) >>> 6)), (b[1] = 128 | (63 & f))) + : (b[0] = f), + (this.parsedData = this.parsedData.concat(b)); + } + this.parsedData.length != this.data.length && + (this.parsedData.unshift(191), + this.parsedData.unshift(187), + this.parsedData.unshift(239)); + } + function b(a, b) { + (this.typeNumber = a), + (this.errorCorrectLevel = b), + (this.modules = null), + (this.moduleCount = 0), + (this.dataCache = null), + (this.dataList = []); + } + function i(a, b) { + if (void 0 == a.length) throw new Error(a.length + "/" + b); + for (var c = 0; c < a.length && 0 == a[c]; ) c++; + this.num = new Array(a.length - c + b); + for (var d = 0; d < a.length - c; d++) this.num[d] = a[d + c]; + } + function j(a, b) { + (this.totalCount = a), (this.dataCount = b); + } + function k() { + (this.buffer = []), (this.length = 0); + } + function m() { + return "undefined" != typeof CanvasRenderingContext2D; + } + function n() { + var a = !1, + b = navigator.userAgent; + return ( + /android/i.test(b) && + ((a = !0), + (aMat = b.toString().match(/android ([0-9]\.[0-9])/i)), + aMat && aMat[1] && (a = Number.parseFloat(aMat[1]))), + a + ); + } + function r(a, b) { + for (var c = 1, e = s(a), f = 0, g = l.length; g >= f; f++) { + var h = 0; + switch (b) { + case d.L: + h = l[f][0]; + break; + case d.M: + h = l[f][1]; + break; + case d.Q: + h = l[f][2]; + break; + case d.H: + h = l[f][3]; + } + if (h >= e) break; + c++; + } + if (c > l.length) throw new Error("Too long data"); + return c; + } + function s(a) { + var b = encodeURI(a) + .toString() + .replace(/\%[0-9a-fA-F]{2}/g, "a"); + return b.length + (b.length != a ? 3 : 0); + } + (a.prototype = { + getLength: function () { + return this.parsedData.length; + }, + write: function (a) { + for (var b = 0, c = this.parsedData.length; c > b; b++) + a.put(this.parsedData[b], 8); + }, + }), + (b.prototype = { + addData: function (b) { + var c = new a(b); + this.dataList.push(c), (this.dataCache = null); + }, + isDark: function (a, b) { + if (0 > a || this.moduleCount <= a || 0 > b || this.moduleCount <= b) + throw new Error(a + "," + b); + return this.modules[a][b]; + }, + getModuleCount: function () { + return this.moduleCount; + }, + make: function () { + this.makeImpl(!1, this.getBestMaskPattern()); + }, + makeImpl: function (a, c) { + (this.moduleCount = 4 * this.typeNumber + 17), + (this.modules = new Array(this.moduleCount)); + for (var d = 0; d < this.moduleCount; d++) { + this.modules[d] = new Array(this.moduleCount); + for (var e = 0; e < this.moduleCount; e++) this.modules[d][e] = null; + } + this.setupPositionProbePattern(0, 0), + this.setupPositionProbePattern(this.moduleCount - 7, 0), + this.setupPositionProbePattern(0, this.moduleCount - 7), + this.setupPositionAdjustPattern(), + this.setupTimingPattern(), + this.setupTypeInfo(a, c), + this.typeNumber >= 7 && this.setupTypeNumber(a), + null == this.dataCache && + (this.dataCache = b.createData( + this.typeNumber, + this.errorCorrectLevel, + this.dataList, + )), + this.mapData(this.dataCache, c); + }, + setupPositionProbePattern: function (a, b) { + for (var c = -1; 7 >= c; c++) + if (!(-1 >= a + c || this.moduleCount <= a + c)) + for (var d = -1; 7 >= d; d++) + -1 >= b + d || + this.moduleCount <= b + d || + (this.modules[a + c][b + d] = + (c >= 0 && 6 >= c && (0 == d || 6 == d)) || + (d >= 0 && 6 >= d && (0 == c || 6 == c)) || + (c >= 2 && 4 >= c && d >= 2 && 4 >= d) + ? !0 + : !1); + }, + getBestMaskPattern: function () { + for (var a = 0, b = 0, c = 0; 8 > c; c++) { + this.makeImpl(!0, c); + var d = f.getLostPoint(this); + (0 == c || a > d) && ((a = d), (b = c)); + } + return b; + }, + createMovieClip: function (a, b, c) { + var d = a.createEmptyMovieClip(b, c), + e = 1; + this.make(); + for (var f = 0; f < this.modules.length; f++) + for (var g = f * e, h = 0; h < this.modules[f].length; h++) { + var i = h * e, + j = this.modules[f][h]; + j && + (d.beginFill(0, 100), + d.moveTo(i, g), + d.lineTo(i + e, g), + d.lineTo(i + e, g + e), + d.lineTo(i, g + e), + d.endFill()); + } + return d; + }, + setupTimingPattern: function () { + for (var a = 8; a < this.moduleCount - 8; a++) + null == this.modules[a][6] && (this.modules[a][6] = 0 == a % 2); + for (var b = 8; b < this.moduleCount - 8; b++) + null == this.modules[6][b] && (this.modules[6][b] = 0 == b % 2); + }, + setupPositionAdjustPattern: function () { + for ( + var a = f.getPatternPosition(this.typeNumber), b = 0; + b < a.length; + b++ + ) + for (var c = 0; c < a.length; c++) { + var d = a[b], + e = a[c]; + if (null == this.modules[d][e]) + for (var g = -2; 2 >= g; g++) + for (var h = -2; 2 >= h; h++) + this.modules[d + g][e + h] = + -2 == g || 2 == g || -2 == h || 2 == h || (0 == g && 0 == h) + ? !0 + : !1; + } + }, + setupTypeNumber: function (a) { + for (var b = f.getBCHTypeNumber(this.typeNumber), c = 0; 18 > c; c++) { + var d = !a && 1 == (1 & (b >> c)); + this.modules[Math.floor(c / 3)][(c % 3) + this.moduleCount - 8 - 3] = + d; + } + for (var c = 0; 18 > c; c++) { + var d = !a && 1 == (1 & (b >> c)); + this.modules[(c % 3) + this.moduleCount - 8 - 3][Math.floor(c / 3)] = + d; + } + }, + setupTypeInfo: function (a, b) { + for ( + var c = (this.errorCorrectLevel << 3) | b, + d = f.getBCHTypeInfo(c), + e = 0; + 15 > e; + e++ + ) { + var g = !a && 1 == (1 & (d >> e)); + 6 > e + ? (this.modules[e][8] = g) + : 8 > e + ? (this.modules[e + 1][8] = g) + : (this.modules[this.moduleCount - 15 + e][8] = g); + } + for (var e = 0; 15 > e; e++) { + var g = !a && 1 == (1 & (d >> e)); + 8 > e + ? (this.modules[8][this.moduleCount - e - 1] = g) + : 9 > e + ? (this.modules[8][15 - e - 1 + 1] = g) + : (this.modules[8][15 - e - 1] = g); + } + this.modules[this.moduleCount - 8][8] = !a; + }, + mapData: function (a, b) { + for ( + var c = -1, + d = this.moduleCount - 1, + e = 7, + g = 0, + h = this.moduleCount - 1; + h > 0; + h -= 2 + ) + for (6 == h && h--; ; ) { + for (var i = 0; 2 > i; i++) + if (null == this.modules[d][h - i]) { + var j = !1; + g < a.length && (j = 1 == (1 & (a[g] >>> e))); + var k = f.getMask(b, d, h - i); + k && (j = !j), + (this.modules[d][h - i] = j), + e--, + -1 == e && (g++, (e = 7)); + } + if (((d += c), 0 > d || this.moduleCount <= d)) { + (d -= c), (c = -c); + break; + } + } + }, + }), + (b.PAD0 = 236), + (b.PAD1 = 17), + (b.createData = (a, c, d) => { + for (var e = j.getRSBlocks(a, c), g = new k(), h = 0; h < d.length; h++) { + var i = d[h]; + g.put(i.mode, 4), + g.put(i.getLength(), f.getLengthInBits(i.mode, a)), + i.write(g); + } + for (var l = 0, h = 0; h < e.length; h++) l += e[h].dataCount; + if (g.getLengthInBits() > 8 * l) + throw new Error( + "code length overflow. (" + g.getLengthInBits() + ">" + 8 * l + ")", + ); + for ( + g.getLengthInBits() + 4 <= 8 * l && g.put(0, 4); + 0 != g.getLengthInBits() % 8; + ) + g.putBit(!1); + for (;;) { + if (g.getLengthInBits() >= 8 * l) break; + if ((g.put(b.PAD0, 8), g.getLengthInBits() >= 8 * l)) break; + g.put(b.PAD1, 8); + } + return b.createBytes(g, e); + }), + (b.createBytes = (a, b) => { + for ( + var c = 0, + d = 0, + e = 0, + g = new Array(b.length), + h = new Array(b.length), + j = 0; + j < b.length; + j++ + ) { + var k = b[j].dataCount, + l = b[j].totalCount - k; + (d = Math.max(d, k)), (e = Math.max(e, l)), (g[j] = new Array(k)); + for (var m = 0; m < g[j].length; m++) g[j][m] = 255 & a.buffer[m + c]; + c += k; + var n = f.getErrorCorrectPolynomial(l), + o = new i(g[j], n.getLength() - 1), + p = o.mod(n); + h[j] = new Array(n.getLength() - 1); + for (var m = 0; m < h[j].length; m++) { + var q = m + p.getLength() - h[j].length; + h[j][m] = q >= 0 ? p.get(q) : 0; + } + } + for (var r = 0, m = 0; m < b.length; m++) r += b[m].totalCount; + for (var s = new Array(r), t = 0, m = 0; d > m; m++) + for (var j = 0; j < b.length; j++) + m < g[j].length && (s[t++] = g[j][m]); + for (var m = 0; e > m; m++) + for (var j = 0; j < b.length; j++) + m < h[j].length && (s[t++] = h[j][m]); + return s; + }); + for ( + var c = { + MODE_NUMBER: 1, + MODE_ALPHA_NUM: 2, + MODE_8BIT_BYTE: 4, + MODE_KANJI: 8, + }, + d = { L: 1, M: 0, Q: 3, H: 2 }, + e = { + PATTERN000: 0, + PATTERN001: 1, + PATTERN010: 2, + PATTERN011: 3, + PATTERN100: 4, + PATTERN101: 5, + PATTERN110: 6, + PATTERN111: 7, + }, + f = { + PATTERN_POSITION_TABLE: [ + [], + [6, 18], + [6, 22], + [6, 26], + [6, 30], + [6, 34], + [6, 22, 38], + [6, 24, 42], + [6, 26, 46], + [6, 28, 50], + [6, 30, 54], + [6, 32, 58], + [6, 34, 62], + [6, 26, 46, 66], + [6, 26, 48, 70], + [6, 26, 50, 74], + [6, 30, 54, 78], + [6, 30, 56, 82], + [6, 30, 58, 86], + [6, 34, 62, 90], + [6, 28, 50, 72, 94], + [6, 26, 50, 74, 98], + [6, 30, 54, 78, 102], + [6, 28, 54, 80, 106], + [6, 32, 58, 84, 110], + [6, 30, 58, 86, 114], + [6, 34, 62, 90, 118], + [6, 26, 50, 74, 98, 122], + [6, 30, 54, 78, 102, 126], + [6, 26, 52, 78, 104, 130], + [6, 30, 56, 82, 108, 134], + [6, 34, 60, 86, 112, 138], + [6, 30, 58, 86, 114, 142], + [6, 34, 62, 90, 118, 146], + [6, 30, 54, 78, 102, 126, 150], + [6, 24, 50, 76, 102, 128, 154], + [6, 28, 54, 80, 106, 132, 158], + [6, 32, 58, 84, 110, 136, 162], + [6, 26, 54, 82, 110, 138, 166], + [6, 30, 58, 86, 114, 142, 170], + ], + G15: 1335, + G18: 7973, + G15_MASK: 21522, + getBCHTypeInfo: (a) => { + for (var b = a << 10; f.getBCHDigit(b) - f.getBCHDigit(f.G15) >= 0; ) + b ^= f.G15 << (f.getBCHDigit(b) - f.getBCHDigit(f.G15)); + return ((a << 10) | b) ^ f.G15_MASK; + }, + getBCHTypeNumber: (a) => { + for (var b = a << 12; f.getBCHDigit(b) - f.getBCHDigit(f.G18) >= 0; ) + b ^= f.G18 << (f.getBCHDigit(b) - f.getBCHDigit(f.G18)); + return (a << 12) | b; + }, + getBCHDigit: (a) => { + for (var b = 0; 0 != a; ) b++, (a >>>= 1); + return b; + }, + getPatternPosition: (a) => f.PATTERN_POSITION_TABLE[a - 1], + getMask: (a, b, c) => { + switch (a) { + case e.PATTERN000: + return 0 == (b + c) % 2; + case e.PATTERN001: + return 0 == b % 2; + case e.PATTERN010: + return 0 == c % 3; + case e.PATTERN011: + return 0 == (b + c) % 3; + case e.PATTERN100: + return 0 == (Math.floor(b / 2) + Math.floor(c / 3)) % 2; + case e.PATTERN101: + return 0 == ((b * c) % 2) + ((b * c) % 3); + case e.PATTERN110: + return 0 == (((b * c) % 2) + ((b * c) % 3)) % 2; + case e.PATTERN111: + return 0 == (((b * c) % 3) + ((b + c) % 2)) % 2; + default: + throw new Error("bad maskPattern:" + a); + } + }, + getErrorCorrectPolynomial: (a) => { + for (var b = new i([1], 0), c = 0; a > c; c++) + b = b.multiply(new i([1, g.gexp(c)], 0)); + return b; + }, + getLengthInBits: (a, b) => { + if (b >= 1 && 10 > b) + switch (a) { + case c.MODE_NUMBER: + return 10; + case c.MODE_ALPHA_NUM: + return 9; + case c.MODE_8BIT_BYTE: + return 8; + case c.MODE_KANJI: + return 8; + default: + throw new Error("mode:" + a); + } + else if (27 > b) + switch (a) { + case c.MODE_NUMBER: + return 12; + case c.MODE_ALPHA_NUM: + return 11; + case c.MODE_8BIT_BYTE: + return 16; + case c.MODE_KANJI: + return 10; + default: + throw new Error("mode:" + a); + } + else { + if (!(41 > b)) throw new Error("type:" + b); + switch (a) { + case c.MODE_NUMBER: + return 14; + case c.MODE_ALPHA_NUM: + return 13; + case c.MODE_8BIT_BYTE: + return 16; + case c.MODE_KANJI: + return 12; + default: + throw new Error("mode:" + a); + } + } + }, + getLostPoint: (a) => { + for (var b = a.getModuleCount(), c = 0, d = 0; b > d; d++) + for (var e = 0; b > e; e++) { + for (var f = 0, g = a.isDark(d, e), h = -1; 1 >= h; h++) + if (!(0 > d + h || d + h >= b)) + for (var i = -1; 1 >= i; i++) + 0 > e + i || + e + i >= b || + ((0 != h || 0 != i) && + g == a.isDark(d + h, e + i) && + f++); + f > 5 && (c += 3 + f - 5); + } + for (var d = 0; b - 1 > d; d++) + for (var e = 0; b - 1 > e; e++) { + var j = 0; + a.isDark(d, e) && j++, + a.isDark(d + 1, e) && j++, + a.isDark(d, e + 1) && j++, + a.isDark(d + 1, e + 1) && j++, + (0 == j || 4 == j) && (c += 3); + } + for (var d = 0; b > d; d++) + for (var e = 0; b - 6 > e; e++) + a.isDark(d, e) && + !a.isDark(d, e + 1) && + a.isDark(d, e + 2) && + a.isDark(d, e + 3) && + a.isDark(d, e + 4) && + !a.isDark(d, e + 5) && + a.isDark(d, e + 6) && + (c += 40); + for (var e = 0; b > e; e++) + for (var d = 0; b - 6 > d; d++) + a.isDark(d, e) && + !a.isDark(d + 1, e) && + a.isDark(d + 2, e) && + a.isDark(d + 3, e) && + a.isDark(d + 4, e) && + !a.isDark(d + 5, e) && + a.isDark(d + 6, e) && + (c += 40); + for (var k = 0, e = 0; b > e; e++) + for (var d = 0; b > d; d++) a.isDark(d, e) && k++; + var l = Math.abs((100 * k) / b / b - 50) / 5; + return (c += 10 * l); + }, + }, + g = { + glog: (a) => { + if (1 > a) throw new Error("glog(" + a + ")"); + return g.LOG_TABLE[a]; + }, + gexp: (a) => { + while (0 > a) a += 255; + while (a >= 256) a -= 255; + return g.EXP_TABLE[a]; + }, + EXP_TABLE: new Array(256), + LOG_TABLE: new Array(256), + }, + h = 0; + 8 > h; + h++ + ) + g.EXP_TABLE[h] = 1 << h; + for (var h = 8; 256 > h; h++) + g.EXP_TABLE[h] = + g.EXP_TABLE[h - 4] ^ + g.EXP_TABLE[h - 5] ^ + g.EXP_TABLE[h - 6] ^ + g.EXP_TABLE[h - 8]; + for (var h = 0; 255 > h; h++) g.LOG_TABLE[g.EXP_TABLE[h]] = h; + (i.prototype = { + get: function (a) { + return this.num[a]; + }, + getLength: function () { + return this.num.length; + }, + multiply: function (a) { + for ( + var b = new Array(this.getLength() + a.getLength() - 1), c = 0; + c < this.getLength(); + c++ + ) + for (var d = 0; d < a.getLength(); d++) + b[c + d] ^= g.gexp(g.glog(this.get(c)) + g.glog(a.get(d))); + return new i(b, 0); + }, + mod: function (a) { + if (this.getLength() - a.getLength() < 0) return this; + for ( + var b = g.glog(this.get(0)) - g.glog(a.get(0)), + c = new Array(this.getLength()), + d = 0; + d < this.getLength(); + d++ + ) + c[d] = this.get(d); + for (var d = 0; d < a.getLength(); d++) + c[d] ^= g.gexp(g.glog(a.get(d)) + b); + return new i(c, 0).mod(a); + }, + }), + (j.RS_BLOCK_TABLE = [ + [1, 26, 19], + [1, 26, 16], + [1, 26, 13], + [1, 26, 9], + [1, 44, 34], + [1, 44, 28], + [1, 44, 22], + [1, 44, 16], + [1, 70, 55], + [1, 70, 44], + [2, 35, 17], + [2, 35, 13], + [1, 100, 80], + [2, 50, 32], + [2, 50, 24], + [4, 25, 9], + [1, 134, 108], + [2, 67, 43], + [2, 33, 15, 2, 34, 16], + [2, 33, 11, 2, 34, 12], + [2, 86, 68], + [4, 43, 27], + [4, 43, 19], + [4, 43, 15], + [2, 98, 78], + [4, 49, 31], + [2, 32, 14, 4, 33, 15], + [4, 39, 13, 1, 40, 14], + [2, 121, 97], + [2, 60, 38, 2, 61, 39], + [4, 40, 18, 2, 41, 19], + [4, 40, 14, 2, 41, 15], + [2, 146, 116], + [3, 58, 36, 2, 59, 37], + [4, 36, 16, 4, 37, 17], + [4, 36, 12, 4, 37, 13], + [2, 86, 68, 2, 87, 69], + [4, 69, 43, 1, 70, 44], + [6, 43, 19, 2, 44, 20], + [6, 43, 15, 2, 44, 16], + [4, 101, 81], + [1, 80, 50, 4, 81, 51], + [4, 50, 22, 4, 51, 23], + [3, 36, 12, 8, 37, 13], + [2, 116, 92, 2, 117, 93], + [6, 58, 36, 2, 59, 37], + [4, 46, 20, 6, 47, 21], + [7, 42, 14, 4, 43, 15], + [4, 133, 107], + [8, 59, 37, 1, 60, 38], + [8, 44, 20, 4, 45, 21], + [12, 33, 11, 4, 34, 12], + [3, 145, 115, 1, 146, 116], + [4, 64, 40, 5, 65, 41], + [11, 36, 16, 5, 37, 17], + [11, 36, 12, 5, 37, 13], + [5, 109, 87, 1, 110, 88], + [5, 65, 41, 5, 66, 42], + [5, 54, 24, 7, 55, 25], + [11, 36, 12], + [5, 122, 98, 1, 123, 99], + [7, 73, 45, 3, 74, 46], + [15, 43, 19, 2, 44, 20], + [3, 45, 15, 13, 46, 16], + [1, 135, 107, 5, 136, 108], + [10, 74, 46, 1, 75, 47], + [1, 50, 22, 15, 51, 23], + [2, 42, 14, 17, 43, 15], + [5, 150, 120, 1, 151, 121], + [9, 69, 43, 4, 70, 44], + [17, 50, 22, 1, 51, 23], + [2, 42, 14, 19, 43, 15], + [3, 141, 113, 4, 142, 114], + [3, 70, 44, 11, 71, 45], + [17, 47, 21, 4, 48, 22], + [9, 39, 13, 16, 40, 14], + [3, 135, 107, 5, 136, 108], + [3, 67, 41, 13, 68, 42], + [15, 54, 24, 5, 55, 25], + [15, 43, 15, 10, 44, 16], + [4, 144, 116, 4, 145, 117], + [17, 68, 42], + [17, 50, 22, 6, 51, 23], + [19, 46, 16, 6, 47, 17], + [2, 139, 111, 7, 140, 112], + [17, 74, 46], + [7, 54, 24, 16, 55, 25], + [34, 37, 13], + [4, 151, 121, 5, 152, 122], + [4, 75, 47, 14, 76, 48], + [11, 54, 24, 14, 55, 25], + [16, 45, 15, 14, 46, 16], + [6, 147, 117, 4, 148, 118], + [6, 73, 45, 14, 74, 46], + [11, 54, 24, 16, 55, 25], + [30, 46, 16, 2, 47, 17], + [8, 132, 106, 4, 133, 107], + [8, 75, 47, 13, 76, 48], + [7, 54, 24, 22, 55, 25], + [22, 45, 15, 13, 46, 16], + [10, 142, 114, 2, 143, 115], + [19, 74, 46, 4, 75, 47], + [28, 50, 22, 6, 51, 23], + [33, 46, 16, 4, 47, 17], + [8, 152, 122, 4, 153, 123], + [22, 73, 45, 3, 74, 46], + [8, 53, 23, 26, 54, 24], + [12, 45, 15, 28, 46, 16], + [3, 147, 117, 10, 148, 118], + [3, 73, 45, 23, 74, 46], + [4, 54, 24, 31, 55, 25], + [11, 45, 15, 31, 46, 16], + [7, 146, 116, 7, 147, 117], + [21, 73, 45, 7, 74, 46], + [1, 53, 23, 37, 54, 24], + [19, 45, 15, 26, 46, 16], + [5, 145, 115, 10, 146, 116], + [19, 75, 47, 10, 76, 48], + [15, 54, 24, 25, 55, 25], + [23, 45, 15, 25, 46, 16], + [13, 145, 115, 3, 146, 116], + [2, 74, 46, 29, 75, 47], + [42, 54, 24, 1, 55, 25], + [23, 45, 15, 28, 46, 16], + [17, 145, 115], + [10, 74, 46, 23, 75, 47], + [10, 54, 24, 35, 55, 25], + [19, 45, 15, 35, 46, 16], + [17, 145, 115, 1, 146, 116], + [14, 74, 46, 21, 75, 47], + [29, 54, 24, 19, 55, 25], + [11, 45, 15, 46, 46, 16], + [13, 145, 115, 6, 146, 116], + [14, 74, 46, 23, 75, 47], + [44, 54, 24, 7, 55, 25], + [59, 46, 16, 1, 47, 17], + [12, 151, 121, 7, 152, 122], + [12, 75, 47, 26, 76, 48], + [39, 54, 24, 14, 55, 25], + [22, 45, 15, 41, 46, 16], + [6, 151, 121, 14, 152, 122], + [6, 75, 47, 34, 76, 48], + [46, 54, 24, 10, 55, 25], + [2, 45, 15, 64, 46, 16], + [17, 152, 122, 4, 153, 123], + [29, 74, 46, 14, 75, 47], + [49, 54, 24, 10, 55, 25], + [24, 45, 15, 46, 46, 16], + [4, 152, 122, 18, 153, 123], + [13, 74, 46, 32, 75, 47], + [48, 54, 24, 14, 55, 25], + [42, 45, 15, 32, 46, 16], + [20, 147, 117, 4, 148, 118], + [40, 75, 47, 7, 76, 48], + [43, 54, 24, 22, 55, 25], + [10, 45, 15, 67, 46, 16], + [19, 148, 118, 6, 149, 119], + [18, 75, 47, 31, 76, 48], + [34, 54, 24, 34, 55, 25], + [20, 45, 15, 61, 46, 16], + ]), + (j.getRSBlocks = (a, b) => { + var c = j.getRsBlockTable(a, b); + if (void 0 == c) + throw new Error( + "bad rs block @ typeNumber:" + a + "/errorCorrectLevel:" + b, + ); + for (var d = c.length / 3, e = [], f = 0; d > f; f++) + for ( + var g = c[3 * f + 0], h = c[3 * f + 1], i = c[3 * f + 2], k = 0; + g > k; + k++ + ) + e.push(new j(h, i)); + return e; + }), + (j.getRsBlockTable = (a, b) => { + switch (b) { + case d.L: + return j.RS_BLOCK_TABLE[4 * (a - 1) + 0]; + case d.M: + return j.RS_BLOCK_TABLE[4 * (a - 1) + 1]; + case d.Q: + return j.RS_BLOCK_TABLE[4 * (a - 1) + 2]; + case d.H: + return j.RS_BLOCK_TABLE[4 * (a - 1) + 3]; + default: + return void 0; + } + }), + (k.prototype = { + get: function (a) { + var b = Math.floor(a / 8); + return 1 == (1 & (this.buffer[b] >>> (7 - (a % 8)))); + }, + put: function (a, b) { + for (var c = 0; b > c; c++) this.putBit(1 == (1 & (a >>> (b - c - 1)))); + }, + getLengthInBits: function () { + return this.length; + }, + putBit: function (a) { + var b = Math.floor(this.length / 8); + this.buffer.length <= b && this.buffer.push(0), + a && (this.buffer[b] |= 128 >>> (this.length % 8)), + this.length++; + }, + }); + var l = [ + [17, 14, 11, 7], + [32, 26, 20, 14], + [53, 42, 32, 24], + [78, 62, 46, 34], + [106, 84, 60, 44], + [134, 106, 74, 58], + [154, 122, 86, 64], + [192, 152, 108, 84], + [230, 180, 130, 98], + [271, 213, 151, 119], + [321, 251, 177, 137], + [367, 287, 203, 155], + [425, 331, 241, 177], + [458, 362, 258, 194], + [520, 412, 292, 220], + [586, 450, 322, 250], + [644, 504, 364, 280], + [718, 560, 394, 310], + [792, 624, 442, 338], + [858, 666, 482, 382], + [929, 711, 509, 403], + [1003, 779, 565, 439], + [1091, 857, 611, 461], + [1171, 911, 661, 511], + [1273, 997, 715, 535], + [1367, 1059, 751, 593], + [1465, 1125, 805, 625], + [1528, 1190, 868, 658], + [1628, 1264, 908, 698], + [1732, 1370, 982, 742], + [1840, 1452, 1030, 790], + [1952, 1538, 1112, 842], + [2068, 1628, 1168, 898], + [2188, 1722, 1228, 958], + [2303, 1809, 1283, 983], + [2431, 1911, 1351, 1051], + [2563, 1989, 1423, 1093], + [2699, 2099, 1499, 1139], + [2809, 2213, 1579, 1219], + [2953, 2331, 1663, 1273], + ], + o = (() => { + var a = function (a, b) { + (this._el = a), (this._htOption = b); + }; + return ( + (a.prototype.draw = function (a) { + function g(a, b) { + var c = document.createElementNS("http://www.w3.org/2000/svg", a); + for (var d in b) b.hasOwnProperty(d) && c.setAttribute(d, b[d]); + return c; + } + var b = this._htOption, + c = this._el, + d = a.getModuleCount(); + Math.floor(b.width / d), Math.floor(b.height / d), this.clear(); + var h = g("svg", { + viewBox: "0 0 " + String(d) + " " + String(d), + width: "100%", + height: "100%", + fill: b.colorLight, + }); + h.setAttributeNS( + "http://www.w3.org/2000/xmlns/", + "xmlns:xlink", + "http://www.w3.org/1999/xlink", + ), + c.appendChild(h), + h.appendChild( + g("rect", { + fill: b.colorDark, + width: "1", + height: "1", + id: "template", + }), + ); + for (var i = 0; d > i; i++) + for (var j = 0; d > j; j++) + if (a.isDark(i, j)) { + var k = g("use", { x: String(i), y: String(j) }); + k.setAttributeNS( + "http://www.w3.org/1999/xlink", + "href", + "#template", + ), + h.appendChild(k); + } + }), + (a.prototype.clear = function () { + while (this._el.hasChildNodes()) + this._el.removeChild(this._el.lastChild); + }), + a + ); + })(), + p = "svg" === document.documentElement.tagName.toLowerCase(), + q = p + ? o + : m() + ? (function () { + function a() { + (this._elImage.src = this._elCanvas.toDataURL("image/png")), + (this._elImage.style.display = "block"), + (this._elCanvas.style.display = "none"); + } + function d(a, b) { + if ( + ((this._fFail = b), + (this._fSuccess = a), + null === this._bSupportDataURI) + ) { + var d = document.createElement("img"), + e = () => { + (this._bSupportDataURI = !1), + this._fFail && _fFail.call(this); + }, + f = () => { + (this._bSupportDataURI = !0), + this._fSuccess && this._fSuccess.call(this); + }; + return ( + (d.onabort = e), + (d.onerror = e), + (d.onload = f), + (d.src = + "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="), + void 0 + ); + } + this._bSupportDataURI === !0 && this._fSuccess + ? this._fSuccess.call(this) + : this._bSupportDataURI === !1 && + this._fFail && + this._fFail.call(this); + } + if (this._android && this._android <= 2.1) { + var b = 1 / window.devicePixelRatio, + c = CanvasRenderingContext2D.prototype.drawImage; + CanvasRenderingContext2D.prototype.drawImage = function ( + a, + d, + e, + f, + g, + h, + i, + j, + ) { + if ("nodeName" in a && /img/i.test(a.nodeName)) + for (var l = arguments.length - 1; l >= 1; l--) + arguments[l] = arguments[l] * b; + else + "undefined" == typeof j && + ((arguments[1] *= b), + (arguments[2] *= b), + (arguments[3] *= b), + (arguments[4] *= b)); + c.apply(this, arguments); + }; + } + var e = function (a, b) { + (this._bIsPainted = !1), + (this._android = n()), + (this._htOption = b), + (this._elCanvas = document.createElement("canvas")), + (this._elCanvas.width = b.width), + (this._elCanvas.height = b.height), + a.appendChild(this._elCanvas), + (this._el = a), + (this._oContext = this._elCanvas.getContext("2d")), + (this._bIsPainted = !1), + (this._elImage = document.createElement("img")), + (this._elImage.style.display = "none"), + this._el.appendChild(this._elImage), + (this._bSupportDataURI = null); + }; + return ( + (e.prototype.draw = function (a) { + var b = this._elImage, + c = this._oContext, + d = this._htOption, + e = a.getModuleCount(), + f = d.width / e, + g = d.height / e, + h = Math.round(f), + i = Math.round(g); + (b.style.display = "none"), this.clear(); + for (var j = 0; e > j; j++) + for (var k = 0; e > k; k++) { + var l = a.isDark(j, k), + m = k * f, + n = j * g; + (c.strokeStyle = l ? d.colorDark : d.colorLight), + (c.lineWidth = 1), + (c.fillStyle = l ? d.colorDark : d.colorLight), + c.fillRect(m, n, f, g), + c.strokeRect( + Math.floor(m) + 0.5, + Math.floor(n) + 0.5, + h, + i, + ), + c.strokeRect( + Math.ceil(m) - 0.5, + Math.ceil(n) - 0.5, + h, + i, + ); + } + this._bIsPainted = !0; + }), + (e.prototype.makeImage = function () { + this._bIsPainted && d.call(this, a); + }), + (e.prototype.isPainted = function () { + return this._bIsPainted; + }), + (e.prototype.clear = function () { + this._oContext.clearRect( + 0, + 0, + this._elCanvas.width, + this._elCanvas.height, + ), + (this._bIsPainted = !1); + }), + (e.prototype.round = (a) => (a ? Math.floor(1e3 * a) / 1e3 : a)), + e + ); + })() + : (() => { + var a = function (a, b) { + (this._el = a), (this._htOption = b); + }; + return ( + (a.prototype.draw = function (a) { + for ( + var b = this._htOption, + c = this._el, + d = a.getModuleCount(), + e = Math.floor(b.width / d), + f = Math.floor(b.height / d), + g = [''], + h = 0; + d > h; + h++ + ) { + g.push(""); + for (var i = 0; d > i; i++) + g.push( + '', + ); + g.push(""); + } + g.push("
"), (c.innerHTML = g.join("")); + var j = c.childNodes[0], + k = (b.width - j.offsetWidth) / 2, + l = (b.height - j.offsetHeight) / 2; + k > 0 && l > 0 && (j.style.margin = l + "px " + k + "px"); + }), + (a.prototype.clear = function () { + this._el.innerHTML = ""; + }), + a + ); + })(); + (QRCode = function (a, b) { + if ( + ((this._htOption = { + width: 256, + height: 256, + typeNumber: 4, + colorDark: "#000000", + colorLight: "#ffffff", + correctLevel: d.H, + }), + "string" == typeof b && (b = { text: b }), + b) + ) + for (var c in b) this._htOption[c] = b[c]; + "string" == typeof a && (a = document.getElementById(a)), + (this._android = n()), + (this._el = a), + (this._oQRCode = null), + (this._oDrawing = new q(this._el, this._htOption)), + this._htOption.text && this.makeCode(this._htOption.text); + }), + (QRCode.prototype.makeCode = function (a) { + (this._oQRCode = new b( + r(a, this._htOption.correctLevel), + this._htOption.correctLevel, + )), + this._oQRCode.addData(a), + this._oQRCode.make(), + (this._el.title = a), + this._oDrawing.draw(this._oQRCode), + this.makeImage(); + }), + (QRCode.prototype.makeImage = function () { + "function" == typeof this._oDrawing.makeImage && + (!this._android || this._android >= 3) && + this._oDrawing.makeImage(); + }), + (QRCode.prototype.clear = function () { + this._oDrawing.clear(); + }), + (QRCode.CorrectLevel = d); +})(); diff --git a/cardie/static/main/scripts/global/background_blur.js b/cardie/static/main/scripts/global/background_blur.js index 208f328..59f77ea 100644 --- a/cardie/static/main/scripts/global/background_blur.js +++ b/cardie/static/main/scripts/global/background_blur.js @@ -1,16 +1,16 @@ -function show_background_blur() { - document.querySelector(".background_blur").style.display = "flex"; +function show_background_blur() { + document.querySelector(".background_blur").style.display = "flex"; - setTimeout(function() { - document.querySelector(".background_blur").classList.add("show"); - }, 10); + setTimeout(() => { + document.querySelector(".background_blur").classList.add("show"); + }, 10); } function hide_background_blur() { - // TODO: This doesn't seem to animate correctly - document.querySelector(".background_blur").classList.remove("show"); + // TODO: This doesn't seem to animate correctly + document.querySelector(".background_blur").classList.remove("show"); - setTimeout(function() { - document.querySelector(".background_blur").style.display = "none"; - }, 500); -} \ No newline at end of file + setTimeout(() => { + document.querySelector(".background_blur").style.display = "none"; + }, 500); +} diff --git a/cardie/static/main/scripts/global/card.js b/cardie/static/main/scripts/global/card.js index 3e0ec2e..6cd2294 100644 --- a/cardie/static/main/scripts/global/card.js +++ b/cardie/static/main/scripts/global/card.js @@ -4,212 +4,251 @@ var cards = document.getElementsByClassName("card_card"); var card_items = []; for (let i = 0; i < cards.length; i++) { - cards[i].addEventListener("click", function() { - cards[i].classList.toggle("card_flipped"); - }); + cards[i].addEventListener("click", () => { + cards[i].classList.toggle("card_flipped"); + }); } -var card_i_style = document.createElement('style'); -card_i_style.type = 'text/css'; -document.getElementsByTagName('head')[0].appendChild(card_i_style); +var card_i_style = document.createElement("style"); +card_i_style.type = "text/css"; +document.getElementsByTagName("head")[0].appendChild(card_i_style); -var card_p_style = document.createElement('style'); -card_p_style.type = 'text/css'; -document.getElementsByTagName('head')[0].appendChild(card_p_style); +var card_p_style = document.createElement("style"); +card_p_style.type = "text/css"; +document.getElementsByTagName("head")[0].appendChild(card_p_style); // Functions for adding elements to the card function card_delete_items(card_selector) { - card_items = [] - document.querySelector(`${card_selector} .card_items`).replaceChildren(); - document.querySelector(`#dialog_card_menu_items`).replaceChildren(); + card_items = []; + document.querySelector(`${card_selector} .card_items`).replaceChildren(); + document.querySelector(`#dialog_card_menu_items`).replaceChildren(); } function card_create_text_item(card_selector, uuid, icon, text) { - let existing_selector = card_items.find(entry => entry.selector === card_selector); - if (existing_selector) { - existing_selector.items.push({"uuid": uuid, "text": text}); - } else { - card_items.push({selector: card_selector, items: [{"uuid": uuid, "text": text}]}); - existing_selector = {items: []}; - } + let existing_selector = card_items.find( + (entry) => entry.selector === card_selector, + ); + if (existing_selector) { + existing_selector.items.push({ uuid: uuid, text: text }); + } else { + card_items.push({ + selector: card_selector, + items: [{ uuid: uuid, text: text }], + }); + existing_selector = { items: [] }; + } - let div = document.createElement("div"); - div.classList.add("card_item_text"); - div.setAttribute("uuid", uuid) + const div = document.createElement("div"); + div.classList.add("card_item_text"); + div.setAttribute("uuid", uuid); - let icon_element = document.createElement("i"); - icon_element.className = `ph-bold ${icon}`; + const icon_element = document.createElement("i"); + icon_element.className = `ph-bold ${icon}`; - let text_element = document.createElement("p"); - text_element.innerText = text; + const text_element = document.createElement("p"); + text_element.innerText = text; - div.appendChild(icon_element); - div.appendChild(text_element); + div.appendChild(icon_element); + div.appendChild(text_element); - if (existing_selector.items.length <= 7) { - document.querySelector(`${card_selector} .card_items`).appendChild(div); + if (existing_selector.items.length <= 7) { + document.querySelector(`${card_selector} .card_items`).appendChild(div); + } else { + if (!document.querySelector("#dialog_card_menu_button")) { + const menu_button = document.createElement("button"); + menu_button.id = "dialog_card_menu_button"; + menu_button.innerHTML = ` View more items...`; - } else { - if (!(document.querySelector("#dialog_card_menu_button"))) { - let menu_button = document.createElement("button") - menu_button.id = "dialog_card_menu_button"; - menu_button.innerHTML = ` View more items...`; - - menu_button.addEventListener("click", (event) => { - event.stopPropagation(); - document.querySelector("#dialog_card_menu").showModal(); - }); - - document.querySelector(`${card_selector} .card_items`).appendChild(menu_button); - } - - document.querySelector(`#dialog_card_menu_items`).appendChild(div); + menu_button.addEventListener("click", (event) => { + event.stopPropagation(); + document.querySelector("#dialog_card_menu").showModal(); + }); + + document + .querySelector(`${card_selector} .card_items`) + .appendChild(menu_button); } + + document.querySelector(`#dialog_card_menu_items`).appendChild(div); + } } function card_create_link_item(card_selector, uuid, icon, text, url) { - let existing_selector = card_items.find(entry => entry.selector === card_selector); - if (existing_selector) { - existing_selector.items.push({"uuid": uuid, "text": text}); - } else { - card_items.push({selector: card_selector, items: [{"uuid": uuid, "text": text}]}); - existing_selector = {items: []}; - } + let existing_selector = card_items.find( + (entry) => entry.selector === card_selector, + ); + if (existing_selector) { + existing_selector.items.push({ uuid: uuid, text: text }); + } else { + card_items.push({ + selector: card_selector, + items: [{ uuid: uuid, text: text }], + }); + existing_selector = { items: [] }; + } - let div = document.createElement("div"); - div.classList.add("card_item_link"); - div.setAttribute("uuid", uuid) + const div = document.createElement("div"); + div.classList.add("card_item_link"); + div.setAttribute("uuid", uuid); - let icon_element = document.createElement("i"); - icon_element.className = `ph-bold ${icon}`; + const icon_element = document.createElement("i"); + icon_element.className = `ph-bold ${icon}`; - let button_element = document.createElement("button"); - button_element.innerText = text; + const button_element = document.createElement("button"); + button_element.innerText = text; - button_element.addEventListener("click", (event) => { - event.stopPropagation(); - window.location.href = url; - }) + button_element.addEventListener("click", (event) => { + event.stopPropagation(); + window.location.href = url; + }); - div.appendChild(icon_element); - div.appendChild(button_element); + div.appendChild(icon_element); + div.appendChild(button_element); - if (existing_selector.items.length <= 7) { - document.querySelector(`${card_selector} .card_items`).appendChild(div); + if (existing_selector.items.length <= 7) { + document.querySelector(`${card_selector} .card_items`).appendChild(div); + } else { + if (!document.querySelector("#dialog_card_menu_button")) { + const menu_button = document.createElement("button"); + menu_button.id = "dialog_card_menu_button"; + menu_button.innerHTML = ` View more items...`; - } else { - if (!(document.querySelector("#dialog_card_menu_button"))) { - let menu_button = document.createElement("button") - menu_button.id = "dialog_card_menu_button"; - menu_button.innerHTML = ` View more items...`; - - menu_button.addEventListener("click", (event) => { - event.stopPropagation(); - document.querySelector("#dialog_card_menu").showModal(); - }); - - document.querySelector(`${card_selector} .card_items`).appendChild(menu_button); - } - - document.querySelector(`#dialog_card_menu_items`).appendChild(div); + menu_button.addEventListener("click", (event) => { + event.stopPropagation(); + document.querySelector("#dialog_card_menu").showModal(); + }); + + document + .querySelector(`${card_selector} .card_items`) + .appendChild(menu_button); } + + document.querySelector(`#dialog_card_menu_items`).appendChild(div); + } } function card_set_colors(card_selector, background, accent, text) { - document.querySelector(`${card_selector} .card_card_front`).style.backgroundColor = background; - document.querySelector(`${card_selector} .card_card_back`).style.backgroundColor = background; - - card_i_style.innerHTML = `${card_selector} i { color: ${accent} }`; - card_p_style.innerHTML = `${card_selector} p { color: ${text} }`; + document.querySelector( + `${card_selector} .card_card_front`, + ).style.backgroundColor = background; + document.querySelector( + `${card_selector} .card_card_back`, + ).style.backgroundColor = background; + + card_i_style.innerHTML = `${card_selector} i { color: ${accent} }`; + card_p_style.innerHTML = `${card_selector} p { color: ${text} }`; } function card_render_from_json(card_selector, json) { - // Renders the contents of the card from the json - - json = JSON.parse(json); - card_delete_items(card_selector); - - document.querySelector(`${card_selector} .card_top_text_username`).innerText = json["details"]["primary"]; - document.querySelector(`${card_selector} .card_top_text_pronouns`).innerText = json["details"]["secondary"]; - - card_set_colors(card_selector, json["colors"]["background"], json["colors"]["accent"], json["colors"]["text"]) - card_set_layout(card_selector, json["layout"]); - card_set_font(card_selector, json["font_style"]); - - for (const item in json["information"]["items"]) { - if (json["information"]["items"][item]["url_enabled"]) { - card_create_link_item(card_selector, json["information"]["items"][item]["uuid"], json["information"]["items"][item]["icon"], json["information"]["items"][item]["text"], json["information"]["items"][item]["url"]); - - } else { - card_create_text_item(card_selector, json["information"]["items"][item]["uuid"], json["information"]["items"][item]["icon"], json["information"]["items"][item]["text"]); - } + // Renders the contents of the card from the json + + json = JSON.parse(json); + card_delete_items(card_selector); + + document.querySelector(`${card_selector} .card_top_text_username`).innerText = + json["details"]["primary"]; + document.querySelector(`${card_selector} .card_top_text_pronouns`).innerText = + json["details"]["secondary"]; + + card_set_colors( + card_selector, + json["colors"]["background"], + json["colors"]["accent"], + json["colors"]["text"], + ); + card_set_layout(card_selector, json["layout"]); + card_set_font(card_selector, json["font_style"]); + + for (const item in json["information"]["items"]) { + if (json["information"]["items"][item]["url_enabled"]) { + card_create_link_item( + card_selector, + json["information"]["items"][item]["uuid"], + json["information"]["items"][item]["icon"], + json["information"]["items"][item]["text"], + json["information"]["items"][item]["url"], + ); + } else { + card_create_text_item( + card_selector, + json["information"]["items"][item]["uuid"], + json["information"]["items"][item]["icon"], + json["information"]["items"][item]["text"], + ); } + } } function card_set_layout(card_selector, layout) { - // layout can be "left", "right", "center" - let card = document.querySelector(`${card_selector} .card_card_front`); - - if (layout == "left") { - card.setAttribute("card-align", "left"); - - } else if (layout == "right") { - card.setAttribute("card-align", "right"); - - } else if (layout == "center") { - card.setAttribute("card-align", "center") - - } else if (layout == "") { // Default value in databases - card.setAttribute("card-align", "left"); - - } else { - log("WARNING", "The card layout parameter is not an accepted value"); - } + // layout can be "left", "right", "center" + const card = document.querySelector(`${card_selector} .card_card_front`); + + if (layout == "left") { + card.setAttribute("card-align", "left"); + } else if (layout == "right") { + card.setAttribute("card-align", "right"); + } else if (layout == "center") { + card.setAttribute("card-align", "center"); + } else if (layout == "") { + // Default value in databases + card.setAttribute("card-align", "left"); + } else { + log("WARNING", "The card layout parameter is not an accepted value"); + } } function card_set_font(card_selector, name) { - let font_style = get_font_style(name); - load_font(font_style["header"]["name"], font_style["header"]["url"]); - load_font(font_style["text"]["name"], font_style["text"]["url"]); - - let primary_top = document.querySelector(`${card_selector} .card_top_text_username`); - let secondary_top = document.querySelector(`${card_selector} .card_top_text_pronouns`); - let items = document.querySelector(`${card_selector} .card_items`); - - primary_top.style.fontFamily = font_style["header"]["name"]; - secondary_top.style.fontFamily = font_style["text"]["name"]; - items.style.fontFamily = font_style["text"]["name"]; - - font_style = name; + let font_style = get_font_style(name); + load_font(font_style["header"]["name"], font_style["header"]["url"]); + load_font(font_style["text"]["name"], font_style["text"]["url"]); + + const primary_top = document.querySelector( + `${card_selector} .card_top_text_username`, + ); + const secondary_top = document.querySelector( + `${card_selector} .card_top_text_pronouns`, + ); + const items = document.querySelector(`${card_selector} .card_items`); + + primary_top.style.fontFamily = font_style["header"]["name"]; + secondary_top.style.fontFamily = font_style["text"]["name"]; + items.style.fontFamily = font_style["text"]["name"]; + + font_style = name; } for (let i = 0; i < cards.length; i++) { - let outer = cards[i], + const outer = cards[i], maxWidth = outer.clientWidth, maxHeight = outer.clientHeight; - window.addEventListener("resize", resize); + window.addEventListener("resize", resize); - resize(); + resize(); - function resize() { - let scale, - width = window.innerWidth, - height = window.innerHeight, - isMax = width >= maxWidth && height >= maxHeight; + function resize() { + let scale, + width = window.innerWidth, + height = window.innerHeight, + isMax = width >= maxWidth && height >= maxHeight; - scale = Math.min(width / maxWidth, height / maxHeight); - outer.style.transform = isMax ? '' : 'scale(' + scale + ')'; - } + scale = Math.min(width / maxWidth, height / maxHeight); + outer.style.transform = isMax ? "" : "scale(" + scale + ")"; + } } -window.addEventListener('setFontOnCard', (event) => { // Called when a font item is clicked in the editor - event.stopImmediatePropagation(); - const { header, text, style_name } = event.detail; - card_set_font(".card_card", style_name); - font_style = style_name; +window.addEventListener("setFontOnCard", (event) => { + // Called when a font item is clicked in the editor + event.stopImmediatePropagation(); + const { header, text, style_name } = event.detail; + card_set_font(".card_card", style_name); + font_style = style_name; }); -document.querySelector("#dialog_card_menu > .ui_dialog_generic_top > .ui_dialog_generic_top_close").addEventListener("click", (event) => { +document + .querySelector( + "#dialog_card_menu > .ui_dialog_generic_top > .ui_dialog_generic_top_close", + ) + .addEventListener("click", (event) => { document.querySelector("#dialog_card_menu").close(); -}); \ No newline at end of file + }); diff --git a/cardie/static/main/scripts/global/favicon.js b/cardie/static/main/scripts/global/favicon.js index cf3b4be..6ffd784 100644 --- a/cardie/static/main/scripts/global/favicon.js +++ b/cardie/static/main/scripts/global/favicon.js @@ -4,10 +4,10 @@ const favicon_light_url = window.__CONFIG__.favicon.light; const favicon_dark_url = window.__CONFIG__.favicon.dark; function createFavIconElement() { - const link = document.createElement("link"); - link.rel = "icon"; - document.head.appendChild(link); - return link; + const link = document.createElement("link"); + link.rel = "icon"; + document.head.appendChild(link); + return link; } /** * @@ -15,37 +15,37 @@ function createFavIconElement() { * @param {string} dark */ function handle_favicon(light, dark) { - /** - * @type {HTMLLinkElement} - */ - const iconElement = - document.querySelector("link[rel~='icon']") ?? createFavIconElement(); - - /** - * @param {boolean} isDark - * @returns {void} - * @description This function changes the favicon based on the color scheme - */ - function handleColorScheme(isDark) { - iconElement.href = isDark ? light : dark; - } - - /** - * @param {MediaQueryListEvent} event - * @returns {void} - * @description This function is called when the color scheme changes and passes the new color scheme in the event.matches property - */ - function colorSchemeListener(event) { - handleColorScheme(event.matches); - } - - const colorSchemaMediaQuery = window.matchMedia( - "(prefers-color-scheme: dark)", - ); - - colorSchemaMediaQuery.addEventListener("change", colorSchemeListener); - - handleColorScheme(colorSchemaMediaQuery.matches); + /** + * @type {HTMLLinkElement} + */ + const iconElement = + document.querySelector("link[rel~='icon']") ?? createFavIconElement(); + + /** + * @param {boolean} isDark + * @returns {void} + * @description This function changes the favicon based on the color scheme + */ + function handleColorScheme(isDark) { + iconElement.href = isDark ? light : dark; + } + + /** + * @param {MediaQueryListEvent} event + * @returns {void} + * @description This function is called when the color scheme changes and passes the new color scheme in the event.matches property + */ + function colorSchemeListener(event) { + handleColorScheme(event.matches); + } + + const colorSchemaMediaQuery = window.matchMedia( + "(prefers-color-scheme: dark)", + ); + + colorSchemaMediaQuery.addEventListener("change", colorSchemeListener); + + handleColorScheme(colorSchemaMediaQuery.matches); } handle_favicon(favicon_light_url, favicon_dark_url); diff --git a/cardie/static/main/scripts/global/font_styles.js b/cardie/static/main/scripts/global/font_styles.js index a74d5d8..cc017dd 100644 --- a/cardie/static/main/scripts/global/font_styles.js +++ b/cardie/static/main/scripts/global/font_styles.js @@ -1,57 +1,69 @@ // This file lists the available font styles to be used for cards // It will primarily contain the array of font style objects which can then be imported by the editor preview or cardview to allow the font to be changed -var font_styles = [ - {"name": "Simple", - "header": {"name": "Noto Sans", "url": "Noto Sans"}, - "text": {"name": "Noto Sans", "url": "Noto Sans"} +var font_styles = [ + { + name: "Simple", + header: { name: "Noto Sans", url: "Noto Sans" }, + text: { name: "Noto Sans", url: "Noto Sans" }, + }, + { + name: "Modern", + header: { + name: "Bebas Neue", + url: "https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap", }, - {"name": "Modern", - "header": {"name": "Bebas Neue", "url": "https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"}, - "text": {"name": "Noto Sans", "url": "Noto Sans"} + text: { name: "Noto Sans", url: "Noto Sans" }, + }, + { + name: "Fancy", + header: { + name: "Roboto Slab", + url: "https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap", }, - {"name": "Fancy", - "header": {"name": "Roboto Slab", "url": "https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"}, - "text": {"name": "EB Garamond", "url": "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap"} + text: { + name: "EB Garamond", + url: "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap", }, + }, ]; function get_font_style(name) { - return(font_styles.find(font => font.name == name)); + return font_styles.find((font) => font.name == name); } async function load_font(name, url) { - if (url.includes("https://") || url.includes("http://")) { - load_font_css(url); - log("INFO", `Loaded font ${name}`); - - } else { - log("INFO", `Not loading font ${name} because it doesn't have a web url.`); - } - + if (url.includes("https://") || url.includes("http://")) { + load_font_css(url); + log("INFO", `Loaded font ${name}`); + } else { + log("INFO", `Not loading font ${name} because it doesn't have a web url.`); + } } async function load_font_css(url) { - let cssId = url; - if (!document.getElementById(cssId)) { - let link = document.createElement('link'); - link.id = cssId; - link.rel = 'stylesheet'; - link.type = 'text/css'; - link.href = url; - link.media = 'all'; - document.getElementsByTagName('head')[0].appendChild(link); - } + const cssId = url; + if (!document.getElementById(cssId)) { + const link = document.createElement("link"); + link.id = cssId; + link.rel = "stylesheet"; + link.type = "text/css"; + link.href = url; + link.media = "all"; + document.getElementsByTagName("head")[0].appendChild(link); + } } document.addEventListener("DOMContentLoaded", (event) => { - window.dispatchEvent(new CustomEvent('sendFontStyles', { - detail: { font_styles } - })); + window.dispatchEvent( + new CustomEvent("sendFontStyles", { + detail: { font_styles }, + }), + ); }); -window.addEventListener('loadFont', (event) => { - event.stopImmediatePropagation(); - const { font_name, font_url } = event.detail; - load_font(font_name, font_url); -}); \ No newline at end of file +window.addEventListener("loadFont", (event) => { + event.stopImmediatePropagation(); + const { font_name, font_url } = event.detail; + load_font(font_name, font_url); +}); diff --git a/cardie/static/main/scripts/global/logging.js b/cardie/static/main/scripts/global/logging.js index e24a0ff..6e77220 100644 --- a/cardie/static/main/scripts/global/logging.js +++ b/cardie/static/main/scripts/global/logging.js @@ -3,53 +3,53 @@ var LOG_LEVEL = "DEBUG"; function log_level_to_number(level) { - if (level == "DEBUG") { - return 1; - - } else if (level == "INFO") { - return 2; - - } else if (level == "WARNING") { - return 3; - - } else if (level == "CRITICAL") { - return 4; - - } else { - return 0; - } + if (level == "DEBUG") { + return 1; + } else if (level == "INFO") { + return 2; + } else if (level == "WARNING") { + return 3; + } else if (level == "CRITICAL") { + return 4; + } else { + return 0; + } } function log_date() { - const options = { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, "timeZone": "EST" }; - var now = new Date; - var string = now.toLocaleTimeString("en-us", options); - return string; + const options = { + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + hour12: false, + timeZone: "EST", + }; + var now = new Date(); + var string = now.toLocaleTimeString("en-us", options); + return string; } function log(level, text) { - let log_level = log_level_to_number(level); - let allowed_log_level = log_level_to_number(LOG_LEVEL); - let date = log_date(); - - if (log_level >= allowed_log_level) { - if (log_level == 0) { - console.log(`%c[${date}] ${text}`, "color: #a1a1a1; font-style: italic;"); - - } else if (log_level == 1) { - console.debug(`%c[${date}] ${text}`, "color: #ffffff;"); - - } else if (log_level == 2) { - console.info(`%c[${date}] ${text}`, "color: #7fb5ff;"); - - } else if (log_level == 3) { - console.warn(`%c[${date}] ${text}`, "color: #ffa371; font-weight: bold;"); - - } else if (log_level == 4) { - console.error(`%c[${date}] ${text}`, "color: #ff7878; font-weight: bold;"); - - } - } else { - null; + const log_level = log_level_to_number(level); + const allowed_log_level = log_level_to_number(LOG_LEVEL); + const date = log_date(); + + if (log_level >= allowed_log_level) { + if (log_level == 0) { + console.log(`%c[${date}] ${text}`, "color: #a1a1a1; font-style: italic;"); + } else if (log_level == 1) { + console.debug(`%c[${date}] ${text}`, "color: #ffffff;"); + } else if (log_level == 2) { + console.info(`%c[${date}] ${text}`, "color: #7fb5ff;"); + } else if (log_level == 3) { + console.warn(`%c[${date}] ${text}`, "color: #ffa371; font-weight: bold;"); + } else if (log_level == 4) { + console.error( + `%c[${date}] ${text}`, + "color: #ff7878; font-weight: bold;", + ); } -} \ No newline at end of file + } else { + null; + } +} diff --git a/cardie/static/main/scripts/global/notifications.js b/cardie/static/main/scripts/global/notifications.js index f26bd26..6c1120a 100644 --- a/cardie/static/main/scripts/global/notifications.js +++ b/cardie/static/main/scripts/global/notifications.js @@ -1,42 +1,42 @@ -let notification_box = document.createElement("div"); +const notification_box = document.createElement("div"); notification_box.classList.add("notifications"); document.body.appendChild(notification_box); function create_notification(header, body, icon) { - let notification = document.createElement("div"); - notification.classList.add("notification"); - - let notification_icon = document.createElement("i"); - notification_icon.className = `ph-bold ph-${icon} notification_icon`; + const notification = document.createElement("div"); + notification.classList.add("notification"); - let notification_text = document.createElement("div"); - notification_text.classList.add("notification_text") + const notification_icon = document.createElement("i"); + notification_icon.className = `ph-bold ph-${icon} notification_icon`; - let notification_header = document.createElement("p"); - notification_header.classList.add("notification_header"); - notification_header.innerText = header; + const notification_text = document.createElement("div"); + notification_text.classList.add("notification_text"); - let notification_body = document.createElement("p"); - notification_body.classList.add("notification_body"); - notification_body.innerText = body; + const notification_header = document.createElement("p"); + notification_header.classList.add("notification_header"); + notification_header.innerText = header; - notification_text.appendChild(notification_header); - notification_text.appendChild(notification_body); + const notification_body = document.createElement("p"); + notification_body.classList.add("notification_body"); + notification_body.innerText = body; - notification.appendChild(notification_icon); - notification.appendChild(notification_text); + notification_text.appendChild(notification_header); + notification_text.appendChild(notification_body); - document.querySelector(".notifications").appendChild(notification); + notification.appendChild(notification_icon); + notification.appendChild(notification_text); - setTimeout(function() { - notification.classList.add("show"); - }, 100) + document.querySelector(".notifications").appendChild(notification); - setTimeout(function() { - notification.classList.remove("show"); + setTimeout(() => { + notification.classList.add("show"); + }, 100); - setTimeout(function() { - notification.remove(); - }, 300); - }, 5000); -} \ No newline at end of file + setTimeout(() => { + notification.classList.remove("show"); + + setTimeout(() => { + notification.remove(); + }, 300); + }, 5000); +} diff --git a/cardie/static/main/scripts/home/home.js b/cardie/static/main/scripts/home/home.js index aaceeaf..a497dca 100644 --- a/cardie/static/main/scripts/home/home.js +++ b/cardie/static/main/scripts/home/home.js @@ -1,354 +1,438 @@ - function home_card_edit(event) { - let uuid = event.target.closest(".home_card").querySelector(":scope > .home_card_text > .home_card_text_uuid").innerText; - window.location.href = server_ip + "/editor" + `?uuid=${uuid}&`; + const uuid = event.target + .closest(".home_card") + .querySelector(":scope > .home_card_text > .home_card_text_uuid").innerText; + window.location.href = server_ip + "/editor" + `?uuid=${uuid}&`; } var open_home_card_uuid; var open_home_card_target; function home_card_menu(event) { - let home_card = event.target.closest(".home_card"); - - if (home_card.getAttribute("open") == "false") { - home_card.style.position = "relative"; - home_card.style.zIndex = "3"; - home_card.style.scale = "1.05"; - show_background_blur(); - home_card.querySelector(".home_card_menu_button > i").className = "ph-bold ph-x-circle"; - home_card.setAttribute("open", true); - - document.querySelector("#home_card_menu").style.display = "flex"; - - const rect = home_card.getBoundingClientRect(); - document.querySelector("#home_card_menu").style.top = `${rect.bottom + 10}px`; - document.querySelector("#home_card_menu").style.left = `${rect.right - document.querySelector("#home_card_menu").offsetWidth}px`; - - setTimeout(function() { - document.querySelector("#home_card_menu").classList.add("show"); - }, 50); - - open_home_card_uuid = home_card.querySelector(".home_card_text_uuid").innerText; - open_home_card_target = home_card; - - } else { - home_card.querySelector(".home_card_menu_button > i").className = "ph-bold ph-dots-three"; - home_card.style.scale = "1"; - document.querySelector("#home_card_menu").classList.remove("show"); - hide_background_blur(); - - setTimeout(function() { - home_card.style.zIndex = "1"; - home_card.setAttribute("open", "false"); - document.querySelector("#home_card_menu").style.display = "none"; - }, 500); - } - + const home_card = event.target.closest(".home_card"); + + if (home_card.getAttribute("open") == "false") { + home_card.style.position = "relative"; + home_card.style.zIndex = "3"; + home_card.style.scale = "1.05"; + show_background_blur(); + home_card.querySelector(".home_card_menu_button > i").className = + "ph-bold ph-x-circle"; + home_card.setAttribute("open", true); + + document.querySelector("#home_card_menu").style.display = "flex"; + + const rect = home_card.getBoundingClientRect(); + document.querySelector("#home_card_menu").style.top = + `${rect.bottom + 10}px`; + document.querySelector("#home_card_menu").style.left = + `${rect.right - document.querySelector("#home_card_menu").offsetWidth}px`; + + setTimeout(() => { + document.querySelector("#home_card_menu").classList.add("show"); + }, 50); + + open_home_card_uuid = home_card.querySelector( + ".home_card_text_uuid", + ).innerText; + open_home_card_target = home_card; + } else { + home_card.querySelector(".home_card_menu_button > i").className = + "ph-bold ph-dots-three"; + home_card.style.scale = "1"; + document.querySelector("#home_card_menu").classList.remove("show"); + hide_background_blur(); + + setTimeout(() => { + home_card.style.zIndex = "1"; + home_card.setAttribute("open", "false"); + document.querySelector("#home_card_menu").style.display = "none"; + }, 500); + } } function create_home_card(uuid, name) { - let div = document.createElement("div"); - div.classList.add("home_card"); + const div = document.createElement("div"); + div.classList.add("home_card"); - let edit_button = document.createElement("button"); - edit_button.classList.add("ui_button_icon"); - edit_button.classList.add("home_card_edit_button") + const edit_button = document.createElement("button"); + edit_button.classList.add("ui_button_icon"); + edit_button.classList.add("home_card_edit_button"); - let edit_button_icon = document.createElement("i"); - edit_button_icon.className = "ph-bold ph-pencil-simple-line"; + const edit_button_icon = document.createElement("i"); + edit_button_icon.className = "ph-bold ph-pencil-simple-line"; - edit_button.appendChild(edit_button_icon); - edit_button.addEventListener("click", (event) => home_card_edit(event)); + edit_button.appendChild(edit_button_icon); + edit_button.addEventListener("click", (event) => home_card_edit(event)); - let menu_button = document.createElement("button"); - menu_button.classList.add("ui_button_icon"); - menu_button.classList.add("home_card_menu_button") + const menu_button = document.createElement("button"); + menu_button.classList.add("ui_button_icon"); + menu_button.classList.add("home_card_menu_button"); - let menu_button_icon = document.createElement("i"); - menu_button_icon.className = "ph-bold ph-dots-three"; + const menu_button_icon = document.createElement("i"); + menu_button_icon.className = "ph-bold ph-dots-three"; - menu_button.appendChild(menu_button_icon); - menu_button.addEventListener("click", (event) => home_card_menu(event)); + menu_button.appendChild(menu_button_icon); + menu_button.addEventListener("click", (event) => home_card_menu(event)); - let text_div = document.createElement("div"); - text_div.classList.add("home_card_text"); + const text_div = document.createElement("div"); + text_div.classList.add("home_card_text"); - let text_name = document.createElement("p"); - text_name.classList.add("home_card_text_name"); - text_name.innerText = name; + const text_name = document.createElement("p"); + text_name.classList.add("home_card_text_name"); + text_name.innerText = name; - let text_uuid = document.createElement("p"); - text_uuid.classList.add("home_card_text_uuid"); - text_uuid.innerText = uuid; + const text_uuid = document.createElement("p"); + text_uuid.classList.add("home_card_text_uuid"); + text_uuid.innerText = uuid; - text_div.appendChild(text_name); - text_div.appendChild(text_uuid); + text_div.appendChild(text_name); + text_div.appendChild(text_uuid); - div.appendChild(text_div); - div.appendChild(edit_button); - div.appendChild(menu_button); + div.appendChild(text_div); + div.appendChild(edit_button); + div.appendChild(menu_button); - div.setAttribute("open", false); + div.setAttribute("open", false); - document.querySelector("#home-cards").appendChild(div); + document.querySelector("#home-cards").appendChild(div); } function create_wallet_card(uuid, name) { - let div = document.createElement("div"); - div.classList.add("home_card"); + const div = document.createElement("div"); + div.classList.add("home_card"); - let view_button = document.createElement("button"); - view_button.classList.add("ui_button_icon"); - view_button.classList.add("home_wallet_view_button") + const view_button = document.createElement("button"); + view_button.classList.add("ui_button_icon"); + view_button.classList.add("home_wallet_view_button"); - let view_button_icon = document.createElement("i"); - view_button_icon.className = "ph-bold ph-arrow-circle-right"; + const view_button_icon = document.createElement("i"); + view_button_icon.className = "ph-bold ph-arrow-circle-right"; - view_button.appendChild(view_button_icon); - view_button.addEventListener("click", (event) => home_wallet_view(event)); + view_button.appendChild(view_button_icon); + view_button.addEventListener("click", (event) => home_wallet_view(event)); - let remove_button = document.createElement("button"); - remove_button.classList.add("ui_button_icon"); - remove_button.classList.add("home_wallet_remove_button") + const remove_button = document.createElement("button"); + remove_button.classList.add("ui_button_icon"); + remove_button.classList.add("home_wallet_remove_button"); - let remove_button_icon = document.createElement("i"); - remove_button_icon.className = "ph-bold ph-trash"; + const remove_button_icon = document.createElement("i"); + remove_button_icon.className = "ph-bold ph-trash"; - remove_button.appendChild(remove_button_icon); - remove_button.addEventListener("click", (event) => home_wallet_remove(event)); + remove_button.appendChild(remove_button_icon); + remove_button.addEventListener("click", (event) => home_wallet_remove(event)); - let text_div = document.createElement("div"); - text_div.classList.add("home_card_text"); + const text_div = document.createElement("div"); + text_div.classList.add("home_card_text"); - let text_name = document.createElement("p"); - text_name.classList.add("home_card_text_name"); - text_name.innerText = name; + const text_name = document.createElement("p"); + text_name.classList.add("home_card_text_name"); + text_name.innerText = name; - let text_uuid = document.createElement("p"); - text_uuid.classList.add("home_card_text_uuid"); - text_uuid.innerText = uuid; + const text_uuid = document.createElement("p"); + text_uuid.classList.add("home_card_text_uuid"); + text_uuid.innerText = uuid; - text_div.appendChild(text_name); - text_div.appendChild(text_uuid); + text_div.appendChild(text_name); + text_div.appendChild(text_uuid); - div.appendChild(text_div); - div.appendChild(view_button); - div.appendChild(remove_button); + div.appendChild(text_div); + div.appendChild(view_button); + div.appendChild(remove_button); - div.setAttribute("open", false); + div.setAttribute("open", false); - document.querySelector("#home-wallet").appendChild(div); + document.querySelector("#home-wallet").appendChild(div); } function home_wallet_view(event) { - let uuid = event.target.closest(".home_card").querySelector(":scope > .home_card_text > .home_card_text_uuid").innerText; - window.location.href = server_ip + "/card" + `?uuid=${uuid}&from_wallet=true`; + const uuid = event.target + .closest(".home_card") + .querySelector(":scope > .home_card_text > .home_card_text_uuid").innerText; + window.location.href = server_ip + "/card" + `?uuid=${uuid}&from_wallet=true`; } async function home_wallet_remove(event) { - const response = await fetch(server_ip + "/removefromwallet", { - method: "POST", - headers: { - "uuid": event.target.closest(".home_card").querySelector(":scope > .home_card_text > .home_card_text_uuid").innerText - } - }); - - response.text().then(function (text) { - if (text == "Request is not a POST request") { - create_notification("There was a problem removing that card from your wallet", text, "warning"); - log("WARNING", text); - - } else if (text == "Not signed in") { - create_notification("There was a problem removing that card from your wallet", text, "warning"); - log("WARNING", text); - - } else if (text == "Success") { - create_notification("Card removed from wallet", "The card has been removed from your wallet", "check-circle"); - window.location.reload(); - - } else { - create_notification("There was a problem removing that card from your wallet", "There was an unknown issue", "warning"); - log("WARNING", "There was an unknown issue: " + text); - } - }); + const response = await fetch(server_ip + "/removefromwallet", { + method: "POST", + headers: { + uuid: event.target + .closest(".home_card") + .querySelector(":scope > .home_card_text > .home_card_text_uuid") + .innerText, + }, + }); + + response.text().then((text) => { + if (text == "Request is not a POST request") { + create_notification( + "There was a problem removing that card from your wallet", + text, + "warning", + ); + log("WARNING", text); + } else if (text == "Not signed in") { + create_notification( + "There was a problem removing that card from your wallet", + text, + "warning", + ); + log("WARNING", text); + } else if (text == "Success") { + create_notification( + "Card removed from wallet", + "The card has been removed from your wallet", + "check-circle", + ); + window.location.reload(); + } else { + create_notification( + "There was a problem removing that card from your wallet", + "There was an unknown issue", + "warning", + ); + log("WARNING", "There was an unknown issue: " + text); + } + }); } async function list_cards() { - const response = await fetch(server_ip + "/listcards", { - method: "POST", - headers: { - "Username": username, - } - }); - - response.text().then(function (text) { - if (text == "Request is not a POST request") { - create_notification("There was a problem listing your cards", text, "warning"); - return false; - - } else { - text = JSON.parse(text); - for (const card in text) { - create_home_card(text[card]["uuid"], text[card]["name"]); - } - } - }); + const response = await fetch(server_ip + "/listcards", { + method: "POST", + headers: { + Username: username, + }, + }); + + response.text().then((text) => { + if (text == "Request is not a POST request") { + create_notification( + "There was a problem listing your cards", + text, + "warning", + ); + return false; + } else { + text = JSON.parse(text); + for (const card in text) { + create_home_card(text[card]["uuid"], text[card]["name"]); + } + } + }); } async function log_out() { - const response = await fetch(server_ip + "/logout", { - method: "POST", - }); - - response.text().then(function (text) { - if (text == "Request is not a POST request") { - create_notification("There was a problem logging out", text, "warning"); - return false; - - } else { - window.location.href = server_ip + "/authentication"; - } - }); + const response = await fetch(server_ip + "/logout", { + method: "POST", + }); + + response.text().then((text) => { + if (text == "Request is not a POST request") { + create_notification("There was a problem logging out", text, "warning"); + return false; + } else { + window.location.href = server_ip + "/authentication"; + } + }); } function create_new_card() { - window.location.href = server_ip + "/editor"; + window.location.href = server_ip + "/editor"; } async function get_wallet() { - const response = await fetch(server_ip + "/getwallet", { - method: "POST", - }); + const response = await fetch(server_ip + "/getwallet", { + method: "POST", + }); + + response.text().then((text) => { + if (text == "Request is not a POST request") { + log("WARNING", text); + create_notification( + "There was a problem getting your wallet", + text, + "warning", + ); + return false; + } else if (text == "Not signed in") { + log("WARNING", "You're not signed in!"); + window.location.href = `${server_ip}/authentication`; + } else { + text = JSON.parse(text); - response.text().then(function (text) { - if (text == "Request is not a POST request") { - log("WARNING", text); - create_notification("There was a problem getting your wallet", text, "warning"); - return false; - - } else if (text == "Not signed in") { - log("WARNING", "You're not signed in!"); - window.location.href = `${server_ip}/authentication`; - - } else { - text = JSON.parse(text); - - if (!text.length == 0) { - document.querySelector("#home_wallet_nocards").style.display = "none"; - } - - for (const card in text) { - create_wallet_card(text[card]["uuid"], text[card]["name"]); - } - } - }); + if (!text.length == 0) { + document.querySelector("#home_wallet_nocards").style.display = "none"; + } + + for (const card in text) { + create_wallet_card(text[card]["uuid"], text[card]["name"]); + } + } + }); } document.querySelector("#home-top-image").addEventListener("click", (event) => { - window.location.href = server_ip; + window.location.href = server_ip; }); document.querySelector("#home_menu_edit").addEventListener("click", (event) => { - window.location.href = `${server_ip}/editor?uuid=${open_home_card_uuid}&`; + window.location.href = `${server_ip}/editor?uuid=${open_home_card_uuid}&`; }); -document.querySelector("#home_menu_rename").addEventListener("click", (event) => { - document.querySelector("#dialog_home_rename_input").value = open_home_card_target.querySelector(".home_card_text > .home_card_text_name").innerText; +document + .querySelector("#home_menu_rename") + .addEventListener("click", (event) => { + document.querySelector("#dialog_home_rename_input").value = + open_home_card_target.querySelector( + ".home_card_text > .home_card_text_name", + ).innerText; document.querySelector("#dialog_home_rename").showModal(); -}); + }); -document.querySelector("#dialog_home_rename > .ui_dialog_generic_top > .ui_dialog_generic_top_close").addEventListener("click", (event) => { +document + .querySelector( + "#dialog_home_rename > .ui_dialog_generic_top > .ui_dialog_generic_top_close", + ) + .addEventListener("click", (event) => { document.querySelector("#dialog_home_rename").close(); -}); + }); -document.querySelector("#dialog_home_rename_submit").addEventListener("click", async (event) => { +document + .querySelector("#dialog_home_rename_submit") + .addEventListener("click", async (event) => { const response = await fetch(server_ip + "/renamecard", { - method: "POST", - headers: { - "uuid": open_home_card_uuid, - "name": document.querySelector("#dialog_home_rename_input").value - } + method: "POST", + headers: { + uuid: open_home_card_uuid, + name: document.querySelector("#dialog_home_rename_input").value, + }, }); - response.text().then(function (text) { - if (text == "Request is not a POST request") { - create_notification("There was a problem renaming your card", text, "warning"); - log("WARNING", text) - - } else if (text == "Missing headers") { - create_notification("There was a problem renaming your card", text, "warning"); - log("WARNING", text); - - } else if (text == "Card not found") { - create_notification("There was a problem renaming your card", text, "warning"); - log("WARNING", text); - - } else if (text == "Success") { - create_notification("Card deleted", "Your card has been renaming", "check-circle"); - log("INFO", "Card renamed"); - window.location.reload(); - - } else { - create_notification("There was a problem", "There was an unknown problem renaming your card", "warning"); - log("WARNING", "There was an unknown problem renaming the card"); - } + response.text().then((text) => { + if (text == "Request is not a POST request") { + create_notification( + "There was a problem renaming your card", + text, + "warning", + ); + log("WARNING", text); + } else if (text == "Missing headers") { + create_notification( + "There was a problem renaming your card", + text, + "warning", + ); + log("WARNING", text); + } else if (text == "Card not found") { + create_notification( + "There was a problem renaming your card", + text, + "warning", + ); + log("WARNING", text); + } else if (text == "Success") { + create_notification( + "Card deleted", + "Your card has been renaming", + "check-circle", + ); + log("INFO", "Card renamed"); + window.location.reload(); + } else { + create_notification( + "There was a problem", + "There was an unknown problem renaming your card", + "warning", + ); + log("WARNING", "There was an unknown problem renaming the card"); + } }); -}); - -document.querySelector("#home_menu_copylink").addEventListener("click", async (event) => { - await navigator.clipboard.writeText(`${server_ip}/card?uuid=${open_home_card_uuid}&`).then(() => { + }); + +document + .querySelector("#home_menu_copylink") + .addEventListener("click", async (event) => { + await navigator.clipboard + .writeText(`${server_ip}/card?uuid=${open_home_card_uuid}&`) + .then(() => { event.target.closest(".ui_button_small").style.color = "#5dca63"; - setInterval( () => { - event.target.closest(".ui_button_small").style.color = "#ffffff"; + setInterval(() => { + event.target.closest(".ui_button_small").style.color = "#ffffff"; }, 1000); - }); -}); + }); + }); -document.querySelector("#home_menu_delete").addEventListener("click", (event) => { +document + .querySelector("#home_menu_delete") + .addEventListener("click", (event) => { document.querySelector("#dialog_home_delete").showModal(); -}); + }); -document.querySelector("#dialog_home_delete > .ui_dialog_generic_top > .ui_dialog_generic_top_close").addEventListener("click", (event) => { +document + .querySelector( + "#dialog_home_delete > .ui_dialog_generic_top > .ui_dialog_generic_top_close", + ) + .addEventListener("click", (event) => { document.querySelector("#dialog_home_delete").close(); -}); + }); -document.querySelector("#dialog_home_delete_cancel").addEventListener("click", (event) => { +document + .querySelector("#dialog_home_delete_cancel") + .addEventListener("click", (event) => { document.querySelector("#dialog_home_delete").close(); -}); + }); -document.querySelector("#dialog_home_delete_delete").addEventListener("click", async (event) => { +document + .querySelector("#dialog_home_delete_delete") + .addEventListener("click", async (event) => { const response = await fetch(server_ip + "/deletecard", { - method: "POST", - headers: { - "uuid": open_home_card_uuid - } + method: "POST", + headers: { + uuid: open_home_card_uuid, + }, }); - response.text().then(function (text) { - if (text == "Request is not a POST request") { - create_notification("There was a problem deleting your card", text, "warning"); - log("WARNING", text) - - } else if (text == "Missing headers") { - create_notification("There was a problem deleting your card", text, "warning"); - log("WARNING", text); - - } else if (text == "Card not found") { - create_notification("There was a problem deleting your card", text, "warning"); - log("WARNING", text); - - } else if (text == "Success") { - create_notification("Card deleted", "Your card has been deleted", "check-circle"); - log("INFO", "Card deleted"); - window.location.reload(); - - } else { - create_notification("There was a problem", "There was an unknown problem deleting your card", "warning"); - log("WARNING", "There was an unknown problem deleting the card"); - } + response.text().then((text) => { + if (text == "Request is not a POST request") { + create_notification( + "There was a problem deleting your card", + text, + "warning", + ); + log("WARNING", text); + } else if (text == "Missing headers") { + create_notification( + "There was a problem deleting your card", + text, + "warning", + ); + log("WARNING", text); + } else if (text == "Card not found") { + create_notification( + "There was a problem deleting your card", + text, + "warning", + ); + log("WARNING", text); + } else if (text == "Success") { + create_notification( + "Card deleted", + "Your card has been deleted", + "check-circle", + ); + log("INFO", "Card deleted"); + window.location.reload(); + } else { + create_notification( + "There was a problem", + "There was an unknown problem deleting your card", + "warning", + ); + log("WARNING", "There was an unknown problem deleting the card"); + } }); -}); + }); list_cards(); -get_wallet(); \ No newline at end of file +get_wallet(); diff --git a/cardie/static/main/scripts/index/index.js b/cardie/static/main/scripts/index/index.js index 33a1221..cfc5a15 100644 --- a/cardie/static/main/scripts/index/index.js +++ b/cardie/static/main/scripts/index/index.js @@ -1,31 +1,39 @@ - -document.querySelector("#welcome_box_buttons_signin").addEventListener("click", function() { +document + .querySelector("#welcome_box_buttons_signin") + .addEventListener("click", () => { window.location.href = server_ip + "/authentication"; -}); + }); -document.querySelector("#welcome_box_buttons_sourcecode").addEventListener("click", function() { +document + .querySelector("#welcome_box_buttons_sourcecode") + .addEventListener("click", () => { window.location.href = "https://github.com/nfoert/cardie"; -}); + }); -document.querySelector("#welcome_box_buttons_demo").addEventListener("click", function() { +document + .querySelector("#welcome_box_buttons_demo") + .addEventListener("click", () => { window.location.href = server_ip + "/editor?demo=True&"; -}); + }); -document.querySelector("#index_top_account_signin").addEventListener("click", (event) => { +document + .querySelector("#index_top_account_signin") + .addEventListener("click", (event) => { window.location.href = `${server_ip}/authentication`; -}); + }); -document.querySelector("#index_top_account_home").addEventListener("click", (event) => { +document + .querySelector("#index_top_account_home") + .addEventListener("click", (event) => { window.location.href = `${server_ip}/home`; - -}); + }); if (username) { - document.querySelector("#index_top_account_signin").style.display = "none"; - document.querySelector("#index_top_account_home").innerHTML = ` ${username}`; - document.querySelector("#index_top_account_home").style.display = "block"; - + document.querySelector("#index_top_account_signin").style.display = "none"; + document.querySelector("#index_top_account_home").innerHTML = + ` ${username}`; + document.querySelector("#index_top_account_home").style.display = "block"; } else { - document.querySelector("#index_top_account_signin").style.display = "block"; - document.querySelector("#index_top_account_home").style.display = "none"; -} \ No newline at end of file + document.querySelector("#index_top_account_signin").style.display = "block"; + document.querySelector("#index_top_account_home").style.display = "none"; +} diff --git a/cardie/static/main/ui.css b/cardie/static/main/ui.css index 486c6c3..6858978 100644 --- a/cardie/static/main/ui.css +++ b/cardie/static/main/ui.css @@ -1,4 +1,4 @@ -/* +/* ui.css Handles styles for every common user interface element Quick references for every element class name is below @@ -48,591 +48,580 @@ /* Buttons */ .ui_button_large { - background-color: var(--default-glass-background); - color: var(--default-text-color); - border-radius: 100px; - border: var(--default-glass-border); - transition: var(--default-transition); - font-size: clamp(1.6vh, 16px, 1.6vw); - font-family: var(--default-font-family); + background-color: var(--default-glass-background); + color: var(--default-text-color); + border-radius: 100px; + border: var(--default-glass-border); + transition: var(--default-transition); + font-size: clamp(1.6vh, 16px, 1.6vw); + font-family: var(--default-font-family); - backdrop-filter: var(--default-glass-blur); + backdrop-filter: var(--default-glass-blur); - padding: clamp(1vh, 10px, 1vw); - padding-left: clamp(3vh, 30px, 3vw); - padding-right: clamp(3vh, 30px, 3vw); - margin-left: clamp(1vh, 10px, 1vw); - margin-right: clamp(1vh, 10px, 1vw); - margin-top: clamp(0.5vh, 5px, 0.5vw); - margin-bottom: clamp(0.5vh, 5px, 0.5vw); + padding: clamp(1vh, 10px, 1vw); + padding-left: clamp(3vh, 30px, 3vw); + padding-right: clamp(3vh, 30px, 3vw); + margin-left: clamp(1vh, 10px, 1vw); + margin-right: clamp(1vh, 10px, 1vw); + margin-top: clamp(0.5vh, 5px, 0.5vw); + margin-bottom: clamp(0.5vh, 5px, 0.5vw); - width: fit-content; + width: fit-content; - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_button_large:hover:enabled { - scale: 1.05; - cursor: pointer; + scale: 1.05; } .ui_button_large:active:enabled { - scale: 0.95; + scale: 0.95; } .ui_button_large:disabled { - scale: 0.9; - opacity: 0.7; + scale: 0.9; + opacity: 0.7; } .ui_button_grid { - background-color: var(--default-glass-background); - color: var(--default-text-color); - border-radius: 10px; - border: var(--default-glass-border); - transition: var(--default-transition); - font-size: clamp(1.6vh, 16px, 1.6vw); - font-family: var(--default-font-family); + background-color: var(--default-glass-background); + color: var(--default-text-color); + border-radius: 10px; + border: var(--default-glass-border); + transition: var(--default-transition); + font-size: clamp(1.6vh, 16px, 1.6vw); + font-family: var(--default-font-family); - backdrop-filter: var(--default-glass-blur); + backdrop-filter: var(--default-glass-blur); - padding: clamp(1vh, 10px, 1vw); - padding-left: clamp(3vh, 30px, 3vw); - padding-right: clamp(3vh, 30px, 3vw); - margin-left: clamp(1vh, 10px, 1vw); - margin-right: clamp(1vh, 10px, 1vw); - margin-top: clamp(0.5vh, 5px, 0.5vw); - margin-bottom: clamp(0.5vh, 5px, 0.5vw); + padding: clamp(1vh, 10px, 1vw); + padding-left: clamp(3vh, 30px, 3vw); + padding-right: clamp(3vh, 30px, 3vw); + margin-left: clamp(1vh, 10px, 1vw); + margin-right: clamp(1vh, 10px, 1vw); + margin-top: clamp(0.5vh, 5px, 0.5vw); + margin-bottom: clamp(0.5vh, 5px, 0.5vw); - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_button_grid:hover:enabled { - scale: 1.05; - cursor: pointer; + scale: 1.05; } .ui_button_grid:active:enabled { - scale: 0.95; + scale: 0.95; } .ui_button_grid:disabled { - scale: 0.9; - opacity: 0.7; + scale: 0.9; + opacity: 0.7; } .ui_button_icon { - background-color: var(--default-glass-background); - color: var(--default-text-color); - border-radius: 100px; - border: var(--default-glass-border); - transition: var(--default-transition); - font-size: clamp(2.2vh, 22px, 2.2vw); - font-family: var(--default-font-family); + background-color: var(--default-glass-background); + color: var(--default-text-color); + border-radius: 100px; + border: var(--default-glass-border); + transition: var(--default-transition); + font-size: clamp(2.2vh, 22px, 2.2vw); + font-family: var(--default-font-family); - backdrop-filter: var(--default-glass-blur); + backdrop-filter: var(--default-glass-blur); - padding: clamp(1vh, 10px, 1vw); - margin-left: clamp(1vh, 10px, 1vw); - margin-right: clamp(1vh, 10px, 1vw); + padding: clamp(1vh, 10px, 1vw); + margin-left: clamp(1vh, 10px, 1vw); + margin-right: clamp(1vh, 10px, 1vw); - width: clamp(4.5vh, 45px, 4.5vw); - height: clamp(4.5vh, 45px, 4.5vw); + width: clamp(4.5vh, 45px, 4.5vw); + height: clamp(4.5vh, 45px, 4.5vw); - aspect-ratio: 1; + aspect-ratio: 1; - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_button_icon:hover:enabled { - scale: 1.1; - cursor: pointer; + scale: 1.1; } .ui_button_icon:active:enabled { - scale: 0.9; + scale: 0.9; } .ui_button_icon:disabled { - scale: 0.9; - opacity: 0.7; + scale: 0.9; + opacity: 0.7; } .ui_button_smallicon { - background-color: var(--default-glass-background); - color: var(--default-text-color); - border-radius: 100px; - border: var(--default-glass-border); - transition: var(--default-transition); - font-size: clamp(1.5vh, 15px, 1.5vw); - font-family: var(--default-font-family); + background-color: var(--default-glass-background); + color: var(--default-text-color); + border-radius: 100px; + border: var(--default-glass-border); + transition: var(--default-transition); + font-size: clamp(1.5vh, 15px, 1.5vw); + font-family: var(--default-font-family); - backdrop-filter: var(--default-glass-blur); + backdrop-filter: var(--default-glass-blur); - padding: clamp(0.2vh, 2px, 0.2vw); - margin-left: clamp(0.5vh, 5px, 0.5vw); - margin-right: clamp(0.5vh, 5px, 0.5vw); + padding: clamp(0.2vh, 2px, 0.2vw); + margin-left: clamp(0.5vh, 5px, 0.5vw); + margin-right: clamp(0.5vh, 5px, 0.5vw); - margin-top: auto; - margin-bottom: auto; + margin-top: auto; + margin-bottom: auto; - aspect-ratio: 1; - width: clamp(3.5vh, 35px, 3.5vw); - height: clamp(3.5vh, 35px, 3.5vw); + aspect-ratio: 1; + width: clamp(3.5vh, 35px, 3.5vw); + height: clamp(3.5vh, 35px, 3.5vw); - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_button_smallicon:hover:enabled { - scale: 1.05; - cursor: pointer; + scale: 1.05; } .ui_button_smallicon:active:enabled { - scale: 0.95; + scale: 0.95; } .ui_button_smallicon:disabled { - scale: 0.95; - opacity: 0.7; + scale: 0.95; + opacity: 0.7; } .ui_button_small { - background-color: var(--default-glass-background); - color: var(--default-text-color); - border-radius: 100px; - border: var(--default-glass-border); - transition: var(--default-transition); - font-size: clamp(1.4vh, 14px, 1.4vw); - font-family: var(--default-font-family); + background-color: var(--default-glass-background); + color: var(--default-text-color); + border-radius: 100px; + border: var(--default-glass-border); + transition: var(--default-transition); + font-size: clamp(1.4vh, 14px, 1.4vw); + font-family: var(--default-font-family); - backdrop-filter: var(--default-glass-blur); + backdrop-filter: var(--default-glass-blur); - padding: clamp(0.5vh, 5px, 0.5vw); - padding-left: clamp(1.5vh, 15px, 1.5vw); - padding-right: clamp(1.5vh, 15px, 1.5vw); - margin-left: clamp(1vh, 10px, 1vw); - margin-right: clamp(1vh, 10px, 1vw); - margin-top: clamp(0.5vh, 5px, 0.5vw); - margin-bottom: clamp(0.5vh, 5px, 0.5vw); + padding: clamp(0.5vh, 5px, 0.5vw); + padding-left: clamp(1.5vh, 15px, 1.5vw); + padding-right: clamp(1.5vh, 15px, 1.5vw); + margin-left: clamp(1vh, 10px, 1vw); + margin-right: clamp(1vh, 10px, 1vw); + margin-top: clamp(0.5vh, 5px, 0.5vw); + margin-bottom: clamp(0.5vh, 5px, 0.5vw); - white-space: nowrap; + white-space: nowrap; - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_button_small:hover:enabled { - scale: 1.05; - cursor: pointer; + scale: 1.05; } .ui_button_small:active:enabled { - scale: 0.95; + scale: 0.95; } .ui_button_small:disabled { - scale: 0.9; - opacity: 0.7; + scale: 0.9; + opacity: 0.7; } - /* Text */ .ui_text_header { - font-family: var(--default-font-family); - color: var(--default-text-color); - font-size: clamp(3vh, 30px, 3vw); - padding: 0px; - margin: clamp(1vh, 10px, 1vw); - text-align: center; + font-family: var(--default-font-family); + color: var(--default-text-color); + font-size: clamp(3vh, 30px, 3vw); + padding: 0px; + margin: clamp(1vh, 10px, 1vw); + text-align: center; - font-weight: 700; + font-weight: 700; } .ui_text_header_left { - font-family: var(--default-font-family); - color: var(--default-text-color); - font-size: clamp(3vh, 30px, 3vw); - padding: 0px; - margin: clamp(1vh, 10px, 1vw); - text-align: left; + font-family: var(--default-font-family); + color: var(--default-text-color); + font-size: clamp(3vh, 30px, 3vw); + padding: 0px; + margin: clamp(1vh, 10px, 1vw); + text-align: left; - font-weight: 700; + font-weight: 700; } .ui_text_subheader { - font-family: var(--default-font-family); - color: var(--default-text-color); - font-size: clamp(2.4vh, 24px, 2.4vw); - padding: 0px; - margin: 0px; - text-align: center; + font-family: var(--default-font-family); + color: var(--default-text-color); + font-size: clamp(2.4vh, 24px, 2.4vw); + padding: 0px; + margin: 0px; + text-align: center; - font-weight: 500; + font-weight: 500; } .ui_text_subheader_left { - font-family: var(--default-font-family); - color: var(--default-text-color); - font-size: clamp(2.4vh, 24px, 2.4vw); - padding: 0px; - margin: 0px; - text-align: left; + font-family: var(--default-font-family); + color: var(--default-text-color); + font-size: clamp(2.4vh, 24px, 2.4vw); + padding: 0px; + margin: 0px; + text-align: left; - font-weight: 500; + font-weight: 500; } .ui_text_smallersubheader { - font-family: var(--default-font-family); - color: var(--default-text-color); - font-size: clamp(1.8vh, 18px, 1.8vw); - padding: 0px; - margin: 0px; - text-align: center; + font-family: var(--default-font-family); + color: var(--default-text-color); + font-size: clamp(1.8vh, 18px, 1.8vw); + padding: 0px; + margin: 0px; + text-align: center; - font-weight: 500; + font-weight: 500; } .ui_text_body { - font-family: var(--default-font-family); - color: var(--default-text-color); - font-size: clamp(1.6vh, 16px, 1.6vw); - padding: 0px; - margin: 0px; - text-align: left; + font-family: var(--default-font-family); + color: var(--default-text-color); + font-size: clamp(1.6vh, 16px, 1.6vw); + padding: 0px; + margin: 0px; + text-align: left; } .ui_text_description { - font-family: var(--default-font-family); - color: var(--default-text-color); - font-size: clamp(1.2vh, 12px, 1.2vw); - padding: 0px; - margin: 0px; - text-align: left; + font-family: var(--default-font-family); + color: var(--default-text-color); + font-size: clamp(1.2vh, 12px, 1.2vw); + padding: 0px; + margin: 0px; + text-align: left; - opacity: 0.8; + opacity: 0.8; } - /* Image */ .ui_image_generic { - border-radius: 10px; - border: rgba(141, 141, 141, 0.8) 2px solid; - transition: var(--default-transition); - backdrop-filter: blur(20px); + border-radius: 10px; + border: rgba(141, 141, 141, 0.8) 2px solid; + transition: var(--default-transition); + backdrop-filter: blur(20px); - opacity: 0.8; + opacity: 0.8; - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_image_generic:hover { - opacity: 1; + opacity: 1; } - /* Status Boxes */ .ui_status_info { - background-color: rgba(57, 72, 112, 0.5); - border: rgb(57, 72, 112) 2px solid; - border-radius: 10px; - backdrop-filter: blur(20px); + background-color: rgba(57, 72, 112, 0.5); + border: rgb(57, 72, 112) 2px solid; + border-radius: 10px; + backdrop-filter: blur(20px); - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; - padding: clamp(1vh, 10px, 1vw); - margin: clamp(1vh, 10px, 1vw); + padding: clamp(1vh, 10px, 1vw); + margin: clamp(1vh, 10px, 1vw); - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_status_warning { - background-color: rgba(112, 93, 57, 0.5); - border: rgb(112, 93, 57) 2px solid; - border-radius: 10px; - backdrop-filter: blur(20px); + background-color: rgba(112, 93, 57, 0.5); + border: rgb(112, 93, 57) 2px solid; + border-radius: 10px; + backdrop-filter: blur(20px); - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; - padding: clamp(1vh, 10px, 1vw); - margin: clamp(1vh, 10px, 1vw); + padding: clamp(1vh, 10px, 1vw); + margin: clamp(1vh, 10px, 1vw); - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_status_critical { - background-color: rgba(112, 57, 57, 0.5); - border: rgb(112, 57, 57) 2px solid; - border-radius: 10px; - backdrop-filter: blur(20px); + background-color: rgba(112, 57, 57, 0.5); + border: rgb(112, 57, 57) 2px solid; + border-radius: 10px; + backdrop-filter: blur(20px); - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; - padding: clamp(1vh, 10px, 1vw); - margin: clamp(1vh, 10px, 1vw); + padding: clamp(1vh, 10px, 1vw); + margin: clamp(1vh, 10px, 1vw); - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_status_text { - transition: var(--default-transition); - font-family: var(--default-font-family); - color: var(--default-text-color); - font-size: clamp(1.6vh, 16px, 1.6vw); - padding: 0px; - margin: 0px; - text-align: left; + transition: var(--default-transition); + font-family: var(--default-font-family); + color: var(--default-text-color); + font-size: clamp(1.6vh, 16px, 1.6vw); + padding: 0px; + margin: 0px; + text-align: left; - opacity: 0.8; - margin-left: clamp(1vh, 10px, 1vw); + opacity: 0.8; + margin-left: clamp(1vh, 10px, 1vw); } .ui_status_text:hover { - opacity: 1; - scale: 1.05; + opacity: 1; + scale: 1.05; } .ui_status_icon { - color: white; + color: white; - opacity: 0.8; + opacity: 0.8; } - /* Text Areas */ .ui_input_generic { - background-color: var(--default-glass-background); - color: var(--default-text-color); - border-radius: 10px; - border: var(--default-glass-border); - transition: var(--default-transition); - font-size: clamp(1.6vh, 16px, 1.6vw); - font-family: var(--default-font-family); - box-sizing: border-box; + background-color: var(--default-glass-background); + color: var(--default-text-color); + border-radius: 10px; + border: var(--default-glass-border); + transition: var(--default-transition); + font-size: clamp(1.6vh, 16px, 1.6vw); + font-family: var(--default-font-family); + box-sizing: border-box; - backdrop-filter: var(--default-glass-blur); + backdrop-filter: var(--default-glass-blur); - padding: clamp(0.5vh, 5px, 0.5vw); - margin: clamp(0.5vh, 5px, 0.5vw); + padding: clamp(0.5vh, 5px, 0.5vw); + margin: clamp(0.5vh, 5px, 0.5vw); - opacity: 0.8; - scale: 1; - outline: none; - flex-grow: 2; + opacity: 0.8; + scale: 1; + outline: none; + flex-grow: 2; - width: 100%; + width: 100%; - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_input_generic::placeholder { - color: var(--default-text-color); + color: var(--default-text-color); } .ui_input_generic:hover { - opacity: 1; - scale: 1.05; + opacity: 1; + scale: 1.05; } - /* Spacers */ .ui_spacer { - height: clamp(2vh, 20px, 2vw); + height: clamp(2vh, 20px, 2vw); } - /* Separators */ .ui_separator_vertical { - width: clamp(0.3vh, 3px, 0.3vw); - height: 100%; + width: clamp(0.3vh, 3px, 0.3vw); + height: 100%; - margin-top: clamp(1vh, 10px, 1vw); - margin-bottom: clamp(1vh, 10px, 1vw); + margin-top: clamp(1vh, 10px, 1vw); + margin-bottom: clamp(1vh, 10px, 1vw); - background-color: var(--default-glass-background); - border-radius: 10px; - border: var(--default-glass-border); + background-color: var(--default-glass-background); + border-radius: 10px; + border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); + backdrop-filter: var(--default-glass-blur); - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } .ui_separator_horizontal { - height: clamp(0.3vh, 3px, 0.3vw); - /* TODO: Technically this works for now but it should be fixed properly later */ - width: 85%; + height: clamp(0.3vh, 3px, 0.3vw); + /* TODO: Technically this works for now but it should be fixed properly later */ + width: 85%; - margin-left: clamp(1vh, 10px, 1vw); - margin-right: clamp(1vh, 10px, 1vw); + margin-left: clamp(1vh, 10px, 1vw); + margin-right: clamp(1vh, 10px, 1vw); - background-color: var(--default-glass-background); - border-radius: 10px; - border: var(--default-glass-border); + background-color: var(--default-glass-background); + border-radius: 10px; + border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); + backdrop-filter: var(--default-glass-blur); - -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); - box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75); } /* Background Blur */ .background_blur { - position: fixed; - top: 0px; - left: 0px; + position: fixed; + top: 0px; + left: 0px; - width: 100%; - height: 100%; + width: 100%; + height: 100%; - z-index: 2; - background-color: rgba(47, 47, 47, 0.524); - backdrop-filter: blur(20px); + z-index: 2; + background-color: rgba(47, 47, 47, 0.524); + backdrop-filter: blur(20px); - display: none; /* Keep hidden until needed */ - transition: var(--default-transition); + display: none; /* Keep hidden until needed */ + transition: var(--default-transition); - /* Starting properties for animation */ - opacity: 0; + /* Starting properties for animation */ + opacity: 0; } .background_blur.show { - opacity: 1; + opacity: 1; } /* Dialog */ @media (min-width: 1000px) { - /* Large screens */ + /* Large screens */ - .ui_dialog_generic { - opacity: 0; - scale: 0.9; - transition: var(--default-transition); - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - border-radius: 20px; - padding: clamp(2vh, 20px, 2vw); + .ui_dialog_generic { + opacity: 0; + scale: 0.9; + transition: var(--default-transition); + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + border-radius: 20px; + padding: clamp(2vh, 20px, 2vw); - width: max-content; - overflow-x: hidden; - max-width: 80vw; - } + width: max-content; + overflow-x: hidden; + max-width: 80vw; + } } @media (max-width: 1000px) { - /* Small Screens */ + /* Small Screens */ - .ui_dialog_generic { - opacity: 0; - scale: 0.9; - transition: var(--default-transition); - background-color: var(--default-glass-background); - border: var(--default-glass-border); - backdrop-filter: var(--default-glass-blur); - padding: clamp(2vh, 20px, 2vw); - border-radius: 20px; + .ui_dialog_generic { + opacity: 0; + scale: 0.9; + transition: var(--default-transition); + background-color: var(--default-glass-background); + border: var(--default-glass-border); + backdrop-filter: var(--default-glass-blur); + padding: clamp(2vh, 20px, 2vw); + border-radius: 20px; - width: 100%; - overflow-x: hidden; - height: max-content; - max-height: 80%; - } + width: 100%; + overflow-x: hidden; + height: max-content; + max-height: 80%; + } } .ui_dialog_generic[open] { - opacity: 1; - scale: 1; + opacity: 1; + scale: 1; } @starting-style { - .ui_dialog_generic[open] { - opacity: 0; - scale: 0.9; - } + .ui_dialog_generic[open] { + opacity: 0; + scale: 0.9; + } } .ui_dialog_generic::backdrop { - background-color: rgba(47, 47, 47, 0); - backdrop-filter: blur(0px); - transition: all 0.7s allow-discrete; + background-color: rgba(47, 47, 47, 0); + backdrop-filter: blur(0px); + transition: all 0.7s allow-discrete; } .ui_dialog_generic[open]::backdrop { - background-color: rgba(47, 47, 47, 0.2); - backdrop-filter: blur(20px); + background-color: rgba(47, 47, 47, 0.2); + backdrop-filter: blur(20px); } @starting-style { - .ui_dialog_generic[open]::backdrop { - background-color: rgba(47, 47, 47, 0); - backdrop-filter: blur(0px); - } + .ui_dialog_generic[open]::backdrop { + background-color: rgba(47, 47, 47, 0); + backdrop-filter: blur(0px); + } } .ui_dialog_generic_top { - display: flex; - flex-direction: row; - align-items: center; - width: auto; - margin-bottom: clamp(1vh, 10px, 1vw); - justify-content: space-between; + display: flex; + flex-direction: row; + align-items: center; + width: auto; + margin-bottom: clamp(1vh, 10px, 1vw); + justify-content: space-between; } .ui_dialog_generic_top_text { - margin-right: clamp(2vh, 20px, 2vw); + margin-right: clamp(2vh, 20px, 2vw); } /* Links */ .ui_link_generic { - color: var(--default-text-color); - font-family: var(--default-font-family); - font-size: clamp(1.6vh, 16px, 1.6vw); - transition: var(--default-transition); + color: var(--default-text-color); + font-family: var(--default-font-family); + font-size: clamp(1.6vh, 16px, 1.6vw); + transition: var(--default-transition); - text-decoration: none; - opacity: 0.8; + text-decoration: none; + opacity: 0.8; - margin-left: clamp(1vh, 10px, 1vw); - margin-right: clamp(1vh, 10px, 1vw); + margin-left: clamp(1vh, 10px, 1vw); + margin-right: clamp(1vh, 10px, 1vw); } .ui_link_generic:hover { - opacity: 1; - scale: 1.05; + opacity: 1; + scale: 1.05; } .ui_link_generic:active { - opacity: 0.9; - scale: 0.95; + opacity: 0.9; + scale: 0.95; } .ui_link_generic:visited { - color: var(--default-text-color); - text-decoration: none; + color: var(--default-text-color); + text-decoration: none; } diff --git a/cardie/static/main/variables.css b/cardie/static/main/variables.css index 53852d5..3bd5ca5 100644 --- a/cardie/static/main/variables.css +++ b/cardie/static/main/variables.css @@ -1,17 +1,16 @@ :root { - background: rgb(37, 40, 49); - --default-background-color: #35374B; - --default-font-family: "Noto Sans", sans-serif; - --default-transition: 0.3s ease; - --default-text-color: white; + background: rgb(37, 40, 49); + --default-background-color: #35374b; + --default-font-family: "Noto Sans", sans-serif; + --default-transition: 0.3s ease; + --default-text-color: white; - --color-primary: #35374B; - --color-secondary: #344955; - --color-tertiary: #50727B; - --color-quaternary: #78A083; + --color-primary: #35374b; + --color-secondary: #344955; + --color-tertiary: #50727b; + --color-quaternary: #78a083; - --default-glass-background: rgba(180, 180, 180, 0.4); - --default-glass-border: rgba(167, 167, 167, 0.5) 2px solid; - --default-glass-blur: blur(20px); - -} \ No newline at end of file + --default-glass-background: rgba(180, 180, 180, 0.4); + --default-glass-border: rgba(167, 167, 167, 0.5) 2px solid; + --default-glass-blur: blur(20px); +}