From 29d8861652f4500744dd8a26d6e7d3381621d749 Mon Sep 17 00:00:00 2001 From: moderndevslulw Date: Sat, 5 Jul 2025 19:36:58 +0500 Subject: feat: features --- public/index.php | 88 +++++++++++++++++++++++++++++- public/static/img/icons/bell.png | Bin 0 -> 852 bytes public/static/img/icons/clock.png | Bin 0 -> 1039 bytes public/static/img/icons/keyboard.png | Bin 0 -> 674 bytes public/static/img/icons/terminal.png | Bin 0 -> 832 bytes public/static/style.css | 102 ++++++++++++++++++++++++++++++++++- 6 files changed, 187 insertions(+), 3 deletions(-) create mode 100644 public/static/img/icons/bell.png create mode 100644 public/static/img/icons/clock.png create mode 100644 public/static/img/icons/keyboard.png create mode 100644 public/static/img/icons/terminal.png diff --git a/public/index.php b/public/index.php index 1e3c04b..149aa57 100644 --- a/public/index.php +++ b/public/index.php @@ -14,7 +14,7 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
- +
@@ -32,6 +32,92 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
+ + +
+
+

Features

+
+
+ +
+
+

Stream notifications

+

A convenient way to keep track of streams on Twitch. Simply use the !event command to + create a notification in chat about an upcoming stream. To always be in the know, sign + up for notifications using the !notify command. Never miss a moment and enjoy your + streams on time!

+
+
+ +
+
+ +
+
+

Emote Updates

+

+ Instant updates on new changes to the emote set. The bot automatically notifies the chat + about new emotes, deletion of existing emotes, and changes in their names.
+ For now only for 7TV. +

+
+
+ +
+
+ +
+
+

Lua coding

+

+ With !lua and !luaimport you can create your own logic for custom commands! It can be + another utility, a mini-game, or even a bot within a bot - only your imagination* limits + you. The coding awaits you today! +

+
+
+ +
+
+
+
+ + +
+
+
+ +
+

@everyone in your chat

+

With the "!massping" command, moderators can quickly notify all participants by mentioning them + with an important message.

+
+
+
+ +
+

No Ctrl+Enter anymore

+

In addition, the "!spam" command provides the ability to repeat a message the desired number of + times, which is useful for repetitive reminders or clarifications.

+
+
+
+ +
+

Timers

+

With the !timer command, you can set messages to be sent each interval. moderators can quickly + notify all participants by mentioning them with an important message.

+
+
+
+ +
+

Create your own commands

+

The !cmd command allow the creation of personalized commands, which adds interactivity and + flexibility to communication by allowing channel owners to create their own commands.

+
+
diff --git a/public/static/img/icons/bell.png b/public/static/img/icons/bell.png new file mode 100644 index 0000000..e4d6487 Binary files /dev/null and b/public/static/img/icons/bell.png differ diff --git a/public/static/img/icons/clock.png b/public/static/img/icons/clock.png new file mode 100644 index 0000000..87143fe Binary files /dev/null and b/public/static/img/icons/clock.png differ diff --git a/public/static/img/icons/keyboard.png b/public/static/img/icons/keyboard.png new file mode 100644 index 0000000..1ff7324 Binary files /dev/null and b/public/static/img/icons/keyboard.png differ diff --git a/public/static/img/icons/terminal.png b/public/static/img/icons/terminal.png new file mode 100644 index 0000000..c1a00d7 Binary files /dev/null and b/public/static/img/icons/terminal.png differ diff --git a/public/static/style.css b/public/static/style.css index fa37b36..a39a3bd 100644 --- a/public/static/style.css +++ b/public/static/style.css @@ -2,6 +2,9 @@ --primary-color: #6ee7b7; --secondary-color: #59c59a; + --box-background: #9bbdad; + --box-border: #92b3a3; + --promo-button-background: linear-gradient(0deg, #ff9028 0% 50%, #ffb224 50% 100%); --promo-button-background-hover: #ff9028; --promo-button-foreground: #662000; @@ -14,7 +17,7 @@ } body { - background: #ccebdd; + background: #e4f5ed; display: flex; flex-direction: column; align-items: center; @@ -22,6 +25,9 @@ body { width: 100%; min-height: 100vh; + + font-family: Arial, Helvetica, sans-serif; + font-size: 18px; } main { @@ -46,12 +52,14 @@ content { } footer { - background: #9bbdad; + background: var(--box-background); + border-top: 1px solid var(--box-border); width: 100%; display: flex; justify-content: center; align-items: center; padding: 8px 0; + margin-top: 64px; } footer.big { @@ -99,6 +107,87 @@ button:hover { background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--primary-color) 100%); } +/** +--- BOX +*/ + +.features-box>.tab { + background: var(--box-background); + border: 1px solid var(--box-border); + padding: 4px 0; + margin-bottom: 64px; + border-radius: 4px; +} + +.features-box:has(.tab)>.content { + display: flex; + flex-direction: column; + gap: 128px; + line-height: 1.5em; +} + +.features-box:has(.tab)>.content>section { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 64px; +} + +.features-box:has(.tab)>.content>section:nth-child(even) { + flex-direction: row-reverse; +} + +.features-box:has(.tab)>.content>section>.description { + display: flex; + flex-direction: column; + gap: 16px; +} + +.features-box:has(.tab)>.content>section:nth-child(even)>.description>* { + text-align: right; +} + +.features-box:has(.tab)>.content>section>.icon { + display: flex; + justify-content: center; + align-items: center; +} + +.features-box:has(.tab)>.content>section>.icon>img { + width: 72px; + height: 72px; +} + +.small-features>section { + display: flex; + flex-direction: column; + gap: 16px; + line-height: 1.5em; +} + +.small-features>section>.icon>img { + background: #fff; + padding: 8px; + border-radius: 4px; + border: 1px solid var(--box-border); +} + +.small-features>section:nth-child(1)>.icon>img { + background: linear-gradient(to left, #059669, #065f46); +} + +.small-features>section:nth-child(2)>.icon>img { + background: linear-gradient(to left, #d97706, #92400e); +} + +.small-features>section:nth-child(3)>.icon>img { + background: linear-gradient(to left, #2563eb, #1e40af); +} + +.small-features>section:nth-child(4)>.icon>img { + background: linear-gradient(to left, #dc2626, #991b1b); +} + /** --- SHORTCUTS */ @@ -121,6 +210,11 @@ button:hover { flex-direction: row; } +.grid-2 { + display: grid; + grid-template-columns: auto auto; +} + .align-center { align-items: center; } @@ -141,6 +235,10 @@ button:hover { text-align: right; } +.gap-64 { + gap: 64px; +} + .gap-32 { gap: 32px; } -- cgit v1.2.3