GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

css

Browse Source
This commit is contained in:
Kyle
2019-04-13 14:34:29 -07:00
parent 0e5d943140
commit da1b844e46
2 changed files with 150 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
data/main.js
View File

@@ -2,6 +2,21 @@
// Card Conjurer, by Kyle Burton // // Card Conjurer, by Kyle Burton //
//============================================// //============================================//
//Hi there :D //Hi there :D
window.onscroll = function() {scrollFunction()};
window.onresize = function() {scrollFunction()}
function scrollFunction() {
if (window.innerWidth > 900) {
if (document.body.scrollTop < 70) {
document.getElementById("header").style.maxHeight = 100 - document.body.scrollTop + "px";
} else {
document.getElementById("header").style.maxHeight = "30px";
}
} else {
document.getElementById("header").style.maxHeight = "80px";
}
}
scrollFunction()
//============================================// //============================================//
// Anything I Like to Change Often :) // // Anything I Like to Change Often :) //

230
index.html
View File

@@ -14,7 +14,7 @@
<meta name="theme-color" content="#64ca2f"> <meta name="theme-color" content="#64ca2f">
<!-- Other things --> <!-- Other things -->
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta id="pageViewport" name="viewport" content="user-scalable=no,width=800"> <meta id="pageViewport" name="viewport" content="user-scalable=no,width=780">
<PageMap> <PageMap>
<DataObject type="thumbnail"> <DataObject type="thumbnail">
<Attribute name="src" value="https://imkyle4815.github.io/cardconjurer/sampleCards/sample-card-6.png"/> <Attribute name="src" value="https://imkyle4815.github.io/cardconjurer/sampleCards/sample-card-6.png"/>
@@ -25,7 +25,7 @@
<meta name="thumbnail" content="https://imkyle4815.github.io/cardconjurer/sampleCards/sample-card-6.png"> <meta name="thumbnail" content="https://imkyle4815.github.io/cardconjurer/sampleCards/sample-card-6.png">
<script> <script>
window.onload = function() { window.onload = function() {
if (screen.width > 800) { if (screen.width > 780) {
var myViewPort = document.getElementById("pageViewport"); var myViewPort = document.getElementById("pageViewport");
myViewPort.setAttribute("content", "width=device-width, initial-scale=1"); myViewPort.setAttribute("content", "width=device-width, initial-scale=1");
} }
@@ -57,13 +57,21 @@
} }
</script> </script>
</head> </head>
<header>
<div class="title"><img src="images/title.png" id="header"></div>
</header>
<body> <body>
<div class="title"><img src="images/title.png"></div>
<div class="grid mainGrid"> <div class="grid mainGrid">
<div class="canvasContainer"> <div class="canvasContainer">
<canvas id="cardCanvas"></canvas> <canvas id="cardCanvas"></canvas>
</div> </div>
<div class="cmmArea"> <div class="cmmArea noVerticalPadding">
<div class="grid selectionGrid"> <div class="grid selectionGrid">
<div onclick="toggleView('frame', 'cmm')">Frame</div> <div onclick="toggleView('frame', 'cmm')">Frame</div>
<div onclick="toggleView('text', 'cmm')">Text</div> <div onclick="toggleView('text', 'cmm')">Text</div>
@@ -74,19 +82,8 @@
<div onclick="toggleView('advanced', 'cmm')">Advanced</div> <div onclick="toggleView('advanced', 'cmm')">Advanced</div>
<div onclick="toggleView('download', 'cmm')">Download</div> <div onclick="toggleView('download', 'cmm')">Download</div>
<div onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div> <div onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div>
<!-- <div onclick="toggleView('color', 'cmm')">Color</div>
<div onclick="toggleView('general', 'cmm')">General</div>
<div onclick="toggleView('text', 'cmm')">Text</div>
<div onclick="toggleView('art', 'cmm')">Art</div>
<div onclick="toggleView('info', 'cmm')">Info</div>
<div onclick="toggleView('set', 'cmm')">Set</div>
<div onclick="toggleView('watermark', 'cmm')">Watermark</div>
<div onclick="toggleView('advanced', 'cmm')">Advanced</div>
<div onclick="toggleView('download', 'cmm')">Download</div>
<div onclick="toggleView('vanguard', 'cmm')" style="display: none;" id="cmmVanguard">Vanguard</div>
<div onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div> -->
</div> </div>
<div class="cardManipulationMenu"> <div class="selectionGridTarget">
<div class="cmm shown" id="cmm-frame"> <div class="cmm shown" id="cmm-frame">
Border Border
<span class="dropdown"> <span class="dropdown">
@@ -168,22 +165,22 @@
</div> </div>
<div class="cmm" id="cmm-advanced"> <div class="cmm" id="cmm-advanced">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxLegendary" onchange="loadLegendaryImages()" /> <input type="checkbox" id="inputCheckboxLegendary" onchange="loadLegendaryImages()">
<label for="inputCheckboxLegendary" /> <label for="inputCheckboxLegendary" />
<div>Legendary</div> <div>Legendary</div>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxRareStamp" onchange="loadRareStampImages()" /> <input type="checkbox" id="inputCheckboxRareStamp" onchange="loadRareStampImages()">
<label for="inputCheckboxRareStamp" /> <label for="inputCheckboxRareStamp" />
<div>Rare Stamp</div> <div>Rare Stamp</div>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxNyx" onchange="loadNyxImages()" /> <input type="checkbox" id="inputCheckboxNyx" onchange="loadNyxImages()">
<label for="inputCheckboxNyx" /> <label for="inputCheckboxNyx" />
<div>Nyx</div> <div>Nyx</div>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxMiracle" onchange="loadMiracleImages()" /> <input type="checkbox" id="inputCheckboxMiracle" onchange="loadMiracleImages()">
<label for="inputCheckboxMiracle" /> <label for="inputCheckboxMiracle" />
<div>Miracle</div> <div>Miracle</div>
</div> </div>
@@ -276,7 +273,7 @@
<div class="cmm" id="cmm-art"> <div class="cmm" id="cmm-art">
Upload an Image Upload an Image
<input type="text" class="input" placeholder="Via URL" onchange="imageURL(this.value, imgCardArt, 'none')"> <input type="text" class="input" placeholder="Via URL" onchange="imageURL(this.value, imgCardArt, 'none')">
<input id="inputCardArtName" onchange="inputCardArtName(this.value)" class="input" type="text" placeholder="Via Card Name"></input> <input id="inputCardArtName" onchange="inputCardArtName(this.value)" class="input" type="text" placeholder="Via Card Name">
<input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgCardArt)" id="inputPicture" placeholder="Via File Upload"> <input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgCardArt)" id="inputPicture" placeholder="Via File Upload">
<br> <br>
Card Name Result: Card Name Result:
@@ -296,7 +293,7 @@
</div> </div>
<div class="cmm" id="cmm-set"> <div class="cmm" id="cmm-set">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxSetSymbol" checked="true" onchange="sectionOtherFunction()" /> <input type="checkbox" id="inputCheckboxSetSymbol" checked="true" onchange="sectionOtherFunction()">
<label for="inputCheckboxSetSymbol" /> <label for="inputCheckboxSetSymbol" />
<div>Set Symbol</div> <div>Set Symbol</div>
</div> </div>
@@ -313,7 +310,7 @@
</div> </div>
<div class="cmm" id="cmm-watermark"> <div class="cmm" id="cmm-watermark">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxWatermark" checked="true" onchange="sectionOtherFunction()" /> <input type="checkbox" id="inputCheckboxWatermark" checked="true" onchange="sectionOtherFunction()">
<label for="inputCheckboxWatermark" /> <label for="inputCheckboxWatermark" />
<div>Watermark</div> <div>Watermark</div>
</div> </div>
@@ -340,7 +337,7 @@
</select> </select>
</span> </span>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxSecondWatermark" onchange="sectionOtherFunction()" /> <input type="checkbox" id="inputCheckboxSecondWatermark" onchange="sectionOtherFunction()">
<label for="inputCheckboxSecondWatermark" /> <label for="inputCheckboxSecondWatermark" />
<div>Second Watermark Color</div> <div>Second Watermark Color</div>
</div> </div>
@@ -358,7 +355,11 @@
</span> </span>
</div> </div>
<div class="cmm" id="cmm-download"> <div class="cmm" id="cmm-download">
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a><br> <a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
<br>
<div class="adspace">
Ads?
</div>
</div> </div>
<div class="cmm" id="cmm-planeswalker"> <div class="cmm" id="cmm-planeswalker">
Planeswalker Ability Line Height Planeswalker Ability Line Height
@@ -374,7 +375,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tutorialArea"> <div class="adspace">
Ads?
</div>
<div class="tutorialArea noVerticalPadding">
<div class="grid selectionGrid"> <div class="grid selectionGrid">
<div onclick="toggleView('about', 'extras')">About</div> <div onclick="toggleView('about', 'extras')">About</div>
<div onclick="toggleView('tutorial', 'extras')">Tutorial</div> <div onclick="toggleView('tutorial', 'extras')">Tutorial</div>
@@ -382,7 +386,7 @@
<div onclick="toggleView('codes', 'extras')">Other Codes</div> <div onclick="toggleView('codes', 'extras')">Other Codes</div>
<div onclick="toggleView('set', 'extras')">Set Codes</div> <div onclick="toggleView('set', 'extras')">Set Codes</div>
</div> </div>
<div class="extrasMenu"> <div class="selectionGridTarget">
<div class="extras shown" id="extras-about"> <div class="extras shown" id="extras-about">
<div class="text"> <div class="text">
Welcome to Card Conjurer! Welcome to Card Conjurer!
@@ -405,12 +409,12 @@
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... Or you can check out my friend's youtube channel: Izzet Right? 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... Or you can check out my friend's youtube channel: Izzet Right?
</div><br> </div><br>
<div class="grid donateGrid selectionGrid"> <div class="grid donateGrid selectionGrid">
<div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="images/paypal.png"></img></div> <div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="images/paypal.png"></div>
<!-- <div onclick="window.open('https://www.patreon.com/KyleBurton', '_blank');" style="color:rgb(255,89,0);">Patreon<img src="images/patreon.png"></img></div> --> <!-- <div onclick="window.open('https://www.patreon.com/KyleBurton', '_blank');" style="color:rgb(255,89,0);">Patreon<img src="images/patreon.png"></div> -->
<div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="images/pucatrade.png"></img></div> <div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="images/pucatrade.png"></div>
<div onclick="window.open('https://twitter.com/ImKyle4815', '_blank');" style="color:rgb(0,174,239);">Twitter<img src="images/twitter.png"></img></div> <div onclick="window.open('https://twitter.com/ImKyle4815', '_blank');" style="color:rgb(0,174,239);">Twitter<img src="images/twitter.png"></div>
<div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:rgb(255,255,255);">Massdrop<img src="images/massdrop.png"></img></div> <div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:rgb(255,255,255);">Massdrop<img src="images/massdrop.png"></div>
<div onclick="window.open('https://www.youtube.com/channel/UC95Pd8lc8UWEkI96Nq_THvw', '_blank');" style="color:rgb(255,0,0);">Izzet Right?<img src="images/izzetright.png"></img></div> <div onclick="window.open('https://www.youtube.com/channel/UC95Pd8lc8UWEkI96Nq_THvw', '_blank');" style="color:rgb(255,0,0);">Izzet Right?<img src="images/izzetright.png"></div>
</div> </div>
</div> </div>
<div class="extras" id="extras-symbolList"> <div class="extras" id="extras-symbolList">
@@ -443,18 +447,26 @@
</div> </div>
</div> </div>
</div> </div>
<div class="adspace">
Ads?
</div>
<div class="sampleGrid grid text"> <div class="sampleGrid grid text">
Check out some samples<br> Check out some samples<br>
<div class="noBorder"> <div class="noBorder">
<img id="sampleCardA" class="sampleCard"></img> <img id="sampleCardA" class="sampleCard">
<img id="sampleCardB" class="sampleCard"></img> <img id="sampleCardB" class="sampleCard">
<img id="sampleCardC" class="sampleCard"></img> <img id="sampleCardC" class="sampleCard">
</div> </div>
</div> </div>
</div> </div>
</body> </body>
<footer class="info"><a href="https://imkyle4815.github.io/cardconjurer/TermsOfUse.txt" target="_blank">Terms&nbspof&nbspUse</a> &#8226 <a href="https://imkyle4815.github.io/cardconjurer/Disclaimer.txt" target="_blank">Disclaimer</a> &#8226 <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">Github&nbsppage</a> &#8226 <a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">Contact</a></footer> <footer class="info"><a href="https://imkyle4815.github.io/cardconjurer/TermsOfUse.txt" target="_blank">Terms&nbspof&nbspUse</a> &#8226 <a href="https://imkyle4815.github.io/cardconjurer/Disclaimer.txt" target="_blank">Disclaimer</a> &#8226 <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">Github&nbsppage</a> &#8226 <a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">Contact</a></footer>
<!--CSS--> <!--CSS-->
<style> <style>
/*fonts*/ /*fonts*/
@@ -500,7 +512,8 @@
/*Regular*/ /*Regular*/
--color-hover-grid: #0b6b00; --color-hover-grid: #0b6b00;
--color-border-selection-grid: #0f820040; --color-border-selection-grid: #0f820040;
--color-gray: #00000088; --color-gray: #00000077;
--color-gray-darker: #000000aa;
--color-border-main: #073c00; --color-border-main: #073c00;
--color-input: #073c00; --color-input: #073c00;
} }
@@ -511,15 +524,11 @@
font-size: 6vw; font-size: 6vw;
user-select: none; user-select: none;
color: #eee; color: #eee;
-webkit-transition: 0.5s; -webkit-transition: 0.3333s;
transition: 0.5s; transition: 0.3333s;
} }
html { html {
background: url("images/background.png") no-repeat center center fixed; background: #333;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} }
body { body {
margin: 0; margin: 0;
@@ -528,47 +537,49 @@ body {
/*Grid styling*/ /*Grid styling*/
.grid { .grid {
display: grid; display: grid;
grid-gap: 4px;
} }
.mainGrid { .mainGrid > div {
grid-gap: 0px 0px; border-style: solid;
border-color: var(--color-border-main);
border-width: 1px 1px 0px 1px;
width: calc(100% - 2px);
} }
.mainGrid > div, body, footer, .title { .mainGrid > div:not(.noVerticalPadding) {
border: 3px solid var(--color-border-main); padding: 8px 0px;
} }
.canvasContainer { .mainGrid > div:nth-child(odd) {
background: var(--color-gray);
}
.mainGrid > div:nth-child(even) {
background: var(--color-gray-darker);
}
.mainGrid > div.canvasContainer {
text-align: center; text-align: center;
background-color: none !important; width: calc(100% - 1px);
width: calc(100% - 14px);
} }
.selectionGrid { .selectionGrid {
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
text-align: center; text-align: center;
} }
.grid > div {
padding: 4px;
}
.grid > div:not(.noBorder) {
background: var(--color-gray);
}
/*Card manipulation menu grid*/ /*Card manipulation menu grid*/
.selectionGrid > div { .selectionGrid > div {
font-size: 1.1em;
font-family: belerenbsc; font-family: belerenbsc;
cursor: pointer; cursor: pointer;
border-radius: 36px; padding: 3px;
border: 4px solid var(--color-border-selection-grid); border: 1px solid var(--color-border-selection-grid);
/*background-color: #0008 !important;*/ background-color: var(--color-gray);
} }
.selectionGrid > div:hover { .selectionGrid > div:hover {
border-color: var(--color-hover-grid); border: 4px solid var(--color-hover-grid);
/*background-color: var(--color-border-selection-grid);*/
padding: 0px;
} }
.cardManipulationMenu, .extrasMenu { .selectionGridTarget {
margin-top: 4px;
padding: 24px; padding: 24px;
border-radius: 36px; /*border: 4px solid var(--color-border-selection-grid);*/
border: 4px solid var(--color-border-selection-grid);
background-color: var(--color-gray);
} }
.cmm, .extras { .cmm, .extras {
display: none; display: none;
@@ -579,6 +590,9 @@ body {
.sampleCard { .sampleCard {
width: 100%; width: 100%;
} }
.mainGrid.grid > .sampleGrid {
border-bottom-width: 1px;
}
/*Inputs and more*/ /*Inputs and more*/
/*dropdown*/ /*dropdown*/
@@ -598,7 +612,7 @@ body {
-webkit-appearance:none; -webkit-appearance:none;
appearance: none; appearance: none;
} }
.dropdown select option { .dropdown select option::hover {
/*nothing for now :)*/ /*nothing for now :)*/
} }
.dropdown::after { .dropdown::after {
@@ -607,43 +621,36 @@ body {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
right: 0.6em; right: 0.6em;
top: 0.6em; top: 0.5em;
} }
/*checkbox*/ /*checkbox*/
.checkbox { .checkbox {
height: 1em; height: 1em;
margin: 5px 0px; margin: 0.1em 0px 0.3em 0px;
position: relative; position: relative;
} }
.checkbox label { .checkbox label {
display: inline-block; display: inline-block;
width: 1em; width: calc(1.2em - 6px);
height: 1em; height: calc(1.2em - 6px);
border: 3px solid var(--color-input);
border-radius: 0.25em; border-radius: 0.25em;
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
background: var(--color-input);
cursor: pointer; cursor: pointer;
} }
.checkbox input:checked ~ label:after { .checkbox input:checked ~ label {
display: block; background: var(--color-hover-grid);
} }
.checkbox label:after { .checkbox > input {
content: "\2718";
position: absolute;
display: none;
left: 0.1em;
top: -0.25em;
}
.checkbox input {
opacity: 0; opacity: 0;
} }
.checkbox div { .checkbox div {
white-space: pre; white-space: pre;
position: relative; position: relative;
top: -0.1em; top: -0.1em;
left: 1.1em; left: 1.3em;
} }
/*other inputs*/ /*other inputs*/
input[type="text"], input[type="number"], textarea, input[type="file"] { input[type="text"], input[type="number"], textarea, input[type="file"] {
@@ -668,13 +675,20 @@ a:hover, a:active {
color: #999; color: #999;
} }
.adspace {
display: none;
}
/*Desktop*/ /*Desktop*/
@media only screen and (min-width: 1130px) { @media only screen and (min-width: 1195px) {
.canvasContainer { .canvasContainer {
width: auto; width: auto;
} }
.mainGrid:not(.plane) { .mainGrid:not(.plane) {
grid-template-columns: calc(749px + 0.7em) auto; grid-template-columns: calc(750px + 0.7em) auto;
}
.adspace {
grid-column: 1 / span 2;
} }
.tutorialArea { .tutorialArea {
grid-column: 1 / span 2; grid-column: 1 / span 2;
@@ -688,10 +702,31 @@ a:hover, a:active {
.mainGrid.plane > .canvasContainer { .mainGrid.plane > .canvasContainer {
grid-column: 1 / span 2; grid-column: 1 / span 2;
} }
header {
top: 0;
}
footer {
bottom: 0;
}
header, footer {
position: fixed;
width: 100%;
z-index: 1000;
}
#header {
-webkit-transition: 0s;
transition: 0s;
max-height: 100px;
width: auto;
}
.mainGrid {
margin-top: 110px;
margin-bottom: 1.1em;
}
} }
@media only screen and (min-width: 1455px) { @media only screen and (min-width: 1455px) {
.mainGrid.plane { .mainGrid.plane {
grid-template-columns: calc(1074px + 0.7em) auto; grid-template-columns: calc(1050px + 0.7em) auto;
} }
} }
@media only screen and (orientation: landscape) { @media only screen and (orientation: landscape) {
@@ -699,12 +734,16 @@ a:hover, a:active {
width: 32.8%; width: 32.8%;
} }
} }
@media only screen and (min-width: 801px) { @media only screen and (min-width: 781px) {
html { html {
/*background*/ 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: 24px; font-size: 28px;
} }
} }
@@ -713,18 +752,18 @@ a:hover, a:active {
font-size: inherit; font-size: inherit;
} }
.info { .info {
font-size: 0.75em; font-size: 0.6em;
} }
/*Title*/ /*Title*/
.title > img { #header {
max-height: 80px; max-height: 80px;
width: auto; width: auto;
} }
.title, .info { header, .info {
text-align: center; text-align: center;
background-color: black; background-color: black;
padding: 10px; padding: 5px;
} }
/*symbol grid*/ /*symbol grid*/
@@ -740,7 +779,7 @@ a:hover, a:active {
.symbolGrid > div { .symbolGrid > div {
border: 4px solid var(--color-border-main); border: 4px solid var(--color-border-main);
border-radius: 36px; border-radius: 36px;
background-color: var(--color-border-selection-grid) !important; background-color: var(--color-border-selection-grid);
} }
/*Sitewide text (bottom of the page)*/ /*Sitewide text (bottom of the page)*/
@@ -756,7 +795,6 @@ a:hover, a:active {
} }
.donateGrid.grid > div { .donateGrid.grid > div {
font-size: 1.7em; font-size: 1.7em;
padding: 0px;
} }
.donateGrid > div > img { .donateGrid > div > img {
position: relative; position: relative;