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

redesign

Browse Source
This commit is contained in:
Kyle
2018-11-14 19:58:40 -08:00
parent 94e97122e4
commit f5095be2a4
8 changed files with 871 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

614
backup.html Normal file
View File

@@ -0,0 +1,614 @@
<!DOCTYPE html5>
<html>
<head>
<title>Card Conjurer</title>
<img src="images/title.png" height="auto" style="max-height: 100px;">
<!-- Favicon craziness! -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#64ca2f">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="theme-color" content="#64ca2f">
<meta charset="UTF-8">
</head>
<!-- <img src="data/background.png"></img> -->
<body>
<div class="row">
<div class="column-1"><canvas id="canvas" width="749" height="1044"></canvas></div>
<div class="column-2" id="optionsColumn">
<!--OPTIONS-->
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Card Border</div>
<div class="togglee shown">
Border
<span class="dropdown">
<select id="borderSelection" onchange="changeTemplate()">
<option value="m15/">M15</option>
<option value="map/">Map (Ixalan)</option>
<option value="plane/">Plane</option>
<option value="8th/">8th</option>
</select>
</span>
<br/>
Color
<span class="dropdown">
<select id="colorSelection" onchange="updateBorder()">
<option value="white">White</option>
</select>
</span>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
<label for="checkboxSecondColor" />
<div>Second Color</div>
</div>
<span class="dropdown">
<select id="secondColorSelection" onchange="updateBorder()"></select>
</span>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
<label for="checkboxThirdColor" />
<div>Third Color</div>
</div>
<span class="dropdown">
<select id="thirdColorSelection" onchange="updateBorder()"></select>
</span>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxCreature" />
<label for="checkboxCreature" />
<div>Power/Toughness</div>
</div>
<input id="inputPowerToughness" class="input" value="" type="text"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Border (Advanced)</div>
<div class="togglee">
<div class="checkbox">
<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
<label for="checkboxLegendary" />
<div>Legendary</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxNyx" onchange="updateBorder()" />
<label for="checkboxNyx" />
<div>Nyx</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()" />
<label for="checkboxMiracle" />
<div>Miracle</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()" />
<label for="checkboxRareStamp" />
<div>Rare Stamp</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()" />
<label for="checkboxFlipIcon" />
<div>Flip Icon</div>
</div>
<span class="dropdown">
<select id="inputFlipIcon" onchange="updateBorder()">
<option value="blank.png">Blank</option>
<option value="day.png">Day</option>
<option value="night.png">Night</option>
<option value="compass.png">Compass</option>
<option value="moon.png">Moon</option>
<option value="eldrazi.png">Eldrazi</option>
<option value="planeswalker.png">Planeswalker</option>
<option value="creature.png">Creature</option>
<option value="instant.png">Instant</option>
<option value="sorcery.png">Sorcery</option>
<option value="enchantment.png">Enchantment</option>
<option value="artifact.png">Artifact</option>
<option value="land.png">Land</option>
<option value="multitype.png">Multitype</option>
<option value="planeshift.png">Planeshift</option>
<option value="structure.png">Structure</option>
</select>
</span>
<div class="checkbox">
<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
<label for="checkboxFlipTip" />
<div>Flip Tip</div>
</div>
<input id="inputFlipTip" value="" type="text" class="input"></input>
<div class="checkbox">
<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
<label for="checkboxFlippedDark" />
<div>Flipped (Darker)</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxSilverBorder" onchange="updateBorder()" />
<label for="checkboxSilverBorder" />
<div>Silver Border</div>
</div>
<input type="color" id="inputColor" onchange="updateBorder()"> Border Color</input>
<div class="checkbox">
<input type="checkbox" id="checkboxFoil" />
<label for="checkboxFoil" />
<div>Foil</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxIdentity" onchange="updateBorder()" />
<label for="checkboxIdentity" />
<div>Color Identity</div>
</div>
<input id="inputIdentity" type="text" class="input" onchange="updateBorder()"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Name, Mana Cost, Type</div>
<div class="togglee">
Name
<input id="inputName" type="text" class="input"></input>
<br/>
Mana Cost
<input id="inputCost" type="text" class="input"></input>
<br/>
Type
<input id="inputType" type="text" class="input"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Rules Text</div>
<div class="togglee">
Rules Text
<br/>
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
<br/>
Rules Text Font Size
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5"></input>
<br/>
Pixels Between Paragraphs
<input id="textShift" type="number" class="input" min="0" max="300" value="13"></input>
<br/>
Shift All Text Down
<input id="textDown" type="number" class="input" min="0" max="300" value="0"></input>
<br/>
Shift Mana Symbols Down
<input id="inputSymbolDown" type="number" class="input" value="0"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Card Art</div>
<div class="togglee">
Image
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input>
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)"></input>
<br/>
Image Zoom
<input id="imageSize" type="number" class="input" value="100" step="0.1"></input>
<br/>
Image Left
<input id="imageLeft" type="number" class="input" value="0" step="1"></input>
<br/>
Image Up
<input id="imageUp" type="number" class="input" value="0" step="1"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Bottom Information</div>
<div class="togglee">
Other Info
<input id="inputInfo" value="Not A Real Card" type="text" class="input"></input>
<br/>
Card Number
<input id="inputNumber" value="001/001" type="text" class="input"></input>
<br/>
Rarity
<input id="inputRarity" value="C" type="text" class="input"></input>
<br/>
Set Abbreviation
<input id="inputSet" value="MTG" type="text" class="input"></input>
<br/>
Language
<input id="inputLanguage" value="EN" type="text" class="input"></input>
<br/>
Artist Credit
<input id="inputArtist" value="" type="text" class="input"></input>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxArtistColor" />
<label for="checkboxArtistColor" />
<div>Black Bottom Info</div>
</div>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Set Symbol and Watermark</div>
<div class="togglee">
<div class="checkbox">
<input type="checkbox" id="checkboxSetSymbol" checked="true" />
<label for="checkboxSetSymbol" />
<div>Set Symbol</div>
</div>
Set Code
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input>
<br>
Set Symbol Rarity
<input type="text" onchange="loadSetSymbol()" value="C" id="setSymbolRarity" class="input"></input>
<br>
Custom Set Symbol
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"></input>
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)"></input>
<br/>
Scale Set Symbol
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5"></input>
<br/><br/>
<div class="checkbox">
<input type="checkbox" id="checkboxWatermark" checked="true" />
<label for="checkboxWatermark" />
<div>Watermark</div>
</div>
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"></input>
<br/>
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode"></input>
<br/>
Watermark Color
<br/>
<span class="dropdown">
<select id="watermarkColorSelection">
<!-- <option value="#f3f2ef">White</option>
<option value="#1d7097">Blue</option>
<option value="#31302e">Black</option>
<option value="#bf544c">Red</option>
<option value="#1c6449">Green</option>
<option value="#e3d591">Gold</option>
<option value="#e0e0e0">Artifact/Colorless</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>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxSecondWatermarkColor" />
<label for="checkboxSecondWatermarkColor" />
<div>Second Watermark Color</div>
</div>
<span class="dropdown">
<select id="secondWatermarkColorSelection">
<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>
Watermark Opacity
<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01"></input>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Download/Options</div>
<div class="togglee">
Frame Rate
<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"></input>
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div>
</div>
<!--END-->
</div>
</div>
<div class="row">
<div class="column-4">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Mana Symbol Codes</div>
<div class="togglee shown">
Use the following codes to get the respective symbol in the card's mana cost and rules text. In the mana cost, make sure to include spaces in between the codes, and in the rules text include '<' before each code and '>' after. These codes are caps sensative.<br/>
<div id="symbolList" style="overflow: hidden;"></div>
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Other Codes</div>
<div class="togglee">
Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are also caps sensative.<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; background-color: var(--main-text-color);"></img> and shifts the following text to the right. This is designed for planar cards.
</div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Set Abbreviations</div>
<div class="togglee">
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>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Choosing Your Border</div>
<div class="togglee">
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 Selects the card's primary color<br/>
&#8226 Second Color &#8594 Selects the card's secondary color which only affects the right half of the card. This creates the same effect as seen on hybrid cards.<br/>
&#8226 Third Color &#8594 Selects the card's tertiary color which will affect the entire card, including power and toughness. This is used to create two-colored gold cards.<br/>
Under the 'Border (Advanced)' tab the checkboxes are fairly straightforward. Try each feature out to see what it does.
</div>
</div>
<div class="section" style="overflow: hidden; border-top: hidden;">
Check out some samples! <br/>
<img id="sampleCardA" class="column-3"></img>
<img id="sampleCardB" class="column-3"></img>
<img id="sampleCardC" class="column-3"></img>
</div>
</div>
</div>
<footer class="row info" style="">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank" class="info">the Github page</a>.</footer>
</body>
<!--CSS-->
<style>
/*fonts*/
@font-face {
font-family: relaymedium;
src: url("data/fonts/relay-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: matrixbsc;
src: url("data/fonts/matrix-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: mplantin;
src: url("data/fonts/mplantin.ttf");
}
@font-face {
font-family: mplantini;
src: url("data/fonts/mplantin-i.ttf");
}
/*Color Palette*/
:root {
--title-text-color: rgb(100, 200, 50); /*TITLE*/
--main-text-color: rgb(150, 150, 150); /*REGULAR*/
--input-text-color: rgb(100, 200, 50); /*INPUTS*/
--dark-text-color: rgb(96, 96, 96); /*DARK*/
--section-background-color: rgba(0, 0, 0, 0.5); /*BACKGROUND*/
--section-border-color: rgba(128, 255, 128, 0.25); /*BORDER*/
--solid-border-color: rgb(39, 71, 39); /*Opaque Border*/
}
/*General style things*/
* {
text-align: center;
font-family: belerenb;
font-size: 5vw;
color: var(--main-text-color);
user-select: none;
box-sizing: border-box;
}
html {
background-color: rgb(16, 16, 16);
}
/*Applies to most elements (with rows and columns)*/
.row::after{
content: "";
display: block;
clear: both;
margin-bottom: 5px;
}
[class*="column-"] {
width: 100%;
float: left;
padding: 5px;
}
/*Style for sections, togglers, and togglees*/
.section {
border: 0.04em solid var(--section-border-color);
background-color: var(--section-background-color);
width: 100%;
}
.toggler:hover {
color: var(--title-text-color);
}
.togglee {
text-align: left;
border-width: 0.04em;
border-color: var(--section-border-color);
border-style: dashed solid solid solid;
display: none;
padding: 5px;
}
.shown {
display: block;
}
/*Specific input element styles*/
.input {
border-radius: 0.25em;
padding-left: 0.25em;
text-align: left;
border: none;
background-color: var(--section-border-color);
color: var(--input-text-color);
width: 100%;
}
input[type="color"] {
border-radius: 0.25em;
border: none;
background-color: var(--section-border-color);
padding-top: 0px;
padding-bottom: 0px;
}
/*Custom checkboxes!*/
.checkbox {
height: 1em;
margin: 5px 0px;
position: relative;
}
.checkbox label {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 0.25em;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background: var(--section-border-color);
}
.checkbox input[type=checkbox]:checked + label {
background: var(--title-text-color);
}
.checkbox input {
opacity: 0;
}
.checkbox div {
white-space: pre;
position: relative;
top: -0.1em;
left: 1.1em;
}
/*Custom select box (dropdown)*/
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown select {
border-radius: 0.25em;
padding-left: 0.25em;
width: inherit;
background-color: var(--section-border-color);
color: var(--title-text-color);
border: none;
-moz-appearance: none;
-webkit-appearance:none;
appearance: none;
}
.dropdown select option {
border-radius: 0.25em;
color: var(--title-text-color);
background-color: var(--solid-border-color);
}
.dropdown::after {
content: "\25BC";
font-size: 0.5em;
position: absolute;
pointer-events: none;
color: var(--title-text-color);
right: 0.65em;
top: 0.65em;
}
/*List of all mana symbols and their associated codes*/
#symbolList img {
position: relative;
top: 0.25em;
height: 1.2em;
}
#symbolList div {
float: left;
width: 5.5em;
}
/*Other*/
.title {
text-align: center;
color: var(--title-text-color);
font-family: belerenbsc;
font-size: 60px;
}
.info {
color: var(--dark-text-color);
font-family: belerenbsc;
font-size: 0.75rem;
}
/*Hyperlinks*/
a:link {
color: var(--main-text-color);
background-color: rgba(100, 200, 0, 0.1);
border-radius: 0.25em;
}
a:visited {
color: var(--main-text-color);
}
a:hover {
color: var(--title-text-color);
}
a:active {
color: var(--title-text-color);
}
.column-2 {
margin-bottom: 20px;
}
/*Adjustments For Desktop*/
@media only screen and (orientation: landscape) {
.column-3 {width: 33.33%;}
}
@media only screen and (min-width: 1130px) {
/*The card manipulator menu can be side-by-side with the regular card*/
.column-1:not(.wide) {width: auto;}
.column-2:not(.wide) {
width: calc(100% - 759px);
margin-bottom: 0px;
}
}
@media only screen and (min-width: 1455px) {
/*The card manipulator menu can be side-by-side with the wide card*/
.column-1.wide {width: auto;}
.column-2.wide {
width: calc(100% - 1084px);
margin-bottom: 0px;
}
}
@media only screen and (min-width: 801px) {
html {
background:url(data/background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
* {
font-size: 25px;
cursor: url(images/cursor.png), auto;
}
}
</style>
<script src="data/scripts/loadScript.js"></script>
<script src="data/scripts/loadImage.js"></script>
<script src="data/scripts/loadColors.js"></script>
<script src="data/scripts/mask.js"></script>
<script src="data/scripts/autocrop.js"></script>
<script src="data/scripts/whiteToTransparent.js"></script>
<script src="data/scripts/main.js"></script>
<html>

3
data/borders/defaultBorder.js
View File

@@ -2,8 +2,7 @@
//card size //card size
var cardWidth = 749 var cardWidth = 749
var cardHeight = 1044 var cardHeight = 1044
document.getElementsByClassName("column-1")[0].classList.remove("wide") document.getElementsByClassName("mainGrid")[0].classList.remove("plane")
document.getElementsByClassName("column-2")[0].classList.remove("wide")
//Sets the correct values to anything that may have been changed from an out of the ordinary border //Sets the correct values to anything that may have been changed from an out of the ordinary border
var eighthInfo = false var eighthInfo = false
var m15Info = false var m15Info = false

3
data/borders/plane/border.js
View File

@@ -3,8 +3,7 @@
//Card Size //Card Size
cardWidth = 1074 cardWidth = 1074
cardHeight = 749 cardHeight = 749
document.getElementsByClassName("column-1")[0].classList.add("wide") document.getElementsByClassName("mainGrid")[0].classList.add("plane")
document.getElementsByClassName("column-2")[0].classList.add("wide")
//Card Title //Card Title
var titleFont = cardHeight * 0.0454 + "px belerenb" //34 var titleFont = cardHeight * 0.0454 + "px belerenb" //34
var titleFontSpacing = cardWidth * 0.00014 + "px" //0.15 var titleFontSpacing = cardWidth * 0.00014 + "px" //0.15

16
data/scripts/main.js
View File

@@ -110,7 +110,7 @@ var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("i
//It's easier to generate the mana symbol list via js, so do it here //It's easier to generate the mana symbol list via js, so do it here
var symbolList = "" var symbolList = ""
for (var i = 0; i < manaSymbolCode.length; i++) { for (var i = 0; i < manaSymbolCode.length; i++) {
symbolList += "<div class='column-4' alt='...'>" + manaSymbolCode[i] + "\u2192" + "<img id='" + i + "'></img></div>" symbolList += "<div class='manaSymbol' alt='...'>" + manaSymbolCode[i] + "\u2192" + "<img id='" + i + "'></img></div>"
} }
document.getElementById("symbolList").innerHTML = symbolList document.getElementById("symbolList").innerHTML = symbolList
@@ -813,4 +813,16 @@ function downloadCardImage(linkElement) {
//============================================// //============================================//
// Log it! // // Log it! //
//============================================// //============================================//
console.log("The main.js file has finished loading.") console.log("The main.js file has finished loading.")
//============================================//
// WIP //
//============================================//
function toggleView(targetId, targetClass) {
// console.log(targetId.split(" ")[0])
for (i = 0; i < document.getElementsByClassName(targetClass).length; i++) {
document.getElementsByClassName(targetClass)[i].classList.remove("shown")
}
document.getElementById(targetClass + "-" + targetId).classList.add("shown")
}

BIN
images/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 417 KiB

BIN
images/button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/old.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

472
index.html
View File

@@ -2,28 +2,38 @@
<html> <html>
<head> <head>
<title>Card Conjurer</title> <title>Card Conjurer</title>
<img src="images/title.png" height="auto" style="max-height: 100px;"> <div class="title"><img src="images/title.png"></div>
<!-- Favicon craziness! --> <!-- Favicon craziness! -->
<!-- <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest"> <link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#64ca2f"> --> <link rel="mask-icon" href="safari-pinned-tab.svg" color="#64ca2f">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- <meta name="msapplication-TileColor" content="#00a300"> <meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-config" content="browserconfig.xml"> <meta name="msapplication-config" content="browserconfig.xml">
<meta name="theme-color" content="#64ca2f"> --> <meta name="theme-color" content="#64ca2f">
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<!-- <img src="data/background.png"></img> -->
<body> <body>
<div class="row"> <div class="grid mainGrid">
<div class="column-1"><canvas id="canvas" width="749" height="1044"></canvas></div> <div class="canvasContainer">
<div class="column-2" id="optionsColumn"> <canvas id="canvas" width="749" height="1044"></canvas>
<!--OPTIONS--> </div>
<div class="section"> <div>
<div class="toggler" onclick="toggleSection(this)">Card Border</div> <div class="grid selectionGrid">
<div class="togglee shown"> <div onclick="toggleView('color', 'cmm')">Color</div>
<div onclick="toggleView('advanced', 'cmm')">Advanced</div>
<div onclick="toggleView('general', 'cmm')">General</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('watermark', 'cmm')">Watermark</div>
<div onclick="toggleView('set', 'cmm')">Set</div>
<div onclick="toggleView('download', 'cmm')">Download</div>
</div>
<div class="cardManipulationMenu">
<div class="cmm shown" id="cmm-color">
Border Border
<span class="dropdown"> <span class="dropdown">
<select id="borderSelection" onchange="changeTemplate()"> <select id="borderSelection" onchange="changeTemplate()">
@@ -58,18 +68,8 @@
<span class="dropdown"> <span class="dropdown">
<select id="thirdColorSelection" onchange="updateBorder()"></select> <select id="thirdColorSelection" onchange="updateBorder()"></select>
</span> </span>
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxCreature" />
<label for="checkboxCreature" />
<div>Power/Toughness</div>
</div>
<input id="inputPowerToughness" class="input" value="" type="text"></input>
</div> </div>
</div> <div class="cmm" id="cmm-advanced">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Border (Advanced)</div>
<div class="togglee">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" /> <input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
<label for="checkboxLegendary" /> <label for="checkboxLegendary" />
@@ -144,10 +144,7 @@
</div> </div>
<input id="inputIdentity" type="text" class="input" onchange="updateBorder()"></input> <input id="inputIdentity" type="text" class="input" onchange="updateBorder()"></input>
</div> </div>
</div> <div class="cmm" id="cmm-general">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Name, Mana Cost, Type</div>
<div class="togglee">
Name Name
<input id="inputName" type="text" class="input"></input> <input id="inputName" type="text" class="input"></input>
<br/> <br/>
@@ -156,11 +153,14 @@
<br/> <br/>
Type Type
<input id="inputType" type="text" class="input"></input> <input id="inputType" type="text" class="input"></input>
<div class="checkbox">
<input type="checkbox" id="checkboxCreature" />
<label for="checkboxCreature" />
<div>Power/Toughness</div>
</div>
<input id="inputPowerToughness" class="input" value="" type="text"></input>
</div> </div>
</div> <div class="cmm" id="cmm-text">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Rules Text</div>
<div class="togglee">
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>
@@ -177,10 +177,7 @@
Shift Mana Symbols Down Shift Mana Symbols Down
<input id="inputSymbolDown" type="number" class="input" value="0"></input> <input id="inputSymbolDown" type="number" class="input" value="0"></input>
</div> </div>
</div> <div class="cmm" id="cmm-art">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Card Art</div>
<div class="togglee">
Image Image
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input> <input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input>
<br/> <br/>
@@ -195,10 +192,7 @@
Image Up Image Up
<input id="imageUp" type="number" class="input" value="0" step="1"></input> <input id="imageUp" type="number" class="input" value="0" step="1"></input>
</div> </div>
</div> <div class="cmm" id="cmm-info">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Bottom Information</div>
<div class="togglee">
Other Info Other Info
<input id="inputInfo" value="Not A Real Card" type="text" class="input"></input> <input id="inputInfo" value="Not A Real Card" type="text" class="input"></input>
<br/> <br/>
@@ -223,10 +217,7 @@
<div>Black Bottom Info</div> <div>Black Bottom Info</div>
</div> </div>
</div> </div>
</div> <div class="cmm" id="cmm-set">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Set Symbol and Watermark</div>
<div class="togglee">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSetSymbol" checked="true" /> <input type="checkbox" id="checkboxSetSymbol" checked="true" />
<label for="checkboxSetSymbol" /> <label for="checkboxSetSymbol" />
@@ -245,7 +236,13 @@
<br/> <br/>
Scale Set Symbol Scale Set Symbol
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5"></input> <input id="setSymbolSize" type="number" class="input" value="100" step="0.5"></input>
<br/><br/> </div>
<div class="cmm" id="cmm-download">
Frame Rate
<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"></input>
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div>
<div class="cmm" id="cmm-watermark">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxWatermark" checked="true" /> <input type="checkbox" id="checkboxWatermark" checked="true" />
<label for="checkboxWatermark" /> <label for="checkboxWatermark" />
@@ -261,13 +258,6 @@
<br/> <br/>
<span class="dropdown"> <span class="dropdown">
<select id="watermarkColorSelection"> <select id="watermarkColorSelection">
<!-- <option value="#f3f2ef">White</option>
<option value="#1d7097">Blue</option>
<option value="#31302e">Black</option>
<option value="#bf544c">Red</option>
<option value="#1c6449">Green</option>
<option value="#e3d591">Gold</option>
<option value="#e0e0e0">Artifact/Colorless</option> -->
<option value="#afa360">White</option> <option value="#afa360">White</option>
<option value="#04527c">Blue</option> <option value="#04527c">Blue</option>
<option value="#494949">Black</option> <option value="#494949">Black</option>
@@ -281,7 +271,7 @@
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSecondWatermarkColor" /> <input type="checkbox" id="checkboxSecondWatermarkColor" />
<label for="checkboxSecondWatermarkColor" /> <label for="checkboxSecondWatermarkColor" />
<div>Second Watermark Color</div> <div>Second Color</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select id="secondWatermarkColorSelection"> <select id="secondWatermarkColorSelection">
@@ -298,29 +288,23 @@
<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01"></input> <input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01"></input>
</div> </div>
</div> </div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Download/Options</div>
<div class="togglee">
Frame Rate
<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"></input>
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div>
</div>
<!--END-->
</div> </div>
</div> </div>
<div class="row"> <div class="grid">
<div class="column-4"> <div>
<div class="section"> <div class="grid selectionGrid">
<div class="toggler" onclick="toggleSection(this)">Mana Symbol Codes</div> <div onclick="toggleView('symbolList', 'extras')">Symbols</div>
<div class="togglee shown"> <div onclick="toggleView('codes', 'extras')">Other Codes</div>
Use the following codes to get the respective symbol in the card's mana cost and rules text. In the mana cost, make sure to include spaces in between the codes, and in the rules text include '<' before each code and '>' after. These codes are caps sensative.<br/> <div onclick="toggleView('set', 'extras')">Set Codes</div>
<div id="symbolList" style="overflow: hidden;"></div> <div onclick="toggleView('border', 'extras')">Colors</div>
</div>
</div> </div>
<div class="section"> <div class="extrasMenu">
<div class="toggler" onclick="toggleSection(this)">Other Codes</div> <div class="extras shown" id="extras-symbolList">
<div class="togglee"> <div class="symbolGrid grid" id="symbolList">
loading...
</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 also caps sensative.<br/> Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are also caps sensative.<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/>
@@ -330,38 +314,32 @@
&#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; background-color: var(--main-text-color);"></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> <div class="extras" id="extras-set">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Set Abbreviations</div>
<div class="togglee">
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> 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>
</div> <div class="extras" id="extras-border">
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Choosing Your Border</div>
<div class="togglee">
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 Selects the card's primary color<br/> &#8226 Color &#8594 Primary color<br/>
&#8226 Second Color &#8594 Selects the card's secondary color which only affects the right half of the card. This creates the same effect 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 Selects the card's tertiary color which will affect the entire card, including power and toughness. This is used to create two-colored gold 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. Under the 'Border (Advanced)' tab the checkboxes are fairly straightforward. Try each feature out to see what it does.
</div> </div>
</div> </div>
<div class="section" style="overflow: hidden; border-top: hidden;"> </div>
Check out some samples! <br/> <div class="sampleGrid grid text">
<img id="sampleCardA" class="column-3"></img> Check out some samples<br/>
<img id="sampleCardB" class="column-3"></img> <div class="noBorder">
<img id="sampleCardC" class="column-3"></img> <img id="sampleCardA" class="sampleCard"></img>
<img id="sampleCardB" class="sampleCard"></img>
<img id="sampleCardC" class="sampleCard"></img>
</div> </div>
</div> </div>
</div> </div>
<footer class="row info" style="">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank" class="info">the Github page</a>.</footer>
</body> </body>
<footer class="info">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">the&nbspGithub&nbsppage</a>.</footer>
<!--CSS--> <!--CSS-->
@@ -399,78 +377,116 @@
font-family: mplantini; font-family: mplantini;
src: url("data/fonts/mplantin-i.ttf"); src: url("data/fonts/mplantin-i.ttf");
} }
/*Color Palette*/ /*Color Palette*/
:root { :root {
--title-text-color: rgb(100, 200, 50); /*TITLE*/ /*Green*/
--main-text-color: rgb(150, 150, 150); /*REGULAR*/ /*--color-a: #13c800;
--input-text-color: rgb(100, 200, 50); /*INPUTS*/ --color-b: #13c80080;
--dark-text-color: rgb(96, 96, 96); /*DARK*/ --color-c: #034e10;
--section-background-color: rgba(0, 0, 0, 0.5); /*BACKGROUND*/ --color-d: #013d0b80;
--section-border-color: rgba(128, 255, 128, 0.25); /*BORDER*/ --color-e: #013d0b;*/
--solid-border-color: rgb(39, 71, 39); /*Opaque Border*/ /*Regular*/
--color-a: #073c00;
--color-b: #073c0040;
--color-c: #095700;
--color-d: #0e720040;
--color-e: #0e7200;
} }
/*General style things*/
/*Page-wide styling*/
* { * {
text-align: center;
font-family: belerenb; font-family: belerenb;
font-size: 5vw; font-size: 6vw;
color: var(--main-text-color);
user-select: none; user-select: none;
box-sizing: border-box; color: #dddddd;
} }
html { html {
background-color: rgb(16, 16, 16); /*background: linear-gradient(#252522, #101010) no-repeat center center fixed;*/
background: url("data/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} }
/*Applies to most elements (with rows and columns)*/
.row::after{ /*Grid styling*/
content: ""; .grid {
display: block;
clear: both;
margin-bottom: 5px; margin-bottom: 5px;
display: grid;
grid-gap: 4px;
} }
[class*="column-"] { .mainGrid {
width: 100%; grid-gap: 12px;
float: left;
padding: 5px;
} }
/*Style for sections, togglers, and togglees*/ .selectionGrid {
.section { grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
border: 0.04em solid var(--section-border-color); text-align: center;
background-color: var(--section-background-color);
width: 100%;
} }
.toggler:hover { .grid > div {
color: var(--title-text-color); padding: 8px;
border-radius: 36px;
} }
.togglee { .grid > div:not(.noBorder) {
text-align: left; border: 1px solid var(--color-c);
border-width: 0.04em; background: var(--color-d);
border-color: var(--section-border-color); }
border-style: dashed solid solid solid;
/*Card manipulation menu grid*/
.selectionGrid > div {
font-family: belerenbsc;
cursor: pointer;
}
.selectionGrid > div:nth-child(odd) {
background-color: var(--color-c);
}
.cardManipulationMenu, .extrasMenu {
margin-top: 4px;
padding: 24px;
border-radius: 36px;
border: 1px solid var(--color-c);
background-color: var(--color-b);
}
.cmm, .extras {
display: none; display: none;
padding: 5px;
} }
.shown { .shown {
display: block; display: block;
} }
/*Specific input element styles*/ .sampleCard {
.input {
border-radius: 0.25em;
padding-left: 0.25em;
text-align: left;
border: none;
background-color: var(--section-border-color);
color: var(--input-text-color);
width: 100%; width: 100%;
} }
input[type="color"] {
border-radius: 0.25em; /*Inputs and more*/
border: none; /*dropdown*/
background-color: var(--section-border-color); .dropdown {
padding-top: 0px; position: relative;
padding-bottom: 0px; display: inline-block;
width: 100%;
} }
/*Custom checkboxes!*/ .dropdown select {
border-radius: 0.25em;
padding-left: 0.25em;
width: inherit;
background-color: var(--color-e);
border: none;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance:none;
appearance: none;
}
.dropdown select option {
/*nothing for now :)*/
}
.dropdown::after {
content: "\25BC";
font-size: 0.6em;
position: absolute;
pointer-events: none;
right: 0.6em;
top: 0.6em;
}
/*checkbox*/
.checkbox { .checkbox {
height: 1em; height: 1em;
margin: 5px 0px; margin: 5px 0px;
@@ -484,11 +500,18 @@ input[type="color"] {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
z-index: 1; background: var(--color-d);
background: var(--section-border-color); cursor: pointer;
} }
.checkbox input[type=checkbox]:checked + label { .checkbox input:checked ~ label:after {
background: var(--title-text-color); display: block;
}
.checkbox label:after {
content: "X";
position: absolute;
display: none;
left: 0.2em;
top: -0.05em;
} }
.checkbox input { .checkbox input {
opacity: 0; opacity: 0;
@@ -499,111 +522,90 @@ input[type="color"] {
top: -0.1em; top: -0.1em;
left: 1.1em; left: 1.1em;
} }
/*Custom select box (dropdown)*/ /*other inputs*/
.dropdown { input[type="text"], input[type="number"], textarea, input[type="file"] {
position: relative;
display: inline-block;
width: 100%; width: 100%;
} border: none;
.dropdown select { background: var(--color-e);
border-radius: 0.25em; border-radius: 0.25em;
padding-left: 0.25em; padding-left: 0.25em;
width: inherit; }
background-color: var(--section-border-color); /*color selector*/
color: var(--title-text-color); input[type="color"] {
padding: 0px;
border: none; border: none;
-moz-appearance: none; background: var(--color-d);
-webkit-appearance:none;
appearance: none;
}
.dropdown select option {
border-radius: 0.25em;
color: var(--title-text-color);
background-color: var(--solid-border-color);
}
.dropdown::after {
content: "\25BC";
font-size: 0.5em;
position: absolute;
pointer-events: none;
color: var(--title-text-color);
right: 0.65em;
top: 0.65em;
}
/*List of all mana symbols and their associated codes*/
#symbolList img {
position: relative;
top: 0.25em;
height: 1.2em;
}
#symbolList div {
float: left;
width: 5.5em;
}
/*Other*/
.title {
text-align: center;
color: var(--title-text-color);
font-family: belerenbsc;
font-size: 60px;
}
.info {
color: var(--dark-text-color);
font-family: belerenbsc;
font-size: 0.75rem;
} }
/*Hyperlinks*/ /*Hyperlinks*/
a:link { a:link, a:visited {
color: var(--main-text-color); color: #fff;
background-color: rgba(100, 200, 0, 0.1);
border-radius: 0.25em;
} }
a:visited { a:hover, a:active {
color: var(--main-text-color); color: #999;
}
a:hover {
color: var(--title-text-color);
}
a:active {
color: var(--title-text-color);
}
.column-2 {
margin-bottom: 20px;
}
/*Adjustments For Desktop*/
@media only screen and (orientation: landscape) {
.column-3 {width: 33.33%;}
} }
/*Desktop*/
@media only screen and (min-width: 1130px) { @media only screen and (min-width: 1130px) {
/*The card manipulator menu can be side-by-side with the regular card*/ .mainGrid:not(.plane) {
.column-1:not(.wide) {width: auto;} grid-template-columns: calc(749px + 0.7em) auto;
.column-2:not(.wide) {
width: calc(100% - 759px);
margin-bottom: 0px;
} }
} }
@media only screen and (min-width: 1455px) { @media only screen and (min-width: 1455px) {
/*The card manipulator menu can be side-by-side with the wide card*/ .mainGrid.plane {
.column-1.wide {width: auto;} grid-template-columns: calc(1074px + 0.7em) auto;
.column-2.wide { }
width: calc(100% - 1084px); }
margin-bottom: 0px; @media only screen and (orientation: landscape) {
.sampleCard {
width: 32.8%;
} }
} }
@media only screen and (min-width: 801px) { @media only screen and (min-width: 801px) {
html { html {
background:url(data/background.png) no-repeat center center fixed; /*background*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} }
* { * {
font-size: 25px; font-size: 24px;
cursor: url(images/cursor.png), auto;
} }
} }
/*Text and stuff :)*/
.info, .title {
text-align: center;
font-size: 0.75em;
}
.info > * {
font-size: inherit;
}
/*symbol grid*/
.manaSymbol > img {
position: relative;
top: 0.15em;
height: 1em;
}
.symbolGrid {
margin-top: 8px;
grid-template-columns: repeat(auto-fit, minmax(5.6em, 1fr));
text-align: center;
}
/*Title*/
.title > img {
margin-bottom: 20px;
margin-top: 0px;
max-height: 80px;
width: auto;
}
/*Sitewide text (bottom of the page)*/
.text {
text-align: center;
}
</style> </style>
<script src="data/scripts/loadScript.js"></script> <script src="data/scripts/loadScript.js"></script>
<script src="data/scripts/loadImage.js"></script> <script src="data/scripts/loadImage.js"></script>
<script src="data/scripts/loadColors.js"></script> <script src="data/scripts/loadColors.js"></script>
@@ -612,3 +614,11 @@ a:active {
<script src="data/scripts/whiteToTransparent.js"></script> <script src="data/scripts/whiteToTransparent.js"></script>
<script src="data/scripts/main.js"></script> <script src="data/scripts/main.js"></script>
<html> <html>
<!--
References
<div class="cmm" id="cmm-targetId">
...
</div>
-->