Rorg code
This commit is contained in:
Miguel R. Avila
parent
ea1acd1f9e
commit
f9373ee795
151
README.md
151
README.md
@ -9,28 +9,28 @@
|
||||
|
||||
## 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)
|
||||
- [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 store
|
||||
- **Clock and Date** format can be set to 24 hour (default) or 12 hour
|
||||
- **Greetings** are easy to change and modify
|
||||
- **Variables** for custom colors and font sizes in the `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
|
||||
- **Dark/Light** mode, you can toggle them and It'll be saved in local store
|
||||
- **Clock and Date** format can be set to 24 hour (default) or 12 hour
|
||||
- **Greetings** are easy to change and modify
|
||||
- **Variables** for custom colors and font sizes in the `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:
|
||||
|
||||
@ -39,16 +39,16 @@
|
||||
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`
|
||||
- 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:
|
||||
|
||||
1. You can use different Add-ons/Extensions for it
|
||||
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)
|
||||
- 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
|
||||
|
||||
@ -59,13 +59,17 @@
|
||||
You can change the links (and the icons too) in the HTML Code:
|
||||
|
||||
```html
|
||||
<a href="https://github.com/" target="blank" class="qlink__link qlink__link-1">
|
||||
<i class="qlink__icon" data-feather="github"></i>
|
||||
<a
|
||||
href="https://github.com/"
|
||||
target="blank"
|
||||
class="buttonLink__link card buttonLink__link-1"
|
||||
>
|
||||
<i class="buttonLink__icon" data-feather="github"></i>
|
||||
</a>
|
||||
```
|
||||
|
||||
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.
|
||||
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
|
||||
|
||||
@ -74,23 +78,20 @@ In the CSS code you can always change the variables for both themes (Dark and Li
|
||||
```css
|
||||
/* Light theme */
|
||||
:root {
|
||||
--accent: #186efdaa;
|
||||
--bg: #f5f5f5;
|
||||
--sbg: #e4e6e6;
|
||||
--fg: #3a3a3a;
|
||||
--imgcol: linear-gradient(
|
||||
rgba(255, 255, 255, 0.7),
|
||||
rgba(255, 255, 255, 0.7)
|
||||
);
|
||||
--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: #186efd60;
|
||||
--bg: #1e1f21;
|
||||
--sbg: #2c2d31;
|
||||
--fg: #d8dee9;
|
||||
--imgcol: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
|
||||
--accent: #4b8ec4; /* Hover color */
|
||||
--bg: #19171a; /* Background color */
|
||||
--sbg: #201e21; /* Cards color */
|
||||
--fg: #d8dee9; /* Foreground color */
|
||||
--sfg: #3a3a3a; /* Secondary Foreground color */
|
||||
}
|
||||
```
|
||||
|
||||
@ -103,9 +104,9 @@ const today = new Date();
|
||||
const Hr = today.getHours();
|
||||
|
||||
if (Hr >= 19 || Hr < 5) {
|
||||
enableDark();
|
||||
enableDark();
|
||||
} else {
|
||||
disableDark();
|
||||
disableDark();
|
||||
}
|
||||
```
|
||||
|
||||
@ -124,18 +125,34 @@ It has a black filter by default in `--imgcol`, and it'ts value is: `rgba(255, 2
|
||||
You can put your name and change the greetings.
|
||||
|
||||
```js
|
||||
var name = 'John Doe';
|
||||
var lateTxt = 'Go to Sleep! ';
|
||||
var morningTxt = 'Good morning! ';
|
||||
var afterTxt = 'Good afternoon ';
|
||||
var evenTxt = 'Good evening ';
|
||||
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. Once you have the data, you'll need to set them in the `weather.js` in the **js** folder. The code is
|
||||
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.
|
||||
|
||||
@ -145,42 +162,44 @@ For setting up the Weather widget you're going to need an API Key in: `https://o
|
||||
<img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewico.png">
|
||||
</p>
|
||||
|
||||
The icons by themselves have now 4 different color schemes:
|
||||
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
|
||||
- **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`
|
||||
- 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
|
||||
<div class="weather-icon">
|
||||
<img src="icons/OneDark/unknown.png" />
|
||||
<img src="icons/OneDark/unknown.png" />
|
||||
</div>
|
||||
|
||||
<!-- Change it to: -->
|
||||
|
||||
<div class="weather-icon">
|
||||
<img src="icons/Dark/unknown.png" />
|
||||
<img src="icons/Dark/unknown.png" />
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
function displayWeather() {
|
||||
iconElement.innerHTML = `<img src="icons/OneDark/${weather.iconId}.png"/>`;
|
||||
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
|
||||
descElement.innerHTML = weather.description;
|
||||
iconElement.innerHTML = `<img src="icons/OneDark/${weather.iconId}.png"/>`;
|
||||
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
|
||||
descElement.innerHTML = weather.description;
|
||||
}
|
||||
|
||||
//Change it to:
|
||||
function displayWeather() {
|
||||
iconElement.innerHTML = `<img src="icons/Dark/${weather.iconId}.png"/>`;
|
||||
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
|
||||
descElement.innerHTML = weather.description;
|
||||
iconElement.innerHTML = `<img src="icons/Dark/${weather.iconId}.png"/>`;
|
||||
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
|
||||
descElement.innerHTML = weather.description;
|
||||
}
|
||||
```
|
||||
```
|
||||
209
css/style.css
209
css/style.css
@ -1,18 +1,20 @@
|
||||
/* Import font*/
|
||||
@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 Greeting */
|
||||
--fsm: 75px; /* Date */
|
||||
--fss: 25px; /* Greetings and Weather widger */
|
||||
--fsg: 135px; /* Time and Greetings */
|
||||
--fsm: 75px; /* Date */
|
||||
--fss: 25px; /* Greetings and Weather widger */
|
||||
--fses: 16px; /* Links List */
|
||||
|
||||
/* Light theme */
|
||||
--accent: #186efdaa; /* Hover color */
|
||||
--bg: #f5f5f5; /* Background color */
|
||||
--sbg: #e4e6e6; /* Cards color */
|
||||
--fg: #3a3a3a; /* Foreground color */
|
||||
--accent: #4b8ec4; /* Hover color */
|
||||
--bg: #f5f5f5; /* Background color */
|
||||
--sbg: #e4e6e6; /* Cards color */
|
||||
--fg: #3a3a3a; /* Foreground color */
|
||||
--sfg: #3a3a3a; /* Sceondary Foreground color */
|
||||
|
||||
/* Image background */
|
||||
|
||||
@ -22,32 +24,32 @@
|
||||
to make the filter to your own */
|
||||
|
||||
/* --imgbg: url(/img/wal.jpg); */
|
||||
--imgcol: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)); /* Filter color */
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
:root {
|
||||
--fsg: 100px;
|
||||
--fsm: 65px;
|
||||
--fss: 20px;
|
||||
}
|
||||
--imgcol: linear-gradient(
|
||||
rgba(255, 255, 255, 0.7),
|
||||
rgba(255, 255, 255, 0.7)
|
||||
); /* Filter color */
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
.darktheme {
|
||||
--accent: #186efd60; /* Hover color */
|
||||
--bg: #1e1f21; /* Background color */
|
||||
--sbg: #2c2d31; /* Cards color */
|
||||
--fg: #d8dee9; /* Foreground color */
|
||||
--imgcol: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); /* Filter color */
|
||||
--accent: #4b8ec4; /* 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)
|
||||
); /* Filter color */
|
||||
}
|
||||
|
||||
/* S T Y L E S */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 13.5px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@ -68,21 +70,17 @@ body {
|
||||
top: 0;
|
||||
color: var(--fg);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #00000000;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
.bicon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
#themeButton__icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 150vh;
|
||||
width: 145vh;
|
||||
height: 85vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
@ -90,27 +88,18 @@ body {
|
||||
grid-gap: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
.container {
|
||||
grid-gap: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
.container > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--sbg);
|
||||
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
|
||||
border-radius: 5px;
|
||||
background-color: var(--sbg);
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-0.2rem);
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.fblock {
|
||||
.timeBlock {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
display: flex;
|
||||
@ -118,14 +107,8 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
.fblock {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 4;
|
||||
}
|
||||
}
|
||||
|
||||
.sblock {
|
||||
.weatherBlock {
|
||||
grid-column: 3 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
display: flex;
|
||||
@ -133,22 +116,17 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sblock__date {
|
||||
.weatherBlock__date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.sblock__weather {
|
||||
.weatherBlock__weather {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
.sblock {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.clock {
|
||||
display: flex;
|
||||
@ -179,11 +157,6 @@ body {
|
||||
font-size: var(--fss);
|
||||
color: var(--fg);
|
||||
}
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
#greetings {
|
||||
font-size: var(--fss);
|
||||
}
|
||||
}
|
||||
|
||||
.weather-icon img {
|
||||
width: 70px;
|
||||
@ -203,7 +176,7 @@ body {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.qlink {
|
||||
.buttonLink {
|
||||
grid-row: 3 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
display: grid;
|
||||
@ -212,88 +185,73 @@ body {
|
||||
grid-gap: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
.qlink {
|
||||
grid-row: 3 / span 2;
|
||||
grid-column: 1 / span 4;
|
||||
grid-gap: 20px;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
.buttonLink__link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.qlink__icon {
|
||||
|
||||
.buttonLink__icon {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
color: var(--fg);
|
||||
}
|
||||
.qlink__link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--sbg);
|
||||
width: 100%;
|
||||
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.qlink__link-1 {
|
||||
|
||||
.buttonLink__link-1 {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.qlink__link-2 {
|
||||
.buttonLink__link-2 {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
.qlink__link-3 {
|
||||
.buttonLink__link-3 {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
}
|
||||
.qlink__link-4 {
|
||||
.buttonLink__link-4 {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
.qlink__link-5 {
|
||||
.buttonLink__link-5 {
|
||||
grid-row: 1;
|
||||
grid-column: 3;
|
||||
}
|
||||
.qlink__link-6 {
|
||||
.buttonLink__link-6 {
|
||||
grid-row: 2;
|
||||
grid-column: 3;
|
||||
}
|
||||
.qlink__link:hover {
|
||||
.buttonLink__link:hover {
|
||||
background-color: var(--accent);
|
||||
transform: translateY(-0.2rem);
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.qlink__link:hover svg {
|
||||
stroke: var(--fg);
|
||||
.buttonLink__link:hover svg {
|
||||
stroke: var(--sfg);
|
||||
}
|
||||
|
||||
.qlist {
|
||||
.list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media only screen and (max-width: 68.75em) {
|
||||
.qlist {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.qlist__1 {
|
||||
|
||||
.list__1 {
|
||||
grid-column: 3;
|
||||
grid-row: 3 / span 2;
|
||||
}
|
||||
.qlist__2 {
|
||||
.list__2 {
|
||||
grid-column: 4;
|
||||
grid-row: 3 / span 2;
|
||||
}
|
||||
.qlist__head {
|
||||
.list__head {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
width: 30px;
|
||||
color: var(--fg);
|
||||
height: 30px;
|
||||
}
|
||||
.qlist__link {
|
||||
.list__link {
|
||||
text-decoration: none;
|
||||
font-size: var(--fses);
|
||||
color: var(--fg);
|
||||
@ -302,7 +260,46 @@ body {
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.qlist__link:hover {
|
||||
.list__link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--fg);
|
||||
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;
|
||||
}
|
||||
|
||||
.timeBlock {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 4;
|
||||
}
|
||||
|
||||
.weatherBlock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#greetings {
|
||||
font-size: var(--fss);
|
||||
}
|
||||
|
||||
.list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.buttonLink {
|
||||
grid-column: 1 / span 4;
|
||||
grid-gap: 20px;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
291
index.html
291
index.html
@ -1,151 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Bento</title>
|
||||
<link rel=" shortcut icon" type="image/png" href="icons/favicon.png" />
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Bento</title>
|
||||
<link rel=" shortcut icon" type="image/png" href="icons/favicon.png" />
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
|
||||
<script src="https://unpkg.com/feather-icons"></script>
|
||||
</head>
|
||||
<body class="">
|
||||
<button id="themeButton"><i id="bicon" data-feather="moon"></i></button>
|
||||
<div class="container">
|
||||
<div class="fblock">
|
||||
<div class="clock">
|
||||
<div id="hour" class=""></div>
|
||||
<div id="separator" class=""></div>
|
||||
<div id="minutes" class=""></div>
|
||||
</div>
|
||||
<div id="greetings" class=""></div>
|
||||
</div>
|
||||
<div class="sblock">
|
||||
<div class="sblock__date">
|
||||
<div id="month" class=""></div>
|
||||
<div id="day" class=""></div>
|
||||
</div>
|
||||
<div class="sblock__weather">
|
||||
<div class="weather-icon">
|
||||
<img src="icons/OneDark/unknown.png" />
|
||||
</div>
|
||||
<div class="temperature-value">
|
||||
<p class="">- °<span class="g">c</span></p>
|
||||
</div>
|
||||
<div class="temperature-description">
|
||||
<p class=""></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qlink">
|
||||
<a
|
||||
href="https://github.com/"
|
||||
target="blank"
|
||||
class="qlink__link qlink__link-1"
|
||||
>
|
||||
<i class="qlink__icon" data-feather="github"></i>
|
||||
</a>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://outlook.live.com/mail/inbox"
|
||||
class="qlink__link qlink__link-2"
|
||||
>
|
||||
<i class="qlink__icon" data-feather="mail"></i>
|
||||
</a>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://calendar.google.com/calendar/r"
|
||||
class="qlink__link qlink__link-3"
|
||||
>
|
||||
<i class="qlink__icon" data-feather="calendar"></i>
|
||||
</a>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://flipboard.com/"
|
||||
class="qlink__link qlink__link-4"
|
||||
>
|
||||
<i class="qlink__icon" data-feather="bookmark"></i>
|
||||
</a>
|
||||
<a
|
||||
href="https://columns.app"
|
||||
target="blank"
|
||||
class="qlink__link qlink__link-5"
|
||||
>
|
||||
<i class="qlink__icon" data-feather="trello"></i>
|
||||
</a>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/"
|
||||
class="qlink__link qlink__link-6"
|
||||
>
|
||||
<i class="qlink__icon" data-feather="youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
<script src="https://unpkg.com/feather-icons"></script>
|
||||
</head>
|
||||
|
||||
<div class="card qlist qlist__1">
|
||||
<i class="qlist__head" data-feather="music"></i>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
class="qlist__link"
|
||||
>Inspirational</a
|
||||
>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
class="qlist__link"
|
||||
>Classic</a
|
||||
>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
class="qlist__link"
|
||||
>Oldies</a
|
||||
>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
class="qlist__link"
|
||||
>Rock</a
|
||||
>
|
||||
</div>
|
||||
<body class="">
|
||||
<button id="themeButton">
|
||||
<i id="themeButton__icon" data-feather="moon"></i>
|
||||
</button>
|
||||
<div class="container">
|
||||
<!-- Clock and Greetings -->
|
||||
|
||||
<div class="card qlist qlist__2">
|
||||
<i class="qlist__head" data-feather="coffee"></i>
|
||||
<a
|
||||
href="https://www.linkedin.com"
|
||||
target="blank"
|
||||
class="qlist__link"
|
||||
>LinkedIn</a
|
||||
>
|
||||
<a
|
||||
href="https://dribbble.com/"
|
||||
target="blank"
|
||||
class="qlist__link"
|
||||
>Dribble</a
|
||||
>
|
||||
<a
|
||||
href="https://www.udemy.com/"
|
||||
target="blank"
|
||||
class="qlist__link"
|
||||
>Udemy</a
|
||||
>
|
||||
<a
|
||||
href="https://www.figma.com/files/recent"
|
||||
target="blank"
|
||||
class="qlist__link"
|
||||
>Figma</a
|
||||
>
|
||||
</div>
|
||||
<div class="timeBlock">
|
||||
<div class="clock">
|
||||
<div id="hour" class=""></div>
|
||||
<div id="separator" class=""></div>
|
||||
<div id="minutes" class=""></div>
|
||||
</div>
|
||||
<script src="js/time.js"></script>
|
||||
<script src="js/theme.js"></script>
|
||||
<script src="js/greeting.js"></script>
|
||||
<script src="js/weather.js"></script>
|
||||
<script>
|
||||
feather.replace();
|
||||
</script>
|
||||
</body>
|
||||
<div id="greetings" class=""></div>
|
||||
</div>
|
||||
|
||||
<!-- Coded and designed by Miguel R. Ávila: https://github.com/MiguelRAvila -->
|
||||
<!-- Date and Weather -->
|
||||
|
||||
<div class="weatherBlock">
|
||||
<div class="weatherBlock__date">
|
||||
<div id="month" class=""></div>
|
||||
<div id="day" class=""></div>
|
||||
</div>
|
||||
<div class="weatherBlock__weather">
|
||||
<div class="weather-icon">
|
||||
<img src="icons/OneDark/unknown.png" />
|
||||
</div>
|
||||
<div class="temperature-value">
|
||||
<p class="">- °<span class="g">c</span></p>
|
||||
</div>
|
||||
<div class="temperature-description">
|
||||
<p class=""></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons Links -->
|
||||
|
||||
<div class="buttonLink">
|
||||
<a
|
||||
href="https://github.com/"
|
||||
target="blank"
|
||||
class="buttonLink__link card buttonLink__link-1"
|
||||
>
|
||||
<i class="buttonLink__icon" data-feather="github"></i>
|
||||
</a>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://outlook.live.com/mail/inbox"
|
||||
class="buttonLink__link card buttonLink__link-2"
|
||||
>
|
||||
<i class="buttonLink__icon" data-feather="mail"></i>
|
||||
</a>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://calendar.google.com/calendar/r"
|
||||
class="buttonLink__link card buttonLink__link-3"
|
||||
>
|
||||
<i class="buttonLink__icon" data-feather="calendar"></i>
|
||||
</a>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://flipboard.com/"
|
||||
class="buttonLink__link card buttonLink__link-4"
|
||||
>
|
||||
<i class="buttonLink__icon" data-feather="bookmark"></i>
|
||||
</a>
|
||||
<a
|
||||
href="https://columns.app"
|
||||
target="blank"
|
||||
class="buttonLink__link card buttonLink__link-5"
|
||||
>
|
||||
<i class="buttonLink__icon" data-feather="trello"></i>
|
||||
</a>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/"
|
||||
class="buttonLink__link card buttonLink__link-6"
|
||||
>
|
||||
<i class="buttonLink__icon" data-feather="youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Lists -->
|
||||
|
||||
<div class="card list list__1">
|
||||
<i class="list__head" data-feather="music"></i>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
class="list__link"
|
||||
>Inspirational</a
|
||||
>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
class="list__link"
|
||||
>Classic</a
|
||||
>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
class="list__link"
|
||||
>Oldies</a
|
||||
>
|
||||
<a
|
||||
target="blank"
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
class="list__link"
|
||||
>Rock</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="card list list__2">
|
||||
<i class="list__head" data-feather="coffee"></i>
|
||||
<a href="https://www.linkedin.com" target="blank" class="list__link"
|
||||
>LinkedIn</a
|
||||
>
|
||||
<a href="https://dribbble.com/" target="blank" class="list__link"
|
||||
>Dribble</a
|
||||
>
|
||||
<a href="https://www.udemy.com/" target="blank" class="list__link"
|
||||
>Udemy</a
|
||||
>
|
||||
<a
|
||||
href="https://www.figma.com/files/recent"
|
||||
target="blank"
|
||||
class="list__link"
|
||||
>Figma</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrips -->
|
||||
|
||||
<script src="js/time.js"></script>
|
||||
<script src="js/theme.js"></script>
|
||||
<script src="js/greeting.js"></script>
|
||||
<script src="js/weather.js"></script>
|
||||
<script>
|
||||
feather.replace();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<!-- Coded and designed by Miguel R. Ávila: https://github.com/MiguelRAvila -->
|
||||
</html>
|
||||
|
||||
@ -3,15 +3,15 @@ const today = new Date();
|
||||
const hour = today.getHours();
|
||||
|
||||
// Here you can change your name
|
||||
const name = 'John Doe';
|
||||
const name = ' John Doe';
|
||||
|
||||
// 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 = 'Go to Sleep! ';
|
||||
const gree2 = 'Good morning! ';
|
||||
const gree3 = 'Good afternoon ';
|
||||
const gree4 = 'Good evening, ';
|
||||
const gree5 = 'Good evening, ';
|
||||
const gree6 = 'Good evening, ';
|
||||
|
||||
// Define the hours of the greetings
|
||||
if (hour >= 23 && hour < 5) {
|
||||
|
||||
38
js/theme.js
38
js/theme.js
@ -1,45 +1,43 @@
|
||||
// Store the theme
|
||||
let darkTheme = localStorage.getItem('darkTheme');
|
||||
const themeToggle = document.querySelector('#themeButton');
|
||||
let darkTheme = localStorage.getItem("darkTheme");
|
||||
const themeToggle = document.querySelector("#themeButton");
|
||||
|
||||
// Apply Dark theme
|
||||
const enableDark = () => {
|
||||
document.body.classList.add('darktheme');
|
||||
localStorage.setItem('darkTheme', 'enabled');
|
||||
themeToggle.innerHTML = `<i id="bicon" data-feather="moon"></i>`;
|
||||
document.body.classList.add("darktheme");
|
||||
localStorage.setItem("darkTheme", "enabled");
|
||||
themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="sun"></i>`;
|
||||
feather.replace();
|
||||
};
|
||||
|
||||
// Remove Dark theme
|
||||
const disableDark = () => {
|
||||
document.body.classList.remove('darktheme');
|
||||
localStorage.setItem('darkTheme', null);
|
||||
themeToggle.innerHTML = `<i id="bicon" data-feather="sun"></i>`;
|
||||
document.body.classList.remove("darktheme");
|
||||
localStorage.setItem("darkTheme", null);
|
||||
themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="moon"></i>`;
|
||||
feather.replace();
|
||||
};
|
||||
|
||||
if (darkTheme === 'enabled') {
|
||||
//Toggle theme
|
||||
if (darkTheme === "enabled") {
|
||||
enableDark();
|
||||
} else {
|
||||
disableDark();
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
darkTheme = localStorage.getItem('darkTheme');
|
||||
if (darkTheme !== 'enabled') {
|
||||
themeToggle.addEventListener("click", () => {
|
||||
darkTheme = localStorage.getItem("darkTheme");
|
||||
if (darkTheme !== "enabled") {
|
||||
enableDark();
|
||||
} else {
|
||||
disableDark();
|
||||
}
|
||||
});
|
||||
|
||||
// Change the theme with the time
|
||||
/*
|
||||
if (today === undefined) {
|
||||
const today = new Date();
|
||||
}
|
||||
// Theme accordint the hour
|
||||
|
||||
if (today === undefined) {
|
||||
const hour = today.getHours();
|
||||
}
|
||||
/*
|
||||
const today = new Date();
|
||||
|
||||
if (hour >= 19 || hour < 5) {
|
||||
enableDark();
|
||||
|
||||
@ -13,7 +13,7 @@ var tempUnit = 'C';
|
||||
|
||||
const KELVIN = 273.15;
|
||||
// Use your own key for the Weather, Get it here: https://openweathermap.org/
|
||||
const key = 'aa5b0a76dfbf87441928fb3cc32d3d25';
|
||||
const key = 'aa5b0a76dfbf87441928fb3cc32d3d72';
|
||||
|
||||
// Set Position function
|
||||
setPosition();
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "StartPoint",
|
||||
"version": "1.0.0",
|
||||
"name": "bento",
|
||||
"version": "1.2.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "bento",
|
||||
"version": "1.2.0",
|
||||
"version": "1.3.0",
|
||||
"description": "A Simple Startpage",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
//
|
||||
// - Miguel R. Ávila
|
||||
|
||||
// This file is only for development
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
|
||||
// Responsive
|
||||
$bp-largest: 75em;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user