A mobile-friendly web application that allows users to create custom badges by uploading their photos and placing them in a circular frame over a background image.

• Upload a photo (e.g., a face)
• Display the uploaded photo in a circular frame
• Automatically place the circular photo exactly where the green-bordered circle appears in the background image
• Show a live preview of the final badge
• Download the final composed image as a PNG

• Built with HTML, CSS, and JavaScript
• Uses HTML5 Canvas API for image composition
• Mobile-responsive design
• Served via Hono framework on Val Town
• Dynamically positions the circular photo to match the green-bordered circle in the background image

1. Visit the application URL
2. Click "Upload Your Photo" and select an image from your device
3. See the live preview of your badge with your photo in a circular frame
4. Click "Download Badge" to save the final image as a PNG

• The circular image is positioned to exactly match the green-bordered circle in the background image
• The position and size are calculated using relative coordinates to ensure proper alignment regardless of screen size
• The preview adjusts automatically when the window is resized
• The downloaded image maintains the exact positioning of the circular photo on the background image