<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Oracle - Admin View</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css2?family=Creepster&family=Nosifer&family=Griffy&family=Jolly+Lodger&display=swap"
rel="stylesheet">
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<style>
body {
background: #0a0612;
background-image:
radial-gradient(circle at 20% 50%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(147, 51, 234, 0.1) 0%, transparent 50%);
}
.creepy-font {
font-family: 'Creepster', cursive;
}
.horror-font {
font-family: 'Nosifer', cursive;
}
.mystical-font {
font-family: 'Griffy', cursive;
}
.tarot-card {
background: linear-gradient(45deg, #1a0f1f, #2d1b69);
border: 2px solid #6b21a8;
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
transition: all 0.3s ease;
}
.tarot-card:hover {
transform: rotateY(5deg) scale(1.02);
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
}
</style>
</head>
<body class="min-h-screen text-purple-100">
<header class="text-center py-8 px-4">
<h1 class="horror-font text-6xl md:text-8xl text-purple-300 mb-4">
THE MEMORY ORACLE
</h1>
<p class="mystical-font text-2xl text-purple-300">
Admin View - All Realms
</p>
</header>
<main class="container mx-auto px-4 pb-16">
<div id="user-tree-root" class="max-w-4xl mx-auto"></div>
</main>
<script src="/admin.js"></script>
</body>
</html>