tweak blink animation & add gallery
Change-Id: I1a1cd568e7982bf4e8e31f9e21897db53e59727f
diff --git a/hswaw/site/templates/index.html b/hswaw/site/templates/index.html
index 2ff2554..ad0eb7f 100644
--- a/hswaw/site/templates/index.html
+++ b/hswaw/site/templates/index.html
@@ -17,15 +17,15 @@
</div>
</div>
<div id="page">
- <div id="top">
+ <header id="top">
<div id="logo">
<img src="/static/site/neon-syrenka.svg" />
</div>
<div class="type">
<h1>Warszawski Hackerspace</h1>
</div>
- </div>
- <div id="quicklinks">
+ </header>
+ <nav id="quicklinks">
<ul>
<li><a href="https://wiki.hackerspace.pl/">Wiki</a></li>
<li><a href="https://profile.hackerspace.pl/">Konto</a></li>
@@ -38,7 +38,7 @@
</li>
{{ end }}
</ul>
- </div>
+ </nav>
<div class="bottom">
<div class="about">
<h2>Czym jest Warszawski Hackerspace?</h2>
@@ -54,7 +54,18 @@
<p>
<b>Hackerspace nie zna barier.</b> Jeśli masz ciekawy pomysł i szukasz ludzi chętnych do współpracy, lub po prostu potrzebujesz miejsca i sprzętu - <a href="https://wiki.hackerspace.pl/jak-dolaczyc">zapraszamy</a>! Utrzymujemy się w całosci z wolontariatu naszych członków, <a href="https://wiki.hackerspace.pl/finanse">darowizn i składek</a> oraz drobnej aktywności komercyjnej.
</p>
- <img src="/static/site/space.jpg" />
+ <section id="gallery">
+ <div class="img-wrapper">
+ <img src="/static/site/space.jpg" />
+ </div>
+ <ul id="gallery-nav">
+ <li data-name="space" class="active"><a href="#">Spejs</a></li>
+ <li data-name="frezarka"><a href="#">Frezarka</a></li>
+ <li data-name="tokarka"><a href="#">Tokarka</a></li>
+ <li data-name="kuka"><a href="#">KUKA</a></li>
+ <li data-name="serwerownia"><a href="#">Serwerownia</a></li>
+ </ul>
+ </section>
<h2>Czy mogę odwiedzić spejs? Jak do was dołączyć?</h2>
<p>
Nasze cotygodniowe otwarte spotkania są w tej chwili zawieszone z powodu pandemii. Mimo tego, <b>dalej jesteśmy otwarci na nowych członków</b> i zainteresowanych - tylko w mniejszej skali i po wcześniejszym umówieniu się. Więcej informacji znajdziesz na <a href="https://wiki.hackerspace.pl/jak-dolaczyc">wiki.hackerspace.pl/jak-dolaczyc</a>.
@@ -86,6 +97,16 @@
L.marker([52.24158, 20.9848]).addTo(map);
}
+document.querySelectorAll('#gallery-nav > li > a').forEach(link => {
+ link.onclick = e => {
+ e.preventDefault()
+ document.querySelector(`#gallery-nav > li.active`).classList.remove('active')
+ const li = e.currentTarget.parentNode
+ li.classList.add('active')
+ const name = li.dataset.name
+ document.querySelector('#gallery img').src = `/static/site/${name}.jpg`
+ }
+})
</script>
<script src="/static/leaflet/leaflet.js" crossorigin="" onload="loadMap()"></script>
<script src="/static/site/led.js" crossorigin="" type="module" ></script>