forked from GithubMirrors/cardconjurer
109 lines
5.2 KiB
HTML
109 lines
5.2 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="footerGrid">
|
|
<div>
|
|
<div class="visitorCountTrigger">Card Conjurer By Kyle Burton</div>
|
|
<div class="visitorCount"></div>
|
|
</div>
|
|
<div>
|
|
Navigation:<br>
|
|
<a href="index.html">Card Creator</a><br>
|
|
<a href="life.html">Life Counter</a><br>
|
|
<a href="askscryfall.html">Ask Scryfall</a><br>
|
|
<a href="setsymbol.html">Set Symbol Creator</a>
|
|
</div>
|
|
<div>
|
|
Legal:<br>
|
|
<a href="disclaimer.html">Disclaimer</a><br>
|
|
<a href="termsofuse.html">Terms of Use</a>
|
|
</div>
|
|
</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>
|