/* global React */const { useEffect, useRef, useState } = React;// ============================================================// DESIGN TOKENS — pinned to 1920×1080 slide canvas// ===================
88c1242 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Slide Canvas — Presentation Kit</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=Archivo+Black&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| brand: '#FF4D00', | |
| brandDark: '#CC3D00', | |
| }, | |
| fontFamily: { | |
| display: ['"Archivo Black"', '"Arial Black"', 'system-ui', 'sans-serif'], | |
| mono: ['"Space Mono"', '"IBM Plex Mono"', 'ui-monospace', 'monospace'], | |
| body: ['"Inter"', 'system-ui', '-apple-system', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-black overflow-hidden select-none"> | |
| <!-- Slide Viewport --> | |
| <div id="slide-viewport" class="w-full h-full fixed inset-0"> | |
| <div id="slide-container" class="w-full h-full transition-all duration-500"> | |
| <!-- Slides injected by JS --> | |
| </div> | |
| </div> | |
| <!-- Navigation Controls --> | |
| <div id="nav-overlay" class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3"> | |
| <button onclick="prevSlide()" class="nav-btn" aria-label="Previous slide"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><polyline points="15 5 8 12 15 19"/></svg> | |
| </button> | |
| <div id="slide-indicator" class="font-mono text-sm text-white/60 tracking-tight uppercase min-w-[80px] text-center"></div> | |
| <button onclick="nextSlide()" class="nav-btn" aria-label="Next slide"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square"><polyline points="9 5 16 12 9 19"/></svg> | |
| </button> | |
| <button onclick="toggleOverview()" class="nav-btn ml-3" aria-label="Overview" title="Slide overview"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg> | |
| </button> | |
| <button onclick="toggleFullscreen()" class="nav-btn" aria-label="Fullscreen" title="Fullscreen"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square"><polyline points="4 4 4 10"/><polyline points="4 4 10 4"/><polyline points="20 4 20 10"/><polyline points="20 4 14 4"/><polyline points="4 20 4 14"/><polyline points="4 20 10 20"/><polyline points="20 20 20 14"/><polyline points="20 20 14 20"/></svg> | |
| </button> | |
| </div> | |
| <!-- Keyboard hint --> | |
| <div id="key-hint" class="fixed top-6 right-6 z-50 font-mono text-xs text-white/30 uppercase tracking-tight transition-opacity duration-1000"> | |
| ← → keys to navigate | |
| </div> | |
| <!-- Overview Modal --> | |
| <div id="overview-modal" class="fixed inset-0 z-[100] bg-black/95 backdrop-blur-sm hidden items-center justify-center p-8 overflow-auto"> | |
| <div id="overview-grid" class="grid grid-cols-3 gap-4 max-w-6xl mx-auto"></div> | |
| <button onclick="toggleOverview()" class="absolute top-6 right-6 nav-btn text-white" aria-label="Close overview"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg> | |
| </button> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |