Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

Update index.html

Browse Source
This commit is contained in:
Kyle
2019-05-30 14:59:49 -07:00
parent 9aabb64ffb
commit ed53df87aa
1 changed files with 40 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
index.html
View File

@@ -86,7 +86,7 @@
<div class="cmm shown" id="cmm-frame"> <div class="cmm shown" id="cmm-frame">
Border Border
<span class="dropdown"> <span class="dropdown">
<select onchange="backToDefault(this.value)" id="inputCardVersion"> <select onchange="backToDefault(this.value)" class="input" id="inputCardVersion">
<option value="m15">M15</option> <option value="m15">M15</option>
<option value="old">Old</option> <option value="old">Old</option>
<option value="planeswalker">Planeswalker (M15)</option> <option value="planeswalker">Planeswalker (M15)</option>
@@ -102,7 +102,7 @@
<br><br> <br><br>
Frame Frame
<span class="dropdown"> <span class="dropdown">
<select class="selectColor changesFrame" onchange="imgFrame.load(this.value + 'frame.png')" id="inputFrameColor"></select> <select class="selectColor changesFrame input" onchange="imgFrame.load(this.value + 'frame.png')" id="inputFrameColor"></select>
</span> </span>
<br> <br>
<div class="checkbox"> <div class="checkbox">
@@ -111,7 +111,7 @@
<div>Frame (right)</div> <div>Frame (right)</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select class="selectColor changesFrame" onchange="imgFrameRight.load(this.value + 'frame.png')" id="inputFrameRightColor"></select> <select class="selectColor changesFrame input" onchange="imgFrameRight.load(this.value + 'frame.png')" id="inputFrameRightColor"></select>
</span> </span>
<br><br> <br><br>
<div class="checkbox"> <div class="checkbox">
@@ -120,7 +120,7 @@
<div>Title and Type Boxes</div> <div>Title and Type Boxes</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select class="selectColor changesTitleType" onchange="imgTitleTypeBoxes.load(this.value + 'frame.png')"></select> <select class="selectColor changesTitleType input" onchange="imgTitleTypeBoxes.load(this.value + 'frame.png')"></select>
</span> </span>
<br> <br>
<div class="checkbox"> <div class="checkbox">
@@ -129,7 +129,7 @@
<div>Title and Type Boxes (right)</div> <div>Title and Type Boxes (right)</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select class="selectColor changesTitleType" onchange="imgTitleTypeBoxesRight.load(this.value + 'frame.png')"></select> <select class="selectColor changesTitleType input" onchange="imgTitleTypeBoxesRight.load(this.value + 'frame.png')"></select>
</span> </span>
<br><br> <br><br>
<div class="checkbox"> <div class="checkbox">
@@ -138,7 +138,7 @@
<div>Rules Box</div> <div>Rules Box</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select class="selectColor changesRulesBox" onchange="imgRulesBox.load(this.value + 'frame.png')"></select> <select class="selectColor changesRulesBox input" onchange="imgRulesBox.load(this.value + 'frame.png')"></select>
</span> </span>
<br> <br>
<div class="checkbox"> <div class="checkbox">
@@ -147,7 +147,7 @@
<div>Rules Box (right)</div> <div>Rules Box (right)</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select class="selectColor changesRulesBox" onchange="imgRulesBoxRight.load(this.value + 'frame.png')"></select> <select class="selectColor changesRulesBox input" onchange="imgRulesBoxRight.load(this.value + 'frame.png')"></select>
</span> </span>
<br><br> <br><br>
<div class="checkbox"> <div class="checkbox">
@@ -156,7 +156,7 @@
<div>Pinline</div> <div>Pinline</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select class="selectColor changesPinline" onchange="imgPinline.load(this.value + 'frame.png')"></select> <select class="selectColor changesPinline input" onchange="imgPinline.load(this.value + 'frame.png')"></select>
</span> </span>
<br> <br>
<div class="checkbox"> <div class="checkbox">
@@ -165,7 +165,7 @@
<div>Pinline (right)</div> <div>Pinline (right)</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select class="selectColor changesPinline" onchange="imgPinlineRight.load(this.value + 'frame.png')"></select> <select class="selectColor changesPinline input" onchange="imgPinlineRight.load(this.value + 'frame.png')"></select>
</span> </span>
</div> </div>
<div class="cmm" id="cmm-advanced"> <div class="cmm" id="cmm-advanced">
@@ -202,50 +202,50 @@
Pinline Opacity Pinline Opacity
<input id="inputPinlineOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()"> <input id="inputPinlineOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
<br><br> <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()"> Title Color <input type="color" id="inputTitleColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTitleOutlineColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxTitleOutline" onchange="sectionTextFunction()"> <input type="checkbox" id="inputCheckboxTitleOutline" onchange="sectionTextFunction()">
<label for="inputCheckboxTitleOutline" /> <label for="inputCheckboxTitleOutline" />
<div>Title Outline</div> <div>Title Outline</div>
</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()"> Type Color <input type="color" id="inputTypeColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTypeOutlineColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxTypeOutline" onchange="sectionTextFunction()"> <input type="checkbox" id="inputCheckboxTypeOutline" onchange="sectionTextFunction()">
<label for="inputCheckboxTypeOutline" /> <label for="inputCheckboxTypeOutline" />
<div>Type Outline</div> <div>Type Outline</div>
</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()"> Rules Color <input type="color" id="inputRulesColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()"> Outline <input type="color" id="inputRulesOutlineColor" value="#000000" class="fontColor input" onchange="sectionTextFunction()">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxRulesOutline" onchange="sectionTextFunction()"> <input type="checkbox" id="inputCheckboxRulesOutline" onchange="sectionTextFunction()">
<label for="inputCheckboxRulesOutline" /> <label for="inputCheckboxRulesOutline" />
<div>Rules Outline</div> <div>Rules Outline</div>
</div> </div>
<input type="color" id="inputCreatureColor" value="#000000" onchange="sectionTextFunction()"> Power/Toughness Color <input type="color" id="inputCreatureColor" value="#000000" class="input" onchange="sectionTextFunction()"> Power/Toughness Color
<br><br> <br><br>
<input type="color" id="inputBorderColor" value="#000000" onchange="sectionFrameFunction()"> Border Color <input type="color" id="inputBorderColor" value="#000000" class="input" onchange="sectionFrameFunction()"> Border Color
</div> </div>
<div class="cmm" id="cmm-text"> <div class="cmm" id="cmm-text">
Name Name
<input id="inputName" type="text" class="input" value="" oninput="sectionTextFunction()"> <input id="inputName" type="text" class="input" value="" oninput="sectionTextFunction()" placeholder="Ajani's Chosen">
<br> <br>
Mana Cost Mana Cost
<input id="inputCost" type="text" class="input" value="" oninput="sectionTextFunction()"> <input id="inputCost" type="text" class="input" value="" oninput="sectionTextFunction()" placeholder="2 w w (include spaces)">
<br> <br>
Type Type
<input id="inputType" type="text" class="input" value="" oninput="sectionTextFunction()"> <input id="inputType" type="text" class="input" value="" oninput="sectionTextFunction()" placeholder="Creature — Cat Soldier">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="inputCheckboxPowerToughness" onchange="sectionTextFunction()"> <input type="checkbox" id="inputCheckboxPowerToughness" onchange="sectionTextFunction()">
<label for="inputCheckboxPowerToughness" /> <label for="inputCheckboxPowerToughness" />
<div>Power/Toughness</div> <div>Power/Toughness</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select class="selectColor" onchange="imgPowerToughness.load(this.value + 'pt.png')"></select> <select class="selectColor input" onchange="imgPowerToughness.load(this.value + 'pt.png')"></select>
</span> </span>
<input id="inputPowerToughness" class="input" type="text" value="" oninput="sectionTextFunction()"> <input id="inputPowerToughness" class="input" type="text" value="" oninput="sectionTextFunction()" placeholder="3/3">
<br><br> <br><br>
Rules Text Rules Text
<br> <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()" onkeypress="textAreaKeyPressed()"></textarea> <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()" onkeypress="textAreaKeyPressed()"></textarea>
<br> <br>
Rules Text Font Size Rules Text Font Size
<input id="inputTextSize" type="number" class="input" min="0" value="37" step="1" oninput="sectionTextFunction()"> <input id="inputTextSize" type="number" class="input" min="0" value="37" step="1" oninput="sectionTextFunction()">
@@ -270,10 +270,10 @@
<input id="inputInfoLanguage" type="text" class="input" value="EN" oninput="sectionTextFunction()"> <input id="inputInfoLanguage" type="text" class="input" value="EN" oninput="sectionTextFunction()">
<br> <br>
Artist Credit Artist Credit
<input id="inputInfoArtist" type="text" class="input" value="" oninput="sectionTextFunction()"> <input id="inputInfoArtist" type="text" class="input" value="" oninput="sectionTextFunction()" placeholder="John Doe">
<br> <br>
Other Information <!-- Other Information -->
<input id="inputInfoMessage" type="text" class="input" value="Not For Sale" oninput="sectionTextFunction()"> <input id="inputInfoMessage" type="text" class="input" value="Not For Sale" oninput="sectionTextFunction()" style="display: none;">
</div> </div>
<div class="cmm" id="cmm-art"> <div class="cmm" id="cmm-art">
Upload an Image Upload an Image
@@ -323,14 +323,14 @@
<input id="inputWatermarkOpacity" type="number" class="input" min="0" max="100" value="40" step="1" oninput="sectionOtherFunction()"> <input id="inputWatermarkOpacity" type="number" class="input" min="0" max="100" value="40" step="1" oninput="sectionOtherFunction()">
<br> <br>
Set Code 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")'> <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")' placeholder="WAR">
Or Upload an Image Or Upload an Image
<input type="text" class="input" placeholder="Via URL" onchange="imageURL(this.value, imgWatermark, 'needsBoth')"> <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"> <input type="file" name="inputCardArt" class="input" accept="image/*" onchange="loadImage(event, imgWatermark)" id="inputPicture" placeholder="Via File Upload">
<br> <br>
Watermark Color Watermark Color
<span class="dropdown"> <span class="dropdown">
<select onchange="sectionOtherFunction()" id="inputWatermarkColor"> <select onchange="sectionOtherFunction()" class="input" id="inputWatermarkColor">
<option value="none">default</option> <option value="none">default</option>
<option value="#afa360">White</option> <option value="#afa360">White</option>
<option value="#04527c">Blue</option> <option value="#04527c">Blue</option>
@@ -347,7 +347,7 @@
<div>Second Watermark Color</div> <div>Second Watermark Color</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select onchange="sectionOtherFunction()" id="inputSecondWatermarkColor"> <select onchange="sectionOtherFunction()" class="input" id="inputSecondWatermarkColor">
<option value="none">default</option> <option value="none">default</option>
<option value="#afa360">White</option> <option value="#afa360">White</option>
<option value="#04527c">Blue</option> <option value="#04527c">Blue</option>
@@ -369,15 +369,15 @@
</div> </div>
<div class="cmm" id="cmm-planeswalker"> <div class="cmm" id="cmm-planeswalker">
Planeswalker Ability Line Height Planeswalker Ability Line Height
<input type="number" id="inputAbilityLine1" value="102" min="0" oninput="planeswalkerAbilityLines()"> <input type="number" class="input" id="inputAbilityLine1" value="102" min="0" oninput="planeswalkerAbilityLines()">
<input type="number" id="inputAbilityLine2" value="96" min="0" oninput="planeswalkerAbilityLines()"> <input type="number" class="input" id="inputAbilityLine2" value="96" min="0" oninput="planeswalkerAbilityLines()">
<input type="number" id="inputAbilityLine3" value="80" min="0" oninput="planeswalkerAbilityLines()"> <input type="number" class="input" id="inputAbilityLine3" value="80" min="0" oninput="planeswalkerAbilityLines()">
<input type="number" id="inputAbilityLine4" value="0" min="0" oninput="planeswalkerAbilityLines()"> <input type="number" class="input" id="inputAbilityLine4" value="0" min="0" oninput="planeswalkerAbilityLines()">
Planeswalker Ability Values Planeswalker Ability Values
<input type="text" id="inputAbilityValue0" value="+1" oninput="planeswalkerAbilityIcons()"> <input type="text" class="input" id="inputAbilityValue0" value="+1" oninput="planeswalkerAbilityIcons()">
<input type="text" id="inputAbilityValue1" value="0" oninput="planeswalkerAbilityIcons()"> <input type="text" class="input" id="inputAbilityValue1" value="0" oninput="planeswalkerAbilityIcons()">
<input type="text" id="inputAbilityValue2" value="-1" oninput="planeswalkerAbilityIcons()"> <input type="text" class="input" id="inputAbilityValue2" value="-1" oninput="planeswalkerAbilityIcons()">
<input type="text" id="inputAbilityValue3" value="" oninput="planeswalkerAbilityIcons()"> <input type="text" class="input" id="inputAbilityValue3" value="" oninput="planeswalkerAbilityIcons()">
</div> </div>
<!-- <div class="adspace"> <!-- <div class="adspace">
Ads? Ads?
@@ -612,11 +612,8 @@ body {
width: 100%; width: 100%;
} }
.dropdown select { .dropdown select {
border-radius: 0.25em;
padding-left: 0.25em; padding-left: 0.25em;
width: inherit; width: inherit;
background-color: var(--color-primary);
border: none;
cursor: pointer; cursor: pointer;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance:none; -webkit-appearance:none;
@@ -643,7 +640,7 @@ body {
display: inline-block; display: inline-block;
width: calc(1.2em - 6px); width: calc(1.2em - 6px);
height: calc(1.2em - 6px); height: calc(1.2em - 6px);
border: 3px solid var(--color-primary); border: 3px solid var(--color-select);
border-radius: 0.25em; border-radius: 0.25em;
position: absolute; position: absolute;
top: 0px; top: 0px;
@@ -654,6 +651,7 @@ body {
} }
.checkbox input:checked ~ label { .checkbox input:checked ~ label {
background: var(--color-select); background: var(--color-select);
border: 3px solid var(--color-primary);
} }
.checkbox > input { .checkbox > input {
opacity: 0; opacity: 0;
@@ -667,16 +665,16 @@ body {
/*other inputs*/ /*other inputs*/
input[type="text"], input[type="number"], textarea, input[type="file"] { input[type="text"], input[type="number"], textarea, input[type="file"] {
width: 100%; width: 100%;
border: none;
background: var(--color-primary);
border-radius: 0.25em;
padding-left: 0.25em; padding-left: 0.25em;
} }
/*color selector*/ /*color selector*/
input[type="color"] { input[type="color"] {
padding: 0px; padding: 0px;
border: none; }
.input {
background: var(--color-primary); background: var(--color-primary);
border-radius: 0.25em;
border: 1px solid var(--color-select);
} }
/*Hyperlinks*/ /*Hyperlinks*/