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 devices