blob: 6b3c993526be5a66b12d64a6c007bb20e0af3544 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<!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 <%= year %></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-<%= year %>.ics">Klikk her</a>
for å legge den til i kalenderen din.</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>
|
