2020-06-10 13:12:53 +02:00
## A bloated and modern-looking startpage
2020-06-04 09:59:06 +02:00
2020-06-10 13:12:53 +02:00
[![maintained ](https://img.shields.io/maintenance/yes/2020?label=maintained&style=flat-square )](https://github.com/manilarome/the-glorious-startpage/commits/master) [![contributions ](https://img.shields.io/badge/contribution-welcome-brightgreen&?style=flat-square )](https://github.com/manilarome/the-glorious-startpage/pulls) [![HitCount ](http://hits.dwyl.com/manilarome/the-glorious-startpage.svg )](http://hits.dwyl.com/manilarome/the-glorious-startpage)
2020-06-04 09:59:06 +02:00
## [Live Preview](https://manilarome.github.io/the-glorious-startpage/)
## Gallery
| Searchbar | Settings |
| --- | --- |
| ![screenshot ](/scrots/searchbar.png ) | ![screenshot ](/scrots/settings.png ) |
| Web Menu | Weather Forecast |
| --- | --- |
| ![screenshot ](/scrots/webmenu.png ) | ![screenshot ](/scrots/weather.png ) |
#### It looks good on mobile too
| Searchbar | Settings |
| --- | --- |
| ![screenshot ](/scrots/mobile-searchbar.jpg ) | ![screenshot ](/scrots/mobile-settings.jpg ) |
| Web Menu | Weather Forecast |
| --- | --- |
2020-06-04 10:01:30 +02:00
| ![screenshot ](/scrots/mobile-webmenu.jpg ) | ![screenshot ](/scrots/mobile-weather.jpg ) |
2020-06-04 09:59:06 +02:00
## Features
+ Responsive UI
2020-06-09 10:47:56 +02:00
+ Web Search Suggestions
2020-06-04 09:59:06 +02:00
+ Mobile Support with Swipe Gestures
+ Theme Settings - Change colors on-the-fly
2020-06-09 10:47:56 +02:00
+ Weather Forecast - OpenWeatherMap Integration
+ Search Engine Selection
2020-06-04 09:59:06 +02:00
+ Dynamic Background
2020-06-09 10:47:56 +02:00
+ Web Menu with Fuzzy Search
2020-06-04 09:59:06 +02:00
+ Keyboard Navigation
2020-06-09 10:47:56 +02:00
+ Vanilla Javascript!
2020-06-04 09:59:06 +02:00
+ And many bugs!
## Keybindings
2020-06-06 05:34:20 +02:00
+ < kbd > alt + S< / kbd > - toggles dashboard
+ < kbd > alt + E< / kbd > - toggles web menu
+ < kbd > alt + X< / kbd > - toggles weather screen
2020-06-04 09:59:06 +02:00
+ < kbd > Escape< / kbd > - close panels/toggles web menu
+ < kbd > Backspace< / kbd > - toggles search box
2020-06-06 05:34:20 +02:00
## Swipe gestures
+ < kbd > swipe right< / kbd > - opens web menu
+ < kbd > swipe left< / kbd > - opens dashboard
+ < kbd > swipe up< / kbd > - opens weather screen
+ < kbd > swipe down< / kbd > - opens search box
2020-06-05 02:17:04 +02:00
## Customization and Settings
2020-06-04 09:59:06 +02:00
2020-06-10 13:12:53 +02:00
#### Changing the colors, blur strength, and animation speed on-the-fly
2020-06-04 09:59:06 +02:00
2020-06-05 02:07:46 +02:00
+ Open the dashboard by clicking the settings button on the dock.
+ Change the color and blur strength by setting it on the `Theme Engine` section.
2020-06-10 10:35:39 +02:00
+ Color settings supports `#RGB` , `#RRGGBB` , and `#RRGGBBAA` .
+ Blur strength settings only allows integer with `px` suffix.
+ Animation speed supports `s` and `ms` .
2020-06-04 09:59:06 +02:00
2020-06-05 02:07:46 +02:00
#### Adding more buttons on the web menu
2020-06-09 04:02:03 +02:00
Add more buttons or web shortcuts in web menu by editing the `webSites` array in `js/config.js` . Make sure to put an icon with `svg` format for the shortcut in `assets/webcons/` folder.
2020-06-04 09:59:06 +02:00
2020-06-05 02:07:46 +02:00
```js
2020-06-10 03:09:43 +02:00
const webSites = [
2020-06-05 02:07:46 +02:00
{
site: 'Reddit',
icon: 'reddit',
url: 'https://reddit.com/',
category: 'social'
},
...
]
```
2020-06-04 09:59:06 +02:00
2020-06-05 02:07:46 +02:00
#### Adding more buttons on the dock
2020-06-04 09:59:06 +02:00
2020-06-09 04:02:03 +02:00
To add more web shortcuts/buttons in the dock, you have to edit the `dockSites` array in `js/config.js` . Make sure to put an icon with `svg` format for the shortcut in `assets/webcons/` folder.
2020-06-05 02:07:46 +02:00
```js
2020-06-10 03:09:43 +02:00
const dockSites = [
2020-06-05 02:07:46 +02:00
{
site: 'Reddit',
icon: 'reddit',
url: 'https://reddit.com/'
},
...
]
```
2020-06-10 03:09:43 +02:00
#### Adding more search engine in selection
Add more search engine in selection by editing the `searchEngines` object in `js/config.js` . Make sure to follow the format below:
```js
const searchEngines = {
'duckduckgo': {
name: 'Duckduckgo',
prefix: 'https://duckduckgo.com/?q='
},
...
}
```
2020-06-05 02:07:46 +02:00
#### Set your OpenWeatherMap API key
2020-06-10 13:12:53 +02:00
Setting up your OpenWeatherMap credential is a breeze.
2020-06-05 02:07:46 +02:00
+ If you don't have an API key, follow this guide:
2020-06-04 09:59:06 +02:00
How to get a credentials for the weather forecast?
- OpenWeatherMap is the weather provider, so go to OpenWeatherMap's [website ](https://home.openweathermap.org/ ).
2020-06-05 02:07:46 +02:00
- Register, log-in, and then go [here ](https://home.openweathermap.org/api_keys ) to generate your very own API keys.
+ After getting you API key, you have to get your City ID.
+ Put your API key and City ID in the `Weather Settings` .
+ Apply.
#### Changing the default search engine
2020-06-10 13:12:53 +02:00
Google is the default search engine of the search bar, if you want to change it to DuckDuckGo or something:
2020-06-05 02:07:46 +02:00
+ Open the dashboard by clicking the settings button on the dock.
+ Find the `Search Engine` section and select your preferred search engine.
+ Set it as default.
2020-06-04 09:59:06 +02:00
2020-06-05 02:07:46 +02:00
#### Changing the profile picture
2020-06-10 13:12:53 +02:00
+ Replace the `user.png` image file in `assets/` .
2020-06-05 02:07:46 +02:00
2020-06-09 04:02:03 +02:00
#### Changing the background image
The background image changes based on time.
+ Change the background images in `assets/backgrounds/` .
2020-06-09 10:47:56 +02:00
+ Make sure that it is in a `webp` format.
2020-06-09 04:02:03 +02:00
+ A lower resolution of each images are also required.
2020-06-05 02:07:46 +02:00
#### Keybindings
+ You can add, replace, or remove a keybinding by editing `js/keybindings.js` .
### Important Note
2020-06-11 04:52:37 +02:00
+ Make sure that javascript is enabled!
2020-06-10 13:12:53 +02:00
+ If you're using firefox and blur effect is not enabled, open `about:config` , accept the risks, find `layout.css.backdrop-filter.enabled` , and set it to true to enable it. Refresh the startpage.
2020-06-04 09:59:06 +02:00
+ The code could be better, this is my first time writing a startpage from the ground up. I will improve this from time to time.
2020-06-05 02:07:46 +02:00
+ Found a bug, error or do you have a suggestion? Feel free to open an issue or pull request.
2020-06-04 09:59:06 +02:00
+ Tested only on Firefox and Google Chrome.
2020-06-05 02:07:46 +02:00
### TODO
2020-06-09 10:47:56 +02:00
- [x] GUI Settings
2020-06-05 02:07:46 +02:00
- [x] Weather Forecast
- [x] Dynamic Background
2020-06-09 10:47:56 +02:00
- [x] Cleaner code< sup > WIP</ sup >
- [x] Keyboard navigation
- [x] Swipe gestures for mobile
2020-06-05 02:17:04 +02:00
### License
[Feel free to use or modify this however you like! ](https://github.com/manilarome/the-glorious-startpage/blob/master/LICENSE )