Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
img
 
 
js
 
 
php
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Homepage

Custom Start/home page (multi LIVE Search) with live animated weather and news ticker - written in HTML/JS. Minimal, self-hosted, and dope.


DEMO: https://seanvree.github.io/homepage/

Last Updated: 17 NOV 2019:

  • Added Google Analytics (Action Required).
  • Code maintenance.
  • Updated jQuery, Bootstrap.

Features:

  • Self hosted, VERY minimal(ish)/lightweight.
  • Live searching.
  • Customizable Bookmarks.
  • Mobile ready.
  • Fully functional multi-search input form (Google, YouTube, Wiki, IMDB).
  • Live custom news ticker provided by: feed.mikle.com ($1/month).
  • Background auto change (day/night).
  • Monthly calendar modal (Click on date) (Appears only on desktop browsers - screen height > 730px).
  • Live DTG with click-to-convert time (12/24hr).
  • Weather data auto generated via Geolocation.
  • Weather API provided via OpenWeatherMap.
  • Click-to-convert Celsius/Fahrenheit.
  • 5-day forecast data (Click on right weather icon).
  • Page hit counter (PHP) (bottom right).
  • Stand-alone weather app can be found here: https://github.com/seanvree/Weather
  • Check out my other self-hosted apps here: https://github.com/Monitorr

Screenshot Desktop:

Screenshot Mobile:

Animated Weather Icons :

Notes:

  • Add desired background image files:

/css/main.css: LINE 38 & 55:

background: url("background_day.jpg");

NOTE: Background DAY displays from 0800-2000 local browser time

  • Turn ON search auto-complete by changing the value to < "autocomplete="ON" > at the following location:

/index.html: LINE 265:

<input type="search" id="flexbox-input" name="s" value="" placeholder=" Search..." autocomplete="off" spellcheck="false" autofocus>

WEATHER DATA:

/js/weather.js : LINE 12:

   var weatherApiKey = ' YOUR KEY HERE ';
  • Change the default temp unit from F to C by changing the following two items:

/index.html: LINE 128:

<div id="unit" class="unit hidden">&degF</div>

/js/weather.js: LINE 8:

var unit = 'metric';
  • Weather auto refresh default setting is 30 seconds (2 calls per minute), or 30000(ms). Max is 60 API calls per 1 minute. Change at the following location:

/js/weather.js : LINE 201:

var t = window.setInterval(searchByLocation, 30000);

TICKER DATA:

  • Create a customized feed.mikle ticker widget for RSS news sources and style. Go to https://feed.mikle.com, create an account, and replicate the settings of the screenshot image /img/feedmikle.jpg located in this repo.
  • Input the custom ticker widget URL at the following location:

/index.html : Line 293:

<script src="https://feed.mikle.com/js/fw-loader.js" data-fw-param=" YOUR NUMBER HERE "></script>

GOOGLE ANALYTICS:

/js/analytics.js : LINE 9:

   ga('create', 'UA-133756821-1', 'auto');

LIVE Search Usage:

Key Searching:

  • Make changes to the live search behavior and/or bookmarks in /js/tilde.js .
  • When using commands, the desired result MUST be selected from the suggestions result list below the input field.
  • To view the bookmarks and site keys, press ? for the help menu.

(NOTE: The help menu only appears on desktop browsers).

Search any of the sites by typing a colon after the site's key, followed by a search query.

For example:

If an input doesn't match any of the commands, a generic Google search will be triggered.

Specific Locations:

Navigate directly to a specific location by typing a forward slash after the site's key, followed by the location on the site.

For example:

URL Redirects:

If a full domain is entered into the search field, the browser will be redirected to that domain or URL.

For example:


About Me:

  • seanvree (Windows Wizard)

  • I usually hang out here Discord

  • Buy me a beer Donate

Credits:

haltdev | jonfinley | leram84 | causefx | cadejscroggins

Featured on: https://startpages.github.io/

BrowserStack Status

Valid CSS!

About

Custom Start/home page (multi LIVE search) with live animated weather and news ticker - written in HTML/JS. Minimal, self-hosted, and dope.

Topics

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.