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

upgrayedd

Browse Source
This commit is contained in:
Kyle
2020-03-30 09:23:41 -07:00
parent 519e2617f8
commit e5d022fae2
7 changed files with 233 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
data/scripts/palettes/darkMode.js
View File

@@ -1,11 +1,11 @@
rootStyles.setProperty('--background-color', '#1c1c1c')
rootStyles.setProperty('--background-color-contrast', '#111')
rootStyles.setProperty('--interactable-color', '#333')
rootStyles.setProperty('--interactable-selected-color', '#555')
rootStyles.setProperty('--background-color', '#121212')
rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
rootStyles.setProperty('--interactable-color', '#202020')
rootStyles.setProperty('--interactable-selected-color', '#2f2f2f')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#3a3a3a')
rootStyles.setProperty('--input-font-color', '#fff')
rootStyles.setProperty('--font-color', '#fff')
rootStyles.setProperty('--font-color-contrast', '#eee')
rootStyles.setProperty('--input-color', '#282828')
rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--font-color', '#efefef')
rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'darkMode')

61
data/scripts/palettes/dayRave.js Normal file
View File

@@ -0,0 +1,61 @@
rootStyles.setProperty('--background-color', '#eaeaea')
rootStyles.setProperty('--background-color-contrast', '#f5f5f5')
rootStyles.setProperty('--interactable-color', '#f5f5f5')
rootStyles.setProperty('--interactable-selected-color', '#eaeaea')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#efefef')
rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--body-background', 'url(images/lowpoly.png)')
setCookie('colorPalette', 'dayRave')
//Cycles through a rainbow!
if (currentColorIndex == undefined) {
document.getElementById('inputColorPalette').addEventListener('change', function() {
clearInterval(raveMode)
})
}
var raveMode = setInterval(changeColor, 250)
var regularAdjust = 0//60
var lightAdjust = 64//100
var lightLead = 255
var currentColorIndex = 0
function changeColor() {
var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead)
rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ')')
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
}
function indexToColor(colorIndex) {
var red = 0, green = 0, blue = 0
var realColorIndex = colorIndex - Math.floor(colorIndex / 1530) * 1530
var colorStage = Math.floor(realColorIndex / 255)
switch(colorStage) {
case 0:
green = 255
red = realColorIndex - Math.floor(realColorIndex / 255) * 255
break
case 1:
red = 255
green = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
break
case 2:
red = 255
blue = realColorIndex - Math.floor(realColorIndex / 255) * 255
break
case 3:
blue = 255
red = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
break
case 4:
blue = 255
green = realColorIndex - Math.floor(realColorIndex / 255) * 255
break
case 5:
green = 255
blue = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
break
}
return [red, green, blue]
}

12
data/scripts/palettes/lightMode.js
View File

@@ -1,11 +1,11 @@
rootStyles.setProperty('--background-color', '#fafafa')
rootStyles.setProperty('--background-color-contrast', '#333')
rootStyles.setProperty('--interactable-color', '#aaa')
rootStyles.setProperty('--interactable-selected-color', '#777')
rootStyles.setProperty('--background-color', '#f5f5f5')
rootStyles.setProperty('--background-color-contrast', '#eaeaea')
rootStyles.setProperty('--interactable-color', '#dfdfdf')
rootStyles.setProperty('--interactable-selected-color', '#cccccc')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#ddd')
rootStyles.setProperty('--input-color', '#dadada')
rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#eee')
rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'lightMode')

12
data/scripts/palettes/raveMode.js → data/scripts/palettes/nightRave.js
View File

@@ -1,14 +1,14 @@
rootStyles.setProperty('--background-color', '#1c1c1c')
rootStyles.setProperty('--background-color-contrast', '#111')
rootStyles.setProperty('--interactable-color', '#333')
rootStyles.setProperty('--background-color', '#121212')
rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
rootStyles.setProperty('--interactable-color', '#202020')
rootStyles.setProperty('--interactable-selected-color', '#555')
rootStyles.setProperty('--interactable-tiling', '100% 100%')
rootStyles.setProperty('--input-color', '#3a3a3a')
rootStyles.setProperty('--input-font-color', '#fff')
rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#eee')
rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'url(images/lowpoly.png)')
setCookie('colorPalette', 'raveMode')
setCookie('colorPalette', 'nightRave')
//Cycles through a rainbow!
if (currentColorIndex == undefined) {

40
data/site/askScryfallStyles.css
View File

@@ -4,37 +4,31 @@
grid-template-rows: auto 90pt auto;
align-items: center;
justify-items: center;
}
.urzaCard {
}
.urzaCard {
width: 360pt;
text-align: center;
grid-column: 1 / span 3;
}
.urzaCard > img {
position: relative;
left: -2rem;
}
.urzaCard > img {
width: 360pt;
height: auto;
}
img {
position: relative;
left: -1rem;
}
.askScryfallGrid > * {
}
.askScryfallGrid > * {
/*border: 1px solid red;*/
}
.askScryfallButton {
}
.askScryfallButton {
width: auto;
height: 60pt;
transition: 0.25s;
}
.askScryfallButton:hover {
}
.askScryfallButton:hover {
height: 80pt;
}
.askScryfallButton:active {
}
.askScryfallButton:active {
height: 90pt !important;
}
#askScryfallResult {
}
#askScryfallResult {
grid-column: 1 / span 3;
padding: 2rem;
margin: 1rem;
@@ -42,8 +36,8 @@
color: var(--font-color-contrast);
border-radius: 1rem;
font: 2rem belerenb;
}
@media screen and (min-width: 864pt) {
}
@media screen and (min-width: 864pt) {
.askScryfallGrid {
grid-template-columns: calc(360pt) 1fr 1fr 1fr !important;
grid-template-rows: 90pt auto !important;
@@ -55,4 +49,4 @@
#askScryfallResult {
grid-column: 2 / span 3 !important;
}
}
}

124
data/site/styles.css
View File

@@ -37,20 +37,20 @@
}
:root {
--background-color: #fafafa;
--background-color-contrast: #333;
--interactable-color: #aaa;
--interactable-selected-color: #777;
--background-color: #f5f5f5;
--background-color-contrast: #eaeaea;
--interactable-color: #dfdfdf;
--interactable-selected-color: #cccccc;
--interactable-tiling: 100% 100%;
--input-color: #ddd;
--input-color: #dadada;
--input-font-color: #000;
--font-color: #000;
--font-color-contrast: #eee;
--font-color-contrast: #000;
--body-background: none;
}
html {
font: 20pt georgia;
font: 12pt georgia;
background: var(--background-color);
color: var(--font-color);
background-attachment: fixed;
@@ -194,9 +194,6 @@ img {
background: var(--interactable-selected-color);
}
canvas {
/*background: var(--interactable-color);*/
}
textarea {
resize: vertical;
min-height: 4rem;
@@ -212,12 +209,7 @@ textarea {
.mainGrid {
display: grid;
grid-template-columns: 750px auto;
grid-gap: 1rem;
padding: 0 1rem 1rem 1rem;
}
.tabPicker {
display: grid;
@@ -275,9 +267,6 @@ input[type='checkbox'], select, option, input[type='file'], button {
from {position: relative; left: 100vw;}
to {position: relative; left: 0px;}
}
.layer {
padding: 5rem;
}
.layerTitle {
/*color: inherit;*/
text-align: center;
@@ -304,21 +293,13 @@ input[type='checkbox'], select, option, input[type='file'], button {
animation: slide-from-right 1.5s;
}
.footer {
padding: 2rem;
background: var(--background-color-contrast);
background-size: 100% 100%;
color: var(--font-color-contrast);
font: 0.6rem arial;
display: grid;
grid-template-columns: auto auto auto;
}
.fiveSampleCards {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
margin-top: 1rem;
margin-bottom: 3rem;
margin-bottom: 2rem;
}
.fiveSampleCards > div > img {
position: relative;
@@ -378,17 +359,94 @@ input[type='checkbox'], select, option, input[type='file'], button {
text-indent: 2em;
}
.truncate {
word-break: break-word;
}
.justify {
text-align: justify;
}
/*ANYTHING THAT CHANGES BASED ON SCREEN WIDTH GOES HERE*/
.mainGrid {
display: grid;
grid-template-columns: auto;
justify-items: center;
grid-gap: 1rem;
padding: 1rem 0;
}
.layer {
padding: 2rem;
}
.cardLayerGrid {
display: grid;
grid-template-columns: auto auto;
grid-template-columns: auto;
grid-gap: 1rem;
justify-items: center;
align-items: center;
}
.cardLayerGrid > img {
width: 300pt;
width: 100%;
height: auto;
}
.truncate {
word-break: break-word;
canvas {
width: 100%;
}
.footer {
padding: 1rem;
background: var(--background-color-contrast);
background-size: 100% 100%;
color: var(--font-color-contrast);
font: 0.6rem arial;
display: grid;
grid-template-columns: auto;
grid-row-gap: 1rem;
}
.footer > div > select {
width: auto !important;
}
@media screen and (min-width: 909pt) { /*Screen is wide enough to show the card next to the editor menu*/
.mainGrid {
grid-template-columns: 750px auto;
justify-items: stretch;
/*padding: 0 1rem 1rem 1rem;*/
}
}
@media screen and (min-width: 800pt) { /*Screen is wide enough for cardLayerGrids to display side by side, and for more padding*/
.cardLayerGrid {
grid-template-columns: auto auto;
}
.layer {
padding: 4rem;
}
}
@media screen and (min-width: 618pt) { /*Screen is wide enough for padding*/
.mainGrid {
padding: 1rem 1rem;
}
}
@media screen and (min-width: 768px) { /*Screen is wide enough for the card image to be 750px wide. Scrollbar is 18 pixels?*/
canvas {
width: 750px;
}
}
@media screen and (min-width: 450pt) { /*Screen is wide enough for the footer to display horizontally*/
.footer {
padding: 2rem;
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width: 392pt) { /*Screen is wide enough for the samples to be a constant size*/
.cardLayerGrid > img {
width: 300pt;
}
}
@media screen and (min-width: 300pt) { /*Screen is wide enough for larger text*/
html {
font: 20pt georgia;
}
}

18
index.html
View File

@@ -2,6 +2,7 @@
<html>
<head>
<script async src="data/scripts/cookies.js"></script>
<!-- <script async src="data/scripts/palettes/dayRave.js"></script> -->
<link rel="stylesheet" href="data/site/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -12,7 +13,7 @@
</head>
<body>
<title>Card Conjurer</title>
<div class='title'>Card Conjurer</div>
<div class='title darklayer'>Card Conjurer</div>
<script>
var cardWidth = 1500, cardHeight = 2100
if (window.location.search != "") {
@@ -184,7 +185,7 @@
<div class='layerTitle'>
Choose From A Variety Of Card Frames
</div>
<div>
<div class="justify">
Card Conjurer offers more card frame options than any other web-based Magic card maker
</div>
</div>
@@ -196,7 +197,7 @@
<div class='layerTitle'>
Customize To Your Heart's Content
</div>
<div>
<div class="justify">
With Card Conjurer's level of customization, you'll have endless options when designing your dream cards
</div>
</div>
@@ -210,7 +211,7 @@
<div class='layerTitle'>
Or Bling Out Existing Favorites
</div>
<div>
<div class="justify">
Easily import vital information from existing cards, then redesign them
</div>
</div>
@@ -222,8 +223,8 @@
<div class='layerTitle'>
Have Any Questions?
</div>
<div class='paragraph'>
If you have a question, a request, or even just want to share that cool card you made, please don't hesitate to email me at <label 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></label>!
<div class='justify'>
If you have a question, a request, or even just want to share a cool card you made, please don't hesitate to email me at <label 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></label>!
</div>
</div>
</div>
@@ -233,7 +234,7 @@
<div class='layerTitle'>
The Proxy Factory
</div>
<div class="paragraph">
<div class="justify">
If you'd like to delve deeper into making custom Magic: The Gathering cards, check out The Proxy Factory! They're a community full of individuals interested in creating custom cards, and are very welcoming to new members. Take a look at their <a style='color: #ff4500;' href='https://www.reddit.com/r/TheProxyFactory/' target='_blank'>Reddit</a>, or join their <a style='color: #738adb;' href='https://discordapp.com/invite/xBCQprM' target='_blank'>Discord</a>. Happy proxying!
</div>
</div>
@@ -248,7 +249,8 @@
<select id='inputColorPalette' onchange='loadScript("data/scripts/palettes/" + this.value + ".js")'>
<option value='lightMode'>Light Mode</option>
<option value='darkMode'>Dark Mode</option>
<option value='raveMode'>Rave Mode</option>
<option value='dayRave'>Day Rave</option>
<option value='nightRave'>Night Rave</option>
<option value='scholarMode'>Scholar Mode</option>
</select>
</div>