Beobachtungsvorschlaege um Objektbilder und Namen erweitern

public/beobachtungsvorschlaege.php

@@ -46,6 +46,15 @@ $_SESSION['observation_csrf'] ??= bin2hex(random_bytes(32));
 .observation-results-table td { vertical-align: top; }
 .observation-results-table small { display: block; color: var(--text-dim); max-width: 22rem; }
 .observation-results-table td:nth-child(n+3) { white-space: nowrap; }
+.observation-object-image { display: block; width: 4rem; height: 4rem; object-fit: cover; border-radius: .3rem; }
+.observation-image-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 900px); max-width: none; max-height: 92vh; margin: 0; padding: 0; border: 1px solid rgba(226,193,93,.55); border-radius: var(--radius); background: linear-gradient(145deg, rgba(34,40,68,.99), rgba(7,10,25,.99) 55%, rgba(24,20,42,.99)); color: var(--text); box-shadow: 0 2px 0 rgba(255,255,255,.12) inset, 0 0 0 1px rgba(0,0,0,.7), 0 18px 0 -10px rgba(200,168,75,.16), 0 34px 0 -18px rgba(200,168,75,.1), 0 35px 95px rgba(0,0,0,.85); animation: observation-dialog-in .22s ease-out; }
+.observation-image-dialog::backdrop { background: rgba(0,0,8,.86); backdrop-filter: blur(5px); }
+.observation-image-dialog-content { position: relative; padding: 3.2rem 1rem 1rem; transform-style: preserve-3d; }
+.observation-image-dialog-title { position: absolute; top: 1rem; left: 1rem; margin: 0; color: var(--gold); font-size: 1rem; }
+.observation-image-dialog-close { position: absolute; top: .55rem; right: .7rem; border: 0; background: transparent; color: var(--text-dim); font-size: 1.8rem; line-height: 1; cursor: pointer; }
+.observation-image-dialog-close:hover { color: var(--gold); }
+.observation-image-dialog-image { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; object-fit: contain; border: 1px solid rgba(226,193,93,.3); border-radius: .35rem; box-shadow: 0 12px 25px rgba(0,0,0,.58), 0 2px 0 rgba(255,255,255,.1) inset; transform: translateZ(12px); }
+@keyframes observation-dialog-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.92) rotateX(4deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateX(0); } }
 .observation-sort { border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; padding: 0.35rem 0; }
 .observation-sort:hover { color: var(--gold); }
 .observation-sort:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@@ -91,18 +100,18 @@ $_SESSION['observation_csrf'] ??= bin2hex(random_bytes(32));
         <section class="card" aria-labelledby="observation-object-title">
             <h2 id="observation-object-title">Eigenschaften der Objekte</h2>
             <fieldset>
-                <legend>Scheinbare Größe – nur Deep Sky (Bogensekunden)</legend>
+                <legend>Scheinbare Größe – nur Deep Sky (Bogenminuten)</legend>
                 <div class="observation-fields">
                     <div class="form-group">
-                        <label for="object-size-min">Minimum (″)</label>
-                        <input type="number" id="object-size-min" name="object_size_min" min="0" step="any" placeholder="Keine Untergrenze" aria-describedby="object-size-help">
+                        <label for="object-size-min">Minimum (′)</label>
+                        <input type="number" id="object-size-min" name="object_size_min" min="0" max="60" step="any" placeholder="Keine Untergrenze" aria-describedby="object-size-help">
                     </div>
                     <div class="form-group">
-                        <label for="object-size-max">Maximum (″)</label>
-                        <input type="number" id="object-size-max" name="object_size_max" min="0" step="any" value="500" placeholder="Keine Obergrenze" aria-describedby="object-size-help">
+                        <label for="object-size-max">Maximum (′)</label>
+                        <input type="number" id="object-size-max" name="object_size_max" min="0" max="60" step="any" value="60" placeholder="Keine Obergrenze" aria-describedby="object-size-help">
                     </div>
                 </div>
-                <p class="observation-help" id="object-size-help">Dieser Filter gilt nur für Galaxien, Sternhaufen und Nebel einschließlich planetarischer Nebel. Verglichen wird die größte Katalogausdehnung. Bei gesetzter Größengrenze werden Deep-Sky-Objekte ohne Größenangabe ausgelassen. 60″ = 1′.</p>
+                <p class="observation-help" id="object-size-help">Dieser Filter gilt nur für Galaxien, Sternhaufen und Nebel einschließlich planetarischer Nebel. Verglichen wird die größte Katalogausdehnung. Bei gesetzter Größengrenze werden Deep-Sky-Objekte ohne Größenangabe ausgelassen. Maximal 60′.</p>
             </fieldset>
             <fieldset>
                 <legend>Helligkeit</legend>
@@ -206,6 +215,7 @@ $_SESSION['observation_csrf'] ??= bin2hex(random_bytes(32));
                 <table class="data-table observation-results-table">
                     <caption>Klick auf eine Überschrift setzt das Hauptkriterium. Umschalt + Klick ergänzt weitere Kriterien; erneuter Klick kehrt die Richtung um. Das nächste Kriterium entscheidet bei gleichen Werten. Fehlende Werte folgen innerhalb der jeweiligen Sortiergruppe am Ende.</caption>
                     <thead><tr>
+                        <th scope="col">Bild</th>
                         <th scope="col"><button type="button" class="observation-sort" data-sort="name">Objekt<span class="observation-sort-indicator" aria-hidden="true">↕</span></button></th>
                         <th scope="col"><button type="button" class="observation-sort" data-sort="type">Typ<span class="observation-sort-indicator" aria-hidden="true">↕</span></button></th>
                         <th scope="col"><button type="button" class="observation-sort" data-sort="magnitude">Helligkeit<span class="observation-sort-indicator" aria-hidden="true">↕</span></button></th>
@@ -228,6 +238,13 @@ $_SESSION['observation_csrf'] ??= bin2hex(random_bytes(32));
     </section>
 </form>
 <form id="observation-display-options"></form>
+<dialog class="observation-image-dialog" id="observation-image-dialog" aria-labelledby="observation-image-dialog-title">
+    <div class="observation-image-dialog-content">
+        <button type="button" class="observation-image-dialog-close" id="observation-image-dialog-close" aria-label="Bildfenster schließen">&times;</button>
+        <h2 class="observation-image-dialog-title" id="observation-image-dialog-title"></h2>
+        <img class="observation-image-dialog-image" id="observation-image-dialog-image" alt="">
+    </div>
+</dialog>
 <script src="js/observation_suggestions.js" defer></script>
 
 <?php require __DIR__ . '/footer.php'; ?>