background color support

src/css/global.css

@@ -14,10 +14,21 @@ body {
 }
 
 #background {
+    transition: opacity .15s;
+    --base_bg_color_tint_p: calc(var(--base_bg_color) + var(--base_bg_color_range)); 
+    --base_bg_color_tint_n: calc(var(--base_bg_color) - var(--base_bg_color_range)); 
+
+    --c-0-base: hsla(var(--base_bg_color), calc(var(--base_bg_saturation) - 9%), 12%, 1);
+    --c-1-base: hsla(var(--base_bg_color_tint_p), calc(var(--base_bg_saturation) - 8%), 12%, 1);
+    --c-3-base: hsla(var(--base_bg_color_tint_n), calc(var(--base_bg_saturation) - 6%), 36%, 1);
+
     height: 100vh;
     width: 100vw;
     opacity: 1;
 }
+#background.changing {
+    opacity: 0;
+}
 
 /* https://www.mshr.app/mesh/1727910717365 */
 @keyframes hero-gradient-animation {
@@ -26,8 +37,10 @@ body {
         --s-start-0: 9%;
         --s-end-0: 55%;
         --y-0: 80%;
-        --c-0: hsla(266.99999999999983, 1%, 12%, 1);
+        --c-0: var(--c-0-base);
-        --c-1: hsla(335.9999999999997, 2%, 22%, 1);
+        --c-1: var(--c-1-base);
+        --c-2: hsla(0,0%, 0%, 0.49);
+        --c-3: var(--c-3-base);
         --s-start-1: 5%;
         --s-end-1: 72%;
         --y-1: 24%;
@@ -35,11 +48,9 @@ body {
         --s-start-2: 5%;
         --s-end-2: 52%;
         --y-2: 82%;
-        --c-2: hsla(53.999999999999886, 0%, 0%, 0.49);
         --x-2: 13%;
         --s-start-3: 13%;
         --s-end-3: 68%;
-        --c-3: hsla(299, 4%, 36%, 1);
         --x-3: 24%;
         --y-3: 7%;
     }
@@ -49,8 +60,10 @@ body {
         --s-start-0: 9%;
         --s-end-0: 55%;
         --y-0: 94%;
-        --c-0: hsla(266.99999999999943, 0%, 12%, 1);
+        --c-0: var(--c-0-base);
-        --c-1: hsla(0, 4%, 19%, 1);
+        --c-1: var(--c-1-base);
+        --c-2: hsla(0,0%, 0%, 0.49);
+        --c-3: var(--c-3-base);
         --s-start-1: 5%;
         --s-end-1: 72%;
         --y-1: 25%;
@@ -58,11 +71,9 @@ body {
         --s-start-2: 5%;
         --s-end-2: 52%;
         --y-2: 20%;
-        --c-2: hsla(54.000000000000036, 0%, 0%, 0.49);
         --x-2: 98%;
         --s-start-3: 13%;
         --s-end-3: 68%;
-        --c-3: hsla(298.99999999999994, 3%, 41%, 1);
         --x-3: 95%;
         --y-3: 92%;
     }
@@ -95,13 +106,13 @@ body {
 @property --c-0 {
     syntax: '<color>';
     inherits: false;
-    initial-value: hsla(266.99999999999983, 1%, 12%, 1)
+    initial-value: hsla(0,0,0,0)
 }
 
 @property --c-1 {
     syntax: '<color>';
     inherits: false;
-    initial-value: hsla(335.9999999999997, 2%, 22%, 1)
+    initial-value: hsla(0,0,0,0)
 }
 
 @property --s-start-1 {
@@ -149,7 +160,7 @@ body {
 @property --c-2 {
     syntax: '<color>';
     inherits: false;
-    initial-value: hsla(53.999999999999886, 0%, 0%, 0.49)
+    initial-value: hsla(0,0,0,0)
 }
 
 @property --x-2 {
@@ -173,7 +184,7 @@ body {
 @property --c-3 {
     syntax: '<color>';
     inherits: false;
-    initial-value: hsla(299, 4%, 36%, 1)
+    initial-value: hsla(0,0,0,0)
 }
 
 @property --x-3 {
@@ -191,19 +202,35 @@ body {
 #background {
     --x-0: 85%;
     --y-0: 80%;
-    --c-0: hsla(266.99999999999983, 1%, 12%, 1);
+    --c-0: hsla(var(--base_bg_color), calc(var(--base_bg_saturation) - 9%), 12%, 1);
-    --c-1: hsla(335.9999999999997, 2%, 22%, 1);
+    --c-1: hsla(var(--base_bg_color_tint_p), calc(var(--base_bg_saturation) - 8%), 22%, 1);
     --y-1: 24%;
     --x-1: 60%;
     --y-2: 82%;
-    --c-2: hsla(53.999999999999886, 0%, 0%, 0.49);
+    --c-2: hsla(0,0%, 0%, 0.49);
     --x-2: 13%;
-    --c-3: hsla(299, 4%, 36%, 1);
+    --c-3: hsla(var(--base_bg_color_tint_n), calc(var(--base_bg_saturation) - 6%), 36%, 1);
     --x-3: 24%;
     --y-3: 7%;
+    background-color: hsla(0,0%, 0%, 1);
+    background-image: 
+        radial-gradient(
+            circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), 
+            transparent var(--s-end-0)
+        ),     
+        radial-gradient(
+            circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), 
+            transparent var(--s-end-1)
+        ), 
+        radial-gradient(
+            circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), 
+            transparent var(--s-end-2)
+        ), 
+        radial-gradient(
+            circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), 
+            transparent var(--s-end-3)
+        )
     ;
-    background-color: hsla(0, 0%, 0%, 1);
-    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
     animation: hero-gradient-animation 10s linear infinite alternate;
     background-blend-mode: normal, normal, normal, normal;
 }

src/css/search.css

@@ -26,11 +26,11 @@
 #searcher > h1 {
     font-family: 'Playfair Display';
     font-weight: normal;
-    font-size: 70px;
+    font-size: 60px;
     text-align: center;
 } #searcher > h1 > span {
     transition: background .2s;
-    font-size: 33px;
+    font-size: 23px;
     font-family: 'Fira Code';
     background: rgba(255,255,255,.1);
     padding: 0 5px 0;

src/css/settings.css

@@ -0,0 +1,46 @@
+#settingsbutton {
+    z-index: 11;
+    position: fixed;
+    bottom: 5px;
+    left: 5px;
+    cursor: pointer;
+
+    svg {
+        transition: background .2s;
+        border-radius: 100px;
+        padding: 5px;
+        width: 20px !important;
+        height: 20px !important;
+        fill: rgba(255,255,255,.2) !important;
+    }
+    svg:hover {
+        background: rgba(255,255,255,.1);
+    }
+}
+
+#settingsui {
+    z-index: 12;
+    position: fixed;
+    display: flex;
+    left: 5px;
+    bottom: 50px;
+    background: rgba(255,255,255,.1);
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    border-radius: 10px;
+    border: solid 1px rgba(255,255,255,.1);
+
+    h2 {
+        font-family: 'Playfair Display';
+        font-weight: normal;
+    }
+    br {
+        height: 0px !important;
+    }
+    h4 {
+        margin-top: 10px;
+        font-family: 'Nunito';
+        /* font-weight: normal; */
+    }
+}

src/index.html

@@ -6,6 +6,7 @@
     <title>Home</title>
     <link rel="shortcut icon" href="icon.svg" type="image/x-icon">
     <link rel="stylesheet" href="css/global.css">
+    <link rel="stylesheet" href="css/settings.css">
     <link rel="stylesheet" href="css/clock.css">
     <link rel="stylesheet" href="css/search.css">
     <link rel="stylesheet" href="css/update.css">
@@ -17,12 +18,23 @@
         <p>Search via Google</p>
     </div>
     <input type="text" id="search_ddd" autocorrect="off" autocomplete="off" autofocus>
+    <div id="settingsbutton"></div>
+    <!-- <div id="settingsui">
+        <h2>Settings</h2>
+        <h4>Color</h4>
+        <input type="range" name="hue" id="s_hue" min="0" max="255" step="1">
+        <h4>Saturation</h4>
+        <input type="range" name="hue" id="s_hue" min="0" max="80" step="1">
+        <h4>Range</h4>
+        <input type="range" name="hue" id="s_hue" min="0" max="255" step="1">
+    </div> -->
     <div id="update" class="hidden"><span>update available</span> <a href="https://github.com/ktnk-dev/LittleHome">download</a></div>
     <script src="js/abstract.js"></script>
     <script src="js/storage.js"></script>
     <script src="js/bang.js"></script>
     <script src="js/builtin.js"></script>
     <script src="js/update.js"></script>
+    <script src="js/settings.js"></script>
     <script src="js/main.js"></script>
 </body>
 </html>

src/js/main.js

@@ -2,4 +2,5 @@ window.addEventListener('DOMContentLoaded', async () => {
     clock()
     searcher()
     check_update()
+    settings.init()
 })

src/js/settings.js

@@ -0,0 +1,69 @@
+const force_redraw = (element) => {
+
+    if (!element) return 
+    element.classList.toggle('twt')
+    var n = document.createTextNode(' ')
+    var disp = element.style.display || 'block'
+    element.appendChild(n)
+    element.style.display = 'none'
+
+    setTimeout(() => {
+        element.style.display = disp
+        n.parentNode.removeChild(n)
+    },20)
+}
+const settings = {
+    icons: {
+        open: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M422.46-81.87q-23.2 0-40.29-15.35-17.08-15.35-20.08-38.04l-10-73.74q-11.09-4.78-22.79-11.08-11.69-6.29-21.26-13.09l-68.26 28q-21.45 9.24-43.15 1.87t-33.67-27.57l-58.05-100.87q-11.98-19.96-7.11-42.53 4.87-22.58 23.33-37.06l59.76-45.5q-.76-5.54-.76-10.58V-480q0-5.04.25-11.09.25-6.04 1.01-14.08l-59.26-43.76q-18.7-14.48-23.7-36.81-5-22.33 6.98-43.02l57.55-100.13q11.97-19.96 33.8-27.45 21.83-7.49 43.28 1.75l69.98 29q8.57-6.8 18.9-12.73 10.34-5.92 23.17-11.2l10-75.98q3-22.93 20.33-38.28 17.34-15.35 40.54-15.35h114.58q23.2 0 40.29 15.35 17.08 15.35 20.08 38.28l10 74.48q12.09 4.78 22.29 10.95 10.19 6.18 19.76 14.48l70.26-29q21.45-9.24 43.15-1.75t33.67 27.45l57.55 100.13q11.98 20.19 6.98 42.77-5 22.58-23.7 37.06l-62 45.76q.76 6.04.76 10.83V-480q0 7.54-.12 12.84-.12 5.29-1.14 10.83l61 44.76q18.7 14.48 23.7 37.06 5 22.58-6.98 42.77l-58.05 100.87q-11.97 19.96-33.8 27.45-21.83 7.49-43.28-1.75l-68.48-29q-8.07 6.3-17.4 11.84-9.34 5.55-24.17 12.83l-10 74.24q-3 22.69-20.08 38.04-17.09 15.35-40.29 15.35H422.46ZM478.78-345q56 0 95.5-39.5t39.5-95.5q0-56-39.5-95.5t-95.5-39.5q-56.26 0-95.63 39.5T343.78-480q0 56 39.37 95.5t95.63 39.5Z"/></svg>`,
+        close: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-419.35 289.33-228.67Q276.65-216 259-216.25t-30.33-12.92q-12.17-12.68-11.92-30.08t12.42-29.58L419.35-480 229.17-671.17Q217-683.35 217-700.75t12.17-30.08q12.18-12.67 29.83-12.92t30.33 12.42L480-540.65l190.67-190.68Q683.35-744 701-743.75t30.33 12.92q12.17 12.68 11.92 30.08t-12.42 29.58L540.65-480l190.18 191.17Q743-276.65 743-259.25t-12.17 30.08Q718.65-216.5 701-216.25t-30.33-12.42L480-419.35Z"/></svg>`
+    },
+    styles: {
+        'base_bg_color': [0, 360, 'Color', ''],
+        'base_bg_saturation': [0, 100, 'Saturation', '%'],
+        'base_bg_color_range': [0, 180, 'Range', ''],
+    },
+    set_style: (name, value) => {
+        setToStorage(`theme_${name}`, value)
+        const bg = document.querySelector('#background')
+        bg.style.setProperty(`--${name}`, value)
+        bg.style.display = 'none'
+        setTimeout(async () => {
+            bg.style.display = 'block'
+        },)
+    },
+    init: async () => {
+        document.querySelector('#settingsbutton').innerHTML = settings.icons.open
+        document.querySelector('#settingsbutton').onclick = () => settings.open()
+
+        Object.keys(settings.styles).map(
+            key => {
+                const v = getFromStorage(`theme_${key}`)
+                if (!v) settings.set_style(key, settings.styles[key][0])
+                else settings.set_style(key, v)
+            }
+        )
+    },
+    open: async () => {
+        const ret = name => parseInt(document.querySelector('#background').style.getPropertyValue(`--${name}`).trim().replace('%', ''))
+        const setter = (name, trail = '') => (e) => settings.set_style(name, `${e.target.value}${trail}`)
+        const state = (name, trail = '') => {return {value: ret(name), oninput: setter(name, trail)}}
+        document.body.appendChild($.div(
+            {id: 'settingsui'},
+            $.h2('Settings'),
+            ...Object.keys(settings.styles).map(key => {
+                const d = settings.styles[key]
+                return $.div(
+                    $.h4(d[2]),
+                    $.input({type: 'range', min: d[0], max: d[1], ...state(key, d[3])})
+                )
+            })
+        ))
+        document.querySelector('#settingsbutton').innerHTML = settings.icons.close
+        document.querySelector('#settingsbutton').onclick = () => {
+            document.querySelector('#settingsui').remove()
+            settings.init()
+        }
+    }
+
+    
+}

src/js/storage.js

@@ -1,7 +1,7 @@
 const CookieManager = {
     get: (cname) => {
         let name = cname + "=";
-        let decodedCookie = decodeURIComponent(document.cookie);
+        let decodedCookie = document.cookie;
         let ca = decodedCookie.split(';');
         for(let i = 0; i <ca.length; i++) {
             let c = ca[i];