Bento

🍱 A Clean and Simple Startpage

> Wallpaper by [anima_contritum](https://www.reddit.com/user/anima_contritum) ## Index - [Bento](#) - [Features](#features) - [Usage](#usage) - [Home Page](#as-home-page) - [New Tab](#as-new-tab) - [Customization](#customization) - [Links](#links) - [Colors](#colors) - [Theme Depending at the time](#theme-depending-at-the-time) - [Image Background](#image-background) - [Greetings](#greetings) - [Weather Info](#weather-info) - [Weather Icons](#weather-icons) ### Features: - **Dark/Light** mode, you can toggle them and It'll be saved in local storage. - **Clock and Date** format can be set to 24 hour (default) or 12 hour. - **Greetings** are easy to modify. - **Variables** for custom colors and font sizes in the `style.css` code. - **Icons** all icons are from Feather Icons (Some others I made them with the Feather icons as a base) - **Modular** javascript files for an easy read. ## Usage: #### As Home Page: 1. Fork this repo 2. Enable the Github Pages service `Settings > GitHub Pages > Source [master branch] > Save` 3. Set it as Home Page: - Click the menu button. and select Options. Preferences. - Click the Home panel. - Click the menu next to Homepage and new windows and choose to show custom URLs and add your `Github Pages link` #### As New Tab: You can use different Add-ons/Extensions for it - If you use Firefox: [Custom New Tab Page](https://addons.mozilla.org/en-US/firefox/addon/custom-new-tab-page/?src=search) - If you use Chromium (Brave, Vivaldi, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia) ## Customization > All the code is using variables and is comented, It's easy to customize the project to your own, and this sections are the principal customizable elements in the Startpage: ### Links You can change the links (and the icons too) in the HTML Code: ```html ``` Change the link in the `href` property with the link you want. (The `target="blank"` makes the link to open a new tab with the link you choose). The Project uses [Feather icons](https://feathericons.com/) for the icons, and you can change them in the `data-feather=""` property with the name of the icon in the page. ### Colors In the CSS code you can always change the variables for both themes (Dark and Light) ```css /* Light theme */ :root { --accent: #4b8ec4; /* Hover color */ --bg: #f5f5f5; /* Background color */ --sbg: #e4e6e6; /* Cards color */ --fg: #3a3a3a; /* Foreground color */ --sfg: #3a3a3a; /* Sceondary Foreground color */ } /* Dark theme */ .darktheme { --accent: #4b8ec4; /* Hover color */ --bg: #19171a; /* Background color */ --sbg: #201e21; /* Cards color */ --fg: #d8dee9; /* Foreground color */ --sfg: #3a3a3a; /* Secondary Foreground color */ } ```

### Theme Depending at the time In the `theme.js` file there's a section about changing the theme depending in the time. You have to 'Uncomment' that section to enable it: ```js const today = new Date(); const Hr = today.getHours(); if (Hr >= 19 || Hr < 5) { enableDark(); } else { disableDark(); } ``` ### Image Background You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image:

It has a black filter by default in `--imgcol`, and it'ts value is: `rgba(255, 255, 255, 0.7)` and `rgba(0, 0, 0, 0.7)` for the dark theme. You can change them and the opacity for a better experience with your image. ### Greetings You can put your name and change the greetings. ```js var name = "John Doe"; const gree1 = "Go to Sleep! "; const gree2 = "Good morning! "; const gree3 = "Good afternoon "; const gree4 = "Good evening, "; ``` It'll change in order of the hour. ### Weather Info For setting up the Weather widget you're going to need an API Key in: `https://openweathermap.org/`. Once you have your Key you'll need to set yourlatitude and longitude, you can use: `https://www.latlong.net/` to get them. Then you just have to fill them in the `weather.js` in the **js** folder: ```js // Use your own key for the Weather, Get it here: https://openweathermap.org/ const key = "XXXXXXXXXXXXXXXXXXXXXXXXXXX"; setPosition(); function setPosition(position) { // Here you can change your position // You can use https://www.latlong.net/ to get it! (I use San Francisco as an example) let latitude = 37.774929; let longitude = -122.419418; getWeather(latitude, longitude); } ``` > If you don't like to have your API Key public, you can make the repo into a private one. You can still use the Github Pages service. ### Weather Icons

The weather icons are based in Feather icons and I made 4 sets of them: - **Nord** Using the Nord Color Scheme and easy-to-eyes colors - **OneDark** (_Default one_) Using the One Dark Pro color scheme - **Dark** For White theme only users that want a minimalist look - **White** For Dark theme only users that want a minimalist look You set the icon theme changing this two lines of code in the `index.html` and `weather.js` files: - If you want the Dark icon theme, change the `OneDark` to `Dark` - If you want the White icon theme, change the `OneDark` to `White` - If you want the Nord icon theme, change the `OneDark` to `Nord` For example if I'd like to use the `Dark` icon theme: ```html
``` ```js function displayWeather() { iconElement.innerHTML = ``; tempElement.innerHTML = `${weather.temperature.value}°${tempUnit}`; descElement.innerHTML = weather.description; } //Change it to: function displayWeather() { iconElement.innerHTML = ``; tempElement.innerHTML = `${weather.temperature.value}°${tempUnit}`; descElement.innerHTML = weather.description; } ```