Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Details: {{ original_filename }}</title> | |
| <link rel="icon" type="image/svg+xml" href="/static/favicon/logo-svg.png"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #4361ee; | |
| --secondary-color: #3f37c9; | |
| --accent-color: #4cc9f0; | |
| --success-color: #22cc88; | |
| --light-bg: #f8f9fa; | |
| --dark-text: #212529; | |
| --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); | |
| --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | |
| --danger-color: #e63946; | |
| } | |
| body { | |
| background-color: #f5f7fa; | |
| color: var(--dark-text); | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| padding-bottom: 40px; | |
| } | |
| .navbar { | |
| background-color: white; | |
| box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); | |
| padding: 15px 0; | |
| margin-bottom: 30px; | |
| } | |
| .navbar-brand { | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .navbar-brand i { | |
| font-size: 1.5em; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| } | |
| .card { | |
| border: none; | |
| border-radius: 12px; | |
| box-shadow: var(--card-shadow); | |
| transition: all 0.3s ease; | |
| } | |
| .section-title { | |
| margin-bottom: 20px; | |
| font-weight: 600; | |
| color: var(--dark-text); | |
| border-left: 4px solid var(--primary-color); | |
| padding-left: 12px; | |
| } | |
| .image-container { | |
| background-color: white; | |
| padding: 25px; | |
| border-radius: 12px; | |
| margin-bottom: 30px; | |
| box-shadow: var(--card-shadow); | |
| position: relative; | |
| } | |
| .embed-options { | |
| background-color: white; | |
| padding: 25px; | |
| border-radius: 12px; | |
| box-shadow: var(--card-shadow); | |
| } | |
| .hashtag-edit-container { | |
| background-color: white; | |
| padding: 25px; | |
| border-radius: 12px; | |
| box-shadow: var(--card-shadow); | |
| margin-bottom: 30px; | |
| } | |
| .code-container { | |
| background-color: #f5f7fa; | |
| padding: 15px; | |
| border-radius: 8px; | |
| margin-top: 10px; | |
| font-family: monospace; | |
| font-size: 0.9rem; | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| border: 1px solid #e0e0e0; | |
| } | |
| .copy-btn { | |
| cursor: pointer; | |
| } | |
| .hashtag { | |
| display: inline-block; | |
| background-color: rgba(67, 97, 238, 0.1); | |
| padding: 5px 12px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| color: var(--primary-color); | |
| transition: all 0.2s ease; | |
| font-weight: 500; | |
| text-decoration: none; | |
| } | |
| .hashtag:hover { | |
| background-color: rgba(67, 97, 238, 0.2); | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| } | |
| .hashtags-container { | |
| margin: 15px 0; | |
| } | |
| .btn { | |
| border-radius: 8px; | |
| padding: 10px 20px; | |
| font-weight: 500; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| } | |
| .btn-primary:hover, .btn-primary:focus { | |
| background-color: var(--secondary-color); | |
| border-color: var(--secondary-color); | |
| } | |
| .btn-outline-primary { | |
| color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| } | |
| .btn-outline-primary:hover, .btn-outline-primary:focus { | |
| background-color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-danger { | |
| background-color: #e63946; | |
| border-color: #e63946; | |
| } | |
| .btn-danger:hover, .btn-danger:focus { | |
| background-color: #d00000; | |
| border-color: #d00000; | |
| } | |
| .form-control, .form-select { | |
| border-radius: 8px; | |
| padding: 10px 15px; | |
| border: 1px solid #e0e0e0; | |
| } | |
| .form-control:focus, .form-select:focus { | |
| box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15); | |
| border-color: var(--primary-color); | |
| } | |
| .btn-sm { | |
| padding: 5px 10px; | |
| font-size: 0.8rem; | |
| } | |
| .site-footer { | |
| background-color: white; | |
| padding: 20px 0; | |
| text-align: center; | |
| margin-top: 40px; | |
| border-top: 1px solid #eaeaea; | |
| color: #6c757d; | |
| font-size: 0.9rem; | |
| } | |
| .delete-icon { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| background-color: rgba(255, 255, 255, 0.9); | |
| color: var(--danger-color); | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 3; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| border: none; | |
| } | |
| .delete-icon:hover { | |
| background-color: var(--danger-color); | |
| color: white; | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-light"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/"> | |
| <i class="fas fa-photo-film"></i> | |
| Image Uploader | |
| </a> | |
| <div class="ms-auto"> | |
| <a href="/" class="btn btn-outline-primary me-2"> | |
| <i class="fas fa-th me-2"></i>Gallery | |
| </a> | |
| <a href="/logout" class="btn btn-outline-danger"> | |
| <i class="fas fa-sign-out-alt me-2"></i>Logout | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <h2 class="section-title mb-4">Image Details</h2> | |
| <div class="row"> | |
| <div class="col-lg-8"> | |
| <div class="image-container"> | |
| <button class="delete-icon delete-btn" data-filename="{{ file_name }}" title="Delete image"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| <img src="{{ image_url }}" class="img-fluid rounded" alt="{{ original_filename }}"> | |
| </div> | |
| <div class="hashtag-edit-container"> | |
| <h3 class="section-title">Filename</h3> | |
| <p class="text-muted">{{ original_filename }}</p> | |
| <h3 class="section-title">Hashtags</h3> | |
| <div class="hashtags-container"> | |
| {% if hashtags %} | |
| {% for tag in hashtags %} | |
| <a href="/?tag={{ tag }}" class="hashtag">#{{ tag }}</a> | |
| {% endfor %} | |
| {% else %} | |
| <p class="text-muted">No hashtags added yet.</p> | |
| {% endif %} | |
| </div> | |
| <form method="post" action="/update-hashtags/{{ file_name }}"> | |
| <div class="mb-3"> | |
| <label for="hashtags" class="form-label"> | |
| <i class="fas fa-hashtag me-2"></i>Edit Hashtags | |
| </label> | |
| <input type="text" class="form-control" id="hashtags" name="hashtags" | |
| value="{{ hashtags|join(' ') }}" placeholder="nature photography art"> | |
| <small class="text-muted">Separate hashtags with spaces or commas</small> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-save me-2"></i>Save Hashtags | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="col-lg-4"> | |
| <div class="embed-options"> | |
| <h3 class="section-title">Embed Options</h3> | |
| <div class="mb-4"> | |
| <h5><i class="fas fa-link me-2"></i>Direct URL</h5> | |
| <div class="input-group"> | |
| <input type="text" id="directUrl" class="form-control" value="{{ embed_url }}" readonly> | |
| <button class="btn btn-outline-primary copy-btn" data-target="directUrl"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| <small class="text-muted">Use this URL to link directly to the image.</small> | |
| </div> | |
| <div class="mb-4"> | |
| <h5><i class="fas fa-code me-2"></i>HTML Embed Code</h5> | |
| <div class="code-container" id="htmlEmbed"><img src="{{ embed_url }}" alt="{{ original_filename }}" /></div> | |
| <button class="btn btn-sm btn-outline-primary mt-2 copy-btn" data-target="htmlEmbed"> | |
| <i class="fas fa-copy me-1"></i>Copy HTML | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <h5><i class="fab fa-markdown me-2"></i>Markdown Embed</h5> | |
| <div class="code-container" id="markdownEmbed"></div> | |
| <button class="btn btn-sm btn-outline-primary mt-2 copy-btn" data-target="markdownEmbed"> | |
| <i class="fas fa-copy me-1"></i>Copy Markdown | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="site-footer"> | |
| <div class="container"> | |
| <p class="mb-0">©2025 Detomo. All rights reserved</p> | |
| </div> | |
| </footer> | |
| <!-- Modal for Delete Confirmation --> | |
| <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered"> | |
| <div class="modal-content"> | |
| <div class="modal-header border-0"> | |
| <h5 class="modal-title" id="deleteConfirmModalLabel">Confirm Deletion</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body text-center py-4"> | |
| <div class="mb-4"> | |
| <i class="fas fa-exclamation-triangle text-danger" style="font-size: 3.5rem;"></i> | |
| </div> | |
| <h5 class="mb-3">Are you sure you want to delete this image?</h5> | |
| <p class="text-muted mb-0">This action cannot be undone.</p> | |
| </div> | |
| <div class="modal-footer border-0 justify-content-center"> | |
| <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal"> | |
| <i class="fas fa-times me-2"></i>Cancel | |
| </button> | |
| <button type="button" class="btn btn-danger px-4" id="confirmDeleteBtn"> | |
| <i class="fas fa-trash-alt me-2"></i>Delete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Handle copy buttons | |
| document.querySelectorAll('.copy-btn').forEach(function(btn) { | |
| btn.addEventListener('click', function() { | |
| const targetId = this.dataset.target; | |
| const targetEl = document.getElementById(targetId); | |
| let textToCopy; | |
| if (targetEl.tagName === 'INPUT') { | |
| textToCopy = targetEl.value; | |
| } else { | |
| textToCopy = targetEl.textContent; | |
| } | |
| navigator.clipboard.writeText(textToCopy).then(() => { | |
| // Change button text temporarily | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i class="fas fa-check me-1"></i> Copied!'; | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| }, 1500); | |
| }).catch(err => { | |
| console.error('Failed to copy text: ', err); | |
| }); | |
| }); | |
| }); | |
| // Handle delete button | |
| document.querySelector('.delete-btn').addEventListener('click', function() { | |
| const filename = this.dataset.filename; | |
| // Store the filename for later use | |
| document.getElementById('confirmDeleteBtn').dataset.filename = filename; | |
| // Show the delete confirmation modal | |
| const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal')); | |
| deleteModal.show(); | |
| }); | |
| // Handle delete confirmation | |
| document.getElementById('confirmDeleteBtn').addEventListener('click', function() { | |
| const filename = this.dataset.filename; | |
| const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteConfirmModal')); | |
| fetch(`/delete/${filename}`, { | |
| method: 'DELETE' | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| deleteModal.hide(); | |
| window.location.href = '/'; | |
| } else { | |
| alert('Failed to delete the image.'); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('An error occurred while deleting the image.'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |