adding links to page

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

colors.css

@@ -15,7 +15,7 @@ header h2{
     text-shadow: 3px 3px 10px black, -3px 3px 10px black, 3px -3px 10px black, -3px -3px 10px black;
 }
 
-h3{
+h3, h4{
     background: rgba(70,0,0,0.5);
     border: 1px solid red;
 }
@@ -30,3 +30,8 @@ div{
 #showcase{
     border: 1px solid red;
 }
+
+.start {
+  background: #a00;
+  color: black;
+}

index.html

@@ -18,8 +18,25 @@
         </ul>
         <h3>Genres</h3>
         <ul>
-            <li>70er</li>
+            <li><a href="?tags=70er">70er</a></li>
-            <li>80er</li>
+            <li><a href="?tags=80er">80er</a></li>
+            <li><a href="?tags=90er">90er</a></li>
+            <li><a href="?tags=Balkan">Balkan</a></li>
+            <li><a href="?tags=BlackMetal">Black Metal</a></li>
+            <li><a href="?tags=BluesRock">Blues Rock</a></li>
+            <li><a href="?tags=DeathMetal">DeathMetal</a></li>
+            <li><a href="?tags=DrumNBass">Drum`n`Bass</a></li>
+            <li><a href="?tags=EBM">EBM</a></li>
+            <li><a href="?tags=FolkMetal">Folk Metal</a></li>
+            <li><a href="?tags=Gothic">Gothic</a></li>
+            <li><a href="?tags=HardRock">Hard Rock</a></li>
+            <li><a href="?tags=Hardcore">Hardcore</a></li>
+            <li><a href="?tags=HeavyMetal">Heavy Metal</a></li>
+            <li><a href="?tags=Industrial">Industrial</a></li>
+            <li><a href="?tags=Jazz">Jazz</a></li>
+            <li><a href="?tags=Punk">Punk</a></li>
+            <li><a href="?tags=Stoner">Stoner</a></li>
+            <li><a href="?tags=ThrashMetal">Thrash Metal</a></li>
         </ul>
         <h3>Infos</h3>
         <ul>
@@ -30,15 +47,59 @@
     </nav>
     <nav class="right">
         <h3>Locations</h3>
-        <p>Erfurt</p>
+        <p><li><a href="?tags=erfurt">Erfurt</a></li></p>
         <ul>
-            <li>Engelsburg</li>
+            <li><a href="?tags=Erfurt,Engelsburg">Engelsburg</a></li>
+            <li><a href="?tags=Erfurt,FromHell">From Hell</a></li>
+            <li><a href="?tags=Erfurt,Gewerkschaftshaus">Gewerkschaftshaus</a></li>
+            <li><a href="?tags=Erfurt,Museumskeller">Museumskeller</a></li>
         </ul>
         <p><a href="?tags=gera">Gera</a></p>
         <ul>
-            <li>Comma</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Comma</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Havanna Lounge</li>
+            <li><a href="?tags=Gera,MusicHall">Music Hall</a></li>
+            <li><a href="?tags=Gera,Qui">Qui</a></li>
+            <li><a href="?tags=Gera,SevenClub">Seven Club</a></li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Thrash</li>
+        </ul>
+        <p><a href="?tags=Ilmenau">Ilmenau</a></p>
+        <ul>
+            <li><a href="?tags=Ilmenau,Bi*Club">Bi-Club</a></li>
         </ul>
         <p><a href="?tags=jena">Jena</a></p>
+        <ul>
+            <li><a href="?tags=Jena,CafeWagner">Café Wagner</a></li>
+            <li><a href="?tags=Jena,F-Haus">F-Haus</a></li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">JG-Stadtmitte</li>
+            <li><a href="?tags=Jena,Kassablanca">Kassablanca</a></li>
+            <li><a href="?tags=Jena,Kulturbahnhof">Kulturbahnhof</a></li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Med-Club</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">M-Pire</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Papiermühle</li>
+            <li><a href="?tags=Jena,Rosenkeller">Rosenkeller</a></li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Volkshaus</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Zapata</li>
+        </ul>
+        <p><a href="?tags=Neustadt.Orla">Neustadt an der Orla</a></p>
+        <ul>
+            <li><a href="?tags=Neustadt.Orla,Wotufa">Wotufa</a></li>
+        </ul>
+        <p><a href="?tags=Weimar">Weimar</a></p>
+        <ul>
+            <li><a href="?tags=Weimar,C-Keller">C-Keller</a></li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Gerber</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Kasseturm</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Uhrenwerk</li>
+        </ul>
+        <p><a href="?tags=Leipzig">Leipzig</a></p>
+        <ul>
+            <li><a href="?tags=Leipzig,Bandhaus">Bandhaus</a></li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Moritzbastei</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Hellraiser</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Täubchenthal</li>
+            <li title="Hier gibt es zur Zeit keinen Event-Kalender">Werk II</li>
+        </ul>
         <h3>andere Tags</h3>
     </nav>
     <main>

positions.css

@@ -8,7 +8,6 @@ body {
 }
 
 div{
-    border-radius: 10px 10px 0 0;
     max-height: 200px;
     overflow: hidden;
     margin-bottom: 20px;
@@ -23,8 +22,12 @@ h1{
     margin: 10px;
 }
 
+#eventlist,
+#showcase,
 h3{
     border-radius: 10px 10px 0 0;
+}
+h3,h4{
     margin: 0;
     padding: 6px 10px;
     text-align: center;
@@ -66,10 +69,12 @@ ul{
 }
 #eventlist{
     max-height: unset;
+    border-radius: 10px 10px 0 0;
 }
 #eventlist .event img{
     max-width: 50%;
     float: right;
+    position: relative;
 }
 #showcase img{
     max-height: 160px;
@@ -77,3 +82,10 @@ ul{
 #welcome {
     margin-bottom: 5px;
 }
+
+.start {
+  padding: 5px 10px 3px;
+  display: block;
+  margin-bottom: 10px;
+  text-align: center;
+}

sj.js

@@ -27,6 +27,15 @@ async function handleData(response){
                     }
                 }
             }
+            if (event.start){
+                var span = create('span');
+                span.setAttribute('class','start');
+                var loc = event.location;
+                var pos = loc.indexOf(',');
+                if (pos>0) loc = loc.substring(0,pos);
+                span.innerHTML = event.start + ' @ '+ loc + '<br/>';
+                div.prepend(span);
+            }
             var h4 = create('h4');
             h4.innerHTML = event.url ? `<a href="${event.url}" target="_blank">${event.title}</a>` : event.title;
             div.prepend(h4);