<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Admin Question Bank Management</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#5b13ec",
"primary-hover": "#4a0ec0",
"background-light": "#f6f6f8",
"background-dark": "#131118",
"surface-dark": "#1e1b24",
"surface-darker": "#2e2839",
},
fontFamily: {
display: ["Spline Sans", "sans-serif"],
sans: ["Spline Sans", "sans-serif"],
},
borderRadius: {
DEFAULT: "1rem",
lg: "1.5rem",
xl: "2rem",
full: "9999px",
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
/* Custom scrollbar for dark mode */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #131118;
}
::-webkit-scrollbar-thumb {
background: #2e2839;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #433b54;
}
.glass-panel {
background: rgba(30, 27, 36, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col overflow-x-hidden">
<!-- Top Navigation Bar -->
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-slate-200 dark:border-b-[#2e2839] px-6 py-4 bg-white dark:bg-[#131118] sticky top-0 z-50">
<div class="flex items-center gap-4">
<div class="size-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-[0_0_15px_rgba(91,19,236,0.5)]">
<span class="material-symbols-outlined">school</span>
</div>
<div>
<h2 class="text-slate-900 dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">QuizMaster Admin</h2>
<span class="text-xs text-slate-500 dark:text-[#a69db9] font-medium tracking-wide">PORTAL V2.0</span>
</div>
</div>
<div class="flex items-center gap-6">
<button class="hidden md:flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 bg-slate-100 dark:bg-[#2e2839] hover:bg-slate-200 dark:hover:bg-[#433b54] text-slate-900 dark:text-white gap-2 text-sm font-bold px-4 transition-colors">
<span class="material-symbols-outlined text-[20px]">notifications</span>
<span class="hidden lg:inline">Alerts</span>
</button>
<button class="hidden md:flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 bg-slate-100 dark:bg-[#2e2839] hover:bg-slate-200 dark:hover:bg-[#433b54] text-slate-900 dark:text-white gap-2 text-sm font-bold px-4 transition-colors">
<span class="material-symbols-outlined text-[20px]">settings</span>
<span class="hidden lg:inline">Settings</span>
</button>
<div class="h-10 w-10 rounded-full bg-cover bg-center border-2 border-primary cursor-pointer relative" data-alt="User profile avatar showing a smiling person" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBoHjOefZGcy-zegFcUX9iqcgHqC5AlEE2M0KirkKXPGH7vyebClDNrnobFOupliJrBCLLytHJGQ2w80EatvrSq50ctWJEsEedkSeMcHnsGAF9r2KWR6U0XUw1KCimS2m97ZN0CbxC79Mw5MECuNOpAP3QtSslfKmtkoJnn-BLEpShnWsA6FJmu9vVcvl2Sx3VwSJAihIwypuXd04Vd1EKRq3P4tFUeihTRT3_d70XjACgsVgCzfDzafsjINTC55bxw9jTkjDajvh-L');">
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-[#131118] rounded-full"></div>
</div>
</div>
</header>
<div class="flex flex-1 relative">
<!-- Left Sidebar / Navigation (Desktop) -->
<aside class="w-64 hidden xl:flex flex-col border-r border-slate-200 dark:border-[#2e2839] p-4 gap-2 sticky top-[73px] h-[calc(100vh-73px)]">
<nav class="flex flex-col gap-1">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 dark:text-[#a69db9] hover:bg-slate-100 dark:hover:bg-[#2e2839] hover:text-primary dark:hover:text-white transition-all group" href="#">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">dashboard</span>
<span class="font-medium">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg bg-primary/10 text-primary dark:text-white font-bold shadow-sm ring-1 ring-primary/20" href="#">
<span class="material-symbols-outlined">quiz</span>
<span>Question Bank</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 dark:text-[#a69db9] hover:bg-slate-100 dark:hover:bg-[#2e2839] hover:text-primary dark:hover:text-white transition-all group" href="#">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">category</span>
<span class="font-medium">Categories</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 dark:text-[#a69db9] hover:bg-slate-100 dark:hover:bg-[#2e2839] hover:text-primary dark:hover:text-white transition-all group" href="#">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">leaderboard</span>
<span class="font-medium">Leaderboards</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 dark:text-[#a69db9] hover:bg-slate-100 dark:hover:bg-[#2e2839] hover:text-primary dark:hover:text-white transition-all group" href="#">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">group</span>
<span class="font-medium">Users</span>
</a>
</nav>
<div class="mt-auto p-4 bg-slate-100 dark:bg-[#1e1b24] rounded-xl border border-slate-200 dark:border-[#2e2839]">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-bold uppercase text-slate-500 dark:text-slate-400">Storage</span>
<span class="text-xs font-bold text-primary">82%</span>
</div>
<div class="w-full bg-slate-300 dark:bg-[#2e2839] rounded-full h-2 overflow-hidden">
<div class="bg-primary h-2 rounded-full w-[82%] shadow-[0_0_10px_rgba(91,19,236,0.5)]"></div>
</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-2">1,240 questions in database</p>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 p-4 lg:p-8 overflow-y-auto">
<!-- Page Header -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
<div>
<h1 class="text-3xl md:text-4xl font-bold tracking-tight text-slate-900 dark:text-white mb-2">Question Bank</h1>
<p class="text-slate-500 dark:text-[#a69db9]">Manage, curate and organize your quiz content.</p>
</div>
<div class="flex flex-wrap gap-3">
<button class="flex items-center justify-center gap-2 px-6 h-12 rounded-full border border-dashed border-slate-300 dark:border-[#433b54] text-slate-600 dark:text-[#a69db9] hover:bg-slate-100 dark:hover:bg-[#2e2839] hover:text-primary dark:hover:text-white font-bold transition-all group">
<span class="material-symbols-outlined group-hover:rotate-12 transition-transform">upload_file</span>
Bulk Import
</button>
<!-- Trigger for Add Question Modal (Conceptually) -->
<button class="flex items-center justify-center gap-2 px-6 h-12 rounded-full bg-primary hover:bg-primary-hover text-white shadow-[0_4px_20px_rgba(91,19,236,0.3)] hover:shadow-[0_4px_25px_rgba(91,19,236,0.5)] font-bold transition-all transform hover:-translate-y-0.5">
<span class="material-symbols-outlined">add</span>
New Question
</button>
</div>
</div>
<!-- Filters & Search Toolbar -->
<div class="glass-panel p-2 rounded-2xl mb-8 flex flex-col xl:flex-row gap-2 sticky top-4 z-30 shadow-xl border border-slate-200 dark:border-[#2e2839]/50">
<div class="flex-1 flex items-center bg-slate-50 dark:bg-[#2e2839] rounded-xl px-4 py-2 transition-colors focus-within:ring-2 focus-within:ring-primary/50">
<span class="material-symbols-outlined text-slate-400 dark:text-[#a69db9]">search</span>
<input class="bg-transparent border-none text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-[#a69db9] focus:ring-0 w-full ml-2" placeholder="Search questions by keyword..." type="text"/>
</div>
<div class="flex flex-wrap gap-2">
<div class="relative group">
<select class="appearance-none bg-slate-50 dark:bg-[#2e2839] text-slate-700 dark:text-white pl-4 pr-10 py-3 rounded-xl border-none focus:ring-2 focus:ring-primary/50 cursor-pointer font-medium min-w-[140px]">
<option>All Categories</option>
<option>Science</option>
<option>History</option>
<option>Pop Culture</option>
</select>
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
</div>
<div class="relative group">
<select class="appearance-none bg-slate-50 dark:bg-[#2e2839] text-slate-700 dark:text-white pl-4 pr-10 py-3 rounded-xl border-none focus:ring-2 focus:ring-primary/50 cursor-pointer font-medium min-w-[140px]">
<option>Any Difficulty</option>
<option>Easy (XP x1)</option>
<option>Medium (XP x2)</option>
<option>Hard (XP x3)</option>
</select>
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
</div>
<div class="relative group">
<select class="appearance-none bg-slate-50 dark:bg-[#2e2839] text-slate-700 dark:text-white pl-4 pr-10 py-3 rounded-xl border-none focus:ring-2 focus:ring-primary/50 cursor-pointer font-medium min-w-[140px]">
<option>Status: All</option>
<option>Active</option>
<option>Draft</option>
<option>Archived</option>
</select>
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
</div>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
<!-- Question List (Left Side - Takes 2 cols on large screens) -->
<div class="xl:col-span-2 flex flex-col gap-4">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">list_alt</span>
Recent Questions
</h3>
<!-- Question Card 1 -->
<div class="group bg-white dark:bg-[#1e1b24] p-5 rounded-2xl border border-slate-200 dark:border-[#2e2839] hover:border-primary/50 dark:hover:border-primary/50 transition-all cursor-pointer relative overflow-hidden">
<div class="absolute top-0 left-0 w-1 h-full bg-green-500"></div>
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-2">
<span class="bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wider">Science</span>
<span class="bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-300 text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wider flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">bolt</span> Medium
</span>
</div>
<button class="text-slate-400 hover:text-white p-1 rounded-full hover:bg-[#2e2839] transition-colors">
<span class="material-symbols-outlined">more_vert</span>
</button>
</div>
<h4 class="text-lg font-bold text-slate-900 dark:text-white mb-3 line-clamp-2">What is the primary function of the mitochondria in a human cell?</h4>
<div class="flex items-center justify-between text-sm text-slate-500 dark:text-[#a69db9]">
<span>ID: #Q-8492</span>
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-500"></span> Active</span>
</div>
</div>
<!-- Question Card 2 (Selected State simulation) -->
<div class="group bg-white dark:bg-[#1e1b24] p-5 rounded-2xl border-2 border-primary shadow-[0_0_20px_rgba(91,19,236,0.15)] transition-all cursor-pointer relative overflow-hidden">
<div class="absolute top-0 right-0 p-2">
<span class="material-symbols-outlined text-primary">edit</span>
</div>
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-2">
<span class="bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-300 text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wider">History</span>
<span class="bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-300 text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wider flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">local_fire_department</span> Hard
</span>
</div>
</div>
<h4 class="text-lg font-bold text-slate-900 dark:text-white mb-3 line-clamp-2">Which treaty officially ended World War I?</h4>
<div class="flex items-center justify-between text-sm text-slate-500 dark:text-[#a69db9]">
<span>ID: #Q-8491</span>
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-500"></span> Active</span>
</div>
</div>
<!-- Question Card 3 -->
<div class="group bg-white dark:bg-[#1e1b24] p-5 rounded-2xl border border-slate-200 dark:border-[#2e2839] hover:border-primary/50 dark:hover:border-primary/50 transition-all cursor-pointer relative overflow-hidden opacity-75">
<div class="absolute top-0 left-0 w-1 h-full bg-slate-500"></div>
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-2">
<span class="bg-pink-100 dark:bg-pink-900/30 text-pink-600 dark:text-pink-300 text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wider">Pop Culture</span>
<span class="bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-300 text-xs font-bold px-2 py-1 rounded-md uppercase tracking-wider flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">eco</span> Easy
</span>
</div>
<button class="text-slate-400 hover:text-white p-1 rounded-full hover:bg-[#2e2839] transition-colors">
<span class="material-symbols-outlined">more_vert</span>
</button>
</div>
<h4 class="text-lg font-bold text-slate-900 dark:text-white mb-3 line-clamp-2">Who played the character of Iron Man in the Marvel Cinematic Universe?</h4>
<div class="flex items-center justify-between text-sm text-slate-500 dark:text-[#a69db9]">
<span>ID: #Q-8490</span>
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-slate-500"></span> Draft</span>
</div>
</div>
<!-- Pagination -->
<div class="flex justify-center mt-4 gap-2">
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-200 dark:bg-[#2e2839] text-slate-500 dark:text-slate-400 hover:bg-slate-300 dark:hover:bg-[#433b54]">
<span class="material-symbols-outlined">chevron_left</span>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white font-bold">1</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-transparent hover:bg-slate-200 dark:hover:bg-[#2e2839] text-slate-500 dark:text-slate-400 font-bold">2</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-transparent hover:bg-slate-200 dark:hover:bg-[#2e2839] text-slate-500 dark:text-slate-400 font-bold">3</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-200 dark:bg-[#2e2839] text-slate-500 dark:text-slate-400 hover:bg-slate-300 dark:hover:bg-[#433b54]">
<span class="material-symbols-outlined">chevron_right</span>
</button>
</div>
</div>
<!-- Add/Edit Form Panel (Right Side - Sticky) -->
<div class="xl:col-span-1">
<div class="bg-white dark:bg-[#1e1b24] border border-slate-200 dark:border-[#2e2839] rounded-3xl p-6 sticky top-24 shadow-2xl flex flex-col gap-5">
<div class="flex items-center justify-between border-b border-slate-100 dark:border-[#2e2839] pb-4">
<h2 class="text-xl font-bold text-slate-900 dark:text-white">Edit Question</h2>
<div class="flex gap-2">
<button class="text-slate-400 hover:text-red-500 transition-colors" title="Delete">
<span class="material-symbols-outlined">delete</span>
</button>
<button class="text-slate-400 hover:text-primary transition-colors" title="Duplicate">
<span class="material-symbols-outlined">content_copy</span>
</button>
</div>
</div>
<!-- Question Input -->
<div class="flex flex-col gap-2">
<label class="text-sm font-bold text-slate-500 dark:text-[#a69db9] uppercase tracking-wider">Question Text</label>
<textarea class="w-full bg-slate-50 dark:bg-[#131118] border border-slate-200 dark:border-[#2e2839] rounded-2xl p-4 text-slate-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent min-h-[100px] resize-none" placeholder="Enter your question here...">Which treaty officially ended World War I?</textarea>
</div>
<!-- Media Dropzone -->
<div class="relative group cursor-pointer">
<div class="w-full h-32 border-2 border-dashed border-slate-300 dark:border-[#433b54] rounded-2xl flex flex-col items-center justify-center bg-slate-50 dark:bg-[#131118]/50 group-hover:bg-slate-100 dark:group-hover:bg-[#131118] group-hover:border-primary transition-all">
<span class="material-symbols-outlined text-slate-400 dark:text-[#a69db9] text-3xl mb-1 group-hover:text-primary">add_photo_alternate</span>
<p class="text-xs text-slate-500 dark:text-[#a69db9] font-medium">Drop image or click to upload</p>
</div>
<!-- Simulated uploaded image (hidden by default or shown if active) -->
<!-- <img src="..." class="absolute inset-0 w-full h-full object-cover rounded-2xl" /> -->
</div>
<!-- Answer Options -->
<div class="flex flex-col gap-3">
<label class="text-sm font-bold text-slate-500 dark:text-[#a69db9] uppercase tracking-wider">Answers <span class="text-xs font-normal normal-case ml-1">(Select Correct)</span></label>
<!-- Option A -->
<div class="flex items-center gap-3">
<input class="w-5 h-5 text-primary bg-slate-100 dark:bg-[#131118] border-slate-300 dark:border-[#433b54] focus:ring-primary" name="correct_answer" type="radio"/>
<div class="flex-1 relative">
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-400">A</div>
<input class="w-full bg-slate-50 dark:bg-[#131118] border border-slate-200 dark:border-[#2e2839] rounded-xl py-2 pl-8 pr-3 text-sm text-slate-900 dark:text-white focus:ring-1 focus:ring-primary" type="text" value="Treaty of Paris"/>
</div>
</div>
<!-- Option B (Correct) -->
<div class="flex items-center gap-3">
<input checked="" class="w-5 h-5 text-primary bg-slate-100 dark:bg-[#131118] border-slate-300 dark:border-[#433b54] focus:ring-primary" name="correct_answer" type="radio"/>
<div class="flex-1 relative">
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-green-500">B</div>
<input class="w-full bg-slate-50 dark:bg-[#131118] border border-green-500/50 rounded-xl py-2 pl-8 pr-3 text-sm text-slate-900 dark:text-white focus:ring-1 focus:ring-primary shadow-[0_0_10px_rgba(34,197,94,0.1)]" type="text" value="Treaty of Versailles"/>
</div>
</div>
<!-- Option C -->
<div class="flex items-center gap-3">
<input class="w-5 h-5 text-primary bg-slate-100 dark:bg-[#131118] border-slate-300 dark:border-[#433b54] focus:ring-primary" name="correct_answer" type="radio"/>
<div class="flex-1 relative">
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-400">C</div>
<input class="w-full bg-slate-50 dark:bg-[#131118] border border-slate-200 dark:border-[#2e2839] rounded-xl py-2 pl-8 pr-3 text-sm text-slate-900 dark:text-white focus:ring-1 focus:ring-primary" type="text" value="Treaty of Vienna"/>
</div>
</div>
<!-- Option D -->
<div class="flex items-center gap-3">
<input class="w-5 h-5 text-primary bg-slate-100 dark:bg-[#131118] border-slate-300 dark:border-[#433b54] focus:ring-primary" name="correct_answer" type="radio"/>
<div class="flex-1 relative">
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-400">D</div>
<input class="w-full bg-slate-50 dark:bg-[#131118] border border-slate-200 dark:border-[#2e2839] rounded-xl py-2 pl-8 pr-3 text-sm text-slate-900 dark:text-white focus:ring-1 focus:ring-primary" type="text" value="Treaty of Ghent"/>
</div>
</div>
</div>
<!-- Explanation Rich Text Placeholder -->
<div class="flex flex-col gap-2">
<label class="text-sm font-bold text-slate-500 dark:text-[#a69db9] uppercase tracking-wider flex justify-between">
Explanation
<span class="text-xs text-primary cursor-pointer hover:underline">Preview</span>
</label>
<div class="w-full bg-slate-50 dark:bg-[#131118] border border-slate-200 dark:border-[#2e2839] rounded-2xl overflow-hidden">
<div class="flex items-center gap-2 p-2 border-b border-slate-200 dark:border-[#2e2839] bg-slate-100 dark:bg-[#1e1b24]">
<button class="text-slate-400 hover:text-white"><span class="material-symbols-outlined text-[18px]">format_bold</span></button>
<button class="text-slate-400 hover:text-white"><span class="material-symbols-outlined text-[18px]">format_italic</span></button>
<button class="text-slate-400 hover:text-white"><span class="material-symbols-outlined text-[18px]">link</span></button>
</div>
<textarea class="w-full bg-transparent border-none p-3 text-sm text-slate-900 dark:text-white focus:ring-0 resize-none h-20" placeholder="Explain why the answer is correct...">Signed in June 1919 at the Palace of Versailles in Paris at the end of World War I...</textarea>
</div>
</div>
<!-- Actions -->
<div class="grid grid-cols-2 gap-3 mt-2">
<button class="py-3 rounded-xl border border-slate-300 dark:border-[#433b54] text-slate-600 dark:text-white font-bold hover:bg-slate-100 dark:hover:bg-[#2e2839] transition-colors">Cancel</button>
<button class="py-3 rounded-xl bg-primary text-white font-bold hover:bg-primary-hover shadow-lg shadow-primary/25 transition-all transform active:scale-95">Save Changes</button>
</div>
</div>
</div>
</div>
</main>
</div>
</body></html>