blob: 6b8630e06a9a3b5216df5049240ffbde4c60552f (
plain) (
tree)
|
|
<!DOCTYPE html>
<html>
<head>
<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><%= 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>
|
