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

39
index.html
View file

@ -47,23 +47,29 @@
<div class="dialog" id="colordia"> <div class="dialog" id="colordia">
<form id="color"> <form id="color">
<p class="dlg-top">Customize Color</p> <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><!-- --><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><!-- --><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><!-- --><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><!-- --><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><!-- --><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><!-- --><label for="colorpurple" style="background-color:#600060">PURPLE</label><!--
--><input type="radio" name="color" id="colordark" value="#FFFF00|#202020|#404040" checked /><!-- --><input type="radio" name="color" id="colordark" value="#FFFF00|#202020|#404040|#FFFFFF" checked /><!--
--><label for="colordark" style="background-color:#404040">DARK</label><br /><!-- --><label for="colordark" style="background-color:#404040">DARK</label><!--
--><input type="radio" name="color" id="colortrans" value="#FFFF00|url(../assets/trans.png)|#404040" /><!-- --><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><!-- --><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 /> --><label for="colorrainbow" style="background:url(./assets/rainbow.png)">RAINBOW</label><br />
<p class="dlg-top">Customize Background</p> <p class="dlg-top">Customize Background</p>
<input type="radio" name="background" id="bgnone" value="../assets/none.png" /><!-- <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" /><!-- --><input type="radio" name="background" id="bgsport" value="../assets/sport.png" /><!--
--><label for="bgsport" style="background-image: url(./assets/sport.png)">SPORT</label><!-- --><label for="bgsport" style="background-image: url(./assets/sport.png)">SPORT</label><!--
--><input type="radio" name="background" id="bgmark" value="../assets/mark.png" /><!-- --><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> <div>
<input type="submit" name="action" value="DONE"/> <input type="submit" name="action" value="DONE"/>
</div> </div>
@ -127,7 +137,6 @@
</div> </div>
</div> </div>
<div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div> <div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
<script src="./canvas.js"></script>
<script> <script>
var elem = document.documentElement; 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('--main-color', colors[0]);
document.documentElement.style.setProperty('--background', colors[1]); document.documentElement.style.setProperty('--background', colors[1]);
document.documentElement.style.setProperty('--background-light', colors[2]); 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.documentElement.style.setProperty('--background-image', "url(" + formData.get("background") + ")");
document.querySelector('.scr-dialog--').classList.remove('open'); document.querySelector('.scr-dialog--').classList.remove('open');
event.preventDefault(); 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('--main-color', colors[0]);
document.documentElement.style.setProperty('--background', colors[1]); document.documentElement.style.setProperty('--background', colors[1]);
document.documentElement.style.setProperty('--background-light', colors[2]); 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.documentElement.style.setProperty('--background-image', "url(" + (localStorage.getItem("background") ?? "../assets/clock.png") + ")");
document.querySelector("#color").addEventListener("change", (e) => { document.querySelector("#color").addEventListener("change", (e) => {
@ -176,6 +187,7 @@ document.querySelector("#color").addEventListener("change", (e) => {
var colors = formData.get("color").split("|"); var colors = formData.get("color").split("|");
document.documentElement.style.setProperty('--main-color', colors[0]); document.documentElement.style.setProperty('--main-color', colors[0]);
document.documentElement.style.setProperty('--background', colors[1]); document.documentElement.style.setProperty('--background', colors[1]);
document.documentElement.style.setProperty('--foreground', colors[3]);
document.documentElement.style.setProperty('--background-light', colors[2]); 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'); document.querySelector('.scr-timezone--').classList.remove('open');
}) })
</script> </script>
<script src="./canvas.js"></script>
</body> </body>
</html> </html>

12
styles/clock.css
View file

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

9
styles/dialog.css
View file

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

1
styles/root.css
View file

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

10
styles/style.css
View file

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