<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Account Security & Activity Log</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#33f20d",
"background-light": "#f6f8f5",
"background-dark": "#132210",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display min-h-screen flex flex-col overflow-x-hidden">
<!-- Top Navigation -->
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-[#2b3928] bg-white dark:bg-[#121811] px-10 py-3 sticky top-0 z-50">
<div class="flex items-center gap-8">
<div class="flex items-center gap-4 text-slate-900 dark:text-white">
<div class="size-8 text-primary">
<span class="material-symbols-outlined !text-3xl">token</span>
</div>
<h2 class="text-slate-900 dark:text-white text-lg font-bold leading-tight tracking-[-0.015em]">QuizMaster</h2>
</div>
<div class="hidden lg:flex items-center gap-9">
<a class="text-slate-600 dark:text-slate-200 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Dashboard</a>
<a class="text-slate-600 dark:text-slate-200 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Quizzes</a>
<a class="text-slate-600 dark:text-slate-200 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Leaderboard</a>
<a class="text-slate-900 dark:text-white text-sm font-bold leading-normal border-b-2 border-primary pb-0.5" href="#">Profile</a>
</div>
</div>
<div class="flex flex-1 justify-end gap-8 items-center">
<label class="hidden md:flex flex-col min-w-40 !h-10 max-w-64">
<div class="flex w-full flex-1 items-stretch rounded-full h-full border border-slate-200 dark:border-[#2b3928] overflow-hidden">
<div class="text-slate-400 dark:text-[#a1ba9c] flex border-none bg-slate-50 dark:bg-[#2b3928] items-center justify-center pl-4 border-r-0">
<span class="material-symbols-outlined text-[20px]">search</span>
</div>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden text-slate-900 dark:text-white focus:outline-0 focus:ring-0 border-none bg-slate-50 dark:bg-[#2b3928] focus:border-none h-full placeholder:text-slate-400 dark:placeholder:text-[#a1ba9c] px-4 pl-2 text-sm font-normal leading-normal" placeholder="Search quizzes..." value=""/>
</div>
</label>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary text-background-dark text-sm font-bold leading-normal tracking-[0.015em] hover:brightness-110 transition-all shadow-[0_0_15px_rgba(51,242,13,0.3)]">
<span class="truncate">Play Now</span>
</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-primary/20" data-alt="User profile picture" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDjkCeHUTZKYH7m1b93Zm7KBVzd06t_lRWJxXgI-n7wI5IK53s67IhcxBHuPAfbr4G35WJqnwQKpDdNpP6Ese8w-Al9oT4Wyn8W5Ba4TTT0Bc_c0Hy8mTNYOOjjiVAX7UaKRm0pvTvXQfmNIfBS7TUyYQRX7n7axt1M4ZjfN8BkjVwUztiM87GmKpBjY049rjpLWkyNdCfBo2eU0nMrdFv7eblb4Ws3ArI_gfGo2XM-b0XAgZo6a2rIqbf-gp-JSJe-TE5Scy6L_DhL");'></div>
</div>
</header>
<main class="flex-1 px-4 md:px-10 lg:px-40 py-8 flex justify-center">
<div class="max-w-[1200px] w-full flex flex-col gap-8">
<!-- Page Header -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 pb-6 border-b border-slate-200 dark:border-[#2b3928]">
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3 mb-2">
<span class="material-symbols-outlined text-primary !text-4xl">shield_lock</span>
<p class="text-slate-400 dark:text-[#a1ba9c] text-sm font-bold uppercase tracking-wider">Security Center</p>
</div>
<h1 class="text-4xl md:text-5xl font-black text-slate-900 dark:text-white leading-tight">Security & Activity</h1>
<p class="text-slate-600 dark:text-[#a1ba9c] text-lg max-w-xl">Manage your defenses, audit your victory history, and secure your loot.</p>
</div>
<!-- Gamified Security Score -->
<div class="flex flex-col gap-2 w-full md:w-72 bg-white dark:bg-[#1d271b] p-4 rounded-xl shadow-sm border border-slate-200 dark:border-transparent">
<div class="flex justify-between items-end">
<span class="text-sm font-bold text-slate-900 dark:text-white">Security Strength</span>
<span class="text-2xl font-black text-primary">65%</span>
</div>
<div class="h-3 w-full bg-slate-100 dark:bg-[#2b3928] rounded-full overflow-hidden">
<div class="h-full bg-primary shadow-[0_0_10px_rgba(51,242,13,0.5)] transition-all duration-500" style="width: 65%"></div>
</div>
<p class="text-xs text-slate-500 dark:text-[#a1ba9c] mt-1">Enable 2FA to reach 100% and earn the <span class="text-primary font-bold">Security Expert Badge</span>.</p>
</div>
</div>
<!-- Main Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Left Column: Security Settings (8 cols) -->
<div class="lg:col-span-8 flex flex-col gap-6">
<!-- 2FA Card (Hero Card) -->
<div class="relative overflow-hidden rounded-xl bg-slate-900 dark:bg-[#1d271b] p-6 md:p-8 shadow-lg group">
<!-- Background Glow Effect -->
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 pointer-events-none"></div>
<div class="flex flex-col md:flex-row gap-6 items-start md:items-center justify-between relative z-10">
<div class="flex gap-5">
<div class="hidden sm:flex size-16 shrink-0 items-center justify-center rounded-full bg-[#2b3928] text-primary border border-primary/20">
<span class="material-symbols-outlined !text-3xl">lock</span>
</div>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3">
<h3 class="text-xl font-bold text-white">Two-Factor Authentication</h3>
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide bg-red-500/20 text-red-400 border border-red-500/30">Disabled</span>
</div>
<p class="text-[#a1ba9c] text-sm leading-relaxed max-w-md">
Add an extra layer of defense to your account. Protect your high scores and claimed prizes from unauthorized access.
</p>
</div>
</div>
<button class="shrink-0 flex items-center justify-center gap-2 h-10 px-6 rounded-full bg-white/5 hover:bg-primary hover:text-background-dark text-white font-bold text-sm transition-all border border-white/10 hover:border-primary">
<span class="material-symbols-outlined !text-lg">toggle_off</span>
<span>Enable 2FA</span>
</button>
</div>
</div>
<!-- Password & Sessions Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Change Password -->
<div class="rounded-xl bg-white dark:bg-[#1d271b] p-6 border border-slate-200 dark:border-transparent shadow-sm">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-primary">key</span>
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Change Password</h3>
</div>
<form class="flex flex-col gap-4">
<div class="space-y-1">
<label class="text-xs font-medium text-slate-500 dark:text-[#a1ba9c] uppercase">Current Password</label>
<input class="w-full h-11 bg-slate-50 dark:bg-[#2b3928] rounded-lg px-4 text-sm text-slate-900 dark:text-white border-transparent focus:border-primary focus:ring-0 transition-colors" placeholder="••••••••" type="password"/>
</div>
<div class="space-y-1">
<label class="text-xs font-medium text-slate-500 dark:text-[#a1ba9c] uppercase">New Password</label>
<input class="w-full h-11 bg-slate-50 dark:bg-[#2b3928] rounded-lg px-4 text-sm text-slate-900 dark:text-white border-transparent focus:border-primary focus:ring-0 transition-colors" placeholder="New secure password" type="password"/>
</div>
<div class="pt-2">
<button class="w-full h-10 rounded-full bg-slate-200 dark:bg-[#2b3928] text-slate-900 dark:text-white font-bold text-sm hover:bg-primary hover:text-background-dark transition-colors" type="button">
Update Password
</button>
</div>
</form>
</div>
<!-- Active Sessions -->
<div class="rounded-xl bg-white dark:bg-[#1d271b] p-6 border border-slate-200 dark:border-transparent shadow-sm flex flex-col">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-primary">devices</span>
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Active Session</h3>
</div>
<div class="flex-1 flex flex-col gap-4">
<div class="flex gap-4 items-center p-3 rounded-lg bg-slate-50 dark:bg-[#2b3928]/50 border border-slate-100 dark:border-[#2b3928]">
<div class="size-10 rounded-full bg-slate-200 dark:bg-[#121811] flex items-center justify-center text-slate-500 dark:text-[#a1ba9c]">
<span class="material-symbols-outlined !text-xl">desktop_windows</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-slate-900 dark:text-white truncate">Chrome on Windows</p>
<p class="text-xs text-slate-500 dark:text-[#a1ba9c]">IP: 192.168.1.1 • <span class="text-primary">Current Session</span></p>
</div>
</div>
<div class="mt-auto pt-4 border-t border-slate-100 dark:border-[#2b3928]">
<p class="text-xs text-slate-500 dark:text-[#a1ba9c] mb-3">Location: New York, USA</p>
<button class="w-full h-10 rounded-full border border-red-500/30 text-red-500 hover:bg-red-500 hover:text-white font-bold text-sm transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined !text-lg">logout</span>
Log Out All Devices
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Recent Activity Log (4 cols) -->
<div class="lg:col-span-4 flex flex-col h-full">
<div class="rounded-xl bg-white dark:bg-[#1d271b] flex flex-col h-full border border-slate-200 dark:border-transparent shadow-sm overflow-hidden">
<div class="p-6 pb-4 border-b border-slate-100 dark:border-[#2b3928] flex justify-between items-center">
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Recent Activity</h3>
<button class="text-xs font-bold text-primary hover:text-white transition-colors">View Full Log</button>
</div>
<div class="flex-1 overflow-y-auto max-h-[500px] p-2 space-y-1">
<!-- Item 1: Login -->
<div class="p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-[#2b3928]/50 transition-colors flex gap-4 group">
<div class="mt-1">
<div class="size-2 rounded-full bg-primary shadow-[0_0_8px_rgba(51,242,13,0.8)]"></div>
<div class="w-0.5 h-full bg-slate-100 dark:bg-[#2b3928] mx-auto mt-1 group-last:hidden"></div>
</div>
<div class="flex-1 pb-4">
<div class="flex justify-between items-start">
<p class="text-sm font-bold text-slate-900 dark:text-white">Successful Login</p>
<span class="text-[10px] font-medium text-slate-400 dark:text-[#a1ba9c]">14:00</span>
</div>
<p class="text-xs text-slate-500 dark:text-[#a1ba9c] mt-0.5">Chrome / Windows • IP 123.45.67.89</p>
</div>
</div>
<!-- Item 2: Points Earned (Gamification) -->
<div class="p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-[#2b3928]/50 transition-colors flex gap-4 group">
<div class="mt-1">
<div class="size-2 rounded-full bg-purple-500 shadow-[0_0_8px_rgba(168,85,247,0.8)]"></div>
<div class="w-0.5 h-full bg-slate-100 dark:bg-[#2b3928] mx-auto mt-1 group-last:hidden"></div>
</div>
<div class="flex-1 pb-4">
<div class="flex justify-between items-start">
<p class="text-sm font-bold text-slate-900 dark:text-white">Points Earned</p>
<span class="text-[10px] font-medium text-slate-400 dark:text-[#a1ba9c]">Yesterday</span>
</div>
<p class="text-xs text-purple-400 font-medium mt-0.5">+500 XP Quiz Victory</p>
</div>
</div>
<!-- Item 3: Prize Claim -->
<div class="p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-[#2b3928]/50 transition-colors flex gap-4 group">
<div class="mt-1">
<div class="size-2 rounded-full bg-yellow-400 shadow-[0_0_8px_rgba(250,204,21,0.8)]"></div>
<div class="w-0.5 h-full bg-slate-100 dark:bg-[#2b3928] mx-auto mt-1 group-last:hidden"></div>
</div>
<div class="flex-1 pb-4">
<div class="flex justify-between items-start">
<p class="text-sm font-bold text-slate-900 dark:text-white">Prize Redeemed</p>
<span class="text-[10px] font-medium text-slate-400 dark:text-[#a1ba9c]">Oct 22</span>
</div>
<p class="text-xs text-yellow-500/90 font-medium mt-0.5">$50 Gift Card Claimed</p>
</div>
</div>
<!-- Item 4: Password Change -->
<div class="p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-[#2b3928]/50 transition-colors flex gap-4 group">
<div class="mt-1">
<div class="size-2 rounded-full bg-slate-500"></div>
<div class="w-0.5 h-full bg-slate-100 dark:bg-[#2b3928] mx-auto mt-1 group-last:hidden"></div>
</div>
<div class="flex-1 pb-4">
<div class="flex justify-between items-start">
<p class="text-sm font-bold text-slate-900 dark:text-white">Password Updated</p>
<span class="text-[10px] font-medium text-slate-400 dark:text-[#a1ba9c]">Oct 15</span>
</div>
<p class="text-xs text-slate-500 dark:text-[#a1ba9c] mt-0.5">Manual change via Settings</p>
</div>
</div>
<!-- Item 5: Login -->
<div class="p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-[#2b3928]/50 transition-colors flex gap-4 group">
<div class="mt-1">
<div class="size-2 rounded-full bg-primary shadow-[0_0_8px_rgba(51,242,13,0.8)]"></div>
</div>
<div class="flex-1 pb-2">
<div class="flex justify-between items-start">
<p class="text-sm font-bold text-slate-900 dark:text-white">Successful Login</p>
<span class="text-[10px] font-medium text-slate-400 dark:text-[#a1ba9c]">Oct 10</span>
</div>
<p class="text-xs text-slate-500 dark:text-[#a1ba9c] mt-0.5">Mobile Safari / iOS</p>
</div>
</div>
</div>
<div class="p-4 border-t border-slate-100 dark:border-[#2b3928] bg-slate-50 dark:bg-[#121811]/30">
<button class="w-full h-9 rounded-lg border border-slate-200 dark:border-[#2b3928] text-xs font-bold text-slate-600 dark:text-[#a1ba9c] hover:bg-white dark:hover:bg-[#2b3928] transition-colors">
Download Audit Report (CSV)
</button>
</div>
</div>
</div>
</div>
<!-- Promotion / Help Banner -->
<div class="relative overflow-hidden rounded-xl bg-gradient-to-r from-purple-900 to-indigo-900 p-8 shadow-lg text-center md:text-left">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-20" data-alt="Abstract geometric pattern"></div>
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
<div>
<h2 class="text-2xl font-black text-white mb-2">Need a Security Boost?</h2>
<p class="text-indigo-200 text-sm max-w-lg">Verify your email and add a recovery phone number to earn an instant <span class="text-white font-bold">+200 XP</span> and secure your account further.</p>
</div>
<button class="shrink-0 h-10 px-8 rounded-full bg-white text-indigo-900 font-bold text-sm hover:bg-indigo-50 transition-colors shadow-lg">
Verify Contact Info
</button>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="mt-12 border-t border-slate-200 dark:border-[#2b3928] bg-white dark:bg-[#121811] py-12">
<div class="px-10 lg:px-40 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-slate-900 dark:text-white">
<span class="material-symbols-outlined text-primary">token</span>
<span class="font-bold">QuizMaster</span>
</div>
<div class="flex gap-8 flex-wrap justify-center">
<a class="text-sm font-medium text-slate-500 dark:text-[#a1ba9c] hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="text-sm font-medium text-slate-500 dark:text-[#a1ba9c] hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="text-sm font-medium text-slate-500 dark:text-[#a1ba9c] hover:text-primary transition-colors" href="#">Support</a>
<a class="text-sm font-medium text-slate-500 dark:text-[#a1ba9c] hover:text-primary transition-colors" href="#">Cookie Settings</a>
</div>
<p class="text-xs text-slate-400 dark:text-[#a1ba9c]/50">© 2023 QuizMaster Inc. All rights reserved.</p>
</div>
</footer>
</body></html>