https://ute-gerhardt.de/exoplaneten_ki.html

1<!DOCTYPE html>
2<html>
3<head>
4	<title>Exoplaneten-Suchmaschine – Exoplaneten-KI</title>
5	<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
7	<meta charset="UTF-8">
8	<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
9	<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
10	<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
11	<link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
12	<link rel="manifest" href="assets/site.webmanifest">
13	<meta name="format-detection" content="telephone=no">
14	<meta name="format-detection" content="date=no">
15	<link rel="preload" as="image" href="assets/sfcmd.png">
16	<link rel="stylesheet" type="text/css" href="assets/tricorder.css?v=20260917_2">
17	<link rel="stylesheet" type="text/css" href="assets/astro.css?v=20260917_1">
18	

18<script type="text/javascript" src="assets/exo_script.js?v=20260917_1"></script>

18
19	

19<script type="text/javascript" src="/assets/exo_glossary.js?v=20260917_1"></script>

19
20</head>
21<body>
22</div>
23	<audio id="audio5" src="assets/picard-key.mp3" preload="auto"></audio>
24	<audio id="audio1" src="assets/beep1.mp3" preload="auto"></audio>
25	<audio id="audio2" src="assets/beep2.mp3" preload="auto"></audio>
26	<audio id="audio3" src="assets/beep3.mp3" preload="auto"></audio>
27	<audio id="audio4" src="assets/beep4.mp3" preload="auto"></audio>
28	<audio id="audio7" src="assets/beep25.mp3" preload="auto"></audio>
29	<audio id="audio6" src="assets/transporter.mp3" preload="auto"></audio>
30	<div class="top-wrapper">
31		<div class="top-display">
32			<div class="top-display-left">
33				<nav id="primary-nav">
34					<!--div class="button-4-wrapper"-->
35					<button onclick="window.location.href=('index.html')">01-Home</button>
36					<!--/div-->
37					<button onclick="playSoundAndRedirect('audio6', 'https://www.esa.int/Science_Exploration/Space_Science/Exoplanets')">02-ESA</button>
38					<button onclick="playSoundAndRedirect('audio6', 'https://science.nasa.gov/exoplanets/exoplanet-catalog/')">03-NASA</button>
39					<button onclick="playSoundAndRedirect('audio6', 'https://www.asc-csa.gc.ca/eng/astronomy/beyond-our-solar-system/exoplanet-zoo.asp')">04-CSA</button>
40					<div class="button-4-wrapper"></div>
41				</nav>
42			</div>
43			<div class="top-display-right">
44				
45				<!-- Header & Logo -->
46				<div id="glossaryPanel" style="display:flex; width:98%; box-sizing:border-box; gap:16px; margin-top:1px; align-items:flex-start;">
47
48					<!-- Linke Spalte: Logo -->
49					<div style="flex:0 0 auto; align-self:center;">
50						<img src="assets/stsearch.png" class="sfc" alt="Exoplaneten-Suchmaschine" title="Exoplaneten-Suchmaschine">
51					</div>
52
53					<!-- Rechte Spalte: Hinweis, Suchfeld, Ergebnisse -->
54					<div style="flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px;">
55
56						<!-- Einzeiliges Suchfeld -->
57						<input type="text"
58							id="glossarySearchInput"
59							class="lcars-input"
60							placeholder="Glossar durchsuchen: Feldnamen oder Suchbegriff eingeben (z.B. 'Insolation', 'TSM', 'Masse') ..."
61							style="width:100%; padding:8px; font-size:0.85rem; box-sizing:border-box;"
62							oninput="renderGlossaryResults(this.value)">
63
64						<!-- Ergebnisliste: immer sichtbar, scrollbar, feste Höhe -->
65						<div id="glossaryResults"
66							style="height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
67									border:0px solid #2a6f9c; border-radius:6px; padding:8px; box-sizing:border-box;">
68						</div>
69
70					</div>
71
72				</div>
73				<!-- Ende Header & Logo -->
74
75			</div>			
76		</div>
77		<div class="top-display-bottom">
78			<div class="bar-elbow"></div>
79			<div class="bar-1"></div>
80			<div class="bar-2"></div>
81			<div class="bar-3"></div>
82			<div class="bar-4"></div>
83			<div class="bar-5"></div>		
84		</div>
85	</div> <!-- / top-wrapper -->
86	<div class="spacer">
87		<div class="space-sidebar"></div>
88		<div class="space-1"></div>
89		<div class="space-2"></div>
90		<div class="space-3"></div>
91		<div class="space-4"></div>
92	</div>
93	<div class="bottom-wrapper">
94		<div class="left-frame">
95			<button onclick="topFunction(); playSound()" id="topBtn"><span class="hop">screen</span> top</button>			
96			<div>
97				<button onclick="playSound('audio2')" class="panel-3">03-9168</button>
98				<div class="sidebar-cluster">
99					<div id="cluster-alpha">
100						<div class="panel-4-sister"> </div>
101					</div>
102					<div id="cluster-beta">
103						<button class="panel-4" onclick="playSound('audio2')">LIBRARY ACCESS</button>
104						<div class="keypad">
105							<div class="key-column"></div>
106							<button class="keypad-button" type="button" onclick="window.open('https://exoplanet.ipac.caltech.edu/docs/API_PS_columns.html', '_blank', 'noopener, noreferrer')">05-DB-Doku</button>
107							<div class="key-column"></div>
108							<button class="keypad-button" type="button" onclick="window.open('https://www.exoplanetatlas.com/', '_blank', 'noopener, noreferrer')">06-ExoplanetAtlas</button>
109							<div class="key-column"></div>
110							<button class="keypad-button" type="button" onclick="window.open('https://www.stellarcatalog.com/exoplanets.php?list=2', '_blank', 'noopener, noreferrer')">07-StellarCatalog</button>
111							<!-- /long buttons -->
112							<div class="key-column"></div>
113							<div class="keypad-button-spacer-bottom"></div>					
114						</div>
115						<div class="panel-6"> </div>
116					</div> <!-- cluster-beta -->
117				</div> <!-- / sidebar-cluster -->
118				<div class="panel-7">
119					<div class="three-squares-wrapper">
120						<div class="three-squares"></div>
121						<div class="three-squares"></div>
122						<div class="three-squares"></div>
123					</div>
124					<div class="panel-7-text">
125						07<span class="hide-720">-9148</span>
126					</div>					
127				</div>
128			</div>
129			<div>
130				<button onclick="playSound('audio2')" class="panel-8">08<span class="hop">-091966</span></button>
131			</div>
132		</div>
133		<div class="right-frame">
134			<div class="bar-runner">
135				<div class="bar-6"></div>
136				<div class="bar-7"></div>
137				<div class="bar-8"></div>
138				<div class="bar-9"></div>
139				<div class="bar-10"></div>
140			</div>
141			<div class="garnish"></div>
142			
143			<main>
144				<div class="main-top-border-cut"> </div>
145
146					<h2 class="uppercase">Exoplaneten-KI</h2>
147					<label>Datenquelle: <a href="https://exoplanetarchive.ipac.caltech.edu/" target="_blank">NASA Exoplanet Archive - TAP / Planetary Systems</a> (lokaler Klon, wöchentl. Update)</label>
148					<span id="exoLastSyncedLabel" style="display: block; font-size: 0.7rem; color: #a8c8e8; font-style: italic; margin-top: 2px;">Datenstand wird geladen …</span><BR>
149
150			<div class="lcars-nav-container" style="flex-direction: column; align-items: stretch; gap: 12px; margin-top: 15px; padding: 15px; background: rgba(10, 22, 40, 0.9); border: 2px solid #2a6f9c; border-radius: 8px;">
151
152					<span style="width: 98%; display:block; margin-top:4px; color:#a8c8e8; font-size:0.8rem; text-align:left;">Fragestellung zu komplex und Zeit zu knapp für ein kleinteiliges Formular? Frag die KI! (Gemini 3.8 Flash -- Fallbacks: 3.7 / 3.6 / 3.5)<BR>Sie ist an dieselbe Datenbank gebunden wie das <a href="index.html">Formular</a>.<BR><BR>
153					Beispiel:<BR>"Zeig mir alle Exoplaneten mit weniger als 5 Tagen Umlaufzeit und über 1 Jupitermasse, deren Mutterstern eine Metallizität von unter -0.5 hat. Nenne mir Namen, Masse, Umlaufzeit und Fe/H-Wert."<BR>oder<BR>"Warum gibt es in unserem Sonnensystem keine Supererde, obwohl das eine der häufigsten Planetenarten ist?"</span><BR><BR>
154

155					<div id="computer-log" class="ki-antwort-container" style="width: 98%"></div>
156					<textarea id="computer-input" style="width: 100%; height: 150px;" maxlength="500" placeholder="Computer, nenne mir ..."></textarea>
157					<div id="char-count">0 von 500 möglichen Zeichen verbraucht</div>
158
159					

159<script>
160					const input = document.getElementById("computer-input");
161					const counter = document.getElementById("char-count");
162
163					input.addEventListener("input", () => {
164						counter.textContent = `${input.value.length} / 500 Zeichen`;
165					});
166					</script>

166
167
168					<button class="lcars-button" onclick="askTheComputer()">Computer fragen</button>
169
170					

170<script>
171					function planetLookupSetLoading(resultId, isLoading, message) {
172						const el = document.getElementById(resultId);
173						if (!el) return;
174						if (isLoading) {
175							el.innerHTML =
176								'<div style="color:#a8c8e8; font-size:0.8rem; padding:8px 0;">' +
177								"⏳ " + (message || "Datenbank-Abfrage läuft ...") +
178								"</div>";
179						}
180					}
181
182					async function askTheComputer() {
183						const input = document.getElementById('computer-input');
184						const log = document.getElementById('computer-log');
185						const question = input.value.trim();
186						if (!question) return;
187
188						log.innerHTML += `<p><strong>Frage:</strong> ${question}</p>`;
189						input.value = '';
190
191						// eigenes Element für den Loader, damit man es später gezielt entfernen kann
192						const loadingId = 'loading-' + Date.now();
193						log.innerHTML += `<div id="${loadingId}"></div>`;
194						planetLookupSetLoading(loadingId, true, "Datenbank-Abfrage läuft. (Kann bei Modellwechseln etwas dauern) ...");
195
196						try {
197							const res = await fetch('/computer.php', {
198								method: 'POST',
199								headers: { 'Content-Type': 'application/json' },
200								body: JSON.stringify({ question }),
201							});
202							const data = await res.json();
203
204							const loadingEl = document.getElementById(loadingId);
205							if (loadingEl) loadingEl.remove();
206
207							if (data.error) {
208								log.innerHTML += `<p><strong>Meldung:</strong> Fehler – ${data.error}</p>`;
209							} else {
210								log.innerHTML += `<p><strong>Antwort:</strong> ${data.answer}</p>`;
211							}
212						} catch (e) {
213							const loadingEl = document.getElementById(loadingId);
214							if (loadingEl) loadingEl.remove();
215							log.innerHTML += `<p><strong>Meldung:</strong> Verbindung fehlgeschlagen.</p>`;
216						}
217					}
218					</script>

218
219			</div>
220
221			</main>	
222			
223			<footer>
224				<div class="footer-content-wrapper">
225					<div class="footer-content">
226											
227			 			Content &copy; 2026 <a href="index.html">ScifleetCommand.de</a> (Ute Gerhardt)<br>
228
229						<!-- The following attribution must not be removed: -->
230						LCARS Inspired Website Template by <a href="https://www.thelcars.com">www.TheLCARS.com</a>.
231
232					</div>
233				</div>
234				<div class="footer-panel">1315</div>
235			</footer>
236		</div>
237	</div>
238	<!--div class="baseboard"> </div-->
239	

239<script type="text/javascript" src="assets/lcars.js"></script>

239
240</body>
241</html>