mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
214 lines
13 KiB
HTML
214 lines
13 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<script async src="data/scripts/cookies.js"></script>
|
|
<head>
|
|
<title>Card Conjurer</title>
|
|
<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='title'>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>
|
|
<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, & 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 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>
|
|
</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 one of the following buttons to load the described card frame:<br>
|
|
<button onclick='loadScript("data/scripts/versionM15.js")'>M15</button>
|
|
<button onclick='loadScript("data/scripts/versionM15Nyx.js")'>Nyx (M15)</button><br><br>
|
|
<button onclick='loadScript("data/scripts/versionPlaneswalker.js")'>Planeswalker (M15)</button><br><br>
|
|
<button onclick='loadScript("data/scripts/versionStorybook.js")'>*Storybook (Non-Adventure)</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 fadeIn'>
|
|
<div class='paragraph'>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Id volutpat lacus laoreet non curabitur. Adipiscing tristique risus nec feugiat in fermentum. Vulputate mi sit amet mauris. Morbi tincidunt augue interdum velit euismod in. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Sed felis eget velit aliquet sagittis. Neque ornare aenean euismod elementum nisi quis eleifend. Nisl nunc mi ipsum faucibus vitae. Mattis nunc sed blandit libero volutpat sed cras ornare. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Condimentum mattis pellentesque id nibh tortor. Leo in vitae turpis massa. Dignissim cras tincidunt lobortis feugiat vivamus. Massa ultricies mi quis hendrerit dolor magna eget est.
|
|
</div>
|
|
</div>
|
|
<div class='layer darkLayer slideFromRight'>
|
|
<div class='paragraph'>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae. Venenatis tellus in metus vulputate eu. Id diam maecenas ultricies mi. Enim nec dui nunc mattis enim ut tellus elementum. Consectetur libero id faucibus nisl tincidunt eget nullam non. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Morbi leo urna molestie at elementum eu facilisis sed odio. Nulla pharetra diam sit amet nisl suscipit. A erat nam at lectus urna duis. Neque viverra justo nec ultrices.
|
|
</div>
|
|
</div>
|
|
<div class='layer slideFromLeft'>
|
|
<div class='paragraph'>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae. Venenatis tellus in metus vulputate eu. Id diam maecenas ultricies mi. Enim nec dui nunc mattis enim ut tellus elementum. Consectetur libero id faucibus nisl tincidunt eget nullam non. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Morbi leo urna molestie at elementum eu facilisis sed odio. Nulla pharetra diam sit amet nisl suscipit. A erat nam at lectus urna duis. Neque viverra justo nec ultrices.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<footer class='footer'>
|
|
<div>
|
|
Card Conjurer by Kyle Burton<br>
|
|
<select id='inputColorPalette' onchange='loadScript("data/scripts/" + this.value + ".js")'>
|
|
<option value='lightMode'>Light Mode</option>
|
|
<option value='darkMode'>Dark Mode</option>
|
|
<option value='raveMode'>Rave Mode</option>
|
|
</select>
|
|
</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>
|
|
</footer>
|
|
<script defer src="data/scripts/animations.js"></script>
|
|
<script defer src="data/scripts/sortable.js"></script>
|
|
<script defer src="data/scripts/main.js"></script>
|
|
<script defer src="data/scripts/versionM15.js"></script>
|
|
<html> |