mirror of
https://github.com/telekom-security/tpotce.git
synced 2025-04-20 06:02:24 +00:00
e6f392a098
Finalize qhoneypots config, thanks to @giga-a for native JSON logging! Completely rework T-Pot Landing Page based on Bento (https://github.com/migueravila/Bento). New NGINX image is down by 100MB and only uses 3.3 MB of RAM at runtime. Keep legacy Sensor option (without logstash).
252 lines
No EOL
7.1 KiB
Markdown
252 lines
No EOL
7.1 KiB
Markdown
|
||
|
||
|
||
<p style="margin: -20px 0 30px">
|
||
<a href="https://www.buymeacoffee.com/migueravila" target="_blank" style='margin-right:0px; margin-top:5px'>
|
||
<img align="center" src="https://github.com/migueravila/Bento/blob/master/assets/img/donation.png" alt="donation" height="35px" />
|
||
</a>
|
||
|
||
<a href="https://migueravila.github.io/Bento/" target="_blank" style='margin-right:0px; margin-top:5px'>
|
||
<img align="center" src="https://github.com/migueravila/Bento/blob/master/assets/img/live.png" alt="live-preview" height="35px" />
|
||
</a>
|
||
|
||
<a href="https://github.com/migueravila/Bento/blob/master/README-ES-MX.md" target="_blank" style='margin-right:0px; margin-top:5px'>
|
||
<img align="center" src="https://github.com/migueravila/Bento/blob/master/assets/img/spanish.png" alt="live-preview" height="35px" />
|
||
</a>
|
||
</p>
|
||
|
||
<br />
|
||
|
||
## 👇 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)
|
||
- [🌑 Auto change theme](#-auto-change-theme)
|
||
|
||
|
||
## ✨ 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.
|
||
- **Variables** for custom colors and font sizes in the `style.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
|
||
|
||
#### As Home Page
|
||
|
||
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`
|
||
|
||
#### As New Tab
|
||
|
||
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
|
||
|
||
Almost all customization can be managed in the `config.js` file:
|
||
|
||
### 👋 General: Name, Image Background and Greetings
|
||
|
||
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!',
|
||
|
||
```
|
||
|
||
> You cah change the background by substituting the `background.jpg` file in `assets` folder.
|
||
|
||
|
||
|
||
### 🏷️ Button Links
|
||
|
||
To edit the buttons you just need to change the follow list in the `config.js` file by choosing a link, an icon from [Feather icons](https://feathericons.com/) and a name:
|
||
|
||
```js
|
||
cards: [
|
||
{
|
||
id: '1',
|
||
name: 'Github',
|
||
icon: 'github',
|
||
link: 'https://github.com/',
|
||
},
|
||
{
|
||
id: '2',
|
||
name: 'Mail',
|
||
icon: 'mail',
|
||
link: 'https://mail.protonmail.com/',
|
||
},
|
||
{
|
||
id: '3',
|
||
name: 'Todoist',
|
||
icon: 'trello',
|
||
link: 'https://calendar.google.com/calendar/r',
|
||
},
|
||
{
|
||
id: '4',
|
||
name: 'Calendar',
|
||
icon: 'calendar',
|
||
link: 'https://calendar.google.com/calendar/r',
|
||
},
|
||
{
|
||
id: '5',
|
||
name: 'Reddit',
|
||
icon: 'bookmark',
|
||
link: 'https://reddit.com',
|
||
},
|
||
{
|
||
id: '6',
|
||
name: 'Odysee',
|
||
icon: 'youtube',
|
||
link: 'https://odysee.com/',
|
||
},
|
||
],
|
||
```
|
||
|
||
### 📑 List Links
|
||
|
||
The same happens with the list links, you can change the list icon (also using feather icons) and the links:
|
||
|
||
```js
|
||
//Icons
|
||
firstListIcon: 'music',
|
||
secondListIcon: 'coffee',
|
||
|
||
// Links
|
||
lists: {
|
||
firstList: [
|
||
{
|
||
name: 'Inspirational',
|
||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||
},
|
||
{
|
||
name: 'Classic',
|
||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||
},
|
||
{
|
||
name: 'Oldies',
|
||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||
},
|
||
{
|
||
name: 'Rock',
|
||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||
},
|
||
],
|
||
secondList: [
|
||
{
|
||
name: 'Linkedin',
|
||
link: 'https://linkedin.com/',
|
||
},
|
||
{
|
||
name: 'Figma',
|
||
link: 'https://figma.com/',
|
||
},
|
||
{
|
||
name: 'Dribbble',
|
||
link: 'https://dribbble.com',
|
||
},
|
||
{
|
||
name: 'Telegram',
|
||
link: 'https://webk.telegram.org',
|
||
},
|
||
],
|
||
},
|
||
```
|
||
|
||
### ⛈️ Weather: Api Key, Icons and Unit
|
||
|
||
For setting up the Weather widget you'll need an API Key from: `https://openweathermap.org/`. Once you have your Key you'll need to set your latitude and longitude, you can use: `https://www.latlong.net/` to get them.
|
||
|
||
Finally, choose an Icon set:
|
||
|
||
|
||
|
||
- **Nord** Using the Nord Color Scheme and easy-to-eyes colors
|
||
- **OneDark** (_Default one_) Using the One Dark Pro color scheme
|
||
- **Dark** For White theme only users that want a minimalist look
|
||
- **White** For Dark theme only users that want a minimalist look
|
||
|
||
Finally just add them to the `config.js` file.
|
||
|
||
```js
|
||
// Weather
|
||
weatherKey: '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: #61b0f1; /* Hover color */
|
||
--bg: #f5f5f5; /* Background color */
|
||
--sbg: #e4e6e6; /* Cards color */
|
||
--fg: #3a3a3a; /* Foreground color */
|
||
--sfg: #3a3a3a; /* Sceondary Foreground color */
|
||
}
|
||
|
||
/* Dark theme */
|
||
|
||
.darktheme {
|
||
--accent: #61b0f1; /* Hover color */
|
||
--bg: #19171a; /* Background color */
|
||
--sbg: #201e21; /* Cards color */
|
||
--fg: #d8dee9; /* Foreground color */
|
||
--sfg: #3a3a3a; /* Secondary Foreground color */
|
||
}
|
||
```
|
||
|
||
### 🌑 Auto change theme
|
||
|
||
The theme can be automatically changed by the OS' current theme or personalized hours
|
||
that you can change in the `config.js` file:
|
||
|
||
```js
|
||
// Autochange
|
||
autoChangeTheme: true,
|
||
|
||
// Autochabge by OS
|
||
changeThemeByOS: false,
|
||
|
||
// Autochange by hour options (24hrs format, string must be in: hh:mm)
|
||
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
|
||
```
|
||
|
||
 |