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

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

127
index.html
View File

@@ -59,14 +59,14 @@
<option value="8th/">8th</option>
</select>
</span>
<br/>
<br>
Color
<span class="dropdown">
<select id="colorSelection" onchange="updateBorder()">
<option value="white">White</option>
</select>
</span>
<br/>
<br>
<div class="checkbox">
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
<label for="checkboxSecondColor" />
@@ -75,7 +75,7 @@
<span class="dropdown">
<select id="secondColorSelection" onchange="updateBorder()"></select>
</span>
<br/>
<br>
<div class="checkbox">
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
<label for="checkboxThirdColor" />
@@ -179,18 +179,18 @@
<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/>
<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/>
<br>
Mana Cost
<input id="inputCost" type="text" class="input">
<br/>
<br>
Type
<input id="inputType" type="text" class="input">
<div class="checkbox">
@@ -202,33 +202,33 @@
</div>
<div class="cmm" id="cmm-text">
Rules Text
<br/>
<br>
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
<br/>
<br>
Rules Text Font Size
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5">
<br/>
<br>
Pixels Between Paragraphs
<input id="textShift" type="number" class="input" min="0" max="300" value="13">
<br/>
<br>
Shift All Text Down
<input id="textDown" type="number" class="input" min="0" max="300" value="0">
<br/>
<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" 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)">
<br/>
<br>
Image Zoom
<input id="imageSize" type="number" class="input" value="100" step="0.1">
<br/>
<br>
Image Left
<input id="imageLeft" type="number" class="input" value="0" step="1">
<br/>
<br>
Image Up
<input id="imageUp" type="number" class="input" value="0" step="1">
Image Rotation
@@ -237,23 +237,23 @@
<div class="cmm" id="cmm-info">
Other Info
<input id="inputInfo" value="Not A Real Card" type="text" class="input">
<br/>
<br>
Card Number
<input id="inputNumber" value="001/001" type="text" class="input">
<br/>
<br>
Rarity
<input id="inputRarity" value="C" type="text" class="input">
<br/>
<br>
Set Abbreviation
<input id="inputSet" value="MTG" type="text" class="input">
<br/>
<br>
Language
<input id="inputLanguage" value="EN" type="text" class="input">
<br/>
<br>
Artist Credit
<input id="inputArtist" value="" type="text" class="input">
<br/>
<input type="color" id="inputInfoColor" value="#ffffff"> Info Color<br/>
<br>
<input type="color" id="inputInfoColor" value="#ffffff"> Info Color<br>
</div>
<div class="cmm" id="cmm-set">
<div class="checkbox">
@@ -269,9 +269,9 @@
<br>
Custom Set Symbol
<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)">
<br/>
<br>
Scale Set Symbol
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5">
</div>
@@ -287,13 +287,13 @@
<div>Watermark</div>
</div>
<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)">
<br/>
<br>
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode">
<br/>
<br>
Watermark Color
<br/>
<br>
<span class="dropdown">
<select id="watermarkColorSelection">
<option value="#afa360">White</option>
@@ -305,7 +305,7 @@
<option value="#616b72">Artifact/Colorless</option>
</select>
</span>
<br/>
<br>
<div class="checkbox">
<input type="checkbox" id="checkboxSecondWatermarkColor" />
<label for="checkboxSecondWatermarkColor" />
@@ -342,45 +342,73 @@
</div>
<div class="tutorialArea">
<div class="grid selectionGrid">
<div onclick="toggleView('about', 'extras')">About</div>
<div onclick="toggleView('symbolList', 'extras')">Symbols</div>
<div onclick="toggleView('codes', 'extras')">Other Codes</div>
<div onclick="toggleView('set', 'extras')">Set Codes</div>
<div onclick="toggleView('border', 'extras')">Colors</div>
</div>
<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.
<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/>
&#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/>
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 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 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 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/>
&#8226 Border &#8594 Selects the border style, such as planar card, m15 card, etc...<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 Third Color &#8594 Tertiary color. Affects the entire card, including power and toughness, as seen on two-colored gold cards.<br/><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 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 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.
</div>
</div>
</div>
<div class="sampleGrid grid text">
Check out some samples<br/>
Check out some samples<br>
<div class="noBorder">
<img id="sampleCardA" class="sampleCard"></img>
<img id="sampleCardB" class="sampleCard"></img>
@@ -669,6 +697,9 @@ a:hover, a:active {
.text {
text-align: center;
}
.paragraph {
text-indent: 2em;
}
</style>
<script src="data/scripts/main.js"></script>