mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
upgrade
This commit is contained in:
Kyle
@@ -44,18 +44,9 @@
|
|||||||
--clear-mid: #fff4;
|
--clear-mid: #fff4;
|
||||||
--clear-dark: #fff6;
|
--clear-dark: #fff6;
|
||||||
}
|
}
|
||||||
footer {
|
|
||||||
background-color: var(--dark-color);
|
|
||||||
padding: 2.5em;
|
/*Background & Footer*/
|
||||||
font: 1.3em gothammedium;
|
|
||||||
color: var(--light-color);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
background-image: url(images/lowpoly.png);
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
html {
|
html {
|
||||||
background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
@@ -66,9 +57,21 @@ html {
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
font-size: 8pt;
|
font-size: 8pt;
|
||||||
}
|
}
|
||||||
.selectable {
|
body {
|
||||||
user-select: all;
|
margin: 0px;
|
||||||
|
background-image: url(images/lowpoly.png);
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
footer {
|
||||||
|
background-color: var(--dark-color);
|
||||||
|
padding: 2.5em;
|
||||||
|
font: 1.3em gothammedium;
|
||||||
|
color: var(--light-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Canvas*/
|
||||||
canvas {
|
canvas {
|
||||||
width: calc(100%);
|
width: calc(100%);
|
||||||
height: auto;
|
height: auto;
|
||||||
@@ -78,6 +81,9 @@ canvas {
|
|||||||
.canvasContainer {
|
.canvasContainer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Grids*/
|
||||||
.mainGrid {
|
.mainGrid {
|
||||||
padding: 0.3em;
|
padding: 0.3em;
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -85,13 +91,36 @@ canvas {
|
|||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
font: 1.6em mplantin;
|
font: 1.6em mplantin;
|
||||||
}
|
}
|
||||||
.imageGrid {
|
.splitGrid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 9em;
|
grid-template-columns: 50% 50%;
|
||||||
min-height: 12.5em;
|
|
||||||
}
|
}
|
||||||
.imgPreview {
|
.frameGrid {
|
||||||
width: 100%;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(4em, 1fr));
|
||||||
|
grid-auto-rows: min-content;
|
||||||
|
}
|
||||||
|
.footerGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-gap: 2em;
|
||||||
|
}
|
||||||
|
.autoGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||||
|
grid-auto-rows: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Misc elements*/
|
||||||
|
.download {
|
||||||
|
text-align: center;
|
||||||
|
font: 1.5em belerenbsc;
|
||||||
|
}
|
||||||
|
.pageTitle {
|
||||||
|
font: 5em belerenbsc;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 0.3em;
|
||||||
}
|
}
|
||||||
.bar {
|
.bar {
|
||||||
background-image: url(../images/manaSymbols/63.png);
|
background-image: url(../images/manaSymbols/63.png);
|
||||||
@@ -101,78 +130,55 @@ canvas {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
.cardMenu > div > div:nth-child(1) {
|
.imgPreview {
|
||||||
/* border: 1px solid blue;*/
|
|
||||||
/* text-align: center;*/
|
|
||||||
/* font: 1.5em belerenbsc;*/
|
|
||||||
}
|
|
||||||
.twoGrid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 50% auto;
|
|
||||||
}
|
|
||||||
.input, .textarea, .button, .select {
|
|
||||||
font: 1em mplantin;
|
|
||||||
background-color: var(--light-color);
|
|
||||||
border: 1px solid #aaae;
|
|
||||||
border-radius: 0.2em;
|
|
||||||
padding: 0px 0.2em;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.textarea {
|
|
||||||
min-height: 6em;
|
|
||||||
max-height: 18em;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
.select {
|
|
||||||
background: #fafafa url(../images/manaSymbols/49.png) no-repeat calc(100% - 0.1em) 50%;
|
|
||||||
background-size: 1em 1em;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
.autoGrid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
|
||||||
grid-auto-rows: min-content;
|
|
||||||
}
|
|
||||||
.input.file {
|
|
||||||
padding: 0px;
|
|
||||||
height: 1.26em;
|
|
||||||
}
|
|
||||||
.tooltip {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.tooltip .tooltiptext {
|
|
||||||
visibility: hidden;
|
|
||||||
background-color: var(--dark-color);
|
|
||||||
color: var(--light-color);
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
top: calc(100% + 5px);
|
|
||||||
left: 0px;
|
|
||||||
max-width: calc(100% - 10px);
|
|
||||||
width: auto;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.5s;
|
|
||||||
}
|
|
||||||
.tooltip .tooltiptext::after {
|
|
||||||
content: " ";
|
|
||||||
position: absolute;
|
|
||||||
bottom: 100%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -5px;
|
|
||||||
border-width: 5px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent transparent var(--dark-color) transparent;
|
|
||||||
}
|
|
||||||
.tooltip .tooltiptext:hover {
|
|
||||||
/*visibility: hidden;*/
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
div.tooltip > * {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.layer {
|
||||||
|
padding: 2em 2em;
|
||||||
|
color: black;
|
||||||
|
font-size: 2em;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3em;
|
||||||
|
background-color: var(--light-color);
|
||||||
|
background-image: url(images/layerBackground.png);
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Various text modifications*/
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font: 1.5em belerenbsc;
|
||||||
|
}
|
||||||
|
.truncate {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-indent: 0em;
|
||||||
|
}
|
||||||
|
.paragraph {
|
||||||
|
font: 1em mplantin;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.indent {
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*General modifications*/
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.selectable {
|
||||||
|
user-select: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Hyperlinks*/
|
||||||
a {
|
a {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
@@ -185,63 +191,10 @@ footer a {
|
|||||||
footer a:hover {
|
footer a:hover {
|
||||||
color: var(--shifting-color-1-light);
|
color: var(--shifting-color-1-light);
|
||||||
}
|
}
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.footerGrid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto;
|
|
||||||
grid-gap: 2em;
|
|
||||||
}
|
|
||||||
.layer {
|
|
||||||
padding: 2em 2em;
|
|
||||||
color: black;
|
|
||||||
font-size: 2em;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 3em;
|
|
||||||
}
|
|
||||||
.layer { /*:nth-child(even)*/
|
|
||||||
background-color: var(--light-color);
|
|
||||||
background-image: url(images/layerBackground.png);
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
text-align: center;
|
|
||||||
font: 1.5em belerenbsc;
|
|
||||||
}
|
|
||||||
.pageTitle {
|
|
||||||
font: 5em belerenbsc;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 0.3em;
|
|
||||||
}
|
|
||||||
.paragraph {
|
|
||||||
font: 1em mplantin;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.indent {
|
|
||||||
text-indent: 2em;
|
|
||||||
}
|
|
||||||
.leftMargin {
|
|
||||||
margin-left: 2em;
|
|
||||||
}
|
|
||||||
.donate > div:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.donate > div {
|
|
||||||
background-color: var(--clear-light);
|
|
||||||
border-radius: 2em;
|
|
||||||
font: 2em belerenbsc;
|
|
||||||
}
|
|
||||||
.donate > div > img {
|
|
||||||
height: 1em;
|
|
||||||
position: relative;
|
|
||||||
top: 0.15em;
|
|
||||||
left: 0.15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Controls the area taken by the canvas*/
|
/*Controls the area taken by the canvas*/
|
||||||
@media screen and (min-width: 888pt) {
|
@media screen and (min-width: 905pt) {
|
||||||
/*Makes room for the canvas and controls to be side by side*/
|
/*Makes room for the canvas and controls to be side by side*/
|
||||||
.mainGrid {
|
.mainGrid {
|
||||||
padding: 1.5em;
|
padding: 1.5em;
|
||||||
@@ -262,7 +215,7 @@ footer a:hover {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*These control tooltips for mobile devices vs. desktops/laptops*/
|
/*These control tooltips for mobile devices vs. desktops/laptops*/
|
||||||
@media screen and (min-width: 1024px) {
|
/*@media screen and (min-width: 1024px) {
|
||||||
.tooltip:hover .tooltiptext {
|
.tooltip:hover .tooltiptext {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@@ -273,8 +226,8 @@ footer a:hover {
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}*/
|
||||||
/*The footer can now fit horizontally!*/
|
/*Allows the footer to be displayed horizontally on Desktop*/
|
||||||
@media screen and (min-width: 375pt) {
|
@media screen and (min-width: 375pt) {
|
||||||
.footerGrid {
|
.footerGrid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -284,106 +237,131 @@ footer a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*WIP*/
|
/*WIP (or I'm too lazy to sort these)*/
|
||||||
.tab {
|
.tabMenu {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
||||||
grid-auto-rows: min-content;
|
grid-auto-rows: min-content;
|
||||||
}
|
}
|
||||||
.tab.tabSelect {
|
.tabOption, .textTabButton {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
font: 1.5em belerenbsc;
|
||||||
|
text-align: center;
|
||||||
|
background-color: var(--clear-light);
|
||||||
|
border: 1px solid var(--light-color);
|
||||||
|
transition: 0.5s;
|
||||||
}
|
}
|
||||||
.tabButton.tabSelectButton {
|
.tabOption:hover, .textTabButton:hover {
|
||||||
font: 1em belerenb;
|
background-color: var(--clear-mid);
|
||||||
|
transition: 0s;
|
||||||
}
|
}
|
||||||
.tabButton {
|
.tabOption.tabOptionSelected, .textTabButton.activeTextTab {
|
||||||
text-align: center;
|
background-color: var(--clear-dark);
|
||||||
background: var(--clear-light);
|
|
||||||
border: 1px solid var(--light-color);
|
|
||||||
font: 1.2em belerenbsc;
|
|
||||||
padding: 0.1em 0em;
|
|
||||||
transition: 0.33s;
|
|
||||||
}
|
}
|
||||||
.tabButton:hover {
|
.tabContent:not(.tabVisible) {
|
||||||
background-color: var(--clear-mid);
|
display: none;
|
||||||
transition: 0s;
|
|
||||||
}
|
|
||||||
.tabButton.activeTab {
|
|
||||||
background: var(--clear-dark);
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-color: var(--shifting-color-1-light)
|
|
||||||
}
|
|
||||||
.tabContent {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.tabContent.displayed {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.download {
|
.cardMasterElement {
|
||||||
text-align: center;
|
font: 1em belerenbsc;
|
||||||
font: 1.5em belerenbsc;
|
background-color: var(--clear-light);
|
||||||
|
border: 1px solid var(--light-color);
|
||||||
|
border-radius: 0.25em;
|
||||||
|
padding: 0.5em;
|
||||||
|
margin-top: 0.25em;
|
||||||
}
|
}
|
||||||
.truncate {
|
.cardMasterElement img {
|
||||||
overflow: hidden;
|
max-height: 2em;
|
||||||
white-space: nowrap;
|
max-width: 2em;
|
||||||
text-overflow: ellipsis;
|
position: absolute;
|
||||||
text-indent: 0em;
|
transform: translate(1em, -0.35em);
|
||||||
}
|
}
|
||||||
.tab, button, select, option {
|
.cardmasterElement img.cardMasterElementMaskImage {
|
||||||
cursor: pointer;
|
transform: translate(3.5em, -0.35em);
|
||||||
}
|
}
|
||||||
/*Custom Checkboxes*/
|
.cardMasterElementMoving {
|
||||||
.realCheckboxContainer {
|
background-color: var(--clear-dark);
|
||||||
margin-top: 0.45em
|
|
||||||
}
|
}
|
||||||
.checkboxContainer {
|
.closeCardMasterElement {
|
||||||
position: relative;
|
cursor: pointer;
|
||||||
padding-left: 1.5em;
|
position: absolute;
|
||||||
padding-top: 0.25em;
|
/*top: 50%;*/
|
||||||
cursor: pointer;
|
left: 96%;
|
||||||
-webkit-user-select: none;
|
/*padding: 12px 16px;*/
|
||||||
-moz-user-select: none;
|
/*transform: translate(0%, -50%);*/
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
.checkboxContainer input {
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
height: 0;
|
#framePicker, #maskPicker {
|
||||||
width: 0;
|
max-height: 260pt;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
border: 1px solid var(--light-color);
|
||||||
}
|
}
|
||||||
.checkmark {
|
.frameOption {
|
||||||
position: absolute;
|
height: 4em;
|
||||||
top: 0;
|
text-align: center;
|
||||||
left: 0;
|
width: 100%;
|
||||||
height: 1.2em;
|
|
||||||
width: 1.2em;
|
|
||||||
transition: 0.33s;
|
|
||||||
background-color: var(--clear-light);
|
|
||||||
border: 1px solid var(--light-color)
|
|
||||||
}
|
}
|
||||||
.checkboxContainer:hover input ~ .checkmark {
|
.frameOption img {
|
||||||
background-color: var(--clear-dark);
|
max-width: 4em;
|
||||||
|
max-height: 4em;
|
||||||
}
|
}
|
||||||
.checkboxContainer input:checked ~ .checkmark {
|
.maskOption img {
|
||||||
background-color: var(--dark-color);
|
max-width: 2em;
|
||||||
|
max-height: 2em;
|
||||||
}
|
}
|
||||||
.checkmark:after {
|
.frameOption.frameOptionSelected, .maskOption.maskOptionSelected {
|
||||||
content: "X";
|
background-color: var(--clear-dark);
|
||||||
font: 1.2em gothammedium;
|
|
||||||
color: white;
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
transition: 0.33s;
|
|
||||||
}
|
}
|
||||||
.checkboxContainer input:checked ~ .checkmark:after {
|
.maskOption, .frameOption {
|
||||||
opacity: 1;
|
background-color: var(--clear-light);
|
||||||
|
border: 1px solid var(--light-color);
|
||||||
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
.checkboxContainer .checkmark:after {
|
.maskOption {
|
||||||
left: 0.15em;
|
margin-left: 0.5em;
|
||||||
top: -0.1em;
|
padding: 0.125em;
|
||||||
|
width: calc(100% - 1.4em);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 8em;
|
||||||
|
max-height: 24em;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
.textTabButton {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.textTab {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||||
|
grid-auto-rows: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input, .textarea, .button, .select {
|
||||||
|
font: 1em mplantin;
|
||||||
|
background-color: var(--light-color);
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
padding: 0px 0.2em;
|
||||||
|
outline: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.inputOpacity {
|
||||||
|
font: 1em mplantin;
|
||||||
|
background-color: var(--light-color);
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
padding: 0px 0.2em;
|
||||||
|
outline: none;
|
||||||
|
width: 2.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#textCodeTutorial {
|
#textCodeTutorial {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 6.5em auto;
|
grid-template-columns: 6.5em auto;
|
||||||
@@ -398,3 +376,6 @@ footer a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
input[type="checkbox"], .frameOption, .maskOption, .button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
164
index.html
164
index.html
@@ -14,95 +14,81 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mainGrid">
|
<div class="mainGrid">
|
||||||
<div class="canvasContainer">
|
<div class="canvasContainer">
|
||||||
<canvas id="mainCanvas" class="canvas"></canvas>
|
<canvas id="displayCanvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="cardMenu">
|
<div class="cardMenu">
|
||||||
<div class="tab">
|
<!-- Card editor tabs begin here! -->
|
||||||
<div class="tabButton editor activeTab" onclick="tabFunction(event, `editor`, `optionFrame`)">Frame</div>
|
<div class="tabMenu">
|
||||||
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionText`)">Text</div>
|
<div class="tabOption mainEditor tabOptionSelected" onclick="toggleTabs(event, 'frame', 'mainEditor')">Frame</div>
|
||||||
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionArt`)">Art</div>
|
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'text', 'mainEditor')">Text</div>
|
||||||
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionInfo`)">Collector</div>
|
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'art', 'mainEditor')">Art</div>
|
||||||
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionSet`)">Set</div>
|
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'collector', 'mainEditor')">Collector</div>
|
||||||
<div class="tabButton editor" onclick="tabFunction(event, `editor`, `optionWatermark`)">Watermark</div>
|
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'set', 'mainEditor')">Set Symbol</div>
|
||||||
|
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'watermark', 'mainEditor')">Watermark</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bar"></div>
|
<div class="tabContent mainEditor tabVisible" id="frame">
|
||||||
<div class="tabContent editor displayed" id="optionFrame">
|
<div class="splitGrid">
|
||||||
Select the part of the card frame:<br>
|
<div id="framePicker" class="frameGrid"></div>
|
||||||
<div class="tab tabSelect" id="frameType"></div>
|
<div id="maskPicker"></div>
|
||||||
<div class="realCheckboxContainer">
|
</div>
|
||||||
<label class="checkboxContainer">
|
<div class="splitGrid">
|
||||||
Right Half
|
<button onclick="addFrameToCardMaster()" class="button">Add</button>
|
||||||
<input type="checkbox" id="checkboxSecondary">
|
<button onclick="addFrameToCardMaster(' - Right')" class="button">Add To Right Half</button>
|
||||||
<span class="checkmark"></span>
|
</div>
|
||||||
</label>
|
<div id="selectedFramePreview">No frame selected</div>
|
||||||
</div>
|
<div id="cardMaster"></div>
|
||||||
Select the color:<br>
|
</div>
|
||||||
<div class="tab tabSelect" id="tabSelectColor"></div><br>
|
<div class="tabContent mainEditor" id="text">
|
||||||
<div class="imageGrid">
|
<div id="inputWhichTextTabs" class="textTab"></div>
|
||||||
<div class="autoGrid">
|
<textarea class="textarea" id="inputText" placeholder="" oninput="updateText()"></textarea>
|
||||||
<button class="button tooltip" onclick="userEnterImage()">Enter<span class="tooltiptext">Add the selected image to the card</span></button>
|
<input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="cardImageUpdated()" value="">
|
||||||
<button class="button tooltip" onclick="userRemoveImage()">Remove<span class="tooltiptext">Remove the select image type from the card</span></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="tooltip"><img id="imgPreview" class="imgPreview"><span class="tooltiptext">Preview of the selected image</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="autoGrid">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div class="tabContent editor" id="optionText">
|
|
||||||
<div id="inputWhichTextTabs" class="tab"></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="bar"></div>
|
<div class="bar"></div>
|
||||||
<div class="title">How To Use Text Codes</div>
|
<div class="title">How To Use Text Codes</div>
|
||||||
<div class="paragraph indent">
|
<div class="paragraph indent">
|
||||||
Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do:
|
Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do:
|
||||||
</div>
|
</div>
|
||||||
<div id="textCodeTutorial"></div>
|
<div id="textCodeTutorial"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tabContent editor" id="optionArt">
|
<div class="tabContent mainEditor" id="art">
|
||||||
<div class="autoGrid">
|
<div class="splitGrid">
|
||||||
<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>
|
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload">
|
||||||
<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value"><span class="tooltiptext">Enter a URL for the card art</span></div>
|
<input type="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
|
||||||
<div class="tooltip"><input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name"><span class="tooltiptext">Enter a card name to use its art</span></div>
|
<input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name">
|
||||||
<div class="tooltip"><input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name"><span class="tooltiptext">Select which art to use (from the entered card name)</span></div>
|
<input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div style="text-align: center; margin: 0.18em 0px">Placement & Zoom:</div>
|
<div style="text-align: center; margin: 0.18em 0px">X, Y, & Zoom:</div>
|
||||||
<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtX" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art to the right</span></div>
|
<input type="number" class="input number" value="0" id="inputCardArtX" oninput="cardImageUpdated()">
|
||||||
<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtY" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art down</span></div>
|
<input type="number" class="input number" value="0" id="inputCardArtY" oninput="cardImageUpdated()">
|
||||||
<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>
|
<input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardImageUpdated()">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tabContent editor" id="optionInfo">
|
<div class="tabContent mainEditor" id="collector">
|
||||||
<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>
|
<input type="text" class="input text" placeholder="Number" id="inputInfoNumber" oninput="updateBottomInfoCanvas()" value="">
|
||||||
<div class="tooltip"><input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P"><span class="tooltiptext">Rarity</span></div>
|
<input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P">
|
||||||
<div class="tooltip"><input type="text" class="input text" placeholder="Set" id="inputInfoSet" oninput="updateBottomInfoCanvas()" value="MTG"><span class="tooltiptext">Set Code</span></div>
|
<input type="text" class="input text" placeholder="Set" id="inputInfoSet" oninput="updateBottomInfoCanvas()" value="MTG">
|
||||||
<div class="tooltip"><input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN"><span class="tooltiptext">Language</span></div>
|
<input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN">
|
||||||
<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>
|
<input type="text" class="input text" placeholder="Artist's Name" id="inputInfoArtist" oninput="updateBottomInfoCanvas()" value="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tabContent editor" id="optionSet">
|
<div class="tabContent mainEditor" id="set">
|
||||||
<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>
|
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload">
|
||||||
<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>
|
<input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)">
|
||||||
<div class="tooltip"><input type="text" class="input text" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)"><span class="tooltiptext">Use a set code<br>(2-3 letters, as seen on the bottom of cards)</span></div>
|
<input type="text" class="input text" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)">
|
||||||
<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>
|
<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)">
|
||||||
<div class="tooltip"><button class="button" onclick="randomSet()">Random</button><span class="tooltiptext">Use a random set symbol and rarity</span></div>
|
<button class="button" onclick="randomSet()">Random</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tabContent editor" id="optionWatermark">
|
<div class="tabContent mainEditor" id="watermark">
|
||||||
<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>
|
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload">
|
||||||
<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>
|
<input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)">
|
||||||
<div class="tooltip"><input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')"><span class="tooltiptext">Use a set code<br>(2-3 letters, as seen on the bottom of cards)</span></div>
|
<input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')">
|
||||||
<div class="tooltip"><select class="select" id="inputWatermarkPrimary" onchange="updateWatermarkCanvas()">
|
<select class="select" id="inputWatermarkPrimary" onchange="updateWatermark()">
|
||||||
<option value="none">None</option>
|
<option value="none">None</option>
|
||||||
<option value="default">Default</option>
|
<option value="default">Default</option>
|
||||||
<option value="#ccc8b1" selected="selected">White</option>
|
<option value="#ccc8b1" selected="selected">White</option>
|
||||||
@@ -112,8 +98,8 @@
|
|||||||
<option value="#b9c8b5">Green</option>
|
<option value="#b9c8b5">Green</option>
|
||||||
<option value="#e4d49b">Gold</option>
|
<option value="#e4d49b">Gold</option>
|
||||||
<option value="#cfc8be">Artifact/Colorless</option>
|
<option value="#cfc8be">Artifact/Colorless</option>
|
||||||
</select><span class="tooltiptext">Select the watermark color</span></div>
|
</select>
|
||||||
<div class="tooltip"><select class="select" id="inputWatermarkSecondary" onchange="updateWatermarkCanvas()">
|
<select class="select" id="inputWatermarkSecondary" onchange="updateWatermark()">
|
||||||
<option value="none">None</option>
|
<option value="none">None</option>
|
||||||
<option value="default">Default</option>
|
<option value="default">Default</option>
|
||||||
<option value="#ccc8b1">White</option>
|
<option value="#ccc8b1">White</option>
|
||||||
@@ -123,9 +109,10 @@
|
|||||||
<option value="#b9c8b5">Green</option>
|
<option value="#b9c8b5">Green</option>
|
||||||
<option value="#e4d49b">Gold</option>
|
<option value="#e4d49b">Gold</option>
|
||||||
<option value="#cfc8be">Artifact/Colorless</option>
|
<option value="#cfc8be">Artifact/Colorless</option>
|
||||||
</select><span class="tooltiptext">Select the secondary watermark color</span></div>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Card editor tabs end here! -->
|
||||||
<div class="bar"></div>
|
<div class="bar"></div>
|
||||||
<div>
|
<div>
|
||||||
<div class="download">
|
<div class="download">
|
||||||
@@ -147,23 +134,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="layer">
|
<div class="layer">
|
||||||
<div class="title">Want More Customization?</div>
|
<div class="title">Want More Customization?</div>
|
||||||
<div class="paragraph indent">
|
<!-- <div class="paragraph indent">
|
||||||
If you'd like to try out some more frames, scroll to the bottom of this page and check the box next to "Advanced Borders" - CardConjurer.com will remember this setting, so you only need to do this once per device.
|
If you'd like to try out some more frames, scroll to the bottom of this page and check the box next to "Advanced Borders" - CardConjurer.com will remember this setting, so you only need to do this once per device.
|
||||||
</div>
|
</div> -->
|
||||||
<div class="paragraph indent">
|
<div class="paragraph indent">
|
||||||
This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, <a href="old/index.html">click here</a>.
|
This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, <a href="old/index.html">click here</a>.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="layer">-->
|
|
||||||
<!-- <div class="title">How You Can Help</div>-->
|
|
||||||
<!-- <div class="paragraph indent">-->
|
|
||||||
<!-- I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by using one of the following referral links:-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div class="autoGrid donate">-->
|
|
||||||
<!-- <div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:#3d213a;">PucaTrade<img src="data/site/icons/pucatrade.png"></div>-->
|
|
||||||
<!-- <div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:#ffffff;">Massdrop<img src="data/site/icons/massdrop.png"></div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<div class="layer">
|
<div class="layer">
|
||||||
<div class="title">Have Any Questions?</div>
|
<div class="title">Have Any Questions?</div>
|
||||||
<div class="paragraph indent">
|
<div class="paragraph indent">
|
||||||
@@ -176,8 +153,6 @@
|
|||||||
<div class="footerGrid">
|
<div class="footerGrid">
|
||||||
<div>
|
<div>
|
||||||
Card Conjurer By Kyle Burton<br>
|
Card Conjurer By Kyle Burton<br>
|
||||||
<input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips<br>
|
|
||||||
<input type="checkbox" onchange="advancedBordersClicked()" id="checkboxAdvanced"> Advanced Borders<br>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
Navigation:<br>
|
Navigation:<br>
|
||||||
@@ -191,7 +166,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<script src="data/scripts/colors.js"></script>
|
<script async src="data/scripts/sortable.js"></script>
|
||||||
<script src="data/site/main.js"></script>
|
<script async src="data/scripts/setCodeList.js"></script>
|
||||||
<script src="data/scripts/setCodeList.js"></script>
|
<script defer src="data/scripts/main.js"></script>
|
||||||
|
<script defer src="data/scripts/colors.js"></script>
|
||||||
<html>
|
<html>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
197
old/3.0/index.html
Normal file
197
old/3.0/index.html
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
<!DOCTYPE html5>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Card Conjurer</title>
|
||||||
|
<!-- Other things -->
|
||||||
|
<link rel="stylesheet" href="data/site/styles.css">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="mainDiv">
|
||||||
|
<div class="pageTitle">
|
||||||
|
Card Conjurer
|
||||||
|
</div>
|
||||||
|
<div class="mainGrid">
|
||||||
|
<div class="canvasContainer">
|
||||||
|
<canvas id="mainCanvas" class="canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="cardMenu">
|
||||||
|
<div class="tab">
|
||||||
|
<div class="tabButton editor activeTab" onclick="tabFunction(event, `editor`, `optionFrame`)">Frame</div>
|
||||||
|
<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 class="bar"></div>
|
||||||
|
<div class="tabContent editor displayed" id="optionFrame">
|
||||||
|
Select the part of the card frame:<br>
|
||||||
|
<div class="tab tabSelect" id="frameType"></div>
|
||||||
|
<div class="realCheckboxContainer">
|
||||||
|
<label class="checkboxContainer">
|
||||||
|
Right Half
|
||||||
|
<input type="checkbox" id="checkboxSecondary">
|
||||||
|
<span class="checkmark"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
Select the color:<br>
|
||||||
|
<div class="tab tabSelect" id="tabSelectColor"></div><br>
|
||||||
|
<div class="imageGrid">
|
||||||
|
<div class="autoGrid">
|
||||||
|
<button class="button tooltip" onclick="userEnterImage()">Enter<span class="tooltiptext">Add the selected image to the card</span></button>
|
||||||
|
<button class="button tooltip" onclick="userRemoveImage()">Remove<span class="tooltiptext">Remove the select image type from the card</span></button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="tooltip"><img id="imgPreview" class="imgPreview"><span class="tooltiptext">Preview of the selected image</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="autoGrid">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="tabContent editor" id="optionText">
|
||||||
|
<div id="inputWhichTextTabs" class="tab"></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="bar"></div>
|
||||||
|
<div class="title">How To Use Text Codes</div>
|
||||||
|
<div class="paragraph indent">
|
||||||
|
Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do:
|
||||||
|
</div>
|
||||||
|
<div id="textCodeTutorial"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tabContent editor" id="optionArt">
|
||||||
|
<div class="autoGrid">
|
||||||
|
<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="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value"><span class="tooltiptext">Enter a URL for the card art</span></div>
|
||||||
|
<div class="tooltip"><input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name"><span class="tooltiptext">Enter a card name to use its art</span></div>
|
||||||
|
<div class="tooltip"><input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name"><span class="tooltiptext">Select which art to use (from the entered card name)</span></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="text-align: center; margin: 0.18em 0px">Placement & Zoom:</div>
|
||||||
|
<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtX" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art to the right</span></div>
|
||||||
|
<div class="tooltip"><input type="number" class="input number" value="0" id="inputCardArtY" oninput="updateCardCanvas()"><span class="tooltiptext">Shift art down</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 class="tabContent editor" id="optionInfo">
|
||||||
|
<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="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P"><span class="tooltiptext">Rarity</span></div>
|
||||||
|
<div class="tooltip"><input type="text" class="input text" placeholder="Set" id="inputInfoSet" oninput="updateBottomInfoCanvas()" value="MTG"><span class="tooltiptext">Set Code</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>
|
||||||
|
</div>
|
||||||
|
<div class="tabContent editor" id="optionSet">
|
||||||
|
<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="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" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)"><span class="tooltiptext">Use a set code<br>(2-3 letters, as seen on the bottom of cards)</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>
|
||||||
|
</div>
|
||||||
|
<div class="tabContent editor" id="optionWatermark">
|
||||||
|
<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="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 Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')"><span class="tooltiptext">Use a set code<br>(2-3 letters, as seen on the bottom of cards)</span></div>
|
||||||
|
<div class="tooltip"><select class="select" id="inputWatermarkPrimary" onchange="updateWatermarkCanvas()">
|
||||||
|
<option value="none">None</option>
|
||||||
|
<option value="default">Default</option>
|
||||||
|
<option value="#ccc8b1" selected="selected">White</option>
|
||||||
|
<option value="#b0c3d5">Blue</option>
|
||||||
|
<option value="#b3b3b3">Black</option>
|
||||||
|
<option value="#ddac9b">Red</option>
|
||||||
|
<option value="#b9c8b5">Green</option>
|
||||||
|
<option value="#e4d49b">Gold</option>
|
||||||
|
<option value="#cfc8be">Artifact/Colorless</option>
|
||||||
|
</select><span class="tooltiptext">Select the watermark color</span></div>
|
||||||
|
<div class="tooltip"><select class="select" id="inputWatermarkSecondary" onchange="updateWatermarkCanvas()">
|
||||||
|
<option value="none">None</option>
|
||||||
|
<option value="default">Default</option>
|
||||||
|
<option value="#ccc8b1">White</option>
|
||||||
|
<option value="#b0c3d5">Blue</option>
|
||||||
|
<option value="#b3b3b3">Black</option>
|
||||||
|
<option value="#ddac9b">Red</option>
|
||||||
|
<option value="#b9c8b5">Green</option>
|
||||||
|
<option value="#e4d49b">Gold</option>
|
||||||
|
<option value="#cfc8be">Artifact/Colorless</option>
|
||||||
|
</select><span class="tooltiptext">Select the secondary watermark color</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div>
|
||||||
|
<div class="download">
|
||||||
|
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden"></div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="title">Welcome to Card Conjurer!</div>
|
||||||
|
<div class="paragraph indent">Card Conjurer is a free program that helps you create custom Magic: The Gathering cards. There are already plenty of custom card makers out there, but what sets Card Conjurer apart from the rest is its live-edit capabilities. You can immediatly see the effects of any change you make, which makes card customization easier and overall a better experience.</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="title">About Me</div>
|
||||||
|
<div class="paragraph indent">
|
||||||
|
Hi! 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 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, and then in April of 2019 I bought the domain <a href="#" onclick="alert('You\'re already there, silly!')">cardconjurer.com</a>.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="title">Want More Customization?</div>
|
||||||
|
<div class="paragraph indent">
|
||||||
|
If you'd like to try out some more frames, scroll to the bottom of this page and check the box next to "Advanced Borders" - CardConjurer.com will remember this setting, so you only need to do this once per device.
|
||||||
|
</div>
|
||||||
|
<div class="paragraph indent">
|
||||||
|
This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, <a href="old/index.html">click here</a>.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="layer">-->
|
||||||
|
<!-- <div class="title">How You Can Help</div>-->
|
||||||
|
<!-- <div class="paragraph indent">-->
|
||||||
|
<!-- I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by using one of the following referral links:-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="autoGrid donate">-->
|
||||||
|
<!-- <div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:#3d213a;">PucaTrade<img src="data/site/icons/pucatrade.png"></div>-->
|
||||||
|
<!-- <div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:#ffffff;">Massdrop<img src="data/site/icons/massdrop.png"></div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="layer">
|
||||||
|
<div class="title">Have Any Questions?</div>
|
||||||
|
<div class="paragraph indent">
|
||||||
|
If you have any questions please don't hesitate to email me at: <div class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></div>Even if you made a cool card and want to share, I'd love to see it!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<div class="footerGrid">
|
||||||
|
<div>
|
||||||
|
Card Conjurer By Kyle Burton<br>
|
||||||
|
<input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips<br>
|
||||||
|
<input type="checkbox" onchange="advancedBordersClicked()" id="checkboxAdvanced"> Advanced Borders<br>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Navigation:<br>
|
||||||
|
<a href="index.html">Card Creator</a><br>
|
||||||
|
<a href="life.html">Life Counter</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Legal:<br>
|
||||||
|
<a href="disclaimer.html">Disclaimer</a><br>
|
||||||
|
<a href="termsOfUse.html">Terms of Use</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="data/scripts/colors.js"></script>
|
||||||
|
<script src="data/site/main.js"></script>
|
||||||
|
<script src="data/scripts/setCodeList.js"></script>
|
||||||
|
<html>
|
||||||
@@ -44,9 +44,18 @@
|
|||||||
--clear-mid: #fff4;
|
--clear-mid: #fff4;
|
||||||
--clear-dark: #fff6;
|
--clear-dark: #fff6;
|
||||||
}
|
}
|
||||||
|
footer {
|
||||||
|
background-color: var(--dark-color);
|
||||||
/*Background & Footer*/
|
padding: 2.5em;
|
||||||
|
font: 1.3em gothammedium;
|
||||||
|
color: var(--light-color);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
background-image: url(images/lowpoly.png);
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
html {
|
html {
|
||||||
background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
@@ -57,21 +66,9 @@ html {
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
font-size: 8pt;
|
font-size: 8pt;
|
||||||
}
|
}
|
||||||
body {
|
.selectable {
|
||||||
margin: 0px;
|
user-select: all;
|
||||||
background-image: url(images/lowpoly.png);
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
}
|
||||||
footer {
|
|
||||||
background-color: var(--dark-color);
|
|
||||||
padding: 2.5em;
|
|
||||||
font: 1.3em gothammedium;
|
|
||||||
color: var(--light-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*Canvas*/
|
|
||||||
canvas {
|
canvas {
|
||||||
width: calc(100%);
|
width: calc(100%);
|
||||||
height: auto;
|
height: auto;
|
||||||
@@ -81,9 +78,6 @@ canvas {
|
|||||||
.canvasContainer {
|
.canvasContainer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*Grids*/
|
|
||||||
.mainGrid {
|
.mainGrid {
|
||||||
padding: 0.3em;
|
padding: 0.3em;
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -91,36 +85,13 @@ canvas {
|
|||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
font: 1.6em mplantin;
|
font: 1.6em mplantin;
|
||||||
}
|
}
|
||||||
.splitGrid {
|
.imageGrid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: auto 9em;
|
||||||
|
min-height: 12.5em;
|
||||||
}
|
}
|
||||||
.frameGrid {
|
.imgPreview {
|
||||||
display: grid;
|
width: 100%;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(4em, 1fr));
|
|
||||||
grid-auto-rows: min-content;
|
|
||||||
}
|
|
||||||
.footerGrid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto;
|
|
||||||
grid-gap: 2em;
|
|
||||||
}
|
|
||||||
.autoGrid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
|
||||||
grid-auto-rows: min-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*Misc elements*/
|
|
||||||
.download {
|
|
||||||
text-align: center;
|
|
||||||
font: 1.5em belerenbsc;
|
|
||||||
}
|
|
||||||
.pageTitle {
|
|
||||||
font: 5em belerenbsc;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 0.3em;
|
|
||||||
}
|
}
|
||||||
.bar {
|
.bar {
|
||||||
background-image: url(../images/manaSymbols/63.png);
|
background-image: url(../images/manaSymbols/63.png);
|
||||||
@@ -130,55 +101,78 @@ canvas {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
.imgPreview {
|
.cardMenu > div > div:nth-child(1) {
|
||||||
|
/* border: 1px solid blue;*/
|
||||||
|
/* text-align: center;*/
|
||||||
|
/* font: 1.5em belerenbsc;*/
|
||||||
|
}
|
||||||
|
.twoGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 50% auto;
|
||||||
|
}
|
||||||
|
.input, .textarea, .button, .select {
|
||||||
|
font: 1em mplantin;
|
||||||
|
background-color: var(--light-color);
|
||||||
|
border: 1px solid #aaae;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
padding: 0px 0.2em;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.textarea {
|
||||||
|
min-height: 6em;
|
||||||
|
max-height: 18em;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
background: #fafafa url(../images/manaSymbols/49.png) no-repeat calc(100% - 0.1em) 50%;
|
||||||
|
background-size: 1em 1em;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
.autoGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||||
|
grid-auto-rows: min-content;
|
||||||
|
}
|
||||||
|
.input.file {
|
||||||
|
padding: 0px;
|
||||||
|
height: 1.26em;
|
||||||
|
}
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
visibility: hidden;
|
||||||
|
background-color: var(--dark-color);
|
||||||
|
color: var(--light-color);
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
top: calc(100% + 5px);
|
||||||
|
left: 0px;
|
||||||
|
max-width: calc(100% - 10px);
|
||||||
|
width: auto;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
}
|
||||||
|
.tooltip .tooltiptext::after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: transparent transparent var(--dark-color) transparent;
|
||||||
|
}
|
||||||
|
.tooltip .tooltiptext:hover {
|
||||||
|
/*visibility: hidden;*/
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
div.tooltip > * {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.layer {
|
|
||||||
padding: 2em 2em;
|
|
||||||
color: black;
|
|
||||||
font-size: 2em;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 3em;
|
|
||||||
background-color: var(--light-color);
|
|
||||||
background-image: url(images/layerBackground.png);
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*Various text modifications*/
|
|
||||||
.title {
|
|
||||||
text-align: center;
|
|
||||||
font: 1.5em belerenbsc;
|
|
||||||
}
|
|
||||||
.truncate {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
text-indent: 0em;
|
|
||||||
}
|
|
||||||
.paragraph {
|
|
||||||
font: 1em mplantin;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.indent {
|
|
||||||
text-indent: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*General modifications*/
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.visible {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.selectable {
|
|
||||||
user-select: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*Hyperlinks*/
|
|
||||||
a {
|
a {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
@@ -191,10 +185,63 @@ footer a {
|
|||||||
footer a:hover {
|
footer a:hover {
|
||||||
color: var(--shifting-color-1-light);
|
color: var(--shifting-color-1-light);
|
||||||
}
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.footerGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-gap: 2em;
|
||||||
|
}
|
||||||
|
.layer {
|
||||||
|
padding: 2em 2em;
|
||||||
|
color: black;
|
||||||
|
font-size: 2em;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3em;
|
||||||
|
}
|
||||||
|
.layer { /*:nth-child(even)*/
|
||||||
|
background-color: var(--light-color);
|
||||||
|
background-image: url(images/layerBackground.png);
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font: 1.5em belerenbsc;
|
||||||
|
}
|
||||||
|
.pageTitle {
|
||||||
|
font: 5em belerenbsc;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 0.3em;
|
||||||
|
}
|
||||||
|
.paragraph {
|
||||||
|
font: 1em mplantin;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.indent {
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
.leftMargin {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
.donate > div:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.donate > div {
|
||||||
|
background-color: var(--clear-light);
|
||||||
|
border-radius: 2em;
|
||||||
|
font: 2em belerenbsc;
|
||||||
|
}
|
||||||
|
.donate > div > img {
|
||||||
|
height: 1em;
|
||||||
|
position: relative;
|
||||||
|
top: 0.15em;
|
||||||
|
left: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
/*Controls the area taken by the canvas*/
|
/*Controls the area taken by the canvas*/
|
||||||
@media screen and (min-width: 905pt) {
|
@media screen and (min-width: 888pt) {
|
||||||
/*Makes room for the canvas and controls to be side by side*/
|
/*Makes room for the canvas and controls to be side by side*/
|
||||||
.mainGrid {
|
.mainGrid {
|
||||||
padding: 1.5em;
|
padding: 1.5em;
|
||||||
@@ -215,7 +262,7 @@ footer a:hover {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*These control tooltips for mobile devices vs. desktops/laptops*/
|
/*These control tooltips for mobile devices vs. desktops/laptops*/
|
||||||
/*@media screen and (min-width: 1024px) {
|
@media screen and (min-width: 1024px) {
|
||||||
.tooltip:hover .tooltiptext {
|
.tooltip:hover .tooltiptext {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@@ -226,8 +273,8 @@ footer a:hover {
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}*/
|
}
|
||||||
/*Allows the footer to be displayed horizontally on Desktop*/
|
/*The footer can now fit horizontally!*/
|
||||||
@media screen and (min-width: 375pt) {
|
@media screen and (min-width: 375pt) {
|
||||||
.footerGrid {
|
.footerGrid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -237,131 +284,106 @@ footer a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*WIP (or I'm too lazy to sort these)*/
|
/*WIP*/
|
||||||
.tabMenu {
|
.tab {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr));
|
||||||
grid-auto-rows: min-content;
|
grid-auto-rows: min-content;
|
||||||
}
|
}
|
||||||
.tabOption, .textTabButton {
|
.tab.tabSelect {
|
||||||
font: 1.5em belerenbsc;
|
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
||||||
text-align: center;
|
|
||||||
background-color: var(--clear-light);
|
|
||||||
border: 1px solid var(--light-color);
|
|
||||||
transition: 0.5s;
|
|
||||||
}
|
}
|
||||||
.tabOption:hover, .textTabButton:hover {
|
.tabButton.tabSelectButton {
|
||||||
background-color: var(--clear-mid);
|
font: 1em belerenb;
|
||||||
transition: 0s;
|
|
||||||
}
|
}
|
||||||
.tabOption.tabOptionSelected, .textTabButton.activeTextTab {
|
.tabButton {
|
||||||
background-color: var(--clear-dark);
|
text-align: center;
|
||||||
|
background: var(--clear-light);
|
||||||
|
border: 1px solid var(--light-color);
|
||||||
|
font: 1.2em belerenbsc;
|
||||||
|
padding: 0.1em 0em;
|
||||||
|
transition: 0.33s;
|
||||||
}
|
}
|
||||||
.tabContent:not(.tabVisible) {
|
.tabButton:hover {
|
||||||
display: none;
|
background-color: var(--clear-mid);
|
||||||
|
transition: 0s;
|
||||||
|
}
|
||||||
|
.tabButton.activeTab {
|
||||||
|
background: var(--clear-dark);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: var(--shifting-color-1-light)
|
||||||
|
}
|
||||||
|
.tabContent {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.tabContent.displayed {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardMasterElement {
|
.download {
|
||||||
font: 1em belerenbsc;
|
text-align: center;
|
||||||
background-color: var(--clear-light);
|
font: 1.5em belerenbsc;
|
||||||
border: 1px solid var(--light-color);
|
|
||||||
border-radius: 0.25em;
|
|
||||||
padding: 0.5em;
|
|
||||||
margin-top: 0.25em;
|
|
||||||
}
|
}
|
||||||
.cardMasterElement img {
|
.truncate {
|
||||||
max-height: 2em;
|
overflow: hidden;
|
||||||
max-width: 2em;
|
white-space: nowrap;
|
||||||
position: absolute;
|
text-overflow: ellipsis;
|
||||||
transform: translate(1em, -0.35em);
|
text-indent: 0em;
|
||||||
}
|
}
|
||||||
.cardmasterElement img.cardMasterElementMaskImage {
|
.tab, button, select, option {
|
||||||
transform: translate(3.5em, -0.35em);
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.cardMasterElementMoving {
|
/*Custom Checkboxes*/
|
||||||
background-color: var(--clear-dark);
|
.realCheckboxContainer {
|
||||||
|
margin-top: 0.45em
|
||||||
}
|
}
|
||||||
.closeCardMasterElement {
|
.checkboxContainer {
|
||||||
cursor: pointer;
|
position: relative;
|
||||||
position: absolute;
|
padding-left: 1.5em;
|
||||||
/*top: 50%;*/
|
padding-top: 0.25em;
|
||||||
left: 96%;
|
cursor: pointer;
|
||||||
/*padding: 12px 16px;*/
|
-webkit-user-select: none;
|
||||||
/*transform: translate(0%, -50%);*/
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
.checkboxContainer input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
#framePicker, #maskPicker {
|
height: 0;
|
||||||
max-height: 260pt;
|
width: 0;
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
border: 1px solid var(--light-color);
|
|
||||||
}
|
}
|
||||||
.frameOption {
|
.checkmark {
|
||||||
height: 4em;
|
position: absolute;
|
||||||
text-align: center;
|
top: 0;
|
||||||
width: 100%;
|
left: 0;
|
||||||
|
height: 1.2em;
|
||||||
|
width: 1.2em;
|
||||||
|
transition: 0.33s;
|
||||||
|
background-color: var(--clear-light);
|
||||||
|
border: 1px solid var(--light-color)
|
||||||
}
|
}
|
||||||
.frameOption img {
|
.checkboxContainer:hover input ~ .checkmark {
|
||||||
max-width: 4em;
|
background-color: var(--clear-dark);
|
||||||
max-height: 4em;
|
|
||||||
}
|
}
|
||||||
.maskOption img {
|
.checkboxContainer input:checked ~ .checkmark {
|
||||||
max-width: 2em;
|
background-color: var(--dark-color);
|
||||||
max-height: 2em;
|
|
||||||
}
|
}
|
||||||
.frameOption.frameOptionSelected, .maskOption.maskOptionSelected {
|
.checkmark:after {
|
||||||
background-color: var(--clear-dark);
|
content: "X";
|
||||||
|
font: 1.2em gothammedium;
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 0.33s;
|
||||||
}
|
}
|
||||||
.maskOption, .frameOption {
|
.checkboxContainer input:checked ~ .checkmark:after {
|
||||||
background-color: var(--clear-light);
|
opacity: 1;
|
||||||
border: 1px solid var(--light-color);
|
|
||||||
border-radius: 0.25em;
|
|
||||||
}
|
}
|
||||||
.maskOption {
|
.checkboxContainer .checkmark:after {
|
||||||
margin-left: 0.5em;
|
left: 0.15em;
|
||||||
padding: 0.125em;
|
top: -0.1em;
|
||||||
width: calc(100% - 1.4em);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.textarea {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 8em;
|
|
||||||
max-height: 24em;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
.textTabButton {
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
.textTab {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
|
||||||
grid-auto-rows: min-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input, .textarea, .button, .select {
|
|
||||||
font: 1em mplantin;
|
|
||||||
background-color: var(--light-color);
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
border-radius: 0.2em;
|
|
||||||
padding: 0px 0.2em;
|
|
||||||
outline: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.inputOpacity {
|
|
||||||
font: 1em mplantin;
|
|
||||||
background-color: var(--light-color);
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
border-radius: 0.2em;
|
|
||||||
padding: 0px 0.2em;
|
|
||||||
outline: none;
|
|
||||||
width: 2.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#textCodeTutorial {
|
#textCodeTutorial {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 6.5em auto;
|
grid-template-columns: 6.5em auto;
|
||||||
@@ -376,6 +398,3 @@ footer a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
input[type="checkbox"], .frameOption, .maskOption, .button {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
173
test.html
173
test.html
@@ -1,173 +0,0 @@
|
|||||||
<!DOCTYPE html5>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Card Conjurer</title>
|
|
||||||
<!-- Other things -->
|
|
||||||
<link rel="stylesheet" href="data/site/newStyles.css">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="mainDiv">
|
|
||||||
<div class="pageTitle">
|
|
||||||
Card Conjurer
|
|
||||||
</div>
|
|
||||||
<div class="mainGrid">
|
|
||||||
<div class="canvasContainer">
|
|
||||||
<canvas id="displayCanvas"></canvas>
|
|
||||||
</div>
|
|
||||||
<div class="cardMenu">
|
|
||||||
<!-- Card editor tabs begin here! -->
|
|
||||||
<div class="tabMenu">
|
|
||||||
<div class="tabOption mainEditor tabOptionSelected" onclick="toggleTabs(event, 'frame', 'mainEditor')">Frame</div>
|
|
||||||
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'text', 'mainEditor')">Text</div>
|
|
||||||
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'art', 'mainEditor')">Art</div>
|
|
||||||
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'collector', 'mainEditor')">Collector</div>
|
|
||||||
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'set', 'mainEditor')">Set Symbol</div>
|
|
||||||
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'watermark', 'mainEditor')">Watermark</div>
|
|
||||||
</div>
|
|
||||||
<div class="tabContent mainEditor tabVisible" id="frame">
|
|
||||||
<div class="splitGrid">
|
|
||||||
<div id="framePicker" class="frameGrid"></div>
|
|
||||||
<div id="maskPicker"></div>
|
|
||||||
</div>
|
|
||||||
<div class="splitGrid">
|
|
||||||
<button onclick="addFrameToCardMaster()" class="button">Add</button>
|
|
||||||
<button onclick="addFrameToCardMaster(' - Right')" class="button">Add To Right Half</button>
|
|
||||||
</div>
|
|
||||||
<div id="selectedFramePreview">No frame selected</div>
|
|
||||||
<div id="cardMaster"></div>
|
|
||||||
</div>
|
|
||||||
<div class="tabContent mainEditor" id="text">
|
|
||||||
<div id="inputWhichTextTabs" class="textTab"></div>
|
|
||||||
<textarea class="textarea" id="inputText" placeholder="" oninput="updateText()"></textarea>
|
|
||||||
<input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="cardImageUpdated()" value="">
|
|
||||||
<div class="bar"></div>
|
|
||||||
<div class="title">How To Use Text Codes</div>
|
|
||||||
<div class="paragraph indent">
|
|
||||||
Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do:
|
|
||||||
</div>
|
|
||||||
<div id="textCodeTutorial"></div>
|
|
||||||
</div>
|
|
||||||
<div class="tabContent mainEditor" id="art">
|
|
||||||
<div class="splitGrid">
|
|
||||||
<div>
|
|
||||||
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload">
|
|
||||||
<input type="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
|
|
||||||
<input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name">
|
|
||||||
<input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div style="text-align: center; margin: 0.18em 0px">X, Y, & Zoom:</div>
|
|
||||||
<input type="number" class="input number" value="0" id="inputCardArtX" oninput="cardImageUpdated()">
|
|
||||||
<input type="number" class="input number" value="0" id="inputCardArtY" oninput="cardImageUpdated()">
|
|
||||||
<input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardImageUpdated()">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tabContent mainEditor" id="collector">
|
|
||||||
<div class="autoGrid">
|
|
||||||
<input type="text" class="input text" placeholder="Number" id="inputInfoNumber" oninput="updateBottomInfoCanvas()" value="">
|
|
||||||
<input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P">
|
|
||||||
<input type="text" class="input text" placeholder="Set" id="inputInfoSet" oninput="updateBottomInfoCanvas()" value="MTG">
|
|
||||||
<input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN">
|
|
||||||
<input type="text" class="input text" placeholder="Artist's Name" id="inputInfoArtist" oninput="updateBottomInfoCanvas()" value="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tabContent mainEditor" id="set">
|
|
||||||
<div class="autoGrid">
|
|
||||||
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload">
|
|
||||||
<input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)">
|
|
||||||
<input type="text" class="input text" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)">
|
|
||||||
<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)">
|
|
||||||
<button class="button" onclick="randomSet()">Random</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tabContent mainEditor" id="watermark">
|
|
||||||
<div class="autoGrid">
|
|
||||||
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload">
|
|
||||||
<input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)">
|
|
||||||
<input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')">
|
|
||||||
<select class="select" id="inputWatermarkPrimary" onchange="updateWatermark()">
|
|
||||||
<option value="none">None</option>
|
|
||||||
<option value="default">Default</option>
|
|
||||||
<option value="#ccc8b1" selected="selected">White</option>
|
|
||||||
<option value="#b0c3d5">Blue</option>
|
|
||||||
<option value="#b3b3b3">Black</option>
|
|
||||||
<option value="#ddac9b">Red</option>
|
|
||||||
<option value="#b9c8b5">Green</option>
|
|
||||||
<option value="#e4d49b">Gold</option>
|
|
||||||
<option value="#cfc8be">Artifact/Colorless</option>
|
|
||||||
</select>
|
|
||||||
<select class="select" id="inputWatermarkSecondary" onchange="updateWatermark()">
|
|
||||||
<option value="none">None</option>
|
|
||||||
<option value="default">Default</option>
|
|
||||||
<option value="#ccc8b1">White</option>
|
|
||||||
<option value="#b0c3d5">Blue</option>
|
|
||||||
<option value="#b3b3b3">Black</option>
|
|
||||||
<option value="#ddac9b">Red</option>
|
|
||||||
<option value="#b9c8b5">Green</option>
|
|
||||||
<option value="#e4d49b">Gold</option>
|
|
||||||
<option value="#cfc8be">Artifact/Colorless</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Card editor tabs end here! -->
|
|
||||||
<div class="bar"></div>
|
|
||||||
<div>
|
|
||||||
<div class="download">
|
|
||||||
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="hidden"></div>
|
|
||||||
<div class="layer">
|
|
||||||
<div class="title">Welcome to Card Conjurer!</div>
|
|
||||||
<div class="paragraph indent">Card Conjurer is a free program that helps you create custom Magic: The Gathering cards. There are already plenty of custom card makers out there, but what sets Card Conjurer apart from the rest is its live-edit capabilities. You can immediatly see the effects of any change you make, which makes card customization easier and overall a better experience.</div>
|
|
||||||
</div>
|
|
||||||
<div class="layer">
|
|
||||||
<div class="title">About Me</div>
|
|
||||||
<div class="paragraph indent">
|
|
||||||
Hi! 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 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, and then in April of 2019 I bought the domain <a href="#" onclick="alert('You\'re already there, silly!')">cardconjurer.com</a>.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="layer">
|
|
||||||
<div class="title">Want More Customization?</div>
|
|
||||||
<!-- <div class="paragraph indent">
|
|
||||||
If you'd like to try out some more frames, scroll to the bottom of this page and check the box next to "Advanced Borders" - CardConjurer.com will remember this setting, so you only need to do this once per device.
|
|
||||||
</div> -->
|
|
||||||
<div class="paragraph indent">
|
|
||||||
This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, <a href="old/index.html">click here</a>.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="layer">
|
|
||||||
<div class="title">Have Any Questions?</div>
|
|
||||||
<div class="paragraph indent">
|
|
||||||
If you have any questions please don't hesitate to email me at: <div class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></div>Even if you made a cool card and want to share, I'd love to see it!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<footer>
|
|
||||||
<div class="footerGrid">
|
|
||||||
<div>
|
|
||||||
Card Conjurer By Kyle Burton<br>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Navigation:<br>
|
|
||||||
<a href="index.html">Card Creator</a><br>
|
|
||||||
<a href="life.html">Life Counter</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Legal:<br>
|
|
||||||
<a href="disclaimer.html">Disclaimer</a><br>
|
|
||||||
<a href="termsOfUse.html">Terms of Use</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<script async src="data/scripts/sortable.js"></script>
|
|
||||||
<script async src="data/scripts/setCodeList.js"></script>
|
|
||||||
<script defer src="data/scripts/main.js"></script>
|
|
||||||
<script defer src="data/scripts/colors.js"></script>
|
|
||||||
<html>
|
|
||||||
Reference in New Issue
Block a user