diff --git a/data/site/styles.css b/data/site/styles.css index 22be5812..5afc4738 100644 --- a/data/site/styles.css +++ b/data/site/styles.css @@ -44,18 +44,9 @@ --clear-mid: #fff4; --clear-dark: #fff6; } -footer { - background-color: var(--dark-color); - padding: 2.5em; - font: 1.3em gothammedium; - color: var(--light-color); -} -body { - margin: 0px; - background-image: url(images/lowpoly.png); - background-attachment: fixed; - background-size: cover; -} + + +/*Background & Footer*/ html { background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light)); background-attachment: fixed; @@ -66,9 +57,21 @@ html { user-select: none; font-size: 8pt; } -.selectable { - user-select: all; +body { + margin: 0px; + background-image: url(images/lowpoly.png); + background-attachment: fixed; + background-size: cover; } +footer { + background-color: var(--dark-color); + padding: 2.5em; + font: 1.3em gothammedium; + color: var(--light-color); +} + + +/*Canvas*/ canvas { width: calc(100%); height: auto; @@ -78,6 +81,9 @@ canvas { .canvasContainer { text-align: center; } + + +/*Grids*/ .mainGrid { padding: 0.3em; display: grid; @@ -85,13 +91,36 @@ canvas { grid-template-columns: auto; font: 1.6em mplantin; } -.imageGrid { +.splitGrid { display: grid; - grid-template-columns: auto 9em; - min-height: 12.5em; + grid-template-columns: 50% 50%; } -.imgPreview { - width: 100%; +.frameGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(4em, 1fr)); + grid-auto-rows: min-content; +} +.footerGrid { + display: grid; + grid-template-columns: auto; + grid-gap: 2em; +} +.autoGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); + grid-auto-rows: min-content; +} + + +/*Misc elements*/ +.download { + text-align: center; + font: 1.5em belerenbsc; +} +.pageTitle { + font: 5em belerenbsc; + text-align: center; + padding-top: 0.3em; } .bar { background-image: url(../images/manaSymbols/63.png); @@ -101,78 +130,55 @@ canvas { width: 100%; height: 1em; } -.cardMenu > div > div:nth-child(1) { -/* border: 1px solid blue;*/ -/* text-align: center;*/ -/* font: 1.5em belerenbsc;*/ -} -.twoGrid { - display: grid; - grid-template-columns: 50% auto; -} -.input, .textarea, .button, .select { - font: 1em mplantin; - background-color: var(--light-color); - border: 1px solid #aaae; - border-radius: 0.2em; - padding: 0px 0.2em; - outline: none; -} -.textarea { - min-height: 6em; - max-height: 18em; - resize: vertical; -} -.select { - background: #fafafa url(../images/manaSymbols/49.png) no-repeat calc(100% - 0.1em) 50%; - background-size: 1em 1em; - -webkit-appearance: none; -} -.autoGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); - grid-auto-rows: min-content; -} -.input.file { - padding: 0px; - height: 1.26em; -} -.tooltip { - position: relative; -} -.tooltip .tooltiptext { - visibility: hidden; - background-color: var(--dark-color); - color: var(--light-color); - text-align: center; - border-radius: 5px; - padding: 5px; - top: calc(100% + 5px); - left: 0px; - max-width: calc(100% - 10px); - width: auto; - position: absolute; - z-index: 1; - opacity: 0; - transition: opacity 0.5s; -} -.tooltip .tooltiptext::after { - content: " "; - position: absolute; - bottom: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: transparent transparent var(--dark-color) transparent; -} -.tooltip .tooltiptext:hover { - /*visibility: hidden;*/ - opacity: 0; -} -div.tooltip > * { +.imgPreview { width: 100%; } +.layer { + padding: 2em 2em; + color: black; + font-size: 2em; + text-align: center; + margin-bottom: 3em; + background-color: var(--light-color); + background-image: url(images/layerBackground.png); + background-position: center; + background-repeat: no-repeat; +} + + +/*Various text modifications*/ +.title { + text-align: center; + font: 1.5em belerenbsc; +} +.truncate { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-indent: 0em; +} +.paragraph { + font: 1em mplantin; + text-align: left; +} +.indent { + text-indent: 2em; +} + + +/*General modifications*/ +.hidden { + display: none; +} +.visible { + display: inline-block; +} +.selectable { + user-select: all; +} + + +/*Hyperlinks*/ a { color: black; } @@ -185,63 +191,10 @@ footer a { footer a:hover { color: var(--shifting-color-1-light); } -.hidden { - display: none; -} -.footerGrid { - display: grid; - grid-template-columns: auto; - grid-gap: 2em; -} -.layer { - padding: 2em 2em; - color: black; - font-size: 2em; - text-align: center; - margin-bottom: 3em; -} -.layer { /*:nth-child(even)*/ - background-color: var(--light-color); - background-image: url(images/layerBackground.png); - background-position: center; - background-repeat: no-repeat; -} -.title { - text-align: center; - font: 1.5em belerenbsc; -} -.pageTitle { - font: 5em belerenbsc; - text-align: center; - padding-top: 0.3em; -} -.paragraph { - font: 1em mplantin; - text-align: left; -} -.indent { - text-indent: 2em; -} -.leftMargin { - margin-left: 2em; -} -.donate > div:hover { - text-decoration: underline; -} -.donate > div { - background-color: var(--clear-light); - border-radius: 2em; - font: 2em belerenbsc; -} -.donate > div > img { - height: 1em; - position: relative; - top: 0.15em; - left: 0.15em; -} + /*Controls the area taken by the canvas*/ -@media screen and (min-width: 888pt) { +@media screen and (min-width: 905pt) { /*Makes room for the canvas and controls to be side by side*/ .mainGrid { padding: 1.5em; @@ -262,7 +215,7 @@ footer a:hover { } } /*These control tooltips for mobile devices vs. desktops/laptops*/ -@media screen and (min-width: 1024px) { +/*@media screen and (min-width: 1024px) { .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; @@ -273,8 +226,8 @@ footer a:hover { visibility: visible; opacity: 1; } -} -/*The footer can now fit horizontally!*/ +}*/ +/*Allows the footer to be displayed horizontally on Desktop*/ @media screen and (min-width: 375pt) { .footerGrid { display: grid; @@ -284,106 +237,131 @@ footer a:hover { } -/*WIP*/ -.tab { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr)); - grid-auto-rows: min-content; +/*WIP (or I'm too lazy to sort these)*/ +.tabMenu { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); + grid-auto-rows: min-content; } -.tab.tabSelect { - grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); +.tabOption, .textTabButton { + font: 1.5em belerenbsc; + text-align: center; + background-color: var(--clear-light); + border: 1px solid var(--light-color); + transition: 0.5s; } -.tabButton.tabSelectButton { - font: 1em belerenb; +.tabOption:hover, .textTabButton:hover { + background-color: var(--clear-mid); + transition: 0s; } -.tabButton { - text-align: center; - background: var(--clear-light); - border: 1px solid var(--light-color); - font: 1.2em belerenbsc; - padding: 0.1em 0em; - transition: 0.33s; +.tabOption.tabOptionSelected, .textTabButton.activeTextTab { + background-color: var(--clear-dark); } -.tabButton:hover { - background-color: var(--clear-mid); - transition: 0s; -} -.tabButton.activeTab { - background: var(--clear-dark); - text-decoration: underline; - text-decoration-color: var(--shifting-color-1-light) -} -.tabContent { - display: none; -} -.tabContent.displayed { - display: block; +.tabContent:not(.tabVisible) { + display: none; } -.download { - text-align: center; - font: 1.5em belerenbsc; +.cardMasterElement { + font: 1em belerenbsc; + background-color: var(--clear-light); + border: 1px solid var(--light-color); + border-radius: 0.25em; + padding: 0.5em; + margin-top: 0.25em; } -.truncate { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-indent: 0em; +.cardMasterElement img { + max-height: 2em; + max-width: 2em; + position: absolute; + transform: translate(1em, -0.35em); } -.tab, button, select, option { - cursor: pointer; +.cardmasterElement img.cardMasterElementMaskImage { + transform: translate(3.5em, -0.35em); } -/*Custom Checkboxes*/ -.realCheckboxContainer { - margin-top: 0.45em +.cardMasterElementMoving { + background-color: var(--clear-dark); } -.checkboxContainer { - position: relative; - padding-left: 1.5em; - padding-top: 0.25em; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.closeCardMasterElement { + cursor: pointer; + position: absolute; + /*top: 50%;*/ + left: 96%; + /*padding: 12px 16px;*/ + /*transform: translate(0%, -50%);*/ } -.checkboxContainer input { - position: absolute; - opacity: 0; - height: 0; - width: 0; + + + +#framePicker, #maskPicker { + max-height: 260pt; + overflow-y: auto; + overflow-x: hidden; + border: 1px solid var(--light-color); } -.checkmark { - position: absolute; - top: 0; - left: 0; - height: 1.2em; - width: 1.2em; - transition: 0.33s; - background-color: var(--clear-light); - border: 1px solid var(--light-color) +.frameOption { + height: 4em; + text-align: center; + width: 100%; } -.checkboxContainer:hover input ~ .checkmark { - background-color: var(--clear-dark); +.frameOption img { + max-width: 4em; + max-height: 4em; } -.checkboxContainer input:checked ~ .checkmark { - background-color: var(--dark-color); +.maskOption img { + max-width: 2em; + max-height: 2em; } -.checkmark:after { - content: "X"; - font: 1.2em gothammedium; - color: white; - position: absolute; - opacity: 0; - transition: 0.33s; +.frameOption.frameOptionSelected, .maskOption.maskOptionSelected { + background-color: var(--clear-dark); } -.checkboxContainer input:checked ~ .checkmark:after { - opacity: 1; +.maskOption, .frameOption { + background-color: var(--clear-light); + border: 1px solid var(--light-color); + border-radius: 0.25em; } -.checkboxContainer .checkmark:after { - left: 0.15em; - top: -0.1em; +.maskOption { + margin-left: 0.5em; + padding: 0.125em; + width: calc(100% - 1.4em); } + + +.textarea { + width: 100%; + min-height: 8em; + max-height: 24em; + resize: vertical; +} +.textTabButton { + font-size: 1em; +} +.textTab { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); + grid-auto-rows: min-content; +} + +.input, .textarea, .button, .select { + font: 1em mplantin; + background-color: var(--light-color); + border: 1px solid #aaa; + border-radius: 0.2em; + padding: 0px 0.2em; + outline: none; + width: 100%; +} +.inputOpacity { + font: 1em mplantin; + background-color: var(--light-color); + border: 1px solid #aaa; + border-radius: 0.2em; + padding: 0px 0.2em; + outline: none; + width: 2.9em; +} + + + #textCodeTutorial { display: grid; grid-template-columns: 6.5em auto; @@ -398,3 +376,6 @@ footer a:hover { } +input[type="checkbox"], .frameOption, .maskOption, .button { + cursor: pointer; +} \ No newline at end of file diff --git a/index.html b/index.html index 8df9eaa0..60c8054f 100644 --- a/index.html +++ b/index.html @@ -14,95 +14,81 @@
- +
-
-
Frame
-
Text
-
Art
-
Collector
-
Set
-
Watermark
+ +
+
Frame
+
Text
+
Art
+
Collector
+
Set Symbol
+
Watermark
-
-
- Select the part of the card frame:
-
-
- -
- Select the color:
-

-
-
- - -
-
-
Preview of the selected image
-
-
-
-
Select the part of the card frame
-
Enter the opacity for the selected part of the frame
-
-
-
-
-
Edit the selected text
-
Enter the mana cost. Include spaces!
+
+
+
+
+
+
+ + +
+
No frame selected
+
+
+
+
+ +
How To Use Text Codes
Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do:
-
-
-
+
+
+
-
Upload an image for the card art
-
Enter a URL for the card art
-
Enter a card name to use its art
-
Select which art to use (from the entered card name)
+ + + +
-
Placement & Zoom:
-
Shift art to the right
-
Shift art down
-
Art zoom level
+
X, Y, & Zoom:
+ + +
-
-
-
-
Card Number
-
Rarity
-
Set Code
-
Language
-
Artist's Name
(necessary)
+
+
+
+ + + + +
-
-
-
-
Upload an image for the set symbol
-
Enter a URL for the set symbol
-
Use a set code
(2-3 letters, as seen on the bottom of cards)
-
C, U, R, M, or S
(Not every set has every rarity)
-
Use a random set symbol and rarity
+
+
+
+ + + + +
-
-
-
-
Upload an image for the watermark
-
Enter a URL for the watermark
-
Use a set code
(2-3 letters, as seen on the bottom of cards)
-
+ + + Select the watermark color
-
+ Select the secondary watermark color
+
-
+
+
@@ -147,23 +134,13 @@
Want More Customization?
-
+
This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, click here.
- - - - - - - - - -
Have Any Questions?
@@ -176,8 +153,6 @@
Card Conjurer By Kyle Burton
- Display tooltips
- Advanced Borders
Navigation:
@@ -191,7 +166,8 @@
- - - + + + + diff --git a/data/images/imageSpreadsheet.csv b/old/3.0/images/imageSpreadsheet.csv similarity index 98% rename from data/images/imageSpreadsheet.csv rename to old/3.0/images/imageSpreadsheet.csv index b60d47ba..542fa5c0 100644 --- a/data/images/imageSpreadsheet.csv +++ b/old/3.0/images/imageSpreadsheet.csv @@ -1,137 +1,137 @@ -version,color,type,displayName,maskVersion,x,y,width,height,secondary,advanced -m15,W,Full,White,m15,0,0,1,1,TRUE,FALSE -m15,U,Full,Blue,m15,0,0,1,1,TRUE,FALSE -m15,B,Full,Black,m15,0,0,1,1,TRUE,FALSE -m15,R,Full,Red,m15,0,0,1,1,TRUE,FALSE -m15,G,Full,Green,m15,0,0,1,1,TRUE,FALSE -m15,M,Full,Multicolored,m15,0,0,1,1,TRUE,FALSE -m15,A,Full,Artifact,m15,0,0,1,1,TRUE,FALSE -m15,C,Full,Colorless,m15,0,0,1,1,TRUE,FALSE -m15,Mask,Frame,,m15,0,0,1,1,TRUE,FALSE -m15,Mask,Pinline,,m15,0,0,1,1,TRUE,FALSE -m15,Mask,Title,,m15,0,0,1,1,TRUE,FALSE -m15,Mask,Type,,m15,0,0,1,1,TRUE,FALSE -m15,Mask,Rules,,m15,0,0,1,1,TRUE,FALSE -none,Mask,Secondary,,none,0,0,1,1,TRUE,FALSE -m15,W,PT,White,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE -m15,U,PT,Blue,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE -m15,B,PT,Black,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE -m15,R,PT,Red,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE -m15,G,PT,Green,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE -m15,M,PT,Multicolored,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE -m15,A,PT,Artifact,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE -m15,C,PT,Colorless,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE -none,Mask,Corners,,none,0.0267,0.0191,0.952,0.1771,FALSE,FALSE -m15,W,Legendary,White,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE -m15,U,Legendary,Blue,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE -m15,B,Legendary,Black,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE -m15,R,Legendary,Red,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE -m15,G,Legendary,Green,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE -m15,M,Legendary,Multicolored,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE -m15,A,Legendary,Artifact,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE -m15,C,Legendary,Colorless,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE -none,Mask,Stamp,,none,0.4387,0.9039,0.12,0.0477,FALSE,FALSE -m15,W,RareStamp,White,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE -m15,U,RareStamp,Blue,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE -m15,B,RareStamp,Black,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE -m15,R,RareStamp,Red,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE -m15,G,RareStamp,Green,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE -m15,M,RareStamp,Multicolored,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE -m15,A,RareStamp,Artifact,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE -m15,C,RareStamp,Colorless,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE -m15,V,PT,Vehicle,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE -m15,V,Full,Vehicle,m15,0,0,1,1,TRUE,FALSE -m15,WL,Full,White Land,m15,0,0,1,1,TRUE,FALSE -m15,UL,Full,Blue Land,m15,0,0,1,1,TRUE,FALSE -m15,BL,Full,Black Land,m15,0,0,1,1,TRUE,FALSE -m15,RL,Full,Red Land,m15,0,0,1,1,TRUE,FALSE -m15,GL,Full,Green Land,m15,0,0,1,1,TRUE,FALSE -m15,ML,Full,Multicolored Land,m15,0,0,1,1,TRUE,FALSE -m15,CL,Full,Colorless Land,m15,0,0,1,1,TRUE,FALSE -m15,W,Miracle,White,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE -m15,U,Miracle,Blue,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE -m15,B,Miracle,Black,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE -m15,R,Miracle,Red,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE -m15,G,Miracle,Green,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE -m15,M,Miracle,Multicolored,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE -m15,C,Miracle,Colorless,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE -m15,A,Miracle,Artifact,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE -m15,W,Nyx,White,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,U,Nyx,Blue,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,B,Nyx,Black,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,R,Nyx,Red,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,G,Nyx,Green,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,M,Nyx,Multicolored,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,A,Nyx,Artifact,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,C,Nyx,Colorless,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,WL,Nyx,White Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,UL,Nyx,Blue Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,BL,Nyx,Black Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,RL,Nyx,Red Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,GL,Nyx,Green Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,ML,Nyx,Multicolored Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,CL,Nyx,Colorless Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE -m15,WD,Full,White (Dark),m15,0,0,1,1,TRUE,TRUE -m15,UD,Full,Blue (Dark),m15,0,0,1,1,TRUE,TRUE -m15,BD,Full,Black (Dark),m15,0,0,1,1,TRUE,TRUE -m15,RD,Full,Red (Dark),m15,0,0,1,1,TRUE,TRUE -m15,GD,Full,Green (Dark),m15,0,0,1,1,TRUE,TRUE -m15,MD,Full,Multicolored (Dark),m15,0,0,1,1,TRUE,TRUE -m15,AD,Full,Artifact (Dark),m15,0,0,1,1,TRUE,TRUE -m15,CD,Full,Colorless (Dark),m15,0,0,1,1,TRUE,TRUE -m15,WLD,Full,White Land (Dark),m15,0,0,1,1,TRUE,TRUE -m15,ULD,Full,Blue Land (Dark),m15,0,0,1,1,TRUE,TRUE -m15,BLD,Full,Black Land (Dark),m15,0,0,1,1,TRUE,TRUE -m15,RLD,Full,Red Land (Dark),m15,0,0,1,1,TRUE,TRUE -m15,GLD,Full,Green Land (Dark),m15,0,0,1,1,TRUE,TRUE -m15,MLD,Full,Multicolored Land (Dark),m15,0,0,1,1,TRUE,TRUE -m15,CLD,Full,Colorless Land (Dark),m15,0,0,1,1,TRUE,TRUE -m15,WD,PT,White (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE -m15,UD,PT,Blue (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE -m15,BD,PT,Black (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE -m15,RD,PT,Red (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE -m15,GD,PT,Green (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE -m15,MD,PT,Multicolored (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE -m15,AD,PT,Artifact (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE -m15,CD,PT,Colorless (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE -m15,W,FlipPT,White,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,U,FlipPT,Blue,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,B,FlipPT,Black,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,R,FlipPT,Red,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,G,FlipPT,Green,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,M,FlipPT,Multicolored,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,A,FlipPT,Artifact,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,C,FlipPT,Colorless,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,WL,FlipPT,White Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,UL,FlipPT,Blue Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,BL,FlipPT,Black Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,RL,FlipPT,Red Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,GL,FlipPT,Green Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,ML,FlipPT,Multicolorled Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,CL,FlipPT,Colorless Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE -m15,W,FlipCircle,White,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE -m15,U,FlipCircle,Blue,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE -m15,B,FlipCircle,Black,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE -m15,R,FlipCircle,Red,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE -m15,G,FlipCircle,Green,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE -m15,M,FlipCircle,Multicolored,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE -m15,A,FlipCircle,Artifact,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE -m15,C,FlipCircle,Colorless,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE -m15,Artifact,FlipIcon,Artifact,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Blank,FlipIcon,Blank,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Compass,FlipIcon,Compass,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Creature,FlipIcon,Creature,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Day,FlipIcon,Day,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Eldrazi,FlipIcon,Eldrazi,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Enchantment,FlipIcon,Enchantment,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Instant,FlipIcon,Instant,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Land,FlipIcon,Land,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Moon,FlipIcon,Moon,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Multitype,FlipIcon,Multitype,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Night,FlipIcon,Night,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Planeshift,FlipIcon,Planeshift,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Planeswalker,FlipIcon,Planeswalker,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Sorcery,FlipIcon,Sorcery,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Structure,FlipIcon,Structure,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE -m15,Mask,Border,m15MaskBorder,m15,0,0,1,1,TRUE,FALSE +version,color,type,displayName,maskVersion,x,y,width,height,secondary,advanced +m15,W,Full,White,m15,0,0,1,1,TRUE,FALSE +m15,U,Full,Blue,m15,0,0,1,1,TRUE,FALSE +m15,B,Full,Black,m15,0,0,1,1,TRUE,FALSE +m15,R,Full,Red,m15,0,0,1,1,TRUE,FALSE +m15,G,Full,Green,m15,0,0,1,1,TRUE,FALSE +m15,M,Full,Multicolored,m15,0,0,1,1,TRUE,FALSE +m15,A,Full,Artifact,m15,0,0,1,1,TRUE,FALSE +m15,C,Full,Colorless,m15,0,0,1,1,TRUE,FALSE +m15,Mask,Frame,,m15,0,0,1,1,TRUE,FALSE +m15,Mask,Pinline,,m15,0,0,1,1,TRUE,FALSE +m15,Mask,Title,,m15,0,0,1,1,TRUE,FALSE +m15,Mask,Type,,m15,0,0,1,1,TRUE,FALSE +m15,Mask,Rules,,m15,0,0,1,1,TRUE,FALSE +none,Mask,Secondary,,none,0,0,1,1,TRUE,FALSE +m15,W,PT,White,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE +m15,U,PT,Blue,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE +m15,B,PT,Black,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE +m15,R,PT,Red,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE +m15,G,PT,Green,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE +m15,M,PT,Multicolored,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE +m15,A,PT,Artifact,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE +m15,C,PT,Colorless,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE +none,Mask,Corners,,none,0.0267,0.0191,0.952,0.1771,FALSE,FALSE +m15,W,Legendary,White,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE +m15,U,Legendary,Blue,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE +m15,B,Legendary,Black,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE +m15,R,Legendary,Red,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE +m15,G,Legendary,Green,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE +m15,M,Legendary,Multicolored,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE +m15,A,Legendary,Artifact,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE +m15,C,Legendary,Colorless,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE +none,Mask,Stamp,,none,0.4387,0.9039,0.12,0.0477,FALSE,FALSE +m15,W,RareStamp,White,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE +m15,U,RareStamp,Blue,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE +m15,B,RareStamp,Black,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE +m15,R,RareStamp,Red,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE +m15,G,RareStamp,Green,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE +m15,M,RareStamp,Multicolored,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE +m15,A,RareStamp,Artifact,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE +m15,C,RareStamp,Colorless,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE +m15,V,PT,Vehicle,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE +m15,V,Full,Vehicle,m15,0,0,1,1,TRUE,FALSE +m15,WL,Full,White Land,m15,0,0,1,1,TRUE,FALSE +m15,UL,Full,Blue Land,m15,0,0,1,1,TRUE,FALSE +m15,BL,Full,Black Land,m15,0,0,1,1,TRUE,FALSE +m15,RL,Full,Red Land,m15,0,0,1,1,TRUE,FALSE +m15,GL,Full,Green Land,m15,0,0,1,1,TRUE,FALSE +m15,ML,Full,Multicolored Land,m15,0,0,1,1,TRUE,FALSE +m15,CL,Full,Colorless Land,m15,0,0,1,1,TRUE,FALSE +m15,W,Miracle,White,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE +m15,U,Miracle,Blue,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE +m15,B,Miracle,Black,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE +m15,R,Miracle,Red,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE +m15,G,Miracle,Green,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE +m15,M,Miracle,Multicolored,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE +m15,C,Miracle,Colorless,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE +m15,A,Miracle,Artifact,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE +m15,W,Nyx,White,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,U,Nyx,Blue,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,B,Nyx,Black,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,R,Nyx,Red,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,G,Nyx,Green,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,M,Nyx,Multicolored,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,A,Nyx,Artifact,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,C,Nyx,Colorless,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,WL,Nyx,White Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,UL,Nyx,Blue Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,BL,Nyx,Black Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,RL,Nyx,Red Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,GL,Nyx,Green Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,ML,Nyx,Multicolored Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,CL,Nyx,Colorless Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE +m15,WD,Full,White (Dark),m15,0,0,1,1,TRUE,TRUE +m15,UD,Full,Blue (Dark),m15,0,0,1,1,TRUE,TRUE +m15,BD,Full,Black (Dark),m15,0,0,1,1,TRUE,TRUE +m15,RD,Full,Red (Dark),m15,0,0,1,1,TRUE,TRUE +m15,GD,Full,Green (Dark),m15,0,0,1,1,TRUE,TRUE +m15,MD,Full,Multicolored (Dark),m15,0,0,1,1,TRUE,TRUE +m15,AD,Full,Artifact (Dark),m15,0,0,1,1,TRUE,TRUE +m15,CD,Full,Colorless (Dark),m15,0,0,1,1,TRUE,TRUE +m15,WLD,Full,White Land (Dark),m15,0,0,1,1,TRUE,TRUE +m15,ULD,Full,Blue Land (Dark),m15,0,0,1,1,TRUE,TRUE +m15,BLD,Full,Black Land (Dark),m15,0,0,1,1,TRUE,TRUE +m15,RLD,Full,Red Land (Dark),m15,0,0,1,1,TRUE,TRUE +m15,GLD,Full,Green Land (Dark),m15,0,0,1,1,TRUE,TRUE +m15,MLD,Full,Multicolored Land (Dark),m15,0,0,1,1,TRUE,TRUE +m15,CLD,Full,Colorless Land (Dark),m15,0,0,1,1,TRUE,TRUE +m15,WD,PT,White (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE +m15,UD,PT,Blue (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE +m15,BD,PT,Black (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE +m15,RD,PT,Red (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE +m15,GD,PT,Green (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE +m15,MD,PT,Multicolored (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE +m15,AD,PT,Artifact (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE +m15,CD,PT,Colorless (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE +m15,W,FlipPT,White,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,U,FlipPT,Blue,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,B,FlipPT,Black,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,R,FlipPT,Red,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,G,FlipPT,Green,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,M,FlipPT,Multicolored,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,A,FlipPT,Artifact,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,C,FlipPT,Colorless,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,WL,FlipPT,White Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,UL,FlipPT,Blue Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,BL,FlipPT,Black Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,RL,FlipPT,Red Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,GL,FlipPT,Green Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,ML,FlipPT,Multicolorled Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,CL,FlipPT,Colorless Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE +m15,W,FlipCircle,White,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE +m15,U,FlipCircle,Blue,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE +m15,B,FlipCircle,Black,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE +m15,R,FlipCircle,Red,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE +m15,G,FlipCircle,Green,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE +m15,M,FlipCircle,Multicolored,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE +m15,A,FlipCircle,Artifact,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE +m15,C,FlipCircle,Colorless,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE +m15,Artifact,FlipIcon,Artifact,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Blank,FlipIcon,Blank,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Compass,FlipIcon,Compass,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Creature,FlipIcon,Creature,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Day,FlipIcon,Day,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Eldrazi,FlipIcon,Eldrazi,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Enchantment,FlipIcon,Enchantment,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Instant,FlipIcon,Instant,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Land,FlipIcon,Land,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Moon,FlipIcon,Moon,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Multitype,FlipIcon,Multitype,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Night,FlipIcon,Night,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Planeshift,FlipIcon,Planeshift,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Planeswalker,FlipIcon,Planeswalker,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Sorcery,FlipIcon,Sorcery,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Structure,FlipIcon,Structure,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE +m15,Mask,Border,m15MaskBorder,m15,0,0,1,1,TRUE,FALSE m15,Default,Border,m15DefaultBorder,m15,0,0,1,1,TRUE,FALSE \ No newline at end of file diff --git a/data/images/m15MaskBorder.png b/old/3.0/images/m15MaskBorder.png similarity index 100% rename from data/images/m15MaskBorder.png rename to old/3.0/images/m15MaskBorder.png diff --git a/data/images/m15MaskFrame.png b/old/3.0/images/m15MaskFrame.png similarity index 100% rename from data/images/m15MaskFrame.png rename to old/3.0/images/m15MaskFrame.png diff --git a/data/images/m15MaskPinline.png b/old/3.0/images/m15MaskPinline.png similarity index 100% rename from data/images/m15MaskPinline.png rename to old/3.0/images/m15MaskPinline.png diff --git a/data/images/m15MaskRules.png b/old/3.0/images/m15MaskRules.png similarity index 100% rename from data/images/m15MaskRules.png rename to old/3.0/images/m15MaskRules.png diff --git a/data/images/m15MaskTitle.png b/old/3.0/images/m15MaskTitle.png similarity index 100% rename from data/images/m15MaskTitle.png rename to old/3.0/images/m15MaskTitle.png diff --git a/data/images/m15MaskType.png b/old/3.0/images/m15MaskType.png similarity index 100% rename from data/images/m15MaskType.png rename to old/3.0/images/m15MaskType.png diff --git a/data/images/noneMaskCorners.png b/old/3.0/images/noneMaskCorners.png similarity index 100% rename from data/images/noneMaskCorners.png rename to old/3.0/images/noneMaskCorners.png diff --git a/data/images/noneMaskSecondary.png b/old/3.0/images/noneMaskSecondary.png similarity index 100% rename from data/images/noneMaskSecondary.png rename to old/3.0/images/noneMaskSecondary.png diff --git a/data/images/noneMaskStamp.png b/old/3.0/images/noneMaskStamp.png similarity index 100% rename from data/images/noneMaskStamp.png rename to old/3.0/images/noneMaskStamp.png diff --git a/old/3.0/index.html b/old/3.0/index.html new file mode 100644 index 00000000..8df9eaa0 --- /dev/null +++ b/old/3.0/index.html @@ -0,0 +1,197 @@ + + + + Card Conjurer + + + + + + +
+
+ Card Conjurer +
+
+
+ +
+
+
+
Frame
+
Text
+
Art
+
Collector
+
Set
+
Watermark
+
+
+
+ Select the part of the card frame:
+
+
+ +
+ Select the color:
+

+
+
+ + +
+
+
Preview of the selected image
+
+
+
+
Select the part of the card frame
+
Enter the opacity for the selected part of the frame
+
+
+
+
+
Edit the selected text
+
Enter the mana cost. Include spaces!
+
+
How To Use Text Codes
+
+ Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do: +
+
+
+
+
+
+
Upload an image for the card art
+
Enter a URL for the card art
+
Enter a card name to use its art
+
Select which art to use (from the entered card name)
+
+
+
Placement & Zoom:
+
Shift art to the right
+
Shift art down
+
Art zoom level
+
+
+
+
+
+
Card Number
+
Rarity
+
Set Code
+
Language
+
Artist's Name
(necessary)
+
+
+
+
+
Upload an image for the set symbol
+
Enter a URL for the set symbol
+
Use a set code
(2-3 letters, as seen on the bottom of cards)
+
C, U, R, M, or S
(Not every set has every rarity)
+
Use a random set symbol and rarity
+
+
+
+
+
Upload an image for the watermark
+
Enter a URL for the watermark
+
Use a set code
(2-3 letters, as seen on the bottom of cards)
+
Select the watermark color
+
Select the secondary watermark color
+
+
+
+
+
+ Download +
+
+
+
+ +
+
Welcome to Card Conjurer!
+
Card Conjurer is a free program that helps you create custom Magic: The Gathering cards. There are already plenty of custom card makers out there, but what sets Card Conjurer apart from the rest is its live-edit capabilities. You can immediatly see the effects of any change you make, which makes card customization easier and overall a better experience.
+
+
+
About Me
+
+ Hi! My name is Kyle Burton and I am currently a high school student. I used to play Pokemon, but when a friend introduced me to Magic in 2013 I sold my pocket monsters and bought an M14 Intro Pack. Ever since that day Magic has been my all time favorite game. In addition to playing games, I've always loved technology. During the 2017-18 school year I tought myself how to code Javascript, and a little bit of HTML and CSS. The following summer I created Kyle's Card Imager (KCI). It was pretty simple but I soon began to add more border images like Miracle or Nyx. After a few months I decided to share my creation, so I renamed it Card Conjurer and uploaded it to Github, and then in April of 2019 I bought the domain cardconjurer.com. +
+
+
+
Want More Customization?
+
+ If you'd like to try out some more frames, scroll to the bottom of this page and check the box next to "Advanced Borders" - CardConjurer.com will remember this setting, so you only need to do this once per device. +
+
+ This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, click here. +
+
+ + + + + + + + + + +
+
Have Any Questions?
+
+ If you have any questions please don't hesitate to email me at:
CardConjurerMTG@gmail.com
Even if you made a cool card and want to share, I'd love to see it! +
+
+
+ + + + + + diff --git a/data/versions/m15Version.js b/old/3.0/m15Version.js similarity index 100% rename from data/versions/m15Version.js rename to old/3.0/m15Version.js diff --git a/data/site/main.js b/old/3.0/main.js similarity index 100% rename from data/site/main.js rename to old/3.0/main.js diff --git a/data/site/newStyles.css b/old/3.0/styles.css similarity index 56% rename from data/site/newStyles.css rename to old/3.0/styles.css index 5afc4738..22be5812 100644 --- a/data/site/newStyles.css +++ b/old/3.0/styles.css @@ -44,9 +44,18 @@ --clear-mid: #fff4; --clear-dark: #fff6; } - - -/*Background & Footer*/ +footer { + background-color: var(--dark-color); + padding: 2.5em; + font: 1.3em gothammedium; + color: var(--light-color); +} +body { + margin: 0px; + background-image: url(images/lowpoly.png); + background-attachment: fixed; + background-size: cover; +} html { background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light)); background-attachment: fixed; @@ -57,21 +66,9 @@ html { user-select: none; font-size: 8pt; } -body { - margin: 0px; - background-image: url(images/lowpoly.png); - background-attachment: fixed; - background-size: cover; +.selectable { + user-select: all; } -footer { - background-color: var(--dark-color); - padding: 2.5em; - font: 1.3em gothammedium; - color: var(--light-color); -} - - -/*Canvas*/ canvas { width: calc(100%); height: auto; @@ -81,9 +78,6 @@ canvas { .canvasContainer { text-align: center; } - - -/*Grids*/ .mainGrid { padding: 0.3em; display: grid; @@ -91,36 +85,13 @@ canvas { grid-template-columns: auto; font: 1.6em mplantin; } -.splitGrid { +.imageGrid { display: grid; - grid-template-columns: 50% 50%; + grid-template-columns: auto 9em; + min-height: 12.5em; } -.frameGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(4em, 1fr)); - grid-auto-rows: min-content; -} -.footerGrid { - display: grid; - grid-template-columns: auto; - grid-gap: 2em; -} -.autoGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); - grid-auto-rows: min-content; -} - - -/*Misc elements*/ -.download { - text-align: center; - font: 1.5em belerenbsc; -} -.pageTitle { - font: 5em belerenbsc; - text-align: center; - padding-top: 0.3em; +.imgPreview { + width: 100%; } .bar { background-image: url(../images/manaSymbols/63.png); @@ -130,55 +101,78 @@ canvas { width: 100%; height: 1em; } -.imgPreview { +.cardMenu > div > div:nth-child(1) { +/* border: 1px solid blue;*/ +/* text-align: center;*/ +/* font: 1.5em belerenbsc;*/ +} +.twoGrid { + display: grid; + grid-template-columns: 50% auto; +} +.input, .textarea, .button, .select { + font: 1em mplantin; + background-color: var(--light-color); + border: 1px solid #aaae; + border-radius: 0.2em; + padding: 0px 0.2em; + outline: none; +} +.textarea { + min-height: 6em; + max-height: 18em; + resize: vertical; +} +.select { + background: #fafafa url(../images/manaSymbols/49.png) no-repeat calc(100% - 0.1em) 50%; + background-size: 1em 1em; + -webkit-appearance: none; +} +.autoGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); + grid-auto-rows: min-content; +} +.input.file { + padding: 0px; + height: 1.26em; +} +.tooltip { + position: relative; +} +.tooltip .tooltiptext { + visibility: hidden; + background-color: var(--dark-color); + color: var(--light-color); + text-align: center; + border-radius: 5px; + padding: 5px; + top: calc(100% + 5px); + left: 0px; + max-width: calc(100% - 10px); + width: auto; + position: absolute; + z-index: 1; + opacity: 0; + transition: opacity 0.5s; +} +.tooltip .tooltiptext::after { + content: " "; + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent var(--dark-color) transparent; +} +.tooltip .tooltiptext:hover { + /*visibility: hidden;*/ + opacity: 0; +} +div.tooltip > * { width: 100%; } -.layer { - padding: 2em 2em; - color: black; - font-size: 2em; - text-align: center; - margin-bottom: 3em; - background-color: var(--light-color); - background-image: url(images/layerBackground.png); - background-position: center; - background-repeat: no-repeat; -} - - -/*Various text modifications*/ -.title { - text-align: center; - font: 1.5em belerenbsc; -} -.truncate { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-indent: 0em; -} -.paragraph { - font: 1em mplantin; - text-align: left; -} -.indent { - text-indent: 2em; -} - - -/*General modifications*/ -.hidden { - display: none; -} -.visible { - display: inline-block; -} -.selectable { - user-select: all; -} - - -/*Hyperlinks*/ a { color: black; } @@ -191,10 +185,63 @@ footer a { footer a:hover { color: var(--shifting-color-1-light); } - +.hidden { + display: none; +} +.footerGrid { + display: grid; + grid-template-columns: auto; + grid-gap: 2em; +} +.layer { + padding: 2em 2em; + color: black; + font-size: 2em; + text-align: center; + margin-bottom: 3em; +} +.layer { /*:nth-child(even)*/ + background-color: var(--light-color); + background-image: url(images/layerBackground.png); + background-position: center; + background-repeat: no-repeat; +} +.title { + text-align: center; + font: 1.5em belerenbsc; +} +.pageTitle { + font: 5em belerenbsc; + text-align: center; + padding-top: 0.3em; +} +.paragraph { + font: 1em mplantin; + text-align: left; +} +.indent { + text-indent: 2em; +} +.leftMargin { + margin-left: 2em; +} +.donate > div:hover { + text-decoration: underline; +} +.donate > div { + background-color: var(--clear-light); + border-radius: 2em; + font: 2em belerenbsc; +} +.donate > div > img { + height: 1em; + position: relative; + top: 0.15em; + left: 0.15em; +} /*Controls the area taken by the canvas*/ -@media screen and (min-width: 905pt) { +@media screen and (min-width: 888pt) { /*Makes room for the canvas and controls to be side by side*/ .mainGrid { padding: 1.5em; @@ -215,7 +262,7 @@ footer a:hover { } } /*These control tooltips for mobile devices vs. desktops/laptops*/ -/*@media screen and (min-width: 1024px) { +@media screen and (min-width: 1024px) { .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; @@ -226,8 +273,8 @@ footer a:hover { visibility: visible; opacity: 1; } -}*/ -/*Allows the footer to be displayed horizontally on Desktop*/ +} +/*The footer can now fit horizontally!*/ @media screen and (min-width: 375pt) { .footerGrid { display: grid; @@ -237,131 +284,106 @@ footer a:hover { } -/*WIP (or I'm too lazy to sort these)*/ -.tabMenu { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); - grid-auto-rows: min-content; +/*WIP*/ +.tab { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr)); + grid-auto-rows: min-content; } -.tabOption, .textTabButton { - font: 1.5em belerenbsc; - text-align: center; - background-color: var(--clear-light); - border: 1px solid var(--light-color); - transition: 0.5s; +.tab.tabSelect { + grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); } -.tabOption:hover, .textTabButton:hover { - background-color: var(--clear-mid); - transition: 0s; +.tabButton.tabSelectButton { + font: 1em belerenb; } -.tabOption.tabOptionSelected, .textTabButton.activeTextTab { - background-color: var(--clear-dark); +.tabButton { + text-align: center; + background: var(--clear-light); + border: 1px solid var(--light-color); + font: 1.2em belerenbsc; + padding: 0.1em 0em; + transition: 0.33s; } -.tabContent:not(.tabVisible) { - display: none; +.tabButton:hover { + background-color: var(--clear-mid); + transition: 0s; +} +.tabButton.activeTab { + background: var(--clear-dark); + text-decoration: underline; + text-decoration-color: var(--shifting-color-1-light) +} +.tabContent { + display: none; +} +.tabContent.displayed { + display: block; } -.cardMasterElement { - font: 1em belerenbsc; - background-color: var(--clear-light); - border: 1px solid var(--light-color); - border-radius: 0.25em; - padding: 0.5em; - margin-top: 0.25em; +.download { + text-align: center; + font: 1.5em belerenbsc; } -.cardMasterElement img { - max-height: 2em; - max-width: 2em; - position: absolute; - transform: translate(1em, -0.35em); +.truncate { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-indent: 0em; } -.cardmasterElement img.cardMasterElementMaskImage { - transform: translate(3.5em, -0.35em); +.tab, button, select, option { + cursor: pointer; } -.cardMasterElementMoving { - background-color: var(--clear-dark); +/*Custom Checkboxes*/ +.realCheckboxContainer { + margin-top: 0.45em } -.closeCardMasterElement { - cursor: pointer; - position: absolute; - /*top: 50%;*/ - left: 96%; - /*padding: 12px 16px;*/ - /*transform: translate(0%, -50%);*/ +.checkboxContainer { + position: relative; + padding-left: 1.5em; + padding-top: 0.25em; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - - - -#framePicker, #maskPicker { - max-height: 260pt; - overflow-y: auto; - overflow-x: hidden; - border: 1px solid var(--light-color); +.checkboxContainer input { + position: absolute; + opacity: 0; + height: 0; + width: 0; } -.frameOption { - height: 4em; - text-align: center; - width: 100%; +.checkmark { + position: absolute; + top: 0; + left: 0; + height: 1.2em; + width: 1.2em; + transition: 0.33s; + background-color: var(--clear-light); + border: 1px solid var(--light-color) } -.frameOption img { - max-width: 4em; - max-height: 4em; +.checkboxContainer:hover input ~ .checkmark { + background-color: var(--clear-dark); } -.maskOption img { - max-width: 2em; - max-height: 2em; +.checkboxContainer input:checked ~ .checkmark { + background-color: var(--dark-color); } -.frameOption.frameOptionSelected, .maskOption.maskOptionSelected { - background-color: var(--clear-dark); +.checkmark:after { + content: "X"; + font: 1.2em gothammedium; + color: white; + position: absolute; + opacity: 0; + transition: 0.33s; } -.maskOption, .frameOption { - background-color: var(--clear-light); - border: 1px solid var(--light-color); - border-radius: 0.25em; +.checkboxContainer input:checked ~ .checkmark:after { + opacity: 1; } -.maskOption { - margin-left: 0.5em; - padding: 0.125em; - width: calc(100% - 1.4em); +.checkboxContainer .checkmark:after { + left: 0.15em; + top: -0.1em; } - - -.textarea { - width: 100%; - min-height: 8em; - max-height: 24em; - resize: vertical; -} -.textTabButton { - font-size: 1em; -} -.textTab { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); - grid-auto-rows: min-content; -} - -.input, .textarea, .button, .select { - font: 1em mplantin; - background-color: var(--light-color); - border: 1px solid #aaa; - border-radius: 0.2em; - padding: 0px 0.2em; - outline: none; - width: 100%; -} -.inputOpacity { - font: 1em mplantin; - background-color: var(--light-color); - border: 1px solid #aaa; - border-radius: 0.2em; - padding: 0px 0.2em; - outline: none; - width: 2.9em; -} - - - #textCodeTutorial { display: grid; grid-template-columns: 6.5em auto; @@ -376,6 +398,3 @@ footer a:hover { } -input[type="checkbox"], .frameOption, .maskOption, .button { - cursor: pointer; -} \ No newline at end of file diff --git a/test.html b/test.html deleted file mode 100644 index 87a78ff2..00000000 --- a/test.html +++ /dev/null @@ -1,173 +0,0 @@ - - - - Card Conjurer - - - - - - -
-
- Card Conjurer -
-
-
- -
-
- -
-
Frame
-
Text
-
Art
-
Collector
-
Set Symbol
-
Watermark
-
-
-
-
-
-
-
- - -
-
No frame selected
-
-
-
-
- - -
-
How To Use Text Codes
-
- Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do: -
-
-
-
-
-
- - - - -
-
-
X, Y, & Zoom:
- - - -
-
-
-
-
- - - - - -
-
-
-
- - - - - -
-
-
-
- - - - - -
-
- -
-
-
- Download -
-
-
-
- -
-
Welcome to Card Conjurer!
-
Card Conjurer is a free program that helps you create custom Magic: The Gathering cards. There are already plenty of custom card makers out there, but what sets Card Conjurer apart from the rest is its live-edit capabilities. You can immediatly see the effects of any change you make, which makes card customization easier and overall a better experience.
-
-
-
About Me
-
- Hi! My name is Kyle Burton and I am currently a high school student. I used to play Pokemon, but when a friend introduced me to Magic in 2013 I sold my pocket monsters and bought an M14 Intro Pack. Ever since that day Magic has been my all time favorite game. In addition to playing games, I've always loved technology. During the 2017-18 school year I tought myself how to code Javascript, and a little bit of HTML and CSS. The following summer I created Kyle's Card Imager (KCI). It was pretty simple but I soon began to add more border images like Miracle or Nyx. After a few months I decided to share my creation, so I renamed it Card Conjurer and uploaded it to Github, and then in April of 2019 I bought the domain cardconjurer.com. -
-
-
-
Want More Customization?
- -
- This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, click here. -
-
-
-
Have Any Questions?
-
- If you have any questions please don't hesitate to email me at:
CardConjurerMTG@gmail.com
Even if you made a cool card and want to share, I'd love to see it! -
-
-
- - - - - - -