GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-26 21:04:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

restyle

Browse Source
This commit is contained in:
Kyle
2020-07-24 11:54:43 -07:00
parent d5b0c93cb1
commit b990a8bbe6
14 changed files with 254 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
about/index.html
View File

@@ -13,8 +13,8 @@
</head>
<body>
<title>CC - About</title>
<div class='darkLayer fadeIn'><div class='title'>About Me</div></div>
<div class='layer fadeIn'>
<div class='animated layer fadeIn title'>About Me</div>
<div class='animated layer clearLayer fadeIn'>
<div class='indent'>
Hello! My name is Kyle Burton, and I'm the creator of Card Conjurer. I started playing Magic with the M14 deckbuilder's toolkit. I played 60-card casual games with several close friends, and when Khans of Tarkir was released we attended our first prerelease. As the years passed I got more and more into Magic and ultimately discovered Commander, which is my favorite format to this day.
</div><br>

17
askurza/index.html
View File

@@ -39,8 +39,7 @@
grid-column: 1 / span 3;
padding: 1rem;
margin: 0.5rem;
background: var(--background-color-contrast);
color: var(--font-color-contrast);
background: var(--layer-background);
border-radius: 1rem;
font: 1.5rem belerenb;
}
@@ -75,10 +74,10 @@
}
</style>
<div>
<div class="title darkLayer">
<div class="title layer">
Ask Urza 2.0
</div>
<div class="layer slideFromRight">
<div class="animated layer clearLayer slideFromRight">
<div>
<div class="askUrzaGrid">
<div class="urzaCard">
@@ -99,15 +98,14 @@
</div>
</div>
</div>
<div class="layer darkLayer slideFromLeft">
<div class="animated layer slideFromLeft">
<div class="indent">
Ask Urza 2.0 is a replacement for AskUrza.com that periodically compiles all planeswalker abilities and sorts them into three categories for use with Urza, Academy Headmaster. This allows for much more unpredictability and, in my opinion, much more fun. To use Ask Urza, simply click on the +1, -1, or -6, and let the gods of chaos decide your fate!
</div>
</div>
<div class="layer smallLayer splitGrid">
<div class='ad'>
<div class="adGrid">
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalOne -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
@@ -118,9 +116,8 @@
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='ad'>
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalTwo -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"

93
creator/index.html
View File

@@ -13,7 +13,7 @@
</head>
<body>
<title>Card Conjurer</title>
<div class='title darklayer'>Card Conjurer</div>
<div class='title layer'>Card Conjurer</div>
<script>
var cardWidth = 1500, cardHeight = 2100
if (window.location.search != "") {
@@ -31,15 +31,14 @@
<canvas id="previewCanvas"></canvas>
<div>
<div class='tabPicker' id='tabPicker'>
<div onclick='toggleTabs(this, "frameTab")' class='tabOptionSelected'>Frame</div>
<div onclick='toggleTabs(this, "textTab")'>Text</div>
<div onclick='toggleTabs(this, "artTab")'>Art</div>
<div onclick='toggleTabs(this, "setSymbolTab")'>Set Symbol</div>
<div onclick='toggleTabs(this, "watermarkTab")'>Watermark</div>
<div onclick='toggleTabs(this, "collectorTab")'>Collector</div>
<div onclick='toggleTabs(this, "importTab")'>Import</div>
<div onclick='{toggleTabs(this, "tutorialTab"); if (document.getElementById("tutorial").src == "") {document.getElementById("tutorial").src = "https://www.youtube.com/embed/UrNk6I55S0Q"}}'>Tutorial</div>
<!-- <div onclick='toggleTabs(this, "advancedTab")'>Advanced</div> -->
<div onclick='toggleTabs(this, "frameTab")' class='selected interactable'>Frame</div>
<div onclick='toggleTabs(this, "textTab")' class='interactable'>Text</div>
<div onclick='toggleTabs(this, "artTab")' class='interactable'>Art</div>
<div onclick='toggleTabs(this, "setSymbolTab")' class='interactable'>Set Symbol</div>
<div onclick='toggleTabs(this, "watermarkTab")' class='interactable'>Watermark</div>
<div onclick='toggleTabs(this, "collectorTab")' class='interactable'>Collector</div>
<div onclick='toggleTabs(this, "importTab")' class='interactable'>Import</div>
<div onclick='{toggleTabs(this, "tutorialTab"); if (document.getElementById("tutorial").src == "") {document.getElementById("tutorial").src = "https://www.youtube.com/embed/UrNk6I55S0Q"}}' class='interactable'>Tutorial</div>
</div>
<div id='tabOptions'>
<div id='frameTab'>
@@ -72,7 +71,7 @@
<option value="regular">Regular</option>
</select>
</div>
</div><br>
</div>
<div class="splitGrid">
<div id="framePicker" class="frameGrid"></div>
<div id="maskPicker"></div>
@@ -199,38 +198,10 @@
</div>
</div>
</div>
<div class="layer darkLayer smallLayer splitGrid">
<div class='ad'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalOne -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
data-ad-slot="7142663356"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='ad'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalTwo -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
data-ad-slot="4606153449"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class='layer slideFromRight'>
<div class='animated layer slideFromRight'>
<div>
<div>
<div class='layerTitle'>
<div class='title'>
Share Your Cards!
</div>
<div class='justify'>
@@ -239,10 +210,9 @@
</div>
</div>
</div>
<div class="layer darkLayer smallLayer splitGrid">
<div class='ad'>
<div class="adGrid">
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalThree -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
@@ -253,9 +223,8 @@
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='ad'>
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalFour -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
@@ -267,23 +236,47 @@
</script>
</div>
</div>
<div class='layer slideFromLeft'>
<div class='animated layer slideFromLeft'>
<div class='cardLayerGrid'>
<div>
<div class='layerTitle'>
<div class='title'>
How You Can Help
</div>
<div class="justify">
As a student on a tight budget, it can be hard to afford Magic. If you've enjoyed using Card Conjurer and would like to help me attend a draft or continue working on Card Conjurer, you can make a small donation via <a style='color: #3b7bbf;' href="https://www.paypal.me/kyleburtondonate" target='_blank'>PayPal</a>. If you prefer other methods of supporting, I have a <a style='color: #28abdf;' href="https://ko-fi.com/kyleburton" target='_blank'>Ko-Fi</a> and <a style='color: #f96854;' href="https://www.patreon.com/KyleBurton" target='_blank'>Patreon</a> as well. Any assistance is greatly appreciated!
<!-- https://www.patreon.com/KyleBurton -->
</div>
</div>
</div>
</div>
<div class="adGrid">
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
data-ad-slot="7142663356"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
data-ad-slot="4606153449"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<script defer src="/data/scripts/sortable.js"></script>
<script defer src="/data/scripts/main.js"></script>
<script defer src="/data/scripts/versions/m15/version.js"></script>
<!-- <script async src="/data/scripts/palettes/darkMode.js"></script> -->
<div class='notificationContainer'></div>
</body>
<footer id='footer'>

BIN
data/images/cardImages/misc/cc-o.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

8
data/scripts/animations.js
View File

@@ -1,5 +1,5 @@
//CSS & HTML stuff
window.layerElements = document.querySelectorAll('.layer')
window.animatedElements = document.querySelectorAll('.animated')
window.addEventListener('resize', windowResized)
window.addEventListener('scroll', windowScrolled)
windowResized()
@@ -9,10 +9,10 @@ function windowResized() {
windowScrolled()
}
function windowScrolled() {
for (var i = 0; i < layerElements.length; i++) {
var positionFromTop = (layerElements[i].getBoundingClientRect().top + layerElements[i].getBoundingClientRect().bottom) / 2
for (var i = 0; i < animatedElements.length; i++) {
var positionFromTop = (animatedElements[i].getBoundingClientRect().top + animatedElements[i].getBoundingClientRect().bottom) / 2
if (positionFromTop - windowHeight <= 0) {
layerElements[i].classList.add('revealedLayer')
animatedElements[i].classList.add('revealedAnimation')
}
}
}

38
data/scripts/main.js
View File

@@ -81,7 +81,7 @@ cardArt.onload = function() {
}
function setSymbolFromGatherer() {
if (document.getElementById('inputSetCode').value.toLowerCase() == 'cc') {
var newSetSymbolSource = 'https://cardconjurer.com/data/images/cardImages/misc/cc-' + document.getElementById('inputSetRarity').value.toLowerCase()
var newSetSymbolSource = '/data/images/cardImages/misc/cc-' + document.getElementById('inputSetRarity').value.toLowerCase()
if (document.getElementById('inputSetRarity').value == '') {
newSetSymbolSource += 'c'
}
@@ -154,7 +154,7 @@ class cardPlaceholder {
cardMasterElement() {
var temporaryElement = document.createElement('div')
temporaryElement.id = 'uniqueNumber' + this.uniqueNumber
temporaryElement.classList.add('cardMasterElement')
temporaryElement.classList.add('cardMasterElement', 'interactable')
temporaryElement.innerHTML = '<span class="handle">|||</span><div style="grid-column: 2 / 4">' + this.name + '</div><span></span>'
return temporaryElement
}
@@ -199,7 +199,7 @@ class cardImage {
cardMasterElement() {
var temporaryElement = document.createElement('div')
temporaryElement.id = 'uniqueNumber' + this.uniqueNumber
temporaryElement.classList.add('cardMasterElement')
temporaryElement.classList.add('cardMasterElement', 'interactable')
temporaryElement.innerHTML = '<div class="handle">|||</div><div><img src="' + this.image.src + '"><img src="' + maskImageList[maskNameList.indexOf(this.masks[0])].src + '"></div><div>' + this.name + ' - ' + this.masks.toString().replace(',', ', ') + '</div><span class="delete" onclick="deleteCardObject(event)">X</span>'
temporaryElement.onclick = function() {
if (document.getElementById('cardMasterElementEditor').classList.contains('hidden') && !deletingCardObject) {
@@ -214,8 +214,8 @@ class cardImage {
document.getElementById('cardMasterElementEditorScale').value = scaleX(selectedObject.width)
document.getElementById('cardMasterElementEditorOpacity').value = selectedObject.opacity * 100
document.getElementById('cardMasterElementEditorErase').checked = selectedObject.erase
Array.from(document.getElementById('cardMaster').children).forEach(element => element.classList.remove('cardMasterElementSelected'))
this.classList.add('cardMasterElementSelected')
Array.from(document.getElementById('cardMaster').children).forEach(element => element.classList.remove('selected'))
this.classList.add('selected')
}
return temporaryElement
}
@@ -292,31 +292,31 @@ class frameImage {
this.masks = masks
this.framePickerElement = document.createElement('div')
this.framePickerElement.id = 'frameIndex' + frameImageListIndex
this.framePickerElement.classList.add(frameClass)
this.framePickerElement.classList.add(frameClass, 'interactable')
this.framePickerElement.onclick = this.frameOptionClicked
this.framePickerElement.innerHTML = '<img src=' + this.image.src + '>'
document.getElementById('framePicker').appendChild(this.framePickerElement)
}
frameOptionClicked() {
Array.from(document.getElementById('framePicker').children).forEach(element => element.classList.remove('frameOptionSelected'))
this.classList.add('frameOptionSelected')
Array.from(document.getElementById('framePicker').children).forEach(element => element.classList.remove('selected'))
this.classList.add('selected')
if (parseInt(this.id.replace('frameIndex', '')) != selectedFrameImage) {
selectedFrameImage = parseInt(this.id.replace('frameIndex', ''))
document.getElementById('maskPicker').innerHTML = ''
frameImageList[parseInt(this.id.replace('frameIndex', ''))].masks.forEach(array => document.getElementById('maskPicker').innerHTML += '<div id="maskOption' + maskNameList.indexOf(array) + '" onclick="maskOptionClicked(event)"><img src="' + maskImageList[maskNameList.indexOf(array)].src + '">' + array + '</div>')
document.getElementById('maskPicker').children[0].classList.add('maskOptionSelected')
frameImageList[parseInt(this.id.replace('frameIndex', ''))].masks.forEach(array => document.getElementById('maskPicker').innerHTML += '<div id="maskOption' + maskNameList.indexOf(array) + '" class="interactable" onclick="maskOptionClicked(event)"><img src="' + maskImageList[maskNameList.indexOf(array)].src + '">' + array + '</div>')
document.getElementById('maskPicker').children[0].classList.add('selected')
selectedMaskImage = parseInt(document.getElementById('maskPicker').children[0].id.replace('maskOption', ''))
updateSelectedFramePreview()
}
}
}
function maskOptionClicked(event) {
Array.from(document.getElementById('maskPicker').children).forEach(element => element.classList.remove('maskOptionSelected'))
Array.from(document.getElementById('maskPicker').children).forEach(element => element.classList.remove('selected'))
if (event.target.nodeName == 'IMG') {
event.target.parentElement.classList.add('maskOptionSelected')
event.target.parentElement.classList.add('selected')
selectedMaskImage = parseInt(event.target.parentElement.id.replace('maskOption', ''))
} else {
event.target.classList.add('maskOptionSelected')
event.target.classList.add('selected')
selectedMaskImage = parseInt(event.target.id.replace('maskOption', ''))
}
updateSelectedFramePreview()
@@ -407,12 +407,12 @@ function getFloat(input) {
function loadTextOptions(textArray) {
document.getElementById('textPicker').innerHTML = ''
cardTextList = textArray
cardTextList.forEach((item, index) => document.getElementById('textPicker').innerHTML += '<div id="' + index + '" onclick="textOptionClicked(event, ' + index + ')">' + item.name + '</div>')
cardTextList.forEach((item, index) => document.getElementById('textPicker').innerHTML += '<div id="' + index + '" onclick="textOptionClicked(event, ' + index + ')" class="interactable">' + item.name + '</div>')
document.getElementById('textPicker').children[0].click()
}
function textOptionClicked(event, index) {
Array.from(document.getElementById('textPicker').children).forEach(element => element.classList.remove('selectedText'))
event.target.classList.add('selectedText')
Array.from(document.getElementById('textPicker').children).forEach(element => element.classList.remove('selected'))
event.target.classList.add('selected')
selectedTextObject = cardTextList[index]
document.getElementById('textEditorText').value = selectedTextObject.text
document.getElementById('textEditorX').value = scaleX(selectedTextObject.x)
@@ -846,8 +846,8 @@ function beforeAfter(targetString, beforeString, afterString) {
}
function toggleTabs(clickedElement, targetId) {
Array.from(clickedElement.parentElement.children).forEach(element => element.classList.remove('tabOptionSelected'))
clickedElement.classList.add('tabOptionSelected')
Array.from(clickedElement.parentElement.children).forEach(element => element.classList.remove('selected'))
clickedElement.classList.add('selected')
Array.from(document.getElementById(targetId).parentElement.children).forEach(element => element.classList.add('hidden'))
document.getElementById(targetId).classList.remove('hidden')
}
@@ -941,7 +941,7 @@ function textCodeReference() {
function notify(message, color) {
document.getElementsByClassName('notificationContainer')[0].innerHTML += `
<div class='notification' style='background-color: ` + color + `'>
<div class='notification interactable' style='border-top-color: ` + color + `'>
<div>` + message + `</div>
<div class='deleteNotification' onclick='this.parentElement.parentNode.removeChild(this.parentElement)'>X</div>
</div>

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

@@ -1,10 +1,19 @@
rootStyles.setProperty('--background-color', '#3a3838')
rootStyles.setProperty('--background-color-contrast', '#242424')
rootStyles.setProperty('--interactable-color', '#2b2b2b')
rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
rootStyles.setProperty('--input-color', '#2b2b2b')
rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--site-background', '#3a3838')
rootStyles.setProperty('--layer-background', '#242424')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666')
rootStyles.setProperty('--interactable-selected', '#99ee99')
rootStyles.setProperty('--font-color', '#efefef')
rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'darkMode')
// rootStyles.setProperty('--background-color', '#3a3838')
// rootStyles.setProperty('--background-color-contrast', '#242424')
// rootStyles.setProperty('--interactable-color', '#2b2b2b')
// rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
// rootStyles.setProperty('--input-color', '#2b2b2b')
// 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')

18
data/scripts/palettes/dayRave.js
View File

@@ -1,12 +1,10 @@
rootStyles.setProperty('--background-color', '#d0d0d0')
rootStyles.setProperty('--background-color-contrast', '#f5f5f5')
rootStyles.setProperty('--interactable-color', '#dfdfdf')
rootStyles.setProperty('--interactable-selected-color', '#cccccc')
rootStyles.setProperty('--input-color', '#dadada')
rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#f5f5f5')
rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
rootStyles.setProperty('--interactable-selected', '#00aa00')
rootStyles.setProperty('--font-color', '#000000')
rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'dayRave')
//Cycles through a rainbow!
@@ -23,7 +21,7 @@ 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) + ")" + ') left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '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) + ")" + ') left/cover no-repeat fixed')
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
}
function indexToColor(colorIndex) {

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

@@ -1,10 +1,8 @@
rootStyles.setProperty('--background-color', '#f5f5f5')
rootStyles.setProperty('--background-color-contrast', '#d0d0d0')
rootStyles.setProperty('--interactable-color', '#dfdfdf')
rootStyles.setProperty('--interactable-selected-color', '#cccccc')
rootStyles.setProperty('--input-color', '#dadada')
rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--site-background', '#f5f5f5')
rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
rootStyles.setProperty('--interactable-selected', '#00aa00')
rootStyles.setProperty('--font-color', '#000000')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'lightMode')

19
data/scripts/palettes/nightRave.js
View File

@@ -1,13 +1,12 @@
rootStyles.setProperty('--background-color', '#3a3838')
rootStyles.setProperty('--background-color-contrast', '#242424')
rootStyles.setProperty('--interactable-color', '#2b2b2b')
rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
rootStyles.setProperty('--input-color', '#2b2b2b')
rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#3a3838')
rootStyles.setProperty('--layer-background', '#242424')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666')
rootStyles.setProperty('--interactable-selected', '#99ee99')
rootStyles.setProperty('--font-color', '#efefef')
rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'nightRave')
console.log('oh no')
//Cycles through a rainbow!
if (currentColorIndex == undefined) {
@@ -23,7 +22,7 @@ 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) + ")" + ') left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '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) + ")" + ') left/cover no-repeat fixed')
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
}
function indexToColor(colorIndex) {

159
data/styles/main.css
View File

@@ -41,20 +41,18 @@
}
:root {
--background-color: #f5f5f5;
--background-color-contrast: #e4e4e4;
--interactable-color: #dfdfdf;
--interactable-selected-color: #cccccc;
--input-color: #dadada;
--input-font-color: #000;
--site-background: #f5f5f5;
--layer-background: #e4e4e4;
--layer-background-selected: #ccc;
--interactable-unselected: #aaa;
--interactable-selected: #00aa00;
--font-color: #000;
--font-color-contrast: #000;
--body-background: none;
}
html {
font: 12pt georgia;
background: var(--background-color);
background: var(--site-background);
color: var(--font-color);
-webkit-user-select: none;
-moz-user-select: none;
@@ -79,16 +77,31 @@ a:hover {
text-decoration: underline;
}
.ad {
text-align: center;
/*border: 1px solid red;*/
width: calc(50vw - 5rem);
/*.ad {
margin: 0;
padding: 0;
}*/
.adGrid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
grid-auto-rows: min-content;
justify-items: center;
align-items: center;
}
.adGrid > div {
width: 100%;
}
.title {
text-align: center;
font: 2.5rem 'belerenbsc';
padding: 1rem 0;
.interactable {
background: var(--layer-background);
border-top: 0.2rem solid var(--interactable-unselected);
cursor: pointer;
border-radius: 0.2rem;
}
.interactable.selected {
border-top-color: var(--interactable-selected);
background: var(--layer-background-selected);
}
.cardMaster {
@@ -96,13 +109,10 @@ a:hover {
}
.cardMasterElement {
font: 1rem belerenbsc;
margin-top: 0.1rem;
margin-top: 0.25rem;
display: grid;
grid-template-columns: 2rem 4rem auto 2rem;
align-items: center;
background: var(--interactable-color);
color: var(--input-font-color);
cursor: pointer;
}
.cardMasterElement > .handle {
cursor: move;
@@ -115,33 +125,29 @@ a:hover {
object-fit: contain;
}
.cardMasterElementMoving {
background: var(--interactable-selected-color);
background: var(--layer-background-selected);
}
.cardMasterElement > .delete {
cursor: pointer;
text-align: center;
}
.cardMasterElement.cardMasterElementSelected {
background: var(--interactable-selected-color);
}
.splitGrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.1rem;
grid-gap: 0.25rem;
}
.autoGrid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
grid-auto-rows: min-content;
grid-gap: 0.1rem;
grid-gap: 0.25rem;
}
.frameGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
grid-auto-rows: min-content;
grid-gap: 0.1rem;
grid-gap: 0.25rem;
}
img {
-webkit-user-drag: none;
@@ -151,6 +157,7 @@ img {
user-drag: none;
}
#framePicker, #maskPicker {
margin: 0.25rem 0;
max-height: 260pt;
overflow-y: auto;
overflow-x: hidden;
@@ -169,35 +176,21 @@ img {
max-width: 1.5rem;
max-height: 1.5rem;
}
#framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
background: var(--interactable-selected-color);
}
#maskPicker > div, #framePicker > div {
background: var(--interactable-color);
color: var(--input-font-color);
cursor: pointer;
}
#maskPicker > div {
padding: 0.5rem;
margin-bottom: 0.1rem;
margin-bottom: 0.25rem;
}
#textPicker {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-auto-rows: min-content;
grid-gap: 0.1rem;
margin: 0.1rem 0px;
grid-gap: 0.25rem;
margin: 0.25rem 0px;
}
#textPicker > div {
font: 1rem belerenbsc;
background: var(--interactable-color);
color: var(--input-font-color);
padding: 0.5rem;
cursor: pointer;
}
#textPicker > div.selectedText {
background: var(--interactable-selected-color);
}
textarea {
@@ -221,34 +214,28 @@ textarea {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr));
grid-auto-rows: min-content;
grid-gap: 0.1rem;
margin-bottom: 1rem;
grid-gap: 0.25rem;
margin-bottom: 0.25rem;
}
.tabPicker > div {
font: 1.2rem belerenbsc;
text-align: center;
padding: 0.5rem 0;
background: var(--interactable-color);
color: var(--input-font-color);
cursor: pointer;
}
.tabPicker > div.tabOptionSelected {
background: var(--interactable-selected-color);
}
input:not([type='checkbox']), textarea, button, select {
font: inherit;
color: var(--input-font-color);
color: inherit;
width: 100%;
background: var(--input-color);
background: var(--layer-background);
border: none;
outline: none;
padding: 0.2rem;
margin-top: 0.1rem;
padding: 0.25rem;
margin-top: 0.25rem;
}
input:not([type='checkbox']):active, textarea:active, button:active {
border: 0.1rem solid var(--input-font-color);
padding: 0.1rem;
border: 0.1rem solid var(--interactable-unselected);
}
input[type='checkbox'] {
position: relative;
@@ -272,31 +259,31 @@ input[type='checkbox'], select, option, input[type='file'], button {
0% {transform: translate(100vw, 0);}
100% {transform: translate(0, 0);}
}
.layerTitle {
.title {
text-align: center;
font: 2rem 'belerenbsc';
font: 2.5rem 'belerenbsc';
padding: 1rem !important;
}
.darkLayer {
background: var(--background-color-contrast);
color: var(--font-color-contrast);
.layer {
background: var(--layer-background);
}
.layer > div {
.layer.clearLayer {
background: none;
}
.animated > div {
opacity: 0;
}
.layer.smallLayer {
padding-top: 1rem;
padding-bottom: 1rem;
}
.layer.revealedLayer > div {
.animated.revealedAnimation > div {
opacity: 1;
}
.layer.revealedLayer.fadeIn > div {
.animated.revealedAnimation.fadeIn > div {
animation: fade-in 2s;
}
.layer.revealedLayer.slideFromLeft > div {
.animated.revealedAnimation.slideFromLeft > div {
animation: slide-from-left 0.8s;
}
.layer.revealedLayer.slideFromRight > div {
.animated.revealedAnimation.slideFromRight > div {
animation: slide-from-right 0.8s;
}
@@ -319,19 +306,19 @@ input[type='checkbox'], select, option, input[type='file'], button {
z-index: 100;
transform: translate(0, -1em);
}*/
.layer.revealedLayer > div > div > div > .sample1 {
.animated.revealedAnimation > div > div > div > .sample1 {
animation: sample-one 2s;
transform: rotate(-10deg) translate(16%, 15%);
}
.layer.revealedLayer > div > div > div > .sample2 {
.animated.revealedAnimation > div > div > div > .sample2 {
animation: sample-two 2s;
transform: rotate(-5deg) translate(10%, 4%);
}
.layer.revealedLayer > div > div > div > .sample4 {
.animated.revealedAnimation > div > div > div > .sample4 {
animation: sample-four 2s;
transform: rotate(5deg) translate(-10%, 4%);
}
.layer.revealedLayer > div > div > div > .sample5 {
.animated.revealedAnimation > div > div > div > .sample5 {
animation: sample-five 2s;
transform: rotate(10deg) translate(-16%, 15%);
}
@@ -374,7 +361,7 @@ input[type='checkbox'], select, option, input[type='file'], button {
}
.indent {
text-indent: 2em;
text-indent: 2rem;
}
.truncate {
@@ -393,12 +380,13 @@ input[type='checkbox'], select, option, input[type='file'], button {
display: grid;
grid-template-columns: 7rem auto;
margin-top: 1rem;
grid-gap: 0.1rem;
grid-gap: 0.25rem;
border: 0.2rem solid var(--interactable-unselected);
border-radius: 0.2rem;
}
#textCodeReference > div {
background: var(--input-color);
padding: 0.1rem;
color: var(--input-font-color);
background: var(--layer-background);
padding: 0.25rem;
}
@@ -407,7 +395,6 @@ input[type='checkbox'], select, option, input[type='file'], button {
bottom: 0;
left: 0;
width: 100%;
color: black;
}
.notification {
display: grid;
@@ -415,11 +402,10 @@ input[type='checkbox'], select, option, input[type='file'], button {
grid-gap: 1rem;
margin: 0.5rem;
padding: 0.5rem;
background: green;
background: var(--layer-background-selected);
}
.notification > .deleteNotification {
text-align: center;
cursor: pointer;
}
@@ -449,8 +435,7 @@ canvas {
width: 100%;
}
footer {
background: var(--background-color-contrast);
color: var(--font-color-contrast);
background: var(--layer-background);
font: 1rem arial;
}
.footer {
@@ -469,6 +454,8 @@ footer {
}
.footer > div > div > select {
width: auto !important;
border: 0.2rem solid var(--interactable-unselected);
border-radius: 0.2rem;
}
@media screen and (min-width: 909pt) { /*Screen is wide enough to show the card next to the editor menu*/
.mainGrid {

48
index.html
View File

@@ -13,10 +13,10 @@
</head>
<body>
<title>Card Conjurer</title>
<div class='title' style='font-size: 4rem;'>Card Conjurer</div>
<div class='layer darkLayer fadeIn'>
<div class='title layer clearLayer' style='font-size: 4rem;'>Card Conjurer</div>
<div class='animated layer fadeIn'>
<div>
<div class='layerTitle'>Welcome to Card Conjurer</div>
<div class='title'>Welcome to Card Conjurer</div>
<div class='fiveSampleCards'>
<div><img src='/data/site/images/samples/sample1.png' alt='loading sample...' class='sample1' id='sample1'></div>
<div><img src='/data/site/images/samples/sample2.png' alt='loading sample...' class='sample2' id='sample2'></div>
@@ -26,11 +26,11 @@
</div>
</div>
</div>
<div class='layer slideFromRight'>
<div class='animated layer clearLayer slideFromRight'>
<div class='cardLayerGrid'>
<img src='/data/site/images/samples/sampleVariety.png' id='sampleVariety'>
<div>
<div class='layerTitle'>
<div class='title'>
Choose From A Variety Of Card Frames
</div>
<div class="justify">
@@ -39,52 +39,24 @@
</div>
</div>
</div>
<!-- <div class='layer darkLayer'>
<div class='ad'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
data-ad-slot="7142663356"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div> -->
<div class='layer darkLayer slideFromLeft'>
<div class='animated layer slideFromLeft'>
<div class='cardLayerGrid'>
<div>
<div class='layerTitle'>
<div class='title'>
Customize To Your Heart's Content
</div>
<div class="justify">
With Card Conjurer's level of customization, you'll have endless options when designing your dream cards. <a style='text-decoration: underline;' href='creator.html'>Try it out!</a>
With Card Conjurer's level of customization, you'll have endless options when designing your dream cards. <a style='text-decoration: underline;' href='/creator'>Try it out!</a>
</div>
</div>
<img src='/data/site/images/samples/sampleCustomize.png' id='sampleCustomize'>
</div>
</div>
<!-- <div class='layer darkLayer'>
<div class='ad'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
data-ad-slot="4606153449"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div> -->
<div class='layer slideFromRight'>
<div class='animated layer clearLayer slideFromRight'>
<div class='cardLayerGrid'>
<img src='/data/site/images/samples/sampleBling.png' id='sampleBling'>
<div>
<div class='layerTitle'>
<div class='title'>
Bling Out Existing Favorites
</div>
<div class="justify">

84
legal/index.html
View File

@@ -13,47 +13,63 @@
</head>
<body>
<title>CC - Terms and Conditions</title>
<div class='darkLayer title'>Introduction</div>
<div class='layer fadeIn'>
Welcome, and thank you for using Card Conjurer!
<br><br>
In these Terms and Conditions ("Terms") CardConjurer.com will refer to itself as "Card Conjurer", "we", "us", or "our".
<br><br>
By using our website ("Services"), you confirm that you have read, understand, and agree to be bound by these Terms.
<div class='layer title'>Introduction</div>
<div class='animated layer clearLayer fadeIn'>
<div>
Welcome, and thank you for using Card Conjurer!
<br><br>
In these Terms and Conditions ("Terms") CardConjurer.com will refer to itself as "Card Conjurer", "we", "us", or "our".
<br><br>
By using our website ("Services"), you confirm that you have read, understand, and agree to be bound by these Terms.
</div>
</div>
<div class='darkLayer title'>Disclaimer</div>
<div class='layer fadeIn'>
We are in no way affiliated with, sponsored by, or endorsed by Wizards of the Coast. Fonts, Mana symbols, and other related images are trademarks and copyrights of Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc.
<br><br>
Some card frames, or elements used in various card frames, were sourced from Chilli_Axe, Kentu, thevodkaboy, and Timmy XD69.
<br><br>
Any user-uploaded artwork is property of the original artist, and it is up to the users to ensure that these images are properly credited.
<div class='layer title'>Disclaimer</div>
<div class='animated layer clearLayer fadeIn'>
<div>
We are in no way affiliated with, sponsored by, or endorsed by Wizards of the Coast. Fonts, Mana symbols, and other related images are trademarks and copyrights of Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc.
<br><br>
Some card frames, or elements used in various card frames, were sourced from Chilli_Axe, Kentu, thevodkaboy, and Timmy XD69.
<br><br>
Any user-uploaded artwork is property of the original artist, and it is up to the users to ensure that these images are properly credited.
</div>
</div>
<div class='darkLayer title'>Terms of Use</div>
<div class='layer fadeIn'>
Our services are intented for personal use only, not commercial.
<br><br>
You will not upload artwork that you do not have permission to use, or is in any way illegal.
<div class='layer title'>Terms of Use</div>
<div class='animated layer clearLayer fadeIn'>
<div>
Our services are intented for personal use only, not commercial.
<br><br>
You will not upload artwork that you do not have permission to use, or is in any way illegal.
</div>
</div>
<div class='darkLayer title'>Cookies</div>
<div class='layer fadeIn'>
By using our services, you are consenting to the storage of cookies on your devices. These cookies only serve to store settings you have previously input to improve your experience.
<div class='layer title'>Cookies</div>
<div class='animated layer clearLayer fadeIn'>
<div>
By using our services, you are consenting to the storage of cookies on your devices. These cookies only serve to store settings you have previously input to improve your experience.
</div>
</div>
<div class='darkLayer title'>Advertising</div>
<div class='layer fadeIn'>
We may present advertisements for or links to third party websites, products, and/or services ("Third Party Ads"). We are not responsible for the availability of these Third Party Ads, the materials they contain, nor any damages or losses they ensue.
<div class='layer title'>Advertising</div>
<div class='animated layer clearLayer fadeIn'>
<div>
We may present advertisements for or links to third party websites, products, and/or services ("Third Party Ads"). We are not responsible for the availability of these Third Party Ads, the materials they contain, nor any damages or losses they ensue.
</div>
</div>
<div class='darkLayer title'>Liability</div>
<div class='layer fadeIn'>
We are not responsible for any damages to your device related to the use of our Services.
<div class='layer title'>Liability</div>
<div class='animated layer clearLayer fadeIn'>
<div>
We are not responsible for any damages to your device related to the use of our Services.
</div>
</div>
<div class='darkLayer title'>Changes</div>
<div class='layer fadeIn'>
We may revise these Terms at any time. We are not responsible for notifying users of any changes to these Terms, and by continuing to use our Services you are agreeing to be bound by the most recent revision.
<div class='layer title'>Changes</div>
<div class='animated layer clearLayer fadeIn'>
<div>
We may revise these Terms at any time. We are not responsible for notifying users of any changes to these Terms, and by continuing to use our Services you are agreeing to be bound by the most recent revision.
</div>
</div>
<div class='darkLayer title'>Contact</div>
<div class='layer fadeIn'>
If you have any questions regarding this Agreement, you may contact us at CardConjurerMTG@gmail.com.
<div class='layer title'>Contact</div>
<div class='animated layer clearLayer fadeIn'>
<div>
If you have any questions regarding this Agreement, you may contact us at CardConjurerMTG@gmail.com.
</div>
</div>
</body>
<footer id='footer'>

14
phyrexian/index.html
View File

@@ -14,10 +14,10 @@
<body>
<title>CC - Phyrexian</title>
<div>
<div class="title darkLayer">
<div class="title layer">
Phyrexian "Translator"
</div>
<div class="layer slideFromRight">
<div class="animated layer clearLayer slideFromRight">
<div class='splitGrid'>
<div>
Input the text you would like to be "translated"
@@ -29,15 +29,14 @@
</div>
</div>
</div>
<div class="layer darkLayer slideFromLeft">
<div class="animated layer slideFromLeft">
<div>
This is not a real translator. It simply detects paragraphs and sentences, then randomly converts characters to phyrexian. Once you have the copied text, drop it into the <a href='creator.html'>Card Creator</a> following {fontphyrexian} wherever you'd like!
</div>
</div>
<div class="layer smallLayer splitGrid">
<div class='ad'>
<div class="adGrid">
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalOne -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"
@@ -48,9 +47,8 @@
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='ad'>
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalTwo -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8226515140557560"