Skip to content

Commit 25c4c59

Browse files
TapawingoTapawingo
committed
Add initial web
0 parents  commit 25c4c59

4 files changed

Lines changed: 386 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE>
2+
<html lang="html">
3+
<head>
4+
<title>Radio Net</title>
5+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Special+Elite&display=swap">
6+
<link rel="stylesheet" href="styles.css">
7+
</head>
8+
<body>
9+
<div class="video-modal">
10+
<div class="topbar">
11+
<iconify-icon icon="line-md:youtube"></iconify-icon>
12+
<span>Demonstration Video</span>
13+
<button id="modal-close" type="button" class="close-button">
14+
<iconify-icon icon="line-md:close"></iconify-icon>
15+
</button>
16+
</div>
17+
<iframe width="560" height="315" src="https://www.youtube.com/embed/K2n_j2r6weM?si=NyVztHrqmLyZvP1X" title="YouTube video player"
18+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
19+
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
20+
</iframe>
21+
</div>
22+
<div class="content">
23+
<span>
24+
<h1>Radio Net</h1>
25+
</span>
26+
<div class="content-body">
27+
<div>
28+
<h2><iconify-icon icon="line-md:question-circle"></iconify-icon>What is it</h2>
29+
<p>
30+
A Discord bot that turns a set of voice channels, in the same server or across different
31+
servers, into a half-duplex "radio net". Coordinate between groups of people in different locations, or just have fun with friends.
32+
The bot can be added to any server, and the voice channels can be in any server, as long as the bot has permission to join them.
33+
</p>
34+
</div>
35+
36+
<div>
37+
<h2>
38+
<iconify-icon icon="line-md:discord"></iconify-icon>
39+
<span>How it works</span>
40+
<button type="button" id="modal-open" class="demo-video-button">
41+
<iconify-icon icon="line-md:youtube"></iconify-icon>
42+
Video
43+
</button>
44+
</h2>
45+
<p>
46+
The user starts a radio net by running the <span class="highlight">/net host</span> command while in a voice channel. This creates a new net and a
47+
unique join code. The other users can then join the net by running <span class="highlight">/net join &lt;join code&gt;</span> command.
48+
Do this for each channel that should be in the net. Running these commands will make the bots join the voice channels and start
49+
listening for a priority speaker. When it detects a priority speaker in one channel, it transmits that audio to all other channels
50+
on the same net.
51+
</p>
52+
</div>
53+
54+
<div>
55+
<h2><iconify-icon icon="line-md:cog"></iconify-icon>Setting up</h2>
56+
<ul>
57+
<li>Invite the <span class="highlight">Coordinator Bot</span> and an optional amount of relay bots to your server.</li>
58+
<li>Assign a role with <span class="highlight">Priority Speaker</span> permissions to users.</li>
59+
<li>Set up a Discord hotkey for <span class="highlight">Voice Activity Priority</span> to act as the radio PTT.</li>
60+
</ul>
61+
</div>
62+
63+
<div>
64+
<h2><iconify-icon inline icon="line-md:document-code"></iconify-icon>Commands</h2>
65+
<ul>
66+
<li><span class="highlight">/net host</span> - Hosts a new radio net and creates a unique join code.</li>
67+
<li><span class="highlight">/net join &lt;join code&gt;</span> - Joins a existing radio net using the unique code created with <span class="highlight">/net host</span></li>
68+
<li><span class="highlight">/net leave</span> - Leave the radio net. Can not be used by the hoster.</li>
69+
<li><span class="highlight">/net end</span> - Ends the radio network and kicks all other participants. Must be used by the hoster.</li>
70+
<li><span class="highlight">/net status</span> - List linked channels and who is currently transmitting.</li>
71+
<li><span class="highlight">/net preferences</span> - Set user preferences like microphone gain.</li>
72+
</ul>
73+
</div>
74+
</div>
75+
</div>
76+
<div class="invites">
77+
<h1><iconify-icon inline icon="line-md:discord"></iconify-icon>Bot invites</h1>
78+
79+
<a class="invite-card" target="_blank" href="https://discord.com/oauth2/authorize?client_id=1533606850900000869&permissions=3146752&integration_type=0&scope=bot+applications.commands">
80+
<img src="radio_net_pfp.png" alt="Radio Net">
81+
<div>
82+
<h3>Coordinator <span class="bot-hint required">REQUIRED</span></h3>
83+
<span>Runs /net commands and doubles as a relay</span>
84+
</div>
85+
<iconify-icon icon="line-md:external-link"></iconify-icon>
86+
</a>
87+
<a class="invite-card" target="_blank" href="https://discord.com/oauth2/authorize?client_id=1533607051224158349&permissions=3146752&integration_type=0&scope=bot+applications.commands">
88+
<img src="radio_relay_pfp.png" alt="Radio Net">
89+
<div>
90+
<h3>Relay Alpha <span class="bot-hint optional">OPTIONAL</span></h3>
91+
<span>Optional. Adds extra simultaneous net capacity</span>
92+
</div>
93+
<iconify-icon icon="line-md:external-link"></iconify-icon>
94+
</a>
95+
<a class="invite-card" target="_blank" href="https://discord.com/oauth2/authorize?client_id=1533607123018055841&permissions=3146752&integration_type=0&scope=bot+applications.commands">
96+
<img src="radio_relay_pfp.png" alt="Radio Net">
97+
<div>
98+
<h3>Relay Bravo <span class="bot-hint optional">OPTIONAL</span></h3>
99+
<span>Optional. Adds extra simultaneous net capacity</span>
100+
</div>
101+
<iconify-icon icon="line-md:external-link"></iconify-icon>
102+
</a>
103+
<a class="invite-card" target="_blank" href="https://discord.com/oauth2/authorize?client_id=1533607192299831376&permissions=3146752&integration_type=0&scope=bot+applications.commands">
104+
<img src="radio_relay_pfp.png" alt="Radio Net">
105+
<div>
106+
<h3>Relay Charlie <span class="bot-hint optional">OPTIONAL</span></h3>
107+
<span>Optional. Adds extra simultaneous net capacity</span>
108+
</div>
109+
<iconify-icon icon="line-md:external-link"></iconify-icon>
110+
</a>
111+
<a class="invite-card" target="_blank" href="https://discord.com/oauth2/authorize?client_id=1533609282736492574&permissions=3146752&integration_type=0&scope=bot+applications.commands">
112+
<img src="radio_relay_pfp.png" alt="Radio Net">
113+
<div>
114+
<h3>Relay Delta <span class="bot-hint optional">OPTIONAL</span></h3>
115+
<span>Optional. Adds extra simultaneous net capacity</span>
116+
</div>
117+
<iconify-icon icon="line-md:external-link"></iconify-icon>
118+
</a>
119+
<a class="invite-card" target="_blank" href="https://discord.com/oauth2/authorize?client_id=1533917410728611929&permissions=3146752&integration_type=0&scope=bot+applications.commands">
120+
<img src="radio_relay_pfp.png" alt="Radio Net">
121+
<div>
122+
<h3>Relay Echo <span class="bot-hint optional">OPTIONAL</span></h3>
123+
<span>Optional. Adds extra simultaneous net capacity</span>
124+
</div>
125+
<iconify-icon icon="line-md:external-link"></iconify-icon>
126+
</a>
127+
</div>
128+
</body>
129+
130+
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
131+
<script>
132+
const modal = document.querySelector('.video-modal');
133+
const openModalButton = document.getElementById('modal-open');
134+
const closeModalButton = document.getElementById('modal-close');
135+
136+
openModalButton.addEventListener('click', () => {
137+
modal.classList.add('active');
138+
});
139+
140+
closeModalButton.addEventListener('click', () => {
141+
modal.classList.remove('active');
142+
});
143+
144+
window.addEventListener('click', (event) => {
145+
if (event.target === modal) {
146+
modal.classList.remove('active');
147+
}
148+
});
149+
</script>
150+
</html>

‎radio_net_pfp.png‎

2.87 MB
Loading

‎radio_relay_pfp.png‎

3.07 MB
Loading

‎styles.css‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
html, body {
2+
margin: 0;
3+
padding: 0;
4+
height: 100%;
5+
}
6+
7+
body {
8+
display: flex;
9+
flex-direction: row;
10+
background-color: #1a1510;
11+
color: #7a6b5a;
12+
font-family: 'IM Fell English', sans-serif, serif;
13+
overflow: hidden;
14+
}
15+
16+
h1, h2, h3 {
17+
color: #d4c4a8;
18+
text-shadow: 2px 2px 4px #00000080;
19+
}
20+
21+
h1 {
22+
margin-top: 0px;
23+
margin-bottom: 3px;
24+
color: #d4c4a8;
25+
}
26+
27+
.highlight {
28+
color: #a99b83;
29+
background-color: #3a2f1e;
30+
padding: 1px 2px;
31+
border-radius: 3px;
32+
}
33+
34+
ul {
35+
margin: 10px 0;
36+
padding-left: 20px;
37+
}
38+
39+
ul li {
40+
margin-bottom: 5px;
41+
}
42+
43+
.subtitle {
44+
font-size: 18px;
45+
color: #7a6b5a;
46+
}
47+
48+
.demo-video-button {
49+
display: flex;
50+
flex-direction: row;
51+
align-items: center;
52+
font-size: 16px;
53+
gap: 5px;
54+
border: 1px solid #5c4a3d;
55+
border-radius: 3px;
56+
cursor: pointer;
57+
background-color: transparent;
58+
font-family: 'IM Fell English', sans-serif, serif;
59+
color: #d4c4a8;
60+
margin-left: auto;
61+
}
62+
63+
.video-modal {
64+
opacity: 0;
65+
transform: scale(0) translate(-50%, -50%);
66+
position: absolute;
67+
width: 70%;
68+
height: 90%;
69+
top: 50%;
70+
left: 50%;
71+
z-index: 10;
72+
background-color: #2d2416;
73+
border: 1px solid #5c4a3d;
74+
border-radius: 5px;
75+
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
76+
}
77+
78+
.video-modal.active {
79+
opacity: 1;
80+
transform: scale(1) translate(-50%, -50%);
81+
}
82+
83+
.video-modal .topbar {
84+
display: flex;
85+
flex-direction: row;
86+
align-items: center;
87+
justify-content: space-between;
88+
padding: 10px;
89+
background-color: #1a151081;
90+
border-top-left-radius: 5px;
91+
border-top-right-radius: 5px;
92+
color: #d4c4a8;
93+
text-shadow: 2px 2px 4px #00000080;
94+
}
95+
96+
.video-modal .topbar button {
97+
background-color: transparent;
98+
border: none;
99+
color: #d4c4a8;
100+
font-size: 20px;
101+
cursor: pointer;
102+
transition: all 0.1s ease-in-out;
103+
}
104+
105+
.video-modal .topbar button:hover {
106+
transform: scale(1.2);
107+
color: #88353588;
108+
}
109+
110+
.video-modal iframe {
111+
width: 100%;
112+
height: calc(100% - 50px);
113+
border: none;
114+
border-bottom-left-radius: 5px;
115+
border-bottom-right-radius: 5px;
116+
}
117+
118+
.demo-video-button:hover {
119+
transform: scale(1.05);
120+
}
121+
122+
.content {
123+
flex: 1;
124+
padding: 15px;
125+
height: 100%;
126+
overflow: hidden;
127+
box-sizing: border-box;
128+
}
129+
130+
.content-body {
131+
flex: 1;
132+
display: flex;
133+
flex-direction: column;
134+
height: 100%;
135+
overflow: hidden;
136+
gap: 15px;
137+
}
138+
139+
.content-body div {
140+
background-color: #2d2416;
141+
border: 1px solid #5c4a3d;
142+
border-radius: 5px;
143+
box-sizing: border-box;
144+
}
145+
146+
.content-body div h2 {
147+
box-sizing: border-box;
148+
margin: 0;
149+
padding: 10px;
150+
font-size: 16px;
151+
width: 100%;
152+
background-color: #1a151081;
153+
border-top-left-radius: 5px;
154+
border-top-right-radius: 5px;
155+
display: flex;
156+
flex-direction: row;
157+
align-items: center;
158+
gap: 5px;
159+
}
160+
161+
iconify-icon {
162+
margin-bottom: 2px;
163+
}
164+
165+
.content div p {
166+
box-sizing: border-box;
167+
margin: 0;
168+
padding: 10px;
169+
}
170+
171+
.invites {
172+
width: 420px;
173+
padding: 20px;
174+
background-color: #2d2416;
175+
border-left: 1px solid #5c4a3d;
176+
height: 100%;
177+
box-sizing: border-box;
178+
}
179+
180+
.invites h1 {
181+
display: flex;
182+
flex-direction: row;
183+
align-items: center;
184+
gap: 5px;
185+
}
186+
187+
.invite-card {
188+
padding: 10px;
189+
margin-bottom: 10px;
190+
display: flex;
191+
align-items: center;
192+
gap: 10px;
193+
text-decoration: none;
194+
color: #7a6b5a;
195+
border: 1px solid #5c4a3d;
196+
border-radius: 3px;
197+
box-shadow: 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 4px 6px #0006;
198+
}
199+
200+
.invite-card > img {
201+
width: 42px;
202+
height: auto;
203+
border-radius: 50%;
204+
border: 1px solid #5c4a3d
205+
}
206+
207+
.invite-card > div {
208+
display: flex;
209+
flex-direction: column;
210+
}
211+
212+
.invite-card h3 {
213+
margin: 0;
214+
font-size: 16px;
215+
}
216+
217+
.invite-card .bot-hint {
218+
font-size: 10px;
219+
font-family: sans-serif, serif;
220+
padding: 2px;
221+
border-radius: 3px;
222+
margin-left: 5px;
223+
vertical-align: 1px;
224+
}
225+
226+
.invite-card .bot-hint.required {
227+
background-color: #88353588;
228+
}
229+
230+
.invite-card .bot-hint.optional {
231+
background-color: #357a8888;
232+
}
233+
234+
.invite-card:hover {
235+
transform: scale(1.02);
236+
}

0 commit comments

Comments
 (0)