PART A

```html

// Google Apps Script (Drive API v3)
function doGet() {
  const folderId = '1gG0SVUU2vGRAKTml1kHFqFCKTYTsZ0oz';

  const optionalArgs = {
    q: `'${folderId}' in parents and mimeType contains 'image/' and trashed = false`,
    fields: 'files(id, name, mimeType)',
    pageSize: 100
  };

  const fileList = Drive.Files.list(optionalArgs);
  const files = fileList.files;

  let images = [];

  if (files && files.length > 0) {
    files.forEach(file => {
      images.push({
        name: file.name,
        url: `https://lh3.googleusercontent.com/u/0/d/${file.id}`
      });
    });
  }

  return ContentService
    .createTextOutput(JSON.stringify(images))
    .setMimeType(ContentService.MimeType.JSON);
}


<!-- Frontend HTML -->
<div class="loading" id="loading">Loading images from Drive API...</div>
<div id="gallery"></div>

<script>
  const WEB_APP_URL = "https://script.google.com/macros/s/AKfycbxVK2zP-l2r7yveTlbcNyX6OrZOnfs86cqm_t9kAZU0QrA_gOP7hE5n_msUVAGKJwPmwQ/exec";

  fetch(WEB_APP_URL)
    .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 => {
        html += `
          <div class="card">
            <img src="${image.url}" alt="${image.name}" loading="lazy">
            <div class="title">${image.name}</div>
          </div>
        `;
      });

      gallery.innerHTML = html;
    })
    .catch(error => {
      console.error(error);
    });
</script>
    

```