Tool Prompt

Create a complete, self-contained image format converter tool using only HTML, CSS, and JavaScript that can be pasted directly into a WordPress Custom HTML block. The tool should convert images between formats: JPG, PNG, WEBP, GIF, BMP, ICO, and TIFF.

===========================================
SECTION 1: OVERALL STRUCTURE & CONTAINER
===========================================

Create a main wrapper div with class “image-converter-tool” that:
– Has a maximum width of 900px
– Is centered on the page using margin auto
– Has padding of 30px on all sides
– Uses a clean white background with subtle shadow
– Has rounded corners of 16px
– Uses the font family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif
– Contains all tool elements inside

===========================================
SECTION 2: HEADER SECTION
===========================================

Create a header section that includes:
– A main title “Image Format Converter” using h1 tag
– Title should be centered, use a dark color (#1a1a2e), font-size of 28px, font-weight 700
– A subtitle/description paragraph explaining the tool: “Convert your images between JPG, PNG, WEBP, GIF, BMP, and more formats instantly. Free, fast, and secure – all processing happens in your browser.”
– Subtitle should be centered, color #666, font-size 15px, max-width 600px, centered with margin auto
– Add spacing below the header section of 30px

===========================================
SECTION 3: DRAG & DROP UPLOAD AREA
===========================================

Create a file upload zone with these specifications:

Container styling:
– A dashed border of 3px with color #4361ee
– Border-radius of 12px
– Background color of #f8f9ff (very light blue)
– Minimum height of 250px
– Display as flexbox, centered both horizontally and vertically
– Flex-direction column
– Cursor pointer
– Transition effect for all properties 0.3s ease

Hover state:
– Background changes to #eef1ff
– Border color changes to #3a51d4
– Transform scale to 1.01

Active/dragover state:
– Background color #e5e9ff
– Border style solid instead of dashed
– Add a subtle box-shadow

Content inside upload zone:
– An upload icon (use an SVG cloud upload icon, size 70px, color #4361ee)
– Main text “Drag & Drop Your Image Here” – font-size 20px, font-weight 600, color #333, margin-top 15px
– Secondary text “or click to browse files” – font-size 14px, color #888, margin-top 8px
– Supported formats text “Supports: JPG, PNG, WEBP, GIF, BMP, TIFF, ICO” – font-size 12px, color #aaa, margin-top 15px, with a subtle background pill styling

Hidden file input:
– Create an input type=”file” that is hidden (display: none)
– Accept attribute should include all image types: image/jpeg, image/png, image/webp, image/gif, image/bmp, image/tiff, image/x-icon, image/*

===========================================
SECTION 4: IMAGE PREVIEW SECTION
===========================================

Create a preview section (hidden by default, shown when image is loaded):

Container:
– Initially hidden using display: none
– Margin-top of 25px
– Background #ffffff
– Border: 1px solid #e0e0e0
– Border-radius 12px
– Padding 20px
– Box-shadow: 0 2px 10px rgba(0,0,0,0.05)

Preview image container:
– Max-width 100%
– Max-height 350px
– Overflow hidden
– Border-radius 8px
– Background #f5f5f5 (checkerboard pattern for transparency)
– Display flex, centered
– Create a CSS checkerboard pattern background for transparency preview

Image element:
– Max-width 100%
– Max-height 350px
– Object-fit contain
– Border-radius 8px

Image information display:
– Show file name (truncate if too long with ellipsis)
– Show original format
– Show file size (formatted in KB or MB)
– Show image dimensions (width x height)
– Style as a horizontal flex row with gaps
– Each info item in a small pill/badge style with icon
– Background #f0f0f0, padding 8px 14px, border-radius 20px, font-size 13px

===========================================
SECTION 5: CONVERSION OPTIONS PANEL
===========================================

Create a conversion settings panel:

Container:
– Margin-top 25px
– Background linear gradient from #f8f9ff to #ffffff
– Border: 1px solid #e8e8e8
– Border-radius 12px
– Padding 25px

Section title:
– “Conversion Settings” – font-size 16px, font-weight 600, color #333, margin-bottom 20px
– Add a small settings icon before the text

Output format selector:
– Label “Convert to:” styled nicely
– Create a custom styled select dropdown or button group for format selection
– Options: PNG, JPG/JPEG, WEBP, GIF, BMP, ICO, TIFF
– Style as large clickable buttons/cards in a grid (3-4 per row on desktop)
– Each format option shows:
– Format name in bold
– Brief description (e.g., “PNG – Lossless, supports transparency”)
– A radio-style selection indicator
– Selected format should have:
– Blue border (#4361ee)
– Light blue background
– Checkmark indicator
– Hover effect on each option

Quality slider (shown only for lossy formats like JPG, WEBP):
– Container that appears/hides based on selected format
– Label “Quality:” with current value percentage shown
– Range input slider from 1 to 100, default 92
– Custom styled slider:
– Track: height 8px, background #e0e0e0, border-radius 4px
– Progress fill: background gradient #4361ee to #3a51d4
– Thumb: 22px circle, white with blue border, subtle shadow
– Quality presets as quick buttons: “Low (60%)”, “Medium (80%)”, “High (92%)”, “Maximum (100%)”
– Show estimated file size if possible

Resize options (optional toggle):
– Checkbox/toggle to “Resize image”
– When enabled, show:
– Width input field (number)
– Height input field (number)
– Maintain aspect ratio checkbox (checked by default)
– Preset sizes: “Original”, “50%”, “25%”, “Custom”
– Style inputs with proper padding, borders, focus states

===========================================
SECTION 6: CONVERT BUTTON
===========================================

Create a prominent convert button:

Styling:
– Full width of container
– Height 55px
– Background: linear gradient 135deg from #4361ee to #3a51d4
– Color white
– Font-size 18px
– Font-weight 600
– Border: none
– Border-radius 10px
– Cursor pointer
– Text “Convert Image” with a conversion/arrow icon
– Text-transform uppercase
– Letter-spacing 1px

Hover state:
– Background shifts to darker shade
– Transform translateY(-2px)
– Box-shadow: 0 8px 25px rgba(67, 97, 238, 0.4)

Active state:
– Transform translateY(0)
– Box-shadow reduced

Disabled state:
– Background #cccccc
– Cursor not-allowed
– Opacity 0.7

Loading state:
– Show spinner animation
– Text changes to “Converting…”
– Pointer-events none

===========================================
SECTION 7: PROGRESS INDICATOR
===========================================

Create a progress section (shown during conversion):

– Progress bar container: full width, height 6px, background #e0e0e0, border-radius 3px
– Progress fill: animated gradient background, width animated from 0 to 100%
– Percentage text above progress bar
– Smooth animation with CSS transitions

===========================================
SECTION 8: DOWNLOAD/RESULT SECTION
===========================================

Create a result section (hidden until conversion complete):

Container:
– Margin-top 25px
– Background: linear gradient to right from #d4edda to #c3e6cb
– Border: 1px solid #28a745
– Border-radius 12px
– Padding 25px
– Display flex, align items center, gap 20px

Success icon:
– Green checkmark in circle
– Size 50px
– Animated appearance (scale bounce effect)

Result info:
– “Conversion Complete!” heading – green color, font-weight 600
– Show new file size
– Show size reduction/increase percentage compared to original

Download button:
– Background #28a745
– Color white
– Padding 14px 35px
– Border-radius 8px
– Font-weight 600
– Download icon included
– Hover: darker green, slight lift effect
– Text “Download [FORMAT]” (e.g., “Download PNG”)

Additional actions:
– “Convert Another” button – secondary style, outline
– “Copy to Clipboard” button for supported browsers

===========================================
SECTION 9: ADDITIONAL FEATURES SECTION
===========================================

Create a features/info section at the bottom:

– Display as grid, 3 columns on desktop, 1 on mobile
– Each feature card:
– Icon (use simple SVG icons)
– Title
– Brief description
– Features to highlight:
1. “100% Private” – “All processing happens locally in your browser. Your images never leave your device.”
2. “Lightning Fast” – “Instant conversion powered by modern browser APIs. No waiting for server uploads.”
3. “Completely Free” – “No limits, no watermarks, no registration required. Use as much as you want.”

Styling:
– Each card has subtle border, padding, border-radius
– Icon size 40px, color #4361ee
– Title font-weight 600, margin-top 15px
– Description color #666, font-size 14px

===========================================
SECTION 10: RESPONSIVE DESIGN
===========================================

Implement full mobile responsiveness:

Breakpoint 768px (tablets):
– Container padding reduced to 20px
– Format selection grid becomes 2 columns
– Feature cards become 2 columns
– Font sizes slightly reduced
– Upload zone min-height reduced to 200px

Breakpoint 480px (mobile phones):
– Container padding reduced to 15px
– All grids become single column
– Format selection as vertical list
– Image info badges stack vertically
– Upload zone icon smaller (50px)
– Title font-size 22px
– All buttons full width
– Quality presets stack or scroll horizontally
– Reduced margins and paddings throughout
– Download section stacks vertically

Ensure all touch targets are minimum 44px for mobile usability.

===========================================
SECTION 11: JAVASCRIPT FUNCTIONALITY
===========================================

Implement complete JavaScript functionality:

File handling:
– Add click event on upload zone to trigger file input
– Add drag and drop events (dragenter, dragover, dragleave, drop)
– Prevent default behavior on drag events
– Validate file is an image type
– Read file using FileReader API
– Create Image object to get dimensions
– Display preview and file information
– Store original file data for conversion

Format selection:
– Add click events to format options
– Update selected state visually
– Show/hide quality slider based on format (show for jpg, webp)
– Store selected format in variable

Quality slider:
– Update displayed value on input
– Add preset button functionality

Conversion logic:
– Create canvas element
– Draw image to canvas at specified size
– Use canvas.toBlob() for conversion
– Specify MIME type based on selected format:
– PNG: ‘image/png’
– JPG: ‘image/jpeg’
– WEBP: ‘image/webp’
– GIF: ‘image/gif’
– BMP: ‘image/bmp’
– ICO: ‘image/x-icon’
– Pass quality parameter for lossy formats (0.0 to 1.0)
– Handle resize if enabled

Download functionality:
– Create blob URL from converted blob
– Create temporary anchor element
– Set download attribute with new filename
– Trigger click to download
– Revoke blob URL after download

Error handling:
– Show user-friendly error messages
– Handle unsupported format errors
– Handle file too large errors
– Handle conversion failures
– Style error messages with red background, icon

Reset functionality:
– Clear all states when “Convert Another” clicked
– Reset UI to initial state
– Clear stored image data

===========================================
SECTION 12: ANIMATIONS & MICRO-INTERACTIONS
===========================================

Add smooth animations:

– Upload zone border animation on hover (subtle pulse)
– Image preview fade-in when loaded
– Format options scale slightly on hover
– Convert button subtle pulse animation when ready
– Progress bar smooth fill animation
– Success checkmark bounce animation
– Download button shine effect on hover
– Smooth transitions on all interactive elements (0.3s ease)
– Loading spinner animation (CSS only, no external libraries)

===========================================
SECTION 13: ACCESSIBILITY
===========================================

Ensure accessibility compliance:

– All interactive elements keyboard accessible
– Proper focus states (visible outline)
– ARIA labels on buttons and interactive elements
– Alt text on images
– Proper heading hierarchy
– Color contrast ratios meet WCAG AA
– Screen reader announcements for status changes
– Role attributes where appropriate

===========================================
SECTION 14: BROWSER COMPATIBILITY
===========================================

Ensure cross-browser compatibility:

– Use CSS prefixes where needed (-webkit-, -moz-)
– Fallbacks for CSS features
– Check for API support before using (canvas, blob, etc.)
– Graceful degradation for older browsers
– Test compatibility with: Chrome, Firefox, Safari, Edge

===========================================
SECTION 15: CODE ORGANIZATION
===========================================

Structure the code as:

1. All CSS in a single <style> tag at the top
2. All HTML structure in semantic elements
3. All JavaScript in a single <script> tag at the bottom
4. Use CSS custom properties (variables) for colors and common values
5. Comment sections clearly
6. Use meaningful class names
7. Keep code clean and readable

Wrap everything in a self-contained div that won’t conflict with WordPress themes.

===========================================
FINAL REQUIREMENTS
===========================================

– The entire tool must be contained in a single code block
– No external dependencies (no jQuery, no external CSS/JS files)
– Must work when pasted directly into WordPress Custom HTML block
– Must be fully functional offline (client-side only)
– Total code should be well-organized and properly commented
– Use modern JavaScript (ES6+) but ensure browser compatibility
– File size limit warning if file exceeds 10MB
– Maximum output dimension limit to prevent browser crashes

Please generate the complete, working code now.