Warstwa prezentacji: widok horoskopu do ręcznego testowania

Strona główna "/" = formularz podstawowych danych momentu (data, godzina,
strefa, opcjonalnie lokalizacja) → tabela policzonych pozycji w formie
human-readable (znak, pozycja w znaku, absolutna, kierunek, prędkość).
Woła logic /chart/positions; przelicza czas lokalny + offset na UTC.
Przycisk "Tu i teraz" uzupełnia bieżącą datę/godzinę i strefę przeglądarki.
Retrogradacja wyróżniona w tabeli.

Wyszukiwarkę sygnifikatorów przeniesiono pod "/significants" -> /significators,
dodano nawigację (base.html). Czytelny komunikat, gdy logika nie ma jeszcze
endpointu silnika.

Zweryfikowano end-to-end: formularz → przeliczenie UTC → render tabeli
(przez stub kontraktu /chart/positions).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

services/presentation/app/templates/chart.html

@@ -0,0 +1,79 @@
+{% extends "base.html" %}
+{% block title %}Horoskop{% endblock %}
+{% block nav_chart %}active{% endblock %}
+
+{% block content %}
+<p class="sub">Wpisz podstawowe dane momentu — program policzy pozycje obiektów (silnik efemeryd warstwy logicznej).</p>
+
+<form method="post" action="/">
+  <div class="grid">
+    <label>Data
+      <input type="date" name="date" value="{{ form.date or '' }}" required>
+    </label>
+    <label>Godzina (lokalna)
+      <input type="time" name="time" value="{{ form.time or '' }}" required>
+    </label>
+    <label>Strefa (offset h)
+      <input type="number" name="tz_offset" step="0.25" value="{{ form.tz_offset if form.tz_offset is not none else 0 }}">
+    </label>
+  </div>
+  <details class="loc">
+    <summary>Lokalizacja (opcjonalnie — przyda się później do osi i domów)</summary>
+    <div class="grid">
+      <label>Szerokość (lat)
+        <input type="number" name="lat" step="0.0001" value="{{ form.lat if form.lat is not none else 0 }}">
+      </label>
+      <label>Długość (lon, + na wschód)
+        <input type="number" name="lon" step="0.0001" value="{{ form.lon if form.lon is not none else 0 }}">
+      </label>
+    </div>
+  </details>
+  <div class="actions">
+    <button type="button" id="nowBtn" class="ghost">Tu i teraz</button>
+    <button type="submit">Policz pozycje</button>
+  </div>
+</form>
+
+{% if error %}
+  <div class="error">{{ error }}</div>
+{% endif %}
+
+{% if result %}
+  <div class="meta">
+    Silnik: <strong>{{ result.engine }}</strong> ·
+    obiektów: {{ result.positions | length }}
+    {% if moment %}· moment: {{ moment }}{% endif %}
+  </div>
+  <table>
+    <thead>
+      <tr>
+        <th>Obiekt</th><th>Znak</th><th>W znaku</th><th>Absolutna</th><th>Kier.</th><th>Prędkość °/d</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for p in result.positions %}
+        <tr>
+          <td>{{ p.name }}</td>
+          <td>{{ p.sign }}</td>
+          <td class="mono">{{ p.in_sign }}</td>
+          <td class="mono">{{ p.absolute }}</td>
+          <td class="{{ 'retro' if p.direction == 'Rx' else '' }}">{{ p.direction }}</td>
+          <td class="mono">{{ '%+.4f' | format(p.speed) }}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endif %}
+
+<script>
+  // „Tu i teraz": uzupełnia datę/godzinę bieżącą i offset lokalny przeglądarki.
+  document.getElementById('nowBtn').addEventListener('click', function () {
+    const d = new Date();
+    const pad = n => String(n).padStart(2, '0');
+    document.querySelector('input[name=date]').value =
+      d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
+    document.querySelector('input[name=time]').value = pad(d.getHours()) + ':' + pad(d.getMinutes());
+    document.querySelector('input[name=tz_offset]').value = (-d.getTimezoneOffset() / 60);
+  });
+</script>
+{% endblock %}