From 4fffd979d45673721e6bd60a13aa6409087fa935 Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <tabletmeowcat@gmail.com>
Date: Fri, 9 Sep 2022 10:09:27 -0500
Subject: [PATCH] Added some more backgrounds.

---
 assets/tile.png   | Bin 0 -> 453 bytes
 assets/tile2.png  | Bin 0 -> 1181 bytes
 canvas.js         |   6 +++---
 index.html        |  39 ++++++++++++++++++++++++++-------------
 styles/clock.css  |  12 ++++++------
 styles/dialog.css |   9 +++++++--
 styles/root.css   |   1 +
 styles/style.css  |  10 +++++-----
 8 files changed, 48 insertions(+), 29 deletions(-)
 create mode 100644 assets/tile.png
 create mode 100644 assets/tile2.png

diff --git a/assets/tile.png b/assets/tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3fb2a12d68b9b86f238342e535539c59496087d
GIT binary patch
literal 453
zcmeAS@N?(olHy`uVBq!ia0vp^^&rf_1|*N|l@(@SVC?a9aSW-L^Y+fg%)<sE4i}e|
z81z27xMiksV|V7n+@kY8Lnp9K|E|bX_4fC^+KFFkzccRW|B?8py;EMTZU%_)cg~Nq
z+kOe?Y?alW@yFof;UoOQ_C64Xb@6%m)%*w7KU>x73sDT$HFxLp^H<v+$f?29!Zo2Y
z&i$GHKmKu3{s(q+wd-~~KhM4I;Ksr&37?RyMK=NDqBGUM&zpzm=AbDA3MZl)i{t^Q
zNqe@-r(tTGpD%;qV@#_*-~0FZY^d~Xw4f<IU%zi-R`O(6D1rj!hV*J3UcvKBm)n8S
O!{F)a=d#Wzp$Py;-Q5uY

literal 0
HcmV?d00001

diff --git a/assets/tile2.png b/assets/tile2.png
new file mode 100644
index 0000000000000000000000000000000000000000..36f9d520f0d7a1c6302ba2c3f0b740f5017933bc
GIT binary patch
literal 1181
zcmV;O1Y-M%P)<h;3K|Lk000e1NJLTq004gg004go1^@s6#=RXA000DJNkl<Zc%1E>
z+j8453`AG@vV3~~Ons?3ZmkOm-gW_;x5SQv#hGMel8`qn;5d$-yT`U|`!%nU`7mYQ
zX8y8In3^yPw#>`q1ANUG31il!@&V4K^oBL#a`^ynb9%s>jY2-a-6SjQnP}t#{LQLC
zAq$m!K%;4IsAQm%59l=S3Z>d9<pWwxJW;EeRz9HBOr=^+sO1A1O;xDz3VQhfcXOF*
zdqYA#z}aNRnre`d4{$Y`sTM0z@&S&fGt|%nIr+fa=6ewjh{^}nNbn>c5S9<jmElc1
zATA%6BgLb5z=3>VtQ@c60Vnc-F_Jus2OP-<`pWVy9&jcf=p!wHc)+22piN#B@qknL
zfK6f~@qlCbK%LBJ;sNLKfikHP#RCE41J81w@GKqxc57plut@YS9sqX0{+FRdjm!w*
zkK_2+KfhR5%M?naMiCGE`OE+Rn~7gO9q&&MdZQ#;r2Jp<ub$+AnoLphU&_CGvMQD=
z5%O<O4+8oZK+zX@9<voaNwfjcmv`SX{j<X7sR7Y9c1p5*E$@10K=du$(hQet`^pW7
zewd@C_S=me#Rfz_##LMM<F1}k1EL?`wAA{#rK`|@=tsA$H5TpXGdCdm&_+vb#fLc<
z8xVb5tF@-8lRQifh(4&<qn7GpTnr6}KBC>L2Gbe7Y`%~D<^!DhZ&yEm)9Ky3;L^_D
zd~`eCYU$?ha&A8tSv2!^8`{X_RlWROCw6jUMJs>zajo1^)yY3(Rxb}zXyhL@sF}y8
z`122)(#->u-1&!(Xy?&s-uzSM^P|tlv*w?6bB5XmcoBcXn1AY>IZ7MgP5cR4{^_@6
zd24`I@h43AZwECK|Kz{@iLm9*3%*G(=Fhi!6JX7si#&s2&Y#P>17Xjf8#{wg$e&xf
z15nAIhdDZ<ls}Jgbwn+H9^mYRV*Wh3-2v77IkeG;a{e6GYCt`I4r&_lkUvMX#cEhO
zqMgn6lRt0ELjF7Nn0i|lrr;;)7hJ8h)|9tmBl#UxT58LiFfM%UURZ0)+pkW3%~4ot
z%^NRIc&%B~)||IoAM_flsHr_aY@y@NvQU~KKW3%zXILr8k{_^Sc&-X>newC63ZJ9O
zV>ZvhPgsX0W^tGQc2LtxaKO0T86f|qd{4nos&>1A<o}ZIG5AT*W=Ej>`_qGoKRzAr
zSKstX$%UWw;!ugd@AHr2_(}2KMCi%%d-ALx`dhs_+{=%?$n%72`O%km-*78G`o>NP
zF6Bqx(k;cE{OE@{YH%e#`Z2Cr+{ll9fYX8t`O%MVTalL^eQ2WvY5CE|wOWytAAL}>
z2a@umk7)NoPCi5P8EWW(lzgV9Gu2{6Mm}S+8EdLRLOyeonQME4UcN$e6>7YKTE0?K
zm1;eqm9N-LwVEmAt2OZxrP}G_D>d&9l?+t!Rhm|ULKYhN3eBp8Jrjj|_9nH!oNc*$
v=H~Q*HRDqGtW6mKW7cKz8JjU0w#>f)dP!eWX6R1D00000NkvXXu0mjfRJ&B&

literal 0
HcmV?d00001

diff --git a/canvas.js b/canvas.js
index 41e5240..78825db 100644
--- a/canvas.js
+++ b/canvas.js
@@ -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");
diff --git a/index.html b/index.html
index 03b3a20..8188105 100644
--- a/index.html
+++ b/index.html
@@ -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>
\ No newline at end of file
diff --git a/styles/clock.css b/styles/clock.css
index ded14bc..b495531 100644
--- a/styles/clock.css
+++ b/styles/clock.css
@@ -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;
 }
diff --git a/styles/dialog.css b/styles/dialog.css
index e2d1cd8..a0e9ea7 100644
--- a/styles/dialog.css
+++ b/styles/dialog.css
@@ -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);
 }
\ No newline at end of file
diff --git a/styles/root.css b/styles/root.css
index bc909f6..5fff121 100644
--- a/styles/root.css
+++ b/styles/root.css
@@ -2,5 +2,6 @@
   --main-color: #FFFF00;
   --background: #202020;
   --background-light: #404040;
+  --foreground: #FFFFFF;
   --background-image: url("../assets/clock.png");
 }
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index d351bc0..231bb9d 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -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 {