https://github.com/pawcoding/dashboard
This is a personal dashboard as browser startpage.
https://github.com/pawcoding/dashboard
browser dashboard startpage
Last synced: about 2 months ago
JSON representation
This is a personal dashboard as browser startpage.
- Host: GitHub
- URL: https://github.com/pawcoding/dashboard
- Owner: pawcoding
- License: mit
- Created: 2021-03-31T16:56:18.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-03T13:22:15.000Z (almost 5 years ago)
- Last Synced: 2025-08-04T21:49:33.684Z (8 months ago)
- Topics: browser, dashboard, startpage
- Language: HTML
- Homepage:
- Size: 546 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dashboard | Your Personal Startpage
## General
This Dashboard is a personal start page for your browser.
It's divided into different modules. Here even beginners can easily get started with web programming. Just download the code and open the file `index.html` with your browser.
> 
> Screenshot
There's also a german tutorial on my website [pawcode.de](https://pawcode.de/projekte/Projekt.php?id=dashboard)
## Modules
* Clock
* Time
* Date
* Google Search
* Bookmarks
* Calendar
Feel free to create your own modules and adding them to your personal dashboard.
## How to personalize
### Changing the order
Every module has it's own ``-tag. You can easily swap the order of the modules by changing the order in the source code of the file `index.html`.
### Adding own bookmarks
In the module **Bookmarks** you can find the tag `
`. This block contains all of your bookmarks. Every bookmark has the following structure:
```html
```
Element | Function
------- | --------
`` | **Anchor tag** (Link)
`href="..."` | Links to the website
`target="_blank"` | Ensures that the page opens in a new browser tab
`title="..."` | Displays a text when the mouse hovers over the icon
`![]()
` | **Image tag** (Icon)
`src="..."` | Path to the icon _(can be local in folder_ `icons` _or weblink)_
`alt="..."` | Displays a text when the icon file was not found
### Changing the theme
The style of the dashboard is divided into two different files in the folder `css`:
* `Layout.css`
* `Design.css`
You only have to worry about the design as the layout generally stays the same.
The first element of the design file is called `:root`. Here are all the colors and other useful values.
```css
:root {
--color-background: #222;
--color-text: #eee;
--color-shadow: #111;
...
}
```
#### Example
You want to change the color of the background to light grey.
Just set the value of `--color-background` to `#bbb` and you are good to go.