GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-26 21:04:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

3.0

Browse Source
This commit is contained in:
Kyle
2019-09-20 17:10:49 -07:00
parent c24c2c2fb9
commit b81c6a6ed2
619 changed files with 1977 additions and 1977 deletions
Download Patch File Download Diff File Expand all files Collapse all files

554
index.html
View File

@@ -2,321 +2,117 @@
<html>
<head>
<title>Card Conjurer</title>
<!-- Favicon craziness! -->
<link rel="stylesheet" href="data/site/styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/site.webmanifest">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#64ca2f">
<link rel="shortcut icon" type="image/x-icon" href="favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-config" content="favicons/browserconfig.xml">
<meta name="theme-color" content="#64ca2f">
<!-- Other things -->
<link rel="stylesheet" href="data/site/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Here's the stuff that does things? -->
<script type='application/ld+json'>
{
"@context": "http://schema.org/",
"@type": "WebPage",
"creator": "Kyle Burton",
"dateCreated": "July 2018",
"inLanguage": {
"@type": "Language",
"name": "English"
},
"keywords": [
"MTG",
"Magic",
"card",
"custom",
"creator"
],
"typicalAgeRange": "All ages",
"description": "Card Conjurer: A free online tool that creates custom Magic: The Gathering Cards. Fast, easy, and offers a wide variety of card frames and other customizations. Planar cards, Ixalan maps, Planeswalkers, and more!",
"image": "http://cardconjurer.com/data/site/sampleCards/sample8.png",
"mainEntityOfPage": "cardconjurer.com",
"name": "Card Conjurer"
}
</script>
</head>
<header>
<div class="title"><img src="data/site/images/title.png" id="header"></div>
</header>
<body>
<div class="grid mainGrid">
<!-- from here -->
<div class="canvasContainer">
<canvas id="canvas" width="750" height="1050"></canvas>
</div>
<div class="cmmArea">
<div class="grid selectionGrid">
<div onclick="toggleView('frame', 'cmm')">Frame</div>
<div onclick="toggleView('text', 'cmm')">Text</div>
<div onclick="toggleView('info', 'cmm')">Info</div>
<div onclick="toggleView('art', 'cmm')">Art</div>
<div onclick="toggleView('set', 'cmm')">Set Symbol</div>
<div onclick="toggleView('watermark', 'cmm')">Watermark</div>
<div onclick="toggleView('advanced', 'cmm')">Advanced</div>
<div onclick="toggleView('download', 'cmm')">Download</div>
<div onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div>
<div onclick="toggleView('vanguard', 'cmm')" style="display: none;" id="cmmVanguard">Vanguard</div>
<div class="pageTitle">
Card Conjurer
</div>
<div class="mainDiv">
<div class="mainGrid">
<div class="canvasContainer">
<canvas id="mainCanvas" class="canvas"></canvas>
</div>
<div class="selectionGridTarget padded">
<div class="cmm shown" id="cmm-frame">
Border
<span class="dropdown">
<select onchange="backToDefault(this.value)" class="input" id="inputCardVersion">
<option value="m15">M15</option>
<option value="old">Old</option>
<option value="planeswalker">Planeswalker (M15)</option>
<option value="tokenTextless">Token (Textless)</option>
<option value="tokenText">Token (Regular)</option>
<option value="tokenTall">Token (Tall)</option>
<option value="fullArtLandM15">Full Art Land (M15)</option>
<option value="fullArtLandUnstable">Full Art Land (Unstable)</option>
<option value="vanguard">Vanguard</option>
<option value="plane">Plane</option>
<option value="miniPlane">Mini-Plane</option>
</select>
</span>
<br><br>
Frame
<span class="dropdown">
<select class="selectColor changesFrame input" onchange="imgFrame.load(this.value + 'frame.png')" id="inputFrameColor"></select>
</span>
<br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxFrameRight" onchange="sectionFrameFunction()" class="changesFrame">
<label for="inputCheckboxFrameRight"/>
<div>Frame (right)</div>
<div class="cardMenu">
<div>
<div>
Card Frame
</div>
<span class="dropdown">
<select class="selectColor changesFrame input" onchange="imgFrameRight.load(this.value + 'frame.png')" id="inputFrameRightColor"></select>
</span>
<br><br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxTitleTypeBoxes" onchange="sectionFrameFunction()" class="changesTitleType">
<label for="inputCheckboxTitleTypeBoxes"/>
<div>Title and Type Boxes</div>
<div class="imageGrid">
<div class="autoGrid">
<div class="tooltip"><select class="select" id="inputImageType" onchange="hideShowColors()"></select><span class="tooltiptext">Select the part of the card frame</span></div>
<div class="tooltip"><select class="select" id="inputImageIndex" onchange="userLoadImage()"></select><span class="tooltiptext">Select the color of the current image type</span></div>
<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>
<span class="dropdown">
<select class="selectColor changesTitleType input" onchange="imgTitleTypeBoxes.load(this.value + 'frame.png')"></select>
</span>
<br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxTitleTypeBoxesRight" onchange="sectionFrameFunction()" class="changesTitleType">
<label for="inputCheckboxTitleTypeBoxesRight"/>
<div>Title and Type Boxes (right)</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>
<span class="dropdown">
<select class="selectColor changesTitleType input" onchange="imgTitleTypeBoxesRight.load(this.value + 'frame.png')"></select>
</span>
<br><br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxRulesBox" onchange="sectionFrameFunction()" class="changesRulesBox">
<label for="inputCheckboxRulesBox"/>
<div>Rules Box</div>
</div>
<span class="dropdown">
<select class="selectColor changesRulesBox input" onchange="imgRulesBox.load(this.value + 'frame.png')"></select>
</span>
<br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxRulesBoxRight" onchange="sectionFrameFunction()" class="changesRulesBox">
<label for="inputCheckboxRulesBoxRight"/>
<div>Rules Box (right)</div>
</div>
<span class="dropdown">
<select class="selectColor changesRulesBox input" onchange="imgRulesBoxRight.load(this.value + 'frame.png')"></select>
</span>
<br><br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxPinline" onchange="sectionFrameFunction()" class="changesPinline">
<label for="inputCheckboxPinline"/>
<div>Pinline</div>
</div>
<span class="dropdown">
<select class="selectColor changesPinline input" onchange="imgPinline.load(this.value + 'frame.png')"></select>
</span>
<br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxPinlineRight" onchange="sectionFrameFunction()" class="changesPinline">
<label for="inputCheckboxPinlineRight"/>
<div>Pinline (right)</div>
</div>
<span class="dropdown">
<select class="selectColor changesPinline input" onchange="imgPinlineRight.load(this.value + 'frame.png')"></select>
</span>
<div class="bar"></div>
</div>
<div class="cmm" id="cmm-advanced">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxLegendary" onchange="loadLegendaryImages()">
<label for="inputCheckboxLegendary" />
<div>Legendary</div>
<div>
<div>
Text
</div>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxRareStamp" onchange="loadRareStampImages()">
<label for="inputCheckboxRareStamp" />
<div>Rare Stamp</div>
</div>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxNyx" onchange="loadNyxImages()">
<label for="inputCheckboxNyx" />
<div>Nyx</div>
</div>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxMiracle" onchange="loadMiracleImages()">
<label for="inputCheckboxMiracle" />
<div>Miracle</div>
</div>
<br>
Frame Opacity
<input id="inputFrameOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
<br>
Title/Type Opacity
<input id="inputTitleTypeOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
<br>
Rules Box Opacity
<input id="inputRulesBoxOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
<br>
Pinline Opacity
<input id="inputPinlineOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
<br><br>
Title Color <input type="color" id="inputTitleColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTitleOutlineColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxTitleOutline" onchange="sectionTextFunction()">
<label for="inputCheckboxTitleOutline" />
<div>Title Outline</div>
</div>
Type Color <input type="color" id="inputTypeColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTypeOutlineColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxTypeOutline" onchange="sectionTextFunction()">
<label for="inputCheckboxTypeOutline" />
<div>Type Outline</div>
</div>
Rules Color <input type="color" id="inputRulesColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()"> Outline <input type="color" id="inputRulesOutlineColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxRulesOutline" onchange="sectionTextFunction()">
<label for="inputCheckboxRulesOutline" />
<div>Rules Outline</div>
</div>
<input type="color" id="inputCreatureColor" value="#000000" class="input" onchange="sectionTextFunction()"> Power/Toughness Color
<br><br>
<input type="color" id="inputBorderColor" value="#000000" class="input" onchange="sectionFrameFunction()"> Border Color
<div class="tooltip"><select class="select" id="inputWhichText" onchange="changeWhichText()"></select><span class="tooltiptext">Select the text you want to edit</span></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 class="bar"></div>
</div>
<div class="cmm" id="cmm-text">
Name
<input id="inputName" type="text" class="input" value="" oninput="sectionTextFunction()" placeholder="Ajani's Chosen">
<br>
Mana Cost
<input id="inputCost" type="text" class="input" value="" oninput="sectionTextFunction()" placeholder="2 w w (include spaces)">
<br>
Type
<input id="inputType" type="text" class="input" value="" oninput="sectionTextFunction()" placeholder="Creature — Cat Soldier">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxPowerToughness" onchange="sectionTextFunction()">
<label for="inputCheckboxPowerToughness" />
<div>Power/Toughness</div>
<div>
<div>
Art
</div>
<span class="dropdown">
<select class="selectColor input" onchange="imgPowerToughness.load(this.value + 'pt.png')"></select>
</span>
<input id="inputPowerToughness" class="input" type="text" value="" oninput="sectionTextFunction()" placeholder="3/3">
<br><br>
Rules Text
<br>
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px" placeholder="Remember to include curly brackets, '{' and '}', around each code. To skip to the next line use {line}. See 'Mana Symbols' and 'Other Codes' (below) for more information." oninput="sectionTextFunction()" onkeypress="textAreaKeyPressed()"></textarea>
<br>
Rules Text Font Size
<input id="inputTextSize" type="number" class="input" min="0" value="37" step="1" oninput="sectionTextFunction()">
<br>
Pixels Between Paragraphs
<input id="inputTextShift" type="number" class="input" min="0" value="13" oninput="sectionTextFunction()">
<br>
Shift All Text Down
<input id="inputTextDown" type="number" class="input" value="0" oninput="sectionTextFunction()">
</div>
<div class="cmm" id="cmm-info">
Collector's Number
<input id="inputInfoNumber" type="text" class="input" value="001/001" oninput="sectionTextFunction()">
<br>
Rarity
<input id="inputInfoRarity" type="text" class="input" value="S" oninput="sectionTextFunction()">
<br>
Set Abbreviation
<input id="inputInfoSet" type="text" class="input" value="MTG" oninput="sectionTextFunction()">
<br>
Language
<input id="inputInfoLanguage" type="text" class="input" value="EN" oninput="sectionTextFunction()">
<br>
Artist Credit
<input id="inputInfoArtist" type="text" class="input" value="" oninput="sectionTextFunction()" placeholder="John Doe">
<br>
<!-- Other Information -->
<input id="inputInfoMessage" type="text" class="input" value="Not For Sale" oninput="sectionTextFunction()" style="display: none;">
</div>
<div class="cmm" id="cmm-art">
Upload an Image
<input type="text" class="input" placeholder="Via URL" onchange="imageURL(this.value, imgCardArt, 'none')">
<input id="inputCardArtName" onchange="inputCardArtName(this.value)" class="input" type="text" placeholder="Via Card Name">
<input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgCardArt)" id="inputPicture" placeholder="Via File Upload">
<br>
Card Name Result:
<input id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" class="input" type="number" value="1" min="1" max="3">
<br>
Image Zoom
<input id="inputCardArtZoom" type="number" class="input" value="100" step="0.1" oninput="drawCard()">
<br>
Image X
<input id="inputCardArtX" type="number" class="input" value="0" step="1" oninput="drawCard()">
<br>
Image Y
<input id="inputCardArtY" type="number" class="input" value="0" step="1" oninput="drawCard()">
<br>
<!-- Image Rotation
<input id="inputCardArtRotation" type="number" class="input" value="0" step="1" min="0" max="360" oninput="drawCard()"> -->
</div>
<div class="cmm" id="cmm-set">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxSetSymbol" checked="true" onchange="sectionOtherFunction()">
<label for="inputCheckboxSetSymbol" />
<div>Set Symbol</div>
<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 & 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>
Set Code
<input id="inputSetSymbolCode" type="text" class="input" onchange='imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("inputSetSymbolCode").value.toUpperCase() + "&size=large&rarity=" + document.getElementById("inputSetSymbolRarity").value.toUpperCase(), imgSetSymbol, "needsCrop")' value="LRW">
Rarity
<input id="inputSetSymbolRarity" type="text" class="input" onchange='imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("inputSetSymbolCode").value.toUpperCase() + "&size=large&rarity=" + document.getElementById("inputSetSymbolRarity").value.toUpperCase(), imgSetSymbol, "needsCrop")' value="U">
Or Upload an Image
<input type="text" class="input" placeholder="Via URL" onchange="imageURL(this.value, imgSetSymbol, 'needsCrop')">
<input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol)" id="inputPicture" placeholder="Via File Upload">
<br>
Scale Set Symbol
<input id="inputSetSymbolScale" type="number" class="input" min="0" value="100" step="0.1" oninput="sectionOtherFunction()">
<div class="bar"></div>
</div>
<div class="cmm" id="cmm-watermark">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxWatermark" checked="true" onchange="sectionOtherFunction()">
<label for="inputCheckboxWatermark" />
<div>Watermark</div>
<div>
<div>
Collector's/Legal Information
</div>
Watermark Opacity
<input id="inputWatermarkOpacity" type="number" class="input" min="0" max="100" value="40" step="1" oninput="sectionOtherFunction()">
<br>
Set Code
<input id="inputWatermarkCode" type="text" class="input" onchange='imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + this.value.toUpperCase() + "&size=large&rarity=C", imgWatermark, "needsBoth")' placeholder="WAR">
Or Upload an Image
<input type="text" class="input" placeholder="Via URL" onchange="imageURL(this.value, imgWatermark, 'needsBoth')">
<input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgWatermark)" id="inputPicture" placeholder="Via File Upload">
<br>
Watermark Color
<span class="dropdown">
<select onchange="sectionOtherFunction()" class="input" id="inputWatermarkColor">
<option value="none">default</option>
<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 class="bar"></div>
</div>
<div>
<div>
Set Symbol
</div>
<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 class="bar"></div>
</div>
<div>
<div>
Watermark
</div>
<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="#afa360" selected="selected">White</option>
<option value="#04527c">Blue</option>
<option value="#494949">Black</option>
<option value="#a3280d">Red</option>
<option value="#0f4f14">Green</option>
<option value="#7f5f00">Gold</option>
<option value="#616b72">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="#afa360">White</option>
<option value="#04527c">Blue</option>
<option value="#494949">Black</option>
@@ -324,149 +120,47 @@
<option value="#0f4f14">Green</option>
<option value="#7f5f00">Gold</option>
<option value="#616b72">Artifact/Colorless</option>
</select>
</span>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxSecondWatermark" onchange="sectionOtherFunction()">
<label for="inputCheckboxSecondWatermark" />
<div>Second Watermark Color</div>
</select><span class="tooltiptext">Select the secondary watermark color</span></div>
</div>
<span class="dropdown">
<select onchange="sectionOtherFunction()" class="input" id="inputSecondWatermarkColor">
<option value="none">default</option>
<option value="#afa360">White</option>
<option value="#04527c">Blue</option>
<option value="#494949">Black</option>
<option value="#a3280d">Red</option>
<option value="#0f4f14">Green</option>
<option value="#7f5f00">Gold</option>
<option value="#616b72">Artifact/Colorless</option>
</select>
</span>
<div class="bar"></div>
</div>
<div class="cmm" id="cmm-download">
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a><br><br>
Remember to properly credit the artist (under 'Info') before downloading!
</div>
<div class="cmm" id="cmm-planeswalker">
Planeswalker Ability Line Height
<input type="number" class="input" id="inputAbilityLine1" value="102" min="0" oninput="planeswalkerAbilityLines()">
<input type="number" class="input" id="inputAbilityLine2" value="96" min="0" oninput="planeswalkerAbilityLines()">
<input type="number" class="input" id="inputAbilityLine3" value="80" min="0" oninput="planeswalkerAbilityLines()">
<input type="number" class="input" id="inputAbilityLine4" value="0" min="0" oninput="planeswalkerAbilityLines()">
Planeswalker Ability Values
<input type="text" class="input" id="inputAbilityValue0" value="+1" oninput="planeswalkerAbilityIcons()">
<input type="text" class="input" id="inputAbilityValue1" value="0" oninput="planeswalkerAbilityIcons()">
<input type="text" class="input" id="inputAbilityValue2" value="-1" oninput="planeswalkerAbilityIcons()">
<input type="text" class="input" id="inputAbilityValue3" value="" oninput="planeswalkerAbilityIcons()">
</div>
<div class="cmm" id="cmm-vanguard">
Hand Size Modifier
<input type="text" class="input" id="inputVanguardHand" value="+1" oninput="sectionTextFunction()">
Starting Life Modifier
<input type="text" class="input" id="inputVanguardLife" value="+1" oninput="sectionTextFunction()">
<div>
<div>
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div>
</div>
</div>
</div>
<div class="tutorialArea">
<div class="grid selectionGrid">
<div onclick="toggleView('about', 'extras')">About</div>
<div onclick="toggleView('tutorial', 'extras')">Tutorial</div>
<div onclick="toggleView('symbolList', 'extras')">Mana Symbols</div>
<div onclick="toggleView('codes', 'extras')">Other Codes</div>
<div onclick="toggleView('set', 'extras')">Set Codes</div>
</div>
<div class="selectionGridTarget padded">
<div class="extras shown" id="extras-about">
<div class="miniTitle">
Welcome to Card Conjurer!
</div>
<div class="paragraph">
Card Conjurer is a program that creates custom Magic: The Gathering cards. There are already plenty of Magic card makers, but what sets Card Conjurer apart from the rest is its live-edit capabilities. Users can immediately see the effects of any change they make, which makes card customization easier and more enjoyable. Additionally, Card Conjurer offers more borders than any other website, including full art lands, planechase cards, miracle and nyx borders, and so much more.
</div>
<div class="miniTitle">
About Me
</div>
<div class="paragraph">
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="#header" onclick="alert('You\'re already there, silly!')">cardconjurer.com</a>.
</div>
</div>
<div class="extras" id="extras-symbolList">
Each of the following codes must be sandwhiched between curly brackets (e.g., '{t}')
<div class="symbolGrid grid" id="symbolList">
</div>
</div>
<div class="extras" id="extras-codes">
&#8226 {line} &#8594 Skips to the next line<br>
&#8226 {bar} &#8594 Just like line, except adds the bar that usually seperates flavor text<br>
&#8226 {lineNoSpace} &#8594 Just like line, except stays closer to the previous line<br>
&#8226 {i} &#8594 Text is italicized<br>
&#8226 {/i} &#8594 Text returns to normal<br>
&#8226 {left} &#8594 Text aligns to the left<br>
&#8226 {center} &#8594 Text aligns to the center<br>
&#8226 {right} &#8594 Text aligns to the right<br>
&#8226 {upX} &#8594 Shifts the following text X pixels up<br>
&#8226 {downX} &#8594 Shifts the following text X pixels down<br>
&#8226 {leftX} &#8594 Shifts the following text X pixels left<br>
&#8226 {rightX} &#8594 Shifts the following text X pixels right<br>
&#8226 {fontsizeX} &#8594 Changes the font size to X pixels<br>
</div>
<div class="extras" id="extras-set">
Every set in Magic: The Gathering has an associated 2-3 letter code. For example, Homelands is HM and Innistrad is ISD. This program uses the codes from <a href="http://gatherer.wizards.com" target="_blank">The Gatherer</a>, the official Magic card database. A handy list of all sets and their codes can be found on <a href="https://en.wikipedia.org/wiki/List_of_Magic:_The_Gathering_sets" target="_blank">Wikipedia</a>.
</div>
<div class="extras" id="extras-tutorial">
Card Conjurer has gone under some major changes since the making of this video, but it can still help to give a general idea of how to use the program:
<br><br>
<iframe src="https://www.youtube.com/embed/Uh9Qr35u49I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width: calc(100vw - 94px); height: calc((100vw - 94px) * 9/16)"></iframe>
</div>
</div>
<div class="layer">
<div class="title">Welcome to Card Conjurer!</div>
</div>
<div class="sampleGrid grid paddedVertical">
<div class="miniTitle">
Check out some samples
</div>
<div class="noBorder">
<img id="sampleCardA" class="sampleCard">
<img id="sampleCardB" class="sampleCard">
<img id="sampleCardC" class="sampleCard">
</div>
</div>
<!-- to here -->
<div>
<div class="padded">
<div class="miniTitle">
How You Can Help
</div>
<div class="paragraph">
I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by making a small donation or using a referral link:
</div>
<div class="grid donateGrid selectionGrid">
<div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="data/site/icons/paypal.png"></div>
<div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="data/site/icons/pucatrade.png"></div>
<div onclick="window.open('https://twitter.com/ImKyle4815', '_blank');" style="color:rgb(0,174,239);">@ImKyle4815<img src="data/site/icons/twitter.png"></div>
<div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:rgb(255,255,255);">Massdrop<img src="data/site/icons/massdrop.png"></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>
</body>
<footer>
<div id="alertMenu">
</div>
<div class="footer">
<a href="http://cardconjurer.com/TermsOfUse.txt" target="_blank">Terms&nbspof&nbspUse</a> &#8226 <a href="http://cardconjurer.com/Disclaimer.txt" target="_blank">Disclaimer</a> &#8226 <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">Github&nbsppage</a> &#8226 <a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">Contact</a> &#8226 <a href="symbol.html">Set&nbspSymbol&nbspMaker</a> <a href="life.html">Life&nbspCounter</a>
<div class="footerGrid">
<div>
Card Conjurer By Kyle Burton<br>
<input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips<br>
Happy Card Conjuring!
</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/main.js"></script>
<script src="data/scripts/colors.js"></script>
<script src="data/site/main.js"></script>
<script src="data/scripts/setCodeList.js"></script>
<html>