-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
255 lines (210 loc) · 8.25 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
<!DOCTYPE html>
<html lang="en">
<!-- TODO: tidy all of this up -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UoP Computer Networking Society</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="/img/temp-logo-small.jpg" type="image/x-icon">
<style>
html, body {
margin: 0;
padding: 0;
}
body {
font-family: monospace;
background-color: #000;
color: #fff;
max-width: 50em;
margin: 0 auto;
/* padding: 1em; */
font-family: 'Courier Prime', 'Courier New', 'Courier', monospace;
}
header {
margin-top: 2.5vh;
}
header, main {
white-space: pre-wrap;
background-color: #0003;
padding: 1em;
}
span.prompt, span.lesser {
color: #aaa;
}
a {
font-weight: bold;
text-decoration: underline;
color: inherit;
}
a:hover {
text-decoration: none;
}
aside#background {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
background-image: url("img/lab.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
/* scale hides the blur around the edges */
transform: scale(1.3) rotate(1deg);
filter: blur(6px);
opacity: 0.4;
}
a#load-button {
display: none;
vertical-align: text-top;
text-decoration: none;
font-size: 2em;
color: limegreen;
background-color: #444;
padding: 0 .5em;
border-radius: .1em;
border: 1px solid green;
}
/* show the button on touchscreen devices */
@media (hover: none), (-moz-touch-enabled: 1), (pointer:coarse) {
a#load-button {
display: inline-block;
}
}
</style>
</head>
<body>
<aside id="background"></aside>
<header>
<span class="prompt" aria-hidden="true">NetSoc> show version</span>
<strong>University of Portsmouth Computer Networking Society</strong>
<span aria-hidden="true">sha <span class="js-sha"></span>
updated <span class="js-date"></span> by <span class="js-author"></span>
(c) <span class="js-year">1970</span></span>
</header>
<main>
<span class="prompt" aria-hidden="true">NetSoc> show info</span>
We're a bit work-in-progress at the moment, but you can expect:
- “Drop-In” sessions where you can discuss and get help with networking topics; both for Uni work, and for any non-Uni endeavours
- Networking-related activities, socials, and workshops
- Ad-hoc discussions and insight from people in the industry
- Occasional LAN game sessions, but we must build the LAN first
For those not doing a Networking or Cyber Security course, we can offer lovely tours of the networking lab, allowing you to explore the fun equipment (well, at least we think it's fun). It is some of the coolest stuff in the Uni :)
<span class="prompt" aria-hidden="true">NetSoc> show join</span>
To join, visit the UPSU website at:
<a href="https://upsu.net/groups/8DC3Q/computer-networking-society">upsu.net/groups/8DC3Q/computer-networking-society</a>
<span class="prompt" aria-hidden="true">NetSoc> show social</span>
Chat, and find our latest information and events on Discord:
Address is <a href="https://discord.gg/AyTcSbwQ5E" class="js-discord-invite">discord.gg/AyTcSbwQ5E</a> (b.i.a <span class="js-discord-id">1093673080221605921</span>)
Online count is <span class="js-discord-online">?</span>
Enjoy high-quality photos of tech and networking equipment on Instagram:
Address is <a href="https://instagram.com/uopnetsoc">instagram.com/UoPNetSoc</a>
We also have a LinkedIn, for some reason:
Address is <a href="https://linkedin.com/company/uopnetsoc">linkedin.com/company/UoPNetSoc</a>
<span class="prompt" aria-hidden="true">NetSoc> show projects brief</span>
GitHub Organisation is up
Address is <a href="https://github.com/UoPNetSoc">github.com/UoPNetSoc</a>
Is A2.NET free?
Address is <a href="https://netsoc.group/is-a2.net-free">netsoc.group/is-a2.net-free</a>
Lecturer Background
Address is <a href="https://github.com/UoPNetSoc/lecturer-bg">github.com/UoPNetSoc/lecturer-bg</a>
<span class="prompt" aria-hidden="true">NetSoc> show committee</span>
President Jack Connolly is up
Address is <a href="https://jackconnolly.net/">jackconnolly.net</a>
Treasurer Harry Lowman is up
Address is <a href="https://harrylowman.github.io">harrylowman.github.io</a>
Secretary Thomas 'Tom' Robinson is up
Address is <a href="https://thomasr.me">thomasr.me</a>
<span class="prompt" aria-hidden="true">NetSoc> show endorsements</span>
We are a part of the University of Portsmouth Students' Union
We are endorsed and supported by Dr Shikun Zhou
<span class="prompt" aria-hidden="true">NetSoc> en</span>
<span class="prompt" aria-hidden="true">NetSoc# boot system tftp://shikun</span>
<span class="prompt" aria-hidden="true">NetSoc# reload</span>
This command will reset the whole system and disconnect your current session. Do you want to continue? (Y/N) <span id="js-confirm"></span><a href="javascript:checkKey(true)" id="load-button">Y</a>
</main>
<script>
function checkKey(e) {
// if it's "y" or we press the button
if (e.keyCode == 89 || e === true) {
document.getElementById("js-confirm").innerHTML = "y";
document.getElementById("load-button").style.display = "none";
document.onkeyup = null;
beginLoading();
}
}
document.onkeyup = checkKey;
function beginLoading() {
document.querySelector("main").innerHTML += `
SZ Boot Loader (c) 2023
RELEASE SOFTWARE, VERSION 4.2(1)SZ
Starting...
Loading "tftp://shikun"...
<span id="js-loader"></span>
`;
addHash();
}
// decorative loading during fake loading
let step = 1;
const oneLineMax = Math.floor(document.querySelector("main").offsetWidth / getSizeOfHash());
function addHash() {
document.getElementById("js-loader").innerHTML += "#";
if(step % oneLineMax == 0 && step != 0) document.getElementById("js-loader").innerHTML += "<br>";
if (step == (oneLineMax * 2) - 10) {
// stop after two lines
document.getElementById("js-loader").innerHTML += ` [OK]<br><br>System will now restart...`;
window.setTimeout(() => {
window.location = "https://shikunti.me";
}, 500);
} else {
// random time between 25ms and 250ms
const ms = Math.floor(Math.random() * 225) + 25;
window.setTimeout(addHash, ms);
step++;
}
}
function getSizeOfHash() {
const span = document.createElement("span");
span.innerHTML = "#";
document.querySelector("main").appendChild(span);
const size = span.offsetWidth;
document.querySelector("main").removeChild(span);
return size;
}
</script>
<script>
// fill in information on the page from GitHub API
function githubInfo(json) {
const meta = json.meta;
const data = json.data[0];
const sha = data.sha.slice(0, 7);
const date = new Date(data.commit.author.date).toISOString();
const verified = data.commit.verification.verified ? "verified" : "unverified";
const author = `${data.author.login} (${data.author.id})`;
document.querySelectorAll(".js-sha").forEach(e => e.innerHTML = sha);
document.querySelectorAll(".js-date").forEach(e => e.innerHTML = date);
document.querySelectorAll(".js-verified").forEach(e => e.innerHTML = verified);
document.querySelectorAll(".js-author").forEach(e => e.innerHTML = author);
}
document.querySelectorAll(".js-year").forEach(e => e.innerHTML = new Date().getFullYear());
</script>
<script src="https://api.github.com/repos/uopnetsoc/uopnetsoc.github.io/commits?per_page=1&callback=githubInfo"></script>
<script>
// fill in information on the page from Discord API
async function getDiscordData() {
const discordWidget = `https://discord.com/api/guilds/1093673080221605921/widget.json`;
const data = await fetch(discordWidget).then(r => r.json());
document.querySelectorAll(".js-discord-online").forEach(e => e.innerHTML = data.presence_count);
document.querySelectorAll(".js-discord-total").forEach(e => e.innerHTML = data.members.length);
document.querySelectorAll(".js-discord-invite").forEach(e => e.innerHTML = data.instant_invite.replace("https://", ""));
document.querySelectorAll(".js-discord-invite").forEach(e => e.href = data.instant_invite);
document.querySelectorAll(".js-discord-id").forEach(e => e.innerHTML = data.id);
}
getDiscordData();
</script>
</body>
</html>