Hugging Face's logo

Spaces:
eaglelandsonce
/
present_v8
Running

App Files Community
present_v8 / index.html
eaglelandsonce's picture
eaglelandsonce
Update index.html
d6fd699 verified
Raw
History Blame Contribute Delete
35.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>PDF Slide Viewer · Styled</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
 <style>
 :root{
 --bg-1:#0b0f14; /* page background */
 --bg-2:#0e131a; /* canvas background */
 --panel:rgba(18, 22, 30, .6);
 --panel-2:rgba(18, 22, 30, .85);
 --border:rgba(255,255,255,.08);
 --accent:#5cc8ff; /* primary accent */
 --accent-2:#a78bfa; /* secondary accent */
 --text:#eef2f7; /* primary text */
 --muted:#a3b0c2; /* muted text */
 --danger:#ff6b6b;
 --shadow:0 10px 30px rgba(0,0,0,.35);
 --radius:14px;
 }
 *{box-sizing:border-box}
 html,body{height:100%}
 body{
 margin:0;
 overflow:hidden;
 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
 background: radial-gradient(1200px 800px at 70% 10%, rgba(92,200,255,.08), transparent 60%),
 radial-gradient(900px 900px at 10% 80%, rgba(167,139,250,.08), transparent 60%),
 var(--bg-1);
 color:var(--text);
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 user-select:none;
 }
 /* Canvas layer */
 #canvas-container{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; }
 canvas{
 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
 background:linear-gradient(180deg, var(--bg-2), #141a23);
 border-radius:18px;
 box-shadow: var(--shadow);
 transition:opacity .35s ease;
 }
 #spotlight-canvas{ z-index:50; display:none; pointer-events:none; background:transparent !important; }
 /* Top-left tool dock */
 .toolbar{
 position:absolute; top:20px; left:16px; z-index:20;
 display:flex; flex-direction:column; gap:10px;
 padding:10px; border-radius:var(--radius);
 background: var(--panel);
 border: 1px solid var(--border);
 backdrop-filter: blur(10px);
 box-shadow: var(--shadow);
 }
 .toolbar-section{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
 .toolbar-section:last-child{ border-bottom:none; padding-bottom:0; }
 .toolbar button{
 width:36px; height:36px; border:none; border-radius:12px; cursor:pointer; color:var(--text);
 background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
 outline:1px solid var(--border);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
 transition: transform .12s ease, outline-color .2s ease, background .2s ease;
 }
 .toolbar button:hover{ transform: translateY(-1px); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
 .toolbar button:active{ transform: translateY(0); }
 .drawing-tool.active{
 background:linear-gradient(180deg, rgba(92,200,255,.35), rgba(92,200,255,.15));
 outline-color: rgba(92,200,255,.65);
 box-shadow: 0 0 0 2px rgba(92,200,255,.25), inset 0 1px 0 rgba(255,255,255,.12);
 }
 .color-button{ width:26px; height:22px; border-radius:6px; border:2px solid #fff; opacity:.95; }
 .color-button.red{ background:#ff3b30; border-color:#ffc7c3; }
 .color-button.green{ background:#34c759; border-color:#c6f5d5; }
 .color-button.blue{ background:#0a84ff; border-color:#c7e1ff; }
 .color-button.yellow{ background:#ffd60a; border-color:#fff0a3; }
 .color-button.orange{ background:#ff9f0a; border-color:#ffe0b8; }
 .color-button.active-color{ outline:2px solid var(--accent); transform:scale(1.08); }
 .arrow-button{
 position:absolute; top:50%; transform:translateY(-50%);
 }
 .small-arrow {
 font-size: 11px !important;
 width: 20px !important;
 height: 20px !important;
 padding: 2px !important;
 min-width: 0 !important;
 min-height: 0 !important;
 }
 .arrow-button:hover{ transform: translateY(-50%) scale(1.06); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
 #prev-slide{ left:14px } #next-slide{ right:14px }
 .slider-container{
 position:static; display:flex; gap:6px; align-items:center;
 padding:8px 10px; border-radius:12px;
 background: var(--panel);
 border:1px solid var(--border);
 backdrop-filter: blur(8px);
 box-shadow: var(--shadow);
 }
 #page-slider{ width:140px }
 input[type="range"]{ appearance:none; height:6px; border-radius:999px; background:rgba(255,255,255,.15); outline:none }
 input[type="range"]::-webkit-slider-thumb{ appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); box-shadow:0 2px 6px rgba(92,200,255,.4) }
 input[type="number"], #timer-input{
 width:48px; padding:5px 6px; border-radius:10px; border:1px solid var(--border);
 }
 .small-indicator {
 font-size: 10px !important;
 padding: 2px 5px !important;
 box-shadow: 0 2px 6px rgba(167,139,250,.13) !important;
 border-radius: 999px;
 font-weight: 600;
 letter-spacing: .2px;
 color: var(--text);
 background: linear-gradient(180deg, rgba(167,139,250,.18), rgba(167,139,250,.08));
 border: 1px solid rgba(167,139,250,.35);
 display: flex;
 align-items: center;
 justify-content: center;
 }
 /* Links panel */
 .links-container{
 position:static; max-height:30vh; overflow:auto;
 display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:var(--radius);
 background: var(--panel-2);
 border:1px solid var(--border);
 backdrop-filter: blur(12px);
 box-shadow: var(--shadow);
 }
 .links-container::before{
 content:"Links"; display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
 margin:2px 2px 8px;
 }
 .links-container a{
 width:100%;
 justify-content:space-between;
 color: #fff !important;
 text-decoration: underline;
 transition: color 0.2s;
 }
 .links-container a:visited {
 color: #fff !important;
 }
 .links-container a:hover {
 color: #5cc8ff !important;
 }
 /* Clock & Timer */
 #clock-container{
 position:absolute; top:20px; right:20px; z-index:25; color:var(--text);
 background: var(--panel);
 border:1px solid var(--border);
 border-radius:var(--radius);
 padding:8px; width:130px; text-align:center; backdrop-filter: blur(10px); box-shadow: var(--shadow);
 }
 /* Smaller idle display (less intrusive) */
 #clock-display{
 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 font-weight:700; font-size:13px; letter-spacing:.3px; margin-bottom:4px;
 }
 #timer-setup .timer-row {
 gap: 4px !important;
 }
 #timer-input, #timer-message-input {
 font-size: 11px !important;
 padding: 2px 4px !important;
 height: 22px !important;
 border-radius: 7px !important;
 width: 38px;
 background: transparent !important;
 color: var(--text) !important;
 box-shadow: none !important;
 border: 1.5px solid #b5c6e0 !important;
 transition: border-color 0.2s;
}
#timer-input:focus, #timer-message-input:focus {
 border-color: #5cc8ff !important;
 }
 #timer-message-input {
 width: 70px;
 }
 #timer-start-btn {
 font-size: 11px !important;
 padding: 2px 8px !important;
 border-radius: 7px !important;
 height: 22px !important;
 }
 #timer-controls button {
 font-size: 11px !important;
 padding: 2px 8px !important;
 border-radius: 7px !important;
 height: 22px !important;
 }
 #timer-controls button, #timer-setup button{
 padding:6px 10px; border-radius:10px; border:1px solid var(--border); color:var(--text);
 background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); cursor:pointer;
 }
 /* File loader */
 #file-loader{ position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:25 }
 #pdf-upload{ display:none }
 /* Welcome */
 #welcome-screen{
 position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:5;
 color:#cfd6e4; font-size:22px; text-align:center; pointer-events:none;
 }
 #welcome-screen p{
 background: var(--panel-2); border:1px solid var(--border); border-radius:18px; padding:18px 22px; backdrop-filter: blur(10px);
 box-shadow: var(--shadow);
 }
 /* Page indicator */
 #page-indicator{
 position:absolute; right:18px; bottom:18px;
 padding:8px 12px; border-radius:999px; font-weight:600; letter-spacing:.3px; color:var(--text);
 background: linear-gradient(180deg, rgba(167,139,250,.18), rgba(167,139,250,.08));
 border:1px solid rgba(167,139,250,.35); box-shadow:0 6px 20px rgba(167,139,250,.2);
 z-index:1200;
 }
 /* Scrollbar aesthetics (WebKit) */
 .links-container::-webkit-scrollbar{ width:10px }
 .links-container::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:10px }
 .links-container::-webkit-scrollbar-thumb{ background:linear-gradient(var(--accent), var(--accent-2)); border-radius:10px }
 .hidden{ display:none !important }
/* --- Interaction & z-index overrides --- */
 #canvas-container{ z-index:0 }
 #pdf-canvas-1, #pdf-canvas-2{ z-index:1 }
 .toolbar, .arrow-button, #fullscreen-btn, #file-loader{ z-index:1000; pointer-events:auto }
 .links-container{ z-index:900 }
 #welcome-screen{ z-index:5; pointer-events:none }
/* --- Small link buttons & compact links panel --- */
 .link-button{ padding:6px 8px; border-radius:8px; font-size:12px; }
 .link-icon{ width:12px; height:12px; }
 .links-container{ width:220px; gap:6px; padding:10px; }
/* Bottom bar layout */
 .bottom-bar{ position:absolute; bottom:16px; left:12px; z-index:20; display:flex; align-items:flex-end; gap:10px; }
/* Timer message UI (type-in only) */
 #timer-message-input{ width:160px; padding:6px 8px; border-radius:10px; border:1px solid var(--border); background: rgba(255,255,255,.04); color:var(--text); outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
/* Full-screen banner for timer message */
 #timer-banner{ position:absolute; top:0; left:0; right:0; bottom:auto; display:flex; align-items:flex-start; justify-content:center; padding-top:4vh; z-index:1100; pointer-events:none; }
 #timer-banner-text{ width:min(92vw, 1600px); text-align:center; font-weight:800; font-size:clamp(28px, 7vw, 120px); line-height:1.05; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.95); text-shadow:0 6px 30px rgba(0,0,0,.6); background:linear-gradient(180deg, rgba(92,200,255,.18), rgba(92,200,255,.08)); padding:.15em .5em; border-radius:16px; border:1px solid rgba(255,255,255,.18); }
 /* Large clock when timer is running (kept) */
 #clock-container.running{ width:280px; padding:14px; }
 #clock-container.running #clock-display{ font-size:64px; }
 </style>
</head>
<body>
 <div id="canvas-container">
 <canvas id="pdf-canvas-1"></canvas>
 <canvas id="pdf-canvas-2"></canvas>
 </div>
 <canvas id="spotlight-canvas"></canvas>
<!-- Tool Dock -->
 <div class="toolbar main-tool">
 <div class="toolbar-section">
 <button id="tool-pen" class="drawing-tool active" title="Pen Tool (T)">✏️</button>
 <button id="tool-rectangle" class="drawing-tool" title="Draw Rectangle (D)">▭</button>
 <button id="tool-spotlight" class="drawing-tool" title="Spotlight (S)">🔦</button>
 </div>
 <div class="toolbar-section">
 <button id="thickness-increase" title="Increase Size (+)">＋</button>
 <button id="thickness-decrease" title="Decrease Size (-)">－</button>
 </div>
 <div class="toolbar-section">
 <button class="color-button red" data-color="red" title="Red (R)"></button>
 <button class="color-button green" data-color="green" title="Green (G)"></button>
 <button class="color-button blue" data-color="blue" title="Blue (B)"></button>
 <button class="color-button yellow" data-color="yellow" title="Yellow (Y)"></button>
 <button class="color-button orange" data-color="orange" title="Orange (O)"></button>
 </div>
 <div class="toolbar-section">
 <button id="clear-draw" title="Clear All Drawings (E)">🧹</button>
 </div>
 </div>
<!-- Bottom bar: Links (toggle with L) + Slider -->
 <div id="bottom-bar" class="bottom-bar main-tool">
 <div id="links-container" class="links-container"></div>
 <div class="slider-container">
 <input type="range" id="page-slider" min="1" max="1" value="1" />
 <input type="number" id="page-number-input" min="1" value="1" />
 </div>
 </div>
<!-- File chooser -->
 <div id="file-loader">
 <label for="pdf-upload" class="link-button">
 <svg class="link-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3a1 1 0 0 1 1 1v8.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L11 12.586V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Z"/></svg>
 Open PDF
 </label>
 <input type="file" id="pdf-upload" accept="application/pdf,.pdf" />
 </div>
<!-- Clock & Timer -->
 <div id="clock-container">
 <div id="clock-display">00:00:00</div>
 <div id="timer-setup">
 <div class="timer-row" style="display:flex; gap:8px; justify-content:center; align-items:center;">
 <input type="number" id="timer-input" min="1" />
 <input type="text" id="timer-message-input" />
 <button id="timer-start-btn">Start</button>
 </div>
 <!-- Presets removed -->
 </div>
 <div id="timer-controls" style="display:none">
 <button id="timer-pause-btn">Pause</button>
 <button id="timer-stop-btn">Stop</button>
 </div>
 </div>
<!-- Slide navigation arrows and page indicator (bottom right) -->
 <div id="slide-nav-bar" style="position:absolute; right:18px; bottom:18px; z-index:1201; display:flex; align-items:center; gap:8px;">
 <button id="prev-slide" class="arrow-button small-arrow" title="Previous Slide" aria-label="Previous Slide" style="position:static;">&#8592;</button>
 <div id="page-indicator" class="small-indicator" style="position:static;">1 / 1</div>
 <button id="next-slide" class="arrow-button small-arrow" title="Next Slide" aria-label="Next Slide" style="position:static;">&#8594;</button>
 </div>
<!-- Welcome overlay -->
 <div id="welcome-screen"><p>Please select a PDF to begin</p></div>
<!-- Timer banner -->
 <div id="timer-banner" class="hidden"><div id="timer-banner-text"></div></div>
<script>
 console.info('[PDF Viewer] ready v2.0');
 if (window.pdfjsLib) {
 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
 } else {
 console.error('PDF.js failed to load.');
 const ws = document.getElementById('welcome-screen');
 if (ws) { ws.textContent = 'PDF.js failed to load. Check your network connection and reload.'; }
 }
 // --- 1. DOM ---
 const mainTools = document.querySelectorAll('.main-tool');
 const canvases = [document.getElementById('pdf-canvas-1'), document.getElementById('pdf-canvas-2')];
 const ctxs = [canvases[0].getContext('2d'), canvases[1].getContext('2d')];
 const spotlightCanvas = document.getElementById('spotlight-canvas');
 const spotlightCtx = spotlightCanvas.getContext('2d');
 const toolSpotlightBtn = document.getElementById('tool-spotlight');
 const prevSlideBtn = document.getElementById('prev-slide');
 const nextSlideBtn = document.getElementById('next-slide');
 const linksContainer = document.getElementById('links-container');
 const clearDrawBtn = document.getElementById('clear-draw');
 const colorButtons = document.querySelectorAll('.color-button[data-color]');
 const pageSlider = document.getElementById('page-slider');
 const pageNumberInput = document.getElementById('page-number-input');
 const pdfUploadInput = document.getElementById('pdf-upload');
 const pdfFileLoader = document.getElementById('file-loader');
 const openPdfLabel = document.querySelector('label[for="pdf-upload"]');
 if (pdfUploadInput) {
 pdfUploadInput.addEventListener('click', () => { pdfUploadInput.value = ''; });
 }
 if (openPdfLabel) {
 const triggerPicker = () => { if (pdfUploadInput) { pdfUploadInput.value = ''; pdfUploadInput.click(); } };
 openPdfLabel.addEventListener('click', (e) => { e.preventDefault(); triggerPicker(); });
 openPdfLabel.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); triggerPicker(); } });
 }
 const toolPenBtn = document.getElementById('tool-pen');
 const toolRectangleBtn = document.getElementById('tool-rectangle');
 const thicknessIncreaseBtn = document.getElementById('thickness-increase');
 const thicknessDecreaseBtn = document.getElementById('thickness-decrease');
 const drawingToolBtns = document.querySelectorAll('.drawing-tool');
 const clockContainer = document.getElementById('clock-container');
 const clockDisplay = document.getElementById('clock-display');
 const timerInput = document.getElementById('timer-input');
 const timerSetupDiv = document.getElementById('timer-setup');
 const timerControlsDiv = document.getElementById('timer-controls');
 const timerStartBtn = document.getElementById('timer-start-btn');
 const timerPauseBtn = document.getElementById('timer-pause-btn');
 const timerStopBtn = document.getElementById('timer-stop-btn');
 const timerMessageInput = document.getElementById('timer-message-input');
 const timerBanner = document.getElementById('timer-banner');
 const timerBannerText = document.getElementById('timer-banner-text');
 const welcomeScreen = document.getElementById('welcome-screen');
 const pageIndicator = document.getElementById('page-indicator');
 // --- 2. State ---
 let pdfDoc = null, currentPage = 1, totalPages = 0;
 let isDrawing = false;
 let drawColor = 'red';
 let activeCanvasIndex = 0, isTransitioning = false;
 let lastX = 0, lastY = 0;
 let currentTool = 'pen';
 let lineWidth = 4;
 let shapeStartX = 0, shapeStartY = 0;
 let shapeSnapshot = null;
 let spotlightMode = false;
 let clockInterval, timerInterval, timerState = 'stopped', timerRemainingTime = 0;
 let queuedPage = null;
 function normalizeUrl(u){
 try{ const url = new URL(u); url.hash=''; url.host=url.host.toLowerCase(); url.pathname=url.pathname.replace(/\/+$/, ''); return url.toString(); }
 catch{ return (u||'').trim().toLowerCase().replace(/\/+$/, ''); }
 }
 function makeLinkLabel(url, title){ if(title) return title; try{ return new URL(url).hostname }catch{ return url } }
 function addLinkButton(url, title, perPageSeen){
 const norm = normalizeUrl(url); if(perPageSeen.has(norm)) return; perPageSeen.add(norm);
 const a = document.createElement('a');
 a.href = url; a.target = '_blank'; a.rel = 'noopener noreferrer'; a.className = 'link-button';
 a.innerHTML = `<span>${makeLinkLabel(url, title) || 'Link'}</span>
 <svg class="link-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14 3h7v7h-2V6.414l-7.293 7.293a1 1 0 1 1-1.414-1.414L17.586 5H14V3ZM5 5h5a1 1 0 1 1 0 2H6v10h10v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"/></svg>`;
 linksContainer.appendChild(a);
 }
 async function renderPdfPage(pageNumber, canvas, context){
 if(!pdfDoc) return;
 linksContainer.innerHTML = '';
 const perPageSeen = new Set();
 const page = await pdfDoc.getPage(pageNumber);
 const pdfViewport = page.getViewport({ scale:1.0 });
 const scale = Math.min(window.innerWidth / pdfViewport.width, window.innerHeight / pdfViewport.height);
 const viewport = page.getViewport({ scale });
 canvas.width = viewport.width; canvas.height = viewport.height;
 canvas.style.width = `${viewport.width}px`; canvas.style.height = `${viewport.height}px`;
 const renderContext = { canvasContext: context, viewport };
 await page.render(renderContext).promise;
 if (canvas === canvases[activeCanvasIndex]){
 const annotations = await page.getAnnotations();
 annotations.forEach(ann => { if(ann && ann.url) addLinkButton(ann.url, ann.title, perPageSeen); });
 }
 pageIndicator.textContent = `${pageNumber} / ${totalPages || 1}`;
 }
 async function loadPdf(pdfSource){
 try{
 if (!window.pdfjsLib) throw new Error('PDF.js not available');
 const isLocalFile = location && location.protocol === 'file:';
 let loadingTask;
 if (pdfSource instanceof ArrayBuffer) {
 loadingTask = pdfjsLib.getDocument({ data: new Uint8Array(pdfSource), disableWorker: isLocalFile });
 } else if (pdfSource && typeof pdfSource.byteLength === 'number') {
 loadingTask = pdfjsLib.getDocument({ data: new Uint8Array(pdfSource), disableWorker: isLocalFile });
 } else if (typeof pdfSource === 'string') {
 loadingTask = pdfjsLib.getDocument({ url: pdfSource, disableWorker: isLocalFile });
 } else {
 throw new Error('Unsupported PDF source');
 }
 welcomeScreen.textContent = 'Loading...';
 const doc = await loadingTask.promise;
 pdfDoc = doc;
 linksContainer.innerHTML = '';
 totalPages = pdfDoc.numPages; currentPage = 1;
 pageSlider.max = totalPages; pageSlider.value = 1;
 pageNumberInput.max = totalPages; pageNumberInput.value = 1;
 pageIndicator.textContent = `1 / ${totalPages}`;
 canvases[0].style.zIndex = 1; canvases[0].style.opacity = '1';
 canvases[1].style.zIndex = 0; canvases[1].style.opacity = '0';
 activeCanvasIndex = 0;
 await renderPdfPage(currentPage, canvases[0], ctxs[0]);
 if (prevSlideBtn) prevSlideBtn.disabled = currentPage === 1;
 if (nextSlideBtn) nextSlideBtn.disabled = currentPage === totalPages;
 welcomeScreen.style.display = 'none';
 }catch(error){
 console.error('Error loading PDF:', error);
 const msg = (error && error.message) ? error.message : 'Failed to load PDF. Please try another file.';
 welcomeScreen.textContent = `Failed to load PDF: ${msg}`;
 welcomeScreen.style.display = 'block';
 pdfDoc = null;
 }
 }
 async function transitionToPage(pageNumber){
 if(isTransitioning || !pdfDoc) return; isTransitioning = true;
 const oldCanvasIndex = activeCanvasIndex; const newCanvasIndex = 1 - oldCanvasIndex;
 const oldCanvas = canvases[oldCanvasIndex]; const newCanvas = canvases[newCanvasIndex];
 activeCanvasIndex = newCanvasIndex;
 await renderPdfPage(pageNumber, newCanvas, ctxs[newCanvasIndex]);
 newCanvas.style.zIndex = 1; oldCanvas.style.zIndex = 0;
 newCanvas.style.opacity = '1'; oldCanvas.style.opacity = '0';
 currentPage = pageNumber;
 setTimeout(() => {
 isTransitioning = false;
 if (queuedPage && queuedPage !== currentPage) {
 const next = queuedPage; queuedPage = null;
 transitionToPage(next);
 }
 }, 350);
 if (prevSlideBtn) prevSlideBtn.disabled = currentPage === 1;
 if (nextSlideBtn) nextSlideBtn.disabled = currentPage === totalPages;
 pageSlider.value = currentPage; pageNumberInput.value = currentPage;
 }
 function setDrawColor(newColor){ drawColor = newColor; colorButtons.forEach(btn => btn.classList.remove('active-color')); const btn = document.querySelector(`.color-button[data-color="${newColor}"]`); if(btn) btn.classList.add('active-color'); }
 function changeThickness(amount){ lineWidth = Math.max(2, Math.min(50, lineWidth + amount)); }
 function setTool(tool){ if(spotlightMode) toggleSpotlightMode(false); currentTool = tool; drawingToolBtns.forEach(btn => btn.classList.remove('active')); const t=document.getElementById(`tool-${tool}`); if(t) t.classList.add('active'); }
 function drawSpotlight(e){
 spotlightCtx.clearRect(0,0,spotlightCanvas.width,spotlightCanvas.height);
 spotlightCtx.fillStyle = 'rgba(0,0,0,.82)';
 spotlightCtx.fillRect(0,0,spotlightCanvas.width,spotlightCanvas.height);
 spotlightCtx.globalCompositeOperation = 'destination-out';
 spotlightCtx.beginPath(); spotlightCtx.arc(e.pageX, e.pageY, 110, 0, Math.PI*2); spotlightCtx.fill();
 spotlightCtx.globalCompositeOperation = 'source-over';
 }
 function toggleSpotlightMode(forceState){
 spotlightMode = forceState !== undefined ? forceState : !spotlightMode;
 if(spotlightMode){
 drawingToolBtns.forEach(btn => btn.classList.remove('active')); toolSpotlightBtn.classList.add('active');
 spotlightCanvas.width = window.innerWidth; spotlightCanvas.height = window.innerHeight; spotlightCanvas.style.display='block';
 window.addEventListener('mousemove', drawSpotlight);
 }else{
 spotlightCanvas.style.display='none'; window.removeEventListener('mousemove', drawSpotlight);
 if(toolSpotlightBtn.classList.contains('active')) setTool('pen');
 }
 }
 const goToPage = (num)=>{
 if(!pdfDoc || num < 1 || num > totalPages || num === currentPage) return;
 if (isTransitioning) { queuedPage = num; return; }
 transitionToPage(num);
 };
 const clearDrawing = ()=>{ if(pdfDoc) renderPdfPage(currentPage, canvases[activeCanvasIndex], ctxs[activeCanvasIndex]); };
 const stopDrawing = ()=>{
 if(!isDrawing) return; isDrawing=false; const ctx=ctxs[activeCanvasIndex];
 if(currentTool==='pen'){ ctx.closePath(); }
 else if(currentTool==='rectangle'){ ctx.putImageData(shapeSnapshot,0,0); ctx.strokeStyle=drawColor; ctx.lineWidth=lineWidth; ctx.strokeRect(shapeStartX, shapeStartY, lastX-shapeStartX, lastY-shapeStartY); }
 };
 if (pdfUploadInput) {
 pdfUploadInput.addEventListener('change', (e)=>{
 const file = e.target.files && e.target.files[0];
 if (!file) return;
 const isPdf = (file.type === 'application/pdf') || (file.name && file.name.toLowerCase().endsWith('.pdf'));
 if (!isPdf) {
 welcomeScreen.textContent = 'Please choose a PDF file (.pdf).';
 welcomeScreen.style.display = 'block';
 e.target.value = '';
 return;
 }
 const reader = new FileReader();
 reader.onload = (ev) => { loadPdf(ev.target.result); };
 reader.onerror = () => { welcomeScreen.textContent = 'Could not read the file.'; welcomeScreen.style.display = 'block'; };
 reader.onloadend = () => { e.target.value = ''; };
 reader.readAsArrayBuffer(file);
 });
 }
 toolPenBtn.addEventListener('click', ()=>setTool('pen'));
 toolRectangleBtn.addEventListener('click', ()=>setTool('rectangle'));
 toolSpotlightBtn.addEventListener('click', ()=>toggleSpotlightMode());
 thicknessIncreaseBtn.addEventListener('click', ()=>changeThickness(2));
 thicknessDecreaseBtn.addEventListener('click', ()=>changeThickness(-2));
 document.addEventListener('keydown', (event)=>{
 const tag = (event.target && event.target.tagName ? event.target.tagName.toLowerCase() : '');
 const isTextInput = tag === 'input' || tag === 'textarea' || tag === 'select' || (event.target && event.target.isContentEditable);
 if (event.key === 'ArrowLeft' || event.key === 'ArrowRight'){
 event.preventDefault();
 if (event.key === 'ArrowLeft') goToPage(currentPage - 1); else goToPage(currentPage + 1);
 if (event.target === pageSlider || event.target === pageNumberInput) {
 event.target.blur();
 }
 return;
 }
 if(isTextInput) return;
 switch(event.key){
 case 'e': clearDrawing(); break;
 case 'd': setTool('rectangle'); break;
 case 's': toggleSpotlightMode(); break;
 case 't': setTool('pen'); break;
 case '+': changeThickness(2); break;
 case '-': changeThickness(-2); break;
 case 'h':
 mainTools.forEach(el => { if (el.id !== 'bottom-bar') el.classList.toggle('hidden'); });
 const bottomBar = document.getElementById('bottom-bar');
 if (bottomBar) { const sliderWrap = bottomBar.querySelector('.slider-container'); if (sliderWrap) sliderWrap.classList.toggle('hidden'); }
 break;
 case 'f':
 if (!document.fullscreenElement) {
 document.documentElement.requestFullscreen().catch(err=>console.error(err));
 } else {
 document.exitFullscreen();
 }
 break;
 case 'c': clockContainer.classList.toggle('hidden'); break;
 case 'p': pdfFileLoader.classList.toggle('hidden'); break;
 case 'r': setDrawColor('red'); break;
 case 'g': setDrawColor('green'); break;
 case 'b': setDrawColor('blue'); break;
 case 'y': setDrawColor('yellow'); break;
 case 'o': setDrawColor('orange'); break;
 case 'l':
 case 'L':
 linksContainer.classList.toggle('hidden');
 break;
 }
 });
 canvases.forEach((canvas, index)=>{
 canvas.addEventListener('mousedown', e=>{
 if(index!==activeCanvasIndex || spotlightMode) return; isDrawing=true; const ctx=ctxs[activeCanvasIndex];
 if(currentTool==='pen'){
 [lastX,lastY] = [e.offsetX, e.offsetY]; ctx.beginPath(); ctx.moveTo(lastX,lastY);
 ctx.strokeStyle=drawColor; ctx.lineWidth=lineWidth; ctx.lineCap='round'; ctx.lineJoin='round';
 } else if(currentTool==='rectangle'){
 shapeSnapshot = ctx.getImageData(0,0,canvas.width,canvas.height);
 [shapeStartX,lastX] = [e.offsetX, e.offsetX]; [shapeStartY,lastY] = [e.offsetY, e.offsetY];
 }
 });
 canvas.addEventListener('mousemove', e=>{
 if(!isDrawing || index!==activeCanvasIndex || spotlightMode) return; const ctx=ctxs[activeCanvasIndex];
 if(currentTool==='pen'){
 ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); [lastX,lastY] = [e.offsetX, e.offsetY];
 } else if(currentTool==='rectangle'){
 ctx.putImageData(shapeSnapshot,0,0); ctx.strokeStyle=drawColor; ctx.lineWidth=lineWidth;
 ctx.strokeRect(shapeStartX, shapeStartY, e.offsetX-shapeStartX, e.offsetY-shapeStartY);
 [lastX,lastY] = [e.offsetX, e.offsetY];
 }
 });
 });
 window.addEventListener('mouseup', stopDrawing);
 window.addEventListener('blur', stopDrawing);
 window.addEventListener('resize', ()=>{
 if(pdfDoc) renderPdfPage(currentPage, canvases[activeCanvasIndex], ctxs[activeCanvasIndex]);
 if(spotlightMode){ spotlightCanvas.width = window.innerWidth; spotlightCanvas.height = window.innerHeight; }
 });
 clearDrawBtn.addEventListener('click', clearDrawing);
 colorButtons.forEach(btn=>btn.addEventListener('click', ()=>setDrawColor(btn.dataset.color)));
 if (prevSlideBtn) prevSlideBtn.addEventListener('click', ()=>goToPage(currentPage-1));
 if (nextSlideBtn) nextSlideBtn.addEventListener('click', ()=>goToPage(currentPage+1));
 pageSlider.addEventListener('input', e=>goToPage(parseInt(e.target.value,10)));
 pageNumberInput.addEventListener('change', e=>goToPage(parseInt(e.target.value,10)));
 /* ---- Clock & Timer ---- */
 function showBanner(text){ if(!timerBanner || !timerBannerText) return; timerBannerText.textContent = text; timerBanner.classList.remove('hidden'); }
 function hideBanner(){ if(!timerBanner) return; timerBanner.classList.add('hidden'); }
 function playEndBeeps(count=1){
 let beepsPlayed=0; const audioCtx = new (window.AudioContext||window.webkitAudioContext)();
 function beep(){ if(beepsPlayed>=count) return; const osc=audioCtx.createOscillator(); osc.type='sine'; osc.frequency.setValueAtTime(880, audioCtx.currentTime);
 osc.connect(audioCtx.destination); osc.start(); osc.stop(audioCtx.currentTime+0.3); beepsPlayed++; setTimeout(beep, 500); }
 beep();
 }
 function displayTime(ms){ if(ms<0) ms=0; const mins=Math.floor(ms/60000); const secs=Math.floor((ms%60000)/1000); clockDisplay.textContent = `${String(mins).padStart(2,'0')}:${String(secs).padStart(2,'0')}`; }
 function startClock(){ clearInterval(timerInterval); const update=()=>clockDisplay.textContent=new Date().toLocaleTimeString(); update(); clockInterval=setInterval(update, 1000); }
 function runTimer(duration){
 clearInterval(clockInterval);
 const endTime=Date.now()+duration;
 timerState='running';
 timerInterval=setInterval(()=>{
 timerRemainingTime=endTime-Date.now();
 if(timerRemainingTime<=0){
 playEndBeeps(3);
 stopTimer(); // ensures UI reset + Start visible
 } else {
 displayTime(timerRemainingTime);
 }
 }, 250);
 displayTime(duration);
 }
 // ✅ Strong reset so Start always returns
 function stopTimer(){
 clearInterval(timerInterval);
 timerState='stopped';
 timerRemainingTime=0;
 // UI reset
 timerControlsDiv.style.display='none';
 timerSetupDiv.style.display='flex'; // keep original layout
 timerPauseBtn.textContent='Pause';
 clockContainer.classList.remove('running');
 hideBanner();
 // restore live clock
 startClock();
 // ready for next run
 if (timerInput) timerInput.value = '';
 if (timerMessageInput) timerMessageInput.value = '';
 setTimeout(() => timerInput && timerInput.focus(), 0);
 }
 // 🔁 Start from inputs (used by button and Enter key)
 function startFromInputs(){
 const minutes = parseInt(timerInput.value,10);
 const msg = (timerMessageInput && timerMessageInput.value.trim()) || '';
 if(minutes && minutes>0){
 runTimer(minutes*60*1000);
 if (msg) { showBanner(msg); } else { hideBanner(); }
 clockContainer.classList.add('running'); // large clock while running
 timerSetupDiv.style.display='none';
 timerControlsDiv.style.display='flex';
 timerPauseBtn.textContent='Pause';
 timerInput.value='';
 }
 }
 // Start button
 timerStartBtn.addEventListener('click', startFromInputs);
 // Enter in either field starts timer
 [timerInput, timerMessageInput].forEach(el=>{
 el.addEventListener('keydown', (e)=>{
 if (e.key === 'Enter'){
 e.preventDefault();
 startFromInputs();
 }
 });
 });
 timerPauseBtn.addEventListener('click', ()=>{
if(timerState==='running'){
 clearInterval(timerInterval); timerState='paused'; timerPauseBtn.textContent='Resume';
 } else if(timerState==='paused'){
 runTimer(timerRemainingTime); timerState='running'; timerPauseBtn.textContent='Pause';
 }
 });
 timerStopBtn.addEventListener('click', stopTimer);
 // --- 6. Init ---
 function init(){ setDrawColor('red'); setTool('pen'); startClock(); }
 init();
 </script>
</body>
</html>