mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
789 lines
27 KiB
HTML
789 lines
27 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<head>
|
|
<title>Card Conjurer</title>
|
|
<!-- Favicon craziness! -->
|
|
<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 -->
|
|
<!-- <meta name="description" content="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!"> -->
|
|
<meta charset="UTF-8">
|
|
<meta id="pageViewport" name="viewport" content="user-scalable=no,width=800">
|
|
<PageMap>
|
|
<DataObject type="thumbnail">
|
|
<Attribute name="src" value="https://imkyle4815.github.io/cardconjurer/sampleCards/sample-card-6.png"/>
|
|
<Attribute name="width" value="86"/>
|
|
<Attribute name="height" value="120"/>
|
|
</DataObject>
|
|
</PageMap>
|
|
<meta name="thumbnail" content="https://imkyle4815.github.io/cardconjurer/sampleCards/sample-card-6.png">
|
|
<script>
|
|
window.onload = function() {
|
|
if (screen.width > 800) {
|
|
var myViewPort = document.getElementById("pageViewport");
|
|
myViewPort.setAttribute("content", "width=device-width, initial-scale=1");
|
|
}
|
|
}
|
|
</script>
|
|
<!-- Here is 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": "https://imkyle4815.github.io/cardconjurer/sampleCards/sample-card-6.png",
|
|
"mainEntityOfPage": "https://imkyle4815.github.io/cardconjurer/",
|
|
"name": "Card Conjurer"
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="title"><img src="images/title.png"></div>
|
|
<div class="grid mainGrid">
|
|
<div class="canvasContainer">
|
|
<canvas id="canvas" width="749" height="1044"></canvas>
|
|
</div>
|
|
<div class="cmmArea">
|
|
<div class="grid selectionGrid">
|
|
<div onclick="toggleView('color', 'cmm')">Color</div>
|
|
<div onclick="toggleView('general', 'cmm')">General</div>
|
|
<div onclick="toggleView('text', 'cmm')">Text</div>
|
|
<div onclick="toggleView('art', 'cmm')">Art</div>
|
|
<div onclick="toggleView('info', 'cmm')">Info</div>
|
|
<div onclick="toggleView('set', 'cmm')">Set</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('vanguard', 'cmm')" style="display: none;" id="cmmVanguard">Vanguard</div>
|
|
<div onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div>
|
|
</div>
|
|
<div class="cardManipulationMenu">
|
|
<div class="cmm shown" id="cmm-color">
|
|
Border
|
|
<span class="dropdown">
|
|
<select id="borderSelection" onchange="changeTemplate()">
|
|
<option value="m15/">M15</option>
|
|
<option value="planeswalker/">Planeswalker</option>
|
|
<option value="planeswalkerTall/">Planeswalker (Tall)</option>
|
|
<option value="tokenTextless/">Token (Textless)</option>
|
|
<option value="tokenText/">Token (Text)</option>
|
|
<option value="tokenTall/">Token (Tall)</option>
|
|
<option value="map/">Treasure Map</option>
|
|
<option value="plane/">Plane</option>
|
|
<option value="vanguard/">Vanguard</option>
|
|
<option value="8th/">8th</option>
|
|
</select>
|
|
</span>
|
|
<br>
|
|
Color
|
|
<span class="dropdown">
|
|
<select id="colorSelection" onchange="updateBorder()">
|
|
<option value="white">White</option>
|
|
</select>
|
|
</span>
|
|
<br>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
|
|
<label for="checkboxSecondColor" />
|
|
<div>Second Color</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="secondColorSelection" onchange="updateBorder()"></select>
|
|
</span>
|
|
<br>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
|
|
<label for="checkboxThirdColor" />
|
|
<div>Third Color</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="thirdColorSelection" onchange="updateBorder()"></select>
|
|
</span>
|
|
<br>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxArtifact" onchange="updateBorder()" />
|
|
<label for="checkboxArtifact" />
|
|
<div>Artifact</div>
|
|
</div>
|
|
</div>
|
|
<div class="cmm" id="cmm-advanced">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
|
|
<label for="checkboxLegendary" />
|
|
<div>Legendary</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxNyx" onchange="updateBorder()" />
|
|
<label for="checkboxNyx" />
|
|
<div>Nyx</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()" />
|
|
<label for="checkboxMiracle" />
|
|
<div>Miracle</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()" />
|
|
<label for="checkboxRareStamp" />
|
|
<div>Rare Stamp</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()" />
|
|
<label for="checkboxFlipIcon" />
|
|
<div>Flip Icon</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="inputFlipIcon" onchange="updateBorder()">
|
|
<option value="blank.png">Blank</option>
|
|
<option value="day.png">Day</option>
|
|
<option value="night.png">Night</option>
|
|
<option value="compass.png">Compass</option>
|
|
<option value="moon.png">Moon</option>
|
|
<option value="eldrazi.png">Eldrazi</option>
|
|
<option value="planeswalker.png">Planeswalker</option>
|
|
<option value="creature.png">Creature</option>
|
|
<option value="instant.png">Instant</option>
|
|
<option value="sorcery.png">Sorcery</option>
|
|
<option value="enchantment.png">Enchantment</option>
|
|
<option value="artifact.png">Artifact</option>
|
|
<option value="land.png">Land</option>
|
|
<option value="multitype.png">Multitype</option>
|
|
<option value="planeshift.png">Planeshift</option>
|
|
<option value="structure.png">Structure</option>
|
|
</select>
|
|
</span>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
|
|
<label for="checkboxFlipTip" />
|
|
<div>Flip Tip</div>
|
|
</div>
|
|
<input id="inputFlipTip" value="" type="text" class="input">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
|
|
<label for="checkboxFlippedDark" />
|
|
<div>Flipped (Darker)</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSilverBorder" onchange="createBorder()" />
|
|
<label for="checkboxSilverBorder" />
|
|
<div>Silver Border</div>
|
|
</div>
|
|
<input type="color" id="inputColor" onchange="createBorder()" value="#000000"> Border Color
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFoil" />
|
|
<label for="checkboxFoil" />
|
|
<div>Foil</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxIdentity" onchange="createBorder()" />
|
|
<label for="checkboxIdentity" />
|
|
<div>Color Identity</div>
|
|
</div>
|
|
<input id="inputIdentity" type="text" class="input" onchange="createBorder()">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxBorderless" onchange="createBorder()" />
|
|
<label for="checkboxBorderless" />
|
|
<div>Borderless</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxTitleVisibility" checked="true" onchange="createBorder()">
|
|
<label for="checkboxTitleVisibility" />
|
|
<div>Title Visibility</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxTypeVisibility" checked="true" onchange="createBorder()">
|
|
<label for="checkboxTypeVisibility" />
|
|
<div>Type Visibility</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxRulesVisibility" checked="true" onchange="createBorder()">
|
|
<label for="checkboxRulesVisibility" />
|
|
<div>Rules Visibility</div>
|
|
</div>
|
|
<input type="color" id="inputTitleColor" value="#000000"> Title Color<br>
|
|
<input type="color" id="inputTypeColor" value="#000000"> Type Color<br>
|
|
<input type="color" id="inputRulesColor" value="#000000"> Rules Color<br>
|
|
<input type="color" id="inputCreatureColor" value="#000000"> Power/Toughness Color<br>
|
|
</div>
|
|
<div class="cmm" id="cmm-general">
|
|
Name
|
|
<input id="inputName" type="text" class="input">
|
|
<br>
|
|
Mana Cost
|
|
<input id="inputCost" type="text" class="input">
|
|
<br>
|
|
Type
|
|
<input id="inputType" type="text" class="input">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxCreature" />
|
|
<label for="checkboxCreature" />
|
|
<div>Power/Toughness</div>
|
|
</div>
|
|
<input id="inputPowerToughness" class="input" type="text">
|
|
</div>
|
|
<div class="cmm" id="cmm-text">
|
|
Rules Text
|
|
<br>
|
|
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
|
|
<br>
|
|
Rules Text Font Size
|
|
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5">
|
|
<br>
|
|
Pixels Between Paragraphs
|
|
<input id="textShift" type="number" class="input" min="0" max="300" value="13">
|
|
<br>
|
|
Shift All Text Down
|
|
<input id="textDown" type="number" class="input" min="0" max="300" value="0">
|
|
<br>
|
|
Shift Mana Symbols Down
|
|
<input id="inputSymbolDown" type="number" class="input" value="0">
|
|
</div>
|
|
<div class="cmm" id="cmm-art">
|
|
Image
|
|
<input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture">
|
|
<br>
|
|
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)">
|
|
<br>
|
|
Image Zoom
|
|
<input id="imageSize" type="number" class="input" value="100" step="0.1">
|
|
<br>
|
|
Image Left
|
|
<input id="imageLeft" type="number" class="input" value="0" step="1">
|
|
<br>
|
|
Image Up
|
|
<input id="imageUp" type="number" class="input" value="0" step="1">
|
|
Image Rotation
|
|
<input id="imageRotation" type="number" class="input" value="0" step="1" min="0" max="360">
|
|
</div>
|
|
<div class="cmm" id="cmm-info">
|
|
Other Info
|
|
<input id="inputInfo" value="Not A Real Card" type="text" class="input">
|
|
<br>
|
|
Card Number
|
|
<input id="inputNumber" value="001/001" type="text" class="input">
|
|
<br>
|
|
Rarity
|
|
<input id="inputRarity" value="C" type="text" class="input">
|
|
<br>
|
|
Set Abbreviation
|
|
<input id="inputSet" value="MTG" type="text" class="input">
|
|
<br>
|
|
Language
|
|
<input id="inputLanguage" value="EN" type="text" class="input">
|
|
<br>
|
|
Artist Credit
|
|
<input id="inputArtist" type="text" class="input">
|
|
<br>
|
|
<input type="color" id="inputInfoColor" value="#ffffff"> Info Color<br>
|
|
</div>
|
|
<div class="cmm" id="cmm-set">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSetSymbol" checked="true">
|
|
<label for="checkboxSetSymbol" />
|
|
<div>Set Symbol</div>
|
|
</div>
|
|
Set Code
|
|
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input">
|
|
<br>
|
|
Set Symbol Rarity
|
|
<input type="text" onchange="loadSetSymbol()" value="c" id="setSymbolRarity" class="input">
|
|
<br>
|
|
Custom Set Symbol
|
|
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol">
|
|
<br>
|
|
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)">
|
|
<br>
|
|
Scale Set Symbol
|
|
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5">
|
|
</div>
|
|
<div class="cmm" id="cmm-download">
|
|
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a><br>
|
|
Frame Rate
|
|
<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxDebuggerLine" />
|
|
<label for="checkboxDebuggerLine" />
|
|
<div>Debugger Lines</div>
|
|
</div>
|
|
</div>
|
|
<div class="cmm" id="cmm-watermark">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxWatermark" checked="true" />
|
|
<label for="checkboxWatermark" />
|
|
<div>Watermark</div>
|
|
</div>
|
|
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark">
|
|
<br>
|
|
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)">
|
|
<br>
|
|
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode">
|
|
<br>
|
|
Watermark Color
|
|
<br>
|
|
<span class="dropdown">
|
|
<select id="watermarkColorSelection">
|
|
<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>
|
|
<br>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSecondWatermarkColor" />
|
|
<label for="checkboxSecondWatermarkColor" />
|
|
<div>Second Color</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="secondWatermarkColorSelection">
|
|
<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>
|
|
Watermark Opacity
|
|
<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01">
|
|
</div>
|
|
<div class="cmm" id="cmm-planeswalker">
|
|
Planeswalker Ability Line Height
|
|
<input type="number" id="abilityLine1" value="102" onchange="planeswalkerAbilityLines()">
|
|
<input type="number" id="abilityLine2" value="102" onchange="planeswalkerAbilityLines()">
|
|
<input type="number" id="abilityLine3" value="102" onchange="planeswalkerAbilityLines()">
|
|
<input type="number" id="abilityLine4" value="0" onchange="planeswalkerAbilityLines()">
|
|
These values set the height of each ability box of the planeswalker. For evenly spaced boxes use (145, 145) or (90, 90, 90)<br>
|
|
Planeswalker Ability Values
|
|
<input type="text" id="abilityValue0" value="+1">
|
|
<input type="text" id="abilityValue1" value="0">
|
|
<input type="text" id="abilityValue2" value="-1">
|
|
<input type="text" id="abilityValue3" value="">
|
|
</div>
|
|
<div class="cmm" id="cmm-vanguard">
|
|
Hand Size Modifier
|
|
<input type="text" id="inputVanguardHandMod">
|
|
Life Total Modifier
|
|
<input type="text" id="inputVanguardLifeMod">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tutorialArea">
|
|
<div class="grid selectionGrid">
|
|
<div onclick="toggleView('about', 'extras')">About</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 onclick="toggleView('border', 'extras')">Card Colors</div>
|
|
</div>
|
|
<div class="extrasMenu">
|
|
<div class="extras shown" id="extras-about">
|
|
<div class="text">
|
|
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 flip cards, planar cards, Ixalan maps, and so much more.
|
|
</div>
|
|
<br>
|
|
<div class="text">
|
|
About Me
|
|
</div>
|
|
<div class="paragraph">
|
|
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.
|
|
</div>
|
|
<br>
|
|
<div class="text">
|
|
Donate?
|
|
</div>
|
|
<div class="paragraph" style="margin-bottom: 0.5em">
|
|
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... Or you can check out my friend's youtube channel: Izzet Right?
|
|
</div>
|
|
<div class="grid donateGrid">
|
|
<div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="images/paypal.png"></img></div>
|
|
<div onclick="window.open('https://www.patreon.com/KyleBurton', '_blank');" style="color:rgb(255,89,0);">Patreon<img src="images/patreon.png"></img></div>
|
|
<div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="images/pucatrade.png"></img></div>
|
|
<div onclick="window.open('https://www.youtube.com/channel/UC95Pd8lc8UWEkI96Nq_THvw', '_blank');" style="color:rgb(255,0,0);">Izzet Right?<img src="images/izzetright.png"></img></div>
|
|
</div>
|
|
</div>
|
|
<div class="extras" id="extras-symbolList">
|
|
Each of the following codes must include '<' before each code and '>' after. These codes aren't caps sensitive.
|
|
<div class="symbolGrid grid" id="symbolList">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="extras" id="extras-codes">
|
|
Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are caps sensitive.<br>
|
|
• line → Skips to the next line<br>
|
|
• bar → Just like line, except adds the bar that usually seperates flavor text<br>
|
|
• lineNoSpace → Just like line, except stays closer to the previous line<br>
|
|
• i → Text is italicized<br>
|
|
• /i → Text returns to normal<br>
|
|
• left → Text aligns to the left<br>
|
|
• center → Text aligns to the center<br>
|
|
• right → Text aligns to the right<br>
|
|
• plane → Creates a large <img src="data/manaSymbols/56.png" style="height: 1em;"></img> and shifts the following text to the right. This is designed for planar cards.
|
|
</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>. These codes aren't caps sensitive.
|
|
</div>
|
|
<div class="extras" id="extras-border">
|
|
Under the 'Card Border' tab use the following guidelines:<br>
|
|
• Border → Selects the border style, such as planar card, m15 card, etc...<br>
|
|
• Color → Primary color<br>
|
|
• Second Color → Secondary color. Only affects the right half of the card, as seen on hybrid cards.<br>
|
|
• Third Color → Tertiary color. Affects the entire card, including power and toughness, as seen on two-colored gold cards.<br><br>
|
|
Under the 'Border (Advanced)' tab the checkboxes are fairly straightforward. Try each feature out to see what it does.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sampleGrid grid text">
|
|
Check out some samples<br>
|
|
<div class="noBorder">
|
|
<img id="sampleCardA" class="sampleCard"></img>
|
|
<img id="sampleCardB" class="sampleCard"></img>
|
|
<img id="sampleCardC" class="sampleCard"></img>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<footer class="info"><a href="https://imkyle4815.github.io/cardconjurer/TermsOfUse.txt" target="_blank">Terms of Use</a> • <a href="https://imkyle4815.github.io/cardconjurer/Disclaimer.txt" target="_blank">Disclaimer</a> • <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">Github page</a></footer>
|
|
|
|
|
|
<!--CSS-->
|
|
<style>
|
|
/*fonts*/
|
|
@font-face {
|
|
font-family: relaymedium;
|
|
src: url("data/fonts/relay-medium.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: belerenb;
|
|
src: url("data/fonts/beleren-b.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: belerenbsc;
|
|
src: url("data/fonts/beleren-bsc.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrixbsc;
|
|
src: url("data/fonts/matrix-bsc.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrix;
|
|
src: url("data/fonts/matrix.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrixb;
|
|
src: url("data/fonts/matrix-b.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: mplantin;
|
|
src: url("data/fonts/mplantin.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: mplantini;
|
|
src: url("data/fonts/mplantin-i.ttf");
|
|
}
|
|
|
|
/*Color Palette*/
|
|
:root {
|
|
/*Regular*/
|
|
--color-a: #073c00;
|
|
--color-b: #073c0020; /*073c0020*/
|
|
--color-c: #095700;
|
|
--color-d: #0e720040; /*0e720040*/
|
|
--color-e: #0e7200;
|
|
--color-gray: #00000060;
|
|
}
|
|
|
|
/*Page-wide styling*/
|
|
* {
|
|
font-family: belerenb;
|
|
font-size: 6vw;
|
|
user-select: none;
|
|
color: #ddd;
|
|
}
|
|
html {
|
|
background: url("images/background.png") no-repeat center center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
/*Grid styling*/
|
|
.grid {
|
|
display: grid;
|
|
grid-gap: 3px;
|
|
}
|
|
.mainGrid {
|
|
grid-gap: 0px 4px;
|
|
}
|
|
.canvasContainer {
|
|
justify-self: center;
|
|
}
|
|
.selectionGrid {
|
|
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
|
text-align: center;
|
|
}
|
|
.grid > div {
|
|
padding: 8px;
|
|
border-radius: 36px;
|
|
/*margin: 5px 5px 5px 0px;*/
|
|
}
|
|
.grid > div:not(.noBorder) {
|
|
border: 5px solid var(--color-d);
|
|
background: var(--color-d);
|
|
}
|
|
.mainGrid > div {
|
|
background: var(--color-gray) !important;
|
|
}
|
|
|
|
/*Card manipulation menu grid*/
|
|
.selectionGrid > div {
|
|
font-family: belerenbsc;
|
|
cursor: pointer;
|
|
}
|
|
.selectionGrid > div:hover {
|
|
background: var(--color-c);
|
|
}
|
|
/*.selectionGrid > div:nth-child(odd) {
|
|
|
|
}*/
|
|
.cardManipulationMenu, .extrasMenu {
|
|
margin-top: 4px;
|
|
padding: 24px;
|
|
border-radius: 36px;
|
|
border: 2px solid var(--color-d);
|
|
background-color: var(--color-gray);
|
|
}
|
|
.cmm, .extras {
|
|
display: none;
|
|
}
|
|
.shown {
|
|
display: block;
|
|
}
|
|
.sampleCard {
|
|
width: 100%;
|
|
}
|
|
|
|
/*Inputs and more*/
|
|
/*dropdown*/
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.dropdown select {
|
|
border-radius: 0.25em;
|
|
padding-left: 0.25em;
|
|
width: inherit;
|
|
background-color: var(--color-c);
|
|
border: none;
|
|
cursor: pointer;
|
|
-moz-appearance: none;
|
|
-webkit-appearance:none;
|
|
appearance: none;
|
|
}
|
|
.dropdown select option {
|
|
/*nothing for now :)*/
|
|
}
|
|
.dropdown::after {
|
|
content: "\25BC";
|
|
font-size: 0.6em;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
right: 0.6em;
|
|
top: 0.6em;
|
|
}
|
|
/*checkbox*/
|
|
.checkbox {
|
|
height: 1em;
|
|
margin: 5px 0px;
|
|
position: relative;
|
|
}
|
|
.checkbox label {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 0.25em;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
background: var(--color-c);
|
|
cursor: pointer;
|
|
}
|
|
.checkbox input:checked ~ label:after {
|
|
display: block;
|
|
}
|
|
.checkbox label:after {
|
|
content: "\2718";
|
|
position: absolute;
|
|
display: none;
|
|
left: 0.1em;
|
|
top: -0.25em;
|
|
}
|
|
.checkbox input {
|
|
opacity: 0;
|
|
}
|
|
.checkbox div {
|
|
white-space: pre;
|
|
position: relative;
|
|
top: -0.1em;
|
|
left: 1.1em;
|
|
}
|
|
/*other inputs*/
|
|
input[type="text"], input[type="number"], textarea, input[type="file"] {
|
|
width: 100%;
|
|
border: none;
|
|
background: var(--color-c);
|
|
border-radius: 0.25em;
|
|
padding-left: 0.25em;
|
|
}
|
|
/*color selector*/
|
|
input[type="color"] {
|
|
padding: 0px;
|
|
border: none;
|
|
background: var(--color-c);
|
|
}
|
|
|
|
/*Hyperlinks*/
|
|
a:link, a:visited {
|
|
color: #fff;
|
|
}
|
|
a:hover, a:active {
|
|
color: #999;
|
|
}
|
|
|
|
/*Desktop*/
|
|
@media only screen and (min-width: 1130px) {
|
|
.mainGrid:not(.plane) {
|
|
grid-template-columns: calc(749px + 0.7em) auto;
|
|
}
|
|
.tutorialArea {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
.sampleGrid {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
.mainGrid.plane > .cmmArea {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
.mainGrid.plane > .canvasContainer {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1455px) {
|
|
.mainGrid.plane {
|
|
grid-template-columns: calc(1074px + 0.7em) auto;
|
|
}
|
|
}
|
|
@media only screen and (orientation: landscape) {
|
|
.sampleCard {
|
|
width: 32.8%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 801px) {
|
|
html {
|
|
/*background*/
|
|
}
|
|
* {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
/*Text and stuff :)*/
|
|
.info, .title {
|
|
text-align: center;
|
|
font-size: 0.75em;
|
|
}
|
|
.info > * {
|
|
font-size: inherit;
|
|
}
|
|
|
|
/*symbol grid*/
|
|
.manaSymbol > img {
|
|
position: relative;
|
|
top: 0.15em;
|
|
height: 1em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
.symbolGrid {
|
|
margin-top: 8px;
|
|
grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr));
|
|
text-align: center;
|
|
}
|
|
|
|
/*Title*/
|
|
.title > img {
|
|
margin-bottom: 20px;
|
|
margin-top: 0px;
|
|
max-height: 80px;
|
|
width: auto;
|
|
}
|
|
|
|
/*Sitewide text (bottom of the page)*/
|
|
.text {
|
|
text-align: center;
|
|
}
|
|
.paragraph {
|
|
text-indent: 2em;
|
|
}
|
|
/*Donation buttons!*/
|
|
.donateGrid {
|
|
grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
|
|
text-align: center;
|
|
}
|
|
.donateGrid.grid > div {
|
|
background: black;
|
|
font-size: 1.7em;
|
|
cursor: pointer;
|
|
padding: 0px;
|
|
}
|
|
.donateGrid.grid > div:hover {
|
|
background: var(--color-b);
|
|
}
|
|
.donateGrid > div > img {
|
|
position: relative;
|
|
top: 0.25em;
|
|
left: 0.5em;
|
|
height: 1.7em;
|
|
}
|
|
|
|
</style>
|
|
<script src="data/main.js"></script>
|
|
<html>
|
|
<!--
|
|
References
|
|
|
|
<div class="cmm" id="cmm-targetId">
|
|
...
|
|
</div>
|
|
|
|
-->
|