MeowcaTheoRange/Clock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added some more backgrounds.

Browse source
This commit is contained in:
MeowcaTheoRange 2022-09-09 10:09:27 -05:00
parent 397408d4f2
commit 4fffd979d4
8 changed files with 48 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/tile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 453 B

BIN
assets/tile2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

6
canvas.js
View file

@ -3,19 +3,19 @@ document.querySelectorAll(".clock").forEach((clock) => {
var ctx = canvas.getContext("2d");
ctx.resetTransform();
ctx.translate(32, 32);
ctx.strokeStyle = "#FFFFFF";
ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--foreground');
ctx.lineWidth = 2;
ctx.lineCap = "round";
update();
});
function update() {
document.querySelectorAll(".clock").forEach((clock, i) => {
if (clock.classList.contains("main-clock")) return;
var canvas = clock.querySelector("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--foreground');
if (clock.classList.contains("main-clock")) return;
ctx.resetTransform();
ctx.translate(32, 32);
ctx.strokeStyle = "#FFFFFF";
ctx.lineWidth = 2;
ctx.lineCap = "round";
var canvas = clock.querySelector("canvas");

39
index.html
View file

@ -47,23 +47,29 @@
<div class="dialog" id="colordia">
<form id="color">
<p class="dlg-top">Customize Color</p>
<input type="radio" name="color" id="colorred" value="#FF0000|#400000|#800000" /><!--
<input type="radio" name="color" id="colorred" value="#FF0000|#400000|#800000|#FFFFFF" /><!--
--><label for="colorred" style="background-color:#800000">RED</label><!--
--><input type="radio" name="color" id="colororange" value="#FF8000|#402000|#804000" /><!--
--><input type="radio" name="color" id="colororange" value="#FF8000|#402000|#804000|#FFFFFF" /><!--
--><label for="colororange" style="background-color:#804000">ORANGE</label><!--
--><input type="radio" name="color" id="coloryellow" value="#FFFF00|#404000|#808000" /><!--
--><input type="radio" name="color" id="coloramber" value="#f2aa58|#582007|#7c300a|#FFFFFF" /><!--
--><label for="coloramber" style="background-color:#581507">AMBER</label><!--
--><input type="radio" name="color" id="coloryellow" value="#FFFF00|#404000|#808000|#FFFFFF" /><!--
--><label for="coloryellow" style="background-color:#808000">YELLOW</label><!--
--><input type="radio" name="color" id="colorgreen" value="#00FF00|#003000|#006000" /><!--
--><input type="radio" name="color" id="colorgreen" value="#00FF00|#003000|#006000|#FFFFFF" /><!--
--><label for="colorgreen" style="background-color:#006000">GREEN</label><!--
--><input type="radio" name="color" id="colorblue" value="#00FFFF|#003040|#006080" /><!--
--><input type="radio" name="color" id="colorblue" value="#00FFFF|#003040|#006080|#FFFFFF" /><!--
--><label for="colorblue" style="background-color:#006080">BLUE</label><!--
--><input type="radio" name="color" id="colorpurple" value="#FF00FF|#300030|#600060" /><!--
--><input type="radio" name="color" id="colornavy" value="#5865f2|#08116a|#0b168e|#FFFFFF" /><!--
--><label for="colornavy" style="background-color:#08116a">NAVY</label><!--
--><input type="radio" name="color" id="colorpurple" value="#FF00FF|#300030|#600060|#FFFFFF" /><!--
--><label for="colorpurple" style="background-color:#600060">PURPLE</label><!--
--><input type="radio" name="color" id="colordark" value="#FFFF00|#202020|#404040" checked /><!--
--><label for="colordark" style="background-color:#404040">DARK</label><br /><!--
--><input type="radio" name="color" id="colortrans" value="#FFFF00|url(../assets/trans.png)|#404040" /><!--
--><input type="radio" name="color" id="colordark" value="#FFFF00|#202020|#404040|#FFFFFF" checked /><!--
--><label for="colordark" style="background-color:#404040">DARK</label><!--
--><input type="radio" name="color" id="colorlight" value="#FFFF00|#d0d0d0|#b0b0b0|#000000" checked /><!--
--><label for="colorlight" style="background-color:#d0d0d0;color:#000000;">LIGHT</label><br /><!--
--><input type="radio" name="color" id="colortrans" value="#FFFF00|url(../assets/trans.png)|#404040|#FFFFFF" /><!--
--><label for="colortrans" style="background:url(./assets/trans.png)">TRANS</label><!--
--><input type="radio" name="color" id="colorrainbow" value="#FFFF00|url(../assets/rainbow.png)|#404040" /><!--
--><input type="radio" name="color" id="colorrainbow" value="#FFFF00|url(../assets/rainbow.png)|#404040|#FFFFFF" /><!--
--><label for="colorrainbow" style="background:url(./assets/rainbow.png)">RAINBOW</label><br />
<p class="dlg-top">Customize Background</p>
<input type="radio" name="background" id="bgnone" value="../assets/none.png" /><!--
@ -83,7 +89,11 @@
--><input type="radio" name="background" id="bgsport" value="../assets/sport.png" /><!--
--><label for="bgsport" style="background-image: url(./assets/sport.png)">SPORT</label><!--
--><input type="radio" name="background" id="bgmark" value="../assets/mark.png" /><!--
--><label for="bgmark" style="background-image: url(./assets/mark.png)">MARK</label><br />
--><label for="bgmark" style="background-image: url(./assets/mark.png)">MARK</label><!--
--><input type="radio" name="background" id="bgtile" value="../assets/tile.png" /><!--
--><label for="bgtile" style="background-image: url(./assets/tile.png)">TILE</label><!--
--><input type="radio" name="background" id="bgtiletwo" value="../assets/tile2.png" /><!--
--><label for="bgtiletwo" style="background-image: url(./assets/tile2.png)">DIAG</label><br />
<div>
<input type="submit" name="action" value="DONE"/>
</div>
@ -127,7 +137,6 @@
</div>
</div>
<div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
<script src="./canvas.js"></script>
<script>
var elem = document.documentElement;
@ -160,15 +169,17 @@ document.querySelector("#color").addEventListener("submit", (e) => {
document.documentElement.style.setProperty('--main-color', colors[0]);
document.documentElement.style.setProperty('--background', colors[1]);
document.documentElement.style.setProperty('--background-light', colors[2]);
document.documentElement.style.setProperty('--foreground', colors[3]);
document.documentElement.style.setProperty('--background-image', "url(" + formData.get("background") + ")");
document.querySelector('.scr-dialog--').classList.remove('open');
event.preventDefault();
})
var colors = (localStorage.getItem("colors") ?? "#FFFF00|#202020|#404040").split("|");
var colors = (localStorage.getItem("colors") ?? "#FFFF00|#202020|#404040|#FFFFFF").split("|");
document.documentElement.style.setProperty('--main-color', colors[0]);
document.documentElement.style.setProperty('--background', colors[1]);
document.documentElement.style.setProperty('--background-light', colors[2]);
document.documentElement.style.setProperty('--foreground', colors[3]);
document.documentElement.style.setProperty('--background-image', "url(" + (localStorage.getItem("background") ?? "../assets/clock.png") + ")");
document.querySelector("#color").addEventListener("change", (e) => {
@ -176,6 +187,7 @@ document.querySelector("#color").addEventListener("change", (e) => {
var colors = formData.get("color").split("|");
document.documentElement.style.setProperty('--main-color', colors[0]);
document.documentElement.style.setProperty('--background', colors[1]);
document.documentElement.style.setProperty('--foreground', colors[3]);
document.documentElement.style.setProperty('--background-light', colors[2]);
})
@ -194,5 +206,6 @@ document.querySelector("#timezone").addEventListener("submit", (e) => {
document.querySelector('.scr-timezone--').classList.remove('open');
})
</script>
<script src="./canvas.js"></script>
</body>
</html>

12
styles/clock.css
View file

@ -18,7 +18,7 @@
overflow: hidden;
padding: 16px;
box-sizing: border-box;
color: white;
color: var(--foreground);
margin: 16px 0;
}
@ -40,7 +40,7 @@
margin: 0;
margin-top: 16px;
padding: 0;
color: white;
color: var(--foreground);
font-weight: lighter;
vertical-align: middle;
}
@ -55,14 +55,14 @@
.body .clock div.labels * {
margin: 0;
padding: 0;
color: white;
color: var(--foreground);
font-weight: lighter;
display: inline-block;
vertical-align: middle;
}
.body .clock div.labels .timezone {
color: #c0c0c0;
color: #888888;
}
canvas {
@ -83,7 +83,7 @@ textarea {
border: none;
border-radius: 4px;
background-color: #00000040;
color: white;
color: var(--foreground);
}
.deleteclock {
@ -93,7 +93,7 @@ textarea {
padding: 0;
border: none;
background-color: #FF000080;
color: white;
color: var(--foreground);
border-radius: 16px;
transition: background-color 0.125s;
}

9
styles/dialog.css
View file

@ -17,7 +17,7 @@
min-height: 128px;
background-color: var(--background-light);
transition: background-color 0.125s;
color: white;
color: var(--foreground);
border-radius: 8px;
padding: 16px;
box-sizing: border-box;
@ -83,6 +83,7 @@ input[type="radio"] + label {
height: 64px;
border-radius: 4px;
box-shadow: 0 0 4px 2px rgba(0,0,0,0.25);
color: #FFFFFF;
transition: border 0.25s;
box-sizing: border-box;
border: 8px solid transparent;
@ -90,6 +91,10 @@ input[type="radio"] + label {
background-repeat: no-repeat;
}
input[type="radio"] + label[for^="bg"] {
color: var(--foreground);
}
input[type="radio"]:checked + label {
border: 8px solid #FFF6;
}
@ -108,5 +113,5 @@ input[type="radio"]:focus + label {
border: none;
border-radius: 4px;
background-color: #00000040;
color: white;
color: var(--foreground);
}

1
styles/root.css
View file

@ -2,5 +2,6 @@
--main-color: #FFFF00;
--background: #202020;
--background-light: #404040;
--foreground: #FFFFFF;
--background-image: url("../assets/clock.png");
}

10
styles/style.css
View file

@ -12,7 +12,7 @@ body {
background-image: var(--background-image);
background-size: 128px;
background-position: center;
opacity: 0.15;
opacity: 0.35;
position: fixed;
height: 100%;
width: 100%;
@ -110,7 +110,7 @@ body {
margin: none;
background-color: transparent;
transition: background-color 0.125s;
color: #FFFFFF;
color: var(--foreground);
position: relative;
display: flex;
flex-direction: row;
@ -162,7 +162,7 @@ body {
.header.wide button::after {
left: 48px;
top: calc(50% - 7px);
color: white;
color: var(--foreground);
width: initial;
height: 14px;
padding: 0;
@ -182,7 +182,7 @@ sep {
width: 100%;
height: 0;
background-color: transparent;
border: 1px dashed #FFFFFF;
border: 1px dashed var(--foreground);
margin: 4px;
z-index: 9;
}
@ -212,7 +212,7 @@ sep {
border: none;
border-radius: 16px;
background-color: transparent;
color: white;
color: var(--foreground);
}
.poplight button.hide::after {