diff --git a/README.md b/README.md index 96bd47d69..e63a60e6d 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +### :wave: Hey! If you're using this fork for theming, auto switching, or docker support, I'd recommend checking out [Bento-next](https://github.com/lewisdoesstuff/bento-next) + +Bento-next is my fork of Bento, entirely rewritten in Vue 3, with *many* more features that don't fit as well upstream. You can now host it with a Docker image, or on GitHub Pages. + ![image](assets/img/header.png)

@@ -19,6 +23,8 @@ - [🏡 As Home Page](#-as-home-page) - [➕ As New Tab](#-as-new-tab) - [🐬 In a Docker Container](#-in-a-docker-container) + - [Docker run](#docker-run) + - [docker-compose](#docker-compose) - [🎨 Customization](#-customization) - [👋 General: Name, Image Background and Greetings](#-general-name-image-background-and-greetings) - [📐 Layouts: Bento, Lists and Buttons.](#-layouts-bento-lists-and-buttons) @@ -26,6 +32,7 @@ - [📑 Lists & Links](#-lists--links) - [⛈️ Weather: Api Key, Icons and Unit](#️-weather-api-key-icons-and-unit) - [💛 Colors](#-colors) + - [🖌️ Custom Colors](#️-custom-colors) - [🌑 Auto change theme](#-auto-change-theme) @@ -60,6 +67,8 @@ You can use different Add-ons/Extensions for it ### 🐬 In a Docker Container +*Note: the current published docker image is built from the upstream repo.** + You can run Bento in a Docker Container, either with `docker run`, or with the included `docker-compose` file. #### Docker run @@ -83,8 +92,14 @@ To change the default name, the greetings and if you want to have an image backg ```js // General name: 'John', - imageBackground: false, openInNewTab: true, + twelveHourFormat: false, + title: 'Bento', + + // Theme + theme: 'bento', + imageBackground: false, + imageUrl: './assets/background.jpg', // Set custom background image URL. If the page is served insecurely, you may have issues loading images from pages over https. // Greetings greetingMorning: 'Good morning!', @@ -94,7 +109,7 @@ To change the default name, the greetings and if you want to have an image backg ``` -> You can change the background by substituting the `background.jpg` file in `assets` folder. +> You can change the background by providing a link to an image in `config.js`. ![](assets/img/backgroundImage.png) @@ -236,33 +251,73 @@ Finally just add them to the `config.js` file. ### 💛 Colors -In the `app.css` file you can change the variables for both themes (Dark and Light): +Bento supports custom theming with several pre-included presets to choose from! +Change the current theme in `config.js` +Included themes: + + - [Arc](https://github.com/horst3180/arc-theme) + - Bento (default) + - [Catppuccin](https://github.com/catppuccin/catppuccin) -- The full set of Catppuccin colors can be added to Bento using the themes found at [catppuccin/bento](https://github.com/catppuccin/bento) + - [Concept-Dark](https://www.deviantart.com/zb652/art/Concept-Dark-885878180) + - [Monokai (free)](https://monokai.pro/) + - [Nord](https://www.nordtheme.com/) + - Sakura + - [Solarized](https://ethanschoonover.com/solarized/) + - [Summer](https://github.com/JhonnyRice/summer) -```css -/* Light theme */ +```js + // Theme + theme: 'bento', +``` +### 🖌️ Custom Colors + +You can create your own themes by adding them to the `./assets/themes/` folder, with a `.css` extension! +Example: + +```css :root { - --accent: #61b0f1; /* Hover color */ - --bg: #f5f5f5; /* Background color */ - --sbg: #e4e6e6; /* Cards color */ + + /* Light Colors */ + + --background: #f5f5f5; /* Background color */ + --accent: #57a0d9; /* Hover color */ + --cards: #e4e6e6; /* Cards color */ + + /* Fonts Color */ --fg: #3a3a3a; /* Foreground color */ - --sfg: #3a3a3a; /* Sceondary Foreground color */ -} + --sfg: #494949; /* Sceondary Foreground color */ -/* Dark theme */ + /* Image background */ + --imgcol: linear-gradient( + rgba(255, 255, 255, 0.7), + rgba(255, 255, 255, 0.7) + ); /* Filter color */ +} .darktheme { - --accent: #61b0f1; /* Hover color */ - --bg: #19171a; /* Background color */ - --sbg: #201e21; /* Cards color */ + /* Dark Colors */ + + --background: #19171a; /* Background color */ + --accent: #57a0d9; /* Hover color */ + --cards: #201e21; /* Cards color */ + + /* Fonts Color */ --fg: #d8dee9; /* Foreground color */ - --sfg: #3a3a3a; /* Secondary Foreground color */ + --sfg: #2c292e; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(0, 0, 0, 0.85), + rgba(0, 0, 0, 0.85) + ); /* Filter color */ } + ``` ### 🌑 Auto change theme -The theme can be automatically changed by the OS' current theme or personalized hours +The theme can be automatically changed by the OS' current theme, set hours, or following sunrise/sunset. that you can change in the `config.js` file: ```js @@ -276,6 +331,9 @@ that you can change in the `config.js` file: changeThemeByHour: true, // If it's true, it will use the values below: hourDarkThemeActive: '18:30', // Turn on the dark theme after this hour hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour + + // Autochange automatically based on location (sunrise/sunset). Openweathermap API key required. + changeThemeByLocation: false, ``` ![](assets/img/darkMode.png) diff --git a/app.css b/app.css index d5edd7445..971ddd3db 100644 --- a/app.css +++ b/app.css @@ -20,40 +20,10 @@ --fg-list: 2vh; /* Links List */ --icon: 3vh; /* Icon Size */ - /* Fonts Color */ - --fg: #3a3a3a; /* Foreground color */ - --sfg: #494949; /* Sceondary Foreground color */ - - /* Light Colors */ - --accent: #57a0d9; /* Hover color */ - --background: #f5f5f5; /* Background color */ - --cards: #e4e6e6; /* Cards color */ - - /* Image background */ - --imgbg: url(assets/background.jpg); /* Image URL */ - --imgcol: linear-gradient( - rgba(255, 255, 255, 0.7), - rgba(255, 255, 255, 0.7) - ); /* Filter color */ -} - -.darktheme { - /* Dark Colors */ - --accent: #57a0d9; /* Hover color */ - --background: #19171a; /* Background color */ - --cards: #201e21; /* Cards color */ - - /* Fonts Color */ - --fg: #d8dee9; /* Foreground color */ - --sfg: #2c292e; /* Secondary Foreground color */ - - /* Image background */ - --imgcol: linear-gradient( - rgba(0, 0, 0, 0.85), - rgba(0, 0, 0, 0.85) - ); /* Filter color */ } + + /* // ┌─┐┌┬┐┬ ┬┬ ┌─┐┌─┐ // └─┐ │ └┬┘│ ├┤ └─┐ diff --git a/assets/js/theme.js b/assets/js/theme.js index 61b99a93b..b03728e48 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -7,6 +7,17 @@ let darkTheme = localStorage.getItem('darkTheme'); const themeToggle = document.querySelector('#themeButton'); const bodyBackground = document.getElementById('#body'); +setTheme(); + +function setTheme() { + const theme = CONFIG.theme; + var link = document.createElement("link"); + link.type = "text/css"; + link.rel = "stylesheet"; + link.href = `./assets/themes/${theme}.css` + document.head.appendChild(link); +} + const enableDark = () => { document.body.classList.add('darktheme'); localStorage.setItem('darkTheme', 'enabled'); @@ -39,6 +50,8 @@ themeToggle.addEventListener('click', () => { }); if (CONFIG.imageBackground) { + const root = document.querySelector(':root'); + root.style.setProperty('--imgbg', `url(${CONFIG.imageUrl})`); document.body.classList.add('withImageBackground'); } @@ -61,3 +74,18 @@ if (CONFIG.changeThemeByHour && CONFIG.autoChangeTheme && !CONFIG.changeThemeByO disableDark(); } } + +// there may be a better way to do this && +if (CONFIG.changeThemeByLocation && CONFIG.autoChangeTheme && !CONFIG.changeThemeByOS && !CONFIG.changeThemeByHour) { + Promise.resolve(weatherPromise).then(weather => { + const unix = Date.now() / 1000; + if ( + unix >= weather.sunrise && + unix < weather.sunset + ) { + disableDark(); + } else { + enableDark(); + } + }); +} \ No newline at end of file diff --git a/assets/js/title.js b/assets/js/title.js new file mode 100644 index 000000000..c0d2fe15a --- /dev/null +++ b/assets/js/title.js @@ -0,0 +1,10 @@ +// ___ . ___ ___ +// | | | | |__ +// | | | |___ |___ +// Function to set window title. + +const SetWindowTitle = () => { + document.title = CONFIG.title; +} + +SetWindowTitle(); diff --git a/assets/js/weather.js b/assets/js/weather.js index 3d0dbb999..8cbe8c9d9 100644 --- a/assets/js/weather.js +++ b/assets/js/weather.js @@ -7,56 +7,55 @@ const iconElement = document.querySelector('.weatherIcon'); const tempElement = document.querySelector('.weatherValue p'); const descElement = document.querySelector('.weatherDescription p'); -const weather = {}; -weather.temperature = { - unit: 'celsius', -}; - var tempUnit = CONFIG.weatherUnit; const KELVIN = 273.15; const key = `${CONFIG.weatherKey}`; -setPosition(); - -function setPosition(position) { - if (!CONFIG.trackLocation || !navigator.geolocation) { - if (CONFIG.trackLocation) { - console.error('Geolocation not available'); - } - getWeather(CONFIG.defaultLatitude, CONFIG.defaultLongitude); - return; - } - navigator.geolocation.getCurrentPosition( - pos => { - getWeather(pos.coords.latitude.toFixed(3), pos.coords.longitude.toFixed(3)); - }, - err => { - console.error(err); - getWeather(CONFIG.defaultLatitude, CONFIG.defaultLongitude); - } - ); +const weatherPromise = getWeather(); +displayWeather(); + +async function setPosition() { + let pos; + if (!CONFIG.trackLocation || !navigator.geolocation) { + if (CONFIG.trackLocation) { + console.error('Geolocation not available'); + } + pos = ({ lat: CONFIG.defaultLatitude, lon: CONFIG.defaultLongitude }); + } + + pos = new Promise((resolve) => { + navigator.geolocation.getCurrentPosition((pos) => { + resolve({ lat: pos.coords.latitude.toFixed(3), lon: pos.coords.longitude.toFixed(3) }); + }, + () => { + resolve({ lat: CONFIG.defaultLatitude, lon: CONFIG.defaultLongitude }); + }); + }); + return pos; } -function getWeather(latitude, longitude) { - let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&lang=${CONFIG.language}&appid=${key}`; - fetch(api) - .then(function(response) { - let data = response.json(); - return data; - }) - .then(function(data) { - let celsius = Math.floor(data.main.temp - KELVIN); - weather.temperature.value = tempUnit == 'C' ? celsius : (celsius * 9) / 5 + 32; - weather.description = data.weather[0].description; - weather.iconId = data.weather[0].icon; - }) - .then(function() { - displayWeather(); - }); +async function getWeather() { + const position = await setPosition(); + let api = `https://api.openweathermap.org/data/2.5/weather?lat=${position.lat}&lon=${position.lon}&lang=${CONFIG.language}&appid=${key}`; + + let response = await fetch(api).catch(err => { + console.log(err); + }); + let data = await response.json(); + + let celsius = Math.floor(data.main.temp - KELVIN); + return { + description: data.weather[0].description, + iconId: data.weather[0].icon, + sunrise: data.sys.sunrise, + sunset: data.sys.sunset, + temperature: tempUnit == 'C' ? celsius : (celsius * 9) / 5 + 32 + }; } -function displayWeather() { - iconElement.innerHTML = ``; - tempElement.innerHTML = `${weather.temperature.value.toFixed(0)}°${tempUnit}`; - descElement.innerHTML = weather.description; +async function displayWeather() { + var weather = await weatherPromise; + iconElement.innerHTML = ``; + tempElement.innerHTML = `${weather.temperature.toFixed(0)}°${tempUnit}`; + descElement.innerHTML = weather.description; } diff --git a/assets/themes/arc.css b/assets/themes/arc.css new file mode 100644 index 000000000..9f84da343 --- /dev/null +++ b/assets/themes/arc.css @@ -0,0 +1,36 @@ +:root { + /* Light Colors */ + + --background: #F5F6F7; /* Background color */ + --accent: #5294e2; /* Hover color */ + --cards: #d9dde0; /* Cards color */ + + /* Fonts Color */ + --fg: #5c616c; /* Foreground color */ + --sfg: #ffffff; /* Sceondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(245, 246, 247, 0.7), + rgba(245, 246, 247, 0.7) + ); /* Filter color */ + } + + .darktheme { + /* Dark Colors */ + + --background: #383C4A; /* Background color */ + --accent: #4e5467; /* Hover color */ + --cards: #22242d; /* Cards color */ + + /* Fonts Color */ + --fg: #D3DAE3; /* Foreground color */ + --sfg: #5294e2; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(56 60, 74, 0.85), + rgba(56 60, 74, 0.85) + ); /* Filter color */ + } + \ No newline at end of file diff --git a/assets/themes/bento.css b/assets/themes/bento.css new file mode 100644 index 000000000..9c6cec65c --- /dev/null +++ b/assets/themes/bento.css @@ -0,0 +1,36 @@ +:root { + + /* Light Colors */ + + --background: #f5f5f5; /* Background color */ + --accent: #57a0d9; /* Hover color */ + --cards: #e4e6e6; /* Cards color */ + + /* Fonts Color */ + --fg: #3a3a3a; /* Foreground color */ + --sfg: #494949; /* Sceondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(255, 255, 255, 0.7), + rgba(255, 255, 255, 0.7) + ); /* Filter color */ +} + +.darktheme { + /* Dark Colors */ + + --background: #19171a; /* Background color */ + --accent: #57a0d9; /* Hover color */ + --cards: #201e21; /* Cards color */ + + /* Fonts Color */ + --fg: #d8dee9; /* Foreground color */ + --sfg: #2c292e; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(0, 0, 0, 0.85), + rgba(0, 0, 0, 0.85) + ); /* Filter color */ +} diff --git a/assets/themes/catppuccin.css b/assets/themes/catppuccin.css new file mode 100644 index 000000000..c7fc6c7b2 --- /dev/null +++ b/assets/themes/catppuccin.css @@ -0,0 +1,37 @@ +:root { + /* Light Colors */ + /* Catppuccin is a dark-mode color palete. The theme is similar for both modes. */ + + --background: #575268; /* Background color */ + --accent: #c3bac6; /* Hover color */ + --cards: #988ba2; /* Cards color */ + + /* Fonts Color */ + --fg: #d9e0ee; /* Foreground color */ + --sfg: #f5e0dc; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(87, 82, 104, 0.85), + rgba(87, 82, 104, 0.85) + ); /* Filter color */ +} + +.darktheme { + /* Dark Colors */ + + --background: #1e1e2e; /* Background color */ + --accent: #575268; /* Hover color */ + --cards: #302d41; /* Cards color */ + + /* Fonts Color */ + --fg: #d9e0ee; /* Foreground color */ + --sfg: #f5e0dc; /* Secondary Foreground color */ + + /* Image background */ + /* Image background */ + --imgcol: linear-gradient( + rgba(30, 30, 46, 0.85), + rgba(30, 30, 46, 0.85) + ); /* Filter color */ +} diff --git a/assets/themes/conceptdark.css b/assets/themes/conceptdark.css new file mode 100644 index 000000000..09a923ea2 --- /dev/null +++ b/assets/themes/conceptdark.css @@ -0,0 +1,37 @@ +:root { + /* Light Colors */ + + /* Concept-Dark is a dark-mode only theme. Light theme mirrors dark. */ + --background: #373b3e; /* Background color */ + --accent: #ff9d47; /* Hover color */ + --cards: #323538; /* Cards color */ + + /* Fonts Color */ + --fg: #b5bbc9; /* Foreground color */ + --sfg: #484c52; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(55 59, 62, 0.85), + rgba(55 59, 62, 0.85) + ); /* Filter color */ + } + + .darktheme { + /* Dark Colors */ + + --background: #373b3e; /* Background color */ + --accent: #ff9d47; /* Hover color */ + --cards: #323538; /* Cards color */ + + /* Fonts Color */ + --fg: #b5bbc9; /* Foreground color */ + --sfg: #484c52; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(55 59, 62, 0.85), + rgba(55 59, 62, 0.85) + ); /* Filter color */ + } + \ No newline at end of file diff --git a/assets/themes/monokai.css b/assets/themes/monokai.css new file mode 100644 index 000000000..040bd0f25 --- /dev/null +++ b/assets/themes/monokai.css @@ -0,0 +1,36 @@ +:root { + /* Light Colors */ + + --background: #f8f8f2; /* Background color */ + --accent: #818179; /* Hover color */ + --cards: #cfcfc2; /* Cards color */ + + /* Fonts Color */ + --fg: #292A2B; /* Foreground color */ + --sfg: #e6db74; /* Sceondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(248, 248, 242, 0.7), + rgba(248, 248, 242, 0.7) + ); /* Filter color */ + } + + .darktheme { + /* Dark Colors */ + + --background: #272822; /* Background color */ + --accent: #cfcfc2; /* Hover color */ + --cards: #3e3d32; /* Cards color */ + + /* Fonts Color */ + --fg: #cfcfc2; /* Foreground color */ + --sfg: #fd971f; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(39 40, 34, 0.85), + rgba(39 40, 34, 0.85) + ); /* Filter color */ + } + \ No newline at end of file diff --git a/assets/themes/nord.css b/assets/themes/nord.css new file mode 100644 index 000000000..6107fb187 --- /dev/null +++ b/assets/themes/nord.css @@ -0,0 +1,35 @@ +:root { + /* Light Colors */ + + --background: #eceff4; /* Background color */ + --accent: #d8dee9; /* Hover color */ + --cards: #e5e9f0; /* Cards color */ + + /* Fonts Color */ + --fg: #2e3440; /* Foreground color */ + --sfg: #3b4252; /* Sceondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(216, 222, 233, 0.7), + /* #D8DEE9 */ rgba(216, 222, 233, 0.7) + ); /* Filter color */ +} + +.darktheme { + /* Dark Colors */ + + --background: #2e3440; /* Background color */ + --accent: #434c5e; /* Hover color */ + --cards: #3b4252; /* Cards color */ + + /* Fonts Color */ + --fg: #eceff4; /* Foreground color */ + --sfg: #e5e9f0; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(26, 52, 64, 0.85), + /* #2E3440 */ rgba(26, 52, 64, 0.85) + ); /* Filter color */ +} diff --git a/assets/themes/sakura.css b/assets/themes/sakura.css new file mode 100644 index 000000000..386196dfe --- /dev/null +++ b/assets/themes/sakura.css @@ -0,0 +1,36 @@ +:root { + /* Light Colors */ + + --background: #fffaf5; /* Background color */ + --accent: #ffefde; /* Hover color */ + --cards: #ebe6e1; /* Cards color */ + + /* Fonts Color */ + --fg: #4b4646; /* Foreground color */ + --sfg: #4b4646; /* Sceondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(255, 250, 245, 0.7), + rgba(255, 250, 245, 0.7) + ); /* Filter color */ + } + + .darktheme { + /* Dark Colors */ + + --background: #000f14; /* Background color */ + --accent: #475356; /* Hover color */ + --cards: #0a191e; /* Cards color */ + + /* Fonts Color */ + --fg: #a0a0b4; /* Foreground color */ + --sfg: #a0a0b4; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(0, 15, 20, 0.85), + rgba(0, 15, 20, 0.85) + ); /* Filter color */ + } + \ No newline at end of file diff --git a/assets/themes/solarized.css b/assets/themes/solarized.css new file mode 100644 index 000000000..42220ee1a --- /dev/null +++ b/assets/themes/solarized.css @@ -0,0 +1,36 @@ +:root { + /* Light Colors */ + + --background: #fdf6e3; /* Background color */ + --accent: #657b83; /* Hover color */ + --cards: #eee8d5; /* Cards color */ + + /* Fonts Color */ + --fg: #657b83; /* Foreground color */ + --sfg: #002b36; /* Sceondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(245, 246, 247, 0.7), + rgba(245, 246, 247, 0.7) + ); /* Filter color */ + } + + .darktheme { + /* Dark Colors */ + + --background: #002b36; /* Background color */ + --accent: #657b83; /* Hover color */ + --cards: #073642; /* Cards color */ + + /* Fonts Color */ + --fg: #839496; /* Foreground color */ + --sfg: #fdf6e3; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(56 60, 74, 0.85), + rgba(56 60, 74, 0.85) + ); /* Filter color */ + } + \ No newline at end of file diff --git a/assets/themes/summer.css b/assets/themes/summer.css new file mode 100644 index 000000000..5b90983c0 --- /dev/null +++ b/assets/themes/summer.css @@ -0,0 +1,36 @@ +:root { + /* Light Colors */ + + --background: #D8E2E1; /* Background color */ + --accent: #E7CA62; /* Hover color */ + --cards: #ECBD10; /* Cards color */ + + /* Fonts Color */ + --fg: #292A2B; /* Foreground color */ + --sfg: #1D1D1D; /* Sceondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(216, 226, 225, 0.7), + rgba(216, 226, 225, 0.7) + ); /* Filter color */ + } + + .darktheme { + /* Dark Colors */ + + --background: #292A2B; /* Background color */ + --accent: #64A8D8; /* Hover color */ + --cards: #32B5C7; /* Cards color */ + + /* Fonts Color */ + --fg: #D8E2E1; /* Foreground color */ + --sfg: #fdf6e3; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(41 42, 43, 0.85), + rgba(41 42, 43, 0.85) + ); /* Filter color */ + } + \ No newline at end of file diff --git a/config.js b/config.js index d47d0e0ab..645783458 100644 --- a/config.js +++ b/config.js @@ -10,11 +10,17 @@ const CONFIG = { // ├┴┐├─┤└─┐││ └─┐ // └─┘┴ ┴└─┘┴└─┘└─┘ + // General name: 'John', - imageBackground: false, openInNewTab: true, twelveHourFormat: false, + title: 'Bento', + + // Theme + theme: 'bento', + imageBackground: false, + imageUrl: './assets/background.jpg', // Set custom background image URL. If the page is served insecurely, you may have issues loading images from pages over https. // Greetings greetingMorning: 'Good morning!', @@ -46,9 +52,12 @@ const CONFIG = { hourDarkThemeActive: '18:30', hourDarkThemeInactive: '07:00', - // ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐ - // ├┴┐│ │ │ │ │ ││││└─┐ - // └─┘└─┘ ┴ ┴ └─┘┘└┘└─┘ + // Autochange automatically based on location (sunrise/sunset). Openweathermap API key required. + changeThemeByLocation: false, + + // ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐ + // ├┴┐│ │ │ │ │ ││││└─┐ + // └─┘└─┘ ┴ ┴ └─┘┘└┘└─┘ firstButtonsContainer: [ { diff --git a/index.html b/index.html index 2f9234e2d..f8ab2aa6f 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,11 @@ - - - Bento - - - - + + + + + + - - - - - - - - - - + + + + + + + + + + +