AtaraxiaDev/Bento
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Rorg code

Browse Source
This commit is contained in:
Miguel R. Avila 2021-01-09 23:56:22 -06:00
parent ea1acd1f9e
commit f9373ee795
9 changed files with 368 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
README.md
View File

@ -45,7 +45,7 @@
#### As New Tab: #### 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 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 Chromium (Brave, Vivaldi, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia)
@ -59,13 +59,17 @@
You can change the links (and the icons too) in the HTML Code: You can change the links (and the icons too) in the HTML Code:
```html ```html
<a href="https://github.com/" target="blank" class="qlink__link qlink__link-1"> <a
<i class="qlink__icon" data-feather="github"></i> href="https://github.com/"
target="blank"
class="buttonLink__link card buttonLink__link-1"
>
<i class="buttonLink__icon" data-feather="github"></i>
</a> </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). 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 ### Colors
@ -74,23 +78,20 @@ In the CSS code you can always change the variables for both themes (Dark and Li
```css ```css
/* Light theme */ /* Light theme */
:root { :root {
--accent: #186efdaa; --accent: #4b8ec4; /* Hover color */
--bg: #f5f5f5; --bg: #f5f5f5; /* Background color */
--sbg: #e4e6e6; --sbg: #e4e6e6; /* Cards color */
--fg: #3a3a3a; --fg: #3a3a3a; /* Foreground color */
--imgcol: linear-gradient( --sfg: #3a3a3a; /* Sceondary Foreground color */
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0.7)
);
} }
/* Dark theme */ /* Dark theme */
.darktheme { .darktheme {
--accent: #186efd60; --accent: #4b8ec4; /* Hover color */
--bg: #1e1f21; --bg: #19171a; /* Background color */
--sbg: #2c2d31; --sbg: #201e21; /* Cards color */
--fg: #d8dee9; --fg: #d8dee9; /* Foreground color */
--imgcol: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); --sfg: #3a3a3a; /* Secondary Foreground color */
} }
``` ```
@ -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. You can put your name and change the greetings.
```js ```js
var name = 'John Doe'; var name = "John Doe";
var lateTxt = 'Go to Sleep! '; const gree1 = "Go to Sleep! ";
var morningTxt = 'Good morning! '; const gree2 = "Good morning! ";
var afterTxt = 'Good afternoon '; const gree3 = "Good afternoon ";
var evenTxt = 'Good evening '; const gree4 = "Good evening, ";
``` ```
It'll change in order of the hour. It'll change in order of the hour.
### Weather Info ### 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. > 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,10 +162,10 @@ 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"> <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewico.png">
</p> </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 - **Nord** Using the Nord Color Scheme and easy-to-eyes colors
- **OneDark** (Default one) Using the One Dark Pro color scheme - **OneDark** (_Default one_) Using the One Dark Pro color scheme
- **Dark** For White theme only users that want a minimalist look - **Dark** For White theme only users that want a minimalist look
- **White** For Dark theme only users that want a minimalist look - **White** For Dark theme only users that want a minimalist look
@ -164,7 +181,9 @@ For example if I'd like to use the `Dark` icon theme:
<div class="weather-icon"> <div class="weather-icon">
<img src="icons/OneDark/unknown.png" /> <img src="icons/OneDark/unknown.png" />
</div> </div>
<!-- Change it to: --> <!-- Change it to: -->
<div class="weather-icon"> <div class="weather-icon">
<img src="icons/Dark/unknown.png" /> <img src="icons/Dark/unknown.png" />
</div> </div>

197
css/style.css
View File

@ -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 { :root {
/* Fonts */ /* Fonts */
--fsg: 135px; /* Time and Greeting */ --fsg: 135px; /* Time and Greetings */
--fsm: 75px; /* Date */ --fsm: 75px; /* Date */
--fss: 25px; /* Greetings and Weather widger */ --fss: 25px; /* Greetings and Weather widger */
--fses: 16px; /* Links List */ --fses: 16px; /* Links List */
/* Light theme */ /* Light theme */
--accent: #186efdaa; /* Hover color */ --accent: #4b8ec4; /* Hover color */
--bg: #f5f5f5; /* Background color */ --bg: #f5f5f5; /* Background color */
--sbg: #e4e6e6; /* Cards color */ --sbg: #e4e6e6; /* Cards color */
--fg: #3a3a3a; /* Foreground color */ --fg: #3a3a3a; /* Foreground color */
--sfg: #3a3a3a; /* Sceondary Foreground color */
/* Image background */ /* Image background */
@ -22,32 +24,32 @@
to make the filter to your own */ to make the filter to your own */
/* --imgbg: url(/img/wal.jpg); */ /* --imgbg: url(/img/wal.jpg); */
--imgcol: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)); /* Filter color */ --imgcol: linear-gradient(
} rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0.7)
@media only screen and (max-width: 68.75em) { ); /* Filter color */
:root {
--fsg: 100px;
--fsm: 65px;
--fss: 20px;
}
} }
/* Dark theme */ /* Dark theme */
.darktheme { .darktheme {
--accent: #186efd60; /* Hover color */ --accent: #4b8ec4; /* Hover color */
--bg: #1e1f21; /* Background color */ --bg: #19171a; /* Background color */
--sbg: #2c2d31; /* Cards color */ --sbg: #201e21; /* Cards color */
--fg: #d8dee9; /* Foreground color */ --fg: #d8dee9; /* Foreground color */
--imgcol: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); /* Filter 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; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Open Sans', sans-serif; font-family: "Open Sans", sans-serif;
font-size: 13.5px;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
} }
@ -68,21 +70,17 @@ body {
top: 0; top: 0;
color: var(--fg); color: var(--fg);
border: none; border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer; cursor: pointer;
background-color: #00000000; background-color: #00000000;
-webkit-appearance: none;
-moz-appearance: none;
} }
.bicon { #themeButton__icon {
width: 26px; width: 25px;
height: 26px; height: 25px;
} }
.container { .container {
width: 150vh; width: 145vh;
height: 85vh; height: 85vh;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
@ -90,27 +88,18 @@ body {
grid-gap: 30px; grid-gap: 30px;
padding: 20px; padding: 20px;
} }
@media only screen and (max-width: 68.75em) {
.container {
grid-gap: 20px;
padding: 40px;
}
}
.container > * {
width: 100%;
}
.card { .card {
background-color: var(--sbg);
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35); box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
border-radius: 5px; border-radius: 5px;
background-color: var(--sbg);
} }
.card:hover { .card:hover {
transform: translateY(-0.2rem); transform: translateY(-0.2rem);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
} }
.fblock { .timeBlock {
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 1 / span 2; grid-column: 1 / span 2;
display: flex; display: flex;
@ -118,14 +107,8 @@ body {
align-items: center; align-items: center;
justify-content: 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-column: 3 / span 2;
grid-row: 1 / span 2; grid-row: 1 / span 2;
display: flex; display: flex;
@ -133,22 +116,17 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.sblock__date { .weatherBlock__date {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 30px; margin-top: 30px;
} }
.sblock__weather { .weatherBlock__weather {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
@media only screen and (max-width: 68.75em) {
.sblock {
display: none;
}
}
.clock { .clock {
display: flex; display: flex;
@ -179,11 +157,6 @@ body {
font-size: var(--fss); font-size: var(--fss);
color: var(--fg); color: var(--fg);
} }
@media only screen and (max-width: 68.75em) {
#greetings {
font-size: var(--fss);
}
}
.weather-icon img { .weather-icon img {
width: 70px; width: 70px;
@ -203,7 +176,7 @@ body {
color: var(--fg); color: var(--fg);
} }
.qlink { .buttonLink {
grid-row: 3 / span 2; grid-row: 3 / span 2;
grid-column: 1 / span 2; grid-column: 1 / span 2;
display: grid; display: grid;
@ -212,88 +185,73 @@ body {
grid-gap: 30px; grid-gap: 30px;
padding: 20px; padding: 20px;
} }
@media only screen and (max-width: 68.75em) {
.qlink { .buttonLink__link {
grid-row: 3 / span 2; display: flex;
grid-column: 1 / span 4; justify-content: center;
grid-gap: 20px; align-items: center;
padding-left: 100px; width: 100%;
padding-right: 100px;
}
} }
.qlink__icon {
.buttonLink__icon {
width: 23px; width: 23px;
height: 23px; height: 23px;
color: var(--fg); color: var(--fg);
} }
.qlink__link {
display: flex; .buttonLink__link-1 {
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 {
grid-row: 1; grid-row: 1;
grid-column: 1; grid-column: 1;
} }
.qlink__link-2 { .buttonLink__link-2 {
grid-row: 1; grid-row: 1;
grid-column: 2; grid-column: 2;
} }
.qlink__link-3 { .buttonLink__link-3 {
grid-row: 2; grid-row: 2;
grid-column: 1; grid-column: 1;
} }
.qlink__link-4 { .buttonLink__link-4 {
grid-row: 2; grid-row: 2;
grid-column: 2; grid-column: 2;
} }
.qlink__link-5 { .buttonLink__link-5 {
grid-row: 1; grid-row: 1;
grid-column: 3; grid-column: 3;
} }
.qlink__link-6 { .buttonLink__link-6 {
grid-row: 2; grid-row: 2;
grid-column: 3; grid-column: 3;
} }
.qlink__link:hover { .buttonLink__link:hover {
background-color: var(--accent); background-color: var(--accent);
transform: translateY(-0.2rem);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
} }
.qlink__link:hover svg { .buttonLink__link:hover svg {
stroke: var(--fg); stroke: var(--sfg);
} }
.qlist { .list {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
@media only screen and (max-width: 68.75em) {
.qlist { .list__1 {
display: none;
}
}
.qlist__1 {
grid-column: 3; grid-column: 3;
grid-row: 3 / span 2; grid-row: 3 / span 2;
} }
.qlist__2 { .list__2 {
grid-column: 4; grid-column: 4;
grid-row: 3 / span 2; grid-row: 3 / span 2;
} }
.qlist__head { .list__head {
margin-top: 30px; margin-top: 30px;
margin-bottom: 20px; margin-bottom: 10px;
width: 30px; width: 30px;
color: var(--fg); color: var(--fg);
height: 30px; height: 30px;
} }
.qlist__link { .list__link {
text-decoration: none; text-decoration: none;
font-size: var(--fses); font-size: var(--fses);
color: var(--fg); color: var(--fg);
@ -302,7 +260,46 @@ body {
border-radius: 5px; border-radius: 5px;
font-weight: bold; font-weight: bold;
} }
.qlist__link:hover { .list__link:hover {
background-color: var(--accent); 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;
}
} }

85
index.html
View File

@ -9,10 +9,15 @@
<script src="https://unpkg.com/feather-icons"></script> <script src="https://unpkg.com/feather-icons"></script>
</head> </head>
<body class=""> <body class="">
<button id="themeButton"><i id="bicon" data-feather="moon"></i></button> <button id="themeButton">
<i id="themeButton__icon" data-feather="moon"></i>
</button>
<div class="container"> <div class="container">
<div class="fblock"> <!-- Clock and Greetings -->
<div class="timeBlock">
<div class="clock"> <div class="clock">
<div id="hour" class=""></div> <div id="hour" class=""></div>
<div id="separator" class=""></div> <div id="separator" class=""></div>
@ -20,12 +25,15 @@
</div> </div>
<div id="greetings" class=""></div> <div id="greetings" class=""></div>
</div> </div>
<div class="sblock">
<div class="sblock__date"> <!-- Date and Weather -->
<div class="weatherBlock">
<div class="weatherBlock__date">
<div id="month" class=""></div> <div id="month" class=""></div>
<div id="day" class=""></div> <div id="day" class=""></div>
</div> </div>
<div class="sblock__weather"> <div class="weatherBlock__weather">
<div class="weather-icon"> <div class="weather-icon">
<img src="icons/OneDark/unknown.png" /> <img src="icons/OneDark/unknown.png" />
</div> </div>
@ -37,107 +45,106 @@
</div> </div>
</div> </div>
</div> </div>
<div class="qlink">
<!-- Buttons Links -->
<div class="buttonLink">
<a <a
href="https://github.com/" href="https://github.com/"
target="blank" target="blank"
class="qlink__link qlink__link-1" class="buttonLink__link card buttonLink__link-1"
> >
<i class="qlink__icon" data-feather="github"></i> <i class="buttonLink__icon" data-feather="github"></i>
</a> </a>
<a <a
target="blank" target="blank"
href="https://outlook.live.com/mail/inbox" href="https://outlook.live.com/mail/inbox"
class="qlink__link qlink__link-2" class="buttonLink__link card buttonLink__link-2"
> >
<i class="qlink__icon" data-feather="mail"></i> <i class="buttonLink__icon" data-feather="mail"></i>
</a> </a>
<a <a
target="blank" target="blank"
href="https://calendar.google.com/calendar/r" href="https://calendar.google.com/calendar/r"
class="qlink__link qlink__link-3" class="buttonLink__link card buttonLink__link-3"
> >
<i class="qlink__icon" data-feather="calendar"></i> <i class="buttonLink__icon" data-feather="calendar"></i>
</a> </a>
<a <a
target="blank" target="blank"
href="https://flipboard.com/" href="https://flipboard.com/"
class="qlink__link qlink__link-4" class="buttonLink__link card buttonLink__link-4"
> >
<i class="qlink__icon" data-feather="bookmark"></i> <i class="buttonLink__icon" data-feather="bookmark"></i>
</a> </a>
<a <a
href="https://columns.app" href="https://columns.app"
target="blank" target="blank"
class="qlink__link qlink__link-5" class="buttonLink__link card buttonLink__link-5"
> >
<i class="qlink__icon" data-feather="trello"></i> <i class="buttonLink__icon" data-feather="trello"></i>
</a> </a>
<a <a
target="blank" target="blank"
href="https://www.youtube.com/" href="https://www.youtube.com/"
class="qlink__link qlink__link-6" class="buttonLink__link card buttonLink__link-6"
> >
<i class="qlink__icon" data-feather="youtube"></i> <i class="buttonLink__icon" data-feather="youtube"></i>
</a> </a>
</div> </div>
<div class="card qlist qlist__1"> <!-- Lists -->
<i class="qlist__head" data-feather="music"></i>
<div class="card list list__1">
<i class="list__head" data-feather="music"></i>
<a <a
target="blank" target="blank"
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
class="qlist__link" class="list__link"
>Inspirational</a >Inspirational</a
> >
<a <a
target="blank" target="blank"
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
class="qlist__link" class="list__link"
>Classic</a >Classic</a
> >
<a <a
target="blank" target="blank"
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
class="qlist__link" class="list__link"
>Oldies</a >Oldies</a
> >
<a <a
target="blank" target="blank"
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
class="qlist__link" class="list__link"
>Rock</a >Rock</a
> >
</div> </div>
<div class="card qlist qlist__2"> <div class="card list list__2">
<i class="qlist__head" data-feather="coffee"></i> <i class="list__head" data-feather="coffee"></i>
<a <a href="https://www.linkedin.com" target="blank" class="list__link"
href="https://www.linkedin.com"
target="blank"
class="qlist__link"
>LinkedIn</a >LinkedIn</a
> >
<a <a href="https://dribbble.com/" target="blank" class="list__link"
href="https://dribbble.com/"
target="blank"
class="qlist__link"
>Dribble</a >Dribble</a
> >
<a <a href="https://www.udemy.com/" target="blank" class="list__link"
href="https://www.udemy.com/"
target="blank"
class="qlist__link"
>Udemy</a >Udemy</a
> >
<a <a
href="https://www.figma.com/files/recent" href="https://www.figma.com/files/recent"
target="blank" target="blank"
class="qlist__link" class="list__link"
>Figma</a >Figma</a
> >
</div> </div>
</div> </div>
<!-- Scrips -->
<script src="js/time.js"></script> <script src="js/time.js"></script>
<script src="js/theme.js"></script> <script src="js/theme.js"></script>
<script src="js/greeting.js"></script> <script src="js/greeting.js"></script>

8
js/greeting.js
View File

@ -3,15 +3,15 @@ const today = new Date();
const hour = today.getHours(); const hour = today.getHours();
// Here you can change your name // Here you can change your name
const name = 'John Doe'; const name = ' John Doe';
// Here you can change your greetings // Here you can change your greetings
const gree1 = 'Go to Sleep! '; const gree1 = 'Go to Sleep! ';
const gree2 = 'Good morning! '; const gree2 = 'Good morning! ';
const gree3 = 'Good afternoon '; const gree3 = 'Good afternoon ';
const gree4 = 'Good evening '; const gree4 = 'Good evening, ';
const gree5 = 'Good evening '; const gree5 = 'Good evening, ';
const gree6 = 'Good evening '; const gree6 = 'Good evening, ';
// Define the hours of the greetings // Define the hours of the greetings
if (hour >= 23 && hour < 5) { if (hour >= 23 && hour < 5) {

38
js/theme.js
View File

@ -1,45 +1,43 @@
// Store the theme // Store the theme
let darkTheme = localStorage.getItem('darkTheme'); let darkTheme = localStorage.getItem("darkTheme");
const themeToggle = document.querySelector('#themeButton'); const themeToggle = document.querySelector("#themeButton");
// Apply Dark theme
const enableDark = () => { const enableDark = () => {
document.body.classList.add('darktheme'); document.body.classList.add("darktheme");
localStorage.setItem('darkTheme', 'enabled'); localStorage.setItem("darkTheme", "enabled");
themeToggle.innerHTML = `<i id="bicon" data-feather="moon"></i>`; themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="sun"></i>`;
feather.replace(); feather.replace();
}; };
// Remove Dark theme
const disableDark = () => { const disableDark = () => {
document.body.classList.remove('darktheme'); document.body.classList.remove("darktheme");
localStorage.setItem('darkTheme', null); localStorage.setItem("darkTheme", null);
themeToggle.innerHTML = `<i id="bicon" data-feather="sun"></i>`; themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="moon"></i>`;
feather.replace(); feather.replace();
}; };
if (darkTheme === 'enabled') { //Toggle theme
if (darkTheme === "enabled") {
enableDark(); enableDark();
} else { } else {
disableDark(); disableDark();
} }
themeToggle.addEventListener('click', () => { themeToggle.addEventListener("click", () => {
darkTheme = localStorage.getItem('darkTheme'); darkTheme = localStorage.getItem("darkTheme");
if (darkTheme !== 'enabled') { if (darkTheme !== "enabled") {
enableDark(); enableDark();
} else { } else {
disableDark(); disableDark();
} }
}); });
// Change the theme with the time // Theme accordint the hour
/*
if (today === undefined) {
const today = new Date();
}
if (today === undefined) { /*
const hour = today.getHours(); const today = new Date();
}
if (hour >= 19 || hour < 5) { if (hour >= 19 || hour < 5) {
enableDark(); enableDark();

2
js/weather.js
View File

@ -13,7 +13,7 @@ var tempUnit = 'C';
const KELVIN = 273.15; const KELVIN = 273.15;
// Use your own key for the Weather, Get it here: https://openweathermap.org/ // Use your own key for the Weather, Get it here: https://openweathermap.org/
const key = 'aa5b0a76dfbf87441928fb3cc32d3d25'; const key = 'aa5b0a76dfbf87441928fb3cc32d3d72';
// Set Position function // Set Position function
setPosition(); setPosition();

4
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "StartPoint", "name": "bento",
"version": "1.0.0", "version": "1.2.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bento", "name": "bento",
"version": "1.2.0", "version": "1.3.0",
"description": "A Simple Startpage", "description": "A Simple Startpage",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

2
sass/main.scss
View File

@ -5,6 +5,8 @@
// //
// - Miguel R. Ávila // - 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'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
// Responsive // Responsive
$bp-largest: 75em; $bp-largest: 75em;