71 lines
2.6 KiB
HTML
71 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ComfyUI Gallery</title>
|
||
<link rel="stylesheet" href="gallery.css">
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<h1>ComfyUI Gallery</h1>
|
||
<div class="controls">
|
||
<button id="refreshBtn" class="btn">Refresh</button>
|
||
<select id="sortSelect" class="select">
|
||
<option value="date-desc">Newest First</option>
|
||
<option value="date-asc">Oldest First</option>
|
||
<option value="name-asc">Name A-Z</option>
|
||
<option value="name-desc">Name Z-A</option>
|
||
</select>
|
||
<select id="filterSelect" class="select">
|
||
<option value="all">All Media</option>
|
||
<option value="images">Images Only</option>
|
||
<option value="videos">Videos Only</option>
|
||
</select>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<div id="dropzone" class="dropzone">
|
||
<div class="dropzone-content">
|
||
<div class="dropzone-icon">🖼️</div>
|
||
<p>Loading ComfyUI outputs from server...</p>
|
||
<p class="dropzone-hint">If no files appear, check that the server is running and the output directory is configured correctly</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="gallery" class="gallery hidden">
|
||
<div id="mediaGrid" class="media-grid"></div>
|
||
</div>
|
||
|
||
<div id="loadingIndicator" class="loading hidden">
|
||
<div class="spinner"></div>
|
||
<p>Loading media files...</p>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Modal for full-size preview -->
|
||
<div id="modal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<button class="modal-close" id="modalClose">×</button>
|
||
<div class="modal-nav">
|
||
<button class="nav-btn" id="prevBtn">‹</button>
|
||
<button class="nav-btn" id="nextBtn">›</button>
|
||
</div>
|
||
<div class="modal-media-container">
|
||
<img id="modalImage" class="modal-image" style="display: none;">
|
||
<video id="modalVideo" class="modal-video" style="display: none;" controls></video>
|
||
</div>
|
||
<div class="modal-info">
|
||
<h3 id="modalTitle"></h3>
|
||
<div class="modal-details">
|
||
<span id="modalSize"></span>
|
||
<span id="modalDate"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="gallery.js"></script>
|
||
</body>
|
||
</html> |