iurbinah's picture
Upload 5 files
1735a4e verified
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BPE Lab — RA Assignments (Slide Deck)</title>
<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Deck styles -->
<link rel="stylesheet" href="assets/deck.css" />
<meta name="description" content="Behavioral Political Economy Lab — RA Assignments Slide Deck" />
</head>
<body class="bg-neutral-50 text-neutral-900 selection:bg-black selection:text-white">
<!-- Deck Container -->
<div id="deck" class="min-h-screen w-full flex items-center justify-center relative overflow-hidden cursor-pointer">
<!-- Slides Root -->
<div id="slides" class="w-full h-full"></div>
<!-- Sidebar Toggle -->
<button id="sidebarToggle" aria-label="Toggle sections sidebar" aria-expanded="false" class="sidebar-toggle">
<svg id="sidebarToggleIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" />
<rect x="11" y="10" width="2" height="7" rx="1" fill="currentColor" />
<rect x="11" y="6" width="2" height="2" rx="1" fill="currentColor" />
</svg>
</button>
<!-- Sidebar: Sections Navigation -->
<aside id="sidebar" class="sidebar" aria-hidden="true">
<div class="sidebar__inner">
<header class="sidebar__header">
<span class="sidebar__title">Sections</span>
</header>
<nav id="sidebarList" class="sidebar__list" aria-label="Slide sections"></nav>
</div>
</aside>
<!-- Footer: Navigation + Progress -->
<div class="deck-footer">
<!-- Prev button (small) -->
<button id="prevBtn" aria-label="Previous slide" class="group p-2 rounded-full bg-white/80 hover:bg-white shadow border border-neutral-200 backdrop-blur pointer-events-auto hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-neutral-700 group-hover:-translate-x-0.5 transition-transform">
<path fill-rule="evenodd" d="M15.53 4.47a.75.75 0 0 1 0 1.06L9.06 12l6.47 6.47a.75.75 0 1 1-1.06 1.06l-7-7a.75.75 0 0 1 0-1.06l7-7a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
</svg>
</button>
<!-- Progress -->
<div id="progressBar" class="h-1 w-44 bg-neutral-200 rounded-full overflow-hidden">
<div id="progressInner" class="h-full w-0 bg-neutral-800 transition-all"></div>
</div>
<div id="counter" class="text-sm font-medium text-neutral-600"></div>
<!-- Next button (small) -->
<button id="nextBtn" aria-label="Next slide" class="group p-2 rounded-full bg-white/80 hover:bg-white shadow border border-neutral-200 backdrop-blur pointer-events-auto hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-neutral-700 group-hover:translate-x-0.5 transition-transform">
<path fill-rule="evenodd" d="M8.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06L14.94 12 8.47 5.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<!-- UI helpers (class-based) -->
<script defer src="assets/components.js"></script>
<!-- App JS -->
<script defer src="assets/deck.js"></script>
</body>
</html>