weather-information search-interface keyboard-navigation startpage hud

Start Page

Select colour tone, change your search pages, drop in your favourite sites & icons, share geolocation for local weather data

Usage

Cursor hides with delay, everything can be done w/ a keyboard
Use L & R Arrow keys to change search sites.
Up Arrow to pull previous searches
Down Arrow (to leave search focus), then any Arrow keys to navigate tiles.

About

Use 'Ctrl + C' to randomly generate a new base colour. 'Ctrl + X' for night mode.
Tile nav isn't grid based, so you can add or remove any and change their size, or container width and arrow navigation will stay intact. (NOTE) may get a little weird with odd numbers that leave like 1 tile on a row or something.
I just threw in Font Awesome Icons. Use whatever icons you prefer (you'll have to style them), or flip through there and grab whatever works.
Add or remove any search sites; just match up placeholder, url slug, and mini icon at the same index in the three array vars below. The little 'mini search icons' below will read the length of the array & increase or decrease accordingly.
Mini search icons are clickable, and touch swipe within the search box is enabled to change search sites.
Weather imgs are lazy loaded after weather data comes back from the server, so it may take a few seconds to display. New data is polled every 20000ms, background images fade accordingly. Swap w/ semi-transparent, desaturated, compressed pngs however you please. All of the possible weather descriptions I have seen thus far are listed in comments
IP address now updates with network change

Customize Options

A few vars in main.js:

// BASE HUE VALUE (0-360)
var cpbh = 264;

// SEARCH PLACEHOLDERS (use whatever string you want to display)
var searchPl = [' duckduckgo', ' google'];

// SEARCH SITE URLS (run a search & grab the url minus query string [if it uses one..])
var searchUrlArray = ['https://duckduckgo.com/?q=', 'https://google.com/#q='];

// SEARCH SITE ICONS (place in some corresponding icons)
var searchIconArray = ['<i class="fa fa-globe"></i>', ...];