Frontend - XMP Converter Interface

This directory contains the web interface for the XMP to Lightroom Config converter.

Files

  • index.html - Main HTML template with TailwindCSS styling
  • index.tsx - TypeScript frontend logic for file handling and conversion

Features

  • Drag & Drop Upload: Users can drag XMP files directly onto the upload zone
  • File Validation: Only accepts .xmp files
  • Real-time Feedback: Shows file information, loading states, and error messages
  • Copy to Clipboard: One-click copying of the converted configuration
  • Download Config: Download the converted configuration as a text file
  • Responsive Design: Works on desktop and mobile devices

User Flow

  1. User visits the main page
  2. Uploads an XMP file via drag-drop or file picker
  3. Clicks "Convert to Lightroom Config"
  4. Views the converted configuration
  5. Can copy to clipboard or download the result

Styling

Uses TailwindCSS via CDN for consistent, responsive styling with:

  • Clean, modern interface
  • Color-coded feedback (blue for info, green for success, red for errors)
  • Smooth transitions and hover effects
  • Mobile-responsive layout