Spaces:
Running
on
Zero
Running
on
Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Gallery</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <style> | |
| .gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| grid-gap: 20px; | |
| padding: 20px; | |
| } | |
| .gallery-item { | |
| position: relative; /* For positioning the copy icon */ | |
| overflow: hidden; | |
| border-radius: 10px; | |
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .gallery-item img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .gallery-item p { | |
| text-align: center; | |
| margin: 10px 0; | |
| font-size: 14px; | |
| color: #666; | |
| } | |
| .copy-icon { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| color: #666; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="gallery"> | |
| <!-- Replace the src attribute with the actual image URLs --> | |
| <div class="gallery-item"> | |
| <img src="assets/1.png" alt="Image 1"> | |
| <i class="fas fa-copy copy-icon" onclick="copyToClipboard('assets/1.png')"></i> | |
| <p>Photo of a rainbow-haired, 19 years old, Asian girl</p> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="7451277.jpeg" alt="Image 2"> | |
| <i class="fas fa-copy copy-icon" onclick="copyToClipboard('7451277.jpeg')"></i> | |
| <p>A old granny with pink hair, 95 years old</p> | |
| </div> | |
| <!-- Add more gallery items as needed --> | |
| </div> | |
| <script> | |
| function copyToClipboard(text) { | |
| var dummy = document.createElement("textarea"); | |
| document.body.appendChild(dummy); | |
| dummy.value = "assets/" + text.split("/").pop(); | |
| dummy.select(); | |
| document.execCommand("copy"); | |
| document.body.removeChild(dummy); | |
| alert("Copied to clipboard: " + dummy.value); | |
| } | |
| </script> | |
| </body> | |
| </html> | |