65 lines
2.3 KiB
HTML
65 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🌲 Crumbulous Constellation</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.node-label {
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen text-white font-sans">
|
|
|
|
<div class="max-w-7xl mx-auto p-4 md:p-8">
|
|
<header class="text-center mb-8 relative z-10">
|
|
<h1
|
|
class="text-4xl md:text-5xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">
|
|
🌲 Crumbulous Constellation
|
|
</h1>
|
|
<p class="text-purple-300 text-lg">
|
|
Die Sternenkarte des Wissens · Jeder Krümel zählt
|
|
</p>
|
|
<div class="mt-4 flex justify-center gap-4 text-sm">
|
|
<a href="/" class="text-purple-400 hover:text-white transition-colors">← Zurück zum Wald</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Visual -->
|
|
<div id="constellation"
|
|
class="relative bg-slate-950/50 backdrop-blur-xl rounded-3xl shadow-2xl border border-purple-500/20 overflow-hidden">
|
|
<svg id="graph" class="w-full h-[600px]"></svg>
|
|
|
|
<!-- Loading Indicator -->
|
|
<div id="loading" class="absolute inset-0 flex items-center justify-center bg-slate-900/80 z-20">
|
|
<div class="text-purple-400 animate-pulse">Lade Sternenkarte...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legend / Stats -->
|
|
<div id="legend" class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<!-- Filled by JS -->
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="mt-12 text-center text-purple-500/60 text-sm pb-8">
|
|
<p>"Wie Baumrinden wächst das Wissen."</p>
|
|
<p class="text-xs mt-1">Populous x Vector-DB</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="constellation.js"></script>
|
|
</body>
|
|
|
|
</html> |