implement minimal, responsive UI for faster page load

[Mathi27]

Summary

The current UI works but can be improved to be more minimal, faster to load,
and fully responsive across devices. The goal is to redesign the interface
with a lightweight layout that prioritizes speed, usability, and clarity.

This improvement should focus on reducing visual clutter while maintaining
all existing functionality.

Goals

• Create a minimal and clean UI
• Ensure fast page load with minimal CSS/JS
• Make the layout fully responsive for desktop, tablet, and mobile
• Maintain accessibility and usability
• Avoid heavy frameworks (Bootstrap, Tailwind CDN, etc.)

Suggested Approach

• Use pure HTML + minimal CSS
• Prefer system fonts to avoid external font downloads
• Use flexbox or simple grid layout
• Keep styles in a single lightweight CSS file
• Avoid unnecessary JavaScript
• Optimize spacing, typography, and alignment

UI Expectations

The interface should include:

• Simple header/title
• File upload section
• DPI input
• Worker processes input
• Submit button
• Status / success / error messages

The design should:

• Look clean and modern
• Work well on mobile screens
• Load extremely fast
• Avoid heavy visual elements

Performance Considerations

• No external UI frameworks
• No external font loading
• Minimal CSS (<10 KB preferred)
• No large JS bundles

Acceptance Criteria

• UI is responsive across mobile, tablet, and desktop
• Page load remains very fast
• No heavy UI frameworks introduced
• Existing functionality remains unchanged
• Layout remains clean and minimal

Nice to Have (Optional)

• Drag-and-drop file upload
• Subtle loading indicator during processing
• Improved spacing and typography