diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.php | 88 | ||||
| -rw-r--r-- | public/static/img/icons/bell.png | bin | 0 -> 852 bytes | |||
| -rw-r--r-- | public/static/img/icons/clock.png | bin | 0 -> 1039 bytes | |||
| -rw-r--r-- | public/static/img/icons/keyboard.png | bin | 0 -> 674 bytes | |||
| -rw-r--r-- | public/static/img/icons/terminal.png | bin | 0 -> 832 bytes | |||
| -rw-r--r-- | public/static/style.css | 102 |
6 files changed, 187 insertions, 3 deletions
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'; <main> <?php html_navigation_bar() ?> - <content> + <content class="gap-64"> <!-- PROMO --> <section class="row justify-between align-center background-colorful border" style="border-radius:4px"> <div class="row justify-center align-center img-gradient"> @@ -32,6 +32,92 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php'; </a> </div> </section> + + <!-- BIG FEATURES --> + <section class="features-box column gap-8"> + <div class="tab row justify-center align-center"> + <h1>Features</h1> + </div> + <div class="content column gap-8"> + <!-- STREAM NOTIFICATIONS --> + <section> + <div class="description"> + <h1>Stream notifications</h1> + <p>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! </p> + </div> + <div class="icon"> + <img src="/static/img/features/live.gif" alt=""> + </div> + </section> + <!-- EMOTE UPDATES --> + <section> + <div class="description"> + <h1>Emote Updates</h1> + <p> + 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.<br> + For now only for 7TV. + </p> + </div> + <div class="icon"> + <img src="/static/img/features/7tv.gif" alt=""> + </div> + </section> + <!-- LUA CODING --> + <section> + <div class="description"> + <h1>Lua coding</h1> + <p> + 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! + </p> + </div> + <div class="icon"> + <img src="/static/img/features/lua.gif" alt=""> + </div> + </section> + </div> + </section> + + <!-- SMALL FEATURES --> + <section class="small-features grid-2 gap-32"> + <section> + <div class="icon"> + <img src="/static/img/icons/bell.png" alt=""> + </div> + <h2>@everyone in your chat</h2> + <p>With the "!massping" command, moderators can quickly notify all participants by mentioning them + with an important message. </p> + </section> + <section> + <div class="icon"> + <img src="/static/img/icons/keyboard.png" alt=""> + </div> + <h2>No Ctrl+Enter anymore</h2> + <p>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.</p> + </section> + <section> + <div class="icon"> + <img src="/static/img/icons/clock.png" alt=""> + </div> + <h2>Timers</h2> + <p>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. </p> + </section> + <section> + <div class="icon"> + <img src="/static/img/icons/terminal.png" alt=""> + </div> + <h2>Create your own commands</h2> + <p>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. </p> + </section> + </section> </content> </main> diff --git a/public/static/img/icons/bell.png b/public/static/img/icons/bell.png Binary files differnew file mode 100644 index 0000000..e4d6487 --- /dev/null +++ b/public/static/img/icons/bell.png diff --git a/public/static/img/icons/clock.png b/public/static/img/icons/clock.png Binary files differnew file mode 100644 index 0000000..87143fe --- /dev/null +++ b/public/static/img/icons/clock.png diff --git a/public/static/img/icons/keyboard.png b/public/static/img/icons/keyboard.png Binary files differnew file mode 100644 index 0000000..1ff7324 --- /dev/null +++ b/public/static/img/icons/keyboard.png diff --git a/public/static/img/icons/terminal.png b/public/static/img/icons/terminal.png Binary files differnew file mode 100644 index 0000000..c1a00d7 --- /dev/null +++ b/public/static/img/icons/terminal.png 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 { @@ -100,6 +108,87 @@ button:hover { } /** +--- 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; } |
