Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>View Image: {{ file_name }}</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| .image-container { | |
| background-color: #f8f9fa; | |
| padding: 20px; | |
| border-radius: 8px; | |
| margin-bottom: 30px; | |
| } | |
| .embed-options { | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| .code-container { | |
| background-color: #f5f5f5; | |
| padding: 10px; | |
| border-radius: 4px; | |
| margin-top: 10px; | |
| font-family: monospace; | |
| font-size: 0.8rem; | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| } | |
| .copy-btn { | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container py-5"> | |
| <div class="d-flex justify-content-between align-items-center mb-4"> | |
| <h1>Image Details: {{ file_name }}</h1> | |
| <a href="/" class="btn btn-outline-primary">Back to Gallery</a> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-8"> | |
| <div class="image-container"> | |
| <img src="{{ image_url }}" class="img-fluid" alt="{{ file_name }}"> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="embed-options"> | |
| <h3>Embed Options</h3> | |
| <div class="mb-3"> | |
| <h5>1. Direct URL</h5> | |
| <div class="input-group"> | |
| <input type="text" id="directUrl" class="form-control" value="{{ embed_url }}" readonly> | |
| <button class="btn btn-outline-secondary copy-btn" data-target="directUrl">Copy</button> | |
| </div> | |
| <small class="text-muted">Use this URL to link directly to the image.</small> | |
| </div> | |
| <div class="mb-3"> | |
| <h5>2. HTML Embed Code</h5> | |
| <div class="code-container" id="htmlEmbed"><img src="{{ embed_url }}" alt="{{ file_name }}" /></div> | |
| <button class="btn btn-sm btn-outline-secondary mt-2 copy-btn" data-target="htmlEmbed">Copy HTML</button> | |
| <small class="text-muted d-block mt-2">Use this code to embed the image in an HTML page.</small> | |
| </div> | |
| <div class="mb-3"> | |
| <h5>3. Markdown Embed</h5> | |
| <div class="code-container" id="markdownEmbed"></div> | |
| <button class="btn btn-sm btn-outline-secondary mt-2 copy-btn" data-target="markdownEmbed">Copy Markdown</button> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="btn btn-danger delete-btn" data-filename="{{ file_name }}">Delete Image</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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.textContent; | |
| this.textContent = 'Copied!'; | |
| setTimeout(() => { | |
| this.textContent = 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; | |
| if (confirm(`Are you sure you want to delete ${filename}?`)) { | |
| fetch(`/delete/${filename}`, { | |
| method: 'DELETE' | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| 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> |