350 lines
11 KiB
Markdown
350 lines
11 KiB
Markdown
# 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
|
|
<?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
|
|
```php
|
|
// 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:
|
|
```html
|
|
<?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
|
|
```css
|
|
--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:
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<!-- 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)
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<ul class="msg-error">
|
|
<li>Fehlermeldung 1</li>
|
|
<li>Fehlermeldung 2</li>
|
|
</ul>
|
|
|
|
<p class="msg-success">Erfolgreich gespeichert.</p>
|
|
```
|
|
|
|
### Karten
|
|
|
|
```html
|
|
<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:
|
|
|
|
```html
|
|
<!-- 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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<div id="map" class="map"></div>
|
|
```
|
|
|
|
Höhe 380px, volle Breite, abgerundete Ecken, Gold-Border.
|
|
|
|
### Auth-Layout (Login/Register zentriert)
|
|
|
|
```html
|
|
<div class="auth-wrap">
|
|
<div class="card auth-card"> <!-- max-width: 440px -->
|
|
<h2>Anmelden</h2>
|
|
...
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Hinweistext
|
|
|
|
```html
|
|
<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` | Kometen aus MPC `Soft00Cmt.txt` (Fixed-width-Bahnelemente mit Epoche, H/G, Name, Referenz) |
|
|
| `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.
|