-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
166 lines (145 loc) · 10.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
<!DOCTYPE html>
<html lang="ca-ES">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-69542332-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-69542332-3');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hack Nights | Hackers@UPC | FIB UPC Barcelona</title>
<meta name="description" content="HackNights va néixer fan un parell d'anys amb l'objectiu de proporcionar als estudiants una atmosfera col·laborativa on poder dedicar temps a allò que t'agrada. Podràs aprendre o ensenyar als altres i cooperant per créixer com a programador/a. El protagonista ets tu i els teus amics portant idees a codi.">
<meta name="author" content="Hackers@UPC">
<meta name="application-name" content="HackNights">
<meta name="apple-mobile-web-app-title" content="Hack Nights">
<meta name="theme-color" content="#553e6c">
<link rel="canonical" href="https://hacknights.hackupc.com">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
<meta name="keywords" content="Hackathon, HackUPC, Hackers@UPC, UPC, FIB, Universitat Politécnica de Catalunya, Barcelona, Working space, Mini, Pizza, Hack, Hacker, Hacking, Barcelona, BCN"/>
<meta name="google-site-verification" content="vpRQppPDeJXyS08K6Wwzi1Zc7dkhwu2kq_3KmuxOqrY" />
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="/media/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/media/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/media/icons/favicon-16x16.png">
<link rel="manifest" href="/media/icons/site.webmanifest">
<link rel="mask-icon" href="/media/icons/safari-pinned-tab.svg" color="#553e6c">
<link rel="shortcut icon" href="/media/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#553e6c">
<meta name="msapplication-config" content="/media/icons/browserconfig.xml">
</head>
<body class="body">
<div class="spotlight"></div>
<main class="hero">
<h1 class="hero--title dim">Hac<span class="blink_1">k</span> Nig<span class="blink_2">h</span>ts</h1>
<span class="hero--date"><span class="hero--date--episode" id="episodeName">Episode I</span> - <span class="hero--date--value" id="episodeDate">Friday, 24th of March at 9:00p.m.</span></span>
<a href="" class="hero--button" id="applyButton">Aplica ja</a>
</main>
<section class="section">
<h2 class="section--title section--title_cyan dim_1">Què <span class="blink_3">és</span></h2>
<p class="section--text">HackNights va néixer fa un parell d'anys amb l'objectiu de proporcionar als estudiants una atmosfera col·laborativa on poder dedicar temps a allò que t'agrada. És un espai on tothom guanya, podràs aprendre o ensenyar als altres i cooperar per créixer com a programador/a. És per això, que no es disposa de premis ni es busca la competitivitat. El protagonista ets tu i els teus amics portant idees a codi.</p>
</section>
<section class="section">
<h2 class="section--title section--title_green dim_2">O<span class="blink_4">n</span></h2>
<p class="section--text">Ens podràs trobar a l’<b>Aula d’estudis</b> de l’edifici A4, al costat de la biblioteca rector Gabriel Ferraté, al Campus Nord de la UPC.</p>
</section>
<section class="section">
<h2 class="section--title section--title_orange dim_3">H<span class="blink_5">o</span>ra<span class="blink_6">r</span>i</h2>
<p class="section--text">L’horari de les pròximes edicions de la temporada de <span id="season">primavera 2023</span> és el següent:</p>
<div class="terminal">
<p class="terminal--item"><span><span class="terminal--green">hacker@HackNights</span>:<span class="terminal--blue">~</span>$ </span>more schedule.txt</p>
<ul class="terminal--list" id="terminal">
<li onclick="toggleCollapse(this);" class="terminal--item terminal--list--item terminal--item__next terminal--list--item__active">🎮 <time datetime="2020-05-22 20:00">March 24th</time> <span class="terminal--gray">-</span> Episode I<span class="terminal--gray">,</span> Videogames</li>
<ul class="terminal--list terminal--list__2 terminal--list--item__active">
<li class="terminal--item terminal--list--item__2">21:00 <span class="terminal--gray">-</span> Check-in</li>
<li class="terminal--item terminal--list--item__2">21:15 <span class="terminal--gray">-</span> Opening speech</li>
<li class="terminal--item terminal--list--item__2">21:30 <span class="terminal--gray">-</span> Workshop</li>
<li class="terminal--item terminal--list--item__2">00:00 <span class="terminal--gray">-</span> Midnight Snack</li>
<li class="terminal--item terminal--list--item__2">05:00 <span class="terminal--gray">-</span> Closing</li>
</ul>
<li onclick="toggleCollapse(this);" class="terminal--item terminal--list--item terminal--blue">🚩 <time datetime="2020-05-22 20:00">April 21th</time> <span class="terminal--gray">-</span> Episode II<span class="terminal--gray">,</span> CTFs</li>
<ul class="terminal--list terminal--list__2">
<li class="terminal--item terminal--list--item__2">21:00 <span class="terminal--gray">-</span> Check-in</li>
<li class="terminal--item terminal--list--item__2">21:15 <span class="terminal--gray">-</span> Opening speech</li>
<li class="terminal--item terminal--list--item__2">21:30 <span class="terminal--gray">-</span> Workshop</li>
<li class="terminal--item terminal--list--item__2">00:00 <span class="terminal--gray">-</span> Midnight Snack</li>
<li class="terminal--item terminal--list--item__2">05:00 <span class="terminal--gray">-</span> Closing</li>
</ul>
</ul>
<p class="terminal--item"><span><span class="terminal--green">hacker@HackNights</span>:<span class="terminal--blue">~</span>$ </span><span class="terminal--underscore">_</span></p>
</div>
</section>
<section class="section">
<h2 class="section--title section--title_white dim_4">Grà<span class="blink_7">c</span>i<span class="blink_8">e</span>s</h2>
<div class="brands">
<a href="https://www.fib.upc.edu/" target="_blank" class="brands--link"><img src="/media/FIB-UPC_logo_grafity.png" alt="FIB-UPC" class="brands--img"></a>
</div>
</section>
<!-- <section class="section">
<h2 class="section--title section--title_yellow dim_5">Par<span class="blink_8">t</span>ners</h2>
<div class="brands">
<a href="http://www.zanuy.com/" target="_blank" class="brands--link"><img src="/media/Zanuy_logo_grafity.png" alt="Zanuy" class="brands--img"></a>
</div>
</section> -->
<footer class="footer dim">
<div class="footer--legal">
<a target="_blank" href="https://legal.hackersatupc.org/hackupc/legal_notice" hreflang="en" class="footer--legal--link">Legal notice</a> |
<a target="_blank" href="https://legal.hackersatupc.org/hacknights/hacknights_terms_and_conditions" hreflang="en" class="footer--legal--link">Terms and conditions</a> |
<a target="_blank" href="https://legal.hackersatupc.org/hacknights/hacknights_privacy_and_cookies_policy" hreflang="en" class="footer--legal--link">Privacy and cookies</a>
</div>
<div>
<b>Made</b> with <span class="footer--heart blink_9">❤</span class="footer--heart"> by <b class="blink_10"><a href="https://hackersatupc.org/" hreflang="en">Hackers@UPC</a></b>
</div>
</footer>
<script src="/hackNights.js"></script>
<script>
// Set up Hero info
const applyButton = document.getElementById("applyButton");
if(hackNights.nextEvent.applyUrl){
applyButton.href = hackNights.nextEvent.applyUrl;
applyButton.classList.remove('hero--button__inactive');
applyButton.textContent = 'Aplica ja!';
}else{
applyButton.href = '#';
applyButton.classList.add('hero--button__inactive');
applyButton.textContent = 'Tancat';
}
const episodeName = document.getElementById("episodeName");
episodeName.textContent = hackNights.nextEvent.name || hackNights.defaultEvent.name;
const episodeDate = document.getElementById("episodeDate");
let nextEventDate = new Date(hackNights.nextEvent.date);
const episodeDateFormatOptions = { weekday: 'long', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
episodeDate.textContent = nextEventDate.toLocaleDateString('ca-ES', episodeDateFormatOptions) || hackNights.defaultEvent.date;
const season = document.getElementById("season");
season.textContent = hackNights.season || "current season";
// Set up terminal
const terminal = document.getElementById("terminal");
const terminalDateFormatOptions = { month: 'long', day: 'numeric' };
let html = "";
for (const event of hackNights.events) {
let date = new Date(event.date);
html += `<li onclick="toggleCollapse(this);" class="terminal--item terminal--list--item${event.done ? " terminal--item__done" : ""}${event.next ? " terminal--item__next terminal--list--item__active" : ""}">${event.theme.emoji} <time datetime="${event.date}">${date.toLocaleDateString('ca-ES', terminalDateFormatOptions)}</time> <span class="terminal--gray">-</span> ${event.name}<span class="terminal--gray">,</span> ${event.theme.name}${!event.done && event.applyUrl ? ` <span class="terminal--gray">>></span> <a class="terminal--${event.next ? 'link' : 'gray'}" href="${event.applyUrl}">apunta't</a>` : ""}</li>`;
if(event.schedule){
html += `<ul class="terminal--list terminal--list__2${event.next ? ' terminal--list--item__active' : ''}">`;
for (const task of event.schedule) {
html += `<li class="terminal--item terminal--list--item__2">${task.hour} <span class="terminal--gray">-</span> ${task.name}</li>`;
}
html += `</ul>`;
}
}
terminal.innerHTML = html;
// define terminal collapsing function
function toggleCollapse(item) {
item.classList.toggle('terminal--list--item__active');
let list = item.nextElementSibling;
if(list && list.tagName == 'UL') list.classList.toggle('terminal--list--item__active');
}
</script>
</body>
</html>