Our social:

AI IMAGE

Create a fully responsive, modern, premium-quality website called “Prompt Minds – Multi Tool Hub” using only HTML, CSS, and Vanilla JavaScript (no backend, no libraries). This site should provide 20+ frontend-only tools with glowing, futuristic UI design. 🎨 Use the following official color palette: πŸ”· MAIN COLORS USED IN THE UI (ABHINAV PROMPT THEME): Background Colors: - Main Background: #0d0f14 - Top Navbar: #1c222d - Normal Button Background: #1c222d or #12151a Accent Colors: - Primary Accent (Cyan): #42f8f5 - Accent Shade (Alt): #3ff7f3 Text Colors: - Primary Text: #ffffff or #e0e0e0 - Secondary Description Text: #c5d1de Glow/Border Effects: - Button Border Color: #42f8f5 - Glow Shadow: rgba(66, 248, 245, 0.6) - Hover/Active Button Background: #42f8f5 🧱 LAYOUT & STRUCTURE: Header: - Sticky top navbar with logo and title: “Prompt Minds – Multi Tool Hub” - Navbar links: Home | About | Tools | Contact (styled with hover glow) Main Section: - Grid layout of tool cards * Desktop: 3 columns * Tablet: 2 columns * Mobile: 1 column - Each tool card includes: * Title (h2) * Description (p) * Glowing button that opens a modal or replaces content dynamically πŸ“¦ 20 TOOLS TO IMPLEMENT (frontend only): 1. Image Converter 2. Image Compressor 3. Image Cropper 4. Video Converter 5. Audio Converter 6. Audio Trimmer 7. Age Calculator 8. EMI Calculator 9. SIP Calculator 10. QR Code Generator 11. Password Generator 12. Word Counter 13. Base64 Encoder/Decoder 14. Color Picker Tool 15. Text to Speech 16. Speech to Text 17. JSON Formatter 18. Unit Converter 19. BMI Calculator 20. Timer / Stopwatch πŸ–Œ️ STYLING REQUIREMENTS: - Use **CSS variables** for all main colors - **Glow & shadow effects** on buttons and cards using rgba(66, 248, 245, 0.6) - **Smooth transitions**, subtle animations - **Hover glow effects** on buttons and tool cards (neon feel) - All buttons: - Rounded corners (5px) - Bold text - Bright hover color: #42f8f5 - Cards and buttons must feel “clickable”, futuristic, and touch-friendly ⚙️ JAVASCRIPT FUNCTIONALITY: - Each tool must be completely functional using only frontend JS - Modular code design (separate functions or sections per tool) - Use browser-native APIs: * canvas, MediaRecorder, Web Audio, Web Speech API - Include: * File upload & conversion * Real-time UI updates * Dynamic modals * Alerts like “Processing...”, “Success!”, etc. * Validations for forms and inputs πŸ“ FILE STRUCTURE: - `index.html`: Basic layout, header, cards, and modal containers - `style.css`: Theme colors, shadows, glow animations, responsive design - `script.js`: Logic for each tool, modal toggles, and utilities ✅ OUTPUT GOAL: - A complete, polished, professional-grade frontend tools hub - Fully responsive on all devices - Glow-based UI matching the Prompt Minds brand - No external frameworks or backend dependencies

0 $type={blogger}:

Post a Comment