diff --git a/data/main.js b/data/main.js index 83f48b9d..65dc9fef 100644 --- a/data/main.js +++ b/data/main.js @@ -862,7 +862,7 @@ function randomizeSampleCards(count) { cardNumbers[cardNumbers.length] = randomNumber var imgName = "sampleCard" + cardNumbers.length window[imgName] = new Image() - window[imgName].src = "images/sampleCards/sample" + randomNumber + ".png" + window[imgName].src = "data/site/sampleCards/sample" + randomNumber + ".png" } sampleCard1.onload = function() { document.getElementById("sampleCardA").src = sampleCard1.src diff --git a/images/izzetright.png b/data/site/icons/izzetright.png similarity index 100% rename from images/izzetright.png rename to data/site/icons/izzetright.png diff --git a/images/massdrop.png b/data/site/icons/massdrop.png similarity index 100% rename from images/massdrop.png rename to data/site/icons/massdrop.png diff --git a/images/patreon.png b/data/site/icons/patreon.png similarity index 100% rename from images/patreon.png rename to data/site/icons/patreon.png diff --git a/images/paypal.png b/data/site/icons/paypal.png similarity index 100% rename from images/paypal.png rename to data/site/icons/paypal.png diff --git a/images/pucatrade.png b/data/site/icons/pucatrade.png similarity index 100% rename from images/pucatrade.png rename to data/site/icons/pucatrade.png diff --git a/images/twitter.png b/data/site/icons/twitter.png similarity index 100% rename from images/twitter.png rename to data/site/icons/twitter.png diff --git a/images/background-original.png b/data/site/images/background-original.png similarity index 100% rename from images/background-original.png rename to data/site/images/background-original.png diff --git a/images/background.png b/data/site/images/background.png similarity index 100% rename from images/background.png rename to data/site/images/background.png diff --git a/images/favicon-original.png b/data/site/images/favicon-original.png similarity index 100% rename from images/favicon-original.png rename to data/site/images/favicon-original.png diff --git a/images/title.png b/data/site/images/title.png similarity index 100% rename from images/title.png rename to data/site/images/title.png diff --git a/images/sampleCards/sample1.png b/data/site/sampleCards/sample1.png similarity index 100% rename from images/sampleCards/sample1.png rename to data/site/sampleCards/sample1.png diff --git a/images/sampleCards/sample2.png b/data/site/sampleCards/sample2.png similarity index 100% rename from images/sampleCards/sample2.png rename to data/site/sampleCards/sample2.png diff --git a/images/sampleCards/sample3.png b/data/site/sampleCards/sample3.png similarity index 100% rename from images/sampleCards/sample3.png rename to data/site/sampleCards/sample3.png diff --git a/images/sampleCards/sample4.png b/data/site/sampleCards/sample4.png similarity index 100% rename from images/sampleCards/sample4.png rename to data/site/sampleCards/sample4.png diff --git a/images/sampleCards/sample5.png b/data/site/sampleCards/sample5.png similarity index 100% rename from images/sampleCards/sample5.png rename to data/site/sampleCards/sample5.png diff --git a/images/sampleCards/sample6.png b/data/site/sampleCards/sample6.png similarity index 100% rename from images/sampleCards/sample6.png rename to data/site/sampleCards/sample6.png diff --git a/images/sampleCards/sample7.png b/data/site/sampleCards/sample7.png similarity index 100% rename from images/sampleCards/sample7.png rename to data/site/sampleCards/sample7.png diff --git a/images/sampleCards/sample8.png b/data/site/sampleCards/sample8.png similarity index 100% rename from images/sampleCards/sample8.png rename to data/site/sampleCards/sample8.png diff --git a/data/site/styles.css b/data/site/styles.css new file mode 100644 index 00000000..7b4d6cc1 --- /dev/null +++ b/data/site/styles.css @@ -0,0 +1,319 @@ +/*fonts*/ +@font-face { + font-family: gothammedium; + src: url("../fonts/gotham-medium.ttf"); +} +@font-face { + font-family: belerenb; + src: url("../fonts/beleren-b.ttf"); +} +@font-face { + font-family: belerenbsc; + src: url("../fonts/beleren-bsc.ttf"); +} +@font-face { + font-family: matrix; + src: url("../fonts/matrix.ttf"); +} +@font-face { + font-family: matrixb; + src: url("../fonts/matrix-b.ttf"); +} +@font-face { + font-family: matrixbsc; + src: url("../fonts/matrix-bsc.ttf"); +} +@font-face { + font-family: mplantin; + src: url("../fonts/mplantin.ttf"); +} +@font-face { + font-family: mplantini; + src: url("../fonts/mplantin-i.ttf"); +} +@font-face { + font-family: goudymedieval; + src: url("../fonts/goudy-medieval.ttf"); +} + +:root { + /*Color Palette*/ + /*Regular*/ + --color-background: #00000077; + --color-background-darker: #000000aa; + --color-primary: #073c00; + --color-select: #0b6b00; +} + +/*Page-wide styling*/ +* { + font-family: belerenb; + font-size: 16pt; /*Master font size*/ + user-select: none; + color: #eee; +} +html { + background-color: #333; +} +body { + margin: 0; +} + +/*Grid styling*/ +.grid { + display: grid; +} +.mainGrid > div { + border-style: solid; + border-color: var(--color-primary); + border-width: 1px 1px 0px 1px; + width: calc(100% - 2px); +} +.mainGrid > div:nth-child(odd) { + background: var(--color-background); +} +.mainGrid > div:nth-child(even) { + background: var(--color-background-darker); +} +.selectionGrid { + grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); + text-align: center; +} +.mainGrid > div.canvasContainer { + padding: 0; + text-align: center; +} +#canvas { + display: block; + max-width:750px; + width: 100%; + height: auto; + margin: 0px auto; +} + +/*Card manipulation menu grid*/ +.selectionGrid > div { + font-size: 1.1em; + font-family: belerenbsc; + cursor: pointer; + padding: 0.1em; + border: 0.05em solid var(--color-primary); + background-color: var(--color-background); + -webkit-transition: 0.3333s; + transition: 0.3333s; +} +.selectionGrid > div:hover { + border: 0.15em solid var(--color-select); + padding: 0px; +} +.padded { + padding: 1em; +} +.paddedVertical { + padding: 1em 0px; +} +.cmm, .extras { + display: none; +} +.shown { + display: block; +} +.sampleCard { + width: 100%; +} + +/*Inputs and more*/ +/*dropdown*/ +.dropdown { + position: relative; + display: inline-block; + width: 100%; +} +.dropdown select { + padding-left: 0.25em; + width: inherit; + cursor: pointer; + -moz-appearance: none; + -webkit-appearance:none; + appearance: none; +} +.dropdown select option::hover { + /*nothing for now :)*/ +} +.dropdown::after { + content: "\25BC"; + font-size: 0.6em; + position: absolute; + pointer-events: none; + right: 0.6em; + top: 0.5em; +} +/*checkbox*/ +.checkbox { + height: 1em; + margin: 0.1em 0px 0.3em 0px; + position: relative; +} +.checkbox label { + display: inline-block; + width: calc(1.2em - 6px); + height: calc(1.2em - 6px); + border: 3px solid var(--color-select); + border-radius: 0.25em; + position: absolute; + top: 0px; + left: 0px; + cursor: pointer; + -webkit-transition: 0.5s; + transition: 0.5s; +} +.checkbox input:checked ~ label { + background: var(--color-select); + border: 3px solid var(--color-primary); +} +.checkbox > input { + opacity: 0; +} +.checkbox div { + white-space: pre; + position: relative; + top: -0.1em; + left: 1.3em; +} +/*other inputs*/ +input[type="text"], input[type="number"], textarea, input[type="file"] { + width: 100%; + padding-left: 0.25em; +} +/*color selector*/ +input[type="color"] { + padding: 0px; +} +.input { + background: var(--color-primary); + border-radius: 0.25em; + border: 1px solid var(--color-select); +} + +/*Hyperlinks*/ +a:link, a:visited { + color: #fff; +} +a:hover, a:active { + color: #999; +} +a { + -webkit-transition: 0.3333s; + transition: 0.3333s; +} + +/*Desktop*/ +@media only screen and (min-width: 750px) { + html { + background: url("images/background.png") no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + } + * { + font-size: 20pt; /*Master font size*/ + } + header { + top: 0; + } + footer { + bottom: 0; + } + header, footer { + position: fixed; + width: 100%; + z-index: 1000; + } + #header { + max-height: 100px; + width: auto; + } + .mainGrid { + margin-top: 110px; + margin-bottom: 1.1em; + } +} +@media only screen and (min-width: 1175px) { + .mainGrid { + grid-template-columns: 750px auto; + } + .mainGrid > div:not(.canvasContainer):not(.cmmArea) { + grid-column: 1 / span 2; + } + /*.sampleGrid { + grid-column: 1 / span 2; + }*/ +} +@media only screen and (orientation: landscape) { + .sampleCard { + width: 32.8%; + } +} + +/*Text and stuff :)*/ +.info > * { + font-size: inherit; +} +.info { + font-size: 0.7em; + border-top: 1px solid var(--color-primary); +} + +/*Title*/ +#header { + width: auto; +} +header { + border-bottom: 1px solid var(--color-primary); +} +header, .info { + text-align: center; + background-color: black; + padding: 5px 0px; +} + +/*symbol grid*/ +.manaSymbol > img { + position: relative; + height: 1em; +} +.symbolGrid { + grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr)); + text-align: center; +} +.symbolGrid > div { + border: 0.1em solid var(--color-background); + border-radius: 1em; + background-color: var(--color-primary); +} + +/*Sitewide text (bottom of the page)*/ +.miniTitle { + font-family: belerenbsc; + text-align: center; + font-size: 1.2em; + padding-bottom: 0.125em; +} +.paragraph { + padding-bottom: 0.25em; + text-indent: 2em; +} +/*Donation buttons!*/ +.donateGrid { + grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); +} +.donateGrid.grid > div { + font-size: 1.7em; +} +.donateGrid > div > img { + position: relative; + top: 0.25em; + left: 0.5em; + height: 1.7em; +} \ No newline at end of file diff --git a/index.html b/index.html index 2708ea0e..76090926 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Card Conjurer + @@ -15,14 +16,6 @@ - - - - - - - - - - - - - -
-
+
+
+
-
+
Frame
Text
@@ -82,7 +65,7 @@
Download
-
+
Border @@ -362,10 +345,6 @@
Download

Remember to properly credit the artist (under 'Info') before downloading! -
-
Planeswalker Ability Line Height @@ -379,15 +358,9 @@
-
- -
+
About
Tutorial
@@ -395,7 +368,7 @@
Other Codes
Set Codes
-
+
Welcome to Card Conjurer! @@ -409,20 +382,6 @@
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.
-
- How You Can Help -
-
- I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by making a small donation or using a referral link: -
-
-
PayPal
- -
PucaTrade
-
@ImKyle4815
-
Massdrop
- -
Each of the following codes must be sandwhiched between curly brackets (e.g., '{t}') @@ -454,366 +413,43 @@
- -
- Check out some samples
+
+
+ Check out some samples +
+ +
+
+
+ How You Can Help +
+
+ I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by making a small donation or using a referral link: +
+
+
PayPal
+
PucaTrade
+
@ImKyle4815
+
Massdrop
+
+
+
+ + + + - - - - - - - - \ No newline at end of file + \ No newline at end of file