summaryrefslogtreecommitdiff
path: root/public/index.php
blob: 149aa5708a105395909221c9abec99b3aacd1621 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<?php
include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
?>
<html>

<head>
    <title>The Tinybot Project</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="/static/style.css">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
</head>

<body>
    <main>
        <?php html_navigation_bar() ?>

        <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">
                    <img src="/static/img/brand/profile_picture.png" alt=""
                        style="border-top-left-radius:4px;border-bottom-left-radius:4px;">
                </div>
                <div class="column justify-end gap-8 p-16">
                    <h1 class="self-end text-right">Enhance your chat with the bot</h1>
                    <p class="self-end text-right">
                        A multi-utility Twitch chat bot that brings<br>
                        a lot of functionality into your chat.
                    </p>
                    <a href="#" class="self-end">
                        <button>Get the bot</button>
                    </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>&commat;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&plus;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>

    <?php html_big_footer() ?>
</body>

</html>