1 files changed, 131 insertions, 5 deletions
diff --git a/index.html.erb b/index.html.erb
index f1dfbf0..6b8630e 100644
--- a/index.html.erb
+++ b/index.html.erb
@@ -1,12 +1,138 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Ramaskrik 2018 programoversikt</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <title><%= title %></title>
+<style>
+.events {
+  display:flex;
+  justify-content: space-around;
+  width: 800px;
+}
+.event-column {
+  width: 350px;
+}
+.event-column-inner,
+.time-column-inner {
+  position: relative;
+}
+.timestamp {
+  position: absolute;
+  font-size: 10px;
+}
+.event-item {
+  display: flex;
+  position: absolute;
+  background-color: #b8afaf;
+  border: 1px solid #ccc;
+  padding: 0.3em;
+  color: #000;
+  box-sizing: border-box;
+  width: 100%;
+
+  font-family: Helvetica;
+  font-size: small;
+}
+.event-item.selected {
+  background-color: #709270;
+}
+.event-item-image {
+  float: left;
+  margin-right: 0.3em;
+}
+.event-item-image img {
+  width: 3em;
+  object-fit: cover;
+}
+</style>
   </head>
   <body>
-    <h1>Ramaskrik 2018 programoversikt</h1>
-    <% generate_graphs do |graph| %>
-      <%= graph.burn_svg_only() %>
-    <% end %>
+    <h1><%= title %></h1>
+    <section id="introduction">
+      <p>Dette er en annen visning av programmet for skrekkfilmfestivalen
+      <a href="https://ramaskrik.no">Ramaskrik 2023</a>. Jeg laget det for
+      meg selv, for å få en bedre oversikt over hvilke filmer som går hvor og når. Offisielt program finner du
+      på <a href="https://ramaskrik.no/program/">Ramaskrik sine egne websider</a>. Denne siden ble generert
+      <%= Date.today.strftime('%d.%m.%Y') %>, evt. endringer i programmet etter det er ikke tatt med.</p>
+
+      <p>Du kan merke hvilke filmer du ønsker å se ved å klikke/tappe på de. Siden vil huske hvilke filmer du
+      har valgt, så du vil kunne bruke denne siden til å planlegge ruten din igjennom festivalen hvis du vil.
+      (Ingen data sendes til websiden, hvilke filmer du har valgt vil kun lagres i din egen nettleser.)</p>
+
+      <p>Programmet er også tilgjengelig som en kalenderfil. <a href="./program-ramaskrik-2023.ics">Klikk her</a>
+      for å legge den til i kalenderen din</a>.</p>
+
+      <p>Har du spørsmål, ta kontakt med meg <a href="mailto:haraldei-ramaprogram@anduin.net">via epost</a>.</p>
+    </section>
+    <section id="events-list">
+      <% eventlist.each do |date, events| %>
+        <h2><%= date.strftime("%A %d.%m.%Y") %></h2>
+        <div class="events" style="height: <%= 200 + (events.end_time - events.start_time) / 50 %>px; width: <%= 100 + (events.venues.length * 350) %>px;">
+          <% start_time = events.start_time.to_i %>
+          <% end_time = events.end_time.to_i %>
+          <% events.venues.sort.each do |venue| %>
+            <div class="time-column" style="position: relative;">
+              <h3>Kl.</h3>
+              <div class="time-column-inner">
+                <% (start_time..end_time).step(3600 / 4) do |time| %>
+                  <div class="timestamp" style="top: <%= (time - start_time).to_i / 50 - 5 %>px; height: 10px;">
+                    <%= Time.at(time).strftime('%H:%M') %>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+            <div class="event-column">
+              <h3><%= venue %></h2>
+              <div class="event-column-inner">
+                <% events.events.select{ |e| e.venue == venue }.each do |e| %>
+                  <div id="<%= e.slug %>" class="event-item" style="top: <%= e.offset %>px; height: <%= e.height %>px;">
+                    <div class="event-item-image">
+                      <% if e.image_url %>
+                        <img src="<%= e.image_url %>">
+                      <% end %>
+                    </div>
+                    <div class="event-item-meta">
+                      <div class="event-item-title"><%= e.title %></div>
+                      <div class="event-item-times">
+                        <time datetime="<%= e.start_time.iso8601 %>">
+                          <%= e.start_time.strftime('%H:%M') %>
+                        </time>
+                        -
+                        <time datetime="<%= (e.start_time + e.duration).iso8601 %>">
+                          <%= (e.start_time + e.duration).strftime('%H:%M') %>
+                        </time>
+                      </div>
+                    </div>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </section>
+    <section id="footer">
+      <p>Denne siden ble generert den <%= DateTime.now.strftime('%d.%m.%Y kl. %H:%M') %> av
+      <a href="https://code.volse.net/ramaskrik-program.git/">Ramaskrik programoversikt-generator</a>
+    </section>
   </body>
 </html>
+<script>
+  let event_items = document.getElementsByClassName('event-item');
+  for (const element of event_items) {
+    if (localStorage.getItem(element.id) === 'selected') {
+      element.classList.add('selected');
+    }
+
+    element.addEventListener('click', event => {
+      const result = event.currentTarget.classList.toggle('selected');
+
+      if (result) {
+        localStorage.setItem(event.currentTarget.id, 'selected');
+      } else {
+        localStorage.removeItem(event.currentTarget.id);
+      }
+    });
+  }
+</script>