Files
cardconjurer/index.html
2020-03-31 15:02:32 -07:00

280 lines
14 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>
<title>Card Conjurer</title>
<div class='title darklayer'>Card Conjurer</div>
<script>
var cardWidth = 1500, cardHeight = 2100
if (window.location.search != "") {
var parameters = window.location.search.replace('?', '').split('&');
for (var i = 0; i < parameters.length; i ++) {
var targetParameter = parameters[i].split('=');
if (targetParameter[0] == 'scale') {
cardWidth *= parseFloat(targetParameter[1]);
cardHeight = cardWidth / 5 * 7;
}
}
}
</script>
<div class='mainGrid'>
<canvas id="previewCanvas"></canvas>
<div>
<div class='tabPicker' id='tabPicker'>
<div onclick='toggleTabs(this, "frameTab")' class='tabOptionSelected'>Frame</div>
<div onclick='toggleTabs(this, "textTab")'>Text</div>
<div onclick='toggleTabs(this, "artTab")'>Art</div>
<div onclick='toggleTabs(this, "setSymbolTab")'>Set Symbol</div>
<div onclick='toggleTabs(this, "watermarkTab")'>Watermark</div>
<div onclick='toggleTabs(this, "collectorTab")'>Collector</div>
<div onclick='toggleTabs(this, "importTab")'>Import</div>
<div onclick='toggleTabs(this, "advancedTab")'>Advanced</div>
</div>
<div id='tabOptions'>
<div id='frameTab'>
<div class="splitGrid">
<div id="framePicker" class="frameGrid"></div>
<div id="maskPicker"></div>
</div>
<div class='autoGrid'>
<button onclick='addSelectedFrame()'>Add</button>
<button onclick='addSelectedFrame(["Right Half"])'>Add To Right Half</button>
</div>
<div id="cardMaster">
</div>
<div id='cardMasterElementEditor'>
X: <input id='cardMasterElementEditorX' type='number' oninput='cardMasterElementEdited()'>
Y: <input id='cardMasterElementEditorY' type='number' oninput='cardMasterElementEdited()'>
Scale: <input id='cardMasterElementEditorScale' type='number' oninput='cardMasterElementEdited()'>
Opacity: <input id='cardMasterElementEditorOpacity' type='number' min='0' max='100' oninput='cardMasterElementEdited()'>
Erase: <input id='cardMasterElementEditorErase' type='checkbox' onchange='cardMasterElementEdited()'>
</div>
<div>Upload your own frame images:</div>
<div class="autoGrid">
<input type="file" accept="image/*" onchange="uploadLocalFrameImage(event)" placeholder="Via File Upload">
<input type="text" placeholder="Via URL" onchange="addUploadedFrameImage('https://cors-anywhere.herokuapp.com/' + this.value)">
</div>
</div>
<div id='textTab' class='hidden'>
<input type="text" placeholder="Mana Cost" id="inputManaCost" oninput="manaCostUpdated()" value="">
<div id='textPicker'></div>
<div id='textEditor'>
Text: <textarea id='textEditorText' oninput='cardTextEdited()'></textarea>
X: <input id='textEditorX' type='number' oninput='cardTextEdited()'>
Y: <input id='textEditorY' type='number' oninput='cardTextEdited()'>
Width: <input id='textEditorWidth' type='number' oninput='cardTextEdited()'>
Height: <input id='textEditorHeight' type='number' oninput='cardTextEdited()'>
</div>
<div id='textCodeReference'>
</div>
</div>
<div id='artTab' class='hidden'>
<div class="splitGrid">
<div>
<input type="file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload">
<input type="text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
<input type="text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name">
<input type="number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name">
</div>
<div>
<div>X, Y, &amp; Zoom:</div>
<input type="number" value="0" id="inputCardArtX" oninput="cardArtUpdated()">
<input type="number" value="0" id="inputCardArtY" oninput="cardArtUpdated()">
<input type="number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardArtUpdated()">
</div>
</div>
</div>
<div id='collectorTab' class='hidden'>
<div>
<div class="autoGrid">
<input type="text" placeholder="Number" id="inputInfoNumber" oninput="bottomInfoUpdated()" value="">
<input type="text" placeholder="Rarity" id="inputInfoRarity" oninput="bottomInfoUpdated()" value="P">
<input type="text" placeholder="Set" id="inputInfoSet" oninput="bottomInfoUpdated()" value="MTG">
<input type="text" placeholder="Language" id="inputInfoLanguage" oninput="bottomInfoUpdated()" value="EN">
<input type="text" placeholder="Artist's Name" id="inputInfoArtist" oninput="bottomInfoUpdated()" value="">
</div>
Remember that you must properly credit the artist before downloading your card!
</div>
</div>
<div id='setSymbolTab' class='hidden'>
<div class="autoGrid">
<input type="file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload">
<input type="text" placeholder="Via URL" onchange="setSymbol.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
<input type="text" id="inputSetCode" placeholder="Via Set Code" onchange="autoCrop(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)">
<input type="text" id="inputSetRarity" placeholder="Rarity" onchange="autoCrop(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)">
<!-- <button class="button" onclick="randomSet()">Random</button> -->
</div>
</div>
<div id='watermarkTab' class='hidden'>
<div class="autoGrid">
<input type="file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload">
<input type="text" placeholder="Via URL" onchange="watermark.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
<input type="text" placeholder="Via Set Code" onchange="watermark.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large'">
<select id="inputWatermarkPrimary" onchange="watermarkUpdated()">
<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>
<option value="#ffffff">True White</option>
</select>
<select id="inputWatermarkSecondary" onchange="watermarkUpdated()">
<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>
<option value="#ffffff">True White</option>
</select>
<input id='inputWatermarkOpacity' type="number" placeholder="Opacity" oninput="watermarkUpdated()" min='0' max='100' value='100'>
</div>
</div>
<div id='importTab' class='hidden'>
Type in a card name to import it! (Only works for regular cards)
<input type="text" class="input text" id="inputCardNameTextImport" onchange="inputCardNameTextImport(this.value)" placeholder="Via Card Name">
Select which card to import:
<input type="number" class="input number" id="inputCardNameNumberTextImport" onchange="inputCardNameNumberTextImport(this.value)" value="1" min="1" max="1">
</div>
<div id='advancedTab' class='hidden'>
Click on one of the following buttons to load the described card frame:<br>
<button onclick='loadScript("data/scripts/versions/versionM15.js")'>M15</button>
<button onclick='loadScript("data/scripts/versions/versionM15Nyx.js")'>Nyx (M15)</button>
<button onclick='loadScript("data/scripts/versions/versionInvention.js")'>Invention (M15)</button><br><br>
<button onclick='loadScript("data/scripts/versions/versionPlaneswalker.js")'>Planeswalker</button><br><br>
<button onclick='loadScript("data/scripts/versions/versionStorybook.js")'>*Storybook (Non-Adventure)</button><br><br>
<button onclick='loadScript("data/scripts/versions/versionFuture.js")'>Future Shifted</button><br><br>
<button onclick='loadScript("data/scripts/versions/versionSeventh.js")'>Seventh Edition</button>
<br><br>*Starred frames are works in progress, however they can still be used.
</div>
</div>
<div class='downloadCardImage'>
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div>
</div>
</div>
<div class='layer darkLayer fadeIn'>
<div>
<div class='layerTitle'>Welcome to Card Conjurer</div>
<div class='fiveSampleCards'>
<div><img src='data/site/images/samples/sample1.png' alt='loading sample...' class='sample1'></div>
<div><img src='data/site/images/samples/sample2.png' alt='loading sample...' class='sample2'></div>
<div><img src='data/site/images/samples/sample3.png' alt='loading sample...' class='sample3'></div>
<div><img src='data/site/images/samples/sample4.png' alt='loading sample...' class='sample4'></div>
<div><img src='data/site/images/samples/sample5.png' alt='loading sample...' class='sample5'></div>
</div>
</div>
</div>
<div class='layer slideFromRight'>
<div class='cardLayerGrid'>
<img src='data/site/images/samples/sampleVariety.png'>
<div>
<div class='layerTitle'>
Choose From A Variety Of Card Frames
</div>
<div class="justify">
Card Conjurer offers more card frame options than any other web-based Magic card maker
</div>
</div>
</div>
</div>
<div class='layer darkLayer slideFromLeft'>
<div class='cardLayerGrid'>
<div>
<div class='layerTitle'>
Customize To Your Heart's Content
</div>
<div class="justify">
With Card Conjurer's level of customization, you'll have endless options when designing your dream cards
</div>
</div>
<img src='data/site/images/samples/sampleCustomize.png'>
</div>
</div>
<div class='layer slideFromRight'>
<div class='cardLayerGrid'>
<img src='data/site/images/samples/sampleBling.png'>
<div>
<div class='layerTitle'>
Or Bling Out Existing Favorites
</div>
<div class="justify">
Easily import vital information from existing cards, then redesign them
</div>
</div>
</div>
</div>
<div class='layer darkLayer fadeIn'>
<div>
<div>
<div class='layerTitle'>
Have Any Questions?
</div>
<div class='justify'>
If you have a question, a request, or even just want to share a cool card you made, 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>!
</div>
</div>
</div>
</div>
<div class='layer slideFromLeft'>
<div>
<div class='layerTitle'>
The Proxy Factory
</div>
<div class="justify">
If you'd like to delve deeper into making custom Magic: The Gathering cards, check out The Proxy Factory! They're a community full of individuals interested in creating custom cards, and are very welcoming to new members. Take a look at their <a style='color: #ff4500;' href='https://www.reddit.com/r/TheProxyFactory/' target='_blank'>Reddit</a>, or join their <a style='color: #738adb;' href='https://discordapp.com/invite/xBCQprM' target='_blank'>Discord</a>. Happy proxying!
</div>
</div>
</div>
<script defer src="data/scripts/sortable.js"></script>
<script defer src="data/scripts/main.js"></script>
<script defer src="data/scripts/versions/versionM15.js"></script>
<!-- <script async src="data/scripts/palettes/darkMode.js"></script> -->
</body>
<footer class='footer'>
<div>
Card Conjurer by Kyle Burton<br>
<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>
<script>
document.getElementById('inputColorPalette').value = getCookie('colorPalette')
</script>
</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>
</div>
<div>
Legal<br>
<a href='termsofuse.html'>Terms of Use</a><br>
<a href='disclaimer.html'>Disclaimer</a>
</div>
<script defer src="data/scripts/animations.js"></script>
</footer>
<html>