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

restyle

Browse Source
This commit is contained in:
Kyle
2020-07-24 17:15:43 -07:00
parent e07991da20
commit 2b9e17ea0c
15 changed files with 139 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
data/images/site/backgrounds/lowpolyDarkBlue.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

72
data/images/site/backgrounds/lowpolyDarkGreen.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 47 KiB

8
data/images/site/backgrounds/lowpolyDarkRed.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

12
data/images/site/backgrounds/lowpolyLightGray.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

12
data/images/site/backgrounds/lowpolyLightGreen.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

4
data/scripts/cookies.js
View File

@@ -28,7 +28,9 @@ function checkCookies() {
setTimeout(function() {
document.getElementById('inputColorPalette').value = getCookie('colorPalette')
}, 1000)
}
} else {
loadScript('/data/scripts/palettes/lowpolyGreen.js')
}
}
checkCookies()

7
data/scripts/footer.js
View File

@@ -13,11 +13,16 @@ document.getElementById('footer').innerHTML = `
<hr>
<div>
<select id='inputColorPalette' onchange='loadScript("/data/scripts/palettes/" + this.value + ".js")'>
<option disabled>Bare Bones</option>
<option value='lightMode'>Light Mode</option>
<option value='darkMode'>Dark Mode</option>
<option disabled>Lowpoly</option>
<option value='lowpolyRed'>Red</option>
<option value='lowpolyGreen' selected='selected'>Green</option>
<option value='lowpolyBlue'>Blue</option>
<option disabled>Color-Changing</option>
<option value='dayRave'>Day Rave</option>
<option value='nightRave'>Night Rave</option>
<option value='lowpoly'>Lowpoly</option>
</select>
</div>
</div>

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

@@ -1,19 +1,9 @@
rootStyles.setProperty('--site-background', '#3a3838')
rootStyles.setProperty('--site-background-filter', 'none')
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', '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')
setCookie('colorPalette', 'darkMode')

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

@@ -1,58 +1,30 @@
rootStyles.setProperty('--site-background', '#f5f5f5')
rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--site-background', '#f5f5f5 url("/data/images/site/backgrounds/lowpolyLightGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background-filter', 'none')
rootStyles.setProperty('--layer-background', '#e4e4e4 url("/data/images/site/backgrounds/lowpolyLightGray.svg") left/cover no-repeat fixed')
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')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'dayRave')
//Cycles through a rainbow!
if (currentColorIndex == undefined) {
document.getElementById('inputColorPalette').addEventListener('change', function() {
clearInterval(raveMode)
})
}
var raveMode = setInterval(changeColor, 250)
var regularAdjust = 0//60
var lightAdjust = 64//100
var lightLead = 255
var currentColorIndex = 0
function changeColor() {
var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead)
rootStyles.setProperty('--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) {
var red = 0, green = 0, blue = 0
var realColorIndex = colorIndex - Math.floor(colorIndex / 1530) * 1530
var colorStage = Math.floor(realColorIndex / 255)
switch(colorStage) {
case 0:
green = 255
red = realColorIndex - Math.floor(realColorIndex / 255) * 255
break
case 1:
red = 255
green = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
break
case 2:
red = 255
blue = realColorIndex - Math.floor(realColorIndex / 255) * 255
break
case 3:
blue = 255
red = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
break
case 4:
blue = 255
green = realColorIndex - Math.floor(realColorIndex / 255) * 255
break
case 5:
green = 255
blue = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
break
//Shifts the hue
var colorCycle = setInterval(shiftHue, 100)
var currentHueRotation = 0
function shiftHue() {
rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)')
currentHueRotation += 1
if (currentHueRotation == 360) {
currentHueRotation = 0
}
return [red, green, blue]
}
//Stops the hue shift when another palette is loaded
document.getElementById('inputColorPalette').addEventListener('change', removeEventListener, false)
function removeEventListener() {
console.log('cleared')
clearInterval(colorCycle)
document.getElementById('inputColorPalette').removeEventListener('change', removeEventListener, false)
}

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

@@ -1,4 +1,5 @@
rootStyles.setProperty('--site-background', '#f5f5f5')
rootStyles.setProperty('--site-background-filter', 'none')
rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa')

9
data/scripts/palettes/lowpolyBlue.js Normal file
View File

@@ -0,0 +1,9 @@
rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkBlue.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background-filter', 'none')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed')
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', 'none')
setCookie('colorPalette', 'lowpolyBlue')

3
data/scripts/palettes/lowpoly.js → data/scripts/palettes/lowpolyGreen.js
View File

@@ -1,8 +1,9 @@
rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background-filter', 'none')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed')
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', 'none')
setCookie('colorPalette', 'lowpoly')
setCookie('colorPalette', 'lowpolyGreen')

9
data/scripts/palettes/lowpolyRed.js Normal file
View File

@@ -0,0 +1,9 @@
rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkRed.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background-filter', 'none')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed')
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', 'none')
setCookie('colorPalette', 'lowpolyRed')

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

@@ -1,59 +1,30 @@
rootStyles.setProperty('--site-background', '#3a3838')
rootStyles.setProperty('--layer-background', '#242424')
rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background-filter', 'none')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed')
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')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'nightRave')
console.log('oh no')
//Cycles through a rainbow!
if (currentColorIndex == undefined) {
document.getElementById('inputColorPalette').addEventListener('change', function() {
clearInterval(raveMode)
})
}
var raveMode = setInterval(changeColor, 250)
var regularAdjust = 0//60
var lightAdjust = 64//100
var lightLead = 255
var currentColorIndex = 0
function changeColor() {
var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead)
rootStyles.setProperty('--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) {
var red = 0, green = 0, blue = 0
var realColorIndex = colorIndex - Math.floor(colorIndex / 1530) * 1530
var colorStage = Math.floor(realColorIndex / 255)
switch(colorStage) {
case 0:
green = 255
red = realColorIndex - Math.floor(realColorIndex / 255) * 255
break
case 1:
red = 255
green = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
break
case 2:
red = 255
blue = realColorIndex - Math.floor(realColorIndex / 255) * 255
break
case 3:
blue = 255
red = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
break
case 4:
blue = 255
green = realColorIndex - Math.floor(realColorIndex / 255) * 255
break
case 5:
green = 255
blue = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
break
//Shifts the hue
var colorCycle = setInterval(shiftHue, 100)
var currentHueRotation = 0
function shiftHue() {
rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)')
currentHueRotation += 1
if (currentHueRotation == 360) {
currentHueRotation = 0
}
return [red, green, blue]
}
//Stops the hue shift when another palette is loaded
document.getElementById('inputColorPalette').addEventListener('change', removeEventListener, false)
function removeEventListener() {
console.log('cleared')
clearInterval(colorCycle)
document.getElementById('inputColorPalette').removeEventListener('change', removeEventListener, false)
}

31
data/styles/main.css
View File

@@ -41,23 +41,35 @@
}
:root {
--site-background: #f5f5f5;
--layer-background: #e4e4e4;
--layer-background-selected: #ccc;
--interactable-unselected: #aaa;
--interactable-selected: #00aa00;
--font-color: #000;
--site-background: #3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed;
--site-background-filter: none;
--layer-background: #242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed;
--layer-background-selected: #1d1d1d;
--interactable-unselected: #666666;
--interactable-selected: #99ee99;
--font-color: #efefef;
--body-background: none;
}
html {
font: 12pt georgia;
background: var(--site-background);
color: var(--font-color);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--site-background);
filter: var(--site-background-filter);
z-index: -1;
}
html, body {
margin: 0;
@@ -77,10 +89,6 @@ a:hover {
text-decoration: underline;
}
/*.ad {
margin: 0;
padding: 0;
}*/
.adGrid {
width: 100%;
display: grid;
@@ -88,6 +96,7 @@ a:hover {
grid-auto-rows: min-content;
justify-items: center;
align-items: center;
margin: 1rem 0;
}
.adGrid > div {
width: 100%;