-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
229 lines (226 loc) · 14.5 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
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>metalab</title>
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="metalab.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts.js" defer></script>
</head>
<body>
<div class="content">
<header>
<video autoplay loop muted playsinline poster="images/header.webp">
<source src="videos/header.mp4" type="video/mp4">
<div class="heading">
<h1>metalab</h1>
<h2>Hackspace in the Heart of Vienna</h2>
</div>
</video>
<img class="heading reducedmotion" src="images/header.webp" alt="Picture of the entrance to Metalab">
<div class="playpause">
<svg class="pausesymbol" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 478.125 478.125">
<path d="M201.654,127.525h-31.9c-10.557,0-19.125,8.645-19.125,19.125v184.9c0,10.558,8.645,19.125,19.125,19.125h31.9
c10.557,0,19.125-8.645,19.125-19.125v-184.9C220.779,136.094,212.211,127.525,201.654,127.525z" />
<path d="M308.448,127.525h-31.9c-10.558,0-19.125,8.645-19.125,19.125v184.9c0,10.558,8.645,19.125,19.125,19.125h31.9
c10.557,0,19.125-8.645,19.125-19.125v-184.9C327.573,136.094,318.929,127.525,308.448,127.525z" />
<path d="M239.062,0C107.023,0,0,107.023,0,239.062s107.023,239.062,239.062,239.062s239.062-107.023,239.062-239.062
S371.102,0,239.062,0z M239.292,409.811c-94.171,0-170.519-76.424-170.519-170.519S145.197,68.773,239.292,68.773
c94.095,0,170.519,76.424,170.519,170.519S333.54,409.811,239.292,409.811z" />
</svg>
<svg class="playsymbol" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140">
<path d="M142.411,68.9C141.216,31.48,110.968,1.233,73.549,0.038c-20.361-0.646-39.41,7.104-53.488,21.639
C6.527,35.65-0.584,54.071,0.038,73.549c1.194,37.419,31.442,67.667,68.861,68.861c0.779,0.025,1.551,0.037,2.325,0.037
c19.454,0,37.624-7.698,51.163-21.676C135.921,106.799,143.033,88.377,142.411,68.9z M111.613,110.336
c-10.688,11.035-25.032,17.112-40.389,17.112c-0.614,0-1.228-0.01-1.847-0.029c-29.532-0.943-53.404-24.815-54.348-54.348
c-0.491-15.382,5.122-29.928,15.806-40.958c10.688-11.035,25.032-17.112,40.389-17.112c0.614,0,1.228,0.01,1.847,0.029
c29.532,0.943,53.404,24.815,54.348,54.348C127.91,84.76,122.296,99.306,111.613,110.336z" />
<path d="M94.585,67.086L63.001,44.44c-3.369-2.416-8.059-0.008-8.059,4.138v45.293
c0,4.146,4.69,6.554,8.059,4.138l31.583-22.647C97.418,73.331,97.418,69.118,94.585,67.086z" />
</svg>
</div>
<aside class='door-overlay'>Door is <span id="door">loading</span></aside>
</header>
<nav aria-label="Main Navigation">
<ul>
<li class="atomic"><img src="images/atomic.svg"
alt="Metalab Logo: a telephone booth in front of a Rutherford atomic model"></li>
<li><a href="#" class="active">Home</a></li>
<li><a href="rooms.html">Rooms</a></li>
<!-- <li><a href="events.html">Events</a></li> -->
<li><a href="location.html">Location</a></li>
<li><a href="https://metalab.at/calendar/">Calendar</a></li>
<li><a href="https://dome.metalab.at">The Dome</a></li>
<li><a href="https://metalab.at/wiki/Code_of_Conduct/en">Code of Conduct</a></li>
<li><a href="https://metalab.at/mos">Regulars Area</a></li>
<li><a href="https://metalab.at/wiki/Sponsoren">Supporters</a></li>
<li><a href="https://metalab.at/wiki/Impressum">Imprint</a></li>
<li><a href="#">🇬🇧</a></li>
<li><a href="index-de.html">🇦🇹</a></li>
</ul>
</nav>
<main>
<section>
<h3>Metalab</h3>
<div class="text">
<p> Metalab is a space where you can pursue your curiosity, realize unique ideas or meet and
exchange with others. As Vienna's oldest and largest hackerspace, Metalab offers an atmosphere
where people of all skill levels interested in art, technology, society, and sciences come
together to share knowledge and work on personal and collaborative projects. </p>
</div>
<img src="images/otterspace_main.webp" alt="People in Otter Space laughing">
</section>
<section>
<h3>What is a Hackspace?</h3>
<div class="text">
<p> As an activity, hacking is not just restricted to breaking into computer systems. Before
Hollywood hijacked the term for underwhelming action movies, hacking meant using knowledge and
curiosity to overcome technical and creative challenges. Many things, be it software systems,
clothing, hardware, or even your body, can and should be hacked. </p>
<p> A hackspace is a community-operated workspace where hackers with common interests can meet,
exchange knowledge and work on projects with their peers. </p>
</div>
<img src="images/hackspace.webp" alt="Metalab view from the street">
</section>
<section>
<h3>Creativity and Knowledge</h3>
<div class="text">
<p> Metalab lives and thrives off its members and community, allowing for horizontal knowledge
transfer. You can find groups interested in programming, network technology, ham radio,
electronics, robotics, art, activism, and inclusivity. </p>
<p> Interest groups meet for regular meetups and workshops, offering talks and hands-on experience.
These events are usually open to the public and free of charge. </p>
</div>
<img src="images/creativity.webp" alt="A person working on analog cameras in front of a notebook">
</section>
<section>
<h3>Events</h3>
<div class="text">
<p> Members and guests often host events, lectures, workshops, and meetups, most of which can be
visited without registering. Here is a calendar of the upcoming public events at Metalab. Feel
free to check them out and see if something piques your interest. </p>
</div>
<figure title="The Metalab calendar">
<div class="calendar-content"> Loading... </div>
<figcaption>Important events from our calendar. You can also visit <a
href='https://metalab.at/calendar/'>the dedicated calendar page</a> for future events.
</figcaption>
</figure>
</section>
<section>
<h3>Inclusivity and Accessibility</h3>
<div class="text">
<p> We consider ourselves an inclusive community where everyone is welcome regardless of age,
ethnicity, gender, sexuality, income, or religion. We aim to provide an environment of mutual
respect, tolerance, and encouragement. </p>
<p> Metalab collaborates with <a href="https://defineblind.at">Define</a> and <a
href="https://machs-auf.at">MACH'S AUF!</a> to make the space more inclusive towards Deaf,
blind, and visually impaired people. </p>
<p> Unfortunately, the space is not fully wheelchair accessible because there is a small staircase
at the entrance and in front of the restroom. There also isn't a guidance system for blind people
and only a small number of braile labels. </p>
</div>
<figure aria-label="Introduction to Metalab in Austrian Sign Language.">
<video muted playsinline controls poster="images/mach_s_auf_poster.webp">
<source src="videos/mach_s_auf_introduction_720p.mp4" type="video/mp4"> You can watch the sign
language introduction to Metalab <a href="https://www.youtube.com/watch?v=7S8ZVDvWld0">on
YouTube</a>.
</video>
<figcaption aria-hidden="true">Introduction to Metalab in ÖGS (Austrian Sign Language).</figcaption>
</figure>
</section>
<section>
<h3>Tools and Infrastructure</h3>
<div class="text">
<p> We have many tools and machines, including a laser cutter, 3D printers, a CNC mill, a lathe,
sewing machines, a vinyl plotter, and a well-stocked electronics laboratory. All of our tools
can be used by guests but may require supervision. If you want to use tools like the 3D printer,
CNC, or laser cutter, don’t hesitate to contact <a
href='mailto:[email protected]'>[email protected]</a> to find a date when someone can
supervise/help you. </p>
</div>
<img src="images/infrastructure.webp" alt="Two people standing in front of a 3D printer">
</section>
<section>
<h3>What Does It Cost?</h3>
<div class="text">
<p> Our space is mainly financed through memberships. You are not required to be a member to use the
space and host events, but it is encouraged if you visit regularly. The standard rate for
memberships is €30, reduced membership fees are available for students and people in financially
precarious situations. </p>
<p> Many tools and machines are free to use, though we are always happy about donations for
materials and maintenance. The main exception is our laser cutter, billed at €0.60/min of
cutting time. </p>
</div>
<img src="images/costs.webp" alt="Donation box on a table at Metalab">
</section>
<section>
<h3>Visit Us!</h3>
<div class="text">
<p> Metalab is generally open every day after 6pm and often earlier if at least one member is in the
space. </p>
<p> For your first visit, we recommend coming during one of our regular open days (held on the
second Thursday and fourth Friday of each month). During the open day, people will always be
happy to provide a tour of the space and help you use our machines. Alternatively, you can also
visit during <a href='https://metalab.at/wiki/MetaInvasion_Day'>MetaInvasion day</a>, when the
space is exclusively open to women, agender, inter, non-binary, and trans people, as well as
people who are still questioning their gender. </p>
<p> If you have any questions, feel free to contact us per e-mail at <a
href='mailto:[email protected]'>[email protected]</a>, call us at <a href='tel:+43720002323'>+43
720 002323</a>, or visit us at <strong>Rathausstraße 6, 1010 Vienna</strong>. You can also
reach us at
<a rel="me" href="https://chaos.social/@metalab">Mastodon</a>.
</p>
<p> You can also look at the detailed description on the <a href='location.html'>Location page</a>.
</p>
</div>
<figure>
<iframe title="Interactive map showing the location of Metalab" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"
src="https://www.openstreetmap.org/export/embed.html?bbox=16.353868246078495%2C48.207976537426354%2C16.358374357223514%2C48.21106167125026&layer=transportmap&marker=48.20951912757066%2C16.356121301651"
style="border: 1px solid black"></iframe>
<figcaption>Area Plan Around Metalab [<a
href="https://www.openstreetmap.org/?mlat=48.20945&mlon=16.35612#map=18/48.20945/16.35612&layers=T">View
Larger Map</a>]</figcaption>
</figure>
</section>
</main>
</div>
<footer>
<p>©2022-2023 Metalab. Created in <a href='http://vanilla-js.com/'>Vanilla JS</a>. <a
href='https://metalab.at/wiki/Datenschutzerkl%C3%A4rung'>Privacy policy</a>.</p>
</footer>
<script>
function escapeHtml(str) {
return str.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function createEventHtml(event) {
return `<li>
<div>
<p class="event">
<span class="event_date">${escapeHtml(event.date)}</span><a
href="${event.url}"><span class="name">${escapeHtml(event.title)}</span></a
><span class="teaser">${escapeHtml(event.subtitle)}</span>
</p>
</div>
</li>`;
}
window.addEventListener('DOMContentLoaded', () => {
const calendarContent = document.querySelector('.calendar-content');
fetch('https://metalab.at/calendar/api/public_upcoming').then(async (response) => {
if (response.ok) {
const json = await response.json();
const events = json.map(createEventHtml);
calendarContent.innerHTML = `<ul>${events.join('')}</ul>`;
}
});
});
</script>
</body>
</html>