<!DOCTYPE HTML> <html> <head> <style> html,body { margin: 0; padding: 0; background-color: black; } body { width: 100vw; height: 100vh; } .overlay2 { width: 100%; height: 100%; position: absolute; filter: blur(40px); background-position: center; background-size: cover; background-image: url('@wallpaper@'); } .overlay { width: 100%; height: 100%; position: absolute; background: rgb(27,45,89); opacity: 0.1; } .container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: white; position: absolute; font-family: Cantarell; flex-direction: column; } .title { font-size: 32px; } .search { padding: 20px; width: 300px; border: none; outline: none; background-color: black; color: grey; font-size: 16px; } </style> <script> /*window.onload = () => { const mainInput = document.getElementById("main-input"); mainInput.focus(); mainInput.value = ""; mainInput.addEventListener("keypress", function(event) { if (event.key === "Enter") { event.preventDefault(); window.location.href = `https://google.com/search?q=${mainInput.value}`; } }); };*/ </script> <!-- for now --> <link rel="icon" href="https://www.google.com/favicon.ico"> </head> <body> <div class="overlay2"></div> <div class="overlay"></div> <div class="container"> <!-- <div class="title">Good Morning!</div> <div style="height: 20px"></div> <input class="search" id="main-input"/> --> </div> </body> </html>