add goku bg by popular request, renamed sample bgs

modify stylesheet loading for performance gains
fix loader not being styled on first run

authors.html

@@ -8,6 +8,7 @@
     <meta name="description" content="A countdown app and day of year counter with light and dark mode auto functionality">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="themes.css">
     <link rel="manifest" href="/manifest.json">
     <title>Final Countdown </title>
     <link href="img/icons/favicon.png" rel="icon">

countdown-list.html

@@ -12,6 +12,7 @@
     <meta name="Author" content="R.Djarbeng| A.Nyakotey">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="themes.css">
     <link rel="manifest" href="manifest.json">
     <!-- ios support -->
     <link rel="apple-touch-icon" href="img/icons/favicon.png">

fallback.html

@@ -12,6 +12,7 @@
     <meta name="Author" content="R.Djarbeng| A.Nyakotey">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="themes.css">
     <link rel="manifest" href="manifest.json">
     <!-- ios support -->
     <link rel="apple-touch-icon" href="img/icons/favicon.png">

form-upload.html

@@ -3,18 +3,21 @@
         <div class="form-header">Set Custom Bg</div>
         <div class="bg-presets">
             <div class="bg-presets-preview  p1">
-                <img src="img/bg/2082226.jpg" alt="">
+                <img src="img/bg/earth.jpg" alt="earth">
             </div>
             <div class="bg-presets-preview  p2">
-                <img src="img/bg/basketball_ball_basketball_court_120082_1920x1080.jpg" alt="">
+                <img src="img/bg/basketball_on_court.jpg" alt="basketball_on_court">
             </div>
             <div class="bg-presets-preview  p3">
-                <img src="img/bg/ship_sky_balloons_80359_1920x1080.jpg" alt="">
+                <img src="img/bg/ship_sky_balloons.jpg" alt="ship_sky_balloons">
             </div>
             <div class="bg-presets-preview  p4">
-                <img src="img/bg/gif6.gif" alt="">
+                <img src="img/bg/goku.jpg" alt="goku">
             </div>
-            <div class="bg-presets-preview  p5"><label for="upload"><i class="fas fa-plus fa-lg"></i></label></div>
+            <div class="bg-presets-preview  p5">
+                <img src="img/bg/wait_impatient.gif" alt="wait impatiently">
+            </div>
+            <div class="bg-presets-preview  upload-preview"><label for="upload"><i class="fas fa-plus fa-lg"></i></label></div>
         </div>
         <div>
             <label for="upload-info">Uploaded image must be &lt; 5mb &nbsp;</label>

form.css

@@ -70,7 +70,7 @@ input[type="submit"]:hover,.reset button:hover{
 /* upload image form */
 .bg-presets {
     display: flex;
-    width: 100%;
+    width: 82%;
     align-items: center;
     justify-content: center;
     flex-flow: row wrap;

index.html

@@ -13,6 +13,7 @@
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="themes.css">
 
     <link rel="manifest" href="manifest.json">
     <!-- ios support -->

loader.css

@@ -1,7 +1,6 @@
-@import url("themes.css");
 .loader{
     background-color: rgba(255, 255, 255, 0.95);
-    color: var(--bg-sidebar);
+    color: var(--color-banner);
     padding: 0 1rem;
     border-radius: 0.4rem;
     font-size: 1.5em;

sidebar.js

@@ -72,7 +72,7 @@ function openBgPicker() {
         document.body.insertAdjacentHTML(
             "afterbegin",
             `<aside class="pop-up-container loader-container">
-                <section class="loader">
+                <section class="loader" style="--color-banner: ${getComputedStyle($("body")[0]).getPropertyValue("--color-banner")}">
                     <span>Loading</span>
                     <span>.</span>
                     <span>.</span>
@@ -85,9 +85,9 @@ function openBgPicker() {
     const loadForm = async () => {
         let file = await fetch("./form-upload.html");
         let ft = await file.text();
+        document.getElementsByClassName("loader-container")[0].remove();
         document.body.insertAdjacentHTML("afterbegin", ft);
         document.body.style.position = "fixed";
-        document.getElementsByClassName("loader-container")[0].remove();
         const filePicker = document.querySelector("input[type='file']");
         const reading = (uploadedPic) => {
             let reader = new FileReader();
@@ -115,7 +115,7 @@ function openBgPicker() {
             localStorage.removeItem("userBg");
             document.body.style.backgroundImage = "";
         });
-        $(".bg-presets-preview:not(.p5) img").forEach((e) => {
+        $(".bg-presets-preview:not(.upload-preview) img").forEach((e) => {
             e.addEventListener("click", () => {
                 const sbg = async () => {
                     let img = await fetch(e.src);

styles.css

@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap");
-@import url("./themes.css");
 /* basic reset */
 *,
 *::before,