Spirits

Live Demo of Spirits.

About

Spirits is a startpage featuring a three different themes by clicking on the Shuffle button.

Startpages are locally hosted, usually, webpage that serves as a homepage for your browser.

Instruction

Step 1 : Right click on the .htm file and open it with a browser of your choice

Step 2 : Set the startpage as the homepage

1. create a github account and fork this repository.
2. download Github Desktop, go to File/Options and Sign in with your current account.
3. go to File/Clone repository and select the one you forked (it'll be named Username/Spirits).
4. click the Current branch tab and select gh-pages. Then go to Repository/Show in Explorer to customize the startpage. After modifying what you want, return to Github Desktop window and click the button Commit to gh-pages (you'll have to write a title in Summary before).
5. finally, click the button Push origin. After 10 minutes or less, you'll be able to go to https://username.github.io/Spirits/.
6. go to your browser setting and set https://username.github.io/Spirits/ as your default homepage.
7. download the add-on New Tab Override (Google Chrome or Firefox Mozilla), go to options and select current home page

Step 3 : Install the font

I use several fonts for the startpage.

1. KFhimaji
2. Montserrat
3. Roboto

Features

Spirits has two main features.

1. the button Shuffle : by clicking it, you'll be able change the banner/background of the startpage.
2. In the search bar, by entering some special keys, such as `-y jazz music`, you'll be able to search directly on youtube and not on Google. Another exemple with `-w moe`, it'll search 'moe' on wikipedia.

Customizing

Dates and Months

• open the .htm file in a text editor, search for 'var days' (it'll be at the beginning of the document, around line 19), and change the days (instead of 'dimanche' you can write 'sunday' or 'domingo').
• search for 'var months' (under the var days) and change the months (instead of janvier, you can write january or enero).

/* DAYS AND MONTHS IN ENGLISH */
var days = ['sunday','monday','tuesday','wenesday','thursday.','friday','saturday'];
var months=['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];

• if you want to change the structure of the date, you'll have to edit the following code : the ("0" + m.getDate()).slice(-2) is the dats, the (months[m.getMonth() ]) is the month and the m.getFullYear() is the year,

var dateString = (days[ m.getDay() ])  + " " +  ("0" + m.getDate()).slice(-2) + " " + (months[ m.getMonth() ])   + " " + m.getFullYear()            

Banner and Background

• first of all, like I said previously, change/add the banner in the banner folder and the background in the background folder and renamed them background[insert a number].jpg and banner[insert a number].jpg (you'll have to change the '[insert a number]' of course.
• open the js folder, and edit banner.js in a text editor : if you one to add others banners/background, you'll have to copy paste this code, you'll have to change the number of course (if you want a fifth banner/background, replace the 4 by 5 :

/* ADDING A FOURTH BANNER AND BACKGROUND */
4: {
    image: "banner/banner4.jpg",
    landscape:"background/background04.jpg",

}, 

• you'll have to change the value in the following code, for example if you have 6 banner/background, you'll have to copy paste this code

var randomNumber = Math.floor((Math.random() * 6) + 1);

Search

• open the js folder and edit search.js in a text editor , you'll have to modify the following code

case "-u":
query = query.substr(3);
window.location = "https://userstyles.org/styles/browse?search_terms=" 
break;

• first, you have to decide of a website (I will take bato.to) and a special key for this said site : I will take -b, thus you'll have the following code

case "-b":
query = query.substr(3);
window.location = "https://userstyles.org/styles/browse?search_terms=" 
break;

• after that, you'll need to replace the value of window.location, in the example of batoto you'll have to go to the site and search for something, for example if I'm looking for Hinamatsuri (a pretty gud manga, you should read it asap), the link will be http://bato.to/search?name=Hinamatsuri&name_cond=c, you'll have to copy the link before 'Hinamatsuri', namely http://bato.to/search?name=, and you'll have the following code

case "-b":
query = query.substr(3);
window.location = "http://bato.to/search?name=" 
break;

Disclaimer

Source of the illustrations used.

1. Mako Vector and background
2. Suzy Vector and background
3. Nia Vector and background

Report

If you find some issues or bug while using this startpage, don't hesitate to report it in the comments.