Files
cardconjurer/setSymbol.html
2020-05-24 11:18:46 -07:00

131 lines
6.1 KiB
HTML

<!DOCTYPE html5>
<html>
<head>
<title>Card Conjurer</title>
<!-- Other things -->
<link rel="stylesheet" href="data/site/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
canvas {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="mainDiv">
<div class="pageTitle">
Card Conjurer
</div>
<div class="mainGrid">
<div class="canvasContainer">
<svg id="displaySVG">
<defs>
<linearGradient id="gradCommon" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#302b2c;stop-opacity:1" />
<stop offset="50%" style="stop-color:#474040;stop-opacity:1" />
<stop offset="100%" style="stop-color:#302b2c;stop-opacity:1" />
</linearGradient>
<linearGradient id="gradUncommon" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#5a6572;stop-opacity:1" />
<stop offset="50%" style="stop-color:#9e9e9e;stop-opacity:1" />
<stop offset="100%" style="stop-color:#5a6572;stop-opacity:1" />
</linearGradient>
<linearGradient id="gradRare" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#876a3b;stop-opacity:1" />
<stop offset="50%" style="stop-color:#dfbd6b;stop-opacity:1" />
<stop offset="100%" style="stop-color:#876a3b;stop-opacity:1" />
</linearGradient>
<linearGradient id="gradMythic" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#b21f0f;stop-opacity:1" />
<stop offset="50%" style="stop-color:#f38300;stop-opacity:1" />
<stop offset="100%" style="stop-color:#b21f0f;stop-opacity:1" />
</linearGradient>
<linearGradient id="gradTimeshifted" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#652978;stop-opacity:1" />
<stop offset="50%" style="stop-color:#c09ac5;stop-opacity:1" />
<stop offset="100%" style="stop-color:#652978;stop-opacity:1" />
</linearGradient>
</defs>
<path stroke-width="2" stroke-linejoin="arcs"></path>
<path></path>
</svg>
<canvas id="displayCanvas">
</div>
<div class="cardMenu">
Enter a set code and select a rarity:
<input type="text" class="input text" value="rtr" onchange="fetchSVGData('https://raw.githubusercontent.com/andrewgioia/Keyrune/master/svg/' + this.value + '.svg')" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<select class="select" id="inputSetSymbolRarity" onchange="decorateSVG()">
<option>Common</option>
<option>Uncommon</option>
<option selected="selected">Rare</option>
<option>Mythic</option>
<option>Timeshifted</option>
</select>
Or upload your own image/svg:
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event)" placeholder="Via File Upload">
<div class="bar"></div>
<div>
<div class="download">
<a onclick="downloadSetSymbolImage(this)" id="downloadSetSymbolImage" href="" target="_blank" download="setSymbol.svg">Download</a>
</div>
</div>
</div>
</div>
<div class="hidden"></div>
<div class="layer">
<div class="title">Have Any Questions?</div>
<div class="paragraph indent">
If you have any questions 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>. Even if you made a cool card and want to share, I'd love to see it!
</div>
</div>
</div>
</body>
<footer>
<div class='footer'>
<div>
<div>Theme</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>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>
</footer>
<script async src="data/scripts/setCodeList.js"></script>
<script defer src="data/site/other/setSymbol/setSymbol.js"></script>
<script defer src="data/scripts/colors.js"></script>
<html>