Custom t-shirt designer

Create a modern and responsive web application for customizing T-shirts using only HTML, CSS, and JavaScript. The app should have the following key features:

Four Design Panels:
- Display 4 separate panels for T-shirt views: Front, Back, Left Sleeve, Right Sleeve.
- Each panel should show a blank T-shirt template that supports image overlay.
Image Upload & Placement:
- Allow the user to upload multiple custom images.
- Users should be able to drag, resize, and position these images on any of the four T-shirt panels.
- Each uploaded image increases the price by ₹100.
Live Pricing Display:
- Show total price live as the user adds/removes images.
- Base price = ₹0, each image = ₹100.
Download Design:
- Add a button to download each panel (Front, Back, Left, Right) as a PNG image with all placed graphics intact.
- Maintain transparency where possible, and preserve layout while downloading.
UI/UX:
- Use a clean, modern, and mobile-friendly layout.
- Provide tabs or buttons to switch between different T-shirt views.
- Include a simple navbar with the app name (e.g., "Tee Designer") and total price.

Use only pure HTML, CSS, and Vanilla JavaScript (no frameworks or libraries like React or jQuery). Ensure cross-browser compatibility and smooth performance.

Show full message

I'll create a modern T-shirt customization web application using pure HTML, CSS, and JavaScript. This will include all the features you requested with a clean, responsive design.

T Shirt designer

index.html

I've created a comprehensive T-shirt customization web application with all the features you requested:

Key Features Implemented:

Four Design Panels

Front, Back, Left Sleeve, and Right Sleeve views
Clean tab-based navigation between panels
Each panel has a T-shirt template background

Image Upload & Placement

Drag & drop file upload support
Click to upload functionality
Multiple image format support (JPG, PNG, GIF)
Drag, resize, and position images on any panel
Visual feedback with selection highlights

Live Pricing Display

Real-time price calculation (₹100 per image)
Prominent price display in the navbar
Updates automatically when images are added/removed

Download Design

Individual panel download as PNG files
Maintains transparency and layout
High-quality canvas-based rendering
Cross-browser compatible download functionality

Modern UI/UX

Responsive design that works on mobile and desktop
Clean, modern interface with gradient backgrounds
Smooth animations and hover effects
Intuitive controls and visual feedback

Technical Highlights:

Pure HTML/CSS/JavaScript - No external dependencies
Canvas API for high-quality image downloads
File API for image upload handling
Drag & Drop API for intuitive file uploads
CSS Grid & Flexbox for responsive layouts
Event delegation for dynamic image management
Cross-browser compatibility with fallbacks

The application provides a professional T-shirt design experience with smooth interactions, real-time updates, and reliable download functionality.