GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -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> </head>
<body> <body>
<title>CC - About</title> <title>CC - About</title>
<div class='darkLayer fadeIn'><div class='title'>About Me</div></div> <div class='animated layer fadeIn title'>About Me</div>
<div class='layer fadeIn'> <div class='animated layer clearLayer fadeIn'>
<div class='indent'> <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. 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> </div><br>

17
askurza/index.html
View File

@@ -39,8 +39,7 @@
grid-column: 1 / span 3; grid-column: 1 / span 3;
padding: 1rem; padding: 1rem;
margin: 0.5rem; margin: 0.5rem;
background: var(--background-color-contrast); background: var(--layer-background);
color: var(--font-color-contrast);
border-radius: 1rem; border-radius: 1rem;
font: 1.5rem belerenb; font: 1.5rem belerenb;
} }
@@ -75,10 +74,10 @@
} }
</style> </style>
<div> <div>
<div class="title darkLayer"> <div class="title layer">
Ask Urza 2.0 Ask Urza 2.0
</div> </div>
<div class="layer slideFromRight"> <div class="animated layer clearLayer slideFromRight">
<div> <div>
<div class="askUrzaGrid"> <div class="askUrzaGrid">
<div class="urzaCard"> <div class="urzaCard">
@@ -99,15 +98,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layer darkLayer slideFromLeft"> <div class="animated layer slideFromLeft">
<div class="indent"> <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! 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> </div>
<div class="layer smallLayer splitGrid"> <div class="adGrid">
<div class='ad'> <div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalOne -->
<ins class="adsbygoogle" <ins class="adsbygoogle"
style="display:block" style="display:block"
data-ad-client="ca-pub-8226515140557560" data-ad-client="ca-pub-8226515140557560"
@@ -118,9 +116,8 @@
(adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});
</script> </script>
</div> </div>
<div class='ad'> <div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalTwo -->
<ins class="adsbygoogle" <ins class="adsbygoogle"
style="display:block" style="display:block"
data-ad-client="ca-pub-8226515140557560" data-ad-client="ca-pub-8226515140557560"

93
creator/index.html
View File

@@ -13,7 +13,7 @@
</head> </head>
<body> <body>
<title>Card Conjurer</title> <title>Card Conjurer</title>
<div class='title darklayer'>Card Conjurer</div> <div class='title layer'>Card Conjurer</div>
<script> <script>
var cardWidth = 1500, cardHeight = 2100 var cardWidth = 1500, cardHeight = 2100
if (window.location.search != "") { if (window.location.search != "") {
@@ -31,15 +31,14 @@
<canvas id="previewCanvas"></canvas> <canvas id="previewCanvas"></canvas>
<div> <div>
<div class='tabPicker' id='tabPicker'> <div class='tabPicker' id='tabPicker'>
<div onclick='toggleTabs(this, "frameTab")' class='tabOptionSelected'>Frame</div> <div onclick='toggleTabs(this, "frameTab")' class='selected interactable'>Frame</div>
<div onclick='toggleTabs(this, "textTab")'>Text</div> <div onclick='toggleTabs(this, "textTab")' class='interactable'>Text</div>
<div onclick='toggleTabs(this, "artTab")'>Art</div> <div onclick='toggleTabs(this, "artTab")' class='interactable'>Art</div>
<div onclick='toggleTabs(this, "setSymbolTab")'>Set Symbol</div> <div onclick='toggleTabs(this, "setSymbolTab")' class='interactable'>Set Symbol</div>
<div onclick='toggleTabs(this, "watermarkTab")'>Watermark</div> <div onclick='toggleTabs(this, "watermarkTab")' class='interactable'>Watermark</div>
<div onclick='toggleTabs(this, "collectorTab")'>Collector</div> <div onclick='toggleTabs(this, "collectorTab")' class='interactable'>Collector</div>
<div onclick='toggleTabs(this, "importTab")'>Import</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"}}'>Tutorial</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 onclick='toggleTabs(this, "advancedTab")'>Advanced</div> -->
</div> </div>
<div id='tabOptions'> <div id='tabOptions'>
<div id='frameTab'> <div id='frameTab'>
@@ -72,7 +71,7 @@
<option value="regular">Regular</option> <option value="regular">Regular</option>
</select> </select>
</div> </div>
</div><br> </div>
<div class="splitGrid"> <div class="splitGrid">
<div id="framePicker" class="frameGrid"></div> <div id="framePicker" class="frameGrid"></div>
<div id="maskPicker"></div> <div id="maskPicker"></div>
@@ -199,38 +198,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layer darkLayer smallLayer splitGrid"> <div class='animated layer slideFromRight'>
<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> <div>
<div> <div>
<div class='layerTitle'> <div class='title'>
Share Your Cards! Share Your Cards!
</div> </div>
<div class='justify'> <div class='justify'>
@@ -239,10 +210,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layer darkLayer smallLayer splitGrid"> <div class="adGrid">
<div class='ad'> <div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalThree -->
<ins class="adsbygoogle" <ins class="adsbygoogle"
style="display:block" style="display:block"
data-ad-client="ca-pub-8226515140557560" data-ad-client="ca-pub-8226515140557560"
@@ -253,9 +223,8 @@
(adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});
</script> </script>
</div> </div>
<div class='ad'> <div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalFour -->
<ins class="adsbygoogle" <ins class="adsbygoogle"
style="display:block" style="display:block"
data-ad-client="ca-pub-8226515140557560" data-ad-client="ca-pub-8226515140557560"
@@ -267,23 +236,47 @@
</script> </script>
</div> </div>
</div> </div>
<div class='layer slideFromLeft'> <div class='animated layer slideFromLeft'>
<div class='cardLayerGrid'> <div class='cardLayerGrid'>
<div> <div>
<div class='layerTitle'> <div class='title'>
How You Can Help How You Can Help
</div> </div>
<div class="justify"> <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! 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> </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/sortable.js"></script>
<script defer src="/data/scripts/main.js"></script> <script defer src="/data/scripts/main.js"></script>
<script defer src="/data/scripts/versions/m15/version.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> <div class='notificationContainer'></div>
</body> </body>
<footer id='footer'> <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 //CSS & HTML stuff
window.layerElements = document.querySelectorAll('.layer') window.animatedElements = document.querySelectorAll('.animated')
window.addEventListener('resize', windowResized) window.addEventListener('resize', windowResized)
window.addEventListener('scroll', windowScrolled) window.addEventListener('scroll', windowScrolled)
windowResized() windowResized()
@@ -9,10 +9,10 @@ function windowResized() {
windowScrolled() windowScrolled()
} }
function windowScrolled() { function windowScrolled() {
for (var i = 0; i < layerElements.length; i++) { for (var i = 0; i < animatedElements.length; i++) {
var positionFromTop = (layerElements[i].getBoundingClientRect().top + layerElements[i].getBoundingClientRect().bottom) / 2 var positionFromTop = (animatedElements[i].getBoundingClientRect().top + animatedElements[i].getBoundingClientRect().bottom) / 2
if (positionFromTop - windowHeight <= 0) { 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() { function setSymbolFromGatherer() {
if (document.getElementById('inputSetCode').value.toLowerCase() == 'cc') { 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 == '') { if (document.getElementById('inputSetRarity').value == '') {
newSetSymbolSource += 'c' newSetSymbolSource += 'c'
} }
@@ -154,7 +154,7 @@ class cardPlaceholder {
cardMasterElement() { cardMasterElement() {
var temporaryElement = document.createElement('div') var temporaryElement = document.createElement('div')
temporaryElement.id = 'uniqueNumber' + this.uniqueNumber 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>' temporaryElement.innerHTML = '<span class="handle">|||</span><div style="grid-column: 2 / 4">' + this.name + '</div><span></span>'
return temporaryElement return temporaryElement
} }
@@ -199,7 +199,7 @@ class cardImage {
cardMasterElement() { cardMasterElement() {
var temporaryElement = document.createElement('div') var temporaryElement = document.createElement('div')
temporaryElement.id = 'uniqueNumber' + this.uniqueNumber 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.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() { temporaryElement.onclick = function() {
if (document.getElementById('cardMasterElementEditor').classList.contains('hidden') && !deletingCardObject) { if (document.getElementById('cardMasterElementEditor').classList.contains('hidden') && !deletingCardObject) {
@@ -214,8 +214,8 @@ class cardImage {
document.getElementById('cardMasterElementEditorScale').value = scaleX(selectedObject.width) document.getElementById('cardMasterElementEditorScale').value = scaleX(selectedObject.width)
document.getElementById('cardMasterElementEditorOpacity').value = selectedObject.opacity * 100 document.getElementById('cardMasterElementEditorOpacity').value = selectedObject.opacity * 100
document.getElementById('cardMasterElementEditorErase').checked = selectedObject.erase document.getElementById('cardMasterElementEditorErase').checked = selectedObject.erase
Array.from(document.getElementById('cardMaster').children).forEach(element => element.classList.remove('cardMasterElementSelected')) Array.from(document.getElementById('cardMaster').children).forEach(element => element.classList.remove('selected'))
this.classList.add('cardMasterElementSelected') this.classList.add('selected')
} }
return temporaryElement return temporaryElement
} }
@@ -292,31 +292,31 @@ class frameImage {
this.masks = masks this.masks = masks
this.framePickerElement = document.createElement('div') this.framePickerElement = document.createElement('div')
this.framePickerElement.id = 'frameIndex' + frameImageListIndex this.framePickerElement.id = 'frameIndex' + frameImageListIndex
this.framePickerElement.classList.add(frameClass) this.framePickerElement.classList.add(frameClass, 'interactable')
this.framePickerElement.onclick = this.frameOptionClicked this.framePickerElement.onclick = this.frameOptionClicked
this.framePickerElement.innerHTML = '<img src=' + this.image.src + '>' this.framePickerElement.innerHTML = '<img src=' + this.image.src + '>'
document.getElementById('framePicker').appendChild(this.framePickerElement) document.getElementById('framePicker').appendChild(this.framePickerElement)
} }
frameOptionClicked() { frameOptionClicked() {
Array.from(document.getElementById('framePicker').children).forEach(element => element.classList.remove('frameOptionSelected')) Array.from(document.getElementById('framePicker').children).forEach(element => element.classList.remove('selected'))
this.classList.add('frameOptionSelected') this.classList.add('selected')
if (parseInt(this.id.replace('frameIndex', '')) != selectedFrameImage) { if (parseInt(this.id.replace('frameIndex', '')) != selectedFrameImage) {
selectedFrameImage = parseInt(this.id.replace('frameIndex', '')) selectedFrameImage = parseInt(this.id.replace('frameIndex', ''))
document.getElementById('maskPicker').innerHTML = '' 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>') 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('maskOptionSelected') document.getElementById('maskPicker').children[0].classList.add('selected')
selectedMaskImage = parseInt(document.getElementById('maskPicker').children[0].id.replace('maskOption', '')) selectedMaskImage = parseInt(document.getElementById('maskPicker').children[0].id.replace('maskOption', ''))
updateSelectedFramePreview() updateSelectedFramePreview()
} }
} }
} }
function maskOptionClicked(event) { 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') { 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', '')) selectedMaskImage = parseInt(event.target.parentElement.id.replace('maskOption', ''))
} else { } else {
event.target.classList.add('maskOptionSelected') event.target.classList.add('selected')
selectedMaskImage = parseInt(event.target.id.replace('maskOption', '')) selectedMaskImage = parseInt(event.target.id.replace('maskOption', ''))
} }
updateSelectedFramePreview() updateSelectedFramePreview()
@@ -407,12 +407,12 @@ function getFloat(input) {
function loadTextOptions(textArray) { function loadTextOptions(textArray) {
document.getElementById('textPicker').innerHTML = '' document.getElementById('textPicker').innerHTML = ''
cardTextList = textArray 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() document.getElementById('textPicker').children[0].click()
} }
function textOptionClicked(event, index) { function textOptionClicked(event, index) {
Array.from(document.getElementById('textPicker').children).forEach(element => element.classList.remove('selectedText')) Array.from(document.getElementById('textPicker').children).forEach(element => element.classList.remove('selected'))
event.target.classList.add('selectedText') event.target.classList.add('selected')
selectedTextObject = cardTextList[index] selectedTextObject = cardTextList[index]
document.getElementById('textEditorText').value = selectedTextObject.text document.getElementById('textEditorText').value = selectedTextObject.text
document.getElementById('textEditorX').value = scaleX(selectedTextObject.x) document.getElementById('textEditorX').value = scaleX(selectedTextObject.x)
@@ -846,8 +846,8 @@ function beforeAfter(targetString, beforeString, afterString) {
} }
function toggleTabs(clickedElement, targetId) { function toggleTabs(clickedElement, targetId) {
Array.from(clickedElement.parentElement.children).forEach(element => element.classList.remove('tabOptionSelected')) Array.from(clickedElement.parentElement.children).forEach(element => element.classList.remove('selected'))
clickedElement.classList.add('tabOptionSelected') clickedElement.classList.add('selected')
Array.from(document.getElementById(targetId).parentElement.children).forEach(element => element.classList.add('hidden')) Array.from(document.getElementById(targetId).parentElement.children).forEach(element => element.classList.add('hidden'))
document.getElementById(targetId).classList.remove('hidden') document.getElementById(targetId).classList.remove('hidden')
} }
@@ -941,7 +941,7 @@ function textCodeReference() {
function notify(message, color) { function notify(message, color) {
document.getElementsByClassName('notificationContainer')[0].innerHTML += ` 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>` + message + `</div>
<div class='deleteNotification' onclick='this.parentElement.parentNode.removeChild(this.parentElement)'>X</div> <div class='deleteNotification' onclick='this.parentElement.parentNode.removeChild(this.parentElement)'>X</div>
</div> </div>

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

@@ -1,10 +1,19 @@
rootStyles.setProperty('--background-color', '#3a3838') rootStyles.setProperty('--site-background', '#3a3838')
rootStyles.setProperty('--background-color-contrast', '#242424') rootStyles.setProperty('--layer-background', '#242424')
rootStyles.setProperty('--interactable-color', '#2b2b2b') rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-selected-color', '#1d1d1d') rootStyles.setProperty('--interactable-unselected', '#666666')
rootStyles.setProperty('--input-color', '#2b2b2b') rootStyles.setProperty('--interactable-selected', '#99ee99')
rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--font-color', '#efefef') rootStyles.setProperty('--font-color', '#efefef')
rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'none') rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'darkMode') 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('--site-background', '#f5f5f5')
rootStyles.setProperty('--background-color-contrast', '#f5f5f5') rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--interactable-color', '#dfdfdf') rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-selected-color', '#cccccc') rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
rootStyles.setProperty('--input-color', '#dadada') rootStyles.setProperty('--interactable-selected', '#00aa00')
rootStyles.setProperty('--input-font-color', '#000') rootStyles.setProperty('--font-color', '#000000')
rootStyles.setProperty('--font-color', '#000') rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed')
rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'dayRave') setCookie('colorPalette', 'dayRave')
//Cycles through a rainbow! //Cycles through a rainbow!
@@ -23,7 +21,7 @@ var currentColorIndex = 0
function changeColor() { function changeColor() {
var colors = indexToColor(currentColorIndex) var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead) 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 currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
} }
function indexToColor(colorIndex) { function indexToColor(colorIndex) {

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

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

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

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

159
data/styles/main.css
View File

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

48
index.html
View File

@@ -13,10 +13,10 @@
</head> </head>
<body> <body>
<title>Card Conjurer</title> <title>Card Conjurer</title>
<div class='title' style='font-size: 4rem;'>Card Conjurer</div> <div class='title layer clearLayer' style='font-size: 4rem;'>Card Conjurer</div>
<div class='layer darkLayer fadeIn'> <div class='animated layer fadeIn'>
<div> <div>
<div class='layerTitle'>Welcome to Card Conjurer</div> <div class='title'>Welcome to Card Conjurer</div>
<div class='fiveSampleCards'> <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/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> <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>
</div> </div>
<div class='layer slideFromRight'> <div class='animated layer clearLayer slideFromRight'>
<div class='cardLayerGrid'> <div class='cardLayerGrid'>
<img src='/data/site/images/samples/sampleVariety.png' id='sampleVariety'> <img src='/data/site/images/samples/sampleVariety.png' id='sampleVariety'>
<div> <div>
<div class='layerTitle'> <div class='title'>
Choose From A Variety Of Card Frames Choose From A Variety Of Card Frames
</div> </div>
<div class="justify"> <div class="justify">
@@ -39,52 +39,24 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class='layer darkLayer'> <div class='animated layer slideFromLeft'>
<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='cardLayerGrid'> <div class='cardLayerGrid'>
<div> <div>
<div class='layerTitle'> <div class='title'>
Customize To Your Heart's Content Customize To Your Heart's Content
</div> </div>
<div class="justify"> <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>
</div> </div>
<img src='/data/site/images/samples/sampleCustomize.png' id='sampleCustomize'> <img src='/data/site/images/samples/sampleCustomize.png' id='sampleCustomize'>
</div> </div>
</div> </div>
<!-- <div class='layer darkLayer'> <div class='animated layer clearLayer slideFromRight'>
<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='cardLayerGrid'> <div class='cardLayerGrid'>
<img src='/data/site/images/samples/sampleBling.png' id='sampleBling'> <img src='/data/site/images/samples/sampleBling.png' id='sampleBling'>
<div> <div>
<div class='layerTitle'> <div class='title'>
Bling Out Existing Favorites Bling Out Existing Favorites
</div> </div>
<div class="justify"> <div class="justify">

84
legal/index.html
View File

@@ -13,47 +13,63 @@
</head> </head>
<body> <body>
<title>CC - Terms and Conditions</title> <title>CC - Terms and Conditions</title>
<div class='darkLayer title'>Introduction</div> <div class='layer title'>Introduction</div>
<div class='layer fadeIn'> <div class='animated layer clearLayer fadeIn'>
Welcome, and thank you for using Card Conjurer! <div>
<br><br> Welcome, and thank you for using Card Conjurer!
In these Terms and Conditions ("Terms") CardConjurer.com will refer to itself as "Card Conjurer", "we", "us", or "our". <br><br>
<br><br> In these Terms and Conditions ("Terms") CardConjurer.com will refer to itself as "Card Conjurer", "we", "us", or "our".
By using our website ("Services"), you confirm that you have read, understand, and agree to be bound by these Terms. <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>
<div class='darkLayer title'>Disclaimer</div> <div class='layer title'>Disclaimer</div>
<div class='layer fadeIn'> <div class='animated layer clearLayer 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. <div>
<br><br> 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.
Some card frames, or elements used in various card frames, were sourced from Chilli_Axe, Kentu, thevodkaboy, and Timmy XD69. <br><br>
<br><br> Some card frames, or elements used in various card frames, were sourced from Chilli_Axe, Kentu, thevodkaboy, and Timmy XD69.
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. <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>
<div class='darkLayer title'>Terms of Use</div> <div class='layer title'>Terms of Use</div>
<div class='layer fadeIn'> <div class='animated layer clearLayer fadeIn'>
Our services are intented for personal use only, not commercial. <div>
<br><br> Our services are intented for personal use only, not commercial.
You will not upload artwork that you do not have permission to use, or is in any way illegal. <br><br>
You will not upload artwork that you do not have permission to use, or is in any way illegal.
</div>
</div> </div>
<div class='darkLayer title'>Cookies</div> <div class='layer title'>Cookies</div>
<div class='layer fadeIn'> <div class='animated layer clearLayer 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>
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>
<div class='darkLayer title'>Advertising</div> <div class='layer title'>Advertising</div>
<div class='layer fadeIn'> <div class='animated layer clearLayer 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>
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>
<div class='darkLayer title'>Liability</div> <div class='layer title'>Liability</div>
<div class='layer fadeIn'> <div class='animated layer clearLayer fadeIn'>
We are not responsible for any damages to your device related to the use of our Services. <div>
We are not responsible for any damages to your device related to the use of our Services.
</div>
</div> </div>
<div class='darkLayer title'>Changes</div> <div class='layer title'>Changes</div>
<div class='layer fadeIn'> <div class='animated layer clearLayer 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>
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>
<div class='darkLayer title'>Contact</div> <div class='layer title'>Contact</div>
<div class='layer fadeIn'> <div class='animated layer clearLayer fadeIn'>
If you have any questions regarding this Agreement, you may contact us at CardConjurerMTG@gmail.com. <div>
If you have any questions regarding this Agreement, you may contact us at CardConjurerMTG@gmail.com.
</div>
</div> </div>
</body> </body>
<footer id='footer'> <footer id='footer'>

14
phyrexian/index.html
View File

@@ -14,10 +14,10 @@
<body> <body>
<title>CC - Phyrexian</title> <title>CC - Phyrexian</title>
<div> <div>
<div class="title darkLayer"> <div class="title layer">
Phyrexian "Translator" Phyrexian "Translator"
</div> </div>
<div class="layer slideFromRight"> <div class="animated layer clearLayer slideFromRight">
<div class='splitGrid'> <div class='splitGrid'>
<div> <div>
Input the text you would like to be "translated" Input the text you would like to be "translated"
@@ -29,15 +29,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layer darkLayer slideFromLeft"> <div class="animated layer slideFromLeft">
<div> <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! 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> </div>
<div class="layer smallLayer splitGrid"> <div class="adGrid">
<div class='ad'> <div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalOne -->
<ins class="adsbygoogle" <ins class="adsbygoogle"
style="display:block" style="display:block"
data-ad-client="ca-pub-8226515140557560" data-ad-client="ca-pub-8226515140557560"
@@ -48,9 +47,8 @@
(adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});
</script> </script>
</div> </div>
<div class='ad'> <div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adHorizontalTwo -->
<ins class="adsbygoogle" <ins class="adsbygoogle"
style="display:block" style="display:block"
data-ad-client="ca-pub-8226515140557560" data-ad-client="ca-pub-8226515140557560"