Spaces:

SmokePigDad
/

anycoder-17e96a08

Running

App Files Files Community

anycoder-17e96a08 / index.html

SmokePigDad

Upload folder using huggingface_hub

b06a24b verified about 2 months ago

raw

history blame contribute delete

41.7 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Shadow Creek Investigations - Murder Mystery Game</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Source+Sans+3:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	:root {
	--bg-primary: #0a0a0f;
	--bg-secondary: #12121a;
	--bg-card: #1a1a24;
	--fg-primary: #e8e6e3;
	--fg-secondary: #9a9590;
	--fg-muted: #5a5550;
	--accent: #c9a227;
	--accent-dim: #8b7019;
	--danger: #8b2635;
	--success: #2d5a3d;
	--border: #2a2a35;
	--evidence: #1e3a4c;
	}

	* {
	box-sizing: border-box;
	}

	html {
	scroll-behavior: smooth;
	}

	body {
	font-family: 'Source Sans 3', sans-serif;
	background: var(--bg-primary);
	color: var(--fg-primary);
	min-height: 100vh;
	overflow-x: hidden;
	}

	.font-display {
	font-family: 'Playfair Display', serif;
	}

	/* Background atmosphere */
	.bg-atmosphere {
	background:
	radial-gradient(ellipse at 20% 0%, rgba(201, 162, 39, 0.03) 0%, transparent 50%),
	radial-gradient(ellipse at 80% 100%, rgba(139, 38, 53, 0.05) 0%, transparent 50%),
	linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
	}

	.bg-noise {
	position: relative;
	}

	.bg-noise::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	opacity: 0.02;
	pointer-events: none;
	z-index: 0;
	}

	/* Page transitions */
	.page {
	display: none;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	}

	.page.active {
	display: block;
	opacity: 1;
	transform: translateY(0);
	}

	/* Custom scrollbar */
	::-webkit-scrollbar {
	width: 8px;
	}

	::-webkit-scrollbar-track {
	background: var(--bg-secondary);
	}

	::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 4px;
	}

	::-webkit-scrollbar-thumb:hover {
	background: var(--fg-muted);
	}

	/* Buttons */
	.btn-primary {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
	color: var(--bg-primary);
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	}

	.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(201, 162, 39, 0.3);
	}

	.btn-secondary {
	background: transparent;
	color: var(--fg-primary);
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	border: 1px solid var(--border);
	transition: all 0.2s ease;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	}

	.btn-secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
	}

	.btn-danger {
	background: var(--danger);
	color: var(--fg-primary);
	}

	/* Cards */
	.card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.5rem;
	transition: all 0.3s ease;
	}

	.card:hover {
	border-color: var(--accent-dim);
	}

	.card-evidence {
	background: linear-gradient(135deg, var(--evidence) 0%, var(--bg-card) 100%);
	border-color: #2a4a5c;
	}

	/* Input styles */
	.input-field {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	color: var(--fg-primary);
	padding: 0.75rem 1rem;
	border-radius: 4px;
	width: 100%;
	transition: all 0.2s ease;
	}

	.input-field:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1);
	}

	.input-field::placeholder {
	color: var(--fg-muted);
	}

	/* Animations */
	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	@keyframes pulse-glow {
	0%, 100% {
	box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4);
	}
	50% {
	box-shadow: 0 0 20px 5px rgba(201, 162, 39, 0.2);
	}
	}

	@keyframes typewriter {
	from { width: 0; }
	to { width: 100%; }
	}

	@keyframes blink {
	50% { border-color: transparent; }
	}

	.animate-fade-in-up {
	animation: fadeInUp 0.6s ease forwards;
	}

	.animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
	.animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
	.animate-delay-3 { animation-delay: 0.3s; opacity: 0; }
	.animate-delay-4 { animation-delay: 0.4s; opacity: 0; }
	.animate-delay-5 { animation-delay: 0.5s; opacity: 0; }

	.pulse-glow {
	animation: pulse-glow 2s infinite;
	}

	/* Evidence viewer */
	.evidence-document {
	background: linear-gradient(135deg, #f5f0e6 0%, #e8e0d0 100%);
	color: #2a2a2a;
	padding: 2rem;
	border-radius: 4px;
	box-shadow:
	0 4px 6px rgba(0, 0, 0, 0.3),
	inset 0 0 60px rgba(0, 0, 0, 0.05);
	font-family: 'Courier New', monospace;
	position: relative;
	overflow: hidden;
	}

	.evidence-document::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg,
	transparent 0%,
	rgba(0,0,0,0.1) 20%,
	rgba(0,0,0,0.1) 80%,
	transparent 100%);
	}

	/* Status badges */
	.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}

	.badge-active {
	background: rgba(201, 162, 39, 0.2);
	color: var(--accent);
	}

	.badge-eliminated {
	background: rgba(90, 85, 80, 0.3);
	color: var(--fg-muted);
	}

	.badge-new {
	background: rgba(139, 38, 53, 0.3);
	color: #e85a6b;
	}

	/* Hint tiers */
	.hint-tier {
	border-left: 3px solid var(--border);
	padding-left: 1rem;
	margin-left: 0.5rem;
	cursor: pointer;
	transition: all 0.2s ease;
	}

	.hint-tier:hover {
	border-color: var(--accent);
	}

	.hint-tier.revealed {
	border-color: var(--accent);
	}

	.hint-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	}

	.hint-tier.revealed .hint-content {
	max-height: 200px;
	}

	/* Navigation */
	.nav-link {
	color: var(--fg-secondary);
	padding: 0.5rem 1rem;
	border-radius: 4px;
	transition: all 0.2s ease;
	cursor: pointer;
	}

	.nav-link:hover {
	color: var(--fg-primary);
	background: rgba(255, 255, 255, 0.05);
	}

	.nav-link.active {
	color: var(--accent);
	background: rgba(201, 162, 39, 0.1);
	}

	/* Modal */
	.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(4px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100;
	opacity: 0;
	transition: opacity 0.3s ease;
	}

	.modal-overlay.active {
	display: flex;
	opacity: 1;
	}

	.modal-content {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	max-width: 500px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	transform: scale(0.9);
	transition: transform 0.3s ease;
	}

	.modal-overlay.active .modal-content {
	transform: scale(1);
	}

	/* Audio player */
	.audio-player {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.5rem;
	}

	.audio-waveform {
	height: 60px;
	background: linear-gradient(90deg,
	var(--accent-dim) 0%,
	var(--accent) 50%,
	var(--accent-dim) 100%);
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	}

	.audio-progress {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: rgba(201, 162, 39, 0.3);
	width: 0%;
	transition: width 0.1s linear;
	}

	/* Reduced motion */
	@media (prefers-reduced-motion: reduce) {
	, ::before, *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	}
	}

	/* Responsive */
	@media (max-width: 768px) {
	.sidebar {
	position: fixed;
	left: -280px;
	top: 0;
	bottom: 0;
	z-index: 50;
	transition: left 0.3s ease;
	}

	.sidebar.open {
	left: 0;
	}

	.sidebar-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 40;
	display: none;
	}

	.sidebar-overlay.active {
	display: block;
	}
	}

	/* Focus states */
	*:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	}

	/* Evidence zoom */
	.zoomable {
	cursor: zoom-in;
	transition: transform 0.3s ease;
	}

	.zoomable.zoomed {
	cursor: zoom-out;
	transform: scale(1.5);
	z-index: 10;
	position: relative;
	}

	/* Typewriter effect */
	.typewriter {
	overflow: hidden;
	white-space: nowrap;
	border-right: 2px solid var(--accent);
	animation:
	typewriter 2s steps(40) forwards,
	blink 0.75s step-end infinite;
	}

	/* Notification dot */
	.notification-dot {
	width: 8px;
	height: 8px;
	background: var(--danger);
	border-radius: 50%;
	position: absolute;
	top: -2px;
	right: -2px;
	animation: pulse-glow 2s infinite;
	}

	/* Suspect card */
	.suspect-card {
	position: relative;
	overflow: hidden;
	}

	.suspect-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.8) 100%);
	pointer-events: none;
	}

	.suspect-photo {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	filter: grayscale(30%) contrast(1.1);
	}

	/* Secret input */
	.secret-input {
	background: repeating-linear-gradient(
	0deg,
	transparent,
	transparent 28px,
	var(--border) 28px,
	var(--border) 29px
	);
	padding-bottom: 8px;
	line-height: 29px;
	}
	</style>
	</head>
	<body class="bg-atmosphere bg-noise">
	<!-- Header -->
	<header class="fixed top-0 left-0 right-0 z-30 bg-[var(--bg-primary)]/90 backdrop-blur-md border-b border-[var(--border)]">
	<div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
	<div class="flex items-center gap-4">
	<button id="menuToggle" class="md:hidden p-2 text-[var(--fg-secondary)] hover:text-[var(--fg-primary)]" aria-label="Toggle menu">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<line x1="3" y1="6" x2="21" y2="6"></line>
	<line x1="3" y1="12" x2="21" y2="12"></line>
	<line x1="3" y1="18" x2="21" y2="18"></line>
	</svg>
	</button>
	<a href="#/" class="flex items-center gap-3" data-link>
	<div class="w-10 h-10 rounded bg-gradient-to-br from-[var(--accent)] to-[var(--accent-dim)] flex items-center justify-center">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--bg-primary)" stroke-width="2">
	<circle cx="11" cy="11" r="8"></circle>
	<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
	</svg>
	</div>
	<div>
	<h1 class="font-display font-bold text-lg leading-none">Shadow Creek</h1>
	<span class="text-xs text-[var(--fg-muted)] tracking-wider">INVESTIGATIONS</span>
	</div>
	</a>
	</div>
	<nav class="hidden md:flex items-center gap-2">
	<a href="#/" class="nav-link" data-link>Home</a>
	<a href="#/dashboard" class="nav-link" data-link>Dashboard</a>
	<a href="#/suspects" class="nav-link" data-link>Suspects</a>
	<a href="#/settings" class="nav-link" data-link>Settings</a>
	</nav>
	<div class="flex items-center gap-3">
	<span class="text-sm text-[var(--fg-secondary)] hidden sm:block">Detective <span class="text-[var(--accent)]" id="playerName">Smith</span></span>
	<button id="accountBtn" class="w-9 h-9 rounded-full bg-[var(--bg-card)] border border-[var(--border)] flex items-center justify-center hover:border-[var(--accent)] transition-colors" aria-label="Account">
	<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
	<circle cx="12" cy="7" r="4"></circle>
	</svg>
	</button>
	</div>
	</div>
	<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-full text-xs text-[var(--fg-muted)] hover:text-[var(--accent)] transition-colors py-1">Built with anycoder</a>
	</header>

	<!-- Mobile sidebar overlay -->
	<div id="sidebarOverlay" class="sidebar-overlay"></div>

	<!-- Main content -->
	<main class="pt-20 pb-8 min-h-screen relative z-10">
	<!-- Home Page -->
	<div id="page-home" class="page">
	<div class="max-w-6xl mx-auto px-4">
	<!-- Hero -->
	<section class="py-12 md:py-20">
	<div class="grid lg:grid-cols-2 gap-12 items-center">
	<div>
	<p class="text-[var(--accent)] font-medium tracking-widest text-sm mb-4 animate-fade-in-up">SEASON 1: THE HOLLOWAY CASE</p>
	<h2 class="font-display text-4xl md:text-6xl font-bold leading-tight mb-6 animate-fade-in-up animate-delay-1">
	Who Killed<br>
	<span class="text-[var(--accent)]">Victoria Holloway?</span>
	</h2>
	<p class="text-[var(--fg-secondary)] text-lg mb-8 max-w-lg animate-fade-in-up animate-delay-2">
	A wealthy socialite found dead in her study. Five suspects, each with a motive.
	One detective—you. Piece together the evidence and uncover the truth.
	</p>
	<div class="flex flex-wrap gap-4 animate-fade-in-up animate-delay-3">
	<button id="startCaseBtn" class="btn-primary text-lg">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<polygon points="5 3 19 12 5 21 5 3"></polygon>
	</svg>
	Start Investigation
	</button>
	<button class="btn-secondary" onclick="navigateTo('#/dashboard')">
	View Dashboard
	</button>
	</div>
	</div>
	<div class="relative animate-fade-in-up animate-delay-4">
	<div class="aspect-square max-w-md mx-auto relative">
	<!-- Case file visual -->
	<div class="absolute inset-0 bg-gradient-to-br from-[var(--bg-card)] to-[var(--bg-secondary)] rounded-lg border border-[var(--border)] transform rotate-3"></div>
	<div class="absolute inset-0 bg-gradient-to-br from-[var(--bg-card)] to-[var(--bg-secondary)] rounded-lg border border-[var(--border)] transform -rotate-2"></div>
	<div class="absolute inset-0 bg-gradient-to-br from-[var(--bg-card)] to-[var(--bg-secondary)] rounded-lg border border-[var(--accent-dim)] p-6 flex flex-col">
	<div class="flex items-center gap-2 mb-4">
	<div class="w-3 h-3 rounded-full bg-[var(--danger)]"></div>
	<span class="text-xs text-[var(--fg-muted)] tracking-wider">CONFIDENTIAL</span>
	</div>
	<h3 class="font-display text-2xl font-bold mb-2">Case #2024-0892</h3>
	<p class="text-[var(--fg-secondary)] text-sm mb-4">Homicide Investigation</p>
	<div class="space-y-2 text-sm flex-1">
	<p><span class="text-[var(--fg-muted)]">Victim:</span> Victoria Holloway</p>
	<p><span class="text-[var(--fg-muted)]">Location:</span> 1847 Blackwood Manor</p>
	<p><span class="text-[var(--fg-muted)]">Date:</span> October 15, 2024</p>
	<p><span class="text-[var(--fg-muted)]">Status:</span> <span class="text-[var(--accent)]">Active</span></p>
	</div>
	<div class="mt-4 pt-4 border-t border-[var(--border)] flex items-center justify-between">
	<span class="text-xs text-[var(--fg-muted)]">EPISODE 2 OF 6</span>
	<div class="flex gap-1">
	<div class="w-2 h-2 rounded-full bg-[var(--accent)]"></div>
	<div class="w-2 h-2 rounded-full bg-[var(--accent)]"></div>
	<div class="w-2 h-2 rounded-full bg-[var(--border)]"></div>
	<div class="w-2 h-2 rounded-full bg-[var(--border)]"></div>
	<div class="w-2 h-2 rounded-full bg-[var(--border)]"></div>
	<div class="w-2 h-2 rounded-full bg-[var(--border)]"></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Season Selection -->
	<section class="py-12 border-t border-[var(--border)]">
	<h3 class="font-display text-2xl font-bold mb-8">Available Seasons</h3>
	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
	<div class="card group cursor-pointer" onclick="selectSeason(1)">
	<div class="flex items-start justify-between mb-4">
	<span class="badge badge-active">Active</span>
	<span class="text-sm text-[var(--fg-muted)]">6 Episodes</span>
	</div>
	<h4 class="font-display text-xl font-bold mb-2 group-hover:text-[var(--accent)] transition-colors">The Holloway Case</h4>
	<p class="text-[var(--fg-secondary)] text-sm mb-4">A wealthy socialite's murder exposes dark family secrets.</p>
	<div class="flex items-center gap-2 text-sm text-[var(--fg-muted)]">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<circle cx="12" cy="12" r="10"></circle>
	<polyline points="12 6 12 12 16 14"></polyline>
	</svg>
	<span>~3 hours remaining</span>
	</div>
	</div>
	<div class="card group cursor-pointer opacity-60">
	<div class="flex items-start justify-between mb-4">
	<span class="badge" style="background: rgba(90,85,80,0.3); color: var(--fg-muted);">Coming Soon</span>
	<span class="text-sm text-[var(--fg-muted)]">8 Episodes</span>
	</div>
	<h4 class="font-display text-xl font-bold mb-2">The Lighthouse Keeper</h4>
	<p class="text-[var(--fg-secondary)] text-sm mb-4">A coastal town's decades-old mystery resurfaces.</p>
	<div class="flex items-center gap-2 text-sm text-[var(--fg-muted)]">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
	<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
	</svg>
	<span>Releases December 2024</span>
	</div>
	</div>
	<div class="card group cursor-pointer opacity-60">
	<div class="flex items-start justify-between mb-4">
	<span class="badge" style="background: rgba(90,85,80,0.3); color: var(--fg-muted);">Coming Soon</span>
	<span class="text-sm text-[var(--fg-muted)]">5 Episodes</span>
	</div>
	<h4 class="font-display text-xl font-bold mb-2">Midnight at the Masquerade</h4>
	<p class="text-[var(--fg-secondary)] text-sm mb-4">A charity ball turns deadly behind the masks.</p>
	<div class="flex items-center gap-2 text-sm text-[var(--fg-muted)]">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></path>
	<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
	</svg>
	<span>Releases Q1 2025</span>
	</div>
	</div>
	</div>
	</section>
	</div>
	</div>

	<!-- Dashboard Page -->
	<div id="page-dashboard" class="page">
	<div class="max-w-7xl mx-auto px-4">
	<div class="grid lg:grid-cols-[280px_1fr] gap-6">
	<!-- Sidebar -->
	<aside id="dashboardSidebar" class="sidebar lg:static w-72 h-[calc(100vh-5rem)] bg-[var(--bg-secondary)] border-r border-[var(--border)] p-4 overflow-y-auto">
	<div class="space-y-2">
	<div class="p-3 bg-[var(--bg-card)] rounded-lg border border-[var(--accent-dim)]">
	<p class="text-xs text-[var(--fg-muted)] mb-1">CURRENT OBJECTIVE</p>
	<p class="font-medium text-[var(--accent)]">Eliminate one suspect</p>
	</div>

	<div class="pt-4">
	<p class="text-xs text-[var(--fg-muted)] tracking-wider mb-2 px-2">EPISODE 2</p>
	<button class="w-full text-left p-3 rounded-lg bg-[var(--bg-card)] border border-[var(--border)] hover:border-[var(--accent-dim)] transition-colors relative" onclick="navigateTo('#/briefing/2')">
	<div class="flex items-center gap-3">
	<div class="w-8 h-8 rounded bg-[var(--danger)]/20 flex items-center justify-center">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2">
	<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
	<polyline points="22,6 12,13 2,6"></polyline>
	</svg>
	</div>
	<div class="flex-1">
	<p class="font-medium text-sm">New Briefing</p>
	<p class="text-xs text-[var(--fg-muted)]">From: Detective Marsh</p>
	</div>
	<span class="notification-dot"></span>
	</div>
	</button>
	</div>

	<div class="pt-4">
	<p class="text-xs text-[var(--fg-muted)] tracking-wider mb-2 px-2">EVIDENCE</p>
	<div class="space-y-1">
	<button class="w-full text-left p-2 rounded hover:bg-[var(--bg-card)] transition-colors flex items-center gap-2 text-sm" onclick="navigateTo('#/evidence/2/1')">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
	<polyline points="14 2 14 8 20 8"></polyline>
	</svg>
	Phone Records
	</button>
	<button class="w-full text-left p-2 rounded hover:bg-[var(--bg-card)] transition-colors flex items-center gap-2 text-sm" onclick="navigateTo('#/evidence/2/2')">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
	<polyline points="14 2 14 8 20 8"></polyline>
	</svg>
	Witness Statement
	</button>
	<button class="w-full text-left p-2 rounded hover:bg-[var(--bg-card)] transition-colors flex items-center gap-2 text-sm" onclick="navigateTo('#/evidence/2/3')">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
	<path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
	</svg>
	Voicemail Recording
	</button>
	</div>
	</div>

	<div class="pt-4 border-t border-[var(--border)] mt-4">
	<p class="text-xs text-[var(--fg-muted)] tracking-wider mb-2 px-2">ACTIONS</p>
	<div class="space-y-1">
	<button class="w-full text-left p-2 rounded hover:bg-[var(--bg-card)] transition-colors flex items-center gap-2 text-sm" onclick="navigateTo('#/submit/2')">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
	<polyline points="22 4 12 14.01 9 11.01"></polyline>
	</svg>
	Submit Solution
	</button>
	<button class="w-full text-left p-2 rounded hover:bg-[var(--bg-card)] transition-colors flex items-center gap-2 text-sm" onclick="navigateTo('#/hints/2')">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<circle cx="12" cy="12" r="10"></circle>
	<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
	<line x1="12" y1="17" x2="12.01" y2="17"></line>
	</svg>
	Request Hints
	</button>
	<button class="w-full text-left p-2 rounded hover:bg-[var(--bg-card)] transition-colors flex items-center gap-2 text-sm" onclick="navigateTo('#/suspects')">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
	<circle cx="9" cy="7" r="4"></circle>
	<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
	<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
	</svg>
	View Suspects
	</button>
	</div>
	</div>
	</div>
	</aside>

	<!-- Main Dashboard Content -->
	<div class="space-y-6">
	<!-- Status Bar -->
	<div class="flex flex-wrap items-center justify-between gap-4 p-4 bg-[var(--bg-card)] rounded-lg border border-[var(--border)]">
	<div class="flex items-center gap-4">
	<div class="w-12 h-12 rounded-lg bg-[var(--accent)]/20 flex items-center justify-center">
	<span class="font-display font-bold text-[var(--accent)] text-xl">2</span>
	</div>
	<div>
	<p class="text-sm text-[var(--fg-muted)]">Episode 2 of 6</p>
	<p class="font-display font-bold">The Alibi</p>
	</div>
	</div>
	<div class="flex items-center gap-6 text-sm">
	<div>
	<p class="text-[var(--fg-muted)]">Evidence Reviewed</p>
	<p class="font-medium"><span id="evidenceCount">1</span> / 3</p>
	</div>
	<div>
	<p class="text-[var(--fg-muted)]">Hints Used</p>
	<p class="font-medium"><span id="hintsUsed">0</span> / 3</p>
	</div>
	<div>
	<p class="text-[var(--fg-muted)]">Time Elapsed</p>
	<p class="font-medium" id="timeElapsed">47:23</p>
	</div>
	</div>
	</div>

	<!-- Objective Card -->
	<div class="card border-l-4 border-l-[var(--accent)]">
	<div class="flex items-start justify-between mb-4">
	<div>
	<p class="text-xs text-[var(--fg-muted)] tracking-wider mb-1">CURRENT OBJECTIVE</p>
	<h3 class="font-display text-2xl font-bold">Eliminate One Suspect</h3>
	</div>
	<span class="badge badge-active">In Progress</span>
	</div>
	<p class="text-[var(--fg-secondary)] mb-4">
	Review the new evidence and determine which suspect has a confirmed alibi for the time of the murder.
	Once eliminated, that suspect can be removed from your investigation.
	</p>
	<div class="flex gap-3">
	<button class="btn-primary" onclick="navigateTo('#/briefing/2')">
	View Briefing
	</button>
	<button class="btn-secondary" onclick="navigateTo('#/evidence/2/1')">
	Review Evidence
	</button>
	</div>
	</div>

	<!-- Notes Section -->
	<div class="card">
	<div class="flex items-center justify-between mb-4">
	<h3 class="font-display text-lg font-bold">My Case Notes</h3>
	<button class="text-sm text-[var(--accent)] hover:underline" onclick="saveNotes()">Save Notes</button>
	</div>
	<textarea id="caseNotes" class="input-field secret-input min-h-[200px] resize-y" placeholder="Type your investigation notes here... Tip: Keep track of timelines, alibis, and suspicious behavior.">Episode 1 Notes:
	- Victoria was found at 11:30 PM
	- Cause of death: blunt force trauma
	- No forced entry, knew the killer?
	- All suspects were at the manor that night

	Episode 2 Questions:
	- Who was on the phone at 10:45 PM?
	- The witness statement mentions an argument...</textarea>
	</div>

	<!-- Quick Suspects Overview -->
	<div class="card">
	<div class="flex items-center justify-between mb-4">
	<h3 class="font-display text-lg font-bold">Suspect Overview</h3>
	<button class="text-sm text-[var(--accent)] hover:underline" onclick="navigateTo('#/suspects')">View All</button>
	</div>
	<div class="grid grid-cols-2 md:grid-cols-5 gap-3">
	<div class="p-3 bg-[var(--bg-secondary)] rounded-lg text-center cursor-pointer hover:bg-[var(--bg-primary)] transition-colors" onclick="navigateTo('#/suspects/1')">
	<div class="w-12 h-12 mx-auto mb-2 rounded-full bg-gradient-to-br from-[var(--accent-dim)] to-[var(--bg-card)] flex items-center justify-center text-lg font-bold">JH</div>
	<p class="text-sm font-medium">James</p>
	<span class="badge badge-active text-xs mt-1">Active</span>
	</div>
	<div class="p-3 bg-[var(--bg-secondary)] rounded-lg text-center cursor-pointer hover:bg-[var(--bg-primary)] transition-colors" onclick="navigateTo('#/suspects/2')">
	<div class="w-12 h-12 mx-auto mb-2 rounded-full bg-gradient-to-br from-[var(--danger)] to-[var(--bg-card)] flex items-center justify-center text-lg font-bold">EH</div>
	<p class="text-sm font-medium">Eleanor</p>
	<span class="badge badge-active text-xs mt-1">Active</span>
	</div>
	<div class="p-3 bg-[var(--bg-secondary)] rounded-lg text-center cursor-pointer hover:bg-[var(--bg-primary)] transition-colors" onclick="navigateTo('#/suspects/3')">
	<div class="w-12 h-12 mx-auto mb-2 rounded-full bg-gradient-to-br from-[var(--evidence)] to-[var(--bg-card)] flex items-center justify-center text-lg font-bold">MC</div>
	<p class="text-sm font-medium">Marcus</p>
	<span class="badge badge-active text-xs mt-1">Active</span>
	</div>
	<div class="p-3 bg-[var(--bg-secondary)] rounded-lg text-center cursor-pointer hover:bg-[var(--bg-primary)] transition-colors" onclick="navigateTo('#/suspects/4')">
	<div class="w-12 h-12 mx-auto mb-2 rounded-full bg-gradient-to-br from-[var(--success)] to-[var(--bg-card)] flex items-center justify-center text-lg font-bold">SC</div>
	<p class="text-sm font-medium">Sofia</p>
	<span class="badge badge-active text-xs mt-1">Active</span>
	</div>
	<div class="p-3 bg-[var(--bg-secondary)] rounded-lg text-center cursor-pointer hover:bg-[var(--bg-primary)] transition-colors" onclick="navigateTo('#/suspects/5')">
	<div class="w-12 h-12 mx-auto mb-2 rounded-full bg-gradient-to-br from-[var(--fg-muted)] to-[