diff --git a/web/_css/style.css b/web/_css/style.css index 5a68b752..3aa4c717 100644 --- a/web/_css/style.css +++ b/web/_css/style.css @@ -732,6 +732,7 @@ #timeControls { font-size: 12px; text-align: center; min-width: 300px; + position: relative; } #timeControls input { @@ -742,6 +743,26 @@ #timeControls input { width: 100%; } +#timeControlsTooltip { + display: none; + position: absolute; + padding: 0.5em 2em; + background: #555; + border: 1px #000 solid; + justify-content: center; + bottom: 40px; + white-space: nowrap; +} + +#timeControlsTooltip p { + line-height: normal; + margin-bottom: 0; +} + +#timeControls:hover #timeControlsTooltip { + display: flex; +} + .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; diff --git a/web/_img/apple-touch-icon.png b/web/_img/apple-touch-icon.png new file mode 100644 index 00000000..261a9daf Binary files /dev/null and b/web/_img/apple-touch-icon.png differ diff --git a/web/_img/favicon-dark.png b/web/_img/favicon-dark.png new file mode 100644 index 00000000..11ea7313 Binary files /dev/null and b/web/_img/favicon-dark.png differ diff --git a/web/_img/favicon-dark.svg b/web/_img/favicon-dark.svg new file mode 100644 index 00000000..3896309a --- /dev/null +++ b/web/_img/favicon-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/_img/favicon.png b/web/_img/favicon.png new file mode 100644 index 00000000..286fa715 Binary files /dev/null and b/web/_img/favicon.png differ diff --git a/web/_img/favicon.svg b/web/_img/favicon.svg new file mode 100644 index 00000000..36164ba3 --- /dev/null +++ b/web/_img/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/_img/logo-100x100.png b/web/_img/logo-100x100.png deleted file mode 100644 index c4c85d2c..00000000 Binary files a/web/_img/logo-100x100.png and /dev/null differ diff --git a/web/_img/logo-transparent.svg b/web/_img/logo-transparent.svg new file mode 100644 index 00000000..b051c684 --- /dev/null +++ b/web/_img/logo-transparent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/_img/logo.png b/web/_img/logo.png index 63f3f124..d19f19e8 100644 Binary files a/web/_img/logo.png and b/web/_img/logo.png differ diff --git a/web/_img/logo.svg b/web/_img/logo.svg new file mode 100644 index 00000000..a53fd296 --- /dev/null +++ b/web/_img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/_img/pwa/icon-192x192.png b/web/_img/pwa/icon-192x192.png index 22324cac..c19edfbd 100644 Binary files a/web/_img/pwa/icon-192x192.png and b/web/_img/pwa/icon-192x192.png differ diff --git a/web/_img/pwa/icon-256x256.png b/web/_img/pwa/icon-256x256.png deleted file mode 100644 index 6268cded..00000000 Binary files a/web/_img/pwa/icon-256x256.png and /dev/null differ diff --git a/web/_img/pwa/icon-384x384.png b/web/_img/pwa/icon-384x384.png deleted file mode 100644 index 2ff50765..00000000 Binary files a/web/_img/pwa/icon-384x384.png and /dev/null differ diff --git a/web/_img/pwa/icon-512x512.png b/web/_img/pwa/icon-512x512.png index 571491c1..312b5535 100644 Binary files a/web/_img/pwa/icon-512x512.png and b/web/_img/pwa/icon-512x512.png differ diff --git a/web/_img/pwa/icon-maskable-192x192.png b/web/_img/pwa/icon-maskable-192x192.png new file mode 100644 index 00000000..b7c29f5e Binary files /dev/null and b/web/_img/pwa/icon-maskable-192x192.png differ diff --git a/web/_img/pwa/icon-maskable-512x512.png b/web/_img/pwa/icon-maskable-512x512.png new file mode 100644 index 00000000..92b7c3ee Binary files /dev/null and b/web/_img/pwa/icon-maskable-512x512.png differ diff --git a/web/_js/favicon.js b/web/_js/favicon.js new file mode 100644 index 00000000..f64c7895 --- /dev/null +++ b/web/_js/favicon.js @@ -0,0 +1,27 @@ +// Based on GitHub's favicon switcher. Temporary(?) fix for Chromium based browsers that won't dynamically update embedded CSS media query inside of SVG +function updateFavicon(colorScheme) { + const favicon = document.head.querySelector('.js-site-favicon[type="image/svg+xml"]') + const faviconFallback = document.head.querySelector('.js-site-favicon[type="image/png"]') + if (favicon && faviconFallback) { + if (colorScheme || colorScheme == 'dark') { + favicon.href = '_img/favicon-dark.svg'; + faviconFallback.href = '_img/favicon-dark.png'; + } else { + favicon.href = '_img/favicon.svg'; + faviconFallback.href = '_img/favicon.png'; + } + } +} + +function prefersDarkColorScheme() { + return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches +} + +if (prefersDarkColorScheme()) { + // update favicon to dark on page load + updateFavicon('dark') +} + +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + updateFavicon(prefersDarkColorScheme()) +}) diff --git a/web/_js/time.js b/web/_js/time.js index 49483cbf..76e23a42 100644 --- a/web/_js/time.js +++ b/web/_js/time.js @@ -90,10 +90,11 @@ const timeConfig = [ url: "./_img/place/final.png", image: null, showAtlas: true, - }, + } ]; let slider = document.getElementById("timeControlsSlider"); +let tooltip = document.getElementById("timeControlsTooltip") let image = document.getElementById("image"); let timeCallback = (a) => {}; @@ -102,11 +103,11 @@ let atlasBackup = []; // SETUP slider.max = timeConfig.length; slider.value = timeConfig.length; -updateTime(timeConfig.length) +updateTime(slider.value) -slider.oninput = (event) => { +slider.addEventListener("input", (event) => { updateTime(parseInt(event.target.value)) -}; +}) async function updateTime(index) { let configObject = timeConfig[index-1]; @@ -124,4 +125,13 @@ async function updateTime(index) { atlas = [] } timeCallback(atlas) -} \ No newline at end of file + if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString() + else tooltip.querySelector('p').textContent = configObject.timestamp + tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px" +} + +tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px" +) + +window.addEventListener('resize', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px" +) \ No newline at end of file diff --git a/web/about.html b/web/about.html index b30f7174..35ca116e 100644 --- a/web/about.html +++ b/web/about.html @@ -14,26 +14,30 @@ --> - + The 2022 /r/place Atlas - - + + + + + +
- +

The 2022 /r/place Atlas

+ + + + + +