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

update

Browse Source
This commit is contained in:
Kyle
2020-05-24 11:18:46 -07:00
parent af3465df59
commit bc4e9d9553
10 changed files with 266 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
askscryfall.html
View File

@@ -51,34 +51,46 @@
</div> </div>
<script defer src="data/site/other/askScryfall/askScryfall.js"></script> <script defer src="data/site/other/askScryfall/askScryfall.js"></script>
</body> </body>
<footer class='footer'> <footer>
<div> <div class='footer'>
<div>Card Conjurer by Kyle Burton</div>
<div> <div>
<select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'> <div>Theme</div>
<option value='lightMode'>Light Mode</option> <hr>
<option value='darkMode'>Dark Mode</option> <div>
<option value='dayRave'>Day Rave</option> <select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'>
<option value='nightRave'>Night Rave</option> <option value='lightMode'>Light Mode</option>
<option value='scholarMode'>Scholar Mode</option> <option value='darkMode'>Dark Mode</option>
</select> <option value='dayRave'>Day Rave</option>
</div> <option value='nightRave'>Night Rave</option>
</div> <option value='scholarMode'>Scholar Mode</option>
<div> </select>
<div>Navigation</div> </div>
<div>
<a href='index.html'>Card Creator</a><br>
<a href='life.html'>Life Counter</a><br>
<a href='askscryfall.html'>Ask Scryfall</a>
</div> </div>
</div>
<div>
<div>Legal</div>
<div> <div>
<a href='termsofuse.html'>Terms of Use</a><br> <div>Navigation</div>
<a href='disclaimer.html'>Disclaimer</a> <hr>
<div>
<a href='index.html'>Card Creator</a><br>
<a href='life.html'>Life Counter</a><br>
<a href='askscryfall.html'>Ask Scryfall</a>
</div>
</div> </div>
<div>
<div>Legal</div>
<hr>
<div>
<a href='termsofuse.html'>Terms of Use</a><br>
<a href='disclaimer.html'>Disclaimer</a>
</div>
</div>
<div>
<div>Contact</div>
<hr>
<div>
<label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>
</div>
</div>
<script defer src="data/scripts/animations.js"></script>
</div> </div>
<script defer src="data/scripts/animations.js"></script>
</footer> </footer>
<html> <html>

70
boxGenerator.html
View File

@@ -53,34 +53,46 @@
</div> </div>
<script defer src="data/site/other/boxGenerator/boxGenerator.js"></script> <script defer src="data/site/other/boxGenerator/boxGenerator.js"></script>
</body> </body>
<footer class='footer'> <footer>
<div> <div class='footer'>
<div>Card Conjurer by Kyle Burton</div> <div>
<div> <div>Theme</div>
<select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'> <hr>
<option value='lightMode'>Light Mode</option> <div>
<option value='darkMode'>Dark Mode</option> <select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'>
<option value='dayRave'>Day Rave</option> <option value='lightMode'>Light Mode</option>
<option value='nightRave'>Night Rave</option> <option value='darkMode'>Dark Mode</option>
<option value='scholarMode'>Scholar Mode</option> <option value='dayRave'>Day Rave</option>
</select> <option value='nightRave'>Night Rave</option>
</div> <option value='scholarMode'>Scholar Mode</option>
</div> </select>
<div> </div>
<div>Navigation</div> </div>
<div> <div>
<a href='index.html'>Card Creator</a><br> <div>Navigation</div>
<a href='life.html'>Life Counter</a><br> <hr>
<a href='askscryfall.html'>Ask Scryfall</a> <div>
</div> <a href='index.html'>Card Creator</a><br>
</div> <a href='life.html'>Life Counter</a><br>
<div> <a href='askscryfall.html'>Ask Scryfall</a>
<div>Legal</div> </div>
<div> </div>
<a href='termsofuse.html'>Terms of Use</a><br> <div>
<a href='disclaimer.html'>Disclaimer</a> <div>Legal</div>
</div> <hr>
</div> <div>
<script defer src="data/scripts/animations.js"></script> <a href='termsofuse.html'>Terms of Use</a><br>
<a href='disclaimer.html'>Disclaimer</a>
</div>
</div>
<div>
<div>Contact</div>
<hr>
<div>
<label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>
</div>
</div>
<script defer src="data/scripts/animations.js"></script>
</div>
</footer> </footer>
<html> <html>

2
data/scripts/lazyLoadSamples.js
View File

@@ -18,4 +18,4 @@ function lazyLoad(imageList = []) {
} }
tempSampleImage.src = imageList[i][0] tempSampleImage.src = imageList[i][0]
} }
} }

12
data/scripts/palettes/darkMode.js
View File

@@ -1,10 +1,10 @@
rootStyles.setProperty('--background-color', '#141315') rootStyles.setProperty('--background-color', '#3a3838')
rootStyles.setProperty('--background-color-contrast', '#0a0a0a') rootStyles.setProperty('--background-color-contrast', '#242424')
rootStyles.setProperty('--interactable-color', '#202020') rootStyles.setProperty('--interactable-color', '#2b2b2b')
rootStyles.setProperty('--interactable-selected-color', '#2f2f2f') rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
rootStyles.setProperty('--input-color', '#282828') rootStyles.setProperty('--input-color', '#2b2b2b')
rootStyles.setProperty('--input-font-color', '#efefef') rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--font-color', '#efefef') rootStyles.setProperty('--font-color', '#efefef')
rootStyles.setProperty('--font-color-contrast', '#efefef') rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'none') rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'darkMode') setCookie('colorPalette', 'darkMode')

4
data/scripts/palettes/lightMode.js
View File

@@ -1,5 +1,5 @@
rootStyles.setProperty('--background-color', '#f5f5f5') rootStyles.setProperty('--background-color', '#f5f5f5')
rootStyles.setProperty('--background-color-contrast', '#e4e4e4') rootStyles.setProperty('--background-color-contrast', '#d0d0d0')
rootStyles.setProperty('--interactable-color', '#dfdfdf') rootStyles.setProperty('--interactable-color', '#dfdfdf')
rootStyles.setProperty('--interactable-selected-color', '#cccccc') rootStyles.setProperty('--interactable-selected-color', '#cccccc')
rootStyles.setProperty('--input-color', '#dadada') rootStyles.setProperty('--input-color', '#dadada')
@@ -7,4 +7,4 @@ rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000') rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#000') rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--body-background', 'none') rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'lightMode') setCookie('colorPalette', 'lightMode')

60
disclaimer.html
View File

@@ -37,34 +37,46 @@
</div> </div>
</div> </div>
</body> </body>
<footer class='footer'> <footer>
<div> <div class='footer'>
<div>Card Conjurer by Kyle Burton</div>
<div> <div>
<select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'> <div>Theme</div>
<option value='lightMode'>Light Mode</option> <hr>
<option value='darkMode'>Dark Mode</option> <div>
<option value='dayRave'>Day Rave</option> <select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'>
<option value='nightRave'>Night Rave</option> <option value='lightMode'>Light Mode</option>
<option value='scholarMode'>Scholar Mode</option> <option value='darkMode'>Dark Mode</option>
</select> <option value='dayRave'>Day Rave</option>
</div> <option value='nightRave'>Night Rave</option>
</div> <option value='scholarMode'>Scholar Mode</option>
<div> </select>
<div>Navigation</div> </div>
<div>
<a href='index.html'>Card Creator</a><br>
<a href='life.html'>Life Counter</a><br>
<a href='askscryfall.html'>Ask Scryfall</a>
</div> </div>
</div>
<div>
<div>Legal</div>
<div> <div>
<a href='termsofuse.html'>Terms of Use</a><br> <div>Navigation</div>
<a href='disclaimer.html'>Disclaimer</a> <hr>
<div>
<a href='index.html'>Card Creator</a><br>
<a href='life.html'>Life Counter</a><br>
<a href='askscryfall.html'>Ask Scryfall</a>
</div>
</div> </div>
<div>
<div>Legal</div>
<hr>
<div>
<a href='termsofuse.html'>Terms of Use</a><br>
<a href='disclaimer.html'>Disclaimer</a>
</div>
</div>
<div>
<div>Contact</div>
<hr>
<div>
<label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>
</div>
</div>
<script defer src="data/scripts/animations.js"></script>
</div> </div>
<script defer src="data/scripts/animations.js"></script>
</footer> </footer>
<html> <html>

91
index.html
View File

@@ -249,58 +249,83 @@
<div> <div>
<div> <div>
<div class='layerTitle'> <div class='layerTitle'>
Have Any Questions? Share Your Cards!
</div> </div>
<div class='justify'> <div class='justify'>
If you have a question, a request, or even just want to share a cool card you made, please don't hesitate to email me at <label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>! I'd love to see what custom cards you're making, and I'm sure others would too! Post a picture on Twitter with <a style='color: #00aced;' href="https://twitter.com/search?q=%23CardConjurer&src=typed_query&f=live" target='_blank'>#CardConjurer</a>, or just check out what others have made!
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class='layer slideFromLeft'> <div class='layer slideFromLeft'>
<div class='cardLayerGrid'>
<div>
<div class='layerTitle'>
How You Can Help
</div>
<div class="justify">
Playing magic can be expensive for students, so if you've enjoyed using Card Conjurer and would like to help me out, you can make a small donatation via <a style='color: #3b7bbf;' href="https://www.paypal.me/kyleburtondonate" target='_blank'>PayPal</a>.
</div>
</div>
<!-- <img src='data/site/images/samples/sampleBling.png' id='sampleBling'>-->
</div>
</div>
<!--<div class='layer slideFromLeft'>
<div> <div>
<div class='layerTitle'> <div class='layerTitle'>
The Proxy Factory The Proxy Factory
</div> </div>
<div class="justify"> <div class="justify">
If you'd like to delve deeper into making custom Magic: The Gathering cards, check out The Proxy Factory! They're a community full of individuals interested in creating custom cards, and are very welcoming to new members. Take a look at their <a style='color: #ff4500;' href='https://www.reddit.com/r/TheProxyFactory/' target='_blank'>Reddit</a><!-- , or join their <a style='color: #738adb;' href='https://discordapp.com/invite/xBCQprM' target='_blank'>Discord</a> -->, and happy proxying! If you'd like to delve deeper into making custom Magic: The Gathering cards, check out The Proxy Factory! They're a community full of individuals interested in creating custom cards, and are very welcoming to new members. Take a look at their <a style='color: #ff4500;' href="https://www.reddit.com/r/TheProxyFactory/" target='_blank'>Reddit</a>, and happy proxying!
</div> </div>
</div> </div>
</div> </div>-->
<script defer src="data/scripts/sortable.js"></script> <script defer src="data/scripts/sortable.js"></script>
<script defer src="data/scripts/main.js"></script> <script defer src="data/scripts/main.js"></script>
<script defer src="data/scripts/versions/m15/version.js"></script> <script defer src="data/scripts/versions/m15/version.js"></script>
<script defer src="data/scripts/lazyLoadSamples.js"></script> <script defer src="data/scripts/lazyLoadSamples.js"></script>
<!-- <script async src="data/scripts/palettes/darkMode.js"></script> --> <!-- <script async src="data/scripts/palettes/darkMode.js"></script> -->
</body> </body>
<footer class='footer'> <footer>
<div> <div class='footer'>
<div>Card Conjurer by Kyle Burton</div> <div>
<div> <div>Theme</div>
<select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'> <hr>
<option value='lightMode'>Light Mode</option> <div>
<option value='darkMode'>Dark Mode</option> <select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'>
<option value='dayRave'>Day Rave</option> <option value='lightMode'>Light Mode</option>
<option value='nightRave'>Night Rave</option> <option value='darkMode'>Dark Mode</option>
<option value='scholarMode'>Scholar Mode</option> <option value='dayRave'>Day Rave</option>
</select> <option value='nightRave'>Night Rave</option>
</div> <option value='scholarMode'>Scholar Mode</option>
</select>
</div>
</div>
<div>
<div>Navigation</div>
<hr>
<div>
<a href='index.html'>Card Creator</a><br>
<a href='life.html'>Life Counter</a><br>
<a href='askscryfall.html'>Ask Scryfall</a>
</div>
</div>
<div>
<div>Legal</div>
<hr>
<div>
<a href='termsofuse.html'>Terms of Use</a><br>
<a href='disclaimer.html'>Disclaimer</a>
</div>
</div>
<div>
<div>Contact</div>
<hr>
<div>
<label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>
</div>
</div>
<script defer src="data/scripts/animations.js"></script>
</div> </div>
<div>
<div>Navigation</div>
<div>
<a href='index.html'>Card Creator</a><br>
<a href='life.html'>Life Counter</a><br>
<a href='askscryfall.html'>Ask Scryfall</a>
</div>
</div>
<div>
<div>Legal</div>
<div>
<a href='termsofuse.html'>Terms of Use</a><br>
<a href='disclaimer.html'>Disclaimer</a>
</div>
</div>
<script defer src="data/scripts/animations.js"></script>
</footer> </footer>
<html> <html>

44
setSymbol.html
View File

@@ -83,23 +83,45 @@
</div> </div>
</body> </body>
<footer> <footer>
<div class="footerGrid"> <div class='footer'>
<div> <div>
<div class="visitorCountTrigger">Card Conjurer By Kyle Burton</div> <div>Theme</div>
<div class="visitorCount"></div> <hr>
<div>
<select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'>
<option value='lightMode'>Light Mode</option>
<option value='darkMode'>Dark Mode</option>
<option value='dayRave'>Day Rave</option>
<option value='nightRave'>Night Rave</option>
<option value='scholarMode'>Scholar Mode</option>
</select>
</div>
</div> </div>
<div> <div>
Navigation:<br> <div>Navigation</div>
<a href="index.html">Card Creator</a><br> <hr>
<a href="life.html">Life Counter</a><br> <div>
<a href="askscryfall.html">Ask Scryfall</a><br> <a href='index.html'>Card Creator</a><br>
<a href="setsymbol.html">Set Symbol Creator</a> <a href='life.html'>Life Counter</a><br>
<a href='askscryfall.html'>Ask Scryfall</a>
</div>
</div> </div>
<div> <div>
Legal:<br> <div>Legal</div>
<a href="disclaimer.html">Disclaimer</a><br> <hr>
<a href="termsofuse.html">Terms of Use</a> <div>
<a href='termsofuse.html'>Terms of Use</a><br>
<a href='disclaimer.html'>Disclaimer</a>
</div>
</div> </div>
<div>
<div>Contact</div>
<hr>
<div>
<label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>
</div>
</div>
<script defer src="data/scripts/animations.js"></script>
</div> </div>
</footer> </footer>
<script async src="data/scripts/setCodeList.js"></script> <script async src="data/scripts/setCodeList.js"></script>

30
styles.css
View File

@@ -411,23 +411,26 @@ input[type='checkbox'], select, option, input[type='file'], button {
canvas { canvas {
width: 100%; width: 100%;
} }
footer {
background: var(--background-color-contrast);
color: var(--font-color-contrast);
font: 0.6rem arial;
}
.footer { .footer {
padding: 1rem; width: 10rem;
background: var(--background-color-contrast); padding: 1rem 0;
color: var(--font-color-contrast); margin: 0 auto;
font: 0.6rem arial;
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: auto;
grid-row-gap: 1rem; grid-gap: 2rem;
text-align: center;
} }
.footer > div > div:first-child { .footer > div > div:first-child {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.footer > div > div:not(:first-child) { .footer > div > div:not(:first-child) {
font-weight: bold; /* font-weight: bold;*/
} }
.footer > div > select { .footer > div > div > select {
width: auto !important; width: auto !important;
} }
@media screen and (min-width: 909pt) { /*Screen is wide enough to show the card next to the editor menu*/ @media screen and (min-width: 909pt) { /*Screen is wide enough to show the card next to the editor menu*/
@@ -454,10 +457,11 @@ canvas {
width: 750px; width: 750px;
} }
} }
@media screen and (min-width: 450pt) { /*Screen is wide enough for the footer to display horizontally*/ @media screen and (min-width: 30rem) { /*Screen is wide enough for the footer to display horizontally*/
.footer { .footer {
padding: 2rem; width: 30rem;
grid-template-columns: 1fr 1fr 1fr; padding: 2rem 0;
grid-template-columns: repeat(4, 6rem);
} }
} }
@media screen and (min-width: 392pt) { /*Screen is wide enough for the samples to be a constant size*/ @media screen and (min-width: 392pt) { /*Screen is wide enough for the samples to be a constant size*/
@@ -469,4 +473,4 @@ canvas {
html { html {
font: 20pt georgia; font: 20pt georgia;
} }
} }

60
termsofuse.html
View File

@@ -29,34 +29,46 @@
</div> </div>
</div> </div>
</body> </body>
<footer class='footer'> <footer>
<div> <div class='footer'>
<div>Card Conjurer by Kyle Burton</div>
<div> <div>
<select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'> <div>Theme</div>
<option value='lightMode'>Light Mode</option> <hr>
<option value='darkMode'>Dark Mode</option> <div>
<option value='dayRave'>Day Rave</option> <select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'>
<option value='nightRave'>Night Rave</option> <option value='lightMode'>Light Mode</option>
<option value='scholarMode'>Scholar Mode</option> <option value='darkMode'>Dark Mode</option>
</select> <option value='dayRave'>Day Rave</option>
</div> <option value='nightRave'>Night Rave</option>
</div> <option value='scholarMode'>Scholar Mode</option>
<div> </select>
<div>Navigation</div> </div>
<div>
<a href='index.html'>Card Creator</a><br>
<a href='life.html'>Life Counter</a><br>
<a href='askscryfall.html'>Ask Scryfall</a>
</div> </div>
</div>
<div>
<div>Legal</div>
<div> <div>
<a href='termsofuse.html'>Terms of Use</a><br> <div>Navigation</div>
<a href='disclaimer.html'>Disclaimer</a> <hr>
<div>
<a href='index.html'>Card Creator</a><br>
<a href='life.html'>Life Counter</a><br>
<a href='askscryfall.html'>Ask Scryfall</a>
</div>
</div> </div>
<div>
<div>Legal</div>
<hr>
<div>
<a href='termsofuse.html'>Terms of Use</a><br>
<a href='disclaimer.html'>Disclaimer</a>
</div>
</div>
<div>
<div>Contact</div>
<hr>
<div>
<label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>
</div>
</div>
<script defer src="data/scripts/animations.js"></script>
</div> </div>
<script defer src="data/scripts/animations.js"></script>
</footer> </footer>
<html> <html>