mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
283 lines
17 KiB
HTML
283 lines
17 KiB
HTML
<!DOCTYPE html5>
|
||
<html>
|
||
<head>
|
||
<script async src="/data/scripts/localStorage.js"></script>
|
||
<link rel="stylesheet" href="/data/styles/main.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>
|
||
<link rel="preload" href="/data/fonts/gotham-medium.ttf" as="font" type="font/ttf" crossorigin="anonymous">
|
||
<link rel="preload" href="/data/fonts/beleren-b.ttf" as="font" type="font/ttf" crossorigin="anonymous">
|
||
<link rel="preload" href="/data/fonts/beleren-bsc.ttf" as="font" type="font/ttf" crossorigin="anonymous">
|
||
<link rel="preload" href="/data/fonts/matrix.ttf" as="font" type="font/ttf" crossorigin="anonymous">
|
||
<link rel="preload" href="/data/fonts/mplantin.ttf" as="font" type="font/ttf" crossorigin="anonymous">
|
||
<link rel="preload" href="/data/fonts/mplantin-i.ttf" as="font" type="font/ttf" crossorigin="anonymous">
|
||
<link rel="preload" href="/data/fonts/goudy-medieval.ttf" as="font" type="font/ttf" crossorigin="anonymous">
|
||
<body>
|
||
<title>Card Conjurer</title>
|
||
<div class='title layer'>Card Conjurer</div>
|
||
<script>
|
||
alert("The old version of Card Conjurer will be taken offline at some point in the future, as early as April 2021. Sorry for the inconvenience.")
|
||
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='selected interactable'>Frame</div>
|
||
<div onclick='toggleTabs(this, "textTab")' class='interactable'>Text</div>
|
||
<div onclick='toggleTabs(this, "artTab")' class='interactable'>Art</div>
|
||
<div onclick='toggleTabs(this, "setSymbolTab")' class='interactable'>Set Symbol</div>
|
||
<div onclick='toggleTabs(this, "watermarkTab")' class='interactable'>Watermark</div>
|
||
<div onclick='toggleTabs(this, "collectorTab")' class='interactable'>Collector</div>
|
||
<div onclick='toggleTabs(this, "importTab")' class='interactable'>Import/Save</div>
|
||
<div onclick='{toggleTabs(this, "tutorialTab"); if (document.getElementById("tutorial").src == "") {document.getElementById("tutorial").src = "https://www.youtube.com/embed/UrNk6I55S0Q"}}' class='interactable'>Tutorial</div>
|
||
</div>
|
||
<div id='tabOptions'>
|
||
<div id='frameTab'>
|
||
<div class="splitGrid">
|
||
<div>
|
||
Select a frame version:<br>
|
||
<select id="inputFrameVersion" onchange="loadVersion(this.value)">
|
||
<option disabled value=''>Standard Frames</option>
|
||
<option value="m15">Regular</option>
|
||
<option value="token">Tokens</option>
|
||
<option value="m15Planeswalker">M15 Planeswalker</option>
|
||
<option value="saga">Sagas</option>
|
||
<option disabled value=''>Special Frames</option>
|
||
<option value="m15Promo">Promo (Tall-Art)</option>
|
||
<option value="m15Textless">Textless/Fullart</option>
|
||
<option value="expedition">Zendikar Expeditions</option>
|
||
<option value="modal">Modal (Front only)</option>
|
||
<option value="short">Short Modal</option>
|
||
<option disabled value=''>Standalone Frames</option>
|
||
<option value="storybook">Eldraine Storybook</option>
|
||
<option value="ixalan">Ixalan Maps</option>
|
||
<option value="unstable">Unstable Basics</option>
|
||
<option value="future">Future Shifted</option>
|
||
<option disabled value=''>Old Frames</option>
|
||
<option value="seventh">Seventh Edition</option>
|
||
<option value="seventhTextless">Textless Seventh Edition</option>
|
||
<option value="legends">Legends Multicolored</option>
|
||
<option disabled value=''>Misc. Frames</option>
|
||
<option value="planechase">Planechase</option>
|
||
<option value="bleedEdge">1/8th Inch Bleed Edge</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
Load a frame pack:<br>
|
||
<select id="inputFramePack" onchange="loadScript('/data/scripts/versions/' + document.getElementById('inputFrameVersion').value + '/' + this.value + '.js')">
|
||
<option value="regular">Regular</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
<button onclick='addSelectedFrame(["Middle Third"])'>Add To Middle Third</button>
|
||
</div>
|
||
<div id='previewSelectedFrame'>
|
||
(Selected: None)
|
||
</div>
|
||
<div id="cardMaster">
|
||
|
||
</div>
|
||
<div id='cardMasterElementEditor' class='hidden'>
|
||
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><br>
|
||
<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">
|
||
<input type="text" placeholder="Artist's Name" id="inputInfoArtist2" oninput="artistNameUpdated(this.value)" value="">
|
||
</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>
|
||
To hide the art, set the Zoom value to 0.
|
||
</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="artistNameUpdated(this.value)" value="">
|
||
</div>
|
||
Remember that you must properly credit the artist before downloading your card!
|
||
</div>
|
||
</div>
|
||
<div id='setSymbolTab' class='hidden'>
|
||
<div class="splitGrid">
|
||
<div>
|
||
<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="setSymbolFromGatherer()">
|
||
<input type="text" id="inputSetRarity" placeholder="Rarity" onchange="setSymbolFromGatherer()">
|
||
</div>
|
||
<div>
|
||
<div>X, Y, & Zoom:</div>
|
||
<input type="number" value="0" id="inputSetSymbolX" oninput="setSymbol.onload()">
|
||
<input type="number" value="0" id="inputSetSymbolY" oninput="setSymbol.onload()">
|
||
<input type="number" value="100" step="0.1" min="0" id="inputSetSymbolZoom" oninput="setSymbol.onload()">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
To hide the set symbol, set the Zoom value to 0.
|
||
</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="cropSVG(this.value, watermark)">
|
||
<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="#b4bec6">Artifact/Colorless</option>
|
||
<option value="#cfc8be">Land</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="#b4bec6">Artifact/Colorless</option>
|
||
<option value="#cfc8be">Land</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'>
|
||
<div>
|
||
Import a real card:
|
||
<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><br>
|
||
<div>
|
||
Load a saved card:
|
||
<select id="inputCardToImport" onchange="importSavedCard(this.value)">
|
||
<option disabled selected='selected'>None selected</option>
|
||
</select>
|
||
<button onclick='saveCard()'>Save current card</button>
|
||
<button onclick='deleteCard()'>Delete selected card</button>
|
||
</div><br>
|
||
<div>
|
||
Cards are saved to your browser's local storage. If you plan on clearing site data or switching devices, you can download your saved cards here:
|
||
<button onclick='downloadSavedCards()'>Download all saved cards</button>
|
||
And upload your saved cards file here:
|
||
<input oninput='uploadSavedCards(event)' type='file'>
|
||
</div>
|
||
</div>
|
||
<div id='tutorialTab' class='hidden' style='width: 100%; height: 56.25%;'>
|
||
<iframe width='1920' height='1080' allowfullscreen style='width: 100%; height:100%; border: none;' id='tutorial'></iframe>
|
||
</div>
|
||
</div>
|
||
<div class='downloadCardImage'>
|
||
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='animated layer slideFromRight'>
|
||
<!-- <div class='cardLayerGrid'>
|
||
<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr">Eldrazi Titans, Zendikar Rising Showcase. Now THIS would be an epic Secret Lair 👀<a href="https://twitter.com/hashtag/mtg?src=hash&ref_src=twsrc%5Etfw">#mtg</a> <a href="https://twitter.com/hashtag/mtgproxy?src=hash&ref_src=twsrc%5Etfw">#mtgproxy</a> <a href="https://twitter.com/hashtag/cardconjurer?src=hash&ref_src=twsrc%5Etfw">#cardconjurer</a> <a href="https://t.co/TXDCeZyBDY">pic.twitter.com/TXDCeZyBDY</a></p>— 𝐊𝐲𝐥𝐞 𝐁𝐮𝐫𝐭𝐨𝐧 🧙♂️ (@ImKyle4815) <a href="https://twitter.com/ImKyle4815/status/1309512231659417603?ref_src=twsrc%5Etfw">September 25, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||
<div> -->
|
||
<div class='title'>
|
||
Share Your Cards!
|
||
</div>
|
||
<div class="justify">
|
||
I'd love to see what custom cards you're making, and I'm sure others would too! Post a picture on Twitter with <a style='color: #00aced;' href="https://twitter.com/search?q=%23CardConjurer&src=typed_query&f=live" target='_blank'>#CardConjurer</a>, or just check out what others have made!
|
||
</div>
|
||
<!-- </div>
|
||
</div> -->
|
||
</div>
|
||
<div class='animated layer slideFromLeft'>
|
||
<div class='cardLayerGrid'>
|
||
<div>
|
||
<div class='title'>
|
||
How You Can Help
|
||
</div>
|
||
<div class="justify">
|
||
As a student on a tight budget, it can be hard to afford Magic. If you've enjoyed using Card Conjurer and would like to help me attend a draft or continue working on Card Conjurer, you can make a small donation via <a style='color: #3b7bbf;' href="https://www.paypal.me/kyleburtondonate" target='_blank'>PayPal</a>. If you prefer other methods of supporting, I have a <a style='color: #28abdf;' href="https://ko-fi.com/kyleburton" target='_blank'>Ko-Fi</a> and <a style='color: #f96854;' href="https://www.patreon.com/KyleBurton" target='_blank'>Patreon</a> as well. Any assistance is greatly appreciated!
|
||
</div>
|
||
</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/m15/version.js"></script>
|
||
<script defer src="/data/scripts/localCardStorage.js"></script>
|
||
<div class='notificationContainer'></div>
|
||
</body>
|
||
<footer id='footer'>
|
||
<script async src='/data/scripts/footer.js'></script>
|
||
<script defer src="/data/scripts/animations.js"></script>
|
||
</footer>
|
||
<html>
|