5a31f52310
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
240 lines
6.9 KiB
HTML
240 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>Breakpilot Drive - Lernspiel</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
color: white;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
text-align: center;
|
|
max-width: 800px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
background: linear-gradient(45deg, #e94560, #ff6b6b);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.5rem;
|
|
color: #8892b0;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.status-box {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
margin: 2rem 0;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.status-icon {
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mode-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.mode-btn {
|
|
padding: 1rem 2rem;
|
|
font-size: 1.2rem;
|
|
border: none;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mode-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.mode-btn.video {
|
|
background: linear-gradient(45deg, #e94560, #ff6b6b);
|
|
color: white;
|
|
}
|
|
|
|
.mode-btn.audio {
|
|
background: linear-gradient(45deg, #00d9ff, #00ff88);
|
|
color: #1a1a2e;
|
|
}
|
|
|
|
.mode-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.info-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.info-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.info-card h3 {
|
|
color: #e94560;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.info-card p {
|
|
color: #8892b0;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.api-status {
|
|
margin-top: 2rem;
|
|
padding: 1rem;
|
|
background: rgba(0, 255, 136, 0.1);
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.api-status.error {
|
|
background: rgba(233, 69, 96, 0.1);
|
|
}
|
|
|
|
.loading {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
footer {
|
|
margin-top: 3rem;
|
|
color: #8892b0;
|
|
font-size: 0.8rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Breakpilot Drive</h1>
|
|
<p class="subtitle">Lernspiel fuer Klasse 2-6</p>
|
|
|
|
<div class="status-box">
|
|
<div class="status-icon">🚧</div>
|
|
<h2>Unity Build in Entwicklung</h2>
|
|
<p style="color: #8892b0; margin-top: 1rem;">
|
|
Diese Seite wird durch den Unity WebGL Build ersetzt,<br>
|
|
sobald das Spiel fertig ist.
|
|
</p>
|
|
|
|
<div class="mode-buttons">
|
|
<button class="mode-btn video" disabled>
|
|
🎮 Video-Version
|
|
</button>
|
|
<button class="mode-btn audio" disabled>
|
|
🔊 Audio-Version
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-cards">
|
|
<div class="info-card">
|
|
<h3>🚗 Endless Runner</h3>
|
|
<p>Steuere dein Auto durch 3 Spuren, weiche Hindernissen aus und sammle Punkte!</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h3>📚 Quiz-Integration</h3>
|
|
<p>Beantworte Fragen waehrend der Fahrt oder nimm dir Zeit bei Denkaufgaben.</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h3>📈 Adaptiv</h3>
|
|
<p>Die Schwierigkeit passt sich automatisch an dein Breakpilot-Lernniveau an.</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h3>🔊 Barrierefrei</h3>
|
|
<p>Audio-Version fuer Hoerspiel-Modus mit raeumlichen Sound-Cues.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="api-status" class="api-status loading">
|
|
Pruefe Backend-Verbindung...
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Breakpilot Drive © 2026 - Lernen mit Spass</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// API Health-Check
|
|
async function checkApi() {
|
|
const statusEl = document.getElementById('api-status');
|
|
try {
|
|
// Versuche Backend zu erreichen
|
|
const response = await fetch('/api/game/health');
|
|
const data = await response.json();
|
|
|
|
if (data.status === 'healthy') {
|
|
statusEl.innerHTML = `✅ Backend verbunden - ${data.questions_available} Quiz-Fragen verfuegbar`;
|
|
statusEl.classList.remove('loading', 'error');
|
|
} else {
|
|
throw new Error('Unhealthy');
|
|
}
|
|
} catch (e) {
|
|
// Fallback: Versuche direkten Backend-Aufruf
|
|
try {
|
|
const response = await fetch('http://localhost:8000/api/game/health');
|
|
const data = await response.json();
|
|
statusEl.innerHTML = `✅ Backend (localhost:8000) - ${data.questions_available} Quiz-Fragen`;
|
|
statusEl.classList.remove('loading', 'error');
|
|
} catch (e2) {
|
|
statusEl.innerHTML = '⚠️ Backend nicht erreichbar - Starte docker-compose up';
|
|
statusEl.classList.remove('loading');
|
|
statusEl.classList.add('error');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Beim Laden pruefen
|
|
checkApi();
|
|
|
|
// Alle 30 Sekunden erneut pruefen
|
|
setInterval(checkApi, 30000);
|
|
</script>
|
|
</body>
|
|
</html>
|