GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

about

Browse Source
This commit is contained in:
Kyle
2018-12-01 18:10:49 -08:00
parent de7fa28819
commit 5bbba63e5e
4 changed files with 79 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/patreon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
images/paypal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
images/pucatrade.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

127
index.html
View File

@@ -59,14 +59,14 @@
<option value="8th/">8th</option> <option value="8th/">8th</option>
</select> </select>
</span> </span>
<br/> <br>
Color Color
<span class="dropdown"> <span class="dropdown">
<select id="colorSelection" onchange="updateBorder()"> <select id="colorSelection" onchange="updateBorder()">
<option value="white">White</option> <option value="white">White</option>
</select> </select>
</span> </span>
<br/> <br>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" /> <input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
<label for="checkboxSecondColor" /> <label for="checkboxSecondColor" />
@@ -75,7 +75,7 @@
<span class="dropdown"> <span class="dropdown">
<select id="secondColorSelection" onchange="updateBorder()"></select> <select id="secondColorSelection" onchange="updateBorder()"></select>
</span> </span>
<br/> <br>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" /> <input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
<label for="checkboxThirdColor" /> <label for="checkboxThirdColor" />
@@ -179,18 +179,18 @@
<label for="checkboxRulesVisibility" /> <label for="checkboxRulesVisibility" />
<div>Rules Visibility</div> <div>Rules Visibility</div>
</div> </div>
<input type="color" id="inputTitleColor" value="#000000"> Title Color<br/> <input type="color" id="inputTitleColor" value="#000000"> Title Color<br>
<input type="color" id="inputTypeColor" value="#000000"> Type 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="inputRulesColor" value="#000000"> Rules Color<br>
<input type="color" id="inputCreatureColor" value="#000000"> Power/Toughness Color<br/> <input type="color" id="inputCreatureColor" value="#000000"> Power/Toughness Color<br>
</div> </div>
<div class="cmm" id="cmm-general"> <div class="cmm" id="cmm-general">
Name Name
<input id="inputName" type="text" class="input"> <input id="inputName" type="text" class="input">
<br/> <br>
Mana Cost Mana Cost
<input id="inputCost" type="text" class="input"> <input id="inputCost" type="text" class="input">
<br/> <br>
Type Type
<input id="inputType" type="text" class="input"> <input id="inputType" type="text" class="input">
<div class="checkbox"> <div class="checkbox">
@@ -202,33 +202,33 @@
</div> </div>
<div class="cmm" id="cmm-text"> <div class="cmm" id="cmm-text">
Rules Text Rules Text
<br/> <br>
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea> <textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
<br/> <br>
Rules Text Font Size Rules Text Font Size
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5"> <input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5">
<br/> <br>
Pixels Between Paragraphs Pixels Between Paragraphs
<input id="textShift" type="number" class="input" min="0" max="300" value="13"> <input id="textShift" type="number" class="input" min="0" max="300" value="13">
<br/> <br>
Shift All Text Down Shift All Text Down
<input id="textDown" type="number" class="input" min="0" max="300" value="0"> <input id="textDown" type="number" class="input" min="0" max="300" value="0">
<br/> <br>
Shift Mana Symbols Down Shift Mana Symbols Down
<input id="inputSymbolDown" type="number" class="input" value="0"> <input id="inputSymbolDown" type="number" class="input" value="0">
</div> </div>
<div class="cmm" id="cmm-art"> <div class="cmm" id="cmm-art">
Image Image
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"> <input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture">
<br/> <br>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)"> <input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)">
<br/> <br>
Image Zoom Image Zoom
<input id="imageSize" type="number" class="input" value="100" step="0.1"> <input id="imageSize" type="number" class="input" value="100" step="0.1">
<br/> <br>
Image Left Image Left
<input id="imageLeft" type="number" class="input" value="0" step="1"> <input id="imageLeft" type="number" class="input" value="0" step="1">
<br/> <br>
Image Up Image Up
<input id="imageUp" type="number" class="input" value="0" step="1"> <input id="imageUp" type="number" class="input" value="0" step="1">
Image Rotation Image Rotation
@@ -237,23 +237,23 @@
<div class="cmm" id="cmm-info"> <div class="cmm" id="cmm-info">
Other Info Other Info
<input id="inputInfo" value="Not A Real Card" type="text" class="input"> <input id="inputInfo" value="Not A Real Card" type="text" class="input">
<br/> <br>
Card Number Card Number
<input id="inputNumber" value="001/001" type="text" class="input"> <input id="inputNumber" value="001/001" type="text" class="input">
<br/> <br>
Rarity Rarity
<input id="inputRarity" value="C" type="text" class="input"> <input id="inputRarity" value="C" type="text" class="input">
<br/> <br>
Set Abbreviation Set Abbreviation
<input id="inputSet" value="MTG" type="text" class="input"> <input id="inputSet" value="MTG" type="text" class="input">
<br/> <br>
Language Language
<input id="inputLanguage" value="EN" type="text" class="input"> <input id="inputLanguage" value="EN" type="text" class="input">
<br/> <br>
Artist Credit Artist Credit
<input id="inputArtist" value="" type="text" class="input"> <input id="inputArtist" value="" type="text" class="input">
<br/> <br>
<input type="color" id="inputInfoColor" value="#ffffff"> Info Color<br/> <input type="color" id="inputInfoColor" value="#ffffff"> Info Color<br>
</div> </div>
<div class="cmm" id="cmm-set"> <div class="cmm" id="cmm-set">
<div class="checkbox"> <div class="checkbox">
@@ -269,9 +269,9 @@
<br> <br>
Custom Set Symbol Custom Set Symbol
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"> <input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol">
<br/> <br>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)"> <input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)">
<br/> <br>
Scale Set Symbol Scale Set Symbol
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5"> <input id="setSymbolSize" type="number" class="input" value="100" step="0.5">
</div> </div>
@@ -287,13 +287,13 @@
<div>Watermark</div> <div>Watermark</div>
</div> </div>
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"> <input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark">
<br/> <br>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"> <input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)">
<br/> <br>
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode"> <input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode">
<br/> <br>
Watermark Color Watermark Color
<br/> <br>
<span class="dropdown"> <span class="dropdown">
<select id="watermarkColorSelection"> <select id="watermarkColorSelection">
<option value="#afa360">White</option> <option value="#afa360">White</option>
@@ -305,7 +305,7 @@
<option value="#616b72">Artifact/Colorless</option> <option value="#616b72">Artifact/Colorless</option>
</select> </select>
</span> </span>
<br/> <br>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSecondWatermarkColor" /> <input type="checkbox" id="checkboxSecondWatermarkColor" />
<label for="checkboxSecondWatermarkColor" /> <label for="checkboxSecondWatermarkColor" />
@@ -342,45 +342,73 @@
</div> </div>
<div class="tutorialArea"> <div class="tutorialArea">
<div class="grid selectionGrid"> <div class="grid selectionGrid">
<div onclick="toggleView('about', 'extras')">About</div>
<div onclick="toggleView('symbolList', 'extras')">Symbols</div> <div onclick="toggleView('symbolList', 'extras')">Symbols</div>
<div onclick="toggleView('codes', 'extras')">Other Codes</div> <div onclick="toggleView('codes', 'extras')">Other Codes</div>
<div onclick="toggleView('set', 'extras')">Set Codes</div> <div onclick="toggleView('set', 'extras')">Set Codes</div>
<div onclick="toggleView('border', 'extras')">Colors</div> <div onclick="toggleView('border', 'extras')">Colors</div>
</div> </div>
<div class="extrasMenu"> <div class="extrasMenu">
<div class="extras shown" id="extras-symbolList"> <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 immediatly 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 I learned to play 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 by making a small donation.
</div>
<div class="text">
<a href="https://www.paypal.me/kyleburtondonate" target="blank"><img height="60px" src="images/paypal.png"></img></a>
<a href="https://www.patreon.com/KyleBurton" target="blank"><img height="60px" src="images/patreon.png"></img></a>
<a href="https://pucatrade.com/invite/gift/186748" target="blank"><img height="60px" src="images/pucatrade.png"></img></a>
</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. 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 class="symbolGrid grid" id="symbolList">
</div> </div>
</div> </div>
<div class="extras" id="extras-codes"> <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/> Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are caps sensitive.<br>
&#8226 line &#8594 Skips to the next line<br/> &#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 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 lineNoSpace &#8594 Just like line, except stays closer to the previous line<br>
&#8226 i &#8594 Text is italicized<br/> &#8226 i &#8594 Text is italicized<br>
&#8226 /i &#8594 Text returns to normal<br/> &#8226 /i &#8594 Text returns to normal<br>
&#8226 left &#8594 Text aligns to the left<br/> &#8226 left &#8594 Text aligns to the left<br>
&#8226 center &#8594 Text aligns to the center<br/> &#8226 center &#8594 Text aligns to the center<br>
&#8226 right &#8594 Text aligns to the right<br/> &#8226 right &#8594 Text aligns to the right<br>
&#8226 plane &#8594 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. &#8226 plane &#8594 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>
<div class="extras" id="extras-set"> <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. 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>
<div class="extras" id="extras-border"> <div class="extras" id="extras-border">
Under the 'Card Border' tab use the following guidelines:<br/> Under the 'Card Border' tab use the following guidelines:<br>
&#8226 Border &#8594 Selects the border style, such as planar card, m15 card, etc...<br/> &#8226 Border &#8594 Selects the border style, such as planar card, m15 card, etc...<br>
&#8226 Color &#8594 Primary color<br/> &#8226 Color &#8594 Primary color<br>
&#8226 Second Color &#8594 Secondary color. Only affects the right half of the card, as seen on hybrid cards.<br/> &#8226 Second Color &#8594 Secondary color. Only affects the right half of the card, as seen on hybrid cards.<br>
&#8226 Third Color &#8594 Tertiary color. Affects the entire card, including power and toughness, as seen on two-colored gold cards.<br/><br/> &#8226 Third Color &#8594 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. Under the 'Border (Advanced)' tab the checkboxes are fairly straightforward. Try each feature out to see what it does.
</div> </div>
</div> </div>
</div> </div>
<div class="sampleGrid grid text"> <div class="sampleGrid grid text">
Check out some samples<br/> Check out some samples<br>
<div class="noBorder"> <div class="noBorder">
<img id="sampleCardA" class="sampleCard"></img> <img id="sampleCardA" class="sampleCard"></img>
<img id="sampleCardB" class="sampleCard"></img> <img id="sampleCardB" class="sampleCard"></img>
@@ -669,6 +697,9 @@ a:hover, a:active {
.text { .text {
text-align: center; text-align: center;
} }
.paragraph {
text-indent: 2em;
}
</style> </style>
<script src="data/scripts/main.js"></script> <script src="data/scripts/main.js"></script>