ChatMock Screenshot Generator

✨ Features

🚀 Quick Start

1. Open the App
   Simply open app.html in your browser
2. Create Characters
   Click "+ Add Character" to create people in your conversation
3. Add Messages
   Upload a CSV or click "+ Add Message" to add manually
4. Preview
   Watch your conversation render in real-time in the phone preview
5. Export
   Click "📸 Export Screenshots" to download!

📖 Usage Guide

1. Create Characters

Manual Creation:

1. Click "+ Add Character"
2. Fill in the form:
   • Name: Display name (e.g., "Alice")
   • Phone Number: Optional (e.g., "+1 555-0123")
   • Phone Type: iOS or Android
   • Message Bubble Colour: Custom colour for their group chat messages
   • Profile Picture: Upload an avatar (optional)
3. Click "Save"

Auto-Creation from CSV:

• Upload a CSV file with messages
• App automatically creates characters from "From" and "To" columns
• Characters get default settings (alternating iOS/Android, varied colours)

2. Add Messages

Using Spreadsheet Editor:

1. Click "+ Add Message" for a new row
2. Fill in the columns:
   • Date: YYYY-MM-DD format
   • Time: HH:MM format (24-hour)
   • From: Select sender
   • To: Select recipient(s)
   • Text: Message content
   • Image: Optional uploaded image
3. Changes take effect automatically (Remember to save your project)

3. Upload Images

1. Click "+ Upload Images" in the Images section
2. Select one or more image files
3. In the spreadsheet, select the image from the "Image" dropdown

4. Configure Settings

📝 CSV Format Guide

Basic Format

Date,Time,From,To,Text,Image
2024-01-15,09:30,Alice,Bob,Hey! How are you?,
2024-01-15,09:32,Bob,Alice,I'm good! You?,
2024-01-15,09:33,Alice,Bob,Great! Want to grab lunch?,image1.jpg

Group Conversations

Keep the "To" column the same for all group members (unless it's from their point of view):

Date,Time,From,To,Text,Image
2024-01-15,10:00,Alice,Bob,Hey everyone!,
2024-01-15,10:01,Charlie,Bob,What's up?,
2024-01-15,10:15,Bob,Alice,Hi,image1.jpg

Important Notes

• Date Format: YYYY-MM-DD (e.g., 2024-01-15)
• Time Format: HH:MM in 24-hour format (e.g., 14:30 for 2:30 PM)
• Names: Must match character names exactly
• Empty Image: Leave blank if no image

⚙️ Advanced Settings

Viewing As

Select whose phone you're looking at. This changes which messages appear on the right (sent) vs left (received).

• Auto (First Character): Uses the first character in your list
• Specific Character: Choose any character's perspective

Timestamp Modes

Natural:

• Shows timestamps only when messages are 5+ minutes apart
• Clean, minimal look
• Formats as "Today 2:30 PM", "Yesterday", etc.

Every Time:

• Shows small timestamp under each bubble
• Styled like "delivered/read" indicators
• Perfect for detailed documentation

Expandable Editor Mode

Click ⤢ Expand to maximize workspace:

• Message editor takes 80% of screen
• Text fields become resizable
• Character/Image sections minimize
• Perfect for editing long conversations

📸 Exporting Screenshots

Export Process

1. Ensure your messages are set up correctly
2. Click "📸 Export Screenshots"
3. App generates screenshots:
   • Divides conversation into phone-sized pages
   • Captures at 2x resolution (high quality)
   • Bundles into ZIP if multiple pages
4. Download completes automatically

Project Management

Click "💾 Project ▾" to access:

• ✓ Save to Browser Storage - Quick local saves
• ✓ Load from Browser Storage - Restore your work
• ✓ Clear Saved Data - Fresh start (refresh your page after this to clear everything)
• ✓ Export Project (.json) - Download full project as backup
• ✓ Import Project (.json) - Restore from JSON file

🐛 Troubleshooting

Messages Not Appearing?

• ✓ Create characters with matching names from messages
• ✓ Check CSV column headers are correct: Date,Time,From,To,Text,Image
• ✓ Verify date format is YYYY-MM-DD

Export Not Working?

• ✓ Ensure messages exist in the preview
• ✓ Try refreshing the page
• ✓ Check browser console (F12) for errors
• ✓ Allow pop-ups and downloads in browser settings

Images Not Showing?

• ✓ Upload image first before adding to message
• ✓ Check filename matches exactly (case-sensitive)
• ✓ Supported formats: JPG, PNG, GIF, WebP
• ✓ Try re-uploading the image

Save/Load Issues?

• ✓ Enable LocalStorage in browser settings
• ✓ Private/Incognito mode may disable storage
• ✓ Check storage quota (typically 5-10MB limit)
• ✓ Use JSON export/import as alternative

🔧 Technical Details

Technologies

• Pure HTML5, CSS3, JavaScript - No framework dependencies
• Client-Side Only - Zero server communication
• Modern Browser APIs - FileReader, LocalStorage, Canvas

External Libraries (CDN)

Browser Requirements

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🎯 Use Cases

🔮 Roadmap

Future features being considered:

• Read receipts and "typing..." indicators
• Voice message bubbles
• Undo/Redo functionality
• Keyboard shortcuts
• Dark mode