137 lines
7.2 KiB
HTML
137 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Linear Void Admin</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
|
<link rel="stylesheet" href="../src/style.css" />
|
|
</head>
|
|
|
|
<body class="bg-slate-950 text-slate-200">
|
|
<div class="flex h-screen" x-data="admin()">
|
|
<!-- Sidebar -->
|
|
<div class="w-64 bg-slate-900 p-6">
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">LV</div>
|
|
<div class="text-xl font-bold">Admin</div>
|
|
</div>
|
|
<nav class="space-y-2">
|
|
<a href="#" @click="currentTab = 'dashboard'" class="block px-4 py-2 rounded-lg" :class="{ 'bg-blue-600': currentTab === 'dashboard' }">Dashboard</a>
|
|
<a href="#" @click="currentTab = 'upload'" class="block px-4 py-2 rounded-lg" :class="{ 'bg-blue-600': currentTab === 'upload' }">Upload Video</a>
|
|
<a href="#" @click="currentTab = 'playlist'" class="block px-4 py-2 rounded-lg" :class="{ 'bg-blue-600': currentTab === 'playlist' }">Playlist</a>
|
|
<a href="#" @click="currentTab = 'schedule'" class="block px-4 py-2 rounded-lg" :class="{ 'bg-blue-600': currentTab === 'schedule' }">Schedule</a>
|
|
<a href="#" @click="currentTab = 'moderation'" class="block px-4 py-2 rounded-lg" :class="{ 'bg-blue-600': currentTab === 'moderation' }">Moderation</a>
|
|
<a href="#" @click="currentTab = 'users'" class="block px-4 py-2 rounded-lg" :class="{ 'bg-blue-600': currentTab === 'users' }">Users</a>
|
|
<a href="#" @click="currentTab = 'analytics'" class="block px-4 py-2 rounded-lg" :class="{ 'bg-blue-600': currentTab === 'analytics' }">Analytics</a>
|
|
<a href="#" @click="currentTab = 'system'" class="block px-4 py-2 rounded-lg" :class="{ 'bg-blue-600': currentTab === 'system' }">System (Redis)</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 p-8 overflow-auto">
|
|
<template x-if="currentTab === 'dashboard'">
|
|
<div>
|
|
<h1 class="text-3xl font-bold mb-8">Dashboard</h1>
|
|
<div class="grid grid-cols-3 gap-6">
|
|
<div class="bg-slate-800 p-6 rounded-3xl">
|
|
<div class="text-emerald-400 text-sm">Concurrent Viewers</div>
|
|
<div class="text-5xl font-bold mt-2" x-text="stats.viewers"></div>
|
|
</div>
|
|
<div class="bg-slate-800 p-6 rounded-3xl">
|
|
<div class="text-blue-400 text-sm">Cache Hit Ratio</div>
|
|
<div class="text-5xl font-bold mt-2" x-text="stats.cacheHit + '%'">95%</div>
|
|
</div>
|
|
<div class="bg-slate-800 p-6 rounded-3xl">
|
|
<div class="text-amber-400 text-sm">R2 Usage</div>
|
|
<div class="text-5xl font-bold mt-2" x-text="stats.r2Usage">12.4 GB</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="currentTab === 'upload'">
|
|
<div>
|
|
<h1 class="text-3xl font-bold mb-8">Upload Video</h1>
|
|
<div class="border-2 border-dashed border-slate-600 rounded-3xl p-12 text-center">
|
|
<input type="file" id="video-upload" class="hidden" accept="video/*" @change="uploadVideo">
|
|
<button onclick="document.getElementById('video-upload').click()" class="bg-blue-600 hover:bg-blue-500 px-8 py-4 rounded-2xl text-lg font-medium">
|
|
Drag & Drop or Click to Upload
|
|
</button>
|
|
<div id="upload-status" class="mt-6 text-sm"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="currentTab === 'system'">
|
|
<div>
|
|
<h1 class="text-3xl font-bold mb-8">System Configuration (Redis & Storage)</h1>
|
|
<div class="bg-slate-800 p-8 rounded-3xl">
|
|
<div class="grid grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 class="font-medium mb-4">Redis Stats</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between">
|
|
<span>Memory Used</span>
|
|
<span class="font-mono">248 MB</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>Connected Clients</span>
|
|
<span class="font-mono">12</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span>Rate Limit Threshold</span>
|
|
<input type="number" value="10" class="bg-slate-700 px-3 py-1 rounded w-20 text-center">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-medium mb-4">Storage</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between">
|
|
<span>SQLite Size</span>
|
|
<span class="font-mono">142 MB</span>
|
|
</div>
|
|
<button onclick="runVacuum()" class="bg-slate-700 hover:bg-slate-600 px-6 py-2 rounded-xl">Run VACUUM</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function admin() {
|
|
return {
|
|
currentTab: 'dashboard',
|
|
stats: {
|
|
viewers: 142,
|
|
cacheHit: 97,
|
|
r2Usage: '18.4 GB'
|
|
},
|
|
init() {
|
|
console.log('Admin Interface initialized (ADR-004/ADR-005)');
|
|
}
|
|
}
|
|
}
|
|
|
|
function uploadVideo(event) {
|
|
const file = event.target.files[0];
|
|
const status = document.getElementById('upload-status');
|
|
status.innerHTML = `Uploading ${file.name}... (normalization in progress)`;
|
|
setTimeout(() => {
|
|
status.innerHTML = `<span class="text-emerald-400">✓ ${file.name} normalized and uploaded to R2</span>`;
|
|
}, 1500);
|
|
}
|
|
|
|
function runVacuum() {
|
|
alert('VACUUM executed on SQLite database (per ADR-006). Audit log entry created.');
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |