diff --git a/src/css/global.css b/src/css/global.css index 4842af4..8bf3928 100644 --- a/src/css/global.css +++ b/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-1: hsla(335.9999999999997, 2%, 22%, 1); + --c-0: var(--c-0-base); + --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-1: hsla(0, 4%, 19%, 1); + --c-0: var(--c-0-base); + --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: ''; inherits: false; - initial-value: hsla(266.99999999999983, 1%, 12%, 1) + initial-value: hsla(0,0,0,0) } @property --c-1 { syntax: ''; 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: ''; 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: ''; 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-1: hsla(335.9999999999997, 2%, 22%, 1); + --c-0: hsla(var(--base_bg_color), calc(var(--base_bg_saturation) - 9%), 12%, 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; } \ No newline at end of file diff --git a/src/css/search.css b/src/css/search.css index 6e30009..6d158ef 100644 --- a/src/css/search.css +++ b/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; diff --git a/src/css/settings.css b/src/css/settings.css new file mode 100644 index 0000000..ee9b179 --- /dev/null +++ b/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; */ + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 71f416d..edf25b1 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,7 @@ Home + @@ -17,12 +18,23 @@

Search via Google

+
+ + \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index fafa0d1..1eade41 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -2,4 +2,5 @@ window.addEventListener('DOMContentLoaded', async () => { clock() searcher() check_update() + settings.init() }) diff --git a/src/js/settings.js b/src/js/settings.js new file mode 100644 index 0000000..0bc58f8 --- /dev/null +++ b/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: ``, + close: `` + }, + 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() + } + } + + +} \ No newline at end of file diff --git a/src/js/storage.js b/src/js/storage.js index 299fab0..31b1a8c 100644 --- a/src/js/storage.js +++ b/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