Bryan Van Deusen
71 lines
2.8 KiB
HTML
71 lines
2.8 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>ImageRepo - Showcase</title>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||
</head>
|
||
<body class="showcase-body">
|
||
|
||
<!-- Floating navbar overlay -->
|
||
<nav class="showcase-nav">
|
||
<div class="showcase-nav-links">
|
||
<a class="nav-link" href="{{ url_for('main.index') }}">Showcase</a>
|
||
<a class="nav-link" href="{{ url_for('main.gallery') }}">Gallery</a>
|
||
<a class="nav-link" href="{{ url_for('main.tag_list', kind='artist') }}">Artists</a>
|
||
<a class="nav-link" href="{{ url_for('main.tag_list') }}">Tags</a>
|
||
<a class="nav-link" href="{{ url_for('main.settings') }}">Settings</a>
|
||
</div>
|
||
<span class="nav-hint">Press R to shuffle</span>
|
||
</nav>
|
||
|
||
<!-- Masonry grid container - columns created by JS -->
|
||
<div id="showcaseGrid" class="masonry-container"></div>
|
||
|
||
<!-- Initial image data for JS to distribute -->
|
||
<script id="initialImages" type="application/json">
|
||
[{% for image in images %}
|
||
{
|
||
"id": {{ image.id }},
|
||
"filename": "{{ image.filename | e }}",
|
||
"thumb_url": "{{ url_for('main.serve_image', filename=(image.thumb_path or image.filepath) | replace('/images/', '')) }}",
|
||
"full_url": "{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '')) }}",
|
||
"is_video": {{ 'true' if image.filename.lower().endswith(('.mp4', '.mov')) else 'false' }},
|
||
"tags": [{% for t in image.tags %}{"name": "{{ t.name | e }}", "kind": "{{ t.kind }}"}{% if not loop.last %}, {% endif %}{% endfor %}]
|
||
}{% if not loop.last %},{% endif %}
|
||
{% endfor %}]
|
||
</script>
|
||
|
||
<!-- Modal viewer -->
|
||
<div id="imageModal" class="modal">
|
||
<div class="modal-content">
|
||
<button id="modalClose" class="modal-close-btn" title="Close (ESC)">×</button>
|
||
<button id="modalPrev" class="modal-button modal-prev">‹</button>
|
||
<button id="modalNext" class="modal-button modal-next">›</button>
|
||
<span class="modal-close-hint">ESC to close</span>
|
||
|
||
<div class="modal-body">
|
||
<div id="modalImageWrapper" class="modal-image-wrapper">
|
||
<img id="modalImage" src="" alt="Full View">
|
||
</div>
|
||
|
||
<div id="modalTagEditor" class="tag-editor" data-image-id="">
|
||
<div id="modalTagList" class="tags"></div>
|
||
<form id="modalTagForm" class="tag-form" autocomplete="off">
|
||
<div class="tag-form-wrapper">
|
||
<input type="text" id="tagInput" name="name" placeholder="Add tag..." autocomplete="off">
|
||
<div id="tagAutocomplete" class="tag-autocomplete"></div>
|
||
</div>
|
||
<button type="submit">Add</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="{{ url_for('static', filename='js/view-modal.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/showcase.js') }}"></script>
|
||
</body>
|
||
</html>
|