-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
60 lines (58 loc) · 12.3 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
<!DOCTYPE HTML>
<html>
<head>
<title>Circular Hackerspace Heatmap</title>
<meta name="description" content="Create a circular heatmap for the opening times for your hackspace.">
<script src="index.js"></script>
<link rel="stylesheet" href="index.css" />
<link rel="icon" id="favicon" type="image/x-icon" href="">
</head>
<body>
<main>
<h1>Circular Hackerspace Availability</h1>
<p>
This page shows an svg file that you can embed as a clock to show when the space is
usually open.
</p>
<h2>Customization</h2>
<!-- option menu from https://blog.hubspot.com/website/html-dropdown -->
<label for="spaces">Choose a hackerspace:</label>
<select name="spaces" id="spaces" onchange="showImage()" >
<option value="/dev/tal" id="loading">Loading...</option>
<!-- add some spaces so there is a preselection working when the site reloads. -->
<option value="/dev/tal">/dev/tal</option><option value="/usr/space">/usr/space</option><option value="57North Hacklab">57North Hacklab</option><option value="ACKspace">ACKspace</option><option value="AFRA">AFRA</option><option value="Amman Valley MakerSpace">Amman Valley MakerSpace</option><option value="Apollo-NG">Apollo-NG</option><option value="Arch Reactor">Arch Reactor</option><option value="Attraktor Makerspace">Attraktor Makerspace</option><option value="Bastli">Bastli</option><option value="Binary Kitchen">Binary Kitchen</option><option value="Bitlair">Bitlair</option><option value="Breizh-Entropy">Breizh-Entropy</option><option value="Brixel">Brixel</option><option value="Bytespeicher">Bytespeicher</option><option value="C3D2">C3D2</option><option value="CCC Aachen">CCC Aachen</option><option value="CCC Basel">CCC Basel</option><option value="CCC Cologne">CCC Cologne</option><option value="CCC Frankfurt">CCC Frankfurt</option><option value="CCC Hamburg">CCC Hamburg</option><option value="CCC Mannheim">CCC Mannheim</option><option value="CCCFr">CCCFr</option><option value="Chaos Computer Club Wien (C3W)">Chaos Computer Club Wien (C3W)</option><option value="Chaos Darmstadt">Chaos Darmstadt</option><option value="ChaosStuff">ChaosStuff</option><option value="Chaosconsulting">Chaosconsulting</option><option value="Chaosdorf">Chaosdorf</option><option value="Chaospott">Chaospott</option><option value="Chaostreff Backnang">Chaostreff Backnang</option><option value="Chaostreff Bern">Chaostreff Bern</option><option value="Chaostreff Chemnitz">Chaostreff Chemnitz</option><option value="Chaostreff Dortmund">Chaostreff Dortmund</option><option value="Chaostreff Flensburg">Chaostreff Flensburg</option><option value="Chaostreff Potsdam (CCCP)">Chaostreff Potsdam (CCCP)</option><option value="Chaostreff Recklinghausen c3RE">Chaostreff Recklinghausen c3RE</option><option value="Chaostreff Salzburg">Chaostreff Salzburg</option><option value="Chaostreff Zürich">Chaostreff Zürich</option><option value="ChaosZone">ChaosZone</option><option value="Computer Deconstruction Lab">Computer Deconstruction Lab</option><option value="Coredump">Coredump</option><option value="Das Labor">Das Labor</option><option value="DevLoL">DevLoL</option><option value="DingFabrik e.V.">DingFabrik e.V.</option><option value="Do-It-Yourself-Werkstatt Wilhelmshaven e.V.">Do-It-Yourself-Werkstatt Wilhelmshaven e.V.</option><option value="East Essex Hackspace">East Essex Hackspace</option><option value="Edinburgh Hacklab">Edinburgh Hacklab</option><option value="Eigenbaukombinat Halle">Eigenbaukombinat Halle</option><option value="Entropia">Entropia</option><option value="Farset Labs">Farset Labs</option><option value="FAU FabLab">FAU FabLab</option><option value="FIXME">FIXME</option><option value="FabLab Allgäu">FabLab Allgäu</option><option value="FabLab Nürnberg">FabLab Nürnberg</option><option value="Forschung und Technik e.V.">Forschung und Technik e.V.</option><option value="Frack">Frack</option><option value="Freies Labor">Freies Labor</option><option value="Fuz">Fuz</option><option value="Garoa Hacker Clube">Garoa Hacker Clube</option><option value="GeekLabs">GeekLabs</option><option value="Gold Coast Techspace">Gold Coast Techspace</option><option value="H.A.C.K.">H.A.C.K.</option><option value="HSBNE (Hackerspace Brisbane)">HSBNE (Hackerspace Brisbane)</option><option value="HacDC">HacDC</option><option value="Hack42">Hack42</option><option value="Hackalot">Hackalot</option><option value="Hackeriet">Hackeriet</option><option value="Hackerspace Bielefeld e.V.">Hackerspace Bielefeld e.V.</option><option value="Hackerspace Bremen e.V.">Hackerspace Bremen e.V.</option><option value="Hackerspace Brussels">Hackerspace Brussels</option><option value="Hackerspace Drenthe">Hackerspace Drenthe</option><option value="Hackerspace Krakow">Hackerspace Krakow</option><option value="Hackerspace.Gent">Hackerspace.Gent</option><option value="Hackerspace.gr">Hackerspace.gr</option><option value="Hackerspace Szeged">Hackerspace Szeged</option><option value="Hacklab">Hacklab</option><option value="Hacklabor">Hacklabor</option><option value="Hacksaar">Hacksaar</option><option value="Hackspace Siegen">Hackspace Siegen</option><option value="Hakierspejs Łódź">Hakierspejs Łódź</option><option value="HeatSync Labs">HeatSync Labs</option><option value="HTUGraz-ELab">HTUGraz-ELab</option><option value="HTUGraz-Philab">HTUGraz-Philab</option><option value="ibbspace">ibbspace</option><option value="IT-Syndikat">IT-Syndikat</option><option value="K4CG">K4CG</option><option value="Ko-Lab">Ko-Lab</option><option value="Krautspace">Krautspace</option><option value="Kreitek">Kreitek</option><option value="Kwartzlab">Kwartzlab</option><option value="LAG">LAG</option><option value="Laboratorio Hacker de Campinas">Laboratorio Hacker de Campinas</option><option value="LeineLab">LeineLab</option><option value="Level2">Level2</option><option value="Liege Hackerspace">Liege Hackerspace</option><option value="LINKping">LINKping</option><option value="London Hackspace">London Hackspace</option><option value="LuXeria">LuXeria</option><option value="Maakplek">Maakplek</option><option value="Mainframe">Mainframe</option><option value="MakeRiga">MakeRiga</option><option value="MakeSpace Madrid">MakeSpace Madrid</option><option value="Makers Local 256">Makers Local 256</option><option value="Makers im Zigerschlitz">Makers im Zigerschlitz</option><option value="Makerspace Erfurt">Makerspace Erfurt</option><option value="Makerspace Gütersloh">Makerspace Gütersloh</option><option value="Maker Space experimenta">Maker Space experimenta</option><option value="Maschinendeck">Maschinendeck</option><option value="Maschinenraum">Maschinenraum</option><option value="MidsouthMakers">MidsouthMakers</option><option value="Milton Keynes Makerspace">Milton Keynes Makerspace</option><option value="Milwaukee Makerspace">Milwaukee Makerspace</option><option value="Minsk Hackerspace">Minsk Hackerspace</option><option value="Mittelab">Mittelab</option><option value="Motionlab">Motionlab</option><option value="MuCCC">MuCCC</option><option value="Munich Maker Lab">Munich Maker Lab</option><option value="NURDSpace">NURDSpace</option><option value="Nerd2Nerd">Nerd2Nerd</option><option value="Nerdberg">Nerdberg</option><option value="Netz39">Netz39</option><option value="Netzladen">Netzladen</option><option value="Noklab">Noklab</option><option value="Nottinghack">Nottinghack</option><option value="Nova Labs">Nova Labs</option><option value="Open Space Aarhus">Open Space Aarhus</option><option value="OpenLab Augsburg">OpenLab Augsburg</option><option value="Open-Lab Vorarlberg">Open-Lab Vorarlberg</option><option value="P'yŏngyang Hackerspace">P'yŏngyang Hackerspace</option><option value="Pangloss Labs #1">Pangloss Labs #1</option><option value="Perth Artifactory">Perth Artifactory</option><option value="Pixelbar">Pixelbar</option><option value="Polytechnischer Werkraum Zittau">Polytechnischer Werkraum Zittau</option><option value="Pomerania Hackerspace">Pomerania Hackerspace</option><option value="Post Tenebras Lab">Post Tenebras Lab</option><option value="RaumZeitLabor">RaumZeitLabor</option><option value="Reaktor 23">Reaktor 23</option><option value="Recompile">Recompile</option><option value="RevSpace">RevSpace</option><option value="Root">Root</option><option value="Schülerforschungszentrum der Hochschule Aalen">Schülerforschungszentrum der Hochschule Aalen</option><option value="SchonungsLos">SchonungsLos</option><option value="Segmentation Vault">Segmentation Vault</option><option value="Stockholm Makerspace">Stockholm Makerspace</option><option value="Spline">Spline</option><option value="Stratum 0">Stratum 0</option><option value="Sudo Room">Sudo Room</option><option value="Swansea Hackspace">Swansea Hackspace</option><option value="TDvenlo">TDvenlo</option><option value="TOG">TOG</option><option value="Tarlab">Tarlab</option><option value="TechTonik Labs">TechTonik Labs</option><option value="Technologia Incognita">Technologia Incognita</option><option value="The Bodgery">The Bodgery</option><option value="The Space Leiden">The Space Leiden</option><option value="TkkrLab">TkkrLab</option><option value="Toolbox Bodensee e.V.">Toolbox Bodensee e.V.</option><option value="UN-Hack-Bar">UN-Hack-Bar</option><option value="Umeå Hackerspace">Umeå Hackerspace</option><option value="UrLab">UrLab</option><option value="VoidWarranties">VoidWarranties</option><option value="Warpzone e.V.">Warpzone e.V.</option><option value="Warsaw Hackerspace">Warsaw Hackerspace</option><option value="Westwoodlabs">Westwoodlabs</option><option value="Wolfplex Hackerspace">Wolfplex Hackerspace</option><option value="Zeus WPI">Zeus WPI</option><option value="[hsmr]">[hsmr]</option><option value="backspace">backspace</option><option value="base48">base48</option><option value="brmlab">brmlab</option><option value="bytewerk">bytewerk</option><option value="c-base">c-base</option><option value="fNordeingang">fNordeingang</option><option value="flipdot">flipdot</option><option value="hackzogtum">hackzogtum</option><option value="i3Detroit">i3Detroit</option><option value="init Lab">init Lab</option><option value="machquadrat">machquadrat</option><option value="mag.lab">mag.lab</option><option value="nbsp">nbsp</option><option value="nordlab e. V.">nordlab e. V.</option><option value="NYC Resistor">NYC Resistor</option><option value="realraum">realraum</option><option value="see-base">see-base</option><option value="section77">section77</option><option value="shackspace - stuttgart hackerspace">shackspace - stuttgart hackerspace</option><option value="spaceleft">spaceleft</option><option value="turmlabor">turmlabor</option><option value="verschwoerhaus">verschwoerhaus</option><option value="vspace.one">vspace.one</option><option value="xHain">xHain</option><option value="z-Labor Zwickau">z-Labor Zwickau</option> </select>
<br/>
<label for="period">Choose a time period:</label>
<select name="period" id="period" onchange="showImage()">
<option value="week">Week</option>
<option value="month">Month</option>
<option value="year" selected>Year</option>
<option value="everything">Everything</option>
</select>
<br/>
<label for="day">Choose a day:</label>
<select name="day" id="day" onchange="showImage()">
<option value="">Today</option>
<option value="Mo">Monday</option>
<option value="Tu">Tuesday</option>
<option value="We">Wednesday</option>
<option value="Th">Thurday</option>
<option value="Fr">Friday</option>
<option value="Sa">Saturday</option>
<option value="Su">Sunday</option>
</select>
<hr/>
<!-- embed image form https://www.ionos.com/digitalguide/websites/website-creation/svg-format-how-to-embed-svg-vector-graphics/ -->
Link to image: <a href="" id="imagelink" target="_blank"></a><br/>
<span id="map"><object data='24h.svg?id=/dev/tal&period=week' type='image/svg+xml' id="mapobj">
<!-- Fallback solution when SVG doesn’t load -->
<embed type="image/svg+xml" src="24h.svg?id=/dev/tal&period=week" id="mapembed" />
</object></span>
<pre id="mapcode">
</pre>
<hr/>
You can view the code on <a href="https://github.com/AmmanVMS/circular-space-heatmap/">GitHub</a>.
This is open-source software licensed under <a href="LICENSE">GPLv3</a>.
</main>
</body>
</html>