This repository has been archived by the owner on Jul 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathspigot-landing.html
324 lines (307 loc) · 20.5 KB
/
spigot-landing.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
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OpenAudioMc</title>
<link rel="icon" type="image/png" href="assets/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css"
integrity="sha512-+WF6UMXHki/uCy0vATJzyA9EmAcohIQuwpNz0qEO+5UeE5ibPejMRdFuARSrl1trs3skqie0rY/gNiolfaef5w=="
crossorigin="anonymous"/>
<link rel="stylesheet" href="assets/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#157878">
<meta property="og:title" content="OpenAudioMc">
<meta property="og:image"
content="assets/logo.png">
<meta property="og:url" content="https://openaudiomc.net/">
<meta property="og:site_name" content="OpenAudioMc">
<meta property="og:description" content="OpenAudioMc is the all in one minecraft audio and voicechat solution">
<meta name="twitter:title" content="OpenAudioMc - The most advanced Minecraft audio and voice system">
<meta name="twitter:image"
content="assets/logo.png">
<meta name="twitter:url" content="https://twitter.com/Mindgamesnl">
<meta name="twitter:card" content="summary">
<title>OpenAudioMc - Audio for Minecraft</title>
<title>OpenAudioMc: A real time web client for minecraft to play and manage sounds, game notifications and much
more. This project includes the plugin (bungee + spigot + velocity), common java library, web client and build
scripts.</title>
<meta name="description"
content="A real time web client for minecraft to play and manage sounds, game notifications and much more. This project includes the plugin (bungee + spigot + velocity), common java library, web client and build scripts. - OpenAudioMc: A real time web client for minecraft to play and manage sounds, game notifications and much more. This project includes the plugin (bungee + spigot + velocity), common java library, web client and build scripts.">
<link rel="fluid-icon" href="assets/logo.png" title="OpenAudioMc">
<meta name="twitter:image:src" content="assets/banner.png"/>
<meta name="twitter:site" content="@openaudiomc"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title"
content="OpenAudioMc: A real time web client for minecraft to play and manage sounds, game notifications and much more. This project includes the plugin (bungee + spigot + velocity), common java library, web client and build scripts."/>
<meta name="twitter:description"
content="A real time web client for minecraft to play and manage sounds, game notifications and much more. This project includes the plugin (bungee + spigot + velocity), common java library, web client and ..."/>
<meta property="og:image" content="assets/banner.png"/>
<meta property="og:image:alt"
content="A real time web client for minecraft to play and manage sounds, game notifications and much more. This project includes the plugin (bungee + spigot + velocity), common java library, web client and ..."/>
<meta property="og:site_name" content="OpenAudioMc"/>
<meta property="og:type" content="object"/>
<meta property="og:title"
content="OpenAudioMc: A real time web client for minecraft to play and manage sounds, game notifications and much more. This project includes the plugin (bungee + spigot + velocity), common java library, web client and build scripts."/>
<meta property="og:url" content="https://openaudiomc.net/"/>
<meta property="og:description"
content="A real time web client for minecraft to play and manage sounds, game notifications and much more. This project includes the plugin (bungee + spigot + velocity), common java library, web client and ..."/>
<body class="bg-gray-900">
<header class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href="index.html"
class="flex order-first lg:order-none lg:w-1/5 title-font font-medium items-center text-white lg:items-center lg:justify-center mb-4 md:mb-0 logo rounded-full">
<img src="assets/logo.png" class="w-10 h-10 text-white rounded-full"/>
<span class="ml-3 mr-3 text-xl xl:block lg:hidden">OpenAudioMc </span>
</a>
</div>
</header>
<div class="relative flex flex-col items-center justify-center bg-cover min-w-screen"
style="background-image:url('assets/matterhorn_winter.png'); height: 650px">
<div class="absolute inset-0 w-full h-full bg-black bg-opacity-75"></div>
<div class="flex max-w-6xl mx-auto">
<div class="container relative flex flex-col px-10 pb-1 pr-12 text-2xl font-hairline text-white">
<h2 class="relative z-20 text-5xl font-extrabold leading-tight text-white">Social multiplayer.. Reinvented
</h2>
<p class="relative z-20 block mt-4 text-xl">
OpenAudioMc is <i>the</i> simple to use Music & VoiceChat solution for minecraft. It's super simple to
use, players simply open their web page without downloading anything, and they're set!
</p>
</div>
</div>
<div class="flex max-w-6xl mx-auto">
<div class="hidden md:block relative overflow-hidden rounded-lg text-center w-full cursor-pointer group w-full h-full pt-10 rounded-2">
<center>
<div class="text-center" style="height: 70%; width: 70%; text-align: center;">
<img src="assets/bg.jpg"
class="object-cover w-full" >
</div>
</center>
</div>
</div>
</div>
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container px-5 py-12 mx-auto">
<div class="text-center mb-10">
<h1 class="sm:text-3xl text-2xl font-medium title-font text-white mb-4">Unique features that your players will love</h1>
<p class="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto text-gray-400 text-opacity-80">
Add features to make your player experience stand out and make player-to-player interactions more alive and involved than ever before
</p>
<div class="flex mt-6 justify-center">
<div class="w-16 h-1 rounded-full bg-indigo-500 inline-flex"></div>
</div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-2">
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-indigo-400 mb-5 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
</div>
<div class="flex-grow">
<h2 class="text-white text-lg title-font font-medium mb-3">Proximity Voice Chat</h2>
<p class="leading-relaxed text-base">
Allow players to talk to one another through their web client, allowing them to hear the location of others with spatial audio making for a one-of-a-kind player experience
</p>
</div>
</div>
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-indigo-400 mb-5 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
</svg>
</div>
<div class="flex-grow">
<h2 class="text-white text-lg title-font font-medium mb-3">Music</h2>
<p class="leading-relaxed text-base">
Add theming and sound effects by placing speakers throughout your world, mixing ambiance music based on the players location and adding voice lines to NPC's.
</p>
</div>
</div>
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-indigo-400 mb-5 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
</div>
<div class="flex-grow">
<h2 class="text-white text-lg title-font font-medium mb-3">Fit your style</h2>
<p class="leading-relaxed text-base">
Customize the UI with your own theme colour, images and messages, link your account to customize default behaviour and manage your installation from anywhere or simply use it as is
</p>
</div>
</div>
</div>
</div>
</section>
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap">
<div class="text-center mb-10">
<h1 class="sm:text-3xl text-2xl font-medium title-font text-white mb-4">How to use OpenAudioMc</h1>
<p class="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto text-gray-400 text-opacity-80">
Installing and getting started with OpenAudioMc is as easy as it could be, and your players won't have to do a thing
</p>
</div>
<div class="flex flex-wrap w-full">
<div class="lg:w-2/5 md:w-1/2 md:pr-10 md:py-6">
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-800 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">INSTALLATION STEP 1</h2>
<p class="leading-relaxed">Download the plugin from this Spigot page</p>
</div>
</div>
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-800 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">INSTALLATION STEP 2</h2>
<p class="leading-relaxed">Install the plugin just like any other</p>
</div>
</div>
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-800 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">INSTALLATION STEP 3</h2>
<p class="leading-relaxed">Give your server a quick restart</p>
</div>
</div>
<div class="flex relative">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">FINISH</h2>
<p class="leading-relaxed">
Join your server and you'll be asked to accept the Terms Of Service, give it a go, and you're ready to use OpenAudioMc!
</p>
</div>
</div>
</div>
<div class="lg:w-2/5 md:w-1/2 md:pr-10 md:py-6">
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-800 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">PLAYER STEP 1</h2>
<p class="leading-relaxed">
Players join your server like normal
</p>
</div>
</div>
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-800 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">PLAYER STEP 2</h2>
<p class="leading-relaxed">
Players click the link they received in their chat
</p>
</div>
</div>
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-800 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">PLAYER STEP 3</h2>
<p class="leading-relaxed">
They click "Start" after opening the link in their web browser
</p>
</div>
</div>
<div class="flex relative">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-white mb-1 tracking-wider">FINISH</h2>
<p class="leading-relaxed">
They are now ready to use OpenAudioMc's audio and voicechat features! There's a video guide on <a>https://help.openaudiomc.net/how-it-works</a>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="text-gray-400 body-font bg-gray-900">
<div class="container px-5 mx-auto">
<div class="flex flex-wrap w-full mb-5">
<div class="lg:w-1/2 w-full mb-6 lg:mb-0">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">Want to learn more?</h1>
<div class="h-1 w-20 bg-indigo-500 rounded"></div>
</div>
</div>
<div class="flex flex-wrap -m-4">
<div class="xl:w-1/4 md:w-1/2 p-4">
<div class="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
<img class="h-40 rounded w-full object-cover object-center mb-6" src="assets/banner.png" alt="content">
<h3 class="tracking-widest text-indigo-400 text-xs font-medium title-font">READ</h3>
<h2 class="text-lg text-white font-medium title-font mb-4">Documentation</h2>
<p class="leading-relaxed text-base">Visit <a>https://help.openaudiomc.net/</a> for full documentation, guides, and example articles</p>
</div>
</div>
<div class="xl:w-1/4 md:w-1/2 p-4">
<div class="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
<img class="h-40 rounded w-full object-cover object-center mb-6" src="assets/imaginefun.jpg" alt="content">
<h3 class="tracking-widest text-indigo-400 text-xs font-medium title-font">TRY</h3>
<h2 class="text-lg text-white font-medium title-font mb-4">Visit ImagineFun</h2>
<p class="leading-relaxed text-base">Visit <a>play.imaginefun.net</a> to try OpenAudioMc yourself and experience the disney park with real music and audio</p>
</div>
</div>
<div class="xl:w-1/4 md:w-1/2 p-4">
<div class="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
<img class="h-40 rounded w-full object-cover object-center mb-6" src="assets/matt.jpg" alt="content">
<h3 class="tracking-widest text-indigo-400 text-xs font-medium title-font">JOIN</h3>
<h2 class="text-lg text-white font-medium title-font mb-4">Visit Our Discord</h2>
<p class="leading-relaxed text-base">
Join our Discord server at <a>discord.openaudiomc.net</a> to request support, read the latest news or share your feedback
</p>
</div>
</div>
<div class="xl:w-1/4 md:w-1/2 p-4">
<div class="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
<img class="h-40 rounded w-full object-cover object-center mb-6" src="assets/macbook.jpg" alt="content">
<h3 class="tracking-widest text-indigo-400 text-xs font-medium title-font">READ</h3>
<h2 class="text-lg text-white font-medium title-font mb-4">Visit our GitHub or API</h2>
<p class="leading-relaxed text-base">
Check our GitHub or Java-API documentation to discover new ways of user and expanding OpenAudioMc to best fit your needs
</p>
</div>
</div>
</div>
</div>
</section>
<footer class="text-gray-400 bg-gray-900 body-font">
<div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a href="index.html"
class="flex title-font font-medium items-center md:justify-start justify-center text-white">
<img src="assets/logo.png" class="w-10 h-10 text-white bg-indigo-500 rounded-full logo"/>
<span class="ml-3 text-xl">OpenAudioMc</span>
</a>
<p class="text-sm text-gray-400 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">© 2021
OpenAudioMc —
<a href="https://twitter.com/Mindgamesnl" class="text-gray-500 ml-1" target="_blank"
rel="noopener noreferrer">@Mindgamesnl</a>
</p>
</div>
</footer>
</body>
</html>