diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index b6b4873..0000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,2 +0,0 @@ -# These are supported funding model platforms -ko_fi: miguelravila diff --git a/.gitignore b/.gitignore deleted file mode 100644 index b512c09..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules \ No newline at end of file diff --git a/README.md b/README.md index 1d0218e..a3050c1 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!
-

- -

+![image](assets/img/Header.png) -> Wallpaper by [anima_contritum](https://www.reddit.com/user/anima_contritum) +[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](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 background by substituting the `background.jpg` file in `assets` folder. -### Colors +![](assets/img/previewbg.png) -In the CSS code you can always change the variables for both themes (Dark and Light) +### 🏷️ 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: + +![](assets/img/icons.png) + +- **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: 'InsertYourAPIKeyHere123456', + weatherIcons: 'OneDark', + weatherUnit: 'C', + weatherLatitude: '37.774929', + weatherLongitude: '-122.419418', +``` + +### πŸ’› Colors + +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 -
- -
- - - -
- -
-``` - -```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; -} -``` \ No newline at end of file +![](assets/img/subheader.png) \ No newline at end of file diff --git a/css/style.css b/app.css similarity index 86% rename from css/style.css rename to app.css index f85af4e..3e62603 100644 --- a/css/style.css +++ b/app.css @@ -1,18 +1,19 @@ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); /* V A R I A B L E S */ :root { /* Fonts */ - --fsg: 135px; /* Time and Greetings */ - --fsm: 75px; /* Date */ - --fss: 25px; /* Greetings and Weather widger */ - --fses: 16px; /* Links List */ + --fsg: 12vh; /* Time and Greetings */ + --fsm: 8vh; /* Date */ + --fss: 3vh; /* Greetings and Weather widger */ + --fses: 2vh; /* Links List */ /* Light theme */ - --accent: #4b8ec4; /* Hover color */ + --accent: #61b0f1; /* Hover color */ --bg: #f5f5f5; /* Background color */ --sbg: #e4e6e6; /* Cards color */ + --fg: #3a3a3a; /* Foreground color */ --sfg: #3a3a3a; /* Sceondary Foreground color */ @@ -23,7 +24,7 @@ change the --imgcol value to make the filter to your own */ - /* --imgbg: url(/img/wal.jpg); */ + --imgbg: url(assets/background.jpg); --imgcol: linear-gradient( rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) @@ -32,14 +33,14 @@ /* Dark theme */ .darktheme { - --accent: #4b8ec4; /* Hover color */ + --accent: #61b0f1; /* Hover color */ --bg: #19171a; /* Background color */ --sbg: #201e21; /* Cards color */ --fg: #d8dee9; /* Foreground color */ --sfg: #3a3a3a; /* Secondary Foreground color */ --imgcol: linear-gradient( - rgba(0, 0, 0, 0.7), - rgba(0, 0, 0, 0.7) + rgba(0, 0, 0, 0.85), + rgba(0, 0, 0, 0.85) ); /* Filter color */ } @@ -49,15 +50,19 @@ margin: 0; padding: 0; box-sizing: border-box; - font-family: "Open Sans", sans-serif; + font-family: 'Open Sans', sans-serif; transition: 0.2s ease-in-out; } +.withImageBackground { + background-image: var(--imgcol), var(--imgbg); + background-size: cover; +} + body { width: 100vw; height: 100vh; background-color: var(--bg); - background-image: var(--imgcol), var(--imgbg); display: flex; align-items: center; justify-content: center; @@ -94,6 +99,7 @@ body { box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35); border-radius: 5px; } + .card:hover { transform: translateY(-0.2rem); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); @@ -116,12 +122,14 @@ body { align-items: center; justify-content: center; } + .weatherBlock__date { display: flex; align-items: center; justify-content: center; margin-top: 30px; } + .weatherBlock__weather { display: flex; align-items: center; @@ -194,8 +202,8 @@ body { } .buttonLink__icon { - width: 23px; - height: 23px; + width: 3vh; + height: 3vh; color: var(--fg); } @@ -245,35 +253,32 @@ body { grid-row: 3 / span 2; } .list__head { - margin-top: 30px; - margin-bottom: 10px; - width: 30px; + margin-top: 3vh; + margin-bottom: 2vh; color: var(--fg); - height: 30px; + width: 3vh; + height: 3vh; } .list__link { text-decoration: none; font-size: var(--fses); color: var(--fg); - margin-top: 1px; - padding: 6px 12px; + margin-top: 1vh; + padding: 8px 12px; border-radius: 5px; font-weight: bold; + text-align: center; + width: 80%; } .list__link:hover { background-color: var(--accent); color: var(--sfg); + } /* M E D I A - Q U E R I E S */ @media only screen and (max-width: 68.75em) { - :root { - --fsg: 100px; - --fsm: 65px; - --fss: 20px; - } - .container { grid-gap: 20px; padding: 40px; @@ -298,7 +303,7 @@ body { .buttonLink { grid-column: 1 / span 4; - grid-gap: 20px; + grid-gap: 3vw; padding-left: 100px; padding-right: 100px; } diff --git a/assets/Header.png b/assets/Header.png deleted file mode 100644 index 1d4674e..0000000 Binary files a/assets/Header.png and /dev/null differ diff --git a/img/wal.jpg b/assets/background.jpg similarity index 100% rename from img/wal.jpg rename to assets/background.jpg diff --git a/icons/Dark/01d.png b/assets/icons/Dark/01d.png similarity index 100% rename from icons/Dark/01d.png rename to assets/icons/Dark/01d.png diff --git a/icons/Dark/01n.png b/assets/icons/Dark/01n.png similarity index 100% rename from icons/Dark/01n.png rename to assets/icons/Dark/01n.png diff --git a/icons/Dark/02d.png b/assets/icons/Dark/02d.png similarity index 100% rename from icons/Dark/02d.png rename to assets/icons/Dark/02d.png diff --git a/icons/Dark/02n.png b/assets/icons/Dark/02n.png similarity index 100% rename from icons/Dark/02n.png rename to assets/icons/Dark/02n.png diff --git a/icons/Dark/03d.png b/assets/icons/Dark/03d.png similarity index 100% rename from icons/Dark/03d.png rename to assets/icons/Dark/03d.png diff --git a/icons/Dark/03n.png b/assets/icons/Dark/03n.png similarity index 100% rename from icons/Dark/03n.png rename to assets/icons/Dark/03n.png diff --git a/icons/Dark/04d.png b/assets/icons/Dark/04d.png similarity index 100% rename from icons/Dark/04d.png rename to assets/icons/Dark/04d.png diff --git a/icons/Dark/04n.png b/assets/icons/Dark/04n.png similarity index 100% rename from icons/Dark/04n.png rename to assets/icons/Dark/04n.png diff --git a/icons/Dark/09d.png b/assets/icons/Dark/09d.png similarity index 100% rename from icons/Dark/09d.png rename to assets/icons/Dark/09d.png diff --git a/icons/Dark/09n.png b/assets/icons/Dark/09n.png similarity index 100% rename from icons/Dark/09n.png rename to assets/icons/Dark/09n.png diff --git a/icons/Dark/10d.png b/assets/icons/Dark/10d.png similarity index 100% rename from icons/Dark/10d.png rename to assets/icons/Dark/10d.png diff --git a/icons/Dark/10n.png b/assets/icons/Dark/10n.png similarity index 100% rename from icons/Dark/10n.png rename to assets/icons/Dark/10n.png diff --git a/icons/Dark/11d.png b/assets/icons/Dark/11d.png similarity index 100% rename from icons/Dark/11d.png rename to assets/icons/Dark/11d.png diff --git a/icons/Dark/11n.png b/assets/icons/Dark/11n.png similarity index 100% rename from icons/Dark/11n.png rename to assets/icons/Dark/11n.png diff --git a/icons/Dark/13d.png b/assets/icons/Dark/13d.png similarity index 100% rename from icons/Dark/13d.png rename to assets/icons/Dark/13d.png diff --git a/icons/Dark/13n.png b/assets/icons/Dark/13n.png similarity index 100% rename from icons/Dark/13n.png rename to assets/icons/Dark/13n.png diff --git a/icons/Dark/50d.png b/assets/icons/Dark/50d.png similarity index 100% rename from icons/Dark/50d.png rename to assets/icons/Dark/50d.png diff --git a/icons/Dark/50n.png b/assets/icons/Dark/50n.png similarity index 100% rename from icons/Dark/50n.png rename to assets/icons/Dark/50n.png diff --git a/icons/Dark/unknown.png b/assets/icons/Dark/unknown.png similarity index 100% rename from icons/Dark/unknown.png rename to assets/icons/Dark/unknown.png diff --git a/icons/Nord/01d.png b/assets/icons/Nord/01d.png similarity index 100% rename from icons/Nord/01d.png rename to assets/icons/Nord/01d.png diff --git a/icons/Nord/01n.png b/assets/icons/Nord/01n.png similarity index 100% rename from icons/Nord/01n.png rename to assets/icons/Nord/01n.png diff --git a/icons/Nord/02d.png b/assets/icons/Nord/02d.png similarity index 100% rename from icons/Nord/02d.png rename to assets/icons/Nord/02d.png diff --git a/icons/Nord/02n.png b/assets/icons/Nord/02n.png similarity index 100% rename from icons/Nord/02n.png rename to assets/icons/Nord/02n.png diff --git a/icons/Nord/03d.png b/assets/icons/Nord/03d.png similarity index 100% rename from icons/Nord/03d.png rename to assets/icons/Nord/03d.png diff --git a/icons/Nord/03n.png b/assets/icons/Nord/03n.png similarity index 100% rename from icons/Nord/03n.png rename to assets/icons/Nord/03n.png diff --git a/icons/Nord/04d.png b/assets/icons/Nord/04d.png similarity index 100% rename from icons/Nord/04d.png rename to assets/icons/Nord/04d.png diff --git a/icons/Nord/04n.png b/assets/icons/Nord/04n.png similarity index 100% rename from icons/Nord/04n.png rename to assets/icons/Nord/04n.png diff --git a/icons/Nord/09d.png b/assets/icons/Nord/09d.png similarity index 100% rename from icons/Nord/09d.png rename to assets/icons/Nord/09d.png diff --git a/icons/Nord/09n.png b/assets/icons/Nord/09n.png similarity index 100% rename from icons/Nord/09n.png rename to assets/icons/Nord/09n.png diff --git a/icons/Nord/10d.png b/assets/icons/Nord/10d.png similarity index 100% rename from icons/Nord/10d.png rename to assets/icons/Nord/10d.png diff --git a/icons/Nord/10n.png b/assets/icons/Nord/10n.png similarity index 100% rename from icons/Nord/10n.png rename to assets/icons/Nord/10n.png diff --git a/icons/Nord/11d.png b/assets/icons/Nord/11d.png similarity index 100% rename from icons/Nord/11d.png rename to assets/icons/Nord/11d.png diff --git a/icons/Nord/11n.png b/assets/icons/Nord/11n.png similarity index 100% rename from icons/Nord/11n.png rename to assets/icons/Nord/11n.png diff --git a/icons/Nord/13d.png b/assets/icons/Nord/13d.png similarity index 100% rename from icons/Nord/13d.png rename to assets/icons/Nord/13d.png diff --git a/icons/Nord/13n.png b/assets/icons/Nord/13n.png similarity index 100% rename from icons/Nord/13n.png rename to assets/icons/Nord/13n.png diff --git a/icons/Nord/50d.png b/assets/icons/Nord/50d.png similarity index 100% rename from icons/Nord/50d.png rename to assets/icons/Nord/50d.png diff --git a/icons/Nord/50n.png b/assets/icons/Nord/50n.png similarity index 100% rename from icons/Nord/50n.png rename to assets/icons/Nord/50n.png diff --git a/icons/Nord/unknown.png b/assets/icons/Nord/unknown.png similarity index 100% rename from icons/Nord/unknown.png rename to assets/icons/Nord/unknown.png diff --git a/icons/OneDark/01d.png b/assets/icons/OneDark/01d.png similarity index 100% rename from icons/OneDark/01d.png rename to assets/icons/OneDark/01d.png diff --git a/icons/OneDark/01n.png b/assets/icons/OneDark/01n.png similarity index 100% rename from icons/OneDark/01n.png rename to assets/icons/OneDark/01n.png diff --git a/icons/OneDark/02d.png b/assets/icons/OneDark/02d.png similarity index 100% rename from icons/OneDark/02d.png rename to assets/icons/OneDark/02d.png diff --git a/icons/OneDark/02n.png b/assets/icons/OneDark/02n.png similarity index 100% rename from icons/OneDark/02n.png rename to assets/icons/OneDark/02n.png diff --git a/icons/OneDark/03d.png b/assets/icons/OneDark/03d.png similarity index 100% rename from icons/OneDark/03d.png rename to assets/icons/OneDark/03d.png diff --git a/icons/OneDark/03n.png b/assets/icons/OneDark/03n.png similarity index 100% rename from icons/OneDark/03n.png rename to assets/icons/OneDark/03n.png diff --git a/icons/OneDark/04d.png b/assets/icons/OneDark/04d.png similarity index 100% rename from icons/OneDark/04d.png rename to assets/icons/OneDark/04d.png diff --git a/icons/OneDark/04n.png b/assets/icons/OneDark/04n.png similarity index 100% rename from icons/OneDark/04n.png rename to assets/icons/OneDark/04n.png diff --git a/icons/OneDark/09d.png b/assets/icons/OneDark/09d.png similarity index 100% rename from icons/OneDark/09d.png rename to assets/icons/OneDark/09d.png diff --git a/icons/OneDark/09n.png b/assets/icons/OneDark/09n.png similarity index 100% rename from icons/OneDark/09n.png rename to assets/icons/OneDark/09n.png diff --git a/icons/OneDark/10d.png b/assets/icons/OneDark/10d.png similarity index 100% rename from icons/OneDark/10d.png rename to assets/icons/OneDark/10d.png diff --git a/icons/OneDark/10n.png b/assets/icons/OneDark/10n.png similarity index 100% rename from icons/OneDark/10n.png rename to assets/icons/OneDark/10n.png diff --git a/icons/OneDark/11d.png b/assets/icons/OneDark/11d.png similarity index 100% rename from icons/OneDark/11d.png rename to assets/icons/OneDark/11d.png diff --git a/icons/OneDark/11n.png b/assets/icons/OneDark/11n.png similarity index 100% rename from icons/OneDark/11n.png rename to assets/icons/OneDark/11n.png diff --git a/icons/OneDark/13d.png b/assets/icons/OneDark/13d.png similarity index 100% rename from icons/OneDark/13d.png rename to assets/icons/OneDark/13d.png diff --git a/icons/OneDark/13n.png b/assets/icons/OneDark/13n.png similarity index 100% rename from icons/OneDark/13n.png rename to assets/icons/OneDark/13n.png diff --git a/icons/OneDark/50d.png b/assets/icons/OneDark/50d.png similarity index 100% rename from icons/OneDark/50d.png rename to assets/icons/OneDark/50d.png diff --git a/icons/OneDark/50n.png b/assets/icons/OneDark/50n.png similarity index 100% rename from icons/OneDark/50n.png rename to assets/icons/OneDark/50n.png diff --git a/icons/OneDark/unknown.png b/assets/icons/OneDark/unknown.png similarity index 100% rename from icons/OneDark/unknown.png rename to assets/icons/OneDark/unknown.png diff --git a/icons/White/01d.png b/assets/icons/White/01d.png similarity index 100% rename from icons/White/01d.png rename to assets/icons/White/01d.png diff --git a/icons/White/01n.png b/assets/icons/White/01n.png similarity index 100% rename from icons/White/01n.png rename to assets/icons/White/01n.png diff --git a/icons/White/02d.png b/assets/icons/White/02d.png similarity index 100% rename from icons/White/02d.png rename to assets/icons/White/02d.png diff --git a/icons/White/02n.png b/assets/icons/White/02n.png similarity index 100% rename from icons/White/02n.png rename to assets/icons/White/02n.png diff --git a/icons/White/03d.png b/assets/icons/White/03d.png similarity index 100% rename from icons/White/03d.png rename to assets/icons/White/03d.png diff --git a/icons/White/03n.png b/assets/icons/White/03n.png similarity index 100% rename from icons/White/03n.png rename to assets/icons/White/03n.png diff --git a/icons/White/04d.png b/assets/icons/White/04d.png similarity index 100% rename from icons/White/04d.png rename to assets/icons/White/04d.png diff --git a/icons/White/04n.png b/assets/icons/White/04n.png similarity index 100% rename from icons/White/04n.png rename to assets/icons/White/04n.png diff --git a/icons/White/09d.png b/assets/icons/White/09d.png similarity index 100% rename from icons/White/09d.png rename to assets/icons/White/09d.png diff --git a/icons/White/09n.png b/assets/icons/White/09n.png similarity index 100% rename from icons/White/09n.png rename to assets/icons/White/09n.png diff --git a/icons/White/10d.png b/assets/icons/White/10d.png similarity index 100% rename from icons/White/10d.png rename to assets/icons/White/10d.png diff --git a/icons/White/10n.png b/assets/icons/White/10n.png similarity index 100% rename from icons/White/10n.png rename to assets/icons/White/10n.png diff --git a/icons/White/11d.png b/assets/icons/White/11d.png similarity index 100% rename from icons/White/11d.png rename to assets/icons/White/11d.png diff --git a/icons/White/11n.png b/assets/icons/White/11n.png similarity index 100% rename from icons/White/11n.png rename to assets/icons/White/11n.png diff --git a/icons/White/13d.png b/assets/icons/White/13d.png similarity index 100% rename from icons/White/13d.png rename to assets/icons/White/13d.png diff --git a/icons/White/13n.png b/assets/icons/White/13n.png similarity index 100% rename from icons/White/13n.png rename to assets/icons/White/13n.png diff --git a/icons/White/50d.png b/assets/icons/White/50d.png similarity index 100% rename from icons/White/50d.png rename to assets/icons/White/50d.png diff --git a/icons/White/50n.png b/assets/icons/White/50n.png similarity index 100% rename from icons/White/50n.png rename to assets/icons/White/50n.png diff --git a/icons/White/unknown.png b/assets/icons/White/unknown.png similarity index 100% rename from icons/White/unknown.png rename to assets/icons/White/unknown.png diff --git a/icons/favicon.png b/assets/icons/favicon.png similarity index 100% rename from icons/favicon.png rename to assets/icons/favicon.png 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/previewico.png b/assets/img/icons.png similarity index 100% rename from assets/previewico.png rename to assets/img/icons.png diff --git a/assets/previewbg.png b/assets/img/previewbg.png similarity index 100% rename from assets/previewbg.png rename to assets/img/previewbg.png diff --git a/assets/SubHeader.png b/assets/img/subheader.png similarity index 100% rename from assets/SubHeader.png rename to assets/img/subheader.png diff --git a/assets/js/cards.js b/assets/js/cards.js new file mode 100644 index 0000000..863b224 --- /dev/null +++ b/assets/js/cards.js @@ -0,0 +1,27 @@ +console.log("Connected cards"); + +const printCards = () => { + for (const card of CONFIG.cards) { + console.log(card.id); + + let item = ` + + + + `; + + const position = "beforeend"; + + buttonsContainer.insertAdjacentHTML(position, item); + } +}; + +printCards(); diff --git a/js/greeting.js b/assets/js/greeting.js similarity index 71% rename from js/greeting.js rename to assets/js/greeting.js index 9989d26..8268193 100644 --- a/js/greeting.js +++ b/assets/js/greeting.js @@ -3,15 +3,13 @@ const today = new Date(); const hour = today.getHours(); // Here you can change your name -const name = ' John Doe'; +const name = CONFIG.name; // Here you can change your greetings -const gree1 = 'Go to Sleep! '; -const gree2 = 'Good morning! '; -const gree3 = 'Good afternoon '; -const gree4 = 'Good evening, '; -const gree5 = 'Good evening, '; -const gree6 = 'Good evening, '; +const gree1 = `${CONFIG.greetingNight}\xa0`; +const gree2 = `${CONFIG.greetingMorning}\xa0`; +const gree3 = `${CONFIG.greetingAfternoon}\xa0`; +const gree4 = `${CONFIG.greetingEvening}\xa0`; // Define the hours of the greetings if (hour >= 23 && hour < 5) { diff --git a/assets/js/lists.js b/assets/js/lists.js new file mode 100644 index 0000000..4c99f58 --- /dev/null +++ b/assets/js/lists.js @@ -0,0 +1,40 @@ +console.log("Connected lists"); + +const printFirstList = () => { + let icon = ``; + const position = "beforeend"; + list_1.insertAdjacentHTML(position, icon); + for (const link of CONFIG.lists.firstList) { + let item = ` + ${link.name} + `; + const position = "beforeend"; + list_1.insertAdjacentHTML(position, item); + } +}; + +const printSecondList = () => { + let icon = ``; + const position = "beforeend"; + list_2.insertAdjacentHTML(position, icon); + for (const link of CONFIG.lists.secondList) { + let item = ` + ${link.name} + `; + const position = "beforeend"; + list_2.insertAdjacentHTML(position, item); + } +}; + +printFirstList(); +printSecondList(); diff --git a/assets/js/theme.js b/assets/js/theme.js new file mode 100644 index 0000000..b97b2db --- /dev/null +++ b/assets/js/theme.js @@ -0,0 +1,40 @@ +// Store the theme +let darkTheme = localStorage.getItem('darkTheme'); +const themeToggle = document.querySelector('#themeButton'); +const bodyBackground = document.getElementById('#body'); + +// Apply Dark theme +const enableDark = () => { + document.body.classList.add('darktheme'); + localStorage.setItem('darkTheme', 'enabled'); + themeToggle.innerHTML = ``; + feather.replace(); +}; + +// Remove Dark theme +const disableDark = () => { + document.body.classList.remove('darktheme'); + localStorage.setItem('darkTheme', null); + themeToggle.innerHTML = ``; + feather.replace(); +}; + +//Toggle theme +if (darkTheme === 'enabled') { + enableDark(); +} else { + disableDark(); +} + +themeToggle.addEventListener('click', () => { + darkTheme = localStorage.getItem('darkTheme'); + if (darkTheme !== 'enabled') { + enableDark(); + } else { + disableDark(); + } +}); + +if(CONFIG.imageBackground) { + document.body.classList.add('withImageBackground'); +} \ No newline at end of file diff --git a/js/time.js b/assets/js/time.js similarity index 100% rename from js/time.js rename to assets/js/time.js diff --git a/js/weather.js b/assets/js/weather.js similarity index 78% rename from js/weather.js rename to assets/js/weather.js index 9ba77c6..38d09ee 100644 --- a/js/weather.js +++ b/assets/js/weather.js @@ -9,22 +9,18 @@ weather.temperature = { }; // Change to 'F' for Fahrenheit -var tempUnit = 'C'; +var tempUnit = CONFIG.weatherUnit; const KELVIN = 273.15; // Use your own key for the Weather, Get it here: https://openweathermap.org/ -const key = 'aa5b0a76dfbf87441928fb3cc32d3d72'; +const key = `${CONFIG.weatherKey}`; // Set Position function 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 @@ -52,7 +48,7 @@ function getWeather(latitude, longitude) { // Display Weather info function displayWeather() { - iconElement.innerHTML = ``; + iconElement.innerHTML = ``; tempElement.innerHTML = `${weather.temperature.value}Β°${tempUnit}`; descElement.innerHTML = weather.description; } diff --git a/assets/preview.gif b/assets/preview.gif deleted file mode 100644 index 2596465..0000000 Binary files a/assets/preview.gif and /dev/null differ diff --git a/assets/preview.png b/assets/preview.png deleted file mode 100644 index a84eca0..0000000 Binary files a/assets/preview.png and /dev/null differ diff --git a/config.js b/config.js new file mode 100644 index 0000000..561fa4a --- /dev/null +++ b/config.js @@ -0,0 +1,123 @@ +// β•”β•— ╔═╗╔╗╔╔╦╗╔═╗ +// β• β•©β•—β•‘β•£ β•‘β•‘β•‘ β•‘ β•‘ β•‘ +// β•šβ•β•β•šβ•β•β•β•šβ• β•© β•šβ•β• +// β”Œβ”€β”β”Œβ”€β”β”Œβ”β”Œβ”Œβ”€β”β”¬β”Œβ”€β”β”¬ β”¬β”¬β”€β”β”Œβ”€β”β”Œβ”¬β”β”¬β”Œβ”€β”β”Œβ”β”Œ +// β”‚ β”‚ β”‚β”‚β”‚β”‚β”œβ”€ β”‚β”‚ ┬│ β”‚β”œβ”¬β”˜β”œβ”€β”€ β”‚ β”‚β”‚ β”‚β”‚β”‚β”‚ +// β””β”€β”˜β””β”€β”˜β”˜β””β”˜β”” β”΄β””β”€β”˜β””β”€β”˜β”΄β””β”€β”΄ β”΄ β”΄ β”΄β””β”€β”˜β”˜β””β”˜ + +const CONFIG = { + // β”Œβ” β”Œβ”€β”β”Œβ”€β”β”¬β”Œβ”€β”β”Œβ”€β” + // β”œβ”΄β”β”œβ”€β”€β””β”€β”β”‚β”‚ └─┐ + // β””β”€β”˜β”΄ β”΄β””β”€β”˜β”΄β””β”€β”˜β””β”€β”˜ + + // General + name: 'John', + imageBackground: false, + openInNewTab: true, + + // Greetings + greetingMorning: 'Good morning!', + greetingAfternoon: 'Good afternoon,', + greetingEvening: 'Good evening,', + greetingNight: 'Go to Sleep!', + + // Weather + weatherKey: 'InsertYourAPIKeyHere123456', + weatherIcons: 'OneDark', // 'Nord', 'Dark', 'White' + weatherUnit: 'C', + weatherLatitude: '37.774929', + weatherLongitude: '-122.419418', + + + // β”Œβ”€β”β”Œβ”€β”β”¬β”€β”β”Œβ”¬β”β”Œβ”€β” + // β”‚ β”œβ”€β”€β”œβ”¬β”˜ ││└─┐ + // β””β”€β”˜β”΄ β”΄β”΄β””β”€β”€β”΄β”˜β””β”€β”˜ + + // Links + 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/', + }, + ], + + // ┬ β”¬β”Œβ”€β”β”Œβ”¬β”β”Œβ”€β” + // β”‚ │└─┐ β”‚ └─┐ + // β”΄β”€β”˜β”΄β””β”€β”˜ β”΄ β””β”€β”˜ + + //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', + }, + ], + }, +}; diff --git a/index.html b/index.html index ae3b0ac..6ba9d25 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,21 @@ Bento - - - - + + + +