Add NextSnap PWA with photo gallery viewer and continuous capture
Offline-first photo capture app for Nextcloud with: - Camera capture with continuous mode (auto-reopens after each photo) - File browser with fullscreen image gallery, swipe navigation, and rename - Upload queue with background sync engine - Admin panel for Nextcloud user management - Service worker for offline-first caching (v13) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
306
app/templates/reviewer.html
Normal file
306
app/templates/reviewer.html
Normal file
@@ -0,0 +1,306 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Review Photos - NextSnap{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div id="photo-viewer" class="photo-viewer">
|
||||
<!-- Top Controls -->
|
||||
<div class="viewer-header">
|
||||
<button class="viewer-btn" id="done-btn">Done</button>
|
||||
<div class="photo-position" id="photo-position">1 / 1</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- Main Photo Display -->
|
||||
<div class="photo-container">
|
||||
<div class="photo-spinner" id="photo-spinner">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<img id="current-photo" class="current-photo" alt="Photo">
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<button class="nav-arrow nav-arrow-left" id="prev-btn" aria-label="Previous">←</button>
|
||||
<button class="nav-arrow nav-arrow-right" id="next-btn" aria-label="Next">→</button>
|
||||
|
||||
<!-- Filename Editor -->
|
||||
<div class="filename-editor">
|
||||
<div class="filename-input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
id="filename-input"
|
||||
class="filename-input"
|
||||
placeholder="Enter filename"
|
||||
>
|
||||
<span class="filename-extension">.jpg</span>
|
||||
<div class="save-spinner" id="save-spinner" style="display: none;">
|
||||
<div class="spinner-small"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast Notifications -->
|
||||
<div id="toast" class="toast" style="display: none;"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.photo-viewer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.viewer-btn {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.viewer-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.photo-position {
|
||||
color: white;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.photo-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
touch-action: pan-y pinch-zoom;
|
||||
}
|
||||
|
||||
.current-photo {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.photo-spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.nav-arrow:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.nav-arrow:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.nav-arrow-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-arrow-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.filename-editor {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
padding: 1rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.filename-input-wrapper {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.filename-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filename-extension {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.save-spinner {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.spinner-small {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 8rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
z-index: 10000;
|
||||
max-width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
background: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background: var(--error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Mobile optimizations */
|
||||
@media (max-width: 480px) {
|
||||
.viewer-header {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-size: 1.5rem;
|
||||
padding: 0.75rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.filename-input {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="{{ url_for('static', filename='lib/dexie.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/storage.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/reviewer.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/auth.js') }}"></script>
|
||||
|
||||
<script>
|
||||
// Get parameters from URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const mode = urlParams.get('mode') || 'local';
|
||||
const path = urlParams.get('path') || null;
|
||||
const currentUsername = '{{ username }}';
|
||||
|
||||
async function initReviewer() {
|
||||
await Storage.init();
|
||||
|
||||
let photos = [];
|
||||
|
||||
if (mode === 'local') {
|
||||
// Load pending photos from IndexedDB
|
||||
photos = await Storage.db.photos
|
||||
.where('username').equals(currentUsername)
|
||||
.and(p => p.status === 'pending' || p.status === 'uploading')
|
||||
.sortBy('timestamp');
|
||||
} else {
|
||||
// Load photos from Nextcloud folder
|
||||
// This would be called from the file browser with a list of photos
|
||||
const photoList = sessionStorage.getItem('reviewer_photos');
|
||||
if (photoList) {
|
||||
photos = JSON.parse(photoList);
|
||||
sessionStorage.removeItem('reviewer_photos');
|
||||
}
|
||||
}
|
||||
|
||||
Reviewer.init(mode, currentUsername, photos, path);
|
||||
}
|
||||
|
||||
initReviewer();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user