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

tabs

Browse Source
This commit is contained in:
Kyle
2019-10-27 15:37:04 -07:00
parent 32695b8c5c
commit 76cda1c8be
2 changed files with 28 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
data/site/styles.css
View File

@@ -39,6 +39,7 @@
--shifting-color-1: #00c300; --shifting-color-1: #00c300;
--shifting-color-1-light: #c8ff64; --shifting-color-1-light: #c8ff64;
--light-color: #eee; --light-color: #eee;
--clear-selected: #fff4;
--dark-color: #333; --dark-color: #333;
--clear-light: #0001; --clear-light: #0001;
--clear-dark: #0003; --clear-dark: #0003;
@@ -99,8 +100,8 @@ canvas {
} }
.cardMenu > div > div:nth-child(1) { .cardMenu > div > div:nth-child(1) {
/* border: 1px solid blue;*/ /* border: 1px solid blue;*/
text-align: center; /* text-align: center;*/
font: 1.5em belerenbsc; /* font: 1.5em belerenbsc;*/
} }
.twoGrid { .twoGrid {
display: grid; display: grid;
@@ -282,9 +283,9 @@ footer a:hover {
/*WIP*/ /*WIP*/
.tab { .tab {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr));
grid-auto-rows: min-content; grid-auto-rows: min-content;
/* align-items: center;*/ cursor: pointer;
} }
.tabButton { .tabButton {
text-align: center; text-align: center;
@@ -294,7 +295,7 @@ footer a:hover {
padding: 0.1em 0em; padding: 0.1em 0em;
} }
.tabButton.activeTab { .tabButton.activeTab {
background: var(--clear-dark); background: var(--clear-selected);
} }
.tabContent { .tabContent {
display: none; display: none;
@@ -303,8 +304,10 @@ footer a:hover {
display: block; display: block;
} }
.download {
text-align: center;
font: 1.5em belerenbsc;
}

46
index.html
View File

@@ -17,10 +17,16 @@
<canvas id="mainCanvas" class="canvas"></canvas> <canvas id="mainCanvas" class="canvas"></canvas>
</div> </div>
<div class="cardMenu"> <div class="cardMenu">
<div> <div class="tab">
<div> <div class="tabButton editor activeTab" onclick="tabFunction(event, `editor`, `optionFrame`)">Frame</div>
Card Frame <div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionText`)">Text</div>
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionArt`)">Art</div>
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionInfo`)">Collector</div>
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionSet`)">Set</div>
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionWatermark`)">Watermark</div>
</div> </div>
<div class="bar"></div>
<div class="tabContent editor displayed" id="optionFrame">
<div class="imageGrid"> <div class="imageGrid">
<div class="autoGrid"> <div class="autoGrid">
<div class="tooltip"><select class="select" id="inputImageType" onchange="hideShowColors()"></select><span class="tooltiptext">Select the part of the card frame</span></div> <div class="tooltip"><select class="select" id="inputImageType" onchange="hideShowColors()"></select><span class="tooltiptext">Select the part of the card frame</span></div>
@@ -36,23 +42,15 @@
<div class="tooltip"><select class="select" id="inputImageTypeOpacity" onchange="loadOpacityValue()"></select><span class="tooltiptext">Select the part of the card frame</span></div> <div class="tooltip"><select class="select" id="inputImageTypeOpacity" onchange="loadOpacityValue()"></select><span class="tooltiptext">Select the part of the card frame</span></div>
<div class="tooltip"><input type="number" class="input number" id="inputOpacityValue" min="0" max="100" oninput="opacityValueUpdated()"><span class="tooltiptext">Enter the opacity for the selected part of the frame</span></div> <div class="tooltip"><input type="number" class="input number" id="inputOpacityValue" min="0" max="100" oninput="opacityValueUpdated()"><span class="tooltiptext">Enter the opacity for the selected part of the frame</span></div>
</div> </div>
<div class="bar"></div>
</div>
<div>
<div>
Text
</div> </div>
<div class="tabContent editor" id="optionText">
<div id="inputWhichTextTabs" class="tab tooltip"> <div id="inputWhichTextTabs" class="tab tooltip">
<span class="tooltiptext">Select the text you want to edit</span> <span class="tooltiptext">Select the text you want to edit</span>
</div> </div>
<div class="tooltip"><textarea class="textarea tooltip" id="inputText" placeholder="" oninput="updateText()"></textarea><span class="tooltiptext">Edit the selected text</span></div> <div class="tooltip"><textarea class="textarea tooltip" id="inputText" placeholder="" oninput="updateText()"></textarea><span class="tooltiptext">Edit the selected text</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="updateCardCanvas()" value=""><span class="tooltiptext">Enter the mana cost. Include spaces!</span></div> <div class="tooltip"><input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="updateCardCanvas()" value=""><span class="tooltiptext">Enter the mana cost. Include spaces!</span></div>
<div class="bar"></div>
</div>
<div>
<div>
Art
</div> </div>
<div class="tabContent editor" id="optionArt">
<div class="autoGrid"> <div class="autoGrid">
<div> <div>
<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the card art</span></div> <div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the card art</span></div>
@@ -67,12 +65,8 @@
<div class="tooltip"><input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="updateCardCanvas()"><span class="tooltiptext">Art zoom level</span></div> <div class="tooltip"><input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="updateCardCanvas()"><span class="tooltiptext">Art zoom level</span></div>
</div> </div>
</div> </div>
<div class="bar"></div>
</div>
<div>
<div>
Collector's/Legal Information
</div> </div>
<div class="tabContent editor" id="optionInfo">
<div class="autoGrid"> <div class="autoGrid">
<div class="tooltip"><input type="text" class="input text" placeholder="Number" id="inputInfoNumber" oninput="updateBottomInfoCanvas()" value=""><span class="tooltiptext">Card Number</span></div> <div class="tooltip"><input type="text" class="input text" placeholder="Number" id="inputInfoNumber" oninput="updateBottomInfoCanvas()" value=""><span class="tooltiptext">Card Number</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P"><span class="tooltiptext">Rarity</span></div> <div class="tooltip"><input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P"><span class="tooltiptext">Rarity</span></div>
@@ -80,12 +74,8 @@
<div class="tooltip"><input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN"><span class="tooltiptext">Language</span></div> <div class="tooltip"><input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN"><span class="tooltiptext">Language</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Artist's Name" id="inputInfoArtist" oninput="updateBottomInfoCanvas()" value=""><span class="tooltiptext">Artist's Name<br>(necessary)</span></div> <div class="tooltip"><input type="text" class="input text" placeholder="Artist's Name" id="inputInfoArtist" oninput="updateBottomInfoCanvas()" value=""><span class="tooltiptext">Artist's Name<br>(necessary)</span></div>
</div> </div>
<div class="bar"></div>
</div>
<div>
<div>
Set Symbol
</div> </div>
<div class="tabContent editor" id="optionSet">
<div class="autoGrid"> <div class="autoGrid">
<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the set symbol</span></div> <div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the set symbol</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the set symbol</span></div> <div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the set symbol</span></div>
@@ -93,12 +83,8 @@
<div class="tooltip"><input type="text" class="input text" id="inputSetRarity" placeholder="Rarity" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)"><span class="tooltiptext">C, U, R, M, or S<br>(Not every set has every rarity)</span></div> <div class="tooltip"><input type="text" class="input text" id="inputSetRarity" placeholder="Rarity" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)"><span class="tooltiptext">C, U, R, M, or S<br>(Not every set has every rarity)</span></div>
<div class="tooltip"><button class="button" onclick="randomSet()">Random</button><span class="tooltiptext">Use a random set symbol and rarity</span></div> <div class="tooltip"><button class="button" onclick="randomSet()">Random</button><span class="tooltiptext">Use a random set symbol and rarity</span></div>
</div> </div>
<div class="bar"></div>
</div>
<div>
<div>
Watermark
</div> </div>
<div class="tabContent editor" id="optionWatermark">
<div class="autoGrid"> <div class="autoGrid">
<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the watermark</span></div> <div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the watermark</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the watermark</span></div> <div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the watermark</span></div>
@@ -126,10 +112,10 @@
<option value="#cfc8be">Artifact/Colorless</option> <option value="#cfc8be">Artifact/Colorless</option>
</select><span class="tooltiptext">Select the secondary watermark color</span></div> </select><span class="tooltiptext">Select the secondary watermark color</span></div>
</div> </div>
<div class="bar"></div>
</div> </div>
<div class="bar"></div>
<div> <div>
<div> <div class="download">
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a> <a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div> </div>
</div> </div>