GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-26 21:04:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
81c45d2a0d4ba6f30c9c3951c27cff5f8a0da73d
cardconjurer/index.html
Kyle 81c45d2a0d Update index.html
2019-04-13 20:47:53 -07:00

820 lines
30 KiB
HTML
Raw Blame History

<!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 charset="UTF-8">
<meta id="pageViewport" name="viewport" content="user-scalable=no,width=780">
<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 > 780) {
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>
<header>
<div class="title"><img src="images/title.png" id="header"></div>
</header>
<body>
<div class="grid mainGrid">
<div class="canvasContainer">
<canvas id="cardCanvas"></canvas>
</div>
<div class="cmmArea noVerticalPadding">
<div class="grid selectionGrid">
<div onclick="toggleView('frame', 'cmm')">Frame</div>
<div onclick="toggleView('text', 'cmm')">Text</div>
<div onclick="toggleView('info', 'cmm')">Info</div>
<div onclick="toggleView('art', 'cmm')">Art</div>
<div onclick="toggleView('set', 'cmm')">Set Symbol</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('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div>
</div>
<div class="selectionGridTarget">
<div class="cmm shown" id="cmm-frame">
Border
<span class="dropdown">
<select onchange="backToDefault(this.value)" id="inputCardVersion">
<option value="m15">M15</option>
<option value="miniPlane">Mini-Plane</option>
<option value="planeswalker">Planeswalker (M15)</option>
<option value="fullArtLandM15">Full Art Land (M15)</option>
<option value="fullArtLandUnstable">Full Art Land (Unstable)</option>
</select>
</span>
<br><br>
Frame
<span class="dropdown">
<select class="selectColor changesFrame" onchange="imgFrame.load(this.value + 'frame.png')" id="inputFrameColor"></select>
</span>
<br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxFrameRight" onchange="sectionFrameFunction()" class="changesFrame">
<label for="inputCheckboxFrameRight"/>
<div>Frame (right)</div>
</div>
<span class="dropdown">
<select class="selectColor changesFrame" onchange="imgFrameRight.load(this.value + 'frame.png')" id="inputFrameRightColor"></select>
</span>
<br><br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxTitleTypeBoxes" onchange="sectionFrameFunction()" class="changesTitleType">
<label for="inputCheckboxTitleTypeBoxes"/>
<div>Title and Type Boxes</div>
</div>
<span class="dropdown">
<select class="selectColor changesTitleType" onchange="imgTitleTypeBoxes.load(this.value + 'frame.png')"></select>
</span>
<br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxTitleTypeBoxesRight" onchange="sectionFrameFunction()" class="changesTitleType">
<label for="inputCheckboxTitleTypeBoxesRight"/>
<div>Title and Type Boxes (right)</div>
</div>
<span class="dropdown">
<select class="selectColor changesTitleType" onchange="imgTitleTypeBoxesRight.load(this.value + 'frame.png')"></select>
</span>
<br><br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxRulesBox" onchange="sectionFrameFunction()" class="changesRulesBox">
<label for="inputCheckboxRulesBox"/>
<div>Rules Box</div>
</div>
<span class="dropdown">
<select class="selectColor changesRulesBox" onchange="imgRulesBox.load(this.value + 'frame.png')"></select>
</span>
<br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxRulesBoxRight" onchange="sectionFrameFunction()" class="changesRulesBox">
<label for="inputCheckboxRulesBoxRight"/>
<div>Rules Box (right)</div>
</div>
<span class="dropdown">
<select class="selectColor changesRulesBox" onchange="imgRulesBoxRight.load(this.value + 'frame.png')"></select>
</span>
<br><br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxPinline" onchange="sectionFrameFunction()" class="changesPinline">
<label for="inputCheckboxPinline"/>
<div>Pinline</div>
</div>
<span class="dropdown">
<select class="selectColor changesPinline" onchange="imgPinline.load(this.value + 'frame.png')"></select>
</span>
<br>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxPinlineRight" onchange="sectionFrameFunction()" class="changesPinline">
<label for="inputCheckboxPinlineRight"/>
<div>Pinline (right)</div>
</div>
<span class="dropdown">
<select class="selectColor changesPinline" onchange="imgPinlineRight.load(this.value + 'frame.png')"></select>
</span>
</div>
<div class="cmm" id="cmm-advanced">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxLegendary" onchange="loadLegendaryImages()">
<label for="inputCheckboxLegendary" />
<div>Legendary</div>
</div>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxRareStamp" onchange="loadRareStampImages()">
<label for="inputCheckboxRareStamp" />
<div>Rare Stamp</div>
</div>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxNyx" onchange="loadNyxImages()">
<label for="inputCheckboxNyx" />
<div>Nyx</div>
</div>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxMiracle" onchange="loadMiracleImages()">
<label for="inputCheckboxMiracle" />
<div>Miracle</div>
</div>
<br>
Frame Opacity
<input id="inputFrameOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
<br>
Title/Type Opacity
<input id="inputTitleTypeOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
<br>
Rules Box Opacity
<input id="inputRulesBoxOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
<br>
Pinline Opacity
<input id="inputPinlineOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
<br><br>
Title Color <input type="color" id="inputTitleColor" value="#000000" class="fontColor" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTitleOutlineColor" value="#000000" class="fontColor" onchange="sectionTextFunction()">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxTitleOutline" onchange="sectionTextFunction()">
<label for="inputCheckboxTitleOutline" />
<div>Title Outline</div>
</div>
Type Color <input type="color" id="inputTypeColor" value="#000000" class="fontColor" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTypeOutlineColor" value="#000000" class="fontColor" onchange="sectionTextFunction()">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxTypeOutline" onchange="sectionTextFunction()">
<label for="inputCheckboxTypeOutline" />
<div>Type Outline</div>
</div>
Rules Color <input type="color" id="inputRulesColor" value="#000000" class="fontColor" onchange="sectionTextFunction()"> Outline <input type="color" id="inputRulesOutlineColor" value="#000000" class="fontColor" onchange="sectionTextFunction()">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxRulesOutline" onchange="sectionTextFunction()">
<label for="inputCheckboxRulesOutline" />
<div>Rules Outline</div>
</div>
<input type="color" id="inputCreatureColor" value="#000000" onchange="sectionTextFunction()"> Power/Toughness Color
<br><br>
<input type="color" id="inputBorderColor" value="#000000" onchange="sectionFrameFunction()"> Border Color
</div>
<div class="cmm" id="cmm-text">
Name
<input id="inputName" type="text" class="input" value="" oninput="sectionTextFunction()">
<br>
Mana Cost
<input id="inputCost" type="text" class="input" value="" oninput="sectionTextFunction()">
<br>
Type
<input id="inputType" type="text" class="input" value="" oninput="sectionTextFunction()">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxPowerToughness" onchange="sectionTextFunction()">
<label for="inputCheckboxPowerToughness" />
<div>Power/Toughness</div>
</div>
<span class="dropdown">
<select class="selectColor" onchange="imgPowerToughness.load(this.value + 'pt.png')"></select>
</span>
<input id="inputPowerToughness" class="input" type="text" oninput="sectionTextFunction()">
<br><br>
Rules Text
<br>
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px" placeholder="Remember to include curly brackets ('{' and '}') around each code. To skip to the next line use {line}. See 'Mana Symbols' and 'Other Codes' (below) for more information." oninput="sectionTextFunction()"></textarea>
<br>
Rules Text Font Size
<input id="inputTextSize" type="number" class="input" min="0" value="37" step="0.5" oninput="sectionTextFunction()">
<br>
Pixels Between Paragraphs
<input id="inputTextShift" type="number" class="input" min="0" value="13" oninput="sectionTextFunction()">
<br>
Shift All Text Down
<input id="inputTextDown" type="number" class="input" value="0" oninput="sectionTextFunction()">
</div>
<div class="cmm" id="cmm-info">
Collector's Number
<input id="inputInfoNumber" type="text" class="input" value="001/001" oninput="sectionTextFunction()">
<br>
Rarity
<input id="inputInfoRarity" type="text" class="input" value="S" oninput="sectionTextFunction()">
<br>
Set Abbreviation
<input id="inputInfoSet" type="text" class="input" value="MTG" oninput="sectionTextFunction()">
<br>
Language
<input id="inputInfoLanguage" type="text" class="input" value="EN" oninput="sectionTextFunction()">
<br>
Artist Credit
<input id="inputInfoArtist" type="text" class="input" value="" oninput="sectionTextFunction()">
<br>
Other Information
<input id="inputInfoCopyright" type="text" class="input" value="Not a Real Card" oninput="sectionTextFunction()">
</div>
<div class="cmm" id="cmm-art">
Upload an Image
<input type="text" class="input" placeholder="Via URL" onchange="imageURL(this.value, imgCardArt, 'none')">
<input id="inputCardArtName" onchange="inputCardArtName(this.value)" class="input" type="text" placeholder="Via Card Name">
<input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgCardArt)" id="inputPicture" placeholder="Via File Upload">
<br>
Card Name Result:
<input id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" class="input" type="number" value="1" min="1" max="3">
<br>
Image Zoom
<input id="inputCardArtZoom" type="number" class="input" value="100" step="0.1" oninput="drawCard()">
<br>
Image X
<input id="inputCardArtX" type="number" class="input" value="0" step="1" oninput="drawCard()">
<br>
Image Y
<input id="inputCardArtY" type="number" class="input" value="0" step="1" oninput="drawCard()">
<br>
<!-- Image Rotation
<input id="inputCardArtRotation" type="number" class="input" value="0" step="1" min="0" max="360" oninput="drawCard()"> -->
</div>
<div class="cmm" id="cmm-set">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxSetSymbol" checked="true" onchange="sectionOtherFunction()">
<label for="inputCheckboxSetSymbol" />
<div>Set Symbol</div>
</div>
Set Code
<input id="inputSetSymbolCode" type="text" class="input" onchange='imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("inputSetSymbolCode").value.toUpperCase() + "&size=large&rarity=" + document.getElementById("inputSetSymbolRarity").value.toUpperCase(), imgSetSymbol, "needsCrop")' value="LRW">
Rarity
<input id="inputSetSymbolRarity" type="text" class="input" onchange='imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("inputSetSymbolCode").value.toUpperCase() + "&size=large&rarity=" + document.getElementById("inputSetSymbolRarity").value.toUpperCase(), imgSetSymbol, "needsCrop")' value="U">
Or Upload an Image
<input type="text" class="input" placeholder="Via URL" onchange="imageURL(this.value, imgSetSymbol, 'needsCrop')">
<input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol)" id="inputPicture" placeholder="Via File Upload">
<br>
Scale Set Symbol
<input id="inputSetSymbolScale" type="number" class="input" min="0" value="100" step="0.1" oninput="sectionOtherFunction()">
</div>
<div class="cmm" id="cmm-watermark">
<div class="checkbox">
<input type="checkbox" id="inputCheckboxWatermark" checked="true" onchange="sectionOtherFunction()">
<label for="inputCheckboxWatermark" />
<div>Watermark</div>
</div>
Watermark Opacity
<input id="inputWatermarkOpacity" type="number" class="input" min="0" max="100" value="40" step="1" oninput="sectionOtherFunction()">
<br>
Set Code
<input id="inputWatermarkCode" type="text" class="input" onchange='imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + this.value.toUpperCase() + "&size=large&rarity=C", imgWatermark, "needsBoth")'>
Or Upload an Image
<input type="text" class="input" placeholder="Via URL" onchange="imageURL(this.value, imgWatermark, 'needsBoth')">
<input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgWatermark)" id="inputPicture" placeholder="Via File Upload">
<br>
Watermark Color
<span class="dropdown">
<select onchange="sectionOtherFunction()" id="inputWatermarkColor">
<option value="none">default</option>
<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>
<div class="checkbox">
<input type="checkbox" id="inputCheckboxSecondWatermark" onchange="sectionOtherFunction()">
<label for="inputCheckboxSecondWatermark" />
<div>Second Watermark Color</div>
</div>
<span class="dropdown">
<select onchange="sectionOtherFunction()" id="inputSecondWatermarkColor">
<option value="none">default</option>
<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>
</div>
<div class="cmm" id="cmm-download">
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
<br>
<!-- <div class="adspace">
Ads?
</div> -->
</div>
<div class="cmm" id="cmm-planeswalker">
Planeswalker Ability Line Height
<input type="number" id="inputAbilityLine1" value="102" min="0" oninput="planeswalkerAbilityLines()">
<input type="number" id="inputAbilityLine2" value="96" min="0" oninput="planeswalkerAbilityLines()">
<input type="number" id="inputAbilityLine3" value="80" min="0" oninput="planeswalkerAbilityLines()">
<input type="number" id="inputAbilityLine4" value="0" min="0" oninput="planeswalkerAbilityLines()">
Planeswalker Ability Values
<input type="text" id="inputAbilityValue0" value="+1" oninput="planeswalkerAbilityIcons()">
<input type="text" id="inputAbilityValue1" value="0" oninput="planeswalkerAbilityIcons()">
<input type="text" id="inputAbilityValue2" value="-1" oninput="planeswalkerAbilityIcons()">
<input type="text" id="inputAbilityValue3" value="" oninput="planeswalkerAbilityIcons()">
</div>
<!-- <div class="adspace">
Ads?
</div> -->
</div>
</div>
<div class="adspace">
Ads?
</div>
<div class="tutorialArea noVerticalPadding">
<div class="grid selectionGrid">
<div onclick="toggleView('about', 'extras')">About</div>
<div onclick="toggleView('tutorial', 'extras')">Tutorial</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>
<div class="selectionGridTarget">
<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">
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><br>
<div class="grid donateGrid selectionGrid">
<div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="images/paypal.png"></div>
<!-- <div onclick="window.open('https://www.patreon.com/KyleBurton', '_blank');" style="color:rgb(255,89,0);">Patreon<img src="images/patreon.png"></div> -->
<div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="images/pucatrade.png"></div>
<div onclick="window.open('https://twitter.com/ImKyle4815', '_blank');" style="color:rgb(0,174,239);">Twitter<img src="images/twitter.png"></div>
<div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:rgb(255,255,255);">Massdrop<img src="images/massdrop.png"></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"></div>
</div>
</div>
<div class="extras" id="extras-symbolList">
Each of the following codes must include '{' before each code and '}' after.
<div class="symbolGrid grid" id="symbolList">
</div>
</div>
<div class="extras" id="extras-codes">
&#8226 {line} &#8594 Skips to the next line<br>
&#8226 {bar} &#8594 Just like line, except adds the bar that usually seperates flavor text<br>
&#8226 {lineNoSpace} &#8594 Just like line, except stays closer to the previous line<br>
&#8226 {i} &#8594 Text is italicized<br>
&#8226 {/i} &#8594 Text returns to normal<br>
&#8226 {left} &#8594 Text aligns to the left<br>
&#8226 {center} &#8594 Text aligns to the center<br>
&#8226 {right} &#8594 Text aligns to the right<br>
&#8226 {upX} &#8594 Shifts the following text X pixels up<br>
&#8226 {downX} &#8594 Shifts the following text X pixels down<br>
&#8226 {leftX} &#8594 Shifts the following text X pixels left<br>
&#8226 {rightX} &#8594 Shifts the following text X pixels right<br>
</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>.
</div>
<div class="extras" id="extras-tutorial">
Card Conjurer has gone under some major changes since the making of this video, but it can still help to give a general idea of how to use the program:
<br><br>
<iframe src="https://www.youtube.com/embed/Uh9Qr35u49I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width: calc(100vw - 94px); height: calc((100vw - 94px) * 9/16)"></iframe>
</div>
</div>
</div>
<div class="adspace">
Ads?
</div>
<div class="sampleGrid grid text">
Check out some samples<br>
<div class="noBorder">
<img id="sampleCardA" class="sampleCard">
<img id="sampleCardB" class="sampleCard">
<img id="sampleCardC" class="sampleCard">
</div>
</div>
</div>
</body>
<footer class="info"><a href="https://imkyle4815.github.io/cardconjurer/TermsOfUse.txt" target="_blank">Terms&nbspof&nbspUse</a> &#8226 <a href="https://imkyle4815.github.io/cardconjurer/Disclaimer.txt" target="_blank">Disclaimer</a> &#8226 <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">Github&nbsppage</a> &#8226 <a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">Contact</a></footer>
<!--CSS-->
<style>
/*fonts*/
@font-face {
font-family: relaymedium;
src: url("data/fonts/relay-medium.ttf");
}
@font-face {
font-family: gothammedium;
src: url("data/fonts/gotham-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: matrix;
src: url("data/fonts/matrix.ttf");
}
@font-face {
font-family: matrixb;
src: url("data/fonts/matrix-b.ttf");
}
@font-face {
font-family: matrixbsc;
src: url("data/fonts/matrix-bsc.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-hover-grid: #0b6b00;
--color-border-selection-grid: #0f820040;
--color-gray: #00000077;
--color-gray-darker: #000000aa;
--color-border-main: #073c00;
--color-input: #073c00;
}
/*Page-wide styling*/
* {
font-family: belerenb;
font-size: 6vw;
user-select: none;
color: #eee;
-webkit-transition: 0.3333s;
transition: 0.3333s;
}
html {
background: #333;
}
body {
margin: 0;
}
/*Grid styling*/
.grid {
display: grid;
}
.mainGrid > div {
border-style: solid;
border-color: var(--color-border-main);
border-width: 1px 1px 0px 1px;
width: calc(100% - 2px);
}
.mainGrid > div:not(.noVerticalPadding) {
padding: 8px 0px;
}
.mainGrid > div:nth-child(odd) {
background: var(--color-gray);
}
.mainGrid > div:nth-child(even) {
background: var(--color-gray-darker);
}
.mainGrid > div.canvasContainer {
text-align: center;
width: calc(100% - 1px);
}
.selectionGrid {
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
text-align: center;
}
/*Card manipulation menu grid*/
.selectionGrid > div {
font-size: 1.1em;
font-family: belerenbsc;
cursor: pointer;
padding: 3px;
border: 1px solid var(--color-border-selection-grid);
background-color: var(--color-gray);
}
.selectionGrid > div:hover {
border: 4px solid var(--color-hover-grid);
/*background-color: var(--color-border-selection-grid);*/
padding: 0px;
}
.selectionGridTarget {
padding: 24px;
/*border: 4px solid var(--color-border-selection-grid);*/
}
.cmm, .extras {
display: none;
}
.shown {
display: block;
}
.sampleCard {
width: 100%;
}
.mainGrid.grid > .sampleGrid {
border-bottom-width: 1px;
}
/*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-input);
border: none;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance:none;
appearance: none;
}
.dropdown select option::hover {
/*nothing for now :)*/
}
.dropdown::after {
content: "\25BC";
font-size: 0.6em;
position: absolute;
pointer-events: none;
right: 0.6em;
top: 0.5em;
}
/*checkbox*/
.checkbox {
height: 1em;
margin: 0.1em 0px 0.3em 0px;
position: relative;
}
.checkbox label {
display: inline-block;
width: calc(1.2em - 6px);
height: calc(1.2em - 6px);
border: 3px solid var(--color-input);
border-radius: 0.25em;
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
.checkbox input:checked ~ label {
background: var(--color-hover-grid);
}
.checkbox > input {
opacity: 0;
}
.checkbox div {
white-space: pre;
position: relative;
top: -0.1em;
left: 1.3em;
}
/*other inputs*/
input[type="text"], input[type="number"], textarea, input[type="file"] {
width: 100%;
border: none;
background: var(--color-input);
border-radius: 0.25em;
padding-left: 0.25em;
}
/*color selector*/
input[type="color"] {
padding: 0px;
border: none;
background: var(--color-input);
}
/*Hyperlinks*/
a:link, a:visited {
color: #fff;
}
a:hover, a:active {
color: #999;
}
.adspace {
display: none;
}
/*Desktop*/
@media only screen and (min-width: 1195px) {
.canvasContainer {
width: auto;
}
.mainGrid:not(.plane) {
grid-template-columns: calc(750px + 0.7em) auto;
}
.adspace {
grid-column: 1 / span 2;
}
.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;
}
header {
top: 0;
}
footer {
bottom: 0;
}
header, footer {
position: fixed;
width: 100%;
z-index: 1000;
}
#header {
-webkit-transition: 0s;
transition: 0s;
max-height: 100px;
width: auto;
}
.mainGrid {
margin-top: 110px;
margin-bottom: 1.1em;
}
}
@media only screen and (min-width: 1455px) {
.mainGrid.plane {
grid-template-columns: calc(1050px + 0.7em) auto;
}
}
@media only screen and (orientation: landscape) {
.sampleCard {
width: 32.8%;
}
}
@media only screen and (min-width: 781px) {
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;
}
* {
font-size: 28px;
}
}
/*Text and stuff :)*/
.info > * {
font-size: inherit;
}
.info {
font-size: 0.6em;
}
/*Title*/
#header {
max-height: 80px;
width: auto;
}
header, .info {
text-align: center;
background-color: black;
padding: 5px;
}
/*symbol grid*/
.manaSymbol > img {
position: relative;
height: 1em;
}
.symbolGrid {
margin-top: 8px;
grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr));
text-align: center;
}
.symbolGrid > div {
border: 4px solid var(--color-border-main);
border-radius: 36px;
background-color: var(--color-border-selection-grid);
}
/*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));
}
.donateGrid.grid > div {
font-size: 1.7em;
}
.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>
-->
Reference in New Issue View Git Blame Copy Permalink