skyview.astronomiemuseum.de/CLAUDE.md

CLAUDE.md — Projektübersicht für KI-Assistenten

Dieses Dokument beschreibt Aufbau, Konventionen und wichtige Regeln für das Projekt Skyview & AstroTools des Astronomiemuseums der Sternwarte Sonneberg. Lies es vollständig, bevor du Änderungen vornimmst.

---

Projektstruktur

/
├── index.html                  # Weiterleitungs-Stub → public/index.php
├── config/
│   ├── database.php            # DB-Zugangsdaten (nicht committen!)
│   └── skyview.sql             # Vollständiges Datenbankschema (MariaDB)
├── public/                     # Web-Root (alle Seiten)
│   ├── header.php              # Gemeinsamer Header (HTML-Kopf + Sternenhimmel + Nav)
│   ├── footer.php              # Gemeinsamer Footer (schließt </main>, </body>, </html>)
│   ├── index.php               # Startseite (öffentlich + eingeloggt)
│   ├── login.php               # Login-Seite
│   ├── logout.php              # Logout (nur Redirect, kein HTML)
│   ├── register.php            # Registrierung
│   ├── settings.php            # Kontoeinstellungen + Standorte (Leaflet-Karte)
│   ├── my_satellites.php       # Satelliten-Merkliste
│   ├── css/
│   │   └── style.css           # EINZIGES Stylesheet — alle Klassen hier
│   └── images/
│       ├── star16x16.png
│       └── star16x16_rays.png
└── scripts/                    # CLI-Skripte (nicht web-seitig)
    ├── getTLE.php
    ├── calculate_pass_predictions.php / .js
    ├── monthprediction.php
    └── import/
        ├── import_celestrak_active.php
        ├── import_hipparcos_csv.php
        ├── import_mpc_comets.php
        └── import_openngc.php

---

Header & Footer

Jede Seite bindet Header und Footer über PHP-Includes ein:

<?php require __DIR__ . '/header.php'; ?>
<!-- Seiteninhalt -->
<?php require __DIR__ . '/footer.php'; ?>

Was header.php macht

• Gibt vollständiges <!DOCTYPE html> bis einschließlich <main><div class="container"> aus
• Rendert den animierten Sternenhimmel (Canvas + JS)
• Rendert den <header> mit Navigation
• Liest die Variable $loggedIn (bool) — diese muss vor dem Include gesetzt sein

$loggedIn setzen

// Eingeloggte Seite (mit Session):
$loggedIn = true;
// oder dynamisch:
$loggedIn = isset($_SESSION['user_id']);

// Öffentliche Seite (Login, Register):
$loggedIn = false;

Die Navigation zeigt je nach Wert unterschiedliche Links:

• false → "Anmelden" + "Registrieren"
• true → "Einstellungen" + "Satelliten" + "Abmelden"

Was footer.php macht

• Schließt </div><!-- /.container -->, </main>, <footer>, </body>, </html>
• Gibt das Copyright-Jahr dynamisch aus

Leaflet CSS (Sonderfall settings.php)

Da header.php den <head> bereits schließt, wird die Leaflet-CSS direkt im Body eingebunden — das ist in HTML5 valide und funktioniert in allen Browsern:

<?php require __DIR__ . '/header.php'; ?>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" ...>

---

CSS — style.css

Alle Styles befinden sich ausschließlich in public/css/style.css. Keine seitenspezifischen Stylesheets anlegen. Neue Klassen immer in die passende thematische Sektion in der style.css einfügen.

Design-Sprache

• Dunkler Weltraum-Hintergrund (--bg: #06080f)
• Gold als Primärfarbe (--gold: #c9a84c, --gold-pale: #f0d990)
• Cyan als Sekundärfarbe (--cyan: #4fc3d8)
• Gedimmter Text für Labels/Hints (--text-dim: #8899bb)
• Abgerundete Ecken überall (--radius: 8px)

CSS-Variablen

--bg, --bg-card, --bg-card2   /* Hintergründe */
--gold, --gold-dim, --gold-pale
--cyan, --cyan-dim
--text, --text-dim
--border                       /* rgba(201, 168, 76, 0.2) */
--radius                       /* 8px */
--max-width                    /* 90vw */

---

Klassen-Referenz

Buttons

Immer .btn als Basis, dann Variante und ggf. Größe kombinieren:

<button class="btn btn-primary">Gold, gefüllt</button>
<button class="btn btn-secondary">Cyan, Outline</button>
<button class="btn btn-danger">Rot, Outline</button>

<!-- Kompakt (z. B. in Tabellen) -->
<button class="btn btn-sm btn-primary">Klein gold</button>
<button class="btn btn-sm btn-secondary">Klein cyan</button>
<button class="btn btn-sm btn-danger">Klein rot</button>

<!-- Volle Breite -->
<button class="btn btn-primary btn-full">Volle Breite</button>

<!-- Zeile von Buttons (z. B. Hero) -->
<div class="btn-row">
    <a href="login.php" class="btn btn-primary">Anmelden</a>
    <a href="register.php" class="btn btn-secondary">Registrieren</a>
</div>

.btn funktioniert sowohl auf <button> als auch auf <a>-Elementen.

Formulare

<!-- Vertikales Formular -->
<form class="form-stack">
    <!-- Einzelnes Feld -->
    <div class="form-group">
        <label for="email">E-Mail <span class="form-optional">(optional)</span></label>
        <input type="email" id="email" name="email">
    </div>

    <!-- Checkbox -->
    <label class="form-checkbox">
        <input type="checkbox" name="opt" value="1">
        Option aktivieren
    </label>

    <button type="submit" class="btn btn-primary btn-full">Speichern</button>
</form>

<!-- Link unter dem Formular -->
<p class="form-footer">Bereits registriert? <a href="login.php">Anmelden</a></p>

Eingabe-Zeile (Suche / Toolbar)

<div class="input-row">
    <input type="text" placeholder="Suchbegriff">
    <button type="submit" class="btn btn-primary">Suchen</button>
    <button type="button" class="btn btn-secondary">Weitere Aktion</button>
</div>

Inputs in .input-row und .form-group teilen dieselben Styles (kein Doppeln).

Nachrichten

<ul class="msg-error">
    <li>Fehlermeldung 1</li>
    <li>Fehlermeldung 2</li>
</ul>

<p class="msg-success">Erfolgreich gespeichert.</p>

Karten

<div class="card">
    <h2>Titel</h2>
    <!-- Inhalt -->
</div>

<h2> innerhalb .card wird automatisch gold + uppercase + mit Trennlinie gestylt.

Tabellen

Eine einzige Klasse .data-table für alle Tabellen:

<!-- Mit thead → vollständige Datentabelle -->
<table class="data-table">
    <thead>
        <tr><th>Name</th><th>Wert</th><th></th></tr>
    </thead>
    <tbody>
        <tr>
            <td>ISS</td>
            <td>25544</td>
            <td class="action-cell">
                <form method="post">
                    <button class="btn btn-sm btn-secondary">Aktion</button>
                </form>
                <form method="post">
                    <button class="btn btn-sm btn-danger">Löschen</button>
                </form>
            </td>
        </tr>
    </tbody>
</table>

<!-- Ohne thead → Key-Value-Tabelle (erste Spalte gedimmt) -->
<table class="data-table">
    <tr><td>Benutzername</td><td>admin</td></tr>
    <tr><td>Rolle</td><td>user</td></tr>
</table>

Aktions-Buttons in Tabellen immer in .action-cell (flex-Zeile).

Grid

<div class="grid-2">
    <div class="card">...</div>
    <div class="card">...</div>
</div>

Bricht automatisch auf eine Spalte um wenn der Platz < 320px pro Spalte wird.

Leaflet-Karte

<div id="map" class="map"></div>

Höhe 380px, volle Breite, abgerundete Ecken, Gold-Border.

Auth-Layout (Login/Register zentriert)

<div class="auth-wrap">
    <div class="card auth-card"> <!-- max-width: 440px -->
        <h2>Anmelden</h2>
        ...
    </div>
</div>

Hinweistext

<p class="hint">Noch kein Standort hinterlegt. <a href="settings.php">Jetzt anlegen</a></p>

---

Datenbankschema

Schema-Datei: config/skyview.sql DB-Konfiguration: config/database.php Engine: MariaDB 10.11, Charset utf8mb4_unicode_ci Datenbankname: d0467f49

Tabellen-Übersicht

Benutzer & Session

Tabelle	Zweck
app_users	Benutzerkonten (username, email, password_hash, display_name, role, is_active)
app_user_locations	Beobachtungsstandorte pro User (lat, lon, elevation, timezone, is_default)
app_user_satellites	Satelliten-Merkliste pro User (is_favorite)

Satelliten

Tabelle	Zweck
sat_satellites	Satelliten-Stammdaten (norad_cat_id, object_name, object_type, active)
sat_tle_current	Aktuellste TLE-Elemente pro Satellit
sat_import_runs	Import-Protokoll (Quelle, Status, Statistiken)
sat_pass_predictions	Berechnete Überflüge (user_id, location_id, satellite_id, aos/los, elevation)

Astronomie

Tabelle	Zweck
star_hipparcos	~118k Sterne aus dem Hipparcos-Katalog (ra, dec, mag, proper, spect)
dso_objects	~14k Deepsky-Objekte aus OpenNGC (NGC, IC, Messier, Typ, ra/dec, Helligkeit)
comets_mpc	~4600 Kometen vom Minor Planet Center (Bahnelemente)
constellations	Sternbilder (ID = 3-Buchstaben-Kürzel, z. B. ORI)
constellation_names	Deutsche + lateinische Namen pro Sternbild
constellation_lines	Verbindungslinien zwischen Sternen
constellation_line_points	Einzelpunkte der Linien (hip_number)
constellation_label_positions	Beschriftungspositionen (ra_hours, dec_degrees)

Geographie

Tabelle	Zweck
geo_places	~167k Ortsnamen mit Koordinaten
geo_places_observatories	~2600 Sternwarten mit Observatory-Code
geo_places_special	Besondere Orte (kategoriebezogen)

Wichtige Zusammenhänge

• app_user_satellites.satellite_id → sat_satellites.id
• app_user_locations.user_id → app_users.id
• sat_pass_predictions verknüpft user, location und satellite
• sat_tle_current.satellite_id → sat_satellites.id (1:1, nur aktuellstes TLE)
• constellation_line_points.hip_number → star_hipparcos.hip

Rollen

• role = 'user' → Standardbenutzer
• role = 'admin' → Administrator
• is_active = 0 → Konto gesperrt / noch nicht freigeschaltet

---

Regeln für Änderungen

1. Kein neues CSS außerhalb von style.css anlegen. Neue Klassen kommen in die thematisch passende Sektion der style.css mit einem beschreibenden Kommentar.

2. Keine seitenspezifischen Button- oder Input-Klassen anlegen. Das .btn-System und .form-group / .input-row decken alle Fälle ab.

3. Jede PHP-Seite bindet header.php und footer.php ein und setzt $loggedIn korrekt vor dem Header-Include.

4. Nachrichten immer mit .msg-error (rot) und .msg-success (grün) darstellen — nie eigene Fehlerstil-Klassen erfinden.

5. Tabellen-Aktions-Buttons gehören in <td class="action-cell"> und nutzen .btn.btn-sm mit der passenden Variante.

6. config/database.php niemals committen — enthält echte Zugangsdaten.

7. logout.php hat kein HTML — nur Session-Destroy + Redirect. Kein Header/Footer.