forked from GithubMirrors/cardconjurer
94 lines
4.9 KiB
HTML
94 lines
4.9 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<head>
|
|
<script async src="data/scripts/cookies.js"></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="data/site/favicons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="data/site/favicons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="data/site/favicons/favicon-16x16.png">
|
|
<link rel="manifest" href="data/site/favicons/site.webmanifest">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
canvas {
|
|
width: 500px;
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
<title>CC - Set Symbol</title>
|
|
<div class="mainDiv">
|
|
<div class="pageTitle">
|
|
Set Symbol Maker
|
|
</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="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 id='footer'>
|
|
<script async src='data/scripts/footer.js'></script>
|
|
<script defer src="data/scripts/animations.js"></script>
|
|
</footer>
|
|
<html>
|