Spaces:
Running
on
Zero
Running
on
Zero
File size: 3,427 Bytes
4143239 8c2de79 0c25969 4143239 8c2de79 4143239 8c2de79 0c25969 8c2de79 4143239 8c2de79 4143239 8c2de79 4143239 0c25969 8c2de79 bbf108f 8c2de79 47d588d 8c2de79 bbf108f 8c2de79 47d588d 8c2de79 0c25969 bbf108f 0c25969 bbf108f 0c25969 4143239 fb5226b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!DOCTYPE html>
<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('photo of a rainbow-haired, 19 years old, asian girl, beautiful, stunning, ,instagram model, discord profile picture face focused')"></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('a old granny with pink hair, 95 years old, instagram model, discord profile picture')"></i>
<p>A old granny with pink hair, 95 years old</p>
</div>
<div class="gallery-item">
<img src="7451277.jpeg" alt="Image 2">
<i class="fas fa-copy copy-icon" onclick="copyToClipboard('a old granny with pink hair, 95 years old, instagram model, discord profile picture')"></i>
<p>A old granny with pink hair, 95 years old</p>
</div>
<div class="gallery-item">
<img src="7451277.jpeg" alt="Image 2">
<i class="fas fa-copy copy-icon" onclick="copyToClipboard('a old granny with pink hair, 95 years old, instagram model, discord profile picture')"></i>
<p>A old granny with pink hair, 95 years old</p>
</div>
<div class="gallery-item">
<img src="7451277.jpeg" alt="Image 2">
<i class="fas fa-copy copy-icon" onclick="copyToClipboard('a old granny with pink hair, 95 years old, instagram model, discord profile picture')"></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 = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
alert("Copied to clipboard: " + text);
}
</script>
</body>
</html>
|