Create a fully functional and responsive multi-tool website called “Multi Tool Hub” using only HTML, CSS, and JavaScript (Vanilla JS) — no backend or external libraries (unless browser-native)
The site should have a modern, premium, and minimalistic design, fully responsive across desktop, tablet, and mobile devices.
__
?? Design Theme & Aesthetic:
- Background Color: #1E1E2F (dark navy)
- Text Color: #EAEAEA (light gray)
- Header Background: #2B2D42 (deep blue)
- Accent Color: #FFD700 (gold)
- Tool Card Background: #3A3D5B (dark grayish-blue)
- Hover Effects:
- Tool card background becomes #FFD700 and text turns #1E1E2F
- Button hover color: #E6C200
- Soft box shadow: rgba(255, 215, 0, 0.2)
- Use box shadows, smooth transitions, and spacing to make the UI feel modern and luxurious
__
??? Page Layout:
* Centered header with the title: “Multi Tool Hub”
* Under the header, display a responsive grid layout:
* Desktop: 3-column grid (grid-template-columns: repeat(3, 1fr))
* Tablet: 2-column grid
* Mobile: Single-column layout
* Each tool is presented as a tool card:
* h2 title
* p description
* button opens the tool in a modal or dynamically replaces the main content area__
??? List of 20 Fully Functional Tools (Frontend Only):
1. Image Converter – Convert between JPG, PNG, and WEBP formats using canvas
2. Image Compressor – Compress image file size using canvas and quality settings
3. Image Cropper – Upload and crop image with preview and export
4. Video Converter – Convert video format (MP4 ? WebM) using MediaRecorder or canvas (limited to browser capabilities)
5. Audio Converter – Convert between MP3 and WAV formats using Web Audio API
6. Audio Trimmer – Upload, trim audio based on start/end time, and export trimmed clip
7. Age Calculator – Input date of birth ? output age in years, months, and days
8. EMI Calculator – Input loan amount, interest rate, and duration ? show monthly EMI and total interest
9. SIP Calculator – Input monthly investment, interest rate, duration ? output future value
10. QR Code Generator – Enter text or URL ? generate downloadable QR image (use canvas or native API)
11. Password Generator – Generate secure password with length, symbols, numbers options
12. Word Counter – Live count of words, characters, spaces, and reading time
13. Base64 Encoder/Decoder – Convert plain text to base64 and vice versa
14. Color Picker Tool – Pick a color and display HEX, RGB, and HSL values
15. Text to Speech – Enter text and listen to it using SpeechSynthesis API
16. Speech to Text – Use microphone to convert voice into text using Web Speech API
17. JSON Formatter – Paste JSON ? auto-format and validate with error handling
18. Unit Converter – Convert values between units (length, weight, temperature, etc.)
19. BMI Calculator – Input weight and height ? show BMI category and value
20. Timer / Stopwatch Tool – Simple timer and stopwatch with start, stop, reset functionality__
?? Styling Requirements:
* Use CSS variables for theme colors
* Buttons should be:
* Rounded (border-radius: 5px)
* Bold text
* Hover effects with color change
* Easy to tap on mobile
* Responsive grid system with proper media queries- Smooth CSS transitions on hover for cards and buttons
* Optional fade-in animations on scroll using IntersectionObserver or CSS animation
__
?? JavaScript Functionality:
* All tools should be fully functional using only frontend JavaScript
* Use modular code: Each tool's logic in separate functions or sections
* Handle:
* File uploads and conversions (canvas, Web Audio API, MediaRecorder, etc.)
* UI interactions (modal open/close, input validations, dynamic updates)
* Calculations and real-time updates (e.g., age, BMI, SIP, EMI)
* Show alerts like “Processing…” or success states where needed__
?? Code Structure:
* index.html: Structure with header, tool cards, modals/sections for each tool
* style.css: Theme styles, responsive design, and animations
* script.js: Logic for all tools, input handlers, modals, and utility functions__
? Final Requirements:
* All 20 tools must be functional and accurate
* Site must look modern, mobile-friendly, and premium
* No external libraries (optional: native APIs only)
* All code must be clean, modular, and maintainable
* The layout must adapt perfectly across all deviceses prompt ko rewrite kr du or es k color ko b chang kar day.
