📋 Quick Checklist

• Google Account (Gmail)
• Access to script.google.com
• Access to your website files
• 15-20 minutes of time

STEP 1: Create Google Apps Script

📄 GOOGLE APPS SCRIPT CODE (Copy Everything Below)

/**
 * 🌺 MIDORI'S 70TH BIRTHDAY CAMERA - GOOGLE APPS SCRIPT
 * This script saves photos to Google Drive and logs data to a spreadsheet
 */

// 📝 CONFIGURATION - Edit these names if you want
var FOLDER_NAME = "Midori 70th Birthday Photos";
var SPREADSHEET_NAME = "Midori Birthday Submissions";

/**
 * Main function that handles POST requests from the camera
 */
function doPost(e) {
  try {
    var data = JSON.parse(e.postData.contents);
    var folder = getOrCreateFolder(FOLDER_NAME);
    var photoFile = savePhotoToDrive(data.photo, data.name, data.frame, data.timestamp, folder);
    logToSpreadsheet(data, photoFile.getUrl());
    
    return ContentService.createTextOutput(JSON.stringify({
      success: true,
      message: "Photo uploaded successfully!",
      photoUrl: photoFile.getUrl(),
      photoId: photoFile.getId()
    })).setMimeType(ContentService.MimeType.JSON);
    
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({
      success: false,
      error: error.toString()
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

function getOrCreateFolder(folderName) {
  var folders = DriveApp.getFoldersByName(folderName);
  if (folders.hasNext()) {
    return folders.next();
  } else {
    return DriveApp.createFolder(folderName);
  }
}

function savePhotoToDrive(photoBase64, name, frame, timestamp, folder) {
  var base64Data = photoBase64.split(',')[1];
  var blob = Utilities.newBlob(
    Utilities.base64Decode(base64Data),
    'image/jpeg',
    sanitizeFileName(name) + '_' + frame + '_' + new Date().getTime() + '.jpg'
  );
  var file = folder.createFile(blob);
  file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
  return file;
}

function logToSpreadsheet(data, photoUrl) {
  var spreadsheet = getOrCreateSpreadsheet(SPREADSHEET_NAME);
  var sheet = spreadsheet.getActiveSheet();
  
  if (sheet.getLastRow() === 0) {
    sheet.appendRow(['Timestamp', 'Name', 'Comment', 'Frame Type', 'Photo URL', 'Date/Time']);
    sheet.getRange(1, 1, 1, 6).setFontWeight('bold').setBackground('#ff6b9d').setFontColor('white');
  }
  
  sheet.appendRow([
    data.timestamp,
    data.name,
    data.comment || '(No message)',
    data.frame,
    photoUrl,
    new Date()
  ]);
  
  sheet.autoResizeColumns(1, 6);
}

function getOrCreateSpreadsheet(name) {
  var files = DriveApp.getFilesByName(name);
  if (files.hasNext()) {
    return SpreadsheetApp.open(files.next());
  } else {
    return SpreadsheetApp.create(name);
  }
}

function sanitizeFileName(name) {
  return name.replace(/[^a-z0-9]/gi, '_').substring(0, 50);
}

function testSetup() {
  Logger.log("Testing setup...");
  var folder = getOrCreateFolder(FOLDER_NAME);
  Logger.log("✓ Folder created: " + folder.getName());
  Logger.log("Folder URL: " + folder.getUrl());
  var spreadsheet = getOrCreateSpreadsheet(SPREADSHEET_NAME);
  Logger.log("✓ Spreadsheet created: " + spreadsheet.getName());
  Logger.log("Spreadsheet URL: " + spreadsheet.getUrl());
  Logger.log("\n✅ Setup complete!");
}

function generateGalleryHTML() {
  var folder = getOrCreateFolder(FOLDER_NAME);
  var files = folder.getFiles();
  var html = '<div class="birthday-gallery" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 20px;">\n';
  
  while (files.hasNext()) {
    var file = files.next();
    var imageUrl = "https://drive.google.com/uc?export=view&id=" + file.getId();
    html += '  <div style="border-radius: 15px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">\n';
    html += '    <img src="' + imageUrl + '" style="width: 100%; height: auto; display: block;">\n';
    html += '  </div>\n';
  }
  
  html += '</div>';
  Logger.log(html);
  return html;
}

STEP 2: Deploy the Script

STEP 3: Test the Script

STEP 4: Update Camera Code

var SCRIPT_URL = 'https://script.google.com/macros/s/YOUR_SCRIPT_ID_HERE/exec';

var SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbxXXXXXXXX/exec';

STEP 5: Test Everything

BONUS: Display Photos on WordPress

Option 1: Auto-Generated Gallery (Recommended)

Option 2: Embed Live Spreadsheet

Option 3: WordPress Plugin

📱 Using the Camera

For Guests:

• Works on any smartphone or computer with camera
• No app download needed
• Just visit the website URL
• Allow camera permission when asked
• Pick a frame shape
• Take photo
• Add name and message
• Submit!

Photo Quality:

• 1080 x 1920 pixels (Full HD)
• High quality JPEG
• Perfect for printing or digital albums

🔧 Troubleshooting

📥 Downloading All Photos

🎨 Customization Options

Change Folder/Spreadsheet Names

Edit these lines in the Google Apps Script:

var FOLDER_NAME = "Midori 70th Birthday Photos";
var SPREADSHEET_NAME = "Midori Birthday Submissions";

Make Photos Private

In the Google Apps Script, find and remove this line (around line 79):

file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);

Get Email Notifications

Add this code after line 47 in the doPost function:

MailApp.sendEmail({
  to: "your@email.com",
  subject: "New Birthday Photo from " + data.name,
  body: "New submission!\n\nName: " + data.name + "\nMessage: " + data.comment
});

✅ Final Checklist

• Google Apps Script created and deployed
• Web App URL copied
• testSetup() function ran successfully
• Folder exists in Google Drive
• Spreadsheet exists in Google Drive
• cam.html updated with Web App URL
• cam.html uploaded to website
• Test photo taken and verified in Drive
• WordPress gallery created (optional)