Are you annoyed by a trend in browsers to default to an annoying advertising page with new tabs? I sure am. And they don’t make it easy to change that. I thought, rather than a blank new tab page, why not load something cute and local. I enlisted claude.ai to help expedite the code and got something I like.
homepage.html is a very simple default page that loads a random image from a folder as a background, overlays the current local time in the one correct time format with seconds, live update, and throws up the local weather from wttr.in after a delay (to avoid hitting the server unnecessarily if you’re not going to keep the tab blank long enough to see the weather).
Images have to be in a local folder and in a predictable naming structure, as written “image_001.webp” to “image_999.webp.” If the random enumerator chooses an image name that doesn’t exist, you get a blank page.
Browsers don’t auto-rotate by exif (or webp) metadata, so orient all images in the folder as you’d like them to appear.
The weather information is only “current” which isn’t all that useful to me, I’d like tomorrows weather, but that’s not quite possible with the one-liner format yet.
How you set the homepage and new tab default page varies by browser. In Brave try hamburger->appearance->show home button->select option->paste the location of the homepage.html file, e.g. file://home/gessel/homepage.html.
The pictures are up to you, but here’s the code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>New Tab</title> <style> body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; } #background-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: -1; } #time-date { position: absolute; top: 20px; right: 20px; font-size: 48px; color: white; text-shadow: 3px 3px 8px rgba(0, 0, 0, 1); font-family: sans-serif; font-weight: bold; } #weather { position: absolute; bottom: 20px; left: 20px; font-size: 24px; color: white; text-shadow: 3px 3px 8px rgba(0, 0, 0, 1); font-family: sans-serif; } </style> </head> <body> <div id="background-image"></div> <div id="time-date"></div> <div id="weather"></div> <script> // Function to get a random image from the 'image_001.webp' to 'image_230.webp' range // Edit image folder to match the folder you want to store the images in // edit the min and max image index range to match the images // set the imageName extension to suit (e.g. .jpg, .webp, .png) // white screen usually means the images or folder can't be found function getRandomImage() { const imageFolder = '.images/'; const minImageIndex = 1; const maxImageIndex = 230; const randomIndex = Math.floor(Math.random() * (maxImageIndex - minImageIndex + 1)) + minImageIndex; const imageName = `image_${randomIndex.toString().padStart(3, '0')}.webp`; return `${imageFolder}${imageName}`; } // Function to update the time and date display // Updates every second, uses the only technically correct* date and time format // * The best kind of correct. function updateTimeDate() { const dateTimeElement = document.getElementById('time-date'); const currentDate = new Date(); const year = currentDate.getFullYear(); const month = String(currentDate.getMonth() + 1).padStart(2, '0'); const day = String(currentDate.getDate()).padStart(2, '0'); const hours = String(currentDate.getHours()).padStart(2, '0'); const minutes = String(currentDate.getMinutes()).padStart(2, '0'); const seconds = String(currentDate.getSeconds()).padStart(2, '0'); const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; dateTimeElement.textContent = formattedDateTime; } // Function to fetch and display the weather information // The delay is set for 10 seconds to avoid hitting the wttr.in server if you're just // opening a tab to enter a web address. Hopefully one-line forcasts will be implemented // soon - check https://github.com/chubin/wttr.in/issues/447 for progress async function updateWeather() { const weatherElement = document.getElementById('weather'); try { await new Promise(resolve => setTimeout(resolve, 10000)); // 10-second delay const response = await fetch('https://wttr.in/?m&format=%l%20%c+%C+%t%20+%h%20+%w\n'); const weatherData = await response.text(); weatherElement.textContent = weatherData; } catch (error) { console.error('Error fetching weather information:', error); weatherElement.textContent = 'Error fetching weather information.'; } } // Set the random background image const backgroundImage = document.getElementById('background-image'); backgroundImage.style.backgroundImage = `url('${getRandomImage()}')`; // Update the time and date every second setInterval(updateTimeDate, 1000); // Update the weather information every 100 minutes updateWeather(); setInterval(updateWeather, 6000000); // thanks to claude.ai for helping with the scripts. </script> </body> </html>
Leave a Reply
You must be logged in to post a comment.