2020-06-04 09:59:06 +02:00
## a modern looking startpage
[![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)
### A feature-rich modern-looking startpage and pretty much work in progress
## [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-06 05:34:20 +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
+ Weather Forecast - OpenWeatherMap
+ Search engine selection
+ Dynamic Background
+ Web menu with Fuzzy Search
+ Keyboard Navigation
+ Pure Javascript!
+ 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-05 02:07:46 +02:00
#### Changing the colors and blur strength 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.
+ Supports #RGB , #RRGGBBAA , and #RRGGBB .
2020-06-04 09:59:06 +02:00
2020-06-05 02:07:46 +02:00
#### Adding more buttons on the web menu
Add more buttons or web shortcuts in web menu by editing the `webSites` array in `js/sites-list.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
let webSites = [
{
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-05 02:07:46 +02:00
To add more web shortcuts/buttons in the dock, you have to edit the `dockSites` array in `js/sites-list.js` . Make sure to put an icon with `svg` format for the shortcut in `assets/webcons/` folder.
```js
let dockSites = [
{
site: 'Reddit',
icon: 'reddit',
url: 'https://reddit.com/'
},
...
]
```
#### Set your OpenWeatherMap API key
Setting your OpenWeatherMap credential is a breeze.
+ 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
Google is the default search engine of the search bar, if you want to change it DuckDuckGo or something:
+ 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
+ Replace the `user.png` image file in `/assets/` .
#### Keybindings
+ You can add, replace, or remove a keybinding by editing `js/keybindings.js` .
### Important Note
+ If you're using firefox and blur effect is not enabled, open `about:config` , accept the risks, find `layout.css.backdrop-filter.enabled` 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
- [x] GUI Settings
- [x] Weather Forecast
- [x] Dynamic Background
- [x] Cleaner code< sup > WIP</ sup >
- [x] Keyboard navigation
2020-06-05 02:17:04 +02:00
- [x] Swipe gestures for mobile
### License
[Feel free to use or modify this however you like! ](https://github.com/manilarome/the-glorious-startpage/blob/master/LICENSE )