@slidef/cli
Version:
CLI tool for converting PDF slides to web-viewable format
113 lines (107 loc) • 4.35 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slidef - Slide Presentations</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div class="container">
<header class="page-header">
<div>
<h1 class="page-title">📚 Slide Presentations</h1>
<p class="page-subtitle">View and manage your slide decks</p>
</div>
<button id="import-btn" class="import-btn hidden">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
</svg>
Import PDF
</button>
</header>
<div id="empty-state" class="empty-state hidden">
<div class="empty-state-icon">📭</div>
<h2 class="empty-state-title">No slides found</h2>
<p class="empty-state-text">
Import your first PDF slide deck to get started.
</p>
<code class="empty-state-code">slidef import presentation.pdf</code>
</div>
<div id="slides-container" class="slides-grid hidden">
<!-- Slides will be dynamically inserted here -->
</div>
</div>
<!-- Import Modal -->
<div id="import-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h2>Import PDF Slide</h2>
<button id="close-modal" class="close-btn">×</button>
</div>
<form id="import-form" class="import-form">
<div class="form-group">
<label for="pdf-file">PDF File</label>
<input type="file" id="pdf-file" name="pdf" accept=".pdf" required>
</div>
<div class="form-group">
<label for="slide-name">Slide Name</label>
<input type="text" id="slide-name" name="name" placeholder="Auto-generated from filename">
</div>
<div class="form-group">
<label for="slide-title">Title (optional)</label>
<input type="text" id="slide-title" name="title" placeholder="Display title">
</div>
<div class="form-group">
<label for="created-date">Created Date</label>
<input type="date" id="created-date" name="createdAt">
<small>Leave empty to use today's date</small>
</div>
<div class="form-group">
<label for="scale-factor">Scale Factor</label>
<input type="number" id="scale-factor" name="scale" value="2" min="1" max="4" step="0.5">
<small>Higher values = better quality, larger file size</small>
</div>
<div class="modal-actions">
<button type="button" id="cancel-import" class="btn-secondary">Cancel</button>
<button type="submit" class="btn-primary">Import</button>
</div>
</form>
<div id="import-progress" class="import-progress hidden">
<div class="progress-spinner"></div>
<p id="progress-message">Importing PDF...</p>
</div>
</div>
</div>
<!-- Edit Modal -->
<div id="edit-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h2>Edit Slide</h2>
<button id="close-edit-modal" class="close-btn">×</button>
</div>
<form id="edit-form" class="import-form">
<div class="form-group">
<label for="edit-title">Title</label>
<input type="text" id="edit-title" name="title" required>
</div>
<div class="form-group">
<label for="edit-description">Description (optional)</label>
<textarea id="edit-description" name="description" rows="3" placeholder="Add a description for this slide deck"></textarea>
</div>
<div class="form-group">
<label for="edit-created-at">Created Date</label>
<input type="date" id="edit-created-at" name="createdAt" required>
</div>
<div class="modal-actions">
<button type="button" id="cancel-edit" class="btn-secondary">Cancel</button>
<button type="submit" class="btn-primary">Save</button>
</div>
</form>
</div>
</div>
<script src="/js/index.js"></script>
</body>
</html>