--- /dev/null
+#!/bin/sh
+# Copyright (c) 2023 Jakub Czajka <jakub@ekhem.eu.org>
+# License: GPL-3.0 or later.
+
+. /etc/environment
+
+gyms=$(/usr/bin/psql --user=gym_tracker --dbname="${GYM_DB}" --tuples-only \
+ --no-align --command="SELECT name FROM gyms")
+
+format_as() {
+ xargs --replace={} echo "${1}"
+}
+
+PAGE="
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ body {
+ background-color: #7fa99b;
+ display: flex;
+ flex-direction: column;
+ white-space: pre-wrap;
+ }
+ form {
+ max-width: max-content;
+ }
+ fieldset {
+ align-items: center;
+ background-color: #f1d18a;
+ column-gap: 15px;
+ display: flex;
+ }
+ button, fieldset, input, select {
+ border: 1px solid;
+ }
+ label {
+ align-items: center;
+ column-gap: 15px;
+ display: flex;
+ }
+ p {
+ font-size: 1.5em;
+ margin: 0;
+ }
+ @media screen and (max-width: 980px) {
+ form {
+ min-width: 98vw;
+ }
+ fieldset {
+ align-items: stretch;
+ flex-direction: column;
+ }
+ button, input, label, legend, select {
+ font-size: 4em;
+ border-width: 4px;
+ }
+ label > input {
+ width: 100%;
+ font-size: 1em;
+ }
+ }
+ </style>
+</head>
+<body>
+ <form action='/record'>
+ <fieldset>
+ <legend>New workout</legend>
+ <select id='gym' name='gym'>
+ <option value=''>--Select gym--</option>
+ $(echo "${gyms}" | format_as "<option value='{}'>{}</option>")
+ </select>
+ <label>
+ <p>📅</p>
+ <input type='date' id='date' name='date' required />
+ </label>
+ <button type='submit'>Record</>
+ </fieldset>
+ </form>
+
+ <form action='/exercise' method='post'>
+ <fieldset>
+ <legend>New exercise</legend>
+ <input type='text' name='exercise' placeholder='--Exercise--' required />
+ <button type='submit'>Add</button>
+ </fieldset>
+ </form>
+
+ <form action='/gym' method='post'>
+ <fieldset>
+ <legend>New gym</legend>
+ <input type='text' name='gym' placeholder='--Gym--' required />
+ <button type='submit'>Add</button>
+ </fieldset>
+ </form>
+</body>
+</html>"
+
+echo "HTTP/1.1 200 OK"
+echo "Content-Type: text/html"
+echo "${PAGE}" | sed 's/^[ \t]*//g'