aboutsummaryrefslogtreecommitdiffstats
path: root/index.html.erb
diff options
context:
space:
mode:
Diffstat (limited to 'index.html.erb')
-rw-r--r--index.html.erb136
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>