@slidef/cli
Version:
CLI tool for converting PDF slides to web-viewable format
145 lines (135 loc) • 6.63 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slidef Viewer</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/viewer.css">
</head>
<body>
<!-- Close button - top right -->
<div id="close-container" class="close-container">
<button id="close-button" class="icon-button" aria-label="Close viewer">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
</svg>
</button>
</div>
<!-- Menu - bottom right -->
<div id="menu-container" class="menu-container">
<button id="scroll-mode-toggle" class="icon-button" aria-label="Toggle scroll mode">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path class="slide-mode-icon hidden" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm2 1v10h10V5H5z"/>
<path class="scroll-mode-icon" d="M3 3h14v3H3V3zm0 5h14v3H3V8zm0 5h14v3H3v-3z"/>
</svg>
</button>
<button id="overview-button" class="icon-button" aria-label="Slide overview">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 3h6v6H3V3zm0 8h6v6H3v-6zm8-8h6v6h-6V3zm0 8h6v6h-6v-6z"/>
</svg>
</button>
<button id="share-button" class="icon-button" aria-label="Share">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"/>
</svg>
</button>
<button id="fullscreen-toggle" class="icon-button" aria-label="Toggle fullscreen">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path class="fullscreen-enter-icon" d="M3 3h5v2H5v3H3V3zm9 0h5v5h-2V5h-3V3zM3 12h2v3h3v2H3v-5zm9 5h5v-5h-2v3h-3v2z"/>
<path class="fullscreen-exit-icon hidden" d="M8 3v5H3V6h3V3h2zm4 0h2v3h3v2h-5V3zM3 12h5v5H6v-3H3v-2zm9 5v-5h5v2h-3v3h-2z"/>
</svg>
</button>
</div>
<!-- Slide container -->
<main id="slide-container" class="slide-container">
<div id="slides-wrapper" class="slides-wrapper">
<img id="slide-prev" class="slide-image slide-prev loading" alt="Previous slide" />
<img id="slide-current" class="slide-image slide-current loading" alt="Current slide" />
<img id="slide-next" class="slide-image slide-next loading" alt="Next slide" />
<div id="slide-loading" class="slide-loading"></div>
</div>
<!-- Clickable navigation areas -->
<div id="nav-area-prev" class="nav-area nav-area-prev" aria-label="Previous slide"></div>
<div id="nav-area-next" class="nav-area nav-area-next" aria-label="Next slide"></div>
</main>
<!-- Scroll container (hidden by default) -->
<div id="scroll-container" class="scroll-container hidden">
<!-- All slides will be dynamically inserted here in scroll mode -->
</div>
<!-- Progress bar - bottom of screen -->
<div id="progress-container" class="progress-container">
<div id="progress-bar" class="progress-bar">
<div id="progress-fill" class="progress-fill"></div>
</div>
<!-- Thumbnail preview (shown on progress bar hover) -->
<div id="thumbnail-preview" class="thumbnail-preview hidden">
<img id="thumbnail-image" class="thumbnail-image" alt="Preview" />
<div id="thumbnail-number" class="thumbnail-number"></div>
</div>
</div>
<!-- Overview Modal -->
<div id="overview-modal" class="overview-modal hidden">
<div class="overview-modal-header">
<h2>Slide Overview</h2>
<button id="overview-modal-close" class="modal-close-button" aria-label="Close modal">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
</svg>
</button>
</div>
<div class="overview-modal-content">
<div id="overview-grid" class="overview-grid">
<!-- Slide thumbnails will be dynamically inserted here -->
</div>
</div>
</div>
<!-- Share Modal -->
<div id="share-modal" class="share-modal hidden">
<div class="share-modal-content">
<div class="share-modal-header">
<h2>Share Presentation</h2>
<button id="share-modal-close" class="modal-close-button" aria-label="Close modal">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
</svg>
</button>
</div>
<div class="share-modal-body">
<div class="share-option">
<h3>View Mode</h3>
<p>Choose how viewers will see your presentation</p>
<div class="share-mode-options">
<label class="share-mode-option">
<input type="radio" name="share-mode" value="slide" checked />
<span>Slide Mode</span>
</label>
<label class="share-mode-option">
<input type="radio" name="share-mode" value="scroll" />
<span>Scroll Mode</span>
</label>
</div>
</div>
<div class="share-option">
<h3>Direct Link</h3>
<p>Share this link to let others view your presentation</p>
<div class="share-input-group">
<input type="text" id="share-link-input" readonly class="share-input" />
<button id="copy-link-button" class="copy-button">Copy</button>
</div>
</div>
<div class="share-option">
<h3>Embed Code</h3>
<p>Embed this presentation in your website</p>
<div class="share-input-group">
<textarea id="share-embed-input" readonly class="share-textarea"></textarea>
<button id="copy-embed-button" class="copy-button">Copy</button>
</div>
</div>
</div>
</div>
</div>
<script src="/js/viewer.js"></script>
</body>
</html>