forked from GithubMirrors/cardconjurer
home page
This commit is contained in:
Kyle
225
creator.html
Normal file
225
creator.html
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
<!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, "tutorialTab")'>Tutorial</div>
|
||||||
|
<!-- <div onclick='toggleTabs(this, "advancedTab")'>Advanced</div> -->
|
||||||
|
</div>
|
||||||
|
<div id='tabOptions'>
|
||||||
|
<div id='frameTab'>
|
||||||
|
<div class="splitGrid">
|
||||||
|
<div>
|
||||||
|
Select a frame version:<br>
|
||||||
|
<select id="inputFrameVersion" onchange="loadScript('data/scripts/versions/' + this.value + '/version.js')">
|
||||||
|
<option value="m15">M15</option>
|
||||||
|
<option value="token">Tokens</option>
|
||||||
|
<option value="m15Promo">M15 Promo</option>
|
||||||
|
<option value="m15Textless">Textless Kaladesh Inventions</option>
|
||||||
|
<option value="m15Planeswalker">M15 Planeswalker</option>
|
||||||
|
<option value="storybook">Storybook</option>
|
||||||
|
<option value="ixalan">Ixalan Maps</option>
|
||||||
|
<option value="expedition">Expeditions</option>
|
||||||
|
<option value="future">Future Shifted</option>
|
||||||
|
<option value="seventh">Seventh Edition</option>
|
||||||
|
<option value="seventhTextless">Textless Seventh Edition</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><br>
|
||||||
|
<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' 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">
|
||||||
|
</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>
|
||||||
|
<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="setSymbolFromGatherer()">
|
||||||
|
<input type="text" id="inputSetRarity" placeholder="Rarity" onchange="setSymbolFromGatherer()">
|
||||||
|
<!-- <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! (Doesn't work with doublefaced or split 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='tutorialTab' class='hidden'>
|
||||||
|
Coming Soon!
|
||||||
|
</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 slideFromRight'>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class='layerTitle'>
|
||||||
|
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='layer slideFromLeft'>
|
||||||
|
<div class='cardLayerGrid'>
|
||||||
|
<div>
|
||||||
|
<div class='layerTitle'>
|
||||||
|
How You Can Help
|
||||||
|
</div>
|
||||||
|
<div class="justify">
|
||||||
|
As a student on a tight budget, it can be hard to play Magic. If you've enjoyed using Card Conjurer and would like to help me attend a draft or buy a cool commander piece, you can make a small donatation via <a style='color: #3b7bbf;' href="https://www.paypal.me/kyleburtondonate" target='_blank'>PayPal</a>.
|
||||||
|
</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/lazyLoadSamples.js"></script>
|
||||||
|
<!-- <script async src="data/scripts/palettes/darkMode.js"></script> -->
|
||||||
|
</body>
|
||||||
|
<footer id='footer'>
|
||||||
|
<script async src='data/scripts/footer.js'></script>
|
||||||
|
<script defer src="data/scripts/animations.js"></script>
|
||||||
|
</footer>
|
||||||
|
<html>
|
||||||
@@ -25,7 +25,8 @@ document.getElementById('footer').innerHTML = `
|
|||||||
<div>Navigation</div>
|
<div>Navigation</div>
|
||||||
<hr>
|
<hr>
|
||||||
<div>
|
<div>
|
||||||
<a href='index.html'>Card Creator</a><br>
|
<a href='index.html'>Home</a><br>
|
||||||
|
<a href='creator.html'>Card Creator</a><br>
|
||||||
<a href='life.html'>Life Counter</a><br>
|
<a href='life.html'>Life Counter</a><br>
|
||||||
<a href='askscryfall.html'>Ask Scryfall</a><br>
|
<a href='askscryfall.html'>Ask Scryfall</a><br>
|
||||||
<a href='phyrexian.html'>Phyrexian Text</a>
|
<a href='phyrexian.html'>Phyrexian Text</a>
|
||||||
|
|||||||
39
footer.txt
39
footer.txt
@@ -1,39 +0,0 @@
|
|||||||
<div class='footer'>
|
|
||||||
<div>
|
|
||||||
<div>Theme</div>
|
|
||||||
<hr>
|
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>Navigation</div>
|
|
||||||
<hr>
|
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
<div>
|
|
||||||
<div>Legal</div>
|
|
||||||
<hr>
|
|
||||||
<div>
|
|
||||||
<a href='legal.html'>Terms and Conditions</a><br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>Contact</div>
|
|
||||||
<hr>
|
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
<script defer src="data/scripts/animations.js"></script>
|
|
||||||
</div>
|
|
||||||
221
index.html
221
index.html
@@ -12,193 +12,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<title>Card Conjurer</title>
|
<title>Card Conjurer</title>
|
||||||
<div class='title darklayer'>Card Conjurer</div>
|
<div class='title' style='font-size: 4rem;'>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>
|
|
||||||
Select a frame version:<br>
|
|
||||||
<select id="inputFrameVersion" onchange="loadScript('data/scripts/versions/' + this.value + '/version.js')">
|
|
||||||
<option value="m15">M15</option>
|
|
||||||
<option value="token">Tokens</option>
|
|
||||||
<option value="m15Promo">M15 Promo</option>
|
|
||||||
<option value="m15Textless">Textless Kaladesh Inventions</option>
|
|
||||||
<option value="m15Planeswalker">M15 Planeswalker</option>
|
|
||||||
<option value="storybook">Storybook</option>
|
|
||||||
<option value="ixalan">Ixalan Maps</option>
|
|
||||||
<option value="expedition">Expeditions</option>
|
|
||||||
<option value="future">Future Shifted</option>
|
|
||||||
<option value="seventh">Seventh Edition</option>
|
|
||||||
<option value="seventhTextless">Textless Seventh Edition</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><br>
|
|
||||||
<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' 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">
|
|
||||||
</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>
|
|
||||||
<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="setSymbolFromGatherer()">
|
|
||||||
<input type="text" id="inputSetRarity" placeholder="Rarity" onchange="setSymbolFromGatherer()">
|
|
||||||
<!-- <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! (Doesn't work with doublefaced or split 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/versionM15Nickname.js")'>Nickname, AKA Godzilla (M15)</button>
|
|
||||||
<button onclick='loadScript("data/scripts/versions/versionM15Nyx.js")'>Nyx (M15)</button>
|
|
||||||
<button onclick='loadScript("data/scripts/versions/versionInvention.js")'>Invention (M15)</button>
|
|
||||||
<button onclick='loadScript("data/scripts/versions/versionM15FloatingCrowns.js")'>Floating Legend Crowns (M15)</button><br><br>
|
|
||||||
<button onclick='loadScript("data/scripts/versions/versionM15PromoNickname.js")'>Nickname, AKA Godzilla (M15 Promo)</button>
|
|
||||||
<button onclick='loadScript("data/scripts/versions/versionM15PromoFloatingCrowns.js")'>Floating Legend Crowns (M15 Promo)</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 class='layer darkLayer fadeIn'>
|
||||||
<div>
|
<div>
|
||||||
<div class='layerTitle'>Welcome to Card Conjurer</div>
|
<div class='layerTitle'>Welcome to Card Conjurer</div>
|
||||||
@@ -219,7 +33,7 @@
|
|||||||
Choose From A Variety Of Card Frames
|
Choose From A Variety Of Card Frames
|
||||||
</div>
|
</div>
|
||||||
<div class="justify">
|
<div class="justify">
|
||||||
Card Conjurer offers more card frame options than any other web-based Magic card maker
|
Card Conjurer offers more card frame options than any other web-based Magic card maker. <a style='text-decoration: underline;' href='creator.html'>Take a look!</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -231,7 +45,7 @@
|
|||||||
Customize To Your Heart's Content
|
Customize To Your Heart's Content
|
||||||
</div>
|
</div>
|
||||||
<div class="justify">
|
<div class="justify">
|
||||||
With Card Conjurer's level of customization, you'll have endless options when designing your dream cards
|
With Card Conjurer's level of customization, you'll have endless options when designing your dream cards. <a style='text-decoration: underline;' href='creator.html'>Try it out!</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img src='data/site/images/samples/sampleCustomize.png' id='sampleCustomize'>
|
<img src='data/site/images/samples/sampleCustomize.png' id='sampleCustomize'>
|
||||||
@@ -245,40 +59,13 @@
|
|||||||
Bling Out Existing Favorites
|
Bling Out Existing Favorites
|
||||||
</div>
|
</div>
|
||||||
<div class="justify">
|
<div class="justify">
|
||||||
Easily import vital information from existing cards, then redesign them
|
Easily import vital information from existing cards, then redesign them. <a style='text-decoration: underline;' href='creator.html'>Get started!</a>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='layer darkLayer fadeIn'>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class='layerTitle'>
|
|
||||||
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='layer slideFromLeft'>
|
|
||||||
<div class='cardLayerGrid'>
|
|
||||||
<div>
|
|
||||||
<div class='layerTitle'>
|
|
||||||
How You Can Help
|
|
||||||
</div>
|
|
||||||
<div class="justify">
|
|
||||||
As a student on a tight budget, it can be hard to play Magic. If you've enjoyed using Card Conjurer and would like to help me attend a draft or buy a cool commander piece, you can make a small donatation via <a style='color: #3b7bbf;' href="https://www.paypal.me/kyleburtondonate" target='_blank'>PayPal</a>.
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script defer src="data/scripts/sortable.js"></script>
|
<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/lazyLoadSamples.js"></script>
|
<script defer src="data/scripts/lazyLoadSamples.js"></script>
|
||||||
<!-- <script async src="data/scripts/palettes/darkMode.js"></script> -->
|
|
||||||
</body>
|
</body>
|
||||||
<footer id='footer'>
|
<footer id='footer'>
|
||||||
<script async src='data/scripts/footer.js'></script>
|
<script async src='data/scripts/footer.js'></script>
|
||||||
|
|||||||
15
styles.css
15
styles.css
@@ -284,10 +284,10 @@ input[type='checkbox'], select, option, input[type='file'], button {
|
|||||||
animation: fade-in 2s;
|
animation: fade-in 2s;
|
||||||
}
|
}
|
||||||
.layer.revealedLayer.slideFromLeft > div {
|
.layer.revealedLayer.slideFromLeft > div {
|
||||||
animation: slide-from-left 1s;
|
animation: slide-from-left 0.8s;
|
||||||
}
|
}
|
||||||
.layer.revealedLayer.slideFromRight > div {
|
.layer.revealedLayer.slideFromRight > div {
|
||||||
animation: slide-from-right 1s;
|
animation: slide-from-right 0.8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -305,10 +305,10 @@ input[type='checkbox'], select, option, input[type='file'], button {
|
|||||||
.fiveSampleCards > div {
|
.fiveSampleCards > div {
|
||||||
transition: transform 0.5s;
|
transition: transform 0.5s;
|
||||||
}
|
}
|
||||||
.fiveSampleCards > div:hover {
|
/*.fiveSampleCards > div:hover {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
transform: translate(0, -1em);
|
transform: translate(0, -1em);
|
||||||
}
|
}*/
|
||||||
.layer.revealedLayer > div > div > div > .sample1 {
|
.layer.revealedLayer > div > div > div > .sample1 {
|
||||||
animation: sample-one 2s;
|
animation: sample-one 2s;
|
||||||
transform: rotate(-10deg) translate(16%, 15%);
|
transform: rotate(-10deg) translate(16%, 15%);
|
||||||
@@ -425,7 +425,7 @@ canvas {
|
|||||||
footer {
|
footer {
|
||||||
background: var(--background-color-contrast);
|
background: var(--background-color-contrast);
|
||||||
color: var(--font-color-contrast);
|
color: var(--font-color-contrast);
|
||||||
font: 0.6rem arial;
|
font: 1rem arial;
|
||||||
}
|
}
|
||||||
.footer {
|
.footer {
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
@@ -468,7 +468,7 @@ footer {
|
|||||||
width: 750px;
|
width: 750px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 30rem) { /*Screen is wide enough for the footer to display horizontally*/
|
@media screen and (min-width: 50rem) { /*Screen is wide enough for the footer to display horizontally*/
|
||||||
.footer {
|
.footer {
|
||||||
width: 30rem;
|
width: 30rem;
|
||||||
padding: 2rem 0;
|
padding: 2rem 0;
|
||||||
@@ -484,4 +484,7 @@ footer {
|
|||||||
html {
|
html {
|
||||||
font: 20pt georgia;
|
font: 20pt georgia;
|
||||||
}
|
}
|
||||||
|
footer {
|
||||||
|
font: 0.6rem arial;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user