Prism

Live Demo of Prism.

About

Prism is a startpage with a simple layout.

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/Prism).
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/Prism/.
6. go to your browser setting and set https://username.github.io/Prism/ 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. Bebas Neue
2. KFhimaji
3. Roboto

Features

Prism has two main features.

1. In each cards, there is a white box which is actually a select button, namely you'll have to click on it to choose a link. The link of the active option is the avatar of each card.
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

• open the .htm file in a text editor, search for 'var days' (it'll be at the beginning of the document), and change the days (instead of 'sun.' you can write 'sunday' or 'domingo').

/* DAYS AND MONTHS IN ENGLISH */
var days = ['sunday','monday','tuesday','wenesday','thursday.','friday','saturday'];

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. Tokiya Sakuba (作場季野)
2. waterkuma

Report

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