Files
cardconjurer/index.html
2019-11-03 17:07:48 -08:00

187 lines
14 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">
</head>
<body>
<div class="mainDiv">
<div class="pageTitle">
Card Conjurer
</div>
<div class="mainGrid">
<div class="canvasContainer">
<canvas id="mainCanvas" class="canvas"></canvas>
</div>
<div class="cardMenu">
<div class="tab">
<div class="tabButton editor activeTab" onclick="tabFunction(event, `editor`, `optionFrame`)">Frame</div>
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionText`)">Text</div>
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionArt`)">Art</div>
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionInfo`)">Collector</div>
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionSet`)">Set</div>
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionWatermark`)">Watermark</div>
</div>
<div class="bar"></div>
<div class="tabContent editor displayed" id="optionFrame">
Select the part of the card frame:<br>
<div class="tab tabSelect" id="frameType"></div>
<div class="realCheckboxContainer">
<label class="checkboxContainer">
Right Half
<input type="checkbox" id="checkboxSecondary">
<span class="checkmark"></span>
</label>
</div>
Select the color:<br>
<div class="tab tabSelect" id="tabSelectColor"></div><br>
<div class="imageGrid">
<div class="autoGrid">
<button class="button tooltip" onclick="userEnterImage()">Enter<span class="tooltiptext">Add the selected image to the card</span></button>
<button class="button tooltip" onclick="userRemoveImage()">Remove<span class="tooltiptext">Remove the select image type from the card</span></button>
</div>
<div>
<div class="tooltip"><img id="imgPreview" class="imgPreview"><span class="tooltiptext">Preview of the selected image</span></div>
</div>
</div>
<div class="autoGrid">
<div class="tooltip"><select class="select" id="inputImageTypeOpacity" onchange="loadOpacityValue()"></select><span class="tooltiptext">Select the part of the card frame</span></div>
<div class="tooltip"><input type="number" class="input number" id="inputOpacityValue" min="0" max="100" oninput="opacityValueUpdated()"><span class="tooltiptext">Enter the opacity for the selected part of the frame</span></div>
</div>
</div>
<div class="tabContent editor" id="optionText">
<div id="inputWhichTextTabs" class="tab"></div>
<div class="tooltip"><textarea class="textarea tooltip" id="inputText" placeholder="" oninput="updateText()"></textarea><span class="tooltiptext">Edit the selected text</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="updateCardCanvas()" value=""><span class="tooltiptext">Enter the mana cost. Include spaces!</span></div>
</div>
<div class="tabContent editor" id="optionArt">
<div class="autoGrid">
<div>
<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the card art</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value"><span class="tooltiptext">Enter a URL for the card art</span></div>
<div class="tooltip"><input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name"><span class="tooltiptext">Enter a card name to use its art</span></div>
<div class="tooltip"><input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name"><span class="tooltiptext">Select which art to use (from the entered card name)</span></div>
</div>
<div>
<div style="text-align: center; margin: 0.18em 0px">Placement &amp; Zoom:</div>
<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtX" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art to the right</span></div>
<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtY" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art down</span></div>
<div class="tooltip"><input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="updateCardCanvas()"><span class="tooltiptext">Art zoom level</span></div>
</div>
</div>
</div>
<div class="tabContent editor" id="optionInfo">
<div class="autoGrid">
<div class="tooltip"><input type="text" class="input text" placeholder="Number" id="inputInfoNumber" oninput="updateBottomInfoCanvas()" value=""><span class="tooltiptext">Card Number</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P"><span class="tooltiptext">Rarity</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Set" id="inputInfoSet" oninput="updateBottomInfoCanvas()" value="MTG"><span class="tooltiptext">Set Code</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN"><span class="tooltiptext">Language</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Artist's Name" id="inputInfoArtist" oninput="updateBottomInfoCanvas()" value=""><span class="tooltiptext">Artist's Name<br>(necessary)</span></div>
</div>
</div>
<div class="tabContent editor" id="optionSet">
<div class="autoGrid">
<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the set symbol</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the set symbol</span></div>
<div class="tooltip"><input type="text" class="input text" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)"><span class="tooltiptext">Use a set code<br>(2-3 letters, as seen on the bottom of cards)</span></div>
<div class="tooltip"><input type="text" class="input text" id="inputSetRarity" placeholder="Rarity" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)"><span class="tooltiptext">C, U, R, M, or S<br>(Not every set has every rarity)</span></div>
<div class="tooltip"><button class="button" onclick="randomSet()">Random</button><span class="tooltiptext">Use a random set symbol and rarity</span></div>
</div>
</div>
<div class="tabContent editor" id="optionWatermark">
<div class="autoGrid">
<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the watermark</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the watermark</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')"><span class="tooltiptext">Use a set code<br>(2-3 letters, as seen on the bottom of cards)</span></div>
<div class="tooltip"><select class="select" id="inputWatermarkPrimary" onchange="updateWatermarkCanvas()">
<option value="none">None</option>
<option value="default">Default</option>
<option value="#ccc8b1" selected="selected">White</option>
<option value="#b0c3d5">Blue</option>
<option value="#b3b3b3">Black</option>
<option value="#ddac9b">Red</option>
<option value="#b9c8b5">Green</option>
<option value="#e4d49b">Gold</option>
<option value="#cfc8be">Artifact/Colorless</option>
</select><span class="tooltiptext">Select the watermark color</span></div>
<div class="tooltip"><select class="select" id="inputWatermarkSecondary" onchange="updateWatermarkCanvas()">
<option value="none">None</option>
<option value="default">Default</option>
<option value="#ccc8b1">White</option>
<option value="#b0c3d5">Blue</option>
<option value="#b3b3b3">Black</option>
<option value="#ddac9b">Red</option>
<option value="#b9c8b5">Green</option>
<option value="#e4d49b">Gold</option>
<option value="#cfc8be">Artifact/Colorless</option>
</select><span class="tooltiptext">Select the secondary watermark color</span></div>
</div>
</div>
<div class="bar"></div>
<div>
<div class="download">
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div>
</div>
</div>
</div>
<div class="hidden"></div>
<div class="layer">
<div class="title">Welcome to Card Conjurer!</div>
<div class="paragraph indent">Card Conjurer is a free program that helps you create custom Magic: The Gathering cards. There are already plenty of custom card makers out there, but what sets Card Conjurer apart from the rest is its live-edit capabilities. You can immediatly see the effects of any change you make, which makes card customization easier and overall a better experience.</div>
</div>
<div class="layer">
<div class="title">About Me</div>
<div class="paragraph indent">
Hi! My name is Kyle Burton and I am currently a high school student. I used to play Pokemon, but when a friend introduced me to Magic in 2013 I sold my pocket monsters and bought an M14 Intro Pack. Ever since that day Magic has been my all time favorite game. In addition to playing games, I've always <a href="https://www.youtube.com/watch?v=ERCzN91JicA" target="blank">loved technology</a>. During the 2017-18 school year I tought myself how to code Javascript, and a little bit of HTML and CSS. The following summer I created Kyle's Card Imager (<a href="https://scryfall.com/card/5dn/134/krark-clan-ironworks" target="blank">KCI</a>). It was pretty simple but I soon began to add more border images like Miracle or Nyx. After a few months I decided to share my creation, so I renamed it Card Conjurer and uploaded it to Github, and then in April of 2019 I bought the domain <a href="#" onclick="alert('You\'re already there, silly!')">cardconjurer.com</a>.
</div>
</div>
<div class="layer">
<div class="paragraph indent">
This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, <a href="old/index.html">click here</a>.
</div>
</div>
<!-- <div class="layer">-->
<!-- <div class="title">How You Can Help</div>-->
<!-- <div class="paragraph indent">-->
<!-- I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by using one of the following referral links:-->
<!-- </div>-->
<!-- <div class="autoGrid donate">-->
<!-- <div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:#3d213a;">PucaTrade<img src="data/site/icons/pucatrade.png"></div>-->
<!-- <div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:#ffffff;">Massdrop<img src="data/site/icons/massdrop.png"></div>-->
<!-- </div>-->
<!-- </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: <div 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></div>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>
Card Conjurer By Kyle Burton<br>
<input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips<br>
</div>
<div>
Navigation:<br>
<a href="index.html">Card Creator</a><br>
<a href="life.html">Life Counter</a>
</div>
<div>
Legal:<br>
<a href="disclaimer.html">Disclaimer</a><br>
<a href="termsOfUse.html">Terms of Use</a>
</div>
</div>
</footer>
<script src="data/scripts/colors.js"></script>
<script src="data/site/main.js"></script>
<script src="data/scripts/setCodeList.js"></script>
<html>