Landscape orientation, redesigned web UI, rotation on/off + minutes, weather by city name

- Panel is mounted sideways: render landscape (600x400), rotate to the
  panel's native portrait orientation right before writing to hardware.
- Web UI: card-based layout, dark mode, active nav highlighting, save
  confirmation toasts, error banners.
- Rotation: separate enabled/disabled toggle (off pins to the first screen
  in the list) and the interval is now in minutes instead of raw seconds.
  Migrates existing config.json from the old interval_seconds field.
- Weather: type a city name instead of hunting down coordinates, resolved
  via Open-Meteo's free geocoding API. Manual lat/long still available as
  a fallback.

README.md

@@ -45,8 +45,8 @@ can't drive the same panel at once -- but nothing is copied from or reused
 out of it. Safe to re-run.
 
 Then open `http://<pi-ip>:8080`, fill in Navidrome credentials under
-**Navidrome** and coordinates under **Weather**. Everything saves
-immediately and takes effect within a few seconds -- no restart needed.
+**Navidrome** and a city under **Weather**. Everything saves immediately and
+takes effect within a few seconds -- no restart needed.
 
 ## Updating
 

config.py

@@ -17,7 +17,8 @@ DEFAULT_CONFIG_PATH = Path(__file__).resolve().parent / "config.json"
 
 DEFAULT_ROTATION = {
     "screens": ["clock", "weather"],
-    "interval_seconds": 300,
+    "interval_minutes": 5,
+    "enabled": True,
 }
 
 
@@ -35,6 +36,11 @@ class Config:
             data = {}
 
         data.setdefault("rotation", dict(DEFAULT_ROTATION))
+        # Migrate configs written before rotation had minutes/enabled.
+        if "interval_seconds" in data["rotation"] and "interval_minutes" not in data["rotation"]:
+            data["rotation"]["interval_minutes"] = max(1, round(data["rotation"].pop("interval_seconds") / 60))
+        data["rotation"].setdefault("interval_minutes", DEFAULT_ROTATION["interval_minutes"])
+        data["rotation"].setdefault("enabled", DEFAULT_ROTATION["enabled"])
         data.setdefault("navidrome_priority", True)
         data.setdefault("settings", {})
         for screen_id, screen in screens.items():
@@ -72,9 +78,9 @@ class Config:
         with self._lock:
             return dict(self._data["rotation"])
 
-    def set_rotation(self, screens: list[str], interval_seconds: int) -> None:
+    def set_rotation(self, screens: list[str], interval_minutes: int, enabled: bool) -> None:
         with self._lock:
-            self._data["rotation"] = {"screens": screens, "interval_seconds": interval_seconds}
+            self._data["rotation"] = {"screens": screens, "interval_minutes": interval_minutes, "enabled": enabled}
         self.save()
 
     def get_navidrome_priority(self) -> bool:

display/epd4in0e_driver.py

@@ -13,7 +13,11 @@ from display import Display
 
 logger = logging.getLogger(__name__)
 
-RESOLUTION = (400, 600)
+# The panel is physically native portrait (400x600), but mounted sideways --
+# screens render in this landscape resolution, and show() rotates the frame
+# to match the panel's native orientation right before sending it over.
+RESOLUTION = (600, 400)
+PANEL_NATIVE_RESOLUTION = (400, 600)
 
 
 class EPD4in0eDisplay(Display):
@@ -46,7 +50,14 @@ class EPD4in0eDisplay(Display):
         # full flash, there's no way around it on this panel.
         self._epd.Clear()
 
-        self._epd.display(self._epd.getbuffer(image.convert("RGB")))
+        # Rotate landscape -> the panel's native portrait orientation. If this
+        # comes out upside-down for how it's physically mounted, flip the
+        # sign here (rotate(-90) instead of rotate(90)).
+        rotated = image.convert("RGB").rotate(90, expand=True)
+        if rotated.size != PANEL_NATIVE_RESOLUTION:
+            raise ValueError(f"Rotated image {rotated.size} doesn't match panel {PANEL_NATIVE_RESOLUTION}")
+
+        self._epd.display(self._epd.getbuffer(rotated))
 
     def sleep(self) -> None:
         if self._epd is not None:

scheduler.py

@@ -161,9 +161,14 @@ class Scheduler:
             screen_ids = list(self.screens.keys())
 
         now = time.time()
-        if now - self._rotation_switched_at >= rotation["interval_seconds"]:
-            self._rotation_index = (self._rotation_index + 1) % len(screen_ids)
-            self._rotation_switched_at = now
+        # With rotation disabled, just pin to whatever's currently selected --
+        # never auto-advance. (Manual "show this screen now" still works via
+        # request_switch(); it just won't stick past the next tick.)
+        if rotation.get("enabled", True):
+            interval_seconds = rotation["interval_minutes"] * 60
+            if now - self._rotation_switched_at >= interval_seconds:
+                self._rotation_index = (self._rotation_index + 1) % len(screen_ids)
+                self._rotation_switched_at = now
 
         screen_id = screen_ids[self._rotation_index % len(screen_ids)]
         cache = self._caches[screen_id]

screens/weather.py

@@ -11,6 +11,7 @@ from screens.render_utils import load_font, text_width
 logger = logging.getLogger(__name__)
 
 HTTP_TIMEOUT = 10
+GEOCODE_URL = "https://geocoding-api.open-meteo.com/v1/search"
 
 # WMO weather codes -> (German description, symbol). Not exhaustive, covers
 # the common cases; unmapped codes fall back to a generic description.
@@ -47,7 +48,29 @@ class WeatherScreen(Screen):
     poll_interval = 1800  # 30 minutes -- weather doesn't need to be fresher
 
     def default_settings(self) -> dict:
-        return {"latitude": None, "longitude": None}
+        return {"city": "", "latitude": None, "longitude": None}
+
+    def geocode(self, city: str):
+        """Resolve a city name to coordinates via Open-Meteo's free geocoding
+        API (no key needed). Returns {"latitude", "longitude", "label"} or
+        None if nothing matched."""
+        response = requests.get(
+            GEOCODE_URL,
+            params={"name": city, "count": 1, "language": "de"},
+            timeout=HTTP_TIMEOUT,
+        )
+        response.raise_for_status()
+        results = response.json().get("results") or []
+        if not results:
+            return None
+
+        top = results[0]
+        label_parts = [top.get("name"), top.get("admin1"), top.get("country")]
+        return {
+            "latitude": top["latitude"],
+            "longitude": top["longitude"],
+            "label": ", ".join(p for p in label_parts if p),
+        }
 
     def check(self, settings: dict):
         lat = settings.get("latitude")

web/app.py

@@ -1,5 +1,6 @@
 """Flask app: status/preview page + one settings form per screen + rotation settings."""
 
+import requests
 from flask import Flask, redirect, render_template, request, url_for
 
 
@@ -42,30 +43,51 @@ def create_app(config, screens: dict, scheduler) -> Flask:
                 "boost_cover": "boost_cover" in request.form,
                 "grayscale_cover": "grayscale_cover" in request.form,
             })
-            return redirect(url_for("settings_navidrome"))
+            return redirect(url_for("settings_navidrome", saved=1))
         return render_template("settings_navidrome.html", settings=config.get_screen_settings("navidrome"))
 
     @app.route("/settings/weather", methods=["GET", "POST"])
     def settings_weather():
+        error = None
         if request.method == "POST":
-            lat = request.form.get("latitude", "").strip()
-            lon = request.form.get("longitude", "").strip()
-            config.update_screen_settings("weather", {
-                "latitude": float(lat) if lat else None,
-                "longitude": float(lon) if lon else None,
-            })
-            return redirect(url_for("settings_weather"))
-        return render_template("settings_weather.html", settings=config.get_screen_settings("weather"))
+            city = request.form.get("city", "").strip()
+            lat_raw = request.form.get("latitude", "").strip()
+            lon_raw = request.form.get("longitude", "").strip()
+
+            if city:
+                try:
+                    result = screens["weather"].geocode(city)
+                except requests.exceptions.RequestException:
+                    result = None
+                if result is None:
+                    error = f'Could not find "{city}" -- try a different spelling, or fill in coordinates manually below instead.'
+                else:
+                    config.update_screen_settings("weather", {
+                        "city": result["label"],
+                        "latitude": result["latitude"],
+                        "longitude": result["longitude"],
+                    })
+                    return redirect(url_for("settings_weather", saved=1))
+            else:
+                config.update_screen_settings("weather", {
+                    "city": "",
+                    "latitude": float(lat_raw) if lat_raw else None,
+                    "longitude": float(lon_raw) if lon_raw else None,
+                })
+                return redirect(url_for("settings_weather", saved=1))
+
+        return render_template("settings_weather.html", settings=config.get_screen_settings("weather"), error=error)
 
     @app.route("/settings/rotation", methods=["GET", "POST"])
     def settings_rotation():
         if request.method == "POST":
             raw = request.form.get("screens", "")
             selected = [s.strip() for s in raw.split(",") if s.strip() in screens]
-            interval = int(request.form.get("interval_seconds", 300) or 300)
-            config.set_rotation(selected, interval)
+            interval_minutes = int(request.form.get("interval_minutes", 5) or 5)
+            enabled = "rotation_enabled" in request.form
+            config.set_rotation(selected, interval_minutes, enabled)
             config.set_navidrome_priority("navidrome_priority" in request.form)
-            return redirect(url_for("settings_rotation"))
+            return redirect(url_for("settings_rotation", saved=1))
         return render_template(
             "settings_rotation.html",
             screens=screens,

web/templates/base.html

@@ -2,37 +2,208 @@
 <html lang="de">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Paperwall</title>
   <style>
-    body { font-family: system-ui, sans-serif; max-width: 640px; margin: 2rem auto; padding: 0 1rem; color: #222; }
-    .brand { font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; }
-    nav { display: flex; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.9rem; }
-    nav a { color: #444; text-decoration: none; }
-    nav a:hover { text-decoration: underline; }
-    h1 { font-size: 1.3rem; }
-    .field { margin-bottom: 1rem; }
-    label { display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.9rem; }
-    input[type=text], input[type=password], input[type=number] {
-      width: 100%; padding: 0.5rem; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;
+    :root {
+      --bg: #f6f6f4;
+      --surface: #ffffff;
+      --border: #e3e3e0;
+      --text: #1a1a1a;
+      --text-muted: #6b6b68;
+      --accent: #1a1a1a;
+      --accent-contrast: #ffffff;
+      --success: #1a7a3d;
+      --danger: #b3261e;
+      --radius: 12px;
+      --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);
     }
-    .checkbox { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; margin-bottom: 0.5rem; }
-    .checkbox input { width: auto; }
-    button { padding: 0.5rem 1rem; border: 0; border-radius: 4px; background: #222; color: white; cursor: pointer; }
-    button.secondary { background: #eee; color: #222; }
-    .preview { border: 1px solid #ccc; max-width: 100%; }
-    .status-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.9rem; margin: 1rem 0; }
-    .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #121212;
+        --surface: #1c1c1c;
+        --border: #2f2f2f;
+        --text: #f2f2f0;
+        --text-muted: #9a9a97;
+        --accent: #f2f2f0;
+        --accent-contrast: #121212;
+        --success: #3fb26f;
+        --danger: #e4685a;
+        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
+      }
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      margin: 0;
+      padding: 2.5rem 1.25rem 4rem;
+      line-height: 1.5;
+    }
+
+    .wrap { max-width: 640px; margin: 0 auto; }
+
+    .brand {
+      font-weight: 700;
+      font-size: 1.15rem;
+      letter-spacing: -0.01em;
+      margin-bottom: 1.5rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .brand .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text); }
+
+    nav {
+      display: flex;
+      gap: 0.15rem;
+      margin-bottom: 2rem;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      padding: 0.25rem;
+      width: fit-content;
+      max-width: 100%;
+      overflow-x: auto;
+    }
+    nav a {
+      color: var(--text-muted);
+      text-decoration: none;
+      font-size: 0.85rem;
+      font-weight: 500;
+      white-space: nowrap;
+      padding: 0.45rem 0.9rem;
+      border-radius: 999px;
+      transition: background 0.15s, color 0.15s;
+    }
+    nav a:hover { color: var(--text); }
+    nav a.active { background: var(--accent); color: var(--accent-contrast); }
+
+    h1 { font-size: 1.4rem; margin: 0 0 1.25rem; letter-spacing: -0.01em; }
+
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.5rem;
+      margin-bottom: 1.25rem;
+      box-shadow: var(--shadow);
+    }
+
+    .section-label {
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-size: 0.72rem;
+      font-weight: 600;
+      color: var(--text-muted);
+      margin: 0 0 0.85rem;
+    }
+
+    .field { margin-bottom: 1.1rem; }
+    .field:last-child { margin-bottom: 0; }
+    label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.85rem; }
+    .hint { font-size: 0.78rem; color: var(--text-muted); margin: 0.35rem 0 0; }
+
+    input[type=text], input[type=password], input[type=number] {
+      width: 100%;
+      padding: 0.6rem 0.7rem;
+      font-size: 0.95rem;
+      font-family: inherit;
+      background: var(--bg);
+      color: var(--text);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      transition: border-color 0.15s;
+    }
+    input:focus { outline: none; border-color: var(--text); }
+
+    .checkbox {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      font-weight: 400;
+      font-size: 0.9rem;
+      margin-bottom: 0.6rem;
+      cursor: pointer;
+    }
+    .checkbox:last-child { margin-bottom: 0; }
+    .checkbox input { width: 1.05rem; height: 1.05rem; accent-color: var(--text); cursor: pointer; }
+
+    button {
+      padding: 0.6rem 1.1rem;
+      border: 0;
+      border-radius: 8px;
+      background: var(--accent);
+      color: var(--accent-contrast);
+      font-size: 0.88rem;
+      font-weight: 600;
+      font-family: inherit;
+      cursor: pointer;
+      transition: opacity 0.15s;
+    }
+    button:hover { opacity: 0.85; }
+    button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
+
+    .preview-wrap {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 1rem;
+      display: flex;
+      justify-content: center;
+    }
+    .preview { max-width: 100%; border-radius: 4px; display: block; }
+
+    .status-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.25rem; font-size: 0.88rem; margin: 0; }
+    .status-grid dt { color: var(--text-muted); }
+    .status-grid dd { margin: 0; font-weight: 500; }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      padding: 0.2rem 0.55rem;
+      border-radius: 999px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+    }
+    .badge.on { color: var(--success); }
+    .badge.off { color: var(--text-muted); }
+
+    .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
     form.inline { display: inline; }
+
+    .toast {
+      background: var(--success);
+      color: white;
+      padding: 0.65rem 1rem;
+      border-radius: 8px;
+      font-size: 0.85rem;
+      font-weight: 500;
+      margin-bottom: 1.25rem;
+    }
+    .toast.error { background: var(--danger); }
   </style>
 </head>
 <body>
-  <div class="brand">Paperwall</div>
-  <nav>
-    <a href="{{ url_for('index') }}">Status</a>
-    <a href="{{ url_for('settings_navidrome') }}">Navidrome</a>
-    <a href="{{ url_for('settings_weather') }}">Weather</a>
-    <a href="{{ url_for('settings_rotation') }}">Rotation</a>
-  </nav>
-  {% block content %}{% endblock %}
+  <div class="wrap">
+    <div class="brand"><span class="dot"></span> Paperwall</div>
+    <nav>
+      <a href="{{ url_for('index') }}" class="{{ 'active' if request.endpoint == 'index' }}">Status</a>
+      <a href="{{ url_for('settings_navidrome') }}" class="{{ 'active' if request.endpoint == 'settings_navidrome' }}">Navidrome</a>
+      <a href="{{ url_for('settings_weather') }}" class="{{ 'active' if request.endpoint == 'settings_weather' }}">Weather</a>
+      <a href="{{ url_for('settings_rotation') }}" class="{{ 'active' if request.endpoint == 'settings_rotation' }}">Rotation</a>
+    </nav>
+    {% if request.args.get('saved') %}
+    <div class="toast">Saved.</div>
+    {% endif %}
+    {% block content %}{% endblock %}
+  </div>
 </body>
 </html>

web/templates/index.html

@@ -2,24 +2,40 @@
 {% block content %}
 <h1>Status</h1>
 
-<img class="preview" src="{{ url_for('static', filename='preview.png') }}?t={{ status.last_render_at }}" alt="preview">
-
-<div class="status-grid">
-  <div>Current screen</div><div>{{ status.current_screen or "-" }}</div>
-  <div>Last render</div><div>{{ status.last_render_at or "-" }}</div>
-  <div>Last panel write</div><div>{{ status.last_display_write_at or "-" }}</div>
-  <div>Navidrome priority</div><div>{{ "on" if navidrome_priority else "off" }}</div>
-  <div>Rotation</div><div>{{ rotation.screens | join(" → ") }} (every {{ rotation.interval_seconds }}s)</div>
+<div class="card">
+  <div class="section-label">Preview</div>
+  <div class="preview-wrap">
+    <img class="preview" src="{{ url_for('static', filename='preview.png') }}?t={{ status.last_render_at }}" alt="preview">
+  </div>
 </div>
 
-<div class="actions">
-  <form class="inline" method="post" action="{{ url_for('refresh_now') }}">
-    <button type="submit">Refresh now</button>
-  </form>
-  {% for screen_id, screen in screens.items() %}
-  <form class="inline" method="post" action="{{ url_for('switch_now', screen_id=screen_id) }}">
-    <button class="secondary" type="submit">Show {{ screen.display_name }}</button>
-  </form>
-  {% endfor %}
+<div class="card">
+  <div class="section-label">Overview</div>
+  <dl class="status-grid">
+    <dt>Current screen</dt><dd>{{ status.current_screen or "-" }}</dd>
+    <dt>Last render</dt><dd>{{ status.last_render_at or "-" }}</dd>
+    <dt>Last panel write</dt><dd>{{ status.last_display_write_at or "-" }}</dd>
+    <dt>Navidrome priority</dt>
+    <dd><span class="badge {{ 'on' if navidrome_priority else 'off' }}">{{ "on" if navidrome_priority else "off" }}</span></dd>
+    <dt>Rotation</dt>
+    <dd>
+      <span class="badge {{ 'on' if rotation.enabled else 'off' }}">{{ "on" if rotation.enabled else "off" }}</span>
+      {{ rotation.screens | join(" → ") }} (every {{ rotation.interval_minutes }} min)
+    </dd>
+  </dl>
+</div>
+
+<div class="card">
+  <div class="section-label">Actions</div>
+  <div class="actions">
+    <form class="inline" method="post" action="{{ url_for('refresh_now') }}">
+      <button type="submit">Refresh now</button>
+    </form>
+    {% for screen_id, screen in screens.items() %}
+    <form class="inline" method="post" action="{{ url_for('switch_now', screen_id=screen_id) }}">
+      <button class="secondary" type="submit">Show {{ screen.display_name }}</button>
+    </form>
+    {% endfor %}
+  </div>
 </div>
 {% endblock %}

web/templates/settings_navidrome.html

@@ -2,32 +2,36 @@
 {% block content %}
 <h1>Navidrome</h1>
 <form method="post">
-  <div class="field">
-    <label for="url">Server URL</label>
-    <input type="text" id="url" name="url" value="{{ settings.url or '' }}" placeholder="https://music.example.com">
-  </div>
-  <div class="field">
-    <label for="username">Username</label>
-    <input type="text" id="username" name="username" value="{{ settings.username or '' }}">
-  </div>
-  <div class="field">
-    <label for="password">Password</label>
-    <input type="password" id="password" name="password" value="{{ settings.password or '' }}">
-  </div>
-  <div class="field">
-    <label for="filter_user">Only show this listener (optional)</label>
-    <input type="text" id="filter_user" name="filter_user" value="{{ settings.filter_user or '' }}">
+  <div class="card">
+    <div class="section-label">Connection</div>
+    <div class="field">
+      <label for="url">Server URL</label>
+      <input type="text" id="url" name="url" value="{{ settings.url or '' }}" placeholder="https://music.example.com">
+    </div>
+    <div class="field">
+      <label for="username">Username</label>
+      <input type="text" id="username" name="username" value="{{ settings.username or '' }}">
+    </div>
+    <div class="field">
+      <label for="password">Password</label>
+      <input type="password" id="password" name="password" value="{{ settings.password or '' }}">
+    </div>
+    <div class="field">
+      <label for="filter_user">Only show this listener (optional)</label>
+      <input type="text" id="filter_user" name="filter_user" value="{{ settings.filter_user or '' }}">
+      <p class="hint">Leave empty to show whoever is playing.</p>
+    </div>
   </div>
 
-  <div class="field">
-    <label>Display options</label>
+  <div class="card">
+    <div class="section-label">Display options</div>
     <label class="checkbox"><input type="checkbox" name="show_progress" {{ "checked" if settings.show_progress }}> Progress bar and times</label>
     <label class="checkbox"><input type="checkbox" name="show_genre" {{ "checked" if settings.show_genre }}> Genre</label>
     <label class="checkbox"><input type="checkbox" name="show_source" {{ "checked" if settings.show_source }}> Player and listener name</label>
   </div>
 
-  <div class="field">
-    <label>Cover art</label>
+  <div class="card">
+    <div class="section-label">Cover art</div>
     <label class="checkbox"><input type="checkbox" name="boost_cover" {{ "checked" if settings.boost_cover }}> Boost contrast for e-ink</label>
     <label class="checkbox"><input type="checkbox" name="grayscale_cover" {{ "checked" if settings.grayscale_cover }}> Force grayscale</label>
   </div>

web/templates/settings_rotation.html

@@ -3,25 +3,35 @@
 <h1>Rotation</h1>
 
 <form method="post">
-  <div class="field">
-    <label>Navidrome takes over when music plays</label>
+  <div class="card">
+    <div class="section-label">Priority</div>
     <label class="checkbox">
       <input type="checkbox" name="navidrome_priority" {{ "checked" if navidrome_priority }}>
-      Show Navidrome immediately whenever something is playing, regardless of rotation
+      Navidrome takes over immediately whenever something is playing, regardless of rotation
     </label>
   </div>
 
-  <div class="field">
-    <label for="screens">Rotation order (used when Navidrome isn't playing, or if priority is off)</label>
-    <input type="text" id="screens" name="screens" value="{{ rotation.screens | join(', ') }}" placeholder="clock, weather">
-    <p style="font-size:0.8rem;color:#666">
-      Comma-separated, in order. Available: {{ screens.keys() | join(', ') }}.
+  <div class="card">
+    <div class="section-label">Rotation</div>
+    <label class="checkbox">
+      <input type="checkbox" name="rotation_enabled" {{ "checked" if rotation.enabled }}>
+      Enabled -- cycle through the screens below on a timer
+    </label>
+    <p class="hint" style="margin: 0.6rem 0 1.1rem;">
+      Off just pins to the first screen in the order below (still shown when
+      Navidrome priority is on but nothing's playing). "Show X now" buttons on
+      the Status page still work either way, they just don't stick past the
+      next check.
     </p>
-  </div>
-
-  <div class="field">
-    <label for="interval_seconds">Rotation interval (seconds)</label>
-    <input type="number" id="interval_seconds" name="interval_seconds" value="{{ rotation.interval_seconds }}" min="10">
+    <div class="field">
+      <label for="screens">Order</label>
+      <input type="text" id="screens" name="screens" value="{{ rotation.screens | join(', ') }}" placeholder="clock, weather">
+      <p class="hint">Comma-separated, in order. Available: {{ screens.keys() | join(', ') }}.</p>
+    </div>
+    <div class="field">
+      <label for="interval_minutes">Switch every (minutes)</label>
+      <input type="number" id="interval_minutes" name="interval_minutes" value="{{ rotation.interval_minutes }}" min="1">
+    </div>
   </div>
 
   <button type="submit">Save</button>

web/templates/settings_weather.html

@@ -1,16 +1,37 @@
 {% extends "base.html" %}
 {% block content %}
 <h1>Weather</h1>
-<p style="font-size:0.85rem;color:#666">Uses Open-Meteo (no API key needed) &mdash; just the coordinates for your location.</p>
+
+{% if error %}
+<div class="toast error">{{ error }}</div>
+{% endif %}
+
 <form method="post">
-  <div class="field">
-    <label for="latitude">Latitude</label>
-    <input type="text" id="latitude" name="latitude" value="{{ settings.latitude if settings.latitude is not none else '' }}" placeholder="e.g. 52.52">
+  <div class="card">
+    <div class="section-label">Location</div>
+    <p class="hint" style="margin: -0.25rem 0 1rem;">Uses Open-Meteo &mdash; no API key needed.</p>
+    <div class="field">
+      <label for="city">City</label>
+      <input type="text" id="city" name="city" placeholder="e.g. Berlin">
+      {% if settings.city %}
+      <p class="hint">Currently: {{ settings.city }} ({{ settings.latitude }}, {{ settings.longitude }})</p>
+      {% endif %}
+    </div>
   </div>
-  <div class="field">
-    <label for="longitude">Longitude</label>
-    <input type="text" id="longitude" name="longitude" value="{{ settings.longitude if settings.longitude is not none else '' }}" placeholder="e.g. 13.40">
+
+  <div class="card">
+    <div class="section-label">Or enter coordinates manually</div>
+    <p class="hint" style="margin: -0.25rem 0 1rem;">Leave the city field above empty to use these instead.</p>
+    <div class="field">
+      <label for="latitude">Latitude</label>
+      <input type="text" id="latitude" name="latitude" value="{{ settings.latitude if settings.latitude is not none else '' }}" placeholder="e.g. 52.52">
+    </div>
+    <div class="field">
+      <label for="longitude">Longitude</label>
+      <input type="text" id="longitude" name="longitude" value="{{ settings.longitude if settings.longitude is not none else '' }}" placeholder="e.g. 13.40">
+    </div>
   </div>
+
   <button type="submit">Save</button>
 </form>
 {% endblock %}