Embedded Files
<html><head><base href="https://tip-calculator.example.com#about">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Random Image Generator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 20px;
}
.images-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
max-width: 1200px;
margin-bottom: 20px;
}
.image-container {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.image-container:hover {
transform: scale(1.05);
}
.image-container img {
display: block;
width: 300px;
height: 300px;
object-fit: cover;
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.image-container:hover .image-overlay {
transform: translateY(0);
}
.load-more-images {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.load-more-images:hover {
background-color: #45a049;
}
.loading {
display: none;
text-align: center;
margin-top: 20px;
}
.loading::after {
content: '';
display: inline-block;
width: 30px;
height: 30px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1>Enhanced Random Image Generator</h1>
<div class="images-wrapper">
</div>
<button class="load-more-images">Load Next 5 Images</button>
<div class="loading"></div>
<script>
const imagesWrapper = document.querySelector(".images-wrapper");
const loadMoreImagesBtn = document.querySelector(".load-more-images");
const loadingIndicator = document.querySelector(".loading");
let count = 1;
function fetchRandomImages(getCount) {
loadingIndicator.style.display = "block";
loadMoreImagesBtn.disabled = true;
for (let i = getCount; i <= getCount + 4; i++) {
fetch(`https://picsum.photos/300?random=${i}`)
.then(response => {
const imageContainer = document.createElement("div");
imageContainer.classList.add("image-container");
const imgElement = document.createElement("img");
imgElement.src = response.url;
imgElement.alt = `Random image ${i}`;
const overlay = document.createElement("div");
overlay.classList.add("image-overlay");
overlay.textContent = `Image ${i}`;
imageContainer.appendChild(imgElement);
imageContainer.appendChild(overlay);
imagesWrapper.appendChild(imageContainer);
if (i === getCount + 4) {
loadingIndicator.style.display = "none";
loadMoreImagesBtn.disabled = false;
}
})
.catch(error => {
console.error("Error fetching image:", error);
loadingIndicator.style.display = "none";
loadMoreImagesBtn.disabled = false;
});
}
}
fetchRandomImages(count);
loadMoreImagesBtn.addEventListener("click", () => {
fetchRandomImages((count += 5));
});
// Lazy loading
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target.querySelector('img');
img.src = img.dataset.src;
observer.unobserve(entry.target);
}
});
});
imagesWrapper.addEventListener('DOMNodeInserted', (event) => {
if (event.target.classList.contains('image-container')) {
imageObserver.observe(event.target);
}
});
}
</script>
</body>
</html>
Page updated
Google Sites
Report abuse