PART B
```html
```
<!DOCTYPE html>
<html>
<head>
<title>Google Drive API Gallery</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif; [cite: 3]
background: #f5f5f5;
}
#gallery {
display: grid; [cite: 4]
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [cite: 5]
gap: 20px;
}
.card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1); [cite: 6]
transition: 0.3s;
}
.card:hover {
transform: translateY(-5px); [cite: 7]
}
img {
width: 100%;
height: 300px;
object-fit: cover; [cite: 8]
display: block;
}
.title {
padding: 10px;
text-align: center;
font-size: 14px; [cite: 9]
word-break: break-word;
}
.loading {
text-align: center;
font-size: 20px;
padding: 40px; [cite: 10]
}
.error {
color: red;
text-align: center;
padding: 40px; [cite: 11]
}
</style>
</head>
<body>
<div class="loading" id="loading">Loading images from Drive API...</div>
<div id="gallery"></div>
<script>
// Replace with your newly deployed Web App URL [cite: 12]
const WEB_APP_URL = "https://script.google.com/macros/s/AKfycbxVK2zP-l2r7yveTlbcNyX6OrZOnfs86cqm_t9kAZU0QrA_gOP7hE5n_msUVAGKJwPmwQ/exec";
fetch(WEB_APP_URL) [cite: 12]
.then(response => {
if (!response.ok) throw new Error("HTTP error " + response.status);
return response.json();
})
.then(images => {
document.getElementById("loading").style.display = "none";
const gallery = document.getElementById("gallery");
let html = "";
images.forEach(image => { [cite: 13]
html += `
<div class="card">
<img
src="${image.url}"
alt="${image.name}"
loading="lazy"
referrerpolicy="no-referrer"
>
<div class="title">${image.name}</div> [cite: 14]
</div>
`;
});
gallery.innerHTML = html;
})
.catch(error => {
document.body.innerHTML = `
<div class="error">
Failed to load images via Drive API
<br><br>
${error}
</div>
`;
console.error(error); [cite: 15]
});
</script>
</body>
</html>
Comments
Post a Comment