kaamiiaar juju-birthday .cursorrules file for JavaScript

# Core Structure

- Each web page must contain only one HTML file
- HTML must have a single container element
- No separate CSS files allowed
- No inline or internal CSS in HTML

# JavaScript Requirements

- All content must be dynamically injected via JavaScript
- All styles must be defined and applied through JavaScript
- Use JavaScript to create and manage DOM elements
- Use JavaScript to handle all styling properties

# Container Guidelines

- One main container per HTML page
- Container should be empty in the HTML file
- All child elements must be created and appended via JavaScript

# Style Management

- All styles must be applied using JavaScript's style property or setAttribute
- No CSS classes or IDs for styling purposes
- No CSS stylesheets (external, internal, or inline)
- All responsive design must be handled through JavaScript

# Code Organization

- Keep HTML files minimal and clean
- Maintain all logic and styling in JavaScript files
- Use modular JavaScript functions for content creation
- Implement event listeners for dynamic content updates

# Project Structure

- Root directory contains:
  - index.html (main landing page)
  - script.js (main JavaScript file)
  - assets/ (directory for media files)
    - images/ (for image files)
    - videos/ (for video files)

# Page Folders

- Create a new folder for each additional page
- Each page folder must contain exactly two files:
  - index.html (minimal HTML with container)
  - script.js (all logic and styling)
- No CSS files in any folder

# Main Features

- Use relative paths for all assets
- Format: "../assets/images/filename.ext" for subpages
- Format: "./assets/images/filename.ext" for main page
- Ensure compatibility with GitHub Pages hosting

## 1. Memories Gallery

- Google Photos Integration:

  - Fetch photos from specified Google Photos album
  - Use Google Photos API for reliable access
  - Support for high-resolution images
  - Maintain original image quality and metadata
  - Handle image caching for performance
  - Support for both photos and videos
  - Respect album sharing permissions

- Memories Display:

  - Interactive Memory Slider:
    - Fullscreen immersive display
    - Smooth transitions between memories
    - Touch and swipe support for mobile
    - Arrow navigation and keyboard controls
  - Gratitude Notes Feature:
    - Personalized note overlay for each memory
    - Elegant typography for emotional impact
    - Fade-in animation for notes
    - Optional audio narration support
  - Visual Design:
    - Dynamic color theming based on image palette
    - Parallax effects for depth
    - Subtle ambient background animations
    - Custom transitions between slides
  - Interactive Elements:

    - Heart/reaction animations
    - Optional background music toggle
    - Timeline navigation bar
    - Memory categories/tags

  - Responsive Features:
    - Adaptive layout for all screen sizes
    - Portrait/landscape orientation handling
    - Touch-optimized for mobile devices
    - Gesture controls for navigation

## 2. Birthday Countdown

- Countdown Timer:
  - Target: December 21st, 11:00 PM AEDT (Melbourne)
  - Live updating countdown display
  - Hidden message reveal at target time
  - Timezone handling (UTC+11)

# Key Functions

## Google Drive Integration