3 files changed, 51 insertions, 0 deletions
diff --git a/templates/base.htm b/templates/base.htm
new file mode 100644
index 0000000..7810f21
--- /dev/null
+++ b/templates/base.htm
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>{% block title %}{{ title }} - PokeBot{% endblock %}</title>
+  </head>
+  <body>
+    <main>
+      {% block content %}{% endblock %}
+    </main>
+  </body>
+</html>
diff --git a/templates/index.htm b/templates/index.htm
new file mode 100644
index 0000000..2584603
--- /dev/null
+++ b/templates/index.htm
@@ -0,0 +1,27 @@
+{% extends "base.htm" %}
+
+{% block title %}Overview{% endblock %}
+
+{% block content %}
+<h1>Bots</h1>
+<ul>
+  {% for bot in bots %}
+    <h2>{{ bot.name }}</h1>
+    <div>State: {{ bot.state }}</div>
+    <div>Volume: {{ bot.volume * 100.0 }}%</div>
+    {% match bot.currently_playing %}
+      {% when Some with (current) %}
+        <span>Currently playing:</span>
+        {% let item = current %}
+        {% include "song.htm" %}
+      {% when None %}
+    {% endmatch %}
+
+    {% for item in bot.playlist %}
+      <li>
+        {% include "song.htm" %}
+      </li>
+    {% endfor %}
+  {% endfor %}
+</ul>
+{% endblock %}
diff --git a/templates/song.htm b/templates/song.htm
new file mode 100644
index 0000000..93f4fec
--- /dev/null
+++ b/templates/song.htm
@@ -0,0 +1,10 @@
+<a href="{{ item.webpage_url }}">{{ item.title }}</a>
+{% match item.duration %}
+  {% when Some with (duration) %}
+    {% let secs = duration.as_secs() %}
+    {% let mins = secs / 60 %}
+    {% let submin_secs = secs % 60 %}
+    <span>({{ "{:02}"|format(mins) }}:{{ "{:02}"|format(submin_secs) }})</span>
+  {% when None %}
+    <span>(--:--)</span>
+{% endmatch %}