<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: white;
color: black;
}
#intro {
max-width: 50em;
}
#heading {
position: relative;
height: 2.5ex;
}
#schedule {
position: relative;
}
.room {
border: 1px solid green;
}
.slot {
border-bottom: 1px solid green;
}
.slotlabel {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
font-weight: bold;
}
.roomhead p {
text-align: center;
font-weight: bold;
margin: 0;
}
.meeting {
border: 1px solid blue;
background-color: #ccccff;
overflow: hidden;
}
.meeting:hover {
background-color: #aaaaff;
}
.collision {
border: 1px solid red;
background-color: #ffcccc;
}
.collision:hover {
background-color: #ffaaaa;
}
.mtime {
margin: 0;
font-size: 11px;
}
.mdesc {
margin: 0;
margin-top: 0.5ex;
font-size: 9px;
}
</style>
</head>
<body>
<h1>MFF Zoom</h1>
<p id=intro>This table summarizes meetings scheduled in our Zoom accounts. Use standard Zoom interface
to create and modify reservations. Please keep in mind that there is a slight delay between Zoom
and this table. Please report all bugs to Martin Mareš.</p>
<form method=GET action="?">
<label for=date>Date:</label>
<input id=date type=date name=date value="{{ g.date }}">
<select name=hours>
<option value=0{{ " selected" if g.hours==0 else "" }}>Study hours</option>
<option value=1{{ " selected" if g.hours==1 else "" }}>Working hours</option>
<option value=2{{ " selected" if g.hours==2 else "" }}>Whole day</option>
</select>
<select name=rooms>
<option value=i{{ " selected" if g.rooms=="i" else "" }}>CompSci rooms</option>
<option value=m{{ " selected" if g.rooms=="m" else "" }}>Math rooms</option>
</select>
<input type=submit name=submit value="Submit">
</form>
<h2>Schedule for {{ g.dow }} {{ g.date }}</h2>
<div id=heading>
{% for r in g.room_boxes %}
<div class=roomhead style='position: absolute; left: {{ r.x }}px; top: 0px; width: {{ r.w }}px;'>
<p>{{ r.name }}</p>
</div>
{% endfor %}
</div>
<div id=schedule>
{% for r in g.room_boxes %}
<div class=room style='position: absolute; left: {{ r.x }}px; top: 0px; width: {{ r.w }}px; height: {{ r.h }}px;'></div>
{% endfor %}
{% for h in g.slot_boxes %}
<div class=slot style='position: absolute; left: {{ h.x }}px; top: {{ h.y }}px; width: {{ h.w }}px; height: {{ h.h }}px;'></div>
{% endfor %}
{% for h in g.slot_labels %}
<div class=slotlabel style='position: absolute; left: {{ h.x }}px; top: {{ h.y }}px; width: {{ h.w }}px; height: {{ h.h }}px;'>{{ h.label }}</div>
{% endfor %}
{% for m in g.meetings %}
<div class='meeting{{ " collision" if m.coll else "" }}' style='position: absolute; left: {{ m.x }}px; top: {{ m.y }}px; width: {{ m.w }}px; height: {{ m.h }}px;' title='{{ m.start + "–" + m.end + ": " + m.topic|e }}'>
<p class=mtime>{{ m.start }}–{{ m.end }}
<p class=mdesc>{{ m.topic }}
</div>
{% endfor %}
</div>
</body>
</html>