-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
285 lines (269 loc) · 12.4 KB
/
index.html
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kolumbao</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/text-styles.css">
<link rel="stylesheet" href="css/padding.css">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/started.css">
<link rel="stylesheet" href="css/lead.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/features.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Harmattan&family=Inter:wght@400;500;600;700;900&display=swap"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom cont cont--nav">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="d-none d-sm-block" src="/img/logo/blackname.svg" alt="" height="24">
<img class="d-block d-sm-none" src="/img/logo/icon-thin.svg" alt="" width="24">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation" id="toggle">
<i class="ri-menu-line"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 w-100 d-lg-flex justify-content-end">
<li class="nav-item">
<a href="#features" class="nav-link">Features</a>
</li>
<li class="nav-item">
<a href="#started" class="nav-link">Getting started</a>
</li>
<li class="nav-item">
<a href="#top" class="nav-link">Top channels</a>
</li>
<!-- <li class="nav-item">
<a href="#stats" class="nav-link">Statistics</a>
</li> -->
</ul>
</div>
</div>
</nav>
<div class="row w-100 cont m-auto" id="lead">
<div class="col-lg-7 col-12 d-flex flex-column m-auto">
<h1 id="lead-title">Welcome to Kolumbao!
<!-- <span id="peregrine-banner">Peregrine Edition</span>-->
</h1>
<p id="lead-text">
Get started with Kolumbao today, a bot that connects Discord
servers with customizable shared channels.
</p>
<p>Over <strong><span id="messages-count">0</span></strong> messages received and <strong><span id="sentmessages-count">0</span></strong> delivered.</p>
<div>
<a name="getting-started" id="getting-started" class="btn" href="#started" role="button">
Getting started
</a>
<a name="more-info" id="more-info" class="btn btn-outline-secondary" href="#features" role="button">
More info
</a>
<a name="invite-button" id="invite-button" class="btn btn-secondary" href="#" role="button" target="_blank">
<span id="invite-button-text">Loading invite</span> <i class="ri-discord-fill"></i>
</a>
</div>
</div>
<div class="col-lg-5 col-12 d-flex" id="lead-media">
<!-- <iframe src="https://discord.com/widget?id=457205628754984960&theme=dark" width="300px" height="300px" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> -->
<img src="/marginalia-765.png" alt="" width="300px">
</div>
</div>
<div class="w-100 cont" id="features">
<h2>Why Kolumbao is great</h2>
<p class="description">
Kolumbao is in actively developed bot with many features, ranging
from auto-moderation to customizable channels. Create a channel
and add as many servers as you want to it, lock it with a password,
give it a nice description or even write some rules! It's up to
you.
</p>
<div class="row">
<div class="feature col-12 col-md-6 col-lg-4">
<div class="icon icon--accent-0">
<i class="ri-community-fill"></i>
</div>
<h4 class="title">
Community-led content
</h4>
<p class="content">
All of our channels are community suggested or created, and
you can create your own!
</p>
</div>
<div class="feature col-12 col-md-6 col-lg-4">
<div class="icon icon--accent-1">
<i class="ri-reply-fill"></i>
</div>
<h4 class="title">
Edits and replies
</h4>
<p class="content">
Edits and replies are fully integrated, meaning any edit
you make or any message you reply to is shown across all
connected servers.
</p>
</div>
<div class="feature col-12 col-md-6 col-lg-4">
<div class="icon icon--accent-2">
<i class="ri-customer-service-2-fill"></i>
</div>
<h4 class="title">
Reactive staff
</h4>
<p class="content">
Our staff are active and on around the clock. With both
English and French speakers available, we can ensure all
content respect our rules and Discord™'s rules.
</p>
</div>
<div class="feature col-12 col-md-6 col-lg-4">
<div class="icon icon--accent-1">
<i class="ri-robot-fill"></i>
</div>
<h4 class="title">
Automated moderation
</h4>
<p class="content">
We have a range of protections to prevent users from
spamming or raiding the Kolumbao network, and filters to
stop any unwarranted content.
</p>
</div>
<div class="feature col-12 col-md-6 col-lg-4">
<div class="icon icon--accent-2">
<i class="ri-markup-line"></i>
</div>
<h4 class="title">
Native experience
</h4>
<p class="content">
Unlike other interserver platforms, Kolumbao makes messages
look clean and natural, no clunky embeds or bot messages.
</p>
</div>
<div class="feature col-12 col-md-6 col-lg-4">
<div class="icon icon--accent-0">
<i class="ri-compasses-2-line"></i>
</div>
<h4 class="title">
Easy to setup
</h4>
<p class="content">
We keep it simple. Creating your own shared channels is
easy, and installing new shared channels is even easier!
</p>
</div>
</div>
</div>
<div class="w-100 cont" id="started">
<div class="row">
<div class="col-12 col-md-6">
<h2>Getting started</h2>
<p>Getting started is easy! Just follow these three easy steps:</p>
<ol>
<li>
Invite the bot
<a
href="https://discord.com/oauth2/authorize?client_id=705422266649018398&permissions=536881200&scope=bot">with
this link.
</a>
</li>
<li>
We recommend you install the flagship channel, <strong>kb-general</strong>.
Do so with <em>kb!join kb-general</em>.
</li>
<li>
Start talking! Your messages will begin to show up on other servers, try say
hello!
</li>
</ol>
</div>
<div class="col-12 col-md-6 d-none d-md-flex justify-content-end">
<img src="/img/logo/icon.svg" alt="" height="100%">
</div>
</div>
</div>
<div class="w-100 cont" id="top">
<h2 class="top-title">Top shared channels</h2>
<p class="top-description">
These are the most popular channels (by message count) across our bot.
</p>
<div class="row pb-4" id="top-channels">
<p>Loading...</p>
</div>
<h3 class="top-title">Hottest channels <i class="ri-fire-fill"></i></h3>
<p class="top-description">
These channels have the most new messages in the last week.
</p>
<div class="row" id="hot-channels">
<p>Loading...</p>
</div>
<small>
*Do not try to refresh to see updates. These are only updated every
60 seconds and you may be ratelimited if you spam.
</small>
</div>
<!-- <div class="w-100 cont" id="branding">
<h2>Branding</h2>
<p>
Kolumbao is meant to be simple and recognizable, that's why we have
a simple logo and eye-catching color scheme.
</p>
<div class="row">
<div class="col-md-6 col-12 pb-3 pb-md-0">
<h3>Colors</h3>
<p>
Kolumbao has a few variants of its logo and a tricolor color scheme,
as well as 2 gradients used on the logos.
</p>
<img src="/img/logo/coloursguide.svg" alt="" width="100%">
</div>
<div class="col-md-6 col-12 pb-3 pb-md-0">
<h3>Logos</h3>
<p>
There are 3 variants of the "worded" logo, one of which is
at the top of this page.
</p>
<div class="d-flex flex-row justify-content-center">
<div style='width: 50%;'>
<img src="/img/logo/blackname.svg" alt="" width="100%">
<img src="/img/logo/fullblack.svg" alt="" width="100%">
<img src="/img/logo/fullgrey.svg" alt="" width="100%">
</div>
</div>
</div>
<div class="col-md-6 col-12 pb-3 pb-md-0">
<h3>Icon</h3>
<p>
Kolumbao has 2 icons too, each usable in different contexts.
</p>
<div class="d-flex flex-row justify-content-center">
<div class="d-flex justify-content-between" style='width: 50%;'>
<img src="/img/logo/icon.svg" alt="" width="30%">
<img src="/img/logo/invertedicon.svg" alt="" width="60%">
</div>
</div>
</div>
</div>
</div> -->
<div class="w-100 cont cont--small border-top d-flex justify-content-between" id="footer">
<p>Made with <i class="ri-heart-fill" style="color: #E74C3C;"></i></p>
<small>Lead illustration by <a href="undefined">Natasha Remarchuk</a> from <a href="https://icons8.com/">Icons8</a></small>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/top.js"></script>
<script src="js/invite.js"></script>
</body>
</html>