diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index 9c5630a..0000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1 +0,0 @@
-ko_fi: miguelravila
diff --git a/README.md b/README.md
index 1d0218e..ee9dfba 100644
--- a/README.md
+++ b/README.md
@@ -1,32 +1,29 @@
Bento
- 🍱 A Clean and Simple Startpage
+ 🍱 Minimalist, elegant and simple startpage inspired by the Bento box!
-
- 
-
+
-> Wallpaper by [anima_contritum](https://www.reddit.com/user/anima_contritum)
+[](https://www.buymeacoffee.com/migueravila)
## Index
+- [Index](#index)
+- [✨ Features:](#-features)
+- [🚀 Usage:](#-usage)
+ - [As Home Page:](#as-home-page)
+ - [As New Tab:](#as-new-tab)
+- [🎨 Customization](#-customization)
+ - [General: Name, Image Background and Greetings](#general-name-image-background-and-greetings)
+ - [Button Links](#button-links)
+ - [List Links](#list-links)
+ - [Weather: Api Key, Icons and Unit](#weather-api-key-icons-and-unit)
+ - [Colors](#colors)
-- [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:
+## ✨ Features:
+- **Easy configuration** file.
- **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.
@@ -34,7 +31,7 @@
- **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:
+## 🚀 Usage:
#### As Home Page:
@@ -52,35 +49,160 @@ 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
+## 🎨 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:
+Almost all customization can be managed in the `config.js` file:
-### Links
+### General: Name, Image Background and Greetings
-You can change the links (and the icons too) in the HTML Code:
+To change the default name, the greetings and if you want to have an image background or open your links in new tabs, edit the first configs in the `config.js`.
+
+```js
+ // General
+ name: 'John',
+ imageBackground: false,
+ openInNewTab: true,
+
+ // Greetings
+ greetingMorning: 'Good morning!',
+ greetingAfternoon: 'Good afternoon,',
+ greetingEvening: 'Good evening,',
+ greetingNight: 'Go to Sleep!',
-```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.
+> You cah change the backgriund by substituting the `background.jpg` file in `assets` folder.
+
+
+
+### Button Links
+
+To edit the buttons you just need to change the follow list in the `config.js` file by choosing a link, an icon from [Feather icons](https://feathericons.com/) and a name:
+
+```js
+cards: [
+ {
+ id: '1',
+ name: 'Github',
+ icon: 'github',
+ link: 'https://github.com/',
+ },
+ {
+ id: '2',
+ name: 'Mail',
+ icon: 'mail',
+ link: 'https://mail.protonmail.com/',
+ },
+ {
+ id: '3',
+ name: 'Todoist',
+ icon: 'trello',
+ link: 'https://calendar.google.com/calendar/r',
+ },
+ {
+ id: '4',
+ name: 'Calendar',
+ icon: 'calendar',
+ link: 'https://calendar.google.com/calendar/r',
+ },
+ {
+ id: '5',
+ name: 'Reddit',
+ icon: 'bookmark',
+ link: 'https://reddit.com',
+ },
+ {
+ id: '6',
+ name: 'Odysee',
+ icon: 'youtube',
+ link: 'https://odysee.com/',
+ },
+ ],
+```
+
+### List Links
+
+The same happens with the list links, you can change the list icon (also using feather icons) and the links:
+
+```js
+ //Icons
+ firstListIcon: 'music',
+ secondListIcon: 'coffee',
+
+ // Links
+ lists: {
+ firstList: [
+ {
+ name: 'Inspirational',
+ link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+ },
+ {
+ name: 'Classic',
+ link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+ },
+ {
+ name: 'Oldies',
+ link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+ },
+ {
+ name: 'Rock',
+ link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+ },
+ ],
+ secondList: [
+ {
+ name: 'Linkedin',
+ link: 'https://linkedin.com/',
+ },
+ {
+ name: 'Figma',
+ link: 'https://figma.com/',
+ },
+ {
+ name: 'Dribbble',
+ link: 'https://dribbble.com',
+ },
+ {
+ name: 'Telegram',
+ link: 'https://webk.telegram.org',
+ },
+ ],
+ },
+```
+
+### Weather: Api Key, Icons and Unit
+
+For setting up the Weather widget you'll need an API Key from: `https://openweathermap.org/`. Once you have your Key you'll need to set your latitude and longitude, you can use: `https://www.latlong.net/` to get them.
+
+Finally, choose an Icon set:
+
+
+
+- **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
+
+Finally just add them to the `config.js` file.
+
+```js
+ // Weather
+ weatherKey: '15fe26a8e22e4783054e3273824c5e7b',
+ weatherIcons: 'OneDark',
+ weatherUnit: 'C',
+ weatherLatitude: '37.774929',
+ weatherLongitude: '-122.419418',
+```
### Colors
-In the CSS code you can always change the variables for both themes (Dark and Light)
+In the `app.css` file you can change the variables for both themes (Dark and Light):
```css
/* Light theme */
+
:root {
- --accent: #4b8ec4; /* Hover color */
+ --accent: #61b0f1; /* Hover color */
--bg: #f5f5f5; /* Background color */
--sbg: #e4e6e6; /* Cards color */
--fg: #3a3a3a; /* Foreground color */
@@ -88,8 +210,9 @@ In the CSS code you can always change the variables for both themes (Dark and Li
}
/* Dark theme */
+
.darktheme {
- --accent: #4b8ec4; /* Hover color */
+ --accent: #61b0f1; /* Hover color */
--bg: #19171a; /* Background color */
--sbg: #201e21; /* Cards color */
--fg: #d8dee9; /* Foreground color */
@@ -97,115 +220,4 @@ In the CSS code you can always change the variables for both themes (Dark and Li
}
```
-
- 
-
-
-### 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
-
-
-
-
-
`;
- 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;
-}
-```
\ No newline at end of file
+
\ No newline at end of file
diff --git a/assets/img/Header.png b/assets/img/Header.png
new file mode 100644
index 0000000..0137367
Binary files /dev/null and b/assets/img/Header.png differ
diff --git a/assets/img/header.png b/assets/img/header.png
deleted file mode 100644
index 1d4674e..0000000
Binary files a/assets/img/header.png and /dev/null differ
diff --git a/assets/js/weather.js b/assets/js/weather.js
index 57d72ea..38d09ee 100644
--- a/assets/js/weather.js
+++ b/assets/js/weather.js
@@ -19,12 +19,8 @@ const key = `${CONFIG.weatherKey}`;
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);
+ getWeather(CONFIG.weatherLatitude, CONFIG.weatherLongitude);
}
// Get the Weather data
diff --git a/config.js b/config.js
index af0837f..21e1d2c 100644
--- a/config.js
+++ b/config.js
@@ -15,17 +15,22 @@ const CONFIG = {
imageBackground: false,
openInNewTab: true,
- // Weather
- weatherKey: '15fe26a8e22e4783054e3273824c5e7b',
- weatherIcons: 'OneDark',
- weatherUnit: 'C',
-
// Greetings
greetingMorning: 'Good morning!',
greetingAfternoon: 'Good afternoon,',
greetingEvening: 'Good evening,',
greetingNight: 'Go to Sleep!',
+ // Weather
+ weatherKey: '15fe26a8e22e4783054e3273824c5e7b',
+ weatherIcons: 'OneDark', // 'Nord', 'Dark', 'White'
+ weatherUnit: 'C',
+ weatherLatitude: '37.774929',
+ weatherLongitude: '-122.419418',
+
+
+
+
// ┌─┐┌─┐┬─┐┌┬┐┌─┐
// │ ├─┤├┬┘ ││└─┐
// └─┘┴ ┴┴└──┴┘└─┘