diff --git a/css/style-9.css b/css/style-9.css
index eddc2db9..980c7f4e 100644
--- a/css/style-9.css
+++ b/css/style-9.css
@@ -1,909 +1,933 @@
-/*fonts*/
-@font-face {
- font-family: gothammedium;
- src: url("../fonts/gotham-medium.ttf") format('truetype');
-}
-@font-face {
- font-family: belerenb;
- src: url("../fonts/beleren-b.ttf") format('truetype');
-}
-@font-face {
- font-family: belerenbsc;
- src: url("../fonts/beleren-bsc.ttf") format('truetype');
-}
-@font-face {
- font-family: matrix;
- src: url("../fonts/matrix.ttf") format('truetype');
-}
-@font-face {
- font-family: matrixb;
- src: url("../fonts/matrix-b.ttf") format('truetype');
-}
-@font-face {
- font-family: matrixbsc;
- src: url("../fonts/Matrix Bold Small Caps.ttf") format('truetype');
-}
-@font-face {
- font-family: mplantin;
- src: url("../fonts/mplantin.ttf") format('truetype');
-}
-@font-face {
- font-family: mplantini;
- src: url("../fonts/mplantin-i.ttf") format('truetype');
-}
-@font-face {
- font-family: plantinsemibold;
- src: url("../fonts/plantin-semibold.otf") format('opentype');
-}
-@font-face {
- font-family: plantinsemibolditalic;
- src: url("../fonts/Plantin-SemiboldItalic.otf") format('opentype');
-}
-@font-face {
- font-family: goudymedieval;
- src: url("../fonts/goudy-medieval.ttf") format('truetype');
-}
-@font-face {
- font-family: phyrexianold;
- src: url("../fonts/phyrexian.ttf") format('truetype');
-}
-@font-face {
- font-family: phyrexian;
- src: url("../fonts/phy.woff2") format("woff2");
-}
-@font-face {
- font-family: Montserrat-SemiBold;
- src: url("../fonts/Montserrat-SemiBold.ttf") format('truetype');
-}
-@font-face {
- font-family: Montserrat-Medium;
- src: url("../fonts/Montserrat-Medium.ttf") format('truetype');
-}
-@font-face {
- font-family: Acme-Regular;
- src: url("../fonts/Acme-Regular.ttf") format('truetype');
-}
-@font-face {
- font-family: fritz-quadrata;
- src: url("../fonts/fritz-quadrata.ttf") format('truetype');
-}
-@font-face {
- font-family: japanese-title;
- src: url("../fonts/NudMotoyaExAporo_W6.ttf") format('truetype');
-}
-@font-face {
- font-family: japanese;
- src: url('../fonts/2012c863631ba71f874aba70590795a1.otf') format('opentype');
-}
-@font-face {
- font-family: invocation;
- src: url('../fonts/Invocation.ttf') format('truetype');
-}
-@font-face {
- font-family: invocation-text;
- src: url('../fonts/shango-gothic-bold.ttf') format('truetype');
-}
-@font-face {
- font-family: souvenir;
- src: url('../fonts/Souvenir-Itc-T-OT-Bold.otf') format('opentype');
-}
-@font-face {
- font-family: palatino;
- src: url('../fonts/Palatino Font.ttf') format('truetype');
-}
-@font-face {
- font-family: amanda;
- src: url('../fonts/Amanda Std Regular.otf') format('opentype');
-}
-@font-face {
- font-family: gillsans;
- src: url('../fonts/Gill Sans Medium.otf') format('opentype');
-}
-@font-face {
- font-family: gillsansbold;
- src: url('../fonts/Gill Sans Condensed Bold.otf') format('opentype');
-}
-@font-face {
- font-family: gillsansitalic;
- src: url('../fonts/Gill Sans Medium Italic') format('opentype');
-}
-@font-face {
- font-family: gillsansbolditalic;
- src: url('../fonts/Gill Sans Bold Italic.otf') format('opentype');
-}
-@font-face {
- font-family: specialelite;
- src: url('../fonts/SpecialElite-Regular.ttf') format('truetype');
-}
-@font-face {
- font-family: neosans;
- src: url('../fonts/NeoSansProRegular.OTF') format('opentype');
-}
-@font-face {
- font-family: neosansitalic;
- src: url('../fonts/NeoSansProItalic.OTF') format('opentype');
-}
-@font-face {
- font-family: ocra;
- src: url('../fonts/OCR A Std Regular.ttf') format('truetype');
-}
-/*Variables*/
-:root {
- --site-background: url('../img/lowpolyBackground.svg');
- --color-primary: #35603E;
- --color-selected: #ae9;
- --color-highlight: #8f8;
- --font-color: #fff;
- --font-color-2: #bbb;
- --input-background: #333;
- --input-background-selected: #555;
- --darkened-backdrop-filter: grayscale(1) brightness(0.3);
- --regular-backdrop-filter: none;
- --window-diagonal-size: 400px;
-}
-/*Main Site Elements*/
-.background {
- position: fixed;
- z-index: -1;
- width: 100vw;
- height: 100vh;
- background: var(--site-background);
- background-repeat: no-repeat;
- background-attachment: fixed;
- background-size: cover;
- background-position: center;
- filter: var(--regular-backdrop-filter);
-}
-html {
- font-size: 12pt;
- overflow-x: hidden;
- background: #151515;
- color: var(--font-color);
-}
-body {
- width: 100vw;
- overflow-x: hidden;
-}
-header, footer, .main-content {
- overflow-x: hidden;
-}
-header, footer {
- backdrop-filter: var(--darkened-backdrop-filter);
- -webkit-backdrop-filter: var(--darkened-backdrop-filter);
-}
-header {
- padding: 2rem 0;
-}
-.header-extension {
- padding-bottom: 2rem;
-}
-footer {
- padding: 2rem;
- display: grid;
- grid-template-columns: calc(1fr - 4rem);
- grid-gap: 1rem;
-}
-@media only screen and (min-width: 750px) {
- footer {
- grid-template-columns: repeat(3, 1fr);
- }
-}
-footer > div > * {
- margin: 1rem 0;
-}
-/*Viewport*/
-img {
- max-width: 100%;
-}
-/*Scrollbar Mod*/
-::-webkit-scrollbar {
- width: 0.5rem;
- height: 0;
- background: #222;
-}
-::-webkit-scrollbar-thumb {
- background: #888;
- border-radius: 0.25rem;
-}
-/*Fonts*/
-.title {
- font-family: belerenbsc;
-}
-h1.title {
- font-size: 4rem;
-}
-.shadow {
- text-shadow: 0.2rem 0.2rem 0.5rem black;
-}
-h1 {
- font-size: 3rem;
- font-family: Montserrat-SemiBold, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
- overflow-wrap: break-word;
-}
-h2 {
- font-size: 2.5rem;
- font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
- overflow-wrap: break-word;
-}
-h3 {
- font-size: 2rem;
- font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
- overflow-wrap: break-word;
-}
-h4 {
- font-size: 1.5rem;
- font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
- overflow-wrap: break-word;
-}
-h5 {
- font-size: 1.25rem;
- font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
- overflow-wrap: break-word;
-}
-p {
- font-size: 1rem;
- font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
- overflow-wrap: break-word;
-}
-a {
- color: inherit;
- text-decoration: inherit;
- overflow-wrap: break-word;
-}
-a:hover {
- text-decoration: underline;
-}
-a.underline {
- text-decoration: underline;
-}
-::selection {
- color: var(--font-color);
- background: var(--color-highlight);
-}
-::moz-selection {
- color: var(--font-color);
- background: var(--color-highlight);;
-}
-/*General styles*/
-.hidden {
- display: none;
-}
-.fake-hidden {
- opacity: 0;
- position: absolute;
- top: -100%;
- left: -100%;
-}
-.margin-bottom {
- margin-bottom: 0.5rem;
-}
-.margin-bottom-large {
- margin-bottom: 2rem;
-}
-.margin-bottom-larger {
- margin-bottom: 3rem;
-}
-.margin-top {
- margin-top: 0.5rem;
-}
-.padding {
- padding: 0.5rem;
-}
-.readable-background {
- backdrop-filter: var(--darkened-backdrop-filter);
- -webkit-backdrop-filter: var(--darkened-backdrop-filter);
-}
-.box-shadow {
- box-shadow: 0 2px 8px #0008;
-}
-.split-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-gap: 0.5rem;
-}
-.center {
- text-align: center;
-}
-.layer {
- padding: 0.5rem;
-}
-.vertical-center {
- margin: auto;
-}
-@media only screen and (min-width: 750px) {
- .layer {
- padding: 4rem;
- }
-}
-/*Hamburger*/
-.hamburger {
- position: fixed;
- right: 0rem;
- top: 0rem;
- width: 4rem;
- height: 4rem;
- fill-rule: evenodd;
- clip-rule: evenodd;
- stroke-linejoin: round;
- stroke-miterlimit: 1.5;
- cursor: pointer;
- z-index: 100;
- background: var(--color-primary);
- border-radius: 0 0 0 0.5rem;
-}
-.hamburger > path {
- fill: none;
- stroke: white;
- stroke-width: 8px;
- transition: 0.5s;
-}
-.line1, .line3 {
- stroke-dasharray: 80 183;
- stroke-dashoffset: 0;
-}
-.line2 {
- stroke-dasharray: 80 80;
- stroke-dashoffset: 0;
-}
-.opened > .line1, .opened > .line3 {
- stroke-dasharray: 103 183;
- stroke-dashoffset: -80;
-}
-.opened > .line2 {
- stroke-dasharray: 0 60;
- stroke-dashoffset: -40;
-}
-.circle {
- z-index: 5;
- position: fixed;
- right: 0;
- top: 0;
- padding: 0;
- background: var(--color-primary);
- border-radius: 100%;
- transition: 0.333s ease;
-}
-.hamburger:hover + .circle {
- /*padding: 3rem;
- right: -1rem;
- top: -1rem;*/
-}
-.hamburger.opened + .circle {
- padding: var(--window-diagonal-size);
- right: calc(0px - var(--window-diagonal-size));
- top: calc(0px - var(--window-diagonal-size));
- transition: 0.75s cubic-bezier(.53,.47,.76,-0.52);
-}
-/*Menus*/
-.menu {
- position: fixed;
- z-index: 10;
- bottom: 200vh;
- left: 0;
- width: 100vw;
- height: 100vh;
- overflow-y: scroll;
- transition: 0.5s;
- text-align: center;
-}
-.menu.menu-visible {
- bottom: 0;
- transition-delay: 0.667s;
-}
-.menu > div {
- display: inline-block;
- margin: 0 auto;
- text-align: left;
-}
-/*Main (Nav) Menu*/
-.main-menu {
- padding: 2rem;
- line-height: 3rem;
-}
-.main-menu > h2 {
- margin-top: 4rem;
-}
-/*notifications*/
-.notification-container {
- position: fixed;
- z-index: 10;
- bottom: 0;
- left: 1.5rem;
- width: calc(100vw - 3rem);
- max-height: 75vh;
- overflow-y: scroll;
- transition: 0.5s;
-}
-.notification {
- border-top: 0.25rem solid var(--color-selected);
- background: var(--input-background);
- display: grid;
- grid-template-columns: auto 2rem;
- transition: 0.5s;
-}
-.notification > h3 {
- text-align: center;
- user-select: none;
- cursor: pointer;
-}
-.notification.hidden {
- opacity: 0;
-}
-/*Inputs*/
-.input {
- box-sizing: border-box;
- width: 100%;
- background: var(--input-background);
- color: inherit;
- font-size: 1.25rem;
- font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
- font-weight: 100;
- border-width: 0.25rem 0 0 0;
- border-style: solid;
- border-color: #0000;
- padding: 0 0.25rem 0.25rem 0.25rem;
- transition: 0.5s;
-}
-.input:hover {
- box-shadow: 0 0px 16px black;
- transition: 0.05s;
-}
-.input:focus {
- outline: none;
-}
-.input:active {
- border-color: var(--color-selected);
-}
-.input:disabled {
- opacity: 0.5;
-}
-.input:disabled:hover {
- box-shadow: none;
-}
-.input-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
- grid-gap: 0.5rem;
-}
-.input-description {
- color: var(--font-color-2);
- font-style: italic;
-}
-input[type=checkbox].input {
- /*nothing for now*/
-}
-.input:not([type=text]):not([type=number]):not([type=url]) {
- cursor: pointer;
-}
-textarea.input {
- cursor: text !important;
- resize: vertical;
- box-sizing: border-box;
- min-height: 10rem;
- max-height: 20rem;
- transition: height 0s;
-}
-/*Checkboxes*/
-.checkbox-container {
- display: block;
- position: relative;
- padding-left: 2.25rem;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-.checkbox-container input {
- position: absolute;
- opacity: 0;
- cursor: pointer;
- height: 0;
- width: 0;
-}
-.checkmark {
- position: absolute;
- top: 0;
- left: 0.25rem;
- height: 1.5rem;
- width: 1.5rem;
- border-radius: 0.25rem;
- background-color: #efefef;
-}
-.checkbox-container input:checked ~ .checkmark {
- background-color: var(--color-selected);
-}
-.checkmark:after {
- content: "";
- position: absolute;
- display: none;
-}
-.checkbox-container input:checked ~ .checkmark:after {
- display: block;
-}
-.checkbox-container .checkmark:after {
- left: 0.5rem;
- top: 0.25rem;
- width: 0.25rem;
- height: 0.75rem;
- border: solid var(--color-primary);
- border-width: 0 0.25rem 0.25rem 0;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-/*Collapsible*/
-.collapsible {
- cursor: pointer;
- user-select: none;
-}
-.collapsible:after {
- content: '';
- border: solid white;
- border-width: 0 0.15em 0.15em 0;
- display: inline-block;
- padding: 0.15em;
- transform: rotate(-135deg) translate(-0.2em, 0.2em);
- -webkit-transform: rotate(-135deg) translate(-0.2em, 0.2em);
-}
-.collapsible.collapsed:after {
- transform: rotate(45deg) translate(0, -0.3em);
- -webkit-transform: rotate(45deg) translate(0, -0.3em);
-}
-.collapsed + div {
- display: none;
-}
-/*Videos*/
-.video {
- position: relative;
- padding-bottom: 56.25%;
- padding-top: 30px;
- height: 0;
- overflow: hidden;
-}
-.video iframe, .video object, .video embed, .video video {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-/*drop to upload*/
-.drop-area {
- border: 0.125rem dashed gray;
- transition: 0.25s;
-}
-.drop-area.hover {
- border-color: var(--color-selected);
-}
-
-
-/*Animated cards*/
-.animated-scene {
- perspective: 100rem;
-}
-.animated-card-1 {
- animation: animatedcardone 3s ease-in-out 0s alternate infinite;
- -moz-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
- -webkit-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
- -o-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
- transform-style: preserve-3d;
-}
-.animation-delay-2 {
- animation-delay: 1s !important;
-}
-.animation-delay-4 {
- animation-delay: 2s !important;
-}
-@keyframes animatedcardone {
- 0% {transform: rotateY(15deg);}
- 100% {transform: rotateY(-15deg);}
-}
-
-
-
-
-/*Home Page only*/
-.sample-grid {
- display: grid;
- grid-gap: 1rem;
- grid-template-columns: 1fr;
-}
-.sample-grid > img {
- display: block;
- max-width: 375px;
- width: 100%;
- height: auto;
- margin: 1rem auto;
-}
-@media only screen and (min-width: 750px) {
- .sample-grid {
- grid-template-columns: 375px auto;
- }
- .sample-grid.right {
- grid-template-columns: auto 375px;
- }
-}
-
-
-
-
-/*Tutorial Page only*/
-.tutorial-grid {
- display: grid;
- grid-gap: 1rem;
- grid-template-columns: 1fr;
-}
-.tutorial-grid > img {
- display: block;
- width: 100%;
- height: auto;
- margin: 1rem auto;
-}
-.readable-background > .tutorial-grid > img {
- border: 0.1rem solid gray;
-}
-@media only screen and (min-width: 750px) {
- .tutorial-grid {
- grid-template-columns: 1fr 1fr;
- }
-}
-
-
-
-/*Creator related only*/
-/*Creator Grid/Canvas/Menu*/
-.creator-grid {
- width: 100%;
- display: grid;
- grid-template-columns: 1fr;
- justify-items: center;
- grid-gap: 1rem;
- padding: 1rem 0;
-}
-.creator-canvas {
- max-width: 750px;
- width: 100vw;
- height: auto;
- /*backdrop-filter: hue-rotate(80deg);*/
-}
-.creator-menu {
- width: 100%;
-}
-@media only screen and (min-width: 1250px) {
- .creator-grid {
- grid-template-columns: 750px auto;
- padding: 1rem;
- justify-items: left;
- }
- .creator-menu {
- width: calc(100% - 2rem);
- }
- .creator-canvas {
- border-radius: 37.5px;
- }
-}
-/*Creator Menu Tabs*/
-.creator-menu-tabs {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
- grid-gap: 0.5rem;
- margin-bottom: 0.5rem;
-}
-/*Selectables*/
-.selectable {
- text-align: center;
- user-select: none;
- padding: 1rem;
- padding-top: 0.9rem;
- border-top: 0.1rem;
- border-style: solid;
- border-color: #0000;
- transition: 0.5s;
- cursor: pointer;
-}
-.selectable.selected {
- padding-top: 0.5rem;
- border-top: 0.5rem;
- border-style: solid;
- border-color: var(--color-selected);
- transition: 0.5s !important;
-}
-.selectable:hover {
- box-shadow: 0 0px 16px black;
- transition: 0.05s;
-}
-/*Draggables*/
-.draggable {
- background: var(--input-background);
- touch-action: none;
-}
-.dragging {
- box-shadow: 0 0px 16px black;
- background: var(--input-background-selected);
- cursor: move;
-}
-.frame-list{
- display: grid;
- grid-template-columns: 1fr;
- grid-gap: 0.25rem;
- user-select: none;
-}
-/* Frame Search */
-.autocomplete {
- position: relative;
-}
-.autocomplete-items {
- position: absolute;
- border: 1px solid black;
- border-bottom: none;
- top: 100%;
- left: 0;
- right: 0;
- z-index: 99;
- max-height: 8rem;
- height: auto;
- overflow-y: scroll;
-}
-.autocomplete-items div {
- border-bottom: 1px solid black !important;
- z-index: 99;
-}
-.autocomplete-items div:hover {
- background-color: var(--input-background-selected);
-}
-.autocomplete-active {
- background-color: var(--color-highlight) !important;
- color: black;
-}
-/*Frame/Mask-Pickers*/
-.frame-picker, .mask-picker {
- display: grid;
- grid-gap: 0.5rem;
- height: 20rem;
- overflow-y: scroll;
- overflow-x: hidden;
- grid-auto-rows: 6.5rem;
-}
-.frame-picker {
- grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
- justify-items: left;
- align-items: left;
-}
-.mask-picker {
- grid-template-columns: 1fr;
-}
-.frame-option, .mask-option {
- cursor: pointer;
- background: var(--input-background);
- width: 100%;
- height: 6rem;
- padding: 0.25rem 0;
- text-align: center;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -o-user-select: none;
- user-select: none;
- transition: 0.25s;
-}
-.frame-option.selected, .mask-option.selected {
- background: var(--input-background-selected);
-}
-.frame-option > img, .mask-option > img {
- width: 100%;
- height: 100%;
- object-fit: contain;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -o-user-select: none;
- user-select: none;
-}
-.mask-option {
- display: grid;
- grid-template-columns: 6rem auto;
- text-align: left;
- grid-gap: 0.5rem;
- align-items: center;
- height: 6rem;
-}
-.mask-option > img {
- max-height: 6rem;
-}
-/*Frame Elements*/
-.frame-element {
- display: grid;
- grid-template-columns: 4rem 4rem 1fr 4rem;
- grid-gap: 0.5rem;
- padding: 0.25rem;
- align-items: center;
- cursor: grab;
-}
-.frame-element > h4 {
- overflow-x: scroll;
-}
-.frame-element > img {
- width: 4rem;
- height: 4rem;
- object-fit: contain;
- padding: none;
-}
-.frame-element:hover {
- box-shadow: 0 0px 16px black;
- transition: 0.05s;
-}
-.frame-element-close {
- font-size: 2rem;
- cursor: pointer;
- text-align: center;
- padding: 0.5rem 0;
-}
-.frame-element-editor, .textbox-editor {
- display: none;
- position: fixed;
- max-width: calc(100vw - 6rem);
- width: 64rem; /*multiple of 16?*/
- max-height: calc(100vh - 6rem);
- height: auto;
- overflow-y: scroll;
- -webkit-transform: translateX(-50%) translateY(-50%);
- -moz-transform: translateX(-50%) translateY(-50%);
- -ms-transform: translateX(-50%) translateY(-50%);
- -o-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- top: 50%;
- left: 50%;
- background: var(--color-primary);
- border: 0.5rem solid #333;
- border-radius: 1rem;
- box-shadow: 0.5rem 0.5rem 1rem 0.5rem black;
- z-index: 10;
- padding: 2rem;
- grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
- grid-gap: 1rem;
-}
-.frame-element-editor.opened, .textbox-editor.opened {
- display: grid;
-}
-.frame-element-editor > .frame-element-editor-title, .textbox-editor > .textbox-editor-title {
- grid-column: 1 / -2;
-}
-.frame-element-editor > .frame-element-editor-close, .textbox-editor > .textbox-editor-close {
- cursor: pointer;
- width: auto;
- height: auto;
- grid-column: -1 span 1;
- user-select: none;
- justify-self: right;
-}
-/*Text tab*/
-.text-option {
- background: var(--input-background);
-}
-.text-codes {
- max-width: calc(100vw - 3rem);
- display: grid;
- grid-template-columns: auto auto;
- overflow-x: scroll;
-}
-.text-codes > * {
- border: 1px solid black;
- padding: 0.5rem;
-}
-/*download button*/
-.download {
- text-align: center;
- user-select: none;
- cursor: pointer;
-}
-.download:hover {
- text-decoration: underline;
-}
-/*supporters*/
-.supporters {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
- grid-gap: 0.5rem;
- padding: 1rem 2rem;
-}
+/*fonts*/
+@font-face {
+ font-family: gothammedium;
+ src: url("../fonts/gotham-medium.ttf") format('truetype');
+}
+@font-face {
+ font-family: belerenb;
+ src: url("../fonts/beleren-b.ttf") format('truetype');
+}
+@font-face {
+ font-family: belerenbsc;
+ src: url("../fonts/beleren-bsc.ttf") format('truetype');
+}
+@font-face {
+ font-family: matrix;
+ src: url("../fonts/matrix.ttf") format('truetype');
+}
+@font-face {
+ font-family: matrixb;
+ src: url("../fonts/matrix-b.ttf") format('truetype');
+}
+@font-face {
+ font-family: matrixbsc;
+ src: url("../fonts/Matrix Bold Small Caps.ttf") format('truetype');
+}
+@font-face {
+ font-family: mplantin;
+ src: url("../fonts/mplantin.ttf") format('truetype');
+}
+@font-face {
+ font-family: mplantini;
+ src: url("../fonts/mplantin-i.ttf") format('truetype');
+}
+@font-face {
+ font-family: plantinsemibold;
+ src: url("../fonts/plantin-semibold.otf") format('opentype');
+}
+@font-face {
+ font-family: plantinsemibolditalic;
+ src: url("../fonts/Plantin-SemiboldItalic.otf") format('opentype');
+}
+@font-face {
+ font-family: goudymedieval;
+ src: url("../fonts/goudy-medieval.ttf") format('truetype');
+}
+@font-face {
+ font-family: phyrexianold;
+ src: url("../fonts/phyrexian.ttf") format('truetype');
+}
+@font-face {
+ font-family: phyrexian;
+ src: url("../fonts/phy.woff2") format("woff2");
+}
+@font-face {
+ font-family: Montserrat-SemiBold;
+ src: url("../fonts/Montserrat-SemiBold.ttf") format('truetype');
+}
+@font-face {
+ font-family: Montserrat-Medium;
+ src: url("../fonts/Montserrat-Medium.ttf") format('truetype');
+}
+@font-face {
+ font-family: Acme-Regular;
+ src: url("../fonts/Acme-Regular.ttf") format('truetype');
+}
+@font-face {
+ font-family: fritz-quadrata;
+ src: url("../fonts/fritz-quadrata.ttf") format('truetype');
+}
+@font-face {
+ font-family: japanese-title;
+ src: url("../fonts/NudMotoyaExAporo_W6.ttf") format('truetype');
+}
+@font-face {
+ font-family: japanese;
+ src: url('../fonts/2012c863631ba71f874aba70590795a1.otf') format('opentype');
+}
+@font-face {
+ font-family: invocation;
+ src: url('../fonts/Invocation.ttf') format('truetype');
+}
+@font-face {
+ font-family: invocation-text;
+ src: url('../fonts/shango-gothic-bold.ttf') format('truetype');
+}
+@font-face {
+ font-family: souvenir;
+ src: url('../fonts/Souvenir-Itc-T-OT-Bold.otf') format('opentype');
+}
+@font-face {
+ font-family: palatino;
+ src: url('../fonts/Palatino Font.ttf') format('truetype');
+}
+@font-face {
+ font-family: amanda;
+ src: url('../fonts/Amanda Std Regular.otf') format('opentype');
+}
+@font-face {
+ font-family: gillsans;
+ src: url('../fonts/Gill Sans Medium.otf') format('opentype');
+}
+@font-face {
+ font-family: gillsansbold;
+ src: url('../fonts/Gill Sans Condensed Bold.otf') format('opentype');
+}
+@font-face {
+ font-family: gillsansitalic;
+ src: url('../fonts/Gill Sans Medium Italic') format('opentype');
+}
+@font-face {
+ font-family: gillsansbolditalic;
+ src: url('../fonts/Gill Sans Bold Italic.otf') format('opentype');
+}
+@font-face {
+ font-family: specialelite;
+ src: url('../fonts/SpecialElite-Regular.ttf') format('truetype');
+}
+@font-face {
+ font-family: neosans;
+ src: url('../fonts/NeoSansProRegular.OTF') format('opentype');
+}
+@font-face {
+ font-family: neosansitalic;
+ src: url('../fonts/NeoSansProItalic.OTF') format('opentype');
+}
+@font-face {
+ font-family: ocra;
+ src: url('../fonts/OCR A Std Regular.ttf') format('truetype');
+}
+@font-face {
+ font-family: decour;
+ src: url('../fonts/decour-cnd-regular.ttf') format('truetype');
+}
+@font-face {
+ font-family: decouritalic;
+ src: url('../fonts/decour-cnd-regular-italic.ttf') format('truetype');
+}
+@font-face {
+ font-family: officina;
+ src: url('../fonts/officina-ser-itc-black.otf') format('opentype');
+}
+@font-face {
+ font-family: davisonamericana;
+ src: url('../fonts/Davison Americana CG Regular.otf') format('opentype');
+}
+@font-face {
+ font-family: saloongirl;
+ src: url('../fonts/saloon-girl.ttf') format('truetype');
+}
+@font-face {
+ font-family: arialblack;
+ src: url('../fonts/arial_black.ttf') format('truetype');
+}
+/*Variables*/
+:root {
+ --site-background: url('../img/lowpolyBackground.svg');
+ --color-primary: #35603E;
+ --color-selected: #ae9;
+ --color-highlight: #8f8;
+ --font-color: #fff;
+ --font-color-2: #bbb;
+ --input-background: #333;
+ --input-background-selected: #555;
+ --darkened-backdrop-filter: grayscale(1) brightness(0.3);
+ --regular-backdrop-filter: none;
+ --window-diagonal-size: 400px;
+}
+/*Main Site Elements*/
+.background {
+ position: fixed;
+ z-index: -1;
+ width: 100vw;
+ height: 100vh;
+ background: var(--site-background);
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-size: cover;
+ background-position: center;
+ filter: var(--regular-backdrop-filter);
+}
+html {
+ font-size: 12pt;
+ overflow-x: hidden;
+ background: #151515;
+ color: var(--font-color);
+}
+body {
+ width: 100vw;
+ overflow-x: hidden;
+}
+header, footer, .main-content {
+ overflow-x: hidden;
+}
+header, footer {
+ backdrop-filter: var(--darkened-backdrop-filter);
+ -webkit-backdrop-filter: var(--darkened-backdrop-filter);
+}
+header {
+ padding: 2rem 0;
+}
+.header-extension {
+ padding-bottom: 2rem;
+}
+footer {
+ padding: 2rem;
+ display: grid;
+ grid-template-columns: calc(1fr - 4rem);
+ grid-gap: 1rem;
+}
+@media only screen and (min-width: 750px) {
+ footer {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+footer > div > * {
+ margin: 1rem 0;
+}
+/*Viewport*/
+img {
+ max-width: 100%;
+}
+/*Scrollbar Mod*/
+::-webkit-scrollbar {
+ width: 0.5rem;
+ height: 0;
+ background: #222;
+}
+::-webkit-scrollbar-thumb {
+ background: #888;
+ border-radius: 0.25rem;
+}
+/*Fonts*/
+.title {
+ font-family: belerenbsc;
+}
+h1.title {
+ font-size: 4rem;
+}
+.shadow {
+ text-shadow: 0.2rem 0.2rem 0.5rem black;
+}
+h1 {
+ font-size: 3rem;
+ font-family: Montserrat-SemiBold, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
+ overflow-wrap: break-word;
+}
+h2 {
+ font-size: 2.5rem;
+ font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
+ overflow-wrap: break-word;
+}
+h3 {
+ font-size: 2rem;
+ font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
+ overflow-wrap: break-word;
+}
+h4 {
+ font-size: 1.5rem;
+ font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
+ overflow-wrap: break-word;
+}
+h5 {
+ font-size: 1.25rem;
+ font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
+ overflow-wrap: break-word;
+}
+p {
+ font-size: 1rem;
+ font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
+ overflow-wrap: break-word;
+}
+a {
+ color: inherit;
+ text-decoration: inherit;
+ overflow-wrap: break-word;
+}
+a:hover {
+ text-decoration: underline;
+}
+a.underline {
+ text-decoration: underline;
+}
+::selection {
+ color: var(--font-color);
+ background: var(--color-highlight);
+}
+::moz-selection {
+ color: var(--font-color);
+ background: var(--color-highlight);;
+}
+/*General styles*/
+.hidden {
+ display: none;
+}
+.fake-hidden {
+ opacity: 0;
+ position: absolute;
+ top: -100%;
+ left: -100%;
+}
+.margin-bottom {
+ margin-bottom: 0.5rem;
+}
+.margin-bottom-large {
+ margin-bottom: 2rem;
+}
+.margin-bottom-larger {
+ margin-bottom: 3rem;
+}
+.margin-top {
+ margin-top: 0.5rem;
+}
+.padding {
+ padding: 0.5rem;
+}
+.readable-background {
+ backdrop-filter: var(--darkened-backdrop-filter);
+ -webkit-backdrop-filter: var(--darkened-backdrop-filter);
+}
+.box-shadow {
+ box-shadow: 0 2px 8px #0008;
+}
+.split-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 0.5rem;
+}
+.center {
+ text-align: center;
+}
+.layer {
+ padding: 0.5rem;
+}
+.vertical-center {
+ margin: auto;
+}
+@media only screen and (min-width: 750px) {
+ .layer {
+ padding: 4rem;
+ }
+}
+/*Hamburger*/
+.hamburger {
+ position: fixed;
+ right: 0rem;
+ top: 0rem;
+ width: 4rem;
+ height: 4rem;
+ fill-rule: evenodd;
+ clip-rule: evenodd;
+ stroke-linejoin: round;
+ stroke-miterlimit: 1.5;
+ cursor: pointer;
+ z-index: 100;
+ background: var(--color-primary);
+ border-radius: 0 0 0 0.5rem;
+}
+.hamburger > path {
+ fill: none;
+ stroke: white;
+ stroke-width: 8px;
+ transition: 0.5s;
+}
+.line1, .line3 {
+ stroke-dasharray: 80 183;
+ stroke-dashoffset: 0;
+}
+.line2 {
+ stroke-dasharray: 80 80;
+ stroke-dashoffset: 0;
+}
+.opened > .line1, .opened > .line3 {
+ stroke-dasharray: 103 183;
+ stroke-dashoffset: -80;
+}
+.opened > .line2 {
+ stroke-dasharray: 0 60;
+ stroke-dashoffset: -40;
+}
+.circle {
+ z-index: 5;
+ position: fixed;
+ right: 0;
+ top: 0;
+ padding: 0;
+ background: var(--color-primary);
+ border-radius: 100%;
+ transition: 0.333s ease;
+}
+.hamburger:hover + .circle {
+ /*padding: 3rem;
+ right: -1rem;
+ top: -1rem;*/
+}
+.hamburger.opened + .circle {
+ padding: var(--window-diagonal-size);
+ right: calc(0px - var(--window-diagonal-size));
+ top: calc(0px - var(--window-diagonal-size));
+ transition: 0.75s cubic-bezier(.53,.47,.76,-0.52);
+}
+/*Menus*/
+.menu {
+ position: fixed;
+ z-index: 10;
+ bottom: 200vh;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ overflow-y: scroll;
+ transition: 0.5s;
+ text-align: center;
+}
+.menu.menu-visible {
+ bottom: 0;
+ transition-delay: 0.667s;
+}
+.menu > div {
+ display: inline-block;
+ margin: 0 auto;
+ text-align: left;
+}
+/*Main (Nav) Menu*/
+.main-menu {
+ padding: 2rem;
+ line-height: 3rem;
+}
+.main-menu > h2 {
+ margin-top: 4rem;
+}
+/*notifications*/
+.notification-container {
+ position: fixed;
+ z-index: 10;
+ bottom: 0;
+ left: 1.5rem;
+ width: calc(100vw - 3rem);
+ max-height: 75vh;
+ overflow-y: scroll;
+ transition: 0.5s;
+}
+.notification {
+ border-top: 0.25rem solid var(--color-selected);
+ background: var(--input-background);
+ display: grid;
+ grid-template-columns: auto 2rem;
+ transition: 0.5s;
+}
+.notification > h3 {
+ text-align: center;
+ user-select: none;
+ cursor: pointer;
+}
+.notification.hidden {
+ opacity: 0;
+}
+/*Inputs*/
+.input {
+ box-sizing: border-box;
+ width: 100%;
+ background: var(--input-background);
+ color: inherit;
+ font-size: 1.25rem;
+ font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
+ font-weight: 100;
+ border-width: 0.25rem 0 0 0;
+ border-style: solid;
+ border-color: #0000;
+ padding: 0 0.25rem 0.25rem 0.25rem;
+ transition: 0.5s;
+}
+.input:hover {
+ box-shadow: 0 0px 16px black;
+ transition: 0.05s;
+}
+.input:focus {
+ outline: none;
+}
+.input:active {
+ border-color: var(--color-selected);
+}
+.input:disabled {
+ opacity: 0.5;
+}
+.input:disabled:hover {
+ box-shadow: none;
+}
+.input-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+ grid-gap: 0.5rem;
+}
+.input-description {
+ color: var(--font-color-2);
+ font-style: italic;
+}
+input[type=checkbox].input {
+ /*nothing for now*/
+}
+.input:not([type=text]):not([type=number]):not([type=url]) {
+ cursor: pointer;
+}
+textarea.input {
+ cursor: text !important;
+ resize: vertical;
+ box-sizing: border-box;
+ min-height: 10rem;
+ max-height: 20rem;
+ transition: height 0s;
+}
+/*Checkboxes*/
+.checkbox-container {
+ display: block;
+ position: relative;
+ padding-left: 2.25rem;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.checkbox-container input {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+}
+.checkmark {
+ position: absolute;
+ top: 0;
+ left: 0.25rem;
+ height: 1.5rem;
+ width: 1.5rem;
+ border-radius: 0.25rem;
+ background-color: #efefef;
+}
+.checkbox-container input:checked ~ .checkmark {
+ background-color: var(--color-selected);
+}
+.checkmark:after {
+ content: "";
+ position: absolute;
+ display: none;
+}
+.checkbox-container input:checked ~ .checkmark:after {
+ display: block;
+}
+.checkbox-container .checkmark:after {
+ left: 0.5rem;
+ top: 0.25rem;
+ width: 0.25rem;
+ height: 0.75rem;
+ border: solid var(--color-primary);
+ border-width: 0 0.25rem 0.25rem 0;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+/*Collapsible*/
+.collapsible {
+ cursor: pointer;
+ user-select: none;
+}
+.collapsible:after {
+ content: '';
+ border: solid white;
+ border-width: 0 0.15em 0.15em 0;
+ display: inline-block;
+ padding: 0.15em;
+ transform: rotate(-135deg) translate(-0.2em, 0.2em);
+ -webkit-transform: rotate(-135deg) translate(-0.2em, 0.2em);
+}
+.collapsible.collapsed:after {
+ transform: rotate(45deg) translate(0, -0.3em);
+ -webkit-transform: rotate(45deg) translate(0, -0.3em);
+}
+.collapsed + div {
+ display: none;
+}
+/*Videos*/
+.video {
+ position: relative;
+ padding-bottom: 56.25%;
+ padding-top: 30px;
+ height: 0;
+ overflow: hidden;
+}
+.video iframe, .video object, .video embed, .video video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+/*drop to upload*/
+.drop-area {
+ border: 0.125rem dashed gray;
+ transition: 0.25s;
+}
+.drop-area.hover {
+ border-color: var(--color-selected);
+}
+
+
+/*Animated cards*/
+.animated-scene {
+ perspective: 100rem;
+}
+.animated-card-1 {
+ animation: animatedcardone 3s ease-in-out 0s alternate infinite;
+ -moz-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
+ -webkit-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
+ -o-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
+ transform-style: preserve-3d;
+}
+.animation-delay-2 {
+ animation-delay: 1s !important;
+}
+.animation-delay-4 {
+ animation-delay: 2s !important;
+}
+@keyframes animatedcardone {
+ 0% {transform: rotateY(15deg);}
+ 100% {transform: rotateY(-15deg);}
+}
+
+
+
+
+/*Home Page only*/
+.sample-grid {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: 1fr;
+}
+.sample-grid > img {
+ display: block;
+ max-width: 375px;
+ width: 100%;
+ height: auto;
+ margin: 1rem auto;
+}
+@media only screen and (min-width: 750px) {
+ .sample-grid {
+ grid-template-columns: 375px auto;
+ }
+ .sample-grid.right {
+ grid-template-columns: auto 375px;
+ }
+}
+
+
+
+
+/*Tutorial Page only*/
+.tutorial-grid {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: 1fr;
+}
+.tutorial-grid > img {
+ display: block;
+ width: 100%;
+ height: auto;
+ margin: 1rem auto;
+}
+.readable-background > .tutorial-grid > img {
+ border: 0.1rem solid gray;
+}
+@media only screen and (min-width: 750px) {
+ .tutorial-grid {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+
+
+/*Creator related only*/
+/*Creator Grid/Canvas/Menu*/
+.creator-grid {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr;
+ justify-items: center;
+ grid-gap: 1rem;
+ padding: 1rem 0;
+}
+.creator-canvas {
+ max-width: 750px;
+ width: 100vw;
+ height: auto;
+ /*backdrop-filter: hue-rotate(80deg);*/
+}
+.creator-menu {
+ width: 100%;
+}
+@media only screen and (min-width: 1250px) {
+ .creator-grid {
+ grid-template-columns: 750px auto;
+ padding: 1rem;
+ justify-items: left;
+ }
+ .creator-menu {
+ width: calc(100% - 2rem);
+ }
+ .creator-canvas {
+ border-radius: 37.5px;
+ }
+}
+/*Creator Menu Tabs*/
+.creator-menu-tabs {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+ grid-gap: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+/*Selectables*/
+.selectable {
+ text-align: center;
+ user-select: none;
+ padding: 1rem;
+ padding-top: 0.9rem;
+ border-top: 0.1rem;
+ border-style: solid;
+ border-color: #0000;
+ transition: 0.5s;
+ cursor: pointer;
+}
+.selectable.selected {
+ padding-top: 0.5rem;
+ border-top: 0.5rem;
+ border-style: solid;
+ border-color: var(--color-selected);
+ transition: 0.5s !important;
+}
+.selectable:hover {
+ box-shadow: 0 0px 16px black;
+ transition: 0.05s;
+}
+/*Draggables*/
+.draggable {
+ background: var(--input-background);
+ touch-action: none;
+}
+.dragging {
+ box-shadow: 0 0px 16px black;
+ background: var(--input-background-selected);
+ cursor: move;
+}
+.frame-list{
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-gap: 0.25rem;
+ user-select: none;
+}
+/* Frame Search */
+.autocomplete {
+ position: relative;
+}
+.autocomplete-items {
+ position: absolute;
+ border: 1px solid black;
+ border-bottom: none;
+ top: 100%;
+ left: 0;
+ right: 0;
+ z-index: 99;
+ max-height: 8rem;
+ height: auto;
+ overflow-y: scroll;
+}
+.autocomplete-items div {
+ border-bottom: 1px solid black !important;
+ z-index: 99;
+}
+.autocomplete-items div:hover {
+ background-color: var(--input-background-selected);
+}
+.autocomplete-active {
+ background-color: var(--color-highlight) !important;
+ color: black;
+}
+/*Frame/Mask-Pickers*/
+.frame-picker, .mask-picker {
+ display: grid;
+ grid-gap: 0.5rem;
+ height: 20rem;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ grid-auto-rows: 6.5rem;
+}
+.frame-picker {
+ grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+ justify-items: left;
+ align-items: left;
+}
+.mask-picker {
+ grid-template-columns: 1fr;
+}
+.frame-option, .mask-option {
+ cursor: pointer;
+ background: var(--input-background);
+ width: 100%;
+ height: 6rem;
+ padding: 0.25rem 0;
+ text-align: center;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+ transition: 0.25s;
+}
+.frame-option.selected, .mask-option.selected {
+ background: var(--input-background-selected);
+}
+.frame-option > img, .mask-option > img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+.mask-option {
+ display: grid;
+ grid-template-columns: 6rem auto;
+ text-align: left;
+ grid-gap: 0.5rem;
+ align-items: center;
+ height: 6rem;
+}
+.mask-option > img {
+ max-height: 6rem;
+}
+/*Frame Elements*/
+.frame-element {
+ display: grid;
+ grid-template-columns: 4rem 4rem 1fr 4rem;
+ grid-gap: 0.5rem;
+ padding: 0.25rem;
+ align-items: center;
+ cursor: grab;
+}
+.frame-element > h4 {
+ overflow-x: scroll;
+}
+.frame-element > img {
+ width: 4rem;
+ height: 4rem;
+ object-fit: contain;
+ padding: none;
+}
+.frame-element:hover {
+ box-shadow: 0 0px 16px black;
+ transition: 0.05s;
+}
+.frame-element-close {
+ font-size: 2rem;
+ cursor: pointer;
+ text-align: center;
+ padding: 0.5rem 0;
+}
+.frame-element-editor, .textbox-editor {
+ display: none;
+ position: fixed;
+ max-width: calc(100vw - 6rem);
+ width: 64rem; /*multiple of 16?*/
+ max-height: calc(100vh - 6rem);
+ height: auto;
+ overflow-y: scroll;
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ -moz-transform: translateX(-50%) translateY(-50%);
+ -ms-transform: translateX(-50%) translateY(-50%);
+ -o-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+ top: 50%;
+ left: 50%;
+ background: var(--color-primary);
+ border: 0.5rem solid #333;
+ border-radius: 1rem;
+ box-shadow: 0.5rem 0.5rem 1rem 0.5rem black;
+ z-index: 10;
+ padding: 2rem;
+ grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+ grid-gap: 1rem;
+}
+.frame-element-editor.opened, .textbox-editor.opened {
+ display: grid;
+}
+.frame-element-editor > .frame-element-editor-title, .textbox-editor > .textbox-editor-title {
+ grid-column: 1 / -2;
+}
+.frame-element-editor > .frame-element-editor-close, .textbox-editor > .textbox-editor-close {
+ cursor: pointer;
+ width: auto;
+ height: auto;
+ grid-column: -1 span 1;
+ user-select: none;
+ justify-self: right;
+}
+/*Text tab*/
+.text-option {
+ background: var(--input-background);
+}
+.text-codes {
+ max-width: calc(100vw - 3rem);
+ display: grid;
+ grid-template-columns: auto auto;
+ overflow-x: scroll;
+}
+.text-codes > * {
+ border: 1px solid black;
+ padding: 0.5rem;
+}
+/*download button*/
+.download {
+ text-align: center;
+ user-select: none;
+ cursor: pointer;
+}
+.download:hover {
+ text-decoration: underline;
+}
+/*supporters*/
+.supporters {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+ grid-gap: 0.5rem;
+ padding: 1rem 2rem;
+}
diff --git a/fonts/Davison Americana CG Regular.otf b/fonts/Davison Americana CG Regular.otf
new file mode 100644
index 00000000..8d1cb36c
Binary files /dev/null and b/fonts/Davison Americana CG Regular.otf differ
diff --git a/fonts/arial_black.ttf b/fonts/arial_black.ttf
new file mode 100644
index 00000000..453ecb5f
Binary files /dev/null and b/fonts/arial_black.ttf differ
diff --git a/fonts/decour-cnd-regular-italic.ttf b/fonts/decour-cnd-regular-italic.ttf
new file mode 100644
index 00000000..a52ab860
Binary files /dev/null and b/fonts/decour-cnd-regular-italic.ttf differ
diff --git a/fonts/decour-cnd-regular.ttf b/fonts/decour-cnd-regular.ttf
new file mode 100644
index 00000000..e5d6ef55
Binary files /dev/null and b/fonts/decour-cnd-regular.ttf differ
diff --git a/fonts/officina-ser-itc-black.otf b/fonts/officina-ser-itc-black.otf
new file mode 100644
index 00000000..81a86be1
Binary files /dev/null and b/fonts/officina-ser-itc-black.otf differ
diff --git a/fonts/saloon-girl.ttf b/fonts/saloon-girl.ttf
new file mode 100644
index 00000000..010c5f39
Binary files /dev/null and b/fonts/saloon-girl.ttf differ
diff --git a/img/frames/wanted/a.png b/img/frames/wanted/a.png
new file mode 100644
index 00000000..c6974d29
Binary files /dev/null and b/img/frames/wanted/a.png differ
diff --git a/img/frames/wanted/aThumb.png b/img/frames/wanted/aThumb.png
new file mode 100644
index 00000000..22045a25
Binary files /dev/null and b/img/frames/wanted/aThumb.png differ
diff --git a/img/frames/wanted/b.png b/img/frames/wanted/b.png
new file mode 100644
index 00000000..b50363b0
Binary files /dev/null and b/img/frames/wanted/b.png differ
diff --git a/img/frames/wanted/bThumb.png b/img/frames/wanted/bThumb.png
new file mode 100644
index 00000000..f4385a3a
Binary files /dev/null and b/img/frames/wanted/bThumb.png differ
diff --git a/img/frames/wanted/g.png b/img/frames/wanted/g.png
new file mode 100644
index 00000000..0b8a218b
Binary files /dev/null and b/img/frames/wanted/g.png differ
diff --git a/img/frames/wanted/gThumb.png b/img/frames/wanted/gThumb.png
new file mode 100644
index 00000000..04eb39ad
Binary files /dev/null and b/img/frames/wanted/gThumb.png differ
diff --git a/img/frames/wanted/m.png b/img/frames/wanted/m.png
new file mode 100644
index 00000000..c3ea888d
Binary files /dev/null and b/img/frames/wanted/m.png differ
diff --git a/img/frames/wanted/mThumb.png b/img/frames/wanted/mThumb.png
new file mode 100644
index 00000000..07616420
Binary files /dev/null and b/img/frames/wanted/mThumb.png differ
diff --git a/img/frames/wanted/margin.png b/img/frames/wanted/margin.png
new file mode 100644
index 00000000..cfe07d28
Binary files /dev/null and b/img/frames/wanted/margin.png differ
diff --git a/img/frames/wanted/marginThumb.png b/img/frames/wanted/marginThumb.png
new file mode 100644
index 00000000..9de9656b
Binary files /dev/null and b/img/frames/wanted/marginThumb.png differ
diff --git a/img/frames/wanted/pt/a.png b/img/frames/wanted/pt/a.png
new file mode 100644
index 00000000..2b8a2f20
Binary files /dev/null and b/img/frames/wanted/pt/a.png differ
diff --git a/img/frames/wanted/pt/aThumb.png b/img/frames/wanted/pt/aThumb.png
new file mode 100644
index 00000000..828a224c
Binary files /dev/null and b/img/frames/wanted/pt/aThumb.png differ
diff --git a/img/frames/wanted/pt/b.png b/img/frames/wanted/pt/b.png
new file mode 100644
index 00000000..9a574b0a
Binary files /dev/null and b/img/frames/wanted/pt/b.png differ
diff --git a/img/frames/wanted/pt/bThumb.png b/img/frames/wanted/pt/bThumb.png
new file mode 100644
index 00000000..dcd7d436
Binary files /dev/null and b/img/frames/wanted/pt/bThumb.png differ
diff --git a/img/frames/wanted/pt/g.png b/img/frames/wanted/pt/g.png
new file mode 100644
index 00000000..ae179639
Binary files /dev/null and b/img/frames/wanted/pt/g.png differ
diff --git a/img/frames/wanted/pt/gThumb.png b/img/frames/wanted/pt/gThumb.png
new file mode 100644
index 00000000..cc12b3db
Binary files /dev/null and b/img/frames/wanted/pt/gThumb.png differ
diff --git a/img/frames/wanted/pt/m.png b/img/frames/wanted/pt/m.png
new file mode 100644
index 00000000..3db29c55
Binary files /dev/null and b/img/frames/wanted/pt/m.png differ
diff --git a/img/frames/wanted/pt/mThumb.png b/img/frames/wanted/pt/mThumb.png
new file mode 100644
index 00000000..00e3355f
Binary files /dev/null and b/img/frames/wanted/pt/mThumb.png differ
diff --git a/img/frames/wanted/pt/r.png b/img/frames/wanted/pt/r.png
new file mode 100644
index 00000000..c6d3d91b
Binary files /dev/null and b/img/frames/wanted/pt/r.png differ
diff --git a/img/frames/wanted/pt/rThumb.png b/img/frames/wanted/pt/rThumb.png
new file mode 100644
index 00000000..2915dbe7
Binary files /dev/null and b/img/frames/wanted/pt/rThumb.png differ
diff --git a/img/frames/wanted/pt/u.png b/img/frames/wanted/pt/u.png
new file mode 100644
index 00000000..e56345f2
Binary files /dev/null and b/img/frames/wanted/pt/u.png differ
diff --git a/img/frames/wanted/pt/uThumb.png b/img/frames/wanted/pt/uThumb.png
new file mode 100644
index 00000000..4fd396de
Binary files /dev/null and b/img/frames/wanted/pt/uThumb.png differ
diff --git a/img/frames/wanted/pt/w.png b/img/frames/wanted/pt/w.png
new file mode 100644
index 00000000..b5765766
Binary files /dev/null and b/img/frames/wanted/pt/w.png differ
diff --git a/img/frames/wanted/pt/wThumb.png b/img/frames/wanted/pt/wThumb.png
new file mode 100644
index 00000000..0c6cebe1
Binary files /dev/null and b/img/frames/wanted/pt/wThumb.png differ
diff --git a/img/frames/wanted/r.png b/img/frames/wanted/r.png
new file mode 100644
index 00000000..766b54b7
Binary files /dev/null and b/img/frames/wanted/r.png differ
diff --git a/img/frames/wanted/rThumb.png b/img/frames/wanted/rThumb.png
new file mode 100644
index 00000000..b1008703
Binary files /dev/null and b/img/frames/wanted/rThumb.png differ
diff --git a/img/frames/wanted/stamp/a.png b/img/frames/wanted/stamp/a.png
new file mode 100644
index 00000000..6468617d
Binary files /dev/null and b/img/frames/wanted/stamp/a.png differ
diff --git a/img/frames/wanted/stamp/aThumb.png b/img/frames/wanted/stamp/aThumb.png
new file mode 100644
index 00000000..bea6e1ae
Binary files /dev/null and b/img/frames/wanted/stamp/aThumb.png differ
diff --git a/img/frames/wanted/stamp/b.png b/img/frames/wanted/stamp/b.png
new file mode 100644
index 00000000..b620d42a
Binary files /dev/null and b/img/frames/wanted/stamp/b.png differ
diff --git a/img/frames/wanted/stamp/bThumb.png b/img/frames/wanted/stamp/bThumb.png
new file mode 100644
index 00000000..f4c43d0c
Binary files /dev/null and b/img/frames/wanted/stamp/bThumb.png differ
diff --git a/img/frames/wanted/stamp/g.png b/img/frames/wanted/stamp/g.png
new file mode 100644
index 00000000..467aa959
Binary files /dev/null and b/img/frames/wanted/stamp/g.png differ
diff --git a/img/frames/wanted/stamp/gThumb.png b/img/frames/wanted/stamp/gThumb.png
new file mode 100644
index 00000000..88bf6022
Binary files /dev/null and b/img/frames/wanted/stamp/gThumb.png differ
diff --git a/img/frames/wanted/stamp/m.png b/img/frames/wanted/stamp/m.png
new file mode 100644
index 00000000..f889d2b5
Binary files /dev/null and b/img/frames/wanted/stamp/m.png differ
diff --git a/img/frames/wanted/stamp/mThumb.png b/img/frames/wanted/stamp/mThumb.png
new file mode 100644
index 00000000..fd1019fb
Binary files /dev/null and b/img/frames/wanted/stamp/mThumb.png differ
diff --git a/img/frames/wanted/stamp/r.png b/img/frames/wanted/stamp/r.png
new file mode 100644
index 00000000..596b1e9b
Binary files /dev/null and b/img/frames/wanted/stamp/r.png differ
diff --git a/img/frames/wanted/stamp/rThumb.png b/img/frames/wanted/stamp/rThumb.png
new file mode 100644
index 00000000..2346595d
Binary files /dev/null and b/img/frames/wanted/stamp/rThumb.png differ
diff --git a/img/frames/wanted/stamp/u.png b/img/frames/wanted/stamp/u.png
new file mode 100644
index 00000000..9174c934
Binary files /dev/null and b/img/frames/wanted/stamp/u.png differ
diff --git a/img/frames/wanted/stamp/uThumb.png b/img/frames/wanted/stamp/uThumb.png
new file mode 100644
index 00000000..c6deadeb
Binary files /dev/null and b/img/frames/wanted/stamp/uThumb.png differ
diff --git a/img/frames/wanted/stamp/w.png b/img/frames/wanted/stamp/w.png
new file mode 100644
index 00000000..4e555561
Binary files /dev/null and b/img/frames/wanted/stamp/w.png differ
diff --git a/img/frames/wanted/stamp/wThumb.png b/img/frames/wanted/stamp/wThumb.png
new file mode 100644
index 00000000..640c5023
Binary files /dev/null and b/img/frames/wanted/stamp/wThumb.png differ
diff --git a/img/frames/wanted/u.png b/img/frames/wanted/u.png
new file mode 100644
index 00000000..87f2024c
Binary files /dev/null and b/img/frames/wanted/u.png differ
diff --git a/img/frames/wanted/uThumb.png b/img/frames/wanted/uThumb.png
new file mode 100644
index 00000000..7935f511
Binary files /dev/null and b/img/frames/wanted/uThumb.png differ
diff --git a/img/frames/wanted/w.png b/img/frames/wanted/w.png
new file mode 100644
index 00000000..c92a33a1
Binary files /dev/null and b/img/frames/wanted/w.png differ
diff --git a/img/frames/wanted/wThumb.png b/img/frames/wanted/wThumb.png
new file mode 100644
index 00000000..f966e14e
Binary files /dev/null and b/img/frames/wanted/wThumb.png differ
diff --git a/img/manaSymbols/wanted/wanted0.svg b/img/manaSymbols/wanted/wanted0.svg
new file mode 100644
index 00000000..30e0b28c
--- /dev/null
+++ b/img/manaSymbols/wanted/wanted0.svg
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Loading the set symbol from Gatherer failed. Please check this link to see if it exists. If it does, it may be necessary to manually download and upload the image. ', 5);
- }
- if (!this.src.includes('/img/blank.png')) {this.src = fixUri('/img/blank.png');}
-}
-setSymbol.onload = setSymbolEdited;
-//watermark
-watermark = new Image(); watermark.crossOrigin = 'anonymous'; watermark.src = blank.src;
-watermark.onerror = function() {if (!this.src.includes('/img/blank.png')) {this.src = fixUri('/img/blank.png');}}
-watermark.onload = watermarkEdited;
-//preview canvas
-var previewCanvas = document.querySelector('#previewCanvas');
-var previewContext = previewCanvas.getContext('2d');
-var canvasList = [];
-//frame/mask picker stuff
-var availableFrames = [];
-var selectedFrame = null;
-var selectedFrameIndex = 0;
-var selectedMaskIndex = 0;
-var selectedTextIndex = 0;
-var replacementMasks = {};
-var customCount = 0;
-var lastFrameClick = null;
-var lastMaskClick = null;
-//for imports
-var scryfallArt;
-var scryfallCard;
-//for text
-var drawTextBetweenFrames = false;
-var redrawFrames = false;
-var savedTextXPosition = 0;
-var savedTextXPosition2 = 0;
-var savedRollYPosition = null;
-var savedFont = null;
-var savedTextContents = {};
-//for misc
-var date = new Date();
-card.infoYear = date.getFullYear();
-document.querySelector("#info-year").value = card.infoYear;
-//to avoid rerunning special scripts (planeswalker, saga, etc...)
-
-var loadedVersions = [];
-//Card Object managament
-async function resetCardIrregularities({canvas = [getStandardWidth(), getStandardHeight(), 0, 0], resetOthers = true} = {}) {
- //misc details
- card.margins = false;
- card.bottomInfoTranslate = {x:0, y:0};
- card.bottomInfoRotate = 0;
- card.bottomInfoZoom = 1;
- replacementMasks = {};
- //rotation
- if (card.landscape) {
- // previewContext.scale(card.width/card.height, card.height/card.width);
- // previewContext.rotate(Math.PI / 2);
- // previewContext.translate(0, -card.width / 2);
- previewContext.setTransform(1, 0, 0, 1, 0, 0);
- card.landscape = false;
- }
- //card size
- card.width = canvas[0];
- card.height = canvas[1];
- card.marginX = canvas[2];
- card.marginY = canvas[3];
- //canvases
- canvasList.forEach(name => {
- if (window[name + 'Canvas'].width != card.width * (1 + card.marginX) || window[name + 'Canvas'].height != card.height * (1 + card.marginY)) {
- sizeCanvas(name);
- }
- });
- if (resetOthers) {
- setBottomInfoStyle();
- //onload
- card.onload = null;
-
- card.hideBottomInfoBorder = false;
- card.showsFlavorBar = true;
- }
-}
-async function setBottomInfoStyle() {
- if (document.querySelector('#enableNewCollectorStyle').checked) {
- await loadBottomInfo({
- midLeft: {text:'{elemidinfo-set} \u2022 {elemidinfo-language} {savex}{fontbelerenbsc}{fontsize' + scaleHeight(0.001) + '}{upinline' + scaleHeight(0.0005) + '}\uFFEE{savex2}{elemidinfo-artist}', x:0.0647, y:0.9548, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:'white', outlineWidth:0.003},
- topLeft: {text:'{elemidinfo-rarity} {kerning3}{elemidinfo-number}{kerning0}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:'white', outlineWidth:0.003},
- note: {text:'{loadx}{elemidinfo-note}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:'white', outlineWidth:0.003},
- bottomLeft: {text:'NOT FOR SALE', x:0.0647, y:0.9719, width:0.8707, height:0.0143, oneLine:true, font:'gothammedium', size:0.0143, color:'white', outlineWidth:0.003},
- wizards: {name:'wizards', text:'{ptshift0,0.0172}\u2122 & \u00a9 {elemidinfo-year} Wizards of the Coast', x:0.0647, y:0.9377, width:0.8707, height:0.0167, oneLine:true, font:'mplantin', size:0.0162, color:'white', align:'right', outlineWidth:0.003},
- bottomRight: {text:'{ptshift0,0.0172}CardConjurer.com', x:0.0647, y:0.9548, width:0.8707, height:0.0143, oneLine:true, font:'mplantin', size:0.0143, color:'white', align:'right', outlineWidth:0.003}
- });
- } else {
- await loadBottomInfo({
- midLeft: {text:'{elemidinfo-set} \u2022 {elemidinfo-language} {savex}{fontbelerenbsc}{fontsize' + scaleHeight(0.001) + '}{upinline' + scaleHeight(0.0005) + '}\uFFEE{savex2}{elemidinfo-artist}', x:0.0647, y:0.9548, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:'white', outlineWidth:0.003},
- topLeft: {text:'{elemidinfo-number}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:'white', outlineWidth:0.003},
- note: {text:'{loadx2}{elemidinfo-note}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:'white', outlineWidth:0.003},
- rarity: {text:'{loadx}{elemidinfo-rarity}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:'white', outlineWidth:0.003},
- bottomLeft: {text:'NOT FOR SALE', x:0.0647, y:0.9719, width:0.8707, height:0.0143, oneLine:true, font:'gothammedium', size:0.0143, color:'white', outlineWidth:0.003},
- wizards: {name:'wizards', text:'{ptshift0,0.0172}\u2122 & \u00a9 {elemidinfo-year} Wizards of the Coast', x:0.0647, y:0.9377, width:0.8707, height:0.0167, oneLine:true, font:'mplantin', size:0.0162, color:'white', align:'right', outlineWidth:0.003},
- bottomRight: {text:'{ptshift0,0.0172}CardConjurer.com', x:0.0647, y:0.9548, width:0.8707, height:0.0143, oneLine:true, font:'mplantin', size:0.0143, color:'white', align:'right', outlineWidth:0.003}
- });
- }
-}
-//Canvas management
-function sizeCanvas(name, width = Math.round(card.width * (1 + 2 * card.marginX)), height = Math.round(card.height * (1 + 2 * card.marginY))) {
- if (!window[name + 'Canvas']) {
- window[name + 'Canvas'] = document.createElement('canvas');
- window[name + 'Context'] = window[name + 'Canvas'].getContext('2d');
- canvasList[canvasList.length] = name;
- }
- window[name + 'Canvas'].width = width;
- window[name + 'Canvas'].height = height;
- if (name == 'line') { //force true to view all canvases - must restore to name == 'line' for proper kerning adjustments
- window[name + 'Canvas'].style = 'width: 20rem; height: 28rem; border: 1px solid red;';
- const label = document.createElement('div');
- label.innerHTML = name + 'No Mask
None selected ';
- cardKeys.forEach(item => {
- var cardKeyOption = document.createElement('option');
- cardKeyOption.innerHTML = item;
- document.querySelector('#load-card-options').appendChild(cardKeyOption);
- });
-}
-function importChanged() {
- var unique = document.querySelector('#importAllPrints').checked ? 'prints' : '';
- fetchScryfallData(document.querySelector("#import-name").value, importCard, unique);
-}
-function saveCard(saveFromFile) {
- var cardKeys = JSON.parse(localStorage.getItem('cardKeys')) || [];
- var cardKey, cardToSave;
- if (saveFromFile) {
- cardKey = saveFromFile.key;
- } else {
- cardKey = getCardName();
- }
- if (!saveFromFile) {
- cardKey = prompt('Enter the name you would like to save your card under:', cardKey);
- if (!cardKey) {return null;}
- }
- cardKey = cardKey.trim();
- if (cardKeys.includes(cardKey)) {
- if (!confirm('Would you like to overwrite your card previously saved as "' + cardKey + '"?\n(Clicking "cancel" will affix a version number)')) {
- var originalCardKey = cardKey;
- var cardKeyNumber = 1;
- while (cardKeys.includes(cardKey)) {
- cardKey = originalCardKey + ' (' + cardKeyNumber + ')';
- cardKeyNumber ++;
- }
- }
- }
- if (saveFromFile) {
- cardToSave = saveFromFile.data;
- } else {
- cardToSave = JSON.parse(JSON.stringify(card));
- cardToSave.frames.forEach(frame => {
- delete frame.image;
- frame.masks.forEach(mask => delete mask.image);
- });
- }
- try {
- localStorage.setItem(cardKey, JSON.stringify(cardToSave));
- if (!cardKeys.includes(cardKey)) {
- cardKeys.push(cardKey);
- cardKeys.sort();
- localStorage.setItem('cardKeys', JSON.stringify(cardKeys));
- loadAvailableCards(cardKeys);
- }
- } catch (error) {
- notify('You have exceeded your 5MB of local storage, and your card has failed to save. If you would like to continue saving cards, please download all saved cards, then delete all saved cards to free up space.Loading the set symbol from Gatherer failed. Please check this link to see if it exists. If it does, it may be necessary to manually download and upload the image. ', 5);
+ }
+ if (!this.src.includes('/img/blank.png')) {this.src = fixUri('/img/blank.png');}
+}
+setSymbol.onload = setSymbolEdited;
+//watermark
+watermark = new Image(); watermark.crossOrigin = 'anonymous'; watermark.src = blank.src;
+watermark.onerror = function() {if (!this.src.includes('/img/blank.png')) {this.src = fixUri('/img/blank.png');}}
+watermark.onload = watermarkEdited;
+//preview canvas
+var previewCanvas = document.querySelector('#previewCanvas');
+var previewContext = previewCanvas.getContext('2d');
+var canvasList = [];
+//frame/mask picker stuff
+var availableFrames = [];
+var selectedFrame = null;
+var selectedFrameIndex = 0;
+var selectedMaskIndex = 0;
+var selectedTextIndex = 0;
+var replacementMasks = {};
+var customCount = 0;
+var lastFrameClick = null;
+var lastMaskClick = null;
+//for imports
+var scryfallArt;
+var scryfallCard;
+//for text
+var drawTextBetweenFrames = false;
+var redrawFrames = false;
+var savedTextXPosition = 0;
+var savedTextXPosition2 = 0;
+var savedRollYPosition = null;
+var savedFont = null;
+var savedTextContents = {};
+//for misc
+var date = new Date();
+card.infoYear = date.getFullYear();
+document.querySelector("#info-year").value = card.infoYear;
+//to avoid rerunning special scripts (planeswalker, saga, etc...)
+
+var loadedVersions = [];
+//Card Object managament
+async function resetCardIrregularities({canvas = [getStandardWidth(), getStandardHeight(), 0, 0], resetOthers = true} = {}) {
+ //misc details
+ card.margins = false;
+ card.bottomInfoTranslate = {x:0, y:0};
+ card.bottomInfoRotate = 0;
+ card.bottomInfoZoom = 1;
+ card.bottomInfoColor = 'white';
+ replacementMasks = {};
+ //rotation
+ if (card.landscape) {
+ // previewContext.scale(card.width/card.height, card.height/card.width);
+ // previewContext.rotate(Math.PI / 2);
+ // previewContext.translate(0, -card.width / 2);
+ previewContext.setTransform(1, 0, 0, 1, 0, 0);
+ card.landscape = false;
+ }
+ //card size
+ card.width = canvas[0];
+ card.height = canvas[1];
+ card.marginX = canvas[2];
+ card.marginY = canvas[3];
+ //canvases
+ canvasList.forEach(name => {
+ if (window[name + 'Canvas'].width != card.width * (1 + card.marginX) || window[name + 'Canvas'].height != card.height * (1 + card.marginY)) {
+ sizeCanvas(name);
+ }
+ });
+ if (resetOthers) {
+ setBottomInfoStyle();
+ //onload
+ card.onload = null;
+
+ card.hideBottomInfoBorder = false;
+ card.showsFlavorBar = true;
+ }
+}
+async function setBottomInfoStyle() {
+ if (document.querySelector('#enableNewCollectorStyle').checked) {
+ await loadBottomInfo({
+ midLeft: {text:'{elemidinfo-set} \u2022 {elemidinfo-language} {savex}{fontbelerenbsc}{fontsize' + scaleHeight(0.001) + '}{upinline' + scaleHeight(0.0005) + '}\uFFEE{savex2}{elemidinfo-artist}', x:0.0647, y:0.9548, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:card.bottomInfoColor, outlineWidth:0.003},
+ topLeft: {text:'{elemidinfo-rarity} {kerning3}{elemidinfo-number}{kerning0}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:card.bottomInfoColor, outlineWidth:0.003},
+ note: {text:'{loadx}{elemidinfo-note}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:card.bottomInfoColor, outlineWidth:0.003},
+ bottomLeft: {text:'NOT FOR SALE', x:0.0647, y:0.9719, width:0.8707, height:0.0143, oneLine:true, font:'gothammedium', size:0.0143, color:card.bottomInfoColor, outlineWidth:0.003},
+ wizards: {name:'wizards', text:'{ptshift0,0.0172}\u2122 & \u00a9 {elemidinfo-year} Wizards of the Coast', x:0.0647, y:0.9377, width:0.8707, height:0.0167, oneLine:true, font:'mplantin', size:0.0162, color:card.bottomInfoColor, align:'right', outlineWidth:0.003},
+ bottomRight: {text:'{ptshift0,0.0172}CardConjurer.com', x:0.0647, y:0.9548, width:0.8707, height:0.0143, oneLine:true, font:'mplantin', size:0.0143, color:card.bottomInfoColor, align:'right', outlineWidth:0.003}
+ });
+ } else {
+ await loadBottomInfo({
+ midLeft: {text:'{elemidinfo-set} \u2022 {elemidinfo-language} {savex}{fontbelerenbsc}{fontsize' + scaleHeight(0.001) + '}{upinline' + scaleHeight(0.0005) + '}\uFFEE{savex2}{elemidinfo-artist}', x:0.0647, y:0.9548, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color: card.bottomInfoColor, outlineWidth:0.003},
+ topLeft: {text:'{elemidinfo-number}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:card.bottomInfoColor, outlineWidth:0.003},
+ note: {text:'{loadx2}{elemidinfo-note}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:card.bottomInfoColor, outlineWidth:0.003},
+ rarity: {text:'{loadx}{elemidinfo-rarity}', x:0.0647, y:0.9377, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:card.bottomInfoColor, outlineWidth:0.003},
+ bottomLeft: {text:'NOT FOR SALE', x:0.0647, y:0.9719, width:0.8707, height:0.0143, oneLine:true, font:'gothammedium', size:0.0143, color:card.bottomInfoColor, outlineWidth:0.003},
+ wizards: {name:'wizards', text:'{ptshift0,0.0172}\u2122 & \u00a9 {elemidinfo-year} Wizards of the Coast', x:0.0647, y:0.9377, width:0.8707, height:0.0167, oneLine:true, font:'mplantin', size:0.0162, color:card.bottomInfoColor, align:'right', outlineWidth:0.003},
+ bottomRight: {text:'{ptshift0,0.0172}CardConjurer.com', x:0.0647, y:0.9548, width:0.8707, height:0.0143, oneLine:true, font:'mplantin', size:0.0143, color:card.bottomInfoColor, align:'right', outlineWidth:0.003}
+ });
+ }
+}
+//Canvas management
+function sizeCanvas(name, width = Math.round(card.width * (1 + 2 * card.marginX)), height = Math.round(card.height * (1 + 2 * card.marginY))) {
+ if (!window[name + 'Canvas']) {
+ window[name + 'Canvas'] = document.createElement('canvas');
+ window[name + 'Context'] = window[name + 'Canvas'].getContext('2d');
+ canvasList[canvasList.length] = name;
+ }
+ window[name + 'Canvas'].width = width;
+ window[name + 'Canvas'].height = height;
+ if (name == 'line') { //force true to view all canvases - must restore to name == 'line' for proper kerning adjustments
+ window[name + 'Canvas'].style = 'width: 20rem; height: 28rem; border: 1px solid red;';
+ const label = document.createElement('div');
+ label.innerHTML = name + 'No Mask
None selected ';
+ cardKeys.forEach(item => {
+ var cardKeyOption = document.createElement('option');
+ cardKeyOption.innerHTML = item;
+ document.querySelector('#load-card-options').appendChild(cardKeyOption);
+ });
+}
+function importChanged() {
+ var unique = document.querySelector('#importAllPrints').checked ? 'prints' : '';
+ fetchScryfallData(document.querySelector("#import-name").value, importCard, unique);
+}
+function saveCard(saveFromFile) {
+ var cardKeys = JSON.parse(localStorage.getItem('cardKeys')) || [];
+ var cardKey, cardToSave;
+ if (saveFromFile) {
+ cardKey = saveFromFile.key;
+ } else {
+ cardKey = getCardName();
+ }
+ if (!saveFromFile) {
+ cardKey = prompt('Enter the name you would like to save your card under:', cardKey);
+ if (!cardKey) {return null;}
+ }
+ cardKey = cardKey.trim();
+ if (cardKeys.includes(cardKey)) {
+ if (!confirm('Would you like to overwrite your card previously saved as "' + cardKey + '"?\n(Clicking "cancel" will affix a version number)')) {
+ var originalCardKey = cardKey;
+ var cardKeyNumber = 1;
+ while (cardKeys.includes(cardKey)) {
+ cardKey = originalCardKey + ' (' + cardKeyNumber + ')';
+ cardKeyNumber ++;
+ }
+ }
+ }
+ if (saveFromFile) {
+ cardToSave = saveFromFile.data;
+ } else {
+ cardToSave = JSON.parse(JSON.stringify(card));
+ cardToSave.frames.forEach(frame => {
+ delete frame.image;
+ frame.masks.forEach(mask => delete mask.image);
+ });
+ }
+ try {
+ localStorage.setItem(cardKey, JSON.stringify(cardToSave));
+ if (!cardKeys.includes(cardKey)) {
+ cardKeys.push(cardKey);
+ cardKeys.sort();
+ localStorage.setItem('cardKeys', JSON.stringify(cardKeys));
+ loadAvailableCards(cardKeys);
+ }
+ } catch (error) {
+ notify('You have exceeded your 5MB of local storage, and your card has failed to save. If you would like to continue saving cards, please download all saved cards, then delete all saved cards to free up space.