Let's Make $10,000 Per Month from a Multi Tool Website Using AI

आज मैं आपको AI का इस्तमाल करके एक Multi Tool Website बनाना शिखाउंगा। जिसपर बहुत से टूल्स होंगे जैसे की (Image Converter, QR Code Generator, Image Compressor, Word Counter, Loan EMI Calculator ..etc) ऐसी वेबसाइट बनाने का सबसे बड़ा फायदा ये है की यहाँ आपको Blogging की तरह पैसे कमाने के लिए रोज़- रोज़ आर्टिकल नहीं लिखना पड़ता। बस एक बार आपने वेबसाइट बना दी तो लोग अपने छोटे- बड़े कामो के लिए उसका उपयोग करेंगे और उसपर Ads लगाकर आप लाखो रुपये बड़ी आसानी से कमा सकते है. सबसे हैरानी की बात ये है की इसके लिए आपको Hosting खरीदने की जरुरत नहीं है. आप बिलकुल मुफ्त में AI का इस्तमाल करके ऐसी Multi Tool Website बना सकते है. तो चलिए जानते कैसे ?

Name Selection & Checking

सबसे पहले आपको अपनी वेबसाइट का एक नाम चुनना होगा. इस कार्य में आप Chat GPT की मदद ले सकते है. Chat GPT पर जाकर उसे Prompt दे-

"I am going to create a multi-tool website where many tools are available for people to use in their day-to-day life. Please suggest some of the best name ideas for this website."

इसके बाद Chat GPT आपको बहुत से नाम दे देगा आपको जो पसंद आये उसके साथ हम आगे बढ़ेंगे। जैसे की मैंने यहाँ "Tools Wonder" को सेलेक्ट किया है. लेकिन इस नाम का इस्तमाल करने से पहले हमें इसकी Domain Availability को Check करना होगा।

इसके लिए हम Hostinger Domain पर आएंगे और search box में अपने वेबसाइट का नाम यानि "Tools Wonder" दर्ज करेंगे। अगर इस नाम से domains available होंगे तो हम इस नाम का उपयोग कर सकते है क्योकि आगे हम इस domain name को खरीदने वाले है.

Important Tip- आप एक ऐसे नाम का चयन करे जिसके सभी डोमेन्स अवेलेबल हो. अगर उसका कोई भी डोमेन बिका नहीं है इसका मतलब उस डोमेन से कोई वेबसाइट भी नहीं होगी। इसीलिए हमें उस नाम पर रैंक करने में आसानी होगी।

Create Gmail Account

सबसे पहले हम एक नया G. Mail अकाउंट बनाएंगे। इसका हम आगे कई जगह इस्तमाल करने वाले है इसीलिए एक नया Gmail अकाउंट चीज़ो को सिस्टेमेटिक रूप से arrange करने में हमारी काफी मदद करेगा।

Step 1- Google पर Create Gmail Account लिखकर सर्च करे.

Step 2- Sign In Page पर पहुंचने के बाद निचे Create Account पर क्लिक करे.

Step 3- अपना First & Last Name, Date of Birth, Phone Number, Email ..आदि जानकारी भरकर अपना ईमेल सफलतापूर्वक बना ले.

Create GithHub Account

Step 1- सबसे पहले github.com पर जाना होगा।

Step 2- Sign Up पर क्लिक करके अपना Email, Password, Username और Country को सेलेक्ट करके Continue पर क्लिक करे.

Step 3- अब ईमेल पर प्राप्त OTP को दर्ज करके Sign Up की प्रक्रिया सम्पूर्ण करे.

Step 4- अब आपके सामने Login पेज open होगा। वहा अपना Username और Password से आप Login कर सकते है

अब हमें अपनी Website को Githhub की मदद से live करने के लिए एक Repository या Repo बनाना होगा। इसके लिए आप निचे दिए Steps को Follow करेंगे:-

Step 1- अब आपको Left Hand Side में Create Repository का ऑप्शन मिलेगा वहां क्लिक करे.

Step 2- अब अपने Repository का नाम (जैसे- Tools Wonder, Rishi Chaudhary..etc ) दर्ज करे. आप चाहे तो एक छोटा सा Description भी लिख सकते है. लेकिन ये optional है.

Step 3- इसके बाद Repository को Public रखते हुए. Add a README File को Select करे.

Step 4- अब "Create Repository" पर क्लिक करके। सफलतापूर्वक अपना Repository बना ले.

Code Generation

अब वेबसाइट को create करने के लिए हमें Code की आवशकता होगी। और इसके लिए हम AI का इस्तमाल करेंगे।

सबसे पहले हमें अपने वेबसाइट का Main Page बनाना होगा उसके बाद हम बहुत सारे अलग अलग टूल्स (जैसे - Image Converter, Image Resizer, QR Code Generator, Audio Converter, Png to Pdf...etc) को Create करेंगे।

Code Generation Process For Main Page

Step 1- इसके लिए आपको DeepSeek AI पर जाना होगा। और वह एक अकाउंट बना ले.

Step 2- अब निचे दिए गए Prompt को Chat Box में Paste करे.

Prompt For Multi Tool Website Main Page

Design a professional, mobile-responsive homepage for a multi-tool website named "Tools Wonder" using a clean, modern blue color theme. The site should be fast, elegant, and user-friendly for both desktop and mobile devices.

🧩 Layout Requirements:
Top Header

Logo: Tools Wonder (clean font, slightly bold)

Navigation links: Home | Tools | Contact

Contact via Gmail only: toolswonder1@gmail.com

No phone number

Hero Section

Headline: “Your Daily Tools, All in One Place”

Subheadline: “Convert, calculate, compress, and simplify your everyday tasks — fast and free.”

CTA button: “Explore Tools”

Simple illustration or icons showing tool variety (image, text, code, video)

Search Bar

Prominently placed

Functional and filters tools live by name or keyword

Placeholder: “Search a tool…”

Tool Sections Each of the following categories should be clearly separated with:

A section heading (e.g., "🖼 Image Tools")

A short subheading or description

A grid of tool cards with:

Tool name (e.g., “Image Converter”)

Short 1-line description

A “Use Tool” button with a hyperlink (placeholder link)

Icons or illustrations related to each tool

Rounded corners, soft shadows, hover animation on cards

Blue-accented buttons and highlights

🧰 Sections & Tools:
🖼 Image Tools

Image Converter

Image Compressor

Image Resizer

Image Cropper

Image to Text (OCR)

Image Rotator/Flipper

📄 Document Tools

PDF to Word / Word to PDF

PDF Compressor

PDF Merger & Splitter

Document Converter

PDF Lock/Unlock

eSign PDF

🧮 Calculator Tools

Scientific Calculator

Age Calculator

BMI Calculator

Loan EMI Calculator

GST Calculator

Currency Converter

🔤 Text Tools

Text Case Converter

Word & Character Counter

Remove Duplicate Lines

Text Sorter

Text Reverser

Text Encryptor/Decryptor

🌐 Web/Developer Tools

HTML/CSS/JS Minifier

JSON Formatter & Validator

Base64 Encoder/Decoder

URL Encoder/Decoder

Color Picker & Converter

Regex Tester

🎨 Color Tools

Color Picker from Image

HEX to RGB Converter

Gradient Generator

Contrast Checker

Palette Generator

Color Blindness Simulator

🌍 SEO & Marketing Tools

Keyword Density Checker

Meta Tag Analyzer

Word Counter

🛠️ Utility Tools

QR Code Generator & Scanner

Barcode Generator

UUID Generator

Unit Converter

Time Zone Converter

Random Number/Password Generator

💼 Footer
Logo + brief tagline: “Simplifying your digital life.”

Contact email only: toolswonder1@gmail.com

Quick links: Privacy Policy | Terms of Use

Clean layout, no phone number, no clutter

Complete Code To Create Multi Tool Website Home Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tools Wonder - Your Daily Tools, All in One Place</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary-blue: #2563eb;
            --dark-blue: #1e40af;
            --light-blue: #93c5fd;
            --bg-gray: #f8fafc;
            --text-dark: #1e293b;
            --text-light: #64748b;
            --white: #ffffff;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --rounded: 8px;
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--bg-gray);
            color: var(--text-dark);
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header */
        header {
            background-color: var(--white);
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 100;
            padding: 15px 0;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-blue);
            text-decoration: none;
        }
        
        .logo span {
            color: var(--text-dark);
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 25px;
        }
        
        nav ul li a {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 500;
            transition: var(--transition);
        }
        
        nav ul li a:hover {
            color: var(--primary-blue);
        }
        
        .contact-email {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--text-light);
            font-size: 14px;
        }
        
        .contact-email i {
            color: var(--primary-blue);
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--primary-blue);
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
            color: var(--white);
            padding: 80px 0;
            text-align: center;
        }
        
        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero p {
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto 30px;
            opacity: 0.9;
        }
        
        .cta-button {
            display: inline-block;
            background-color: var(--white);
            color: var(--primary-blue);
            padding: 12px 30px;
            border-radius: var(--rounded);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            margin-bottom: 40px;
        }
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .tool-icons {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .tool-icon {
            background-color: rgba(255, 255, 255, 0.1);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        /* Search */
        .search-section {
            padding: 30px 0;
            background-color: var(--white);
            margin-top: -40px;
            border-radius: var(--rounded);
            box-shadow: var(--shadow);
            position: relative;
            z-index: 10;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .search-container {
            padding: 0 20px;
        }
        
        .search-bar {
            display: flex;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .search-bar input {
            flex: 1;
            padding: 15px 20px;
            border: 1px solid #e2e8f0;
            border-radius: var(--rounded) 0 0 var(--rounded);
            font-size: 16px;
            outline: none;
            transition: var(--transition);
        }
        
        .search-bar input:focus {
            border-color: var(--primary-blue);
        }
        
        .search-bar button {
            background-color: var(--primary-blue);
            color: var(--white);
            border: none;
            padding: 0 25px;
            border-radius: 0 var(--rounded) var(--rounded) 0;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .search-bar button:hover {
            background-color: var(--dark-blue);
        }
        
        /* Tools Sections */
        .tools-section {
            padding: 60px 0;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .section-header h2 {
            font-size: 1.8rem;
            margin-bottom: 10px;
            color: var(--text-dark);
        }
        
        .section-header p {
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }
        
        .tool-card {
            background-color: var(--white);
            border-radius: var(--rounded);
            padding: 25px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .tool-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .tool-icon-container {
            width: 50px;
            height: 50px;
            background-color: var(--light-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            color: var(--primary-blue);
            font-size: 20px;
        }
        
        .tool-card h3 {
            font-size: 1.1rem;
            margin-bottom: 10px;
        }
        
        .tool-card p {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 20px;
        }
        
        .tool-button {
            display: inline-block;
            background-color: var(--primary-blue);
            color: var(--white);
            padding: 8px 20px;
            border-radius: var(--rounded);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .tool-button:hover {
            background-color: var(--dark-blue);
        }
        
        /* Footer */
        footer {
            background-color: var(--text-dark);
            color: var(--white);
            padding: 60px 0 30px;
        }
        
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 15px;
            display: block;
        }
        
        .footer-logo span {
            color: var(--light-blue);
        }
        
        .footer-about p {
            opacity: 0.8;
            margin-bottom: 20px;
            font-size: 0.95rem;
        }
        
        .footer-contact p {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            opacity: 0.8;
        }
        
        .footer-links h3 {
            font-size: 1.1rem;
            margin-bottom: 20px;
            color: var(--light-blue);
        }
        
        .footer-links ul {
            list-style: none;
        }
        
        .footer-links ul li {
            margin-bottom: 10px;
        }
        
        .footer-links ul li a {
            color: var(--white);
            text-decoration: none;
            opacity: 0.8;
            transition: var(--transition);
        }
        
        .footer-links ul li a:hover {
            opacity: 1;
            color: var(--light-blue);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            opacity: 0.7;
        }

/* Search Results */
        .search-results {
            display: none;
            background-color: var(--white);
            border-radius: var(--rounded);
            box-shadow: var(--shadow);
            padding: 20px;
            margin-top: 20px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

.search-results h3 {
            margin-bottom: 15px;
            color: var(--primary-blue);
        }

.search-results ul {
            list-style: none;
        }

.search-results ul li {
            padding: 10px 0;
            border-bottom: 1px solid #e2e8f0;
        }

.search-results ul li:last-child {
            border-bottom: none;
        }

.search-results ul li a {
            color: var(--text-dark);
            text-decoration: none;
            transition: var(--transition);
        }

.search-results ul li a:hover {
            color: var(--primary-blue);
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .tool-icon {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }
        }
        
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                gap: 15px;
            }
            
            nav ul {
                gap: 15px;
            }
            
            .hero {
                padding: 60px 0;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .tool-icons {
                gap: 20px;
            }
            
            .search-section {
                margin-top: -30px;
            }
            
            .section-header h2 {
                font-size: 1.5rem;
            }
        }
        
        @media (max-width: 576px) {
            .header-container {
                flex-direction: row;
                justify-content: space-between;
            }
            
            nav {
                display: none;
            }
            
            .contact-email {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero h1 {
                font-size: 1.8rem;
            }
            
            .search-bar {
                flex-direction: column;
            }
            
            .search-bar input {
                border-radius: var(--rounded);
                margin-bottom: 10px;
            }
            
            .search-bar button {
                border-radius: var(--rounded);
                padding: 15px;
            }
            
            .tools-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container header-container">
            <a href="#" class="logo">Tools<span>Wonder</span></a>
            
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#tools">Tools</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
            
            <div class="contact-email">
                <i class="fas fa-envelope"></i>
                <span>toolswonder1@gmail.com</span>
            </div>
            
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>
    
    
    <section class="hero" id="home">
        <div class="container">
            <h1>Your Daily Tools, All in One Place</h1>
            <p>Convert, calculate, compress, and simplify your everyday tasks — fast and free.</p>
            <a href="#tools" class="cta-button">Explore Tools</a>
            
            <div class="tool-icons">
                <div class="tool-icon">
                    <i class="fas fa-image"></i>
                </div>
                <div class="tool-icon">
                    <i class="fas fa-file-alt"></i>
                </div>
                <div class="tool-icon">
                    <i class="fas fa-calculator"></i>
                </div>
                <div class="tool-icon">
                    <i class="fas fa-font"></i>
                </div>
                <div class="tool-icon">
                    <i class="fas fa-code"></i>
                </div>
                <div class="tool-icon">
                    <i class="fas fa-video"></i>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="search-section">
        <div class="search-container">
            <div class="search-bar">
                <input type="text" placeholder="Search a tool..." id="searchInput">
                <button type="submit" id="searchButton"><i class="fas fa-search"></i></button>
            </div>
            <div class="search-results" id="searchResults">
                <h3>Search Results</h3>
                <ul id="resultsList">
                    
                </ul>
            </div>
        </div>
    </section>
    
    
    <section class="tools-section" id="tools">
        <div class="container">
            <div class="section-header">
                <h2>🖼 Image Tools</h2>
                <p>Edit, convert and optimize your images with our powerful tools</p>
            </div>
            
            <div class="tools-grid">
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <h3>Image Converter</h3>
                    <p>Convert between JPG, PNG, GIF, WEBP and more formats</p>
                    <a href="image-converter.html" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-compress-alt"></i>
                    </div>
                    <h3>Image Compressor</h3>
                    <p>Reduce image file size without losing quality</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-expand-alt"></i>
                    </div>
                    <h3>Image Resizer</h3>
                    <p>Resize images to any dimension while maintaining aspect ratio</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-crop-alt"></i>
                    </div>
                    <h3>Image Cropper</h3>
                    <p>Crop images to remove unwanted areas or focus on specific parts</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-font"></i>
                    </div>
                    <h3>Image to Text (OCR)</h3>
                    <p>Extract text from images with optical character recognition</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h3>Image Rotator/Flipper</h3>
                    <p>Rotate or flip images horizontally/vertically</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="tools-section" style="background-color: #f1f5f9;">
        <div class="container">
            <div class="section-header">
                <h2>📄 Document Tools</h2>
                <p>Manage and convert your documents with ease</p>
            </div>
            
            <div class="tools-grid">
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-file-pdf"></i>
                    </div>
                    <h3>PDF to Word / Word to PDF</h3>
                    <p>Convert between PDF and Word documents seamlessly</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-file-archive"></i>
                    </div>
                    <h3>PDF Compressor</h3>
                    <p>Reduce PDF file size while maintaining quality</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-cut"></i>
                    </div>
                    <h3>PDF Merger & Splitter</h3>
                    <p>Combine multiple PDFs or split pages from a PDF</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <h3>Document Converter</h3>
                    <p>Convert between various document formats</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-lock"></i>
                    </div>
                    <h3>PDF Lock/Unlock</h3>
                    <p>Add or remove passwords from PDF files</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-signature"></i>
                    </div>
                    <h3>eSign PDF</h3>
                    <p>Add digital signatures to your PDF documents</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="tools-section">
        <div class="container">
            <div class="section-header">
                <h2>🧮 Calculator Tools</h2>
                <p>Perform various calculations for your daily needs</p>
            </div>
            
            <div class="tools-grid">
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-square-root-alt"></i>
                    </div>
                    <h3>Scientific Calculator</h3>
                    <p>Advanced calculator with scientific functions</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-birthday-cake"></i>
                    </div>
                    <h3>Age Calculator</h3>
                    <p>Calculate age from birth date to current date</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-weight"></i>
                    </div>
                    <h3>BMI Calculator</h3>
                    <p>Calculate your Body Mass Index</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3>Loan EMI Calculator</h3>
                    <p>Calculate Equated Monthly Installments for loans</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <h3>GST Calculator</h3>
                    <p>Calculate Goods and Services Tax amounts</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-money-bill-wave"></i>
                    </div>
                    <h3>Currency Converter</h3>
                    <p>Convert between world currencies with live rates</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="tools-section" style="background-color: #f1f5f9;">
        <div class="container">
            <div class="section-header">
                <h2>🔤 Text Tools</h2>
                <p>Manipulate and analyze text with our text processing tools</p>
            </div>
            
            <div class="tools-grid">
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-text-height"></i>
                    </div>
                    <h3>Text Case Converter</h3>
                    <p>Change text between uppercase, lowercase and more</p>
                    <a href="text-case-converter.html" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-sort-amount-down"></i>
                    </div>
                    <h3>Word & Character Counter</h3>
                    <p>Count words, characters, sentences and paragraphs</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-filter"></i>
                    </div>
                    <h3>Remove Duplicate Lines</h3>
                    <p>Clean up text by removing duplicate lines</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-sort-alpha-down"></i>
                    </div>
                    <h3>Text Sorter</h3>
                    <p>Sort lines of text alphabetically or numerically</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-undo"></i>
                    </div>
                    <h3>Text Reverser</h3>
                    <p>Reverse text, words, or character order</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-lock"></i>
                    </div>
                    <h3>Text Encryptor/Decryptor</h3>
                    <p>Encrypt and decrypt text with secure algorithms</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
            </div>
        </div>
    </section>

<section class="tools-section">
        <div class="container">
            <div class="section-header">
                <h2>🌐 Web/Developer Tools</h2>
                <p>Essential tools for developers and webmasters</p>
            </div>
            
            <div class="tools-grid">
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-file-code"></i>
                    </div>
                    <h3>HTML/CSS/JS Minifier</h3>
                    <p>Minify your code to reduce file size and improve performance</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-brackets-curly"></i>
                    </div>
                    <h3>JSON Formatter & Validator</h3>
                    <p>Format and validate JSON data for readability and correctness</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-key"></i>
                    </div>
                    <h3>Base64 Encoder/Decoder</h3>
                    <p>Encode and decode Base64 strings and files</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-link"></i>
                    </div>
                    <h3>URL Encoder/Decoder</h3>
                    <p>Encode or decode URLs to make them web-safe</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-palette"></i>
                    </div>
                    <h3>Color Picker & Converter</h3>
                    <p>Pick colors and convert between different color formats</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-regex"></i>
                    </div>
                    <h3>Regex Tester</h3>
                    <p>Test and debug regular expressions in real-time</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
            </div>
        </div>
    </section>

<section class="tools-section" style="background-color: #f1f5f9;">
        <div class="container">
            <div class="section-header">
                <h2>🎨 Color Tools</h2>
                <p>Create, convert and analyze colors for your designs</p>
            </div>
            
            <div class="tools-grid">
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-eye-dropper"></i>
                    </div>
                    <h3>Color Picker from Image</h3>
                    <p>Extract color palettes from any uploaded image</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <h3>HEX to RGB Converter</h3>
                    <p>Convert between HEX and RGB color formats</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-sliders-h"></i>
                    </div>
                    <h3>Gradient Generator</h3>
                    <p>Create beautiful CSS gradients with custom controls</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-adjust"></i>
                    </div>
                    <h3>Contrast Checker</h3>
                    <p>Check color contrast ratios for accessibility standards</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-swatchbook"></i>
                    </div>
                    <h3>Palette Generator</h3>
                    <p>Generate harmonious color palettes for your projects</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-low-vision"></i>
                    </div>
                    <h3>Color Blindness Simulator</h3>
                    <p>Simulate how colors appear to people with color vision deficiencies</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
            </div>
        </div>
    </section>

<section class="tools-section" style="background-color: #f1f5f9;">
        <div class="container">
            <div class="section-header">
                <h2>🌍 SEO & Marketing Tools</h2>
                <p>Optimize your content and analyze your website performance</p>
            </div>
            
            <div class="tools-grid">
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-key"></i>
                    </div>
                    <h3>Keyword Density Checker</h3>
                    <p>Analyze keyword frequency and density in your content</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-tags"></i>
                    </div>
                    <h3>Meta Tag Analyzer</h3>
                    <p>Check and analyze meta tags for SEO optimization</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-font"></i>
                    </div>
                    <h3>Word Counter</h3>
                    <p>Count words, characters and reading time for SEO content</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
            </div>
        </div>
    </section>

<section class="tools-section">
        <div class="container">
            <div class="section-header">
                <h2>🛠️ Utility Tools</h2>
                <p>Handy tools for various everyday needs</p>
            </div>
            
            <div class="tools-grid">
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-qrcode"></i>
                    </div>
                    <h3>QR Code Generator & Scanner</h3>
                    <p>Create and scan QR codes for URLs, text, and more</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-barcode"></i>
                    </div>
                    <h3>Barcode Generator</h3>
                    <p>Generate barcodes in various formats for products</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-fingerprint"></i>
                    </div>
                    <h3>UUID Generator</h3>
                    <p>Generate universally unique identifiers (UUIDs)</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-ruler-combined"></i>
                    </div>
                    <h3>Unit Converter</h3>
                    <p>Convert between various units of measurement</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-globe"></i>
                    </div>
                    <h3>Time Zone Converter</h3>
                    <p>Convert times between different time zones</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
                
                <div class="tool-card">
                    <div class="tool-icon-container">
                        <i class="fas fa-random"></i>
                    </div>
                    <h3>Random Number/Password Generator</h3>
                    <p>Generate secure random numbers and passwords</p>
                    <a href="#" class="tool-button">Use Tool</a>
                </div>
            </div>
        </div>
    </section>
    
    
    <footer id="contact">
        <div class="container">
            <div class="footer-container">
                <div class="footer-about">
                    <a href="#" class="footer-logo">Tools<span>Wonder</span></a>
                    <p>Simplifying your digital life with powerful, easy-to-use tools for all your needs.</p>
                </div>
                
                <div class="footer-contact">
                    <h3>Contact Us</h3>
                    <p><i class="fas fa-envelope"></i> toolswonder1@gmail.com</p>
                </div>
                
                <div class="footer-links">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#tools">All Tools</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms of Use</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>© 2023 Tools Wonder. All rights reserved.</p>
            </div>
        </div>
    </footer>
    
    <script>
        // Mobile menu toggle functionality
        document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
            const nav = document.querySelector('nav');
            nav.style.display = nav.style.display === 'block' ? 'none' : 'block';
        });
        
        // Search functionality
        document.getElementById('searchButton').addEventListener('click', function() {
            performSearch();
        });
        
        // Also search when Enter key is pressed
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
        
        function performSearch() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const resultsContainer = document.getElementById('searchResults');
            const resultsList = document.getElementById('resultsList');
            
            // Clear previous results
            resultsList.innerHTML = '';
            
            if (searchTerm.trim() === '') {
                resultsContainer.style.display = 'none';
                return;
            }
            
            // Get all tool cards
            const toolCards = document.querySelectorAll('.tool-card');
            let foundResults = false;
            
            toolCards.forEach(card => {
                const toolName = card.querySelector('h3').textContent.toLowerCase();
                const toolDesc = card.querySelector('p').textContent.toLowerCase();
                
                if (toolName.includes(searchTerm) || toolDesc.includes(searchTerm)) {
                    foundResults = true;
                    const listItem = document.createElement('li');
                    const link = document.createElement('a');
                    link.href = '#' + card.closest('.tools-section').id;
                    link.textContent = toolName;
                    link.onclick = function() {
                        // Scroll to the tool section
                        card.scrollIntoView({ behavior: 'smooth' });
                        // Highlight the card
                        card.style.boxShadow = '0 0 0 3px var(--primary-blue)';
                        setTimeout(() => {
                            card.style.boxShadow = 'var(--shadow)';
                        }, 2000);
                        resultsContainer.style.display = 'none';
                    };
                    listItem.appendChild(link);
                    resultsList.appendChild(listItem);
                }
            });
            
            if (foundResults) {
                resultsContainer.style.display = 'block';
            } else {
                const listItem = document.createElement('li');
                listItem.textContent = 'No tools found matching your search.';
                resultsList.appendChild(listItem);
                resultsContainer.style.display = 'block';
            }
        }
        
        // Close search results when clicking outside
        document.addEventListener('click', function(event) {
            const searchContainer = document.querySelector('.search-container');
            if (!searchContainer.contains(event.target)) {
                document.getElementById('searchResults').style.display = 'none';
            }
        });
    </script>
</body>
</html>

अब इस कोड को हमें अपनी Repository के अंदर Add करना पड़ेगा। इसके लिए "Add File" पर क्लिक करके "Create New File" को सेलेक्ट करे.अब आपने अपनी वेबसाइट Main Page के Code को यहाँ Paste करना है और इस File को एक नाम देना है. यहाँ आपको वही नाम Enter करना है जो मैं बता रहा हु. अपनी मर्जी कोई दूसरा नाम आपको दर्ज करना है.

तो आप इस File के नाम में "index.html" लिखेंगे और Commit Changes पर क्लिक करके इसे Save कर देंगे। और इसी के साथ हमारा Main Page तैयार है. अब हम हर Tool के लिए एक File Create करेंगे। तो सबसे पहले आपको Tool का Code Copy कर लेना है.

Prompt For Image Converter Tool-

"Create an image Converter tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload an image and Convert it on Different Formates. Users should be able to preview the image and download the compressed version. Ensure the design is fully mobile-responsive."

Code For Image Converter Tool

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Converter Tool</title>
  <style>
    body {
      background-color: #ffffff;
      color: #2563eb;
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 100vh;
      padding: 1rem;
      box-sizing: border-box;
    }
    .container {
      padding: 2rem;
      border-radius: 16px;
      max-width: 500px;
      width: 100%;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      background-color: #ffffff;
    }
    input, select, button {
      width: 100%;
      margin-top: 1rem;
      padding: 0.5rem;
      border: 2px solid #2563eb;
      border-radius: 8px;
      font-size: 1rem;
      color: #2563eb;
      background-color: #ffffff;
    }
    button {
      background-color: #2563eb;
      color: white;
      cursor: pointer;
    }
    button:hover {
      background-color: #1e40af;
    }
    img {
      max-width: 100%;
      margin-top: 1rem;
      border-radius: 8px;
    }
    .download-btn {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      background-color: #2563eb;
      color: white;
      text-align: center;
      border-radius: 8px;
      text-decoration: none;
    }
    .download-btn:hover {
      background-color: #1e40af;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Image Converter Tool</h1>
    <input type="file" id="imageInput" accept="image/*" />
    <select id="formatSelect">
      <option value="png">PNG</option>
      <option value="jpeg">JPG</option>
      <option value="gif">GIF</option>
      <option value="webp">WebP</option>
    </select>
    <button onclick="convertImage()">Convert Image</button>

document.getElementById('imageInput').addEventListener('change', function(e) {
      originalFile = e.target.files[0];
      const previewContainer = document.getElementById('previewContainer');
      previewContainer.innerHTML = '<p>Original Preview:</p>' + '<img src="' + URL.createObjectURL(originalFile) + '" alt="Original Image">';
    });

function convertImage() {
      if (!originalFile) return alert("Please upload an image first.");

const format = document.getElementById("formatSelect").value;
      const reader = new FileReader();
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      const img = new Image();

reader.onload = function(event) {
        img.onload = function() {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);

canvas.toBlob(function(blob) {
            const convertedUrl = URL.createObjectURL(blob);
            const previewContainer = document.getElementById("previewContainer");
            previewContainer.innerHTML += '<p>Converted Preview:</p>' +
              '<img src="' + convertedUrl + '" alt="Converted Image">' +
              '<a class="download-btn" href="' + convertedUrl + '" download="converted-image.' + format + '">Download Converted Image</a>';
          }, 'image/' + format);
        };
        img.src = event.target.result;
      };

reader.readAsDataURL(originalFile);
    }
  </script>
</body>
</html>

अब फिर से एक नई File create करे और इस Code को वहा Paste करे. और उसे एक नाम दे जो की "image-converter.html होगा। और फिर "Commit Changes" पर क्लिक करके इसे सेव दे.

अब हम अपने Main Page यानि "index.html " को Edit करेंगे। इसके लिए सबसे पहले File पर क्लिक करेंगे और Right Hand Side में Pencil वाले icon क्लिक करके उसे Edit करे। अब आपको Ctrl+F को Press करना जिससे Search Box Open होगा। वहा सर्च करे "Image Converter" वह आपको कुछ इस तरह का कोड मिलेगा -

----------------------------------------------------------------------------------------------

</div>

<h3>Image Converter</h3>

<p>Convert between JPG, PNG, GIF, WEBP and more formats</p>

</div>

-----------------------------------------------------------------------------------------------------------

यह href ="#" को href ="image-converter .html" के साथ बदल देना होगा। उसके commit changes पर क्लिक करके इसे save कर ले. आपको अब एक एक Tool के लिए इस Same Process को Repeat करना होगा। चलिए मैं आपको एक- दो और Tool Add करके दिखा देता हु.

अब हम इमेज Compressor Tool बनाएंगे इसके लिए सबसे पहले आपको AI से Code Generate करना होगा।

Prompt For Image Compressor Tool:-

"Create an image compressor tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload an image and compress it. Users should be able to preview the image and download the compressed version. Ensure the design is fully mobile-responsive."

Code For Image Compressor Tool

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Compressor</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f0f8ff;
      color: #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
    }

h1 {
      color: #007bff;
    }

.container {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0, 123, 255, 0.1);
      padding: 20px;
      max-width: 500px;
      width: 100%;
      text-align: center;
    }

input[type="file"] {
      margin: 15px 0;
    }

img {
      max-width: 100%;
      margin-top: 15px;
      border-radius: 10px;
    }

button {
      margin-top: 15px;
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }

button:hover {
      background-color: #0056b3;
    }

@media (max-width: 600px) {
      .container {
        padding: 15px;
      }
    }
  </style>
</head>
<body>
  <h1>Image Compressor</h1>
  <div class="container">
    <input type="file" id="upload" accept="image/*" />
    <div id="previewContainer">
      <img id="preview" src="" alt="Preview" style="display:none;" />
    </div>
    <button id="compressBtn" style="display:none;">Compress & Download</button>
  </div>

upload.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function (event) {
          preview.src = event.target.result;
          preview.style.display = 'block';
          compressBtn.style.display = 'inline-block';
        };
        reader.readAsDataURL(file);
      }
    });

compressBtn.addEventListener('click', () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = preview.src;

img.onload = () => {
        const scale = 0.5; // Compress to 50% size
        canvas.width = img.width * scale;
        canvas.height = img.height * scale;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

canvas.toBlob((blob) => {
          const link = document.createElement('a');
          link.href = URL.createObjectURL(blob);
          link.download = 'compressed-image.jpg';
          link.click();
        }, 'image/jpeg', 0.7); // JPEG format with 70% quality
      };
    });
  </script>
</body>
</html>

अब फिर से एक नई File create करे और इस Code को वहा Paste करे. और उसे एक नाम दे जो की "image-compressor.html होगा। और फिर "Commit Changes" पर क्लिक करके इसे सेव दे.

अब हम अपने Main Page यानि "index.html " को Edit करेंगे। इसके लिए सबसे पहले File पर क्लिक करेंगे और Right Hand Side में Pencil वाले icon क्लिक करके उसे Edit करे। अब आपको Ctrl+F को Press करना जिससे Search Box Open होगा। वहा सर्च करे "Image compressor" वह आपको कुछ इस तरह का कोड मिलेगा -

-----------------------------------------------------------------------------------------------

</div>

<h3>Image Compressor</h3>

<p>Reduce image file size without losing quality</p>

</div>

----------------------------------------------------------------------------------------------

यह href ="#" को href ="image-compressor .html" के साथ बदल देना होगा। उसके commit changes पर क्लिक करके इसे save कर ले.

अब हम हर एक Tool के लिए इस Same Process को Repeat करते जायेंगे। मैं यहाँ आपको Prompt और Code दोनों दे रहा हु जिससे आपका काम आसान होगा। आप चाहे तो इस prompt को Chat GPT पर Paste करके Code Generate कर सकते है या फिर Directly दिए गए Code का इस्तमाल कर सकते है जो की मैंने Chat GPT से बनवाया है.

Prompt For Image Resizer Tool:-

"Create an image resizer tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload an image and resize it by specifying custom width and height. Users should be able to preview the resized image and download the final version. Ensure the design is fully mobile-responsive."

Code For Image Resizer Tool

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Resizer Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #e6f0ff;
      color: #003366;
      margin: 0;
      padding: 0;
    }

.container {
      max-width: 600px;
      margin: 2rem auto;
      padding: 1rem;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

h1 {
      text-align: center;
      color: #007bff;
    }

input[type="file"], input[type="number"] {
      display: block;
      width: 100%;
      margin: 1rem 0;
      padding: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

canvas {
      max-width: 100%;
      margin-top: 1rem;
    }

button {
      background-color: #007bff;
      color: white;
      padding: 0.7rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      width: 100%;
      margin-top: 1rem;
    }

button:hover {
      background-color: #0056b3;
    }

@media (max-width: 600px) {
      .container {
        margin: 1rem;
        padding: 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Image Resizer</h1>
    <input type="file" id="upload" accept="image/*" />
    <input type="number" id="width" placeholder="Width (px)" />
    <input type="number" id="height" placeholder="Height (px)" />
    <button onclick="resizeImage()">Resize Image</button>
    <canvas id="canvas"></canvas>
    <a id="downloadLink" style="display:none;" download="resized-image.png">Download Resized Image</a>
  </div>

document.getElementById('upload').addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (!file) return;

const reader = new FileReader();
      reader.onload = function(e) {
        originalImage.src = e.target.result;
      };
      reader.readAsDataURL(file);
    });

function resizeImage() {
      const width = parseInt(document.getElementById('width').value);
      const height = parseInt(document.getElementById('height').value);
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

if (!width || !height || isNaN(width) || isNaN(height)) {
        alert("Please enter valid width and height.");
        return;
      }

canvas.width = width;
      canvas.height = height;

ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(originalImage, 0, 0, width, height);

const downloadLink = document.getElementById('downloadLink');
      downloadLink.href = canvas.toDataURL();
      downloadLink.style.display = 'block';
      downloadLink.textContent = 'Download Resized Image';
    }
  </script>
</body>
</html>

Prompt For Image Crop Tool:-

"Create an image crop tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload an image and crop it by selecting a specific area. Users should be able to preview the cropped image and download the final version. Ensure the design is fully mobile-responsive."

Code For Image Crop Tool

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Cropper Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #e6f0ff;
      color: #003366;
      margin: 0;
      padding: 0;
    }

.container {
      max-width: 600px;
      margin: 2rem auto;
      padding: 1rem;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

h1 {
      text-align: center;
      color: #007bff;
    }

input[type="file"],
    select {
      display: block;
      width: 100%;
      margin: 1rem 0;
      padding: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

canvas {
      max-width: 100%;
      margin-top: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

button:hover {
      background-color: #0056b3;
    }

a#downloadLink {
      display: none;
      text-align: center;
      background-color: #007bff;
      color: white;
      padding: 0.7rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      text-decoration: none;
      margin-top: 1rem;
    }

a#downloadLink:hover {
      background-color: #0056b3;
    }

@media (max-width: 600px) {
      .container {
        margin: 1rem;
        padding: 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Image Cropper</h1>
    <input type="file" id="upload" accept="image/*" />

<select id="aspectRatio">
      <option value="1">1:1 (Square)</option>
      <option value="16/9">16:9</option>
      <option value="4/3">4:3</option>
      <option value="3/2">3:2</option>
      <option value="21/9">21:9</option>
    </select>

<button onclick="resizeImage()">Apply Aspect Ratio</button>
    <canvas id="canvas"></canvas>
    <a id="downloadLink" download="cropped-image.png">Download Cropped Image</a>
  </div>

document.getElementById('upload').addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (!file) return;

const reader = new FileReader();
      reader.onload = function(e) {
        originalImage.src = e.target.result;
        originalImage.onload = () => resizeImage();
      };
      reader.readAsDataURL(file);
    });

function resizeImage() {
      const aspectValue = document.getElementById('aspectRatio').value;
      const aspectRatio = eval(aspectValue);

const originalWidth = originalImage.width;
      const originalHeight = originalImage.height;

let newWidth = originalWidth;
      let newHeight = Math.round(newWidth / aspectRatio);

if (newHeight > originalHeight) {
        newHeight = originalHeight;
        newWidth = Math.round(newHeight * aspectRatio);
      }

const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

canvas.width = newWidth;
      canvas.height = newHeight;

ctx.clearRect(0, 0, newWidth, newHeight);
      ctx.drawImage(originalImage, 0, 0, newWidth, newHeight);

Prompt For Image To Text Tool:-

"Create an image to text (OCR) tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload an image and extract the text content from it. Users should be able to preview the uploaded image and view the extracted text. Ensure the design is fully mobile-responsive."

Code For Image To Text Tool

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image to Text Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f8ff;
      color: #000;
      margin: 0;
      padding: 0;
    }

.container {
      max-width: 600px;
      margin: 0 auto;
      padding: 1rem;
    }

h1 {
      text-align: center;
      color: #007bff;
    }

.upload-section {
      background: #ffffff;
      border: 2px dashed #007bff;
      padding: 2rem;
      text-align: center;
      border-radius: 10px;
    }

input[type="file"] {
      display: none;
    }

label[for="imageInput"] {
      background-color: #007bff;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      cursor: pointer;
    }

#output {
      margin-top: 1rem;
      background: #e6f0ff;
      padding: 1rem;
      border-radius: 5px;
      white-space: pre-wrap;
    }

button.copy-btn {
      margin-top: 0.5rem;
      background-color: #007bff;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      cursor: pointer;
    }

@media (max-width: 600px) {
      .container {
        padding: 0.5rem;
      }

.upload-section {
        padding: 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Image to Text</h1>
    <div class="upload-section">
      <label for="imageInput">Upload Image</label>
      <input type="file" id="imageInput" accept="image/*" />
    </div>
    <div id="output" style="display:none;"></div>
    <button class="copy-btn" style="display:none;" onclick="copyText()">Copy Text</button>
  </div>

imageInput.addEventListener('change', async () => {
      if (imageInput.files.length === 0) return;

const file = imageInput.files[0];
      const reader = new FileReader();

reader.onload = async () => {
        output.style.display = 'block';
        output.textContent = 'Processing...';

try {
          const result = await Tesseract.recognize(reader.result, 'eng');
          output.textContent = result.data.text;
          copyBtn.style.display = 'inline-block';
        } catch (err) {
          output.textContent = 'Error processing image.';
          console.error(err);
        }
      };

reader.readAsDataURL(file);
    });

function copyText() {
      const text = output.textContent;
      navigator.clipboard.writeText(text).then(() => {
        alert('Text copied to clipboard!');
      });
    }
  </script>
</body>
</html>

Prompt For Image Rotator/Flipper Tool:-

"Create an image rotator and flipper tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload an image and rotate it (left or right) or flip it (horizontally or vertically). Users should be able to preview the modified image and download the final version. Ensure the design is fully mobile-responsive."

Code For Image Rotator/Flipper Tool:-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Image Rotator/Flipper Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      color: #333;
      margin: 0;
      padding: 0;
    }

.container {
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }

h1 {
      color: #007bff;
    }

.upload-section {
      margin: 20px 0;
    }

.controls {
      margin: 20px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
      border-radius: 5px;
      flex: 1 1 40%;
      max-width: 180px;
    }

button:hover {
      background-color: #0056b3;
    }

.preview {
      margin: 20px 0;
      max-height: 300px;
      overflow: auto;
      border: 1px solid #ddd;
      padding: 10px;
    }

#image-preview {
      max-width: 100%;
      max-height: 280px;
      transition: transform 0.3s ease;
    }

.download {
      margin-top: 20px;
    }

@media (max-width: 600px) {
      .container {
        padding: 10px;
      }

button {
        width: 100%;
        max-width: none;
        margin-top: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Image Rotator/Flipper Tool</h1>
    <div class="upload-section">
      <input type="file" id="image-upload" accept="image/*">
    </div>
    <div class="controls">
      <button id="rotate-left">Rotate Left</button>
      <button id="rotate-right">Rotate Right</button>
      <button id="flip-horizontal">Flip Horizontal</button>
      <button id="flip-vertical">Flip Vertical</button>
    </div>
    <div class="preview">
      <img id="image-preview" src="" alt="Image Preview" />
    </div>
    <div class="download">
      <a id="download-link" href="#" download="edited_image.jpg">
        <button>Download Image</button>
      </a>
    </div>
  </div>

let rotation = 0;
    let flipHorizontal = false;
    let flipVertical = false;

imageUpload.addEventListener('change', (event) => {
      const file = event.target.files[0];
      if (file) {
        let reader = new FileReader();
        reader.onload = function(e) {
          imagePreview.src = e.target.result;
          rotation = 0;
          flipHorizontal = false;
          flipVertical = false;
          imagePreview.style.transform = '';
        };
        reader.readAsDataURL(file);
      }
    });

rotateLeftBtn.addEventListener('click', () => {
      rotation -= 90;
      updateImage();
    });

rotateRightBtn.addEventListener('click', () => {
      rotation += 90;
      updateImage();
    });

flipHorizontalBtn.addEventListener('click', () => {
      flipHorizontal = !flipHorizontal;
      updateImage();
    });

flipVerticalBtn.addEventListener('click', () => {
      flipVertical = !flipVertical;
      updateImage();
    });

function updateImage() {
      imagePreview.style.transform = `rotate(${rotation}deg)` +
        (flipHorizontal ? ' scaleX(-1)' : '') +
        (flipVertical ? ' scaleY(-1)' : '');
      updateDownloadLink();
    }

function updateDownloadLink() {
      if (!imagePreview.src) return;

let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let img = new Image();
      img.crossOrigin = "anonymous";
      img.src = imagePreview.src;

img.onload = function() {
        let w = img.width;
        let h = img.height;

if (rotation % 180 !== 0) {
          canvas.width = h;
          canvas.height = w;
        } else {
          canvas.width = w;
          canvas.height = h;
        }

ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(rotation * Math.PI / 180);
        ctx.scale(flipHorizontal ? -1 : 1, flipVertical ? -1 : 1);
        ctx.drawImage(img, -w / 2, -h / 2);

downloadLink.href = canvas.toDataURL("image/jpeg");
      };
    }
  </script>
</body>
</html>

Prompt For PDF To Word Tool:-

"Create a PDF to Word converter tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload a PDF file and convert it to an editable Word (.docx) format. Users should be able to download the converted file. Ensure the design is fully mobile-responsive."

Code For PDF To Word Tool:-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PDF to Word Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f8ff;
      color: #333;
      margin: 0;
      padding: 0;
    }

.container {
      max-width: 500px;
      margin: 50px auto;
      padding: 20px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 255, 0.1);
      text-align: center;
    }

h1 {
      color: #007bff;
      margin-bottom: 20px;
    }

input[type="file"] {
      display: block;
      margin: 20px auto;
    }

button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

button:hover {
      background-color: #0056b3;
    }

@media (max-width: 600px) {
      .container {
        margin: 20px;
        padding: 15px;
      }
      button {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>PDF to Word Converter</h1>
    <input type="file" id="pdfUpload" accept="application/pdf" />
    <button onclick="convertToWord()">Convert to Word</button>
    <p id="status"></p>
  </div>

const file = fileInput.files[0];

// Placeholder: Actual conversion requires backend or external API
      status.textContent = 'Uploading and converting file...';

// Simulate delay
      setTimeout(() => {
        status.textContent = 'Conversion successful! Download will start shortly.';

// Simulate download
        const blob = new Blob(["This is a mock Word document content."], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'converted.docx';
        a.click();
        URL.revokeObjectURL(url);
      }, 2000);
    }
  </script>
</body>
</html>

Prompt For PDF Compressor Tool:-

"Create a PDF compressor tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload a PDF file and compress it to reduce its file size. Users should be able to download the compressed PDF. Ensure the design is fully mobile-responsive."

Code For PDF Compressor Tool:-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PDF Compressor</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      color: #333;
    }

.container {
      max-width: 500px;
      margin: auto;
      padding: 2rem;
      text-align: center;
    }

h1 {
      color: #007BFF;
    }

input[type="file"] {
      display: block;
      margin: 1rem auto;
    }

.button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      margin-top: 1rem;
    }

.button:disabled {
      background-color: #a6c8ff;
      cursor: not-allowed;
    }

#downloadLink {
      display: none;
      margin-top: 1.5rem;
    }

@media (max-width: 600px) {
      .container {
        padding: 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>PDF Compressor</h1>
    <input type="file" id="pdfInput" accept="application/pdf" />
    <button class="button" id="compressBtn" disabled>Compress PDF</button>
    <a id="downloadLink" class="button" download="compressed.pdf">Download Compressed PDF</a>
  </div>

const pdfInput = document.getElementById('pdfInput');
    const compressBtn = document.getElementById('compressBtn');
    const downloadLink = document.getElementById('downloadLink');
    let originalPDF;

pdfInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      if (file && file.type === 'application/pdf') {
        const reader = new FileReader();
        reader.onload = function (e) {
          originalPDF = e.target.result;
          compressBtn.disabled = false;
        };
        reader.readAsArrayBuffer(file);
      } else {
        compressBtn.disabled = true;
      }
    });

compressBtn.addEventListener('click', async () => {
      const pdfDoc = await PDFDocument.load(originalPDF);

// Basic compression by copying pages to a new PDF
      const compressedPdf = await PDFDocument.create();
      const pages = await compressedPdf.copyPages(pdfDoc, pdfDoc.getPageIndices());
      pages.forEach((page) => compressedPdf.addPage(page));

const compressedBytes = await compressedPdf.save();
      const blob = new Blob([compressedBytes], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);
      downloadLink.href = url;
      downloadLink.style.display = 'inline-block';
    });
  </script>
</body>
</html>

Prompt For PDF Merger & Splitter Tool:-

"Create a PDF merger and splitter tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload multiple PDF files and merge them into a single file, or upload a PDF and split it into individual pages or a custom page range. Users should be able to download the merged or split PDF files. Ensure the design is fully mobile-responsive."

Code For PDF Merger & Splitter Tool:-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PDF Merger & Splitter</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      color: #333;
    }

.container {
      max-width: 600px;
      margin: auto;
      padding: 2rem;
      text-align: center;
    }

h1 {
      color: #007BFF;
      margin-bottom: 1.5rem;
    }

input[type="file"], input[type="text"] {
      display: block;
      margin: 1rem auto;
    }

.button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      margin: 1rem 0.5rem 0;
    }

.button:disabled {
      background-color: #a6c8ff;
      cursor: not-allowed;
    }

#downloadLink {
      display: none;
      margin-top: 1.5rem;
    }

@media (max-width: 600px) {
      .container {
        padding: 1rem;
      }

.button {
        display: block;
        margin: 1rem auto 0;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>PDF Merger & Splitter</h1>

<h2 style="color: #007BFF">Merge PDFs</h2>
    <input type="file" id="mergeInput" accept="application/pdf" multiple />
    <button class="button" id="mergeBtn" disabled>Merge PDFs</button>

<h2 style="color: #007BFF">Split PDF</h2>
    <input type="file" id="splitInput" accept="application/pdf" />
    <input type="text" id="splitPages" placeholder="e.g., 1,3-5" />
    <button class="button" id="splitBtn" disabled>Split PDF</button>

<a id="downloadLink" class="button" download>Download</a>
  </div>

const mergeInput = document.getElementById('mergeInput');
    const splitInput = document.getElementById('splitInput');
    const splitPages = document.getElementById('splitPages');
    const mergeBtn = document.getElementById('mergeBtn');
    const splitBtn = document.getElementById('splitBtn');
    const downloadLink = document.getElementById('downloadLink');

let mergeFiles = [];
    let splitFile;

mergeInput.addEventListener('change', (e) => {
      mergeFiles = Array.from(e.target.files);
      mergeBtn.disabled = mergeFiles.length < 2;
    });

splitInput.addEventListener('change', (e) => {
      splitFile = e.target.files[0];
      splitBtn.disabled = !splitFile;
    });

mergeBtn.addEventListener('click', async () => {
      const mergedPdf = await PDFDocument.create();

for (const file of mergeFiles) {
        const bytes = await file.arrayBuffer();
        const pdf = await PDFDocument.load(bytes);
        const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
        copiedPages.forEach(page => mergedPdf.addPage(page));
      }

const mergedBytes = await mergedPdf.save();
      const blob = new Blob([mergedBytes], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);

downloadLink.href = url;
      downloadLink.download = 'merged.pdf';
      downloadLink.style.display = 'inline-block';
    });

splitBtn.addEventListener('click', async () => {
      const bytes = await splitFile.arrayBuffer();
      const pdfDoc = await PDFDocument.load(bytes);

const splitPdf = await PDFDocument.create();
      const input = splitPages.value;
      const pageIndices = parsePageInput(input, pdfDoc.getPageCount());

const pages = await splitPdf.copyPages(pdfDoc, pageIndices);
      pages.forEach((page) => splitPdf.addPage(page));

const splitBytes = await splitPdf.save();
      const blob = new Blob([splitBytes], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);

downloadLink.href = url;
      downloadLink.download = 'split.pdf';
      downloadLink.style.display = 'inline-block';
    });

function parsePageInput(input, maxPages) {
      const ranges = input.split(',');
      const pages = new Set();

for (const range of ranges) {
        if (range.includes('-')) {
          const [start, end] = range.split('-').map(num => parseInt(num.trim(), 10) - 1);
          for (let i = start; i <= end && i < maxPages; i++) {
            pages.add(i);
          }
        } else {
          const index = parseInt(range.trim(), 10) - 1;
          if (!isNaN(index) && index < maxPages) pages.add(index);
        }
      }

return Array.from(pages);
    }
  </script>
</body>
</html>

Prompt For Document Converter Tool:-

"Create a document converter tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload documents in formats like PDF, DOCX, or TXT and convert them to other formats such as PDF, DOCX, or TXT. Users should be able to download the converted document. Ensure the design is fully mobile-responsive."

Code For Document Converter Tool:-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Converter</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f4faff;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

.container {
      background-color: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
      padding: 2rem;
      max-width: 450px;
      width: 100%;
      text-align: center;
    }

h1 {
      color: #007BFF;
      margin-bottom: 1rem;
      font-size: 1.8rem;
    }

input[type="file"],
    select {
      width: 100%;
      margin: 0.75rem 0;
      padding: 0.6rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

label {
      font-weight: 600;
      display: block;
      margin-top: 1rem;
    }

.button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 10px;
      font-size: 1rem;
      cursor: pointer;
      margin-top: 1rem;
      transition: background-color 0.3s;
    }

.button:hover {
      background-color: #0056b3;
    }

.button:disabled {
      background-color: #a6c8ff;
      cursor: not-allowed;
    }

#downloadLink {
      display: none;
      margin-top: 1.5rem;
      text-decoration: none;
      background-color: #28a745;
      padding: 0.75rem 1.5rem;
      border-radius: 10px;
      color: #fff;
      font-weight: bold;
      display: inline-block;
    }

@media (max-width: 600px) {
      .container {
        padding: 1rem;
        margin: 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Document Converter</h1>
    <input type="file" id="docInput" accept=".txt,.doc,.docx,.pdf" />

<label for="format">Convert to:</label>
    <select id="format">
      <option value="pdf">PDF</option>
      <option value="txt">Text</option>
    </select>

<button class="button" id="convertBtn" disabled>Convert</button>
    <a id="downloadLink" download>Download Converted File</a>
  </div>

let file;

docInput.addEventListener('change', (e) => {
      file = e.target.files[0];
      convertBtn.disabled = !file;
    });

convertBtn.addEventListener('click', async () => {
      const format = formatSelect.value;

if (!file) return;

const reader = new FileReader();
      reader.onload = async function (e) {
        const text = e.target.result;
        let blob;
        let filename = file.name.split('.')[0];

if (format === 'txt') {
          blob = new Blob([text], { type: 'text/plain' });
          downloadLink.download = `${filename}.txt`;
        } else if (format === 'pdf') {
          const { PDFDocument, rgb, StandardFonts } = await import('https://cdn.skypack.dev/pdf-lib');
          const pdfDoc = await PDFDocument.create();
          const page = pdfDoc.addPage([595, 842]);
          const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
          const fontSize = 12;

const lines = text.split('\n');
          let y = 800;
          lines.forEach(line => {
            if (y < 40) return;
            page.drawText(line, { x: 50, y: y, size: fontSize, font, color: rgb(0, 0, 0) });
            y -= fontSize + 2;
          });

const pdfBytes = await pdfDoc.save();
          blob = new Blob([pdfBytes], { type: 'application/pdf' });
          downloadLink.download = `${filename}.pdf`;
        }

const url = URL.createObjectURL(blob);
        downloadLink.href = url;
        downloadLink.style.display = 'inline-block';
      };

if (file.type.includes('text') || file.name.endsWith('.txt')) {
        reader.readAsText(file);
      } else {
        alert('Only .txt files are currently supported for conversion.');
      }
    });
  </script>
</body>
</html>

Prompt For PDF Lock/Unlock Tool:-

"Create a PDF lock/unlock tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload a PDF file and either add a password to protect it or remove the password from a protected file. Users should be able to download the locked or unlocked PDF. Ensure the design is fully mobile-responsive."

Code For PDF Lock/Unlock Tool:-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PDF Lock Tool</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f4faff;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

h1 {
      color: #007BFF;
      margin-bottom: 1rem;
      font-size: 1.8rem;
    }

input[type="file"],
    input[type="password"] {
      width: 100%;
      margin: 0.75rem 0;
      padding: 0.6rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

label {
      font-weight: 600;
      display: block;
      margin-top: 1rem;
    }

.button:hover {
      background-color: #0056b3;
    }

.button:disabled {
      background-color: #a6c8ff;
      cursor: not-allowed;
    }

#status {
      margin-top: 1rem;
      font-weight: bold;
      color: #007BFF;
    }

@media (max-width: 600px) {
      .container {
        padding: 1rem;
        margin: 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>PDF Lock Tool</h1>
    <input type="file" id="pdfInput" accept="application/pdf" />

<label for="password">Set Password:</label>
    <input type="password" id="password" placeholder="Enter password to lock PDF" />

<button class="button" id="lockBtn" disabled>Lock PDF</button>
    <div id="status"></div>
    <a id="downloadLink" download>Download Locked PDF</a>
  </div>

let pdfFile;

pdfInput.addEventListener('change', (e) => {
      pdfFile = e.target.files[0];
      lockBtn.disabled = !pdfFile;
    });

lockBtn.addEventListener('click', async () => {
      if (!pdfFile) return;
      const password = passwordInput.value;
      if (!password) {
        alert('Please enter a password to lock the PDF.');
        return;
      }

status.textContent = 'Processing...';

const reader = new FileReader();
      reader.onload = async function (e) {
        try {
          const existingPdfBytes = e.target.result;

// Simulate encryption as pdf-lib doesn't support it natively
          const blob = new Blob([existingPdfBytes], { type: 'application/pdf' });
          const filename = pdfFile.name.replace(/\.pdf$/i, '') + '_locked_simulated.pdf';

const url = URL.createObjectURL(blob);

downloadLink.href = url;
          downloadLink.download = filename;
          downloadLink.style.display = 'inline-block';
          status.textContent = 'PDF is ready (Note: Lock is simulated in frontend).';
        } catch (err) {
          console.error(err);
          status.textContent = 'Failed to process PDF.';
        }
      };

reader.readAsArrayBuffer(pdfFile);
    });
  </script>
</body>
</html>

Prompt For E Sign PDF Tool:-

"Create an E-Sign PDF tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to upload a PDF file, draw or type their signature, and place it on the desired location within the document. Users should be able to preview and download the signed PDF. Ensure the design is fully mobile-responsive."

Code For E Sign PDF Tool:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>eSign PDF Tool</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f7f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

.container {
            text-align: center;
            padding: 20px;
            border-radius: 12px;
            background-color: white;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
        }

h1 {
            font-size: 24px;
            margin-bottom: 20px;
        }

canvas {
            border: 1px solid #ccc;
            margin-top: 20px;
        }

button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 15px;
        }

button:disabled {
            background-color: #ccc;
        }

button:hover {
            background-color: #0056b3;
        }

#signaturePadContainer {
            margin-top: 20px;
        }

@media (max-width: 600px) {
            .container {
                width: 80%;
            }
        }
    </style>
    <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad"></script>
</head>
<body>
    <div class="container">
        <h1>eSign PDF Tool</h1>
        
        <input type="file" id="pdfInput" accept="application/pdf" />
        <div id="signaturePadContainer">
            <canvas id="signaturePadCanvas" width="400" height="200"></canvas>
        </div>
        <button id="clearBtn">Clear Signature</button>
        <button id="downloadBtn" disabled>Download Signed PDF</button>
    </div>

let signaturePad;
        let pdfDocBytes;

// Initialize the signature pad
        signaturePad = new SignaturePad(signaturePadCanvas);

// Handle the file input to load PDF data
        pdfInput.addEventListener("change", handlePdfUpload);

// Clear signature when the button is clicked
        clearBtn.addEventListener("click", () => {
            signaturePad.clear();
            downloadBtn.disabled = true; // Disable download button until signature is made
        });

// Handle PDF upload
        async function handlePdfUpload(event) {
            const file = event.target.files[0];
            if (file && file.type === "application/pdf") {
                // Read the PDF file as an array buffer
                const reader = new FileReader();
                reader.onload = async function (e) {
                    pdfDocBytes = e.target.result;
                    downloadBtn.disabled = false; // Enable the download button
                };
                reader.readAsArrayBuffer(file);
            } else {
                alert("Please upload a valid PDF file.");
            }
        }

// Create the signed PDF and trigger download
        downloadBtn.addEventListener("click", async () => {
            if (signaturePad.isEmpty()) {
                alert("Please draw your signature.");
                return;
            }

try {
                const pdfDoc = await PDFLib.PDFDocument.load(pdfDocBytes);
                const pngImageBytes = signaturePad.toDataURL().split(',')[1]; // Convert to base64 PNG
                const pngImage = await pdfDoc.embedPng(pngImageBytes);

const pages = pdfDoc.getPages();
                const firstPage = pages[0];

// Draw the signature at specific coordinates (x, y)
                const { width, height } = firstPage.getSize();
                firstPage.drawImage(pngImage, {
                    x: width - 300,
                    y: height - 150,
                    width: 150,
                    height: 75
                });

// Save the signed PDF
                const signedPdfBytes = await pdfDoc.save();

// Create a blob and trigger the download
                const blob = new Blob([signedPdfBytes], { type: "application/pdf" });
                const url = URL.createObjectURL(blob);
                const a = document.createElement("a");
                a.href = url;
                a.download = "signed_pdf.pdf";
                a.click();
            } catch (err) {
                console.error("Error signing PDF: ", err);
            }
        });
    </script>
</body>
</html>

Prompt For Scientific Calculator Tool:-

"Create a scientific calculator tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The calculator should support basic operations (addition, subtraction, multiplication, division), as well as scientific functions (square root, exponentiation, trigonometric functions, logarithms, etc.). Users should be able to input expressions, view the results, and perform multiple calculations. Ensure the design is fully mobile-responsive."

Code For Scientific Calculator Tool:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Scientific Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

.calculator {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }

#display {
            width: 100%;
            height: 50px;
            font-size: 1.5rem;
            text-align: right;
            border-radius: 5px;
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

.button {
            width: 60px;
            height: 60px;
            margin: 5px;
            font-size: 1.5rem;
            border-radius: 5px;
            border: 1px solid #ccc;
            cursor: pointer;
            background-color: #f1f1f1;
            transition: background-color 0.3s;
        }

.button:hover {
            background-color: #007bff;
            color: white;
        }

.button:active {
            background-color: #0056b3;
        }

.button.double {
            width: 130px;
        }

.button.clear {
            background-color: #ff4d4d;
            color: white;
        }

.button.equals {
            background-color: #28a745;
            color: white;
        }

.button.function {
            background-color: #17a2b8;
            color: white;
        }
    </style>
</head>
<body>

// Append values to the display
        function appendToDisplay(value) {
            display.value += value;
        }

// Clear the display
        function clearDisplay() {
            display.value = '';
        }

// Evaluate the expression and show the result
        function calculate() {
            try {
                // Replace square root and powers for easier eval() interpretation
                let expression = display.value;
                expression = expression.replace(/sqrt/g, 'Math.sqrt');
                expression = expression.replace(/pow/g, 'Math.pow');
                expression = expression.replace(/log/g, 'Math.log');
                expression = expression.replace(/exp/g, 'Math.exp');
                expression = expression.replace(/sin/g, 'Math.sin');
                expression = expression.replace(/cos/g, 'Math.cos');
                expression = expression.replace(/tan/g, 'Math.tan');

// Calculate the result
                const result = eval(expression);
                display.value = result;
            } catch (e) {
                display.value = 'Error';
            }
        }
    </script>

</body>
</html>

Prompt For Age Calculator Tool: -

"Create an age calculator tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to input their birthdate and instantly see their age in years, months, and days. Include a clean, user-friendly interface with real-time updates. Ensure the design is fully mobile-responsive and visually consistent with the rest of the site."

Code For Age Calculator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Age Calculator</title>
  <style>
    body {
      background: #f4f9ff;
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

.container {
      background: #fff;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
      text-align: center;
      width: 90%;
      max-width: 400px;
    }

h1 {
      color: #007bff;
      margin-bottom: 20px;
    }

input[type="date"] {
      padding: 10px;
      width: 100%;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 10px;
      margin-bottom: 20px;
    }

button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      font-size: 1rem;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }

button:hover {
      background-color: #0056b3;
    }

#result {
      margin-top: 20px;
      font-size: 1.2rem;
      font-weight: bold;
      color: #333;
    }

@media (max-width: 600px) {
      .container {
        padding: 20px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>Age Calculator</h1>
    <input type="date" id="dob" />
    <button onclick="calculateAge()">Calculate Age</button>
    <div id="result"></div>
  </div>

const birthDate = new Date(dob);
      const today = new Date();

let ageYears = today.getFullYear() - birthDate.getFullYear();
      let ageMonths = today.getMonth() - birthDate.getMonth();
      let ageDays = today.getDate() - birthDate.getDate();

if (ageDays < 0) {
        ageMonths--;
        ageDays += new Date(today.getFullYear(), today.getMonth(), 0).getDate();
      }

if (ageMonths < 0) {
        ageYears--;
        ageMonths += 12;
      }

document.getElementById("result").innerText = `You are ${ageYears} years, ${ageMonths} months, and ${ageDays} days old.`;
    }
  </script>

</body>
</html>

Prompt For BMI Calculator Tool: -

"Create a BMI calculator tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to input their weight and height, choose between metric and imperial units, and calculate their Body Mass Index (BMI). It should display the result along with a category (e.g., underweight, normal, overweight, obese). The design must be clean, user-friendly, and fully mobile-responsive, with clear validation and instant result updates."

Code For BMI Calculator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>BMI Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4faff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

.container {
      background-color: #fff;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
      text-align: center;
      width: 90%;
      max-width: 400px;
    }

h1 {
      color: #007bff;
      margin-bottom: 20px;
    }

input {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

button {
      background-color: #007bff;
      color: #fff;
      padding: 12px 20px;
      border: none;
      font-size: 16px;
      border-radius: 10px;
      cursor: pointer;
      margin-top: 10px;
      width: 100%;
    }

button:hover {
      background-color: #0056b3;
    }

.result {
      margin-top: 20px;
      font-weight: bold;
      font-size: 18px;
    }

@media (max-width: 500px) {
      .container {
        padding: 20px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>BMI Calculator</h1>
    <input type="number" id="weight" placeholder="Enter your weight (kg)" />
    <input type="number" id="height" placeholder="Enter your height (cm)" />
    <button onclick="calculateBMI()">Calculate BMI</button>
    <div class="result" id="result"></div>
  </div>

if (!weight || !height || weight <= 0 || height <= 0) {
        document.getElementById("result").textContent = "Please enter valid numbers.";
        return;
      }

const heightInMeters = height / 100;
      const bmi = weight / (heightInMeters * heightInMeters);
      const roundedBMI = bmi.toFixed(1);

let category = "";

if (bmi < 18.5) category = "Underweight";
      else if (bmi < 24.9) category = "Normal weight";
      else if (bmi < 29.9) category = "Overweight";
      else category = "Obesity";

document.getElementById("result").textContent = `Your BMI is ${roundedBMI} (${category})`;
    }
  </script>

</body>
</html>

Prompt For Loan EMI Calculator Tool: -

"Create a loan EMI calculator tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to input loan amount, interest rate, and loan tenure (in months or years), and calculate the monthly EMI. It should display the total interest payable and total payment as well. The interface should be clean, intuitive, and fully mobile-responsive, with real-time calculations and input validation."

Code For Loan EMI Calculator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Loan EMI Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4faff;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

.container {
      background: #fff;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
      text-align: center;
      width: 90%;
      max-width: 450px;
    }

h1 {
      color: #007bff;
      margin-bottom: 20px;
    }

input {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

button:hover {
      background-color: #0056b3;
    }

.result {
      margin-top: 20px;
      font-weight: bold;
      font-size: 18px;
    }

@media (max-width: 500px) {
      .container {
        padding: 20px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>Loan EMI Calculator</h1>
    <input type="number" id="loanAmount" placeholder="Loan Amount (₹)" />
    <input type="number" id="interestRate" placeholder="Annual Interest Rate (%)" />
    <input type="number" id="loanTenure" placeholder="Loan Tenure (in months)" />
    <button onclick="calculateEMI()">Calculate EMI</button>
    <div class="result" id="result"></div>
  </div>

if (!loanAmount || !annualInterestRate || !tenure || loanAmount <= 0 || annualInterestRate <= 0 || tenure <= 0) {
        document.getElementById("result").textContent = "Please enter valid inputs.";
        return;
      }

const monthlyInterestRate = annualInterestRate / 12 / 100;
      const emi = (loanAmount * monthlyInterestRate * Math.pow(1 + monthlyInterestRate, tenure)) /
                  (Math.pow(1 + monthlyInterestRate, tenure) - 1);

const totalPayment = emi * tenure;
      const totalInterest = totalPayment - loanAmount;

document.getElementById("result").innerHTML = `
        Monthly EMI: ₹${emi.toFixed(2)}<br/>
        Total Interest: ₹${totalInterest.toFixed(2)}<br/>
        Total Payment: ₹${totalPayment.toFixed(2)}
      `;
    }
  </script>

</body>
</html>

Prompt For GST Calculator Tool: -

"Create a GST calculator tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should let users enter an amount and select a GST rate (e.g., 5%, 12%, 18%, 28%) to calculate both the GST amount and the total amount including GST. Include options to calculate GST-inclusive and GST-exclusive prices. The design should be clean, user-friendly, fully mobile-responsive, and provide real-time results with proper input validation."

Code For GST Calculator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>GST Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4faff;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

.container {
      background: #fff;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
      text-align: center;
      width: 90%;
      max-width: 400px;
    }

h1 {
      color: #007bff;
      margin-bottom: 20px;
    }

input {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

button:hover {
      background-color: #0056b3;
    }

.result {
      margin-top: 20px;
      font-weight: bold;
      font-size: 18px;
    }

@media (max-width: 500px) {
      .container {
        padding: 20px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>GST Calculator</h1>
    <input type="number" id="amount" placeholder="Enter Amount (₹)" />
    <input type="number" id="gstRate" placeholder="GST Rate (%)" />
    <button onclick="calculateGST()">Calculate GST</button>
    <div class="result" id="result"></div>
  </div>

if (!amount || !gstRate || amount < 0 || gstRate < 0) {
        document.getElementById("result").textContent = "Please enter valid values.";
        return;
      }

const gstAmount = (amount * gstRate) / 100;
      const totalAmount = amount + gstAmount;

document.getElementById("result").innerHTML = `
        GST Amount: ₹${gstAmount.toFixed(2)}<br/>
        Total Amount (Incl. GST): ₹${totalAmount.toFixed(2)}
      `;
    }
  </script>

</body>
</html>

Prompt For Currency Calculator Tool: -

"Create a currency converter tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to select two currencies, input an amount, and instantly see the converted value using real-time exchange rates. The interface should be clean, intuitive, and fully mobile-responsive, with input validation and the ability to switch currencies easily. Design should match the site's bright and modern aesthetic."

Code For Currency Calculator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Currency Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4faff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

h1 {
      color: #007bff;
      margin-bottom: 20px;
    }

input, select {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

button {
      background-color: #007bff;
      color: #fff;
      padding: 12px 20px;
      border: none;
      font-size: 16px;
      border-radius: 10px;
      cursor: pointer;
      width: 100%;
    }

button:hover {
      background-color: #0056b3;
    }

.result {
      margin-top: 20px;
      font-weight: bold;
      font-size: 18px;
    }
  </style>
</head>
<body>

<div class="container">
    <h1>Currency Converter</h1>
    <input type="number" id="amount" placeholder="Enter amount" />
    
    <select id="fromCurrency">
      <option value="USD">USD - US Dollar</option>
      <option value="INR">INR - Indian Rupee</option>
      <option value="EUR">EUR - Euro</option>
    </select>

<select id="toCurrency">
      <option value="INR">INR - Indian Rupee</option>
      <option value="USD">USD - US Dollar</option>
      <option value="EUR">EUR - Euro</option>
    </select>

<button onclick="convertCurrency()">Convert</button>

function convertCurrency() {
      const amount = parseFloat(document.getElementById("amount").value);
      const from = document.getElementById("fromCurrency").value;
      const to = document.getElementById("toCurrency").value;

if (!amount || amount <= 0) {
        document.getElementById("result").textContent = "Please enter a valid amount.";
        return;
      }

const rate = exchangeRates[from][to];
      const convertedAmount = (amount * rate).toFixed(2);

document.getElementById("result").textContent = 
        `${amount} ${from} = ${convertedAmount} ${to}`;
    }
  </script>

</body>
</html>

Prompt For Text Case Converter Tool: -

"Create a text case converter tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to paste or type text and convert it into different cases—such as uppercase, lowercase, title case, sentence case, and toggle case. Include buttons for each conversion, a clear/reset option, and an easy way to copy the output. The design must be clean, user-friendly, and fully mobile-responsive, with instant updates and consistent styling with the rest of the site."

Code For Text Case Converter Tool: -

<div style="text-align:center;">
  <h2>Text Case Converter</h2>
  <input type="text" id="inputArea" style="width:90%;max-width:500px;height:120px;padding:10px;font-size:16px;border-radius:8px;border:1px solid #ccc;" placeholder="Enter text here..."><br>

<button onclick="toUpper()" style="margin:5px;padding:10px 15px;background:#007bff;color:#fff;border:none;border-radius:8px;">UPPERCASE</button>
  <button onclick="toLower()" style="margin:5px;padding:10px 15px;background:#007bff;color:#fff;border:none;border-radius:8px;">lowercase</button>
  <button onclick="toSentence()" style="margin:5px;padding:10px 15px;background:#007bff;color:#fff;border:none;border-radius:8px;">Sentence case</button>
  <button onclick="toCapital()" style="margin:5px;padding:10px 15px;background:#007bff;color:#fff;border:none;border-radius:8px;">Capitalized Case</button>
  <button onclick="clearText()" style="margin:5px;padding:10px 15px;background:#007bff;color:#fff;border:none;border-radius:8px;">Clear</button>
</div>

function toLower() {
  var t = document.getElementById("inputArea");
  t.value = t.value.toLowerCase();
}

function toSentence() {
  var t = document.getElementById("inputArea");
  let txt = t.value.toLowerCase();
  t.value = txt.charAt(0).toUpperCase() + txt.slice(1);
}

function clearText() {
  var t = document.getElementById("inputArea");
  t.value = "";
}
//]]>
</script>

input[type="text"] {
    width: 90%;
    max-width: 500px;
    height: 120px;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
  }

button {
    margin: 5px;
    padding: 10px 15px;
    font-size: 14px;
    border: none;
    background: #007bff;
    color: white;
    border-radius: 8px;
    cursor: pointer;
  }

button:hover {
    background: #0056b3;
  }
</style>

Prompt For Word & Character Counter Tool: -

"Create a word counter tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to input or paste text and display the total word count, character count (with and without spaces), sentence count, and paragraph count. Include a clean, user-friendly interface with real-time updates and a clear/reset button. The design should be fully mobile-responsive and consistent with the site's aesthetic."

Code For Word & Character Counter Tool: -

<!DOCTYPE html>
<html>
<head>
  <title>Word and Character Counter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
    }

#textBox {
      width: 90%;
      max-width: 500px;
      min-height: 120px;
      padding: 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
      background: #fff;
      margin-bottom: 15px;
      outline: none;
      overflow-y: auto;
    }

button {
      margin: 5px;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      background: #007bff;
      color: #fff;
      border-radius: 8px;
      cursor: pointer;
    }

button:hover {
      background: #0056b3;
    }

#output {
      margin-top: 15px;
      font-size: 18px;
    }
  </style>
</head>
<body>

<h2>Word and Character Counter</h2>

<button onclick="countText()">Count Words & Characters</button>

<div id="output">
    <p><strong>Word Count:</strong> <span id="wordCount">0</span></p>
    <p><strong>Character Count:</strong> <span id="charCount">0</span></p>
  </div>

document.getElementById("wordCount").textContent = words.length;
      document.getElementById("charCount").textContent = characters;
    }
  </script>

</body>
</html>

Prompt For Remove Duplicate Lines Tool: -

"Create a remove duplicate lines tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should let users paste or type text into a textarea and remove all duplicate lines, keeping only the first occurrence of each line. Include a 'Remove Duplicates' button, a 'Clear' button, and a 'Copy Output' option. The interface should be clean, user-friendly, and fully mobile-responsive, with real-time performance and styling consistent with the rest of the site."

Code For Remove Duplicate Lines Tool: -

<!DOCTYPE html>
<html>
<head>
  <title>Remove Duplicate Lines Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
      text-align: center;
    }

#textBox {
      width: 90%;
      max-width: 500px;
      min-height: 150px;
      padding: 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
      background: #fff;
      margin-bottom: 15px;
      outline: none;
      overflow-y: auto;
      white-space: pre-wrap;
    }

button {
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      background-color: #007bff;
      color: white;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 15px;
    }

button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>

<h2>Remove Duplicate Lines</h2>

<button onclick="removeDuplicates()">Remove Duplicates</button>

</body>
</html>

Prompt For Text Shortener Tool: -

"Create a text shortener tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to input or paste long text and automatically shorten it while preserving the core meaning—ideal for summaries, previews, or social media posts. Include a 'Shorten Text' button, a clear/reset option, and the ability to copy the output. The interface should be clean, intuitive, and fully mobile-responsive, matching the site's overall design aesthetic."

Code For Text Shortener Tool: -

<!DOCTYPE html>
<html>
<head>
  <title>Text Shortener Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
      text-align: center;
    }

button:hover {
      background-color: #0056b3;
    }

#output {
      font-size: 16px;
      margin-top: 20px;
      color: #333;
    }
  </style>
</head>
<body>

<h2>Text Shortener Tool</h2>

<button onclick="shortenText()">Shorten Text</button>

</body>
</html>

Prompt For Text Reverse Tool: -

"Create a text reverse tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should let users input or paste text and reverse it in various ways—such as reversing the entire text, each word, or each line. Include options to choose the reversal mode, along with 'Reverse', 'Clear', and 'Copy Output' buttons. The interface should be clean, user-friendly, and fully mobile-responsive, aligning with the site's modern design."

Code For Text Reverse Tool: -

<!DOCTYPE html>
<html>
<head>
  <title>Text Reversal Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
      text-align: center;
    }

button:hover {
      background-color: #0056b3;
    }

#output {
      font-size: 16px;
      margin-top: 20px;
      color: #333;
    }
  </style>
</head>
<body>

<h2>Text Reversal Tool</h2>

<button onclick="reverseText()">Reverse Text</button>

</body>
</html>

Prompt For Text Encryptor/Decryptor Tool

"Create a text encryptor/decryptor tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to input or paste text and encrypt or decrypt it using a simple method like Caesar cipher, Base64, or a custom key-based approach. Include options to choose the encryption method, along with 'Encrypt', 'Decrypt', 'Clear', and 'Copy Output' buttons. The interface should be clean, secure-looking, and fully mobile-responsive, in line with the site's modern aesthetic."

Code For Text Encryptor/Decryptor Tool

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Encryptor/Decryptor Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
      text-align: center;
    }

button:hover {
      background-color: #0056b3;
    }

#output {
      font-size: 16px;
      margin-top: 20px;
      color: #333;
    }

.input-label {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<h2>Text Encryptor/Decryptor Tool</h2>

<label class="input-label" for="shift">Enter Shift Value (for Caesar Cipher):</label>
  <input type="number" id="shift" value="3" min="1" max="25" />

<button onclick="encryptText()">Encrypt Text</button>
  <button onclick="decryptText()">Decrypt Text</button>

function encryptText() {
      const content = document.getElementById("textBox").innerText.trim();
      const shiftValue = parseInt(document.getElementById("shift").value);

if (!content) {
        document.getElementById("output").innerText = "Please enter text to encrypt.";
        return;
      }

const encryptedText = caesarCipher(content, shiftValue);
      document.getElementById("output").innerText = "Encrypted Text: " + encryptedText;
    }

function decryptText() {
      const content = document.getElementById("textBox").innerText.trim();
      const shiftValue = parseInt(document.getElementById("shift").value);

if (!content) {
        document.getElementById("output").innerText = "Please enter text to decrypt.";
        return;
      }

const decryptedText = caesarCipher(content, -shiftValue);
      document.getElementById("output").innerText = "Decrypted Text: " + decryptedText;
    }
  </script>

</body>
</html>

Prompt For HTML Minifier Tool: -

"Create an HTML minifier tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to paste HTML code and remove all unnecessary spaces, line breaks, and comments to produce a minified version. Include a 'Minify', 'Clear', and 'Copy Output' button, and display both original and minified code for comparison. The interface should be clean, developer-friendly, and fully mobile-responsive, matching the site's overall aesthetic."

Code For HTML Minifier Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML/CSS/JS Minifier Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
      text-align: center;
    }

#textBox {
      width: 90%;
      max-width: 600px;
      min-height: 150px;
      padding: 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
      background: #fff;
      margin-bottom: 15px;
      outline: none;
      overflow-y: auto;
      white-space: pre-wrap;
    }

button:hover {
      background-color: #0056b3;
    }

#output {
      font-size: 16px;
      margin-top: 20px;
      color: #333;
      white-space: pre-wrap;
    }

.input-label {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<h2>HTML/CSS/JS Minifier Tool</h2>

<button onclick="minifyCode()">Minify Code</button>

function minifyCSS(css) {
      return css.replace(/\n/g, '').replace(/\s{2,}/g, ' ').replace(/\/\*.*?\*\//g, ''); // Remove whitespace and comments
    }

function minifyJS(js) {
      return js.replace(/\n/g, '').replace(/\s{2,}/g, ' ').replace(/\/\/.*?\n/g, ''); // Remove whitespace and comments
    }

function minifyCode() {
      const content = document.getElementById("textBox").innerText.trim();
      if (!content) {
        document.getElementById("output").innerText = "Please paste some code to minify.";
        return;
      }

document.getElementById("output").innerText = "Minified Code:\n" + minifiedCode;
    }
  </script>

</body>
</html>

Prompt For JSON Formatter & Validator Tool: -

"Create a JSON formatter and validator tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to paste or input raw JSON data, then format it with proper indentation and validate its syntax. Display clear error messages if the JSON is invalid, and show a prettified version if it's valid. Include 'Format', 'Validate', 'Clear', and 'Copy Output' buttons. The interface should be clean, developer-friendly, and fully mobile-responsive, consistent with the site's modern design."

Code For JSON Formatter & Validator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON Formatter & Validator Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
      text-align: center;
    }

button:hover {
      background-color: #0056b3;
    }

#output {
      font-size: 16px;
      margin-top: 20px;
      color: #333;
      white-space: pre-wrap;
    }

#error {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>

<h2>JSON Formatter & Validator Tool</h2>

<button onclick="formatAndValidateJSON()">Format & Validate JSON</button>

errorElement.innerText = ''; // Reset error message
      outputElement.innerText = ''; // Reset output message

if (!content) {
        errorElement.innerText = "Please paste valid JSON data.";
        return;
      }

try {
        // Try to parse the JSON content
        const jsonObject = JSON.parse(content);

// If parsing succeeds, format the JSON with 2 spaces
        const formattedJSON = JSON.stringify(jsonObject, null, 2);

// Display formatted JSON
        outputElement.innerText = "Formatted JSON:\n" + formattedJSON;

} catch (e) {
        // If parsing fails, display error message
        errorElement.innerText = "Invalid JSON: " + e.message;
      }
    }
  </script>

</body>
</html>

Prompt For Base64 Encoder/Decoder Tool: -

"Create a Base64 encoder/decoder tool using HTML, CSS, and JavaScript for my multi-tool website, which uses a bright blue and white theme. The tool should allow users to input or paste text and either encode it to Base64 or decode Base64 back to plain text. Include clear buttons for 'Encode', 'Decode', 'Clear', and 'Copy Output'. The interface should be clean, intuitive, and fully mobile-responsive, with real-time processing and a design consistent with the rest of the site."

Code For Base64 Encoder/Decoder Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Base64 Encoder/Decoder</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
      text-align: center;
    }

.content-box {
      width: 90%;
      max-width: 600px;
      min-height: 120px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background: #fff;
      font-size: 16px;
      margin-bottom: 15px;
      white-space: pre-wrap;
      overflow-y: auto;
      outline: none;
    }

button {
      padding: 10px 20px;
      font-size: 16px;
      margin: 5px;
      border: none;
      border-radius: 8px;
      background-color: #007bff;
      color: white;
      cursor: pointer;
    }

button:hover {
      background-color: #0056b3;
    }

#output {
      margin-top: 20px;
      width: 90%;
      max-width: 600px;
      background: #e9f7ff;
      padding: 10px;
      border-radius: 10px;
      white-space: pre-wrap;
      word-break: break-all;
    }
  </style>
</head>
<body>

<h2>Base64 Encoder / Decoder</h2>

<div>
    <button onclick="encodeBase64()">Encode</button>
    <button onclick="decodeBase64()">Decode</button>
  </div>

</body>
</html>

Prompt For URL Encoder/Decoder Tool: -

"Create a URL encoder/decoder tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to input or paste text and either encode it into a URL-safe format or decode a URL-encoded string back to readable text. Include buttons for 'Encode', 'Decode', 'Clear', and 'Copy Output'. The interface should be clean, user-friendly, and fully mobile-responsive, with instant processing and styling consistent with the rest of the site."

Code For URL Encoder/Decoder Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>URL Encoder / Decoder</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f5faff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
      text-align: center;
      margin-bottom: 15px;
    }

.input-box {
      width: 90%;
      max-width: 600px;
      min-height: 100px;
      background: #ffffff;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 10px;
      font-size: 16px;
      margin-bottom: 15px;
      white-space: pre-wrap;
      outline: none;
      overflow-y: auto;
    }

.button-group {
      margin-bottom: 15px;
    }

button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 8px;
      margin: 5px;
      cursor: pointer;
    }

button:hover {
      background-color: #0056b3;
    }

#result {
      width: 90%;
      max-width: 600px;
      background: #e9f7ff;
      padding: 10px;
      border-radius: 10px;
      font-size: 16px;
      word-break: break-all;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>

<h2>URL Encoder / Decoder</h2>

<div class="button-group">
    <button onclick="encodeURL()">Encode</button>
    <button onclick="decodeURL()">Decode</button>
  </div>

</body>
</html>

Prompt For Color Picker & Converter Tool: -

"Create a color picker and converter tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to pick a color using a visual picker or input a color code in HEX, RGB, or HSL format. It should instantly convert between HEX, RGB, and HSL values and display the selected color preview. Include 'Copy' buttons for each format, along with a clean, intuitive UI. The design should be fully mobile-responsive and visually consistent with the rest of the site."

Code For Color Picker & Converter Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Color Picker & Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f2f9ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
      text-align: center;
    }

.picker-box {
      background: #ffffff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      max-width: 400px;
      width: 90%;
      text-align: center;
    }

input[type="color"] {
      width: 100px;
      height: 50px;
      border: none;
      margin-bottom: 15px;
    }

.color-code {
      margin-top: 10px;
      padding: 10px;
      background: #e9f7ff;
      border-radius: 8px;
      font-size: 16px;
      word-break: break-word;
    }

.rgb-inputs {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      justify-content: center;
    }

.rgb-inputs input {
      width: 60px;
      padding: 6px;
      font-size: 14px;
      border-radius: 6px;
      border: 1px solid #ccc;
      text-align: center;
    }

button {
      margin-top: 10px;
      padding: 8px 16px;
      background-color: #007bff;
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 14px;
      cursor: pointer;
    }

button:hover {
      background-color: #0056b3;
    }

#colorPreview {
      margin-top: 15px;
      width: 100%;
      height: 40px;
      border-radius: 6px;
    }
  </style>
</head>
<body>

<h2>Color Picker & Converter</h2>

<button onclick="convertRGBtoHex()">Convert RGB to HEX</button>

colorInput.addEventListener('input', function () {
      const hex = colorInput.value.toUpperCase();
      hexCode.textContent = "HEX: " + hex;

const rgb = hexToRgb(hex);
      if (rgb) {
        rgbCode.textContent = "RGB: rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")";
        colorPreview.style.backgroundColor = hex;
      }
    });

function hexToRgb(hex) {
      hex = hex.replace('#', '');
      if (hex.length !== 6) return null;
      const r = parseInt(hex.substring(0, 2), 16);
      const g = parseInt(hex.substring(2, 4), 16);
      const b = parseInt(hex.substring(4, 6), 16);
      return { r, g, b };
    }

function componentToHex(c) {
      const hex = c.toString(16);
      return hex.length == 1 ? "0" + hex : hex;
    }

function convertRGBtoHex() {
      const r = parseInt(document.getElementById('r').value);
      const g = parseInt(document.getElementById('g').value);
      const b = parseInt(document.getElementById('b').value);

if (
        isNaN(r) || isNaN(g) || isNaN(b) ||
        r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255
      ) {
        alert("Please enter valid RGB values between 0 and 255.");
        return;
      }

const hex = "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
      colorInput.value = hex;
      colorInput.dispatchEvent(new Event('input'));
    }
  </script>

</body>
</html>

Prompt For Regex Tester Tool: -

"Create a regex tester tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to input a regular expression and test it against a sample text, showing real-time results for matches, groups, and errors. Include a 'Test', 'Clear', and 'Copy Output' button, along with an option to display matched results. The interface should be clean, developer-friendly, and fully mobile-responsive, consistent with the site's modern aesthetic."

Code For Regex Tester Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Regex Tester</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f1f9ff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.container {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      width: 90%;
      max-width: 600px;
    }

h2 {
      color: #007bff;
      text-align: center;
      margin-bottom: 20px;
    }

input, .input-box {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      margin: 10px 0;
      border-radius: 8px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

.input-box {
      min-height: 100px;
      background: #f9f9f9;
      white-space: pre-wrap;
      overflow-y: auto;
    }

button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
    }

button:hover {
      background-color: #0056b3;
    }

#result {
      margin-top: 15px;
      background: #e7f9e9;
      padding: 10px;
      border-radius: 8px;
      font-size: 16px;
      white-space: pre-wrap;
      color: #333;
    }
  </style>
</head>
<body>

<div class="container">
    <h2>Regex Tester</h2>

<button onclick="testRegex()">Test Regex</button>

try {
        const regex = new RegExp(pattern, 'g');
        const matches = [...text.matchAll(regex)];

if (matches.length > 0) {
          let output = "Matches found:\n";
          matches.forEach((match, index) => {
            output += `${index + 1}: ${match[0]}\n`;
          });
          resultDiv.style.background = "#e7f9e9";
          resultDiv.textContent = output;
        } else {
          resultDiv.style.background = "#fff3cd";
          resultDiv.textContent = "No matches found.";
        }
      } catch (e) {
        resultDiv.style.background = "#f8d7da";
        resultDiv.textContent = "Invalid regular expression!";
      }
    }
  </script>

</body>
</html>

Prompt For Color Picker from Image Tool: -

"Create a color picker from image tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to upload an image and click on any pixel to extract its color in HEX, RGB, and HSL formats. It should display the color preview, along with the corresponding color codes. Include options to save or copy the color codes and a clear/reset button. The interface should be clean, user-friendly, and fully mobile-responsive, matching the site's modern design."

Code For Color Picker from Image Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Color Picker from Image</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

input[type="file"] {
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      margin-bottom: 15px;
    }

canvas {
      max-width: 100%;
      width: 300px;
      height: auto;
      border: 1px solid #ccc;
      margin-bottom: 20px;
    }

.color-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

.color-box {
      width: 40px;
      height: 40px;
      border: 2px solid #000;
      border-radius: 6px;
    }

.color-code {
      font-weight: bold;
    }
  </style>
</head>
<body>

<h2>Color Picker from Image</h2>

<div class="color-info">
    <div class="color-box" id="pickedColor"></div>
    <div class="color-code" id="colorCode">Click on image</div>
  </div>

imageInput.addEventListener("change", function () {
      const file = this.files[0];
      if (!file) return;

const reader = new FileReader();
      reader.onload = function (e) {
        const img = new Image();
        img.onload = function () {
          const scale = 300 / img.width; // scale to fit width
          const scaledWidth = 300;
          const scaledHeight = img.height * scale;

canvas.width = scaledWidth;
          canvas.height = scaledHeight;
          ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    });

canvas.addEventListener("click", function (e) {
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

const pixel = ctx.getImageData(x, y, 1, 1).data;
      const hex = rgbToHex(pixel[0], pixel[1], pixel[2]);

pickedColor.style.backgroundColor = hex;
      colorCode.textContent = `HEX: ${hex} | RGB: (${pixel[0]}, ${pixel[1]}, ${pixel[2]})`;
    });

function rgbToHex(r, g, b) {
      return "#" + [r, g, b].map(x => {
        const hex = x.toString(16);
        return hex.length === 1 ? "0" + hex : hex;
      }).join("");
    }
  </script>

</body>
</html>

Prompt For HEX to RGB Converter Tool: -

"Create a HEX to RGB converter tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to input a HEX color code and instantly convert it to the corresponding RGB value. Display both the HEX and RGB values, along with a color preview. Include a 'Convert', 'Clear', and 'Copy Output' button. The design should be clean, intuitive, and fully mobile-responsive, in line with the site’s overall aesthetic."

Code For HEX to RGB Converter Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>HEX to RGB Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4faff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

.converter {
      background: #ffffff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
      width: 100%;
      max-width: 400px;
      text-align: center;
    }

input[type="text"] {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }

button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 15px;
    }

button:hover {
      background-color: #0056b3;
    }

.result {
      font-weight: bold;
      color: #333;
      margin-top: 10px;
    }
  </style>
</head>
<body>

<h2>HEX to RGB Converter</h2>

<div class="converter">
    <input type="text" id="hexInput" placeholder="Enter HEX code e.g. #ff5733" />
    <button onclick="convertHexToRgb()">Convert</button>
    <div class="result" id="rgbResult">RGB: -</div>
  </div>

let validHex = hex.replace("#", "");
      if (validHex.length === 3) {
        validHex = validHex.split('').map(c => c + c).join('');
      }

if (/^[0-9A-Fa-f]{6}$/.test(validHex)) {
        const r = parseInt(validHex.substring(0, 2), 16);
        const g = parseInt(validHex.substring(2, 4), 16);
        const b = parseInt(validHex.substring(4, 6), 16);
        output.textContent = `RGB: (${r}, ${g}, ${b})`;
      } else {
        output.textContent = "Invalid HEX code!";
      }
    }
  </script>

</body>
</html>

Prompt For Gradient Converter Tool: -

"Create a gradient converter tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to input color values in different formats (e.g., HEX, RGB, HSL) and convert them into CSS gradient code. Users should be able to preview the gradient and customize the direction, type (linear, radial), and color stops. Include options to copy the CSS code, clear inputs, and reset the preview. The design should be clean, user-friendly, and fully mobile-responsive, in line with the site's modern aesthetic."

Code For Gradient Converter Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Gradient Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f8ff;
      padding: 30px;
      text-align: center;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

.generator-box {
      background: #ffffff;
      border-radius: 10px;
      padding: 20px;
      max-width: 400px;
      margin: auto;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

input[type="color"],
    select,
    input[type="text"] {
      margin: 10px 5px;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 8px;
      width: 45%;
    }

.preview {
      margin-top: 20px;
      height: 150px;
      border-radius: 8px;
      border: 2px solid #007bff;
    }

.css-output {
      margin-top: 10px;
      font-weight: bold;
      word-break: break-word;
      color: #333;
    }

button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      margin-top: 15px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
    }

button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>

<h2>CSS Gradient Generator</h2>

<div>
      <select id="direction">
        <option value="to right">Left to Right</option>
        <option value="to left">Right to Left</option>
        <option value="to bottom">Top to Bottom</option>
        <option value="to top">Bottom to Top</option>
        <option value="to top left">Bottom Right to Top Left</option>
        <option value="to bottom right">Top Left to Bottom Right</option>
      </select>
    </div>

<button onclick="generateGradient()">Generate Gradient</button>

const gradient = `linear-gradient(${direction}, ${color1}, ${color2})`;

const previewBox = document.getElementById("previewBox");
      previewBox.style.background = gradient;

const cssOutput = document.getElementById("cssCode");
      cssOutput.textContent = `background: ${gradient};`;
    }
  </script>

</body>
</html>

Prompt For Contrast Checker Tool: -

"Create a contrast checker tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to input or select two color codes (e.g., HEX, RGB, or HSL) and check if their contrast ratio meets WCAG accessibility standards. Display the contrast ratio, indicate whether it passes or fails the accessibility guidelines, and show a visual representation of the colors. Include options to copy the contrast ratio, clear inputs, and a reset button. The interface should be clean, intuitive, and fully mobile-responsive, consistent with the site's overall aesthetic."

Code For Contrast Checker Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Contrast Checker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0faff;
      padding: 30px;
      text-align: center;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

.checker-box {
      background: #ffffff;
      border-radius: 10px;
      padding: 20px;
      max-width: 400px;
      margin: auto;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

.color-selectors {
      margin-bottom: 15px;
    }

input[type="color"] {
      margin: 10px;
      width: 100px;
      height: 50px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

.preview-box {
      padding: 20px;
      margin-top: 15px;
      border-radius: 10px;
      font-size: 18px;
      font-weight: bold;
    }

.contrast-result {
      margin-top: 15px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>

<h2>Contrast Checker Tool</h2>

<div class="checker-box">
    <div class="color-selectors">
      <label>Text Color</label><br />
      <input type="color" id="textColor" value="#000000" />
    </div>

<div class="color-selectors">
      <label>Background Color</label><br />
      <input type="color" id="bgColor" value="#ffffff" />
    </div>

<button onclick="checkContrast()">Check Contrast</button>

<div class="preview-box" id="previewText">Sample Text</div>
    <div class="contrast-result" id="contrastResult">Contrast Ratio: -</div>
  </div>

function getRGB(hex) {
      hex = hex.replace('#', '');
      if (hex.length === 3) {
        hex = hex.split('').map(c => c + c).join('');
      }
      const bigint = parseInt(hex, 16);
      const r = (bigint >> 16) & 255;
      const g = (bigint >> 8) & 255;
      const b = bigint & 255;
      return [r, g, b];
    }

function contrastRatio(hex1, hex2) {
      const [r1, g1, b1] = getRGB(hex1);
      const [r2, g2, b2] = getRGB(hex2);
      const lum1 = luminance(r1, g1, b1);
      const lum2 = luminance(r2, g2, b2);
      const brightest = Math.max(lum1, lum2);
      const darkest = Math.min(lum1, lum2);
      return ((brightest + 0.05) / (darkest + 0.05)).toFixed(2);
    }

function checkContrast() {
      const textColor = document.getElementById("textColor").value;
      const bgColor = document.getElementById("bgColor").value;

const ratio = contrastRatio(textColor, bgColor);
      const result = document.getElementById("contrastResult");
      const preview = document.getElementById("previewText");

preview.style.color = textColor;
      preview.style.backgroundColor = bgColor;
      result.textContent = `Contrast Ratio: ${ratio} (${ratio >= 4.5 ? "Pass" : "Fail"})`;
    }
  </script>

</body>
</html>

Prompt For Palette Generator Tool: -

"Create a palette generator tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to input a base color (in HEX, RGB, or HSL) and generate a complementary color palette (e.g., analogous, triadic, or monochromatic). Display the generated palette with color swatches and their corresponding color codes. Include options to copy the color codes, adjust the palette size, and save the palette. The interface should be clean, user-friendly, and fully mobile-responsive, matching the site's modern design."

Code For Palette Generator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Palette Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0faff;
      margin: 0;
      padding: 30px;
      text-align: center;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

.palette-box {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin: 20px auto;
      max-width: 600px;
    }

.color-block {
      flex: 1 1 100px;
      height: 100px;
      border-radius: 8px;
      color: #fff;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

.color-block:hover {
      transform: scale(1.05);
    }

button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 15px;
    }

button:hover {
      background-color: #0056b3;
    }

.note {
      margin-top: 15px;
      font-size: 14px;
      color: #555;
    }
  </style>
</head>
<body>

<h2>Palette Generator</h2>

<button onclick="generatePalette()">Generate Palette</button>
  <div class="note">Click a color to copy its HEX value</div>

function generatePalette() {
      const paletteBox = document.getElementById("paletteBox");
      paletteBox.innerHTML = "";

for (let i = 0; i < 5; i++) {
        const color = getRandomColor();
        const block = document.createElement("div");
        block.className = "color-block";
        block.style.backgroundColor = color;
        block.innerText = color;
        block.onclick = () => {
          navigator.clipboard.writeText(color);
          alert("Copied: " + color);
        };
        paletteBox.appendChild(block);
      }
    }

// Generate palette on load
    generatePalette();
  </script>

</body>
</html>

Prompt For Color Blindness Simulator Tool:-

"Create a color blindness simulator using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to upload or input an image and simulate how it would appear to people with different types of color blindness (e.g., Deuteranopia, Protanopia, Tritanopia). Display the original image alongside the simulated versions for easy comparison. Include options to upload images, adjust simulation settings, and reset the tool. The interface should be clean, user-friendly, and fully mobile-responsive, consistent with the site’s overall design."

Code For Color Blindness Simulator Tool:-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Blindness Simulator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      text-align: center;
    }

h2 {
      color: #007bff;
      margin-top: 20px;
      margin-bottom: 20px;
    }

.container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

input[type="file"] {
      margin: 20px 0;
      padding: 10px;
      border-radius: 8px;
      font-size: 16px;
      background-color: #f1f1f1;
      border: 1px solid #ddd;
    }

select {
      padding: 10px;
      font-size: 16px;
      border-radius: 8px;
      margin-top: 10px;
      background-color: #f1f1f1;
      border: 1px solid #ddd;
    }

.image-container {
      margin-top: 20px;
      position: relative;
      text-align: center;
    }

img {
      max-width: 100%;
      border-radius: 8px;
      transition: filter 0.3s ease;
      object-fit: cover;
    }

.note {
      margin-top: 15px;
      font-size: 14px;
      color: #555;
    }

footer {
      margin-top: 30px;
      font-size: 14px;
      color: #888;
    }

footer a {
      text-decoration: none;
      color: #007bff;
    }
  </style>
</head>
<body>

<h2>Color Blindness Simulator</h2>

<select id="colorBlindnessType">
      <option value="normal">Normal Vision</option>
      <option value="deuteranopia">Deuteranopia (Red-Green)</option>
      <option value="protanopia">Protanopia (Red-Green)</option>
      <option value="tritanopia">Tritanopia (Blue-Yellow)</option>
    </select>

<p class="note">Select the type of color blindness simulation on the image.</p>
  </div>

<footer>
    <p>Designed by <a href="https://example.com" target="_blank">YourName</a></p>
  </footer>

// Function to apply the color blindness filter using CSS
    function applyColorBlindnessFilter() {
      const selectedType = colorBlindnessType.value;
      const image = imagePreview;

switch (selectedType) {
        case 'normal':
          image.style.filter = 'none';
          break;
        case 'deuteranopia':
          image.style.filter = 'contrast(100%) saturate(150%) hue-rotate(50deg)';
          break;
        case 'protanopia':
          image.style.filter = 'contrast(100%) saturate(150%) hue-rotate(-50deg)';
          break;
        case 'tritanopia':
          image.style.filter = 'contrast(100%) saturate(150%) hue-rotate(170deg)';
          break;
        default:
          image.style.filter = 'none';
      }
    }

// Preview the uploaded image
    imageInput.addEventListener('change', function (e) {
      const reader = new FileReader();
      reader.onload = function (event) {
        imagePreview.src = event.target.result;
        applyColorBlindnessFilter();  // Apply filter immediately after image is uploaded
      };
      reader.readAsDataURL(e.target.files[0]);
    });

// Update filter on color blindness type change
    colorBlindnessType.addEventListener('change', applyColorBlindnessFilter);
  </script>

</body>
</html>

Prompt For Keyword Density Checker Tool: -

"Create a keyword density checker tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to paste or input text and analyze the keyword density, displaying the frequency of each word and the percentage of its occurrence in the text. Include options to exclude common stop words, set a minimum word count for analysis, and display the results in a clean, readable format. The interface should be clean, user-friendly, and fully mobile-responsive, consistent with the site’s overall aesthetic."

Code For Keyword Density Checker Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Keyword Density Checker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f7fc;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    h2 {
      color: #007bff;
      margin-top: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .input-box {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
      min-height: 100px;
      resize: none;
      overflow-y: auto;
    }
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border-radius: 8px;
      border: none;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
    }
    button:hover {
      background-color: #0056b3;
    }
    .result {
      margin-top: 20px;
      font-size: 18px;
      color: #333;
    }
    .note {
      margin-top: 10px;
      font-size: 14px;
      color: #555;
    }
    footer {
      margin-top: 30px;
      font-size: 14px;
      color: #888;
    }
    footer a {
      text-decoration: none;
      color: #007bff;
    }
  </style>
</head>
<body>

<h2>Keyword Density Checker</h2>

<div class="container">
    <label for="textInput">Enter Text:</label>
    <div id="textInput" class="input-box" contenteditable="true" placeholder="Paste your text here..."></div>

<label for="keywordInput">Enter Keyword:</label>
    <input type="text" id="keywordInput" class="input-box" placeholder="Enter keyword to check density">

<button id="checkButton">Check Density</button>

<div id="resultContainer" class="result" style="display:none;">
      <p><strong>Keyword Density:</strong> <span id="densityResult">0</span>%</p>
      <p><strong>Keyword Count:</strong> <span id="keywordCount">0</span> occurrences</p>
      <p><strong>Total Word Count:</strong> <span id="totalWords">0</span> words</p>
    </div>

<p class="note">This tool calculates the percentage of a given keyword in the text you provide.</p>
  </div>

<footer>
    <p>Designed by <a href="https://example.com" target="_blank">YourName</a></p>
  </footer>

// Function to calculate keyword density
    function calculateKeywordDensity() {
      const text = textInput.textContent.trim();
      const keyword = keywordInput.value.trim().toLowerCase();
      if (!text || !keyword) {
        alert("Please enter both text and a keyword.");
        return;
      }

const words = text.split(/\s+/);
      const totalWordCount = words.length;

let keywordCountValue = 0;
      words.forEach(word => {
        if (word.toLowerCase() === keyword) {
          keywordCountValue++;
        }
      });

const density = (keywordCountValue / totalWordCount) * 100;

// Display the results
      keywordCount.textContent = keywordCountValue;
      totalWords.textContent = totalWordCount;
      densityResult.textContent = density.toFixed(2);

resultContainer.style.display = 'block';
    }

// Event listener to trigger the density calculation
    checkButton.addEventListener('click', calculateKeywordDensity);
  </script>

</body>
</html>

Prompt For Meta Tag Analyzer Tool: -

"Create a meta tag analyzer tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to input a URL and analyze the meta tags (title, description, keywords, etc.) of the webpage. Display the extracted meta tag data, including their content, length, and whether they meet SEO best practices. Include options to view the full HTML source of the page's meta tags, along with suggestions for optimization. The interface should be clean, intuitive, and fully mobile-responsive, consistent with the site’s overall design."

Code For Meta Tag Analyzer Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meta Tag Analyzer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f7fc;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    h2 {
      color: #007bff;
      margin-top: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .input-box {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
    }
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border-radius: 8px;
      border: none;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
    }
    button:hover {
      background-color: #0056b3;
    }
    .result {
      margin-top: 20px;
      font-size: 18px;
      color: #333;
    }
    .result span {
      font-weight: bold;
      color: #007bff;
    }
    .note {
      margin-top: 10px;
      font-size: 14px;
      color: #555;
    }
    footer {
      margin-top: 30px;
      font-size: 14px;
      color: #888;
    }
    footer a {
      text-decoration: none;
      color: #007bff;
    }
  </style>
</head>
<body>

<h2>Meta Tag Analyzer</h2>

<div class="container">
    <label for="urlInput">Enter URL:</label>
    <input type="text" id="urlInput" class="input-box" placeholder="Enter website URL" />

<button id="analyzeButton">Analyze Meta Tags</button>

<div id="resultContainer" class="result" style="display:none;">
      <p><span>Title:</span> <span id="metaTitle">N/A</span></p>
      <p><span>Description:</span> <span id="metaDescription">N/A</span></p>
      <p><span>Keywords:</span> <span id="metaKeywords">N/A</span></p>
      <p><span>Author:</span> <span id="metaAuthor">N/A</span></p>
      <p><span>Charset:</span> <span id="metaCharset">N/A</span></p>
    </div>

<p class="note">This tool analyzes the meta tags of the provided URL and extracts key metadata.</p>
  </div>

<footer>
    <p>Designed by <a href="https://example.com" target="_blank">YourName</a></p>
  </footer>

// Function to fetch meta tags from the provided URL
    async function fetchMetaTags(url) {
      try {
        // Fetch the webpage HTML
        const response = await fetch(`https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`);
        const html = await response.text();

// Create a temporary DOM element to parse the HTML content
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');

// Extract meta tag content
        const title = doc.querySelector('title') ? doc.querySelector('title').innerText : 'N/A';
        const description = doc.querySelector('meta[name="description"]') ? doc.querySelector('meta[name="description"]').getAttribute('content') : 'N/A';
        const keywords = doc.querySelector('meta[name="keywords"]') ? doc.querySelector('meta[name="keywords"]').getAttribute('content') : 'N/A';
        const author = doc.querySelector('meta[name="author"]') ? doc.querySelector('meta[name="author"]').getAttribute('content') : 'N/A';
        const charset = doc.querySelector('meta[charset]') ? doc.querySelector('meta[charset]').getAttribute('charset') : 'N/A';

// Update the UI with the extracted values
        metaTitle.textContent = title;
        metaDescription.textContent = description;
        metaKeywords.textContent = keywords;
        metaAuthor.textContent = author;
        metaCharset.textContent = charset;

// Show the result container
        resultContainer.style.display = 'block';
      } catch (error) {
        alert("Error: Unable to fetch meta tags. Please check the URL.");
      }
    }

// Event listener to trigger the analysis
    analyzeButton.addEventListener('click', () => {
      const url = urlInput.value.trim();
      if (url) {
        fetchMetaTags(url);
      } else {
        alert('Please enter a valid URL.');
      }
    });
  </script>

</body>
</html>

Prompt For Word Counter Tool: -

"Create a word counter tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to paste or type text and instantly see the total word count, character count (with and without spaces), sentence count, and paragraph count. Display these statistics in a clear, readable format. Include a 'Clear' button to reset the input and a 'Copy Results' option. The interface should be clean, user-friendly, and fully mobile-responsive, consistent with the site’s overall aesthetic."

Code For Word Counter Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Word Counter Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #eef8ff;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

.container {
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
      max-width: 500px;
      width: 90%;
      text-align: center;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

.inputBox {
      width: 100%;
      height: 150px;
      padding: 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
      resize: none;
    }

.results {
      margin-top: 20px;
      font-size: 18px;
      color: #333;
    }

.results span {
      display: inline-block;
      margin: 0 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Word Counter Tool</h2>
    <div contenteditable="true" class="inputBox" id="textBox" placeholder="Type or paste your text here..."></div>

<div class="results">
      <span>Words: <span id="wordCount">0</span></span>
      <span>Characters: <span id="charCount">0</span></span>
    </div>
  </div>

function updateCounts() {
      const text = textBox.innerText.trim();
      const words = text.length > 0 ? text.split(/\s+/).length : 0;
      const chars = text.replace(/\s/g, "").length;

wordCount.textContent = words;
      charCount.textContent = chars;
    }

textBox.addEventListener("input", updateCounts);
  </script>
</body>
</html>

Prompt For QR Code Generator Tool: -

"Create a QR code generator tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to input text or a URL and instantly generate a QR code. Display the generated QR code with the option to download it in various sizes. Include options to adjust the size and error correction level of the QR code. The interface should be clean, user-friendly, and fully mobile-responsive, in line with the site’s modern design."

Code For QR Code Generator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>QR Code Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #eef8ff;
      margin: 0;
      padding: 20px;
      text-align: center;
    }

.container {
      max-width: 400px;
      margin: auto;
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    }

h2 {
      color: #007bff;
    }

input[type="text"] {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

button {
      margin-top: 15px;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
    }

button:hover {
      background-color: #0056b3;
    }

#qrcode {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }

#downloadBtn {
      display: none;
      margin-top: 15px;
      background-color: #28a745;
    }

#downloadBtn:hover {
      background-color: #1e7e34;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>QR Code Generator</h2>
    <input type="text" id="qrText" placeholder="Enter text or URL" />
    <button onclick="generateQR()">Generate QR</button>
    <div id="qrcode"></div>
    <button id="downloadBtn" onclick="downloadQR()">Download QR</button>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script>
    let qr;

function generateQR() {
      const text = document.getElementById("qrText").value.trim();
      const qrContainer = document.getElementById("qrcode");
      const downloadBtn = document.getElementById("downloadBtn");
      qrContainer.innerHTML = "";
      downloadBtn.style.display = "none";

if (text === "") {
        alert("Please enter some text.");
        return;
      }

qr = new QRCode(qrContainer, {
        text: text,
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });

setTimeout(() => {
        downloadBtn.style.display = "inline-block";
      }, 500); // wait to ensure canvas is rendered
    }

function downloadQR() {
      const img = document.querySelector("#qrcode img") || document.querySelector("#qrcode canvas");
      if (!img) return;

const link = document.createElement("a");
      link.href = img.src || img.toDataURL("image/png");
      link.download = "qr-code.png";
      link.click();
    }
  </script>
</body>
</html>

Prompt For Barcode Generator Tool: -

"Create a barcode generator tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to input text or numbers and generate a barcode (e.g., Code 128, EAN-13, UPC) instantly. Display the generated barcode with the option to download it in various sizes and formats. Include options to customize the barcode type, size, and color. The interface should be clean, user-friendly, and fully mobile-responsive, consistent with the site’s modern design."

Code For Barcode Generator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Barcode Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #eef8ff;
      margin: 0;
      padding: 20px;
      text-align: center;
    }

.container {
      max-width: 400px;
      margin: auto;
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    }

h2 {
      color: #007bff;
    }

input[type="text"] {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

button:hover {
      background-color: #0056b3;
    }

#barcode {
      margin-top: 20px;
    }

#downloadBtn {
      display: none;
      margin-top: 15px;
      background-color: #28a745;
    }

#downloadBtn:hover {
      background-color: #1e7e34;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Barcode Generator</h2>
    <input type="text" id="barcodeText" placeholder="Enter text or number" />
    <button onclick="generateBarcode()">Generate Barcode</button>
    <div id="barcode">
      <svg id="barcodeSvg"></svg>
    </div>
    <button id="downloadBtn" onclick="downloadBarcode()">Download Barcode</button>
  </div>

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
  <script>
    function generateBarcode() {
      const text = document.getElementById("barcodeText").value.trim();
      const downloadBtn = document.getElementById("downloadBtn");

if (text === "") {
        alert("Please enter some text.");
        return;
      }

JsBarcode("#barcodeSvg", text, {
        format: "CODE128",
        lineColor: "#000",
        width: 2,
        height: 100,
        displayValue: true
      });

downloadBtn.style.display = "inline-block";
    }

function downloadBarcode() {
      const svg = document.getElementById("barcodeSvg");
      const serializer = new XMLSerializer();
      const source = serializer.serializeToString(svg);
      const blob = new Blob([source], { type: "image/svg+xml;charset=utf-8" });
      const url = URL.createObjectURL(blob);

const link = document.createElement("a");
      link.href = url;
      link.download = "barcode.svg";
      link.click();
    }
  </script>
</body>
</html>

Prompt For UUID Generator Tool: -

"Create a UUID generator tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to generate a unique Universal Unique Identifier (UUID) with a single click. Display the generated UUID, along with options to copy it to the clipboard. Include a 'Generate' button, a 'Clear' option, and ensure the design is clean, user-friendly, and fully mobile-responsive, consistent with the site’s overall aesthetic."

Code For UUID Generator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>UUID Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #eef8ff;
      margin: 0;
      padding: 20px;
      text-align: center;
    }

.container {
      max-width: 400px;
      margin: auto;
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    }

h2 {
      color: #007bff;
    }

.uuid-box {
      word-break: break-all;
      background: #f1f1f1;
      padding: 12px;
      border-radius: 8px;
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

button:hover {
      background-color: #0056b3;
    }

#copyBtn {
      background-color: #28a745;
      margin-left: 10px;
    }

#copyBtn:hover {
      background-color: #1e7e34;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>UUID Generator</h2>
    <button onclick="generateUUID()">Generate UUID</button>
    <button id="copyBtn" onclick="copyUUID()">Copy</button>
    <div class="uuid-box" id="uuidOutput">Click "Generate UUID"</div>
  </div>

function copyUUID() {
      const uuidText = document.getElementById('uuidOutput').textContent;
      const tempInput = document.createElement('input');
      tempInput.value = uuidText;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand('copy');
      document.body.removeChild(tempInput);
      alert("UUID copied to clipboard!");
    }
  </script>
</body>
</html>

Prompt For Unit Converter Tool: -

"Create a unit converter tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to select from a variety of units (e.g., length, weight, temperature, volume, area, etc.), input a value, and instantly convert it to other units. Display the converted results in real time with an easy-to-understand layout. Include options to switch between metric and imperial units, and a clear/reset button. The interface should be clean, user-friendly, and fully mobile-responsive, matching the site’s modern design."

Code For Unit Converter Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Unit Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #eef8ff;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

.container {
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
      max-width: 400px;
      width: 90%;
      text-align: center;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

input, select {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
    }

button:hover {
      background-color: #0056b3;
    }

.result {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Length Unit Converter</h2>
    <input type="number" id="inputValue" placeholder="Enter value" />

<select id="fromUnit">
      <option value="meters">Meters</option>
      <option value="kilometers">Kilometers</option>
      <option value="feet">Feet</option>
      <option value="inches">Inches</option>
      <option value="miles">Miles</option>
    </select>

<select id="toUnit">
      <option value="meters">Meters</option>
      <option value="kilometers">Kilometers</option>
      <option value="feet">Feet</option>
      <option value="inches">Inches</option>
      <option value="miles">Miles</option>
    </select>

<button onclick="convertUnits()">Convert</button>
    <div class="result" id="resultBox"></div>
  </div>

if (isNaN(value)) {
        resultBox.textContent = "Please enter a valid number.";
        return;
      }

const unitsInMeters = {
        meters: 1,
        kilometers: 1000,
        feet: 0.3048,
        inches: 0.0254,
        miles: 1609.34
      };

const meters = value * unitsInMeters[from];
      const converted = meters / unitsInMeters[to];

resultBox.textContent = `${value} ${from} = ${converted.toFixed(4)} ${to}`;
    }
  </script>
</body>
</html>

Prompt For Time Zone Converter Tool: -

"Create a time zone converter tool using HTML, CSS, and JavaScript for my multi-tool website, which follows a bright blue and white theme. The tool should allow users to select two different time zones and input a time in one zone. The tool should instantly display the equivalent time in the second time zone. Include options for popular time zones, a 'Convert' button, and clear/reset functionality. The interface should be clean, user-friendly, and fully mobile-responsive, matching the site’s overall aesthetic."

Code For Time Zone Converter Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Time Zone Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #eef8ff;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

input, select {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
    }

button:hover {
      background-color: #0056b3;
    }

.result {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Time Zone Converter</h2>

<label>Select Date & Time</label>
    <input type="datetime-local" id="dateInput" />

<button onclick="convertTime()">Convert</button>

const fromZone = document.getElementById("fromZone");
    const toZone = document.getElementById("toZone");

timeZones.forEach(zone => {
      const opt1 = document.createElement("option");
      const opt2 = document.createElement("option");
      opt1.value = opt2.value = zone;
      opt1.textContent = opt2.textContent = zone;
      fromZone.appendChild(opt1);
      toZone.appendChild(opt2);
    });

// Set default to browser time zone
    fromZone.value = Intl.DateTimeFormat().resolvedOptions().timeZone;
    toZone.value = "UTC";

function convertTime() {
      const dateInput = document.getElementById("dateInput").value;
      const from = fromZone.value;
      const to = toZone.value;
      const resultBox = document.getElementById("outputResult");

if (!dateInput) {
        resultBox.textContent = "Please select a date and time.";
        return;
      }

const date = new Date(dateInput);
      const utcDate = new Date(date.toLocaleString("en-US", { timeZone: from }));
      const targetTime = new Date(utcDate.toLocaleString("en-US", { timeZone: to }));

resultBox.textContent = `Converted Time: ${targetTime.toLocaleString()} (${to})`;
    }
  </script>
</body>
</html>

Prompt For Random Password Generator Tool: -

"Create a random password generator tool using HTML, CSS, and JavaScript for my multi-tool website, which features a bright blue and white theme. The tool should allow users to specify the desired password length and select optional criteria such as including uppercase letters, lowercase letters, numbers, and special characters. The tool should instantly generate a strong, random password and display it, with the option to copy the password to the clipboard. Include a 'Generate' button, a 'Clear' button, and ensure the design is clean, user-friendly, and fully mobile-responsive, consistent with the site’s overall aesthetic."

Code For Random Password Generator Tool: -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Password Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #eef8ff;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

h2 {
      color: #007bff;
      margin-bottom: 20px;
    }

input[type="number"] {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }

.options {
      margin-top: 15px;
      text-align: left;
    }

.options label {
      display: block;
      margin-bottom: 5px;
    }

.outputBox {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      background: #f4f4f4;
      padding: 10px;
      border-radius: 8px;
      word-break: break-all;
    }

button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Random Password Generator</h2>

<label for="length">Password Length</label>
    <input type="number" id="length" min="4" max="50" value="12" />

<div class="options">
      <label><input type="checkbox" id="includeUpper" checked /> Include Uppercase</label>
      <label><input type="checkbox" id="includeLower" checked /> Include Lowercase</label>
      <label><input type="checkbox" id="includeNumbers" checked /> Include Numbers</label>
      <label><input type="checkbox" id="includeSymbols" checked /> Include Symbols</label>
    </div>

<button onclick="generatePassword()">Generate Password</button>

const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      const lower = "abcdefghijklmnopqrstuvwxyz";
      const numbers = "0123456789";
      const symbols = "!@#$%^&*()_+[]{}|;:,.<>?";

let allChars = "";
      if (useUpper) allChars += upper;
      if (useLower) allChars += lower;
      if (useNumbers) allChars += numbers;
      if (useSymbols) allChars += symbols;

if (allChars.length === 0) {
        resultBox.textContent = "Please select at least one option!";
        return;
      }

let password = "";
      for (let i = 0; i < length; i++) {
        password += allChars.charAt(Math.floor(Math.random() * allChars.length));
      }

resultBox.textContent = password;
    }
  </script>
</body>
</html>

Make Your Website Live

अब हमारा Website बनकर तैयार है और अब हम इसे लाइव करेंगे ताकि कोई भी वेक्ति हमारी वेबसाइट का इस्तमाल कर सके. इसे लाइव करने के लिए निचे दिए Steps को Follow करे:-

Step 1- सबसे पहले अपने Github Repository को Open करे.

Step 2- उसके बाद ऊपर Settings वाले option पर क्लिक करे.

Step 3- अब Left Hand Side में Pages वाले ऑप्शन करे.

Step 4- इसके बाद Branch पर क्लिक करके Main को सेलेक्ट करे.

Step 5- अब इसे Save कर दे. अब आपको यहाँ 2-3 मिनट तक Wait करना होगा। अब Github को Refresh करे. तो यहाँ आपको एक Link मिलेगा जिसपर Click करते हीआपकी वेबसाइट खुल जाएगी।

Privacy Policy

Term & Conditions

Favicon Code-

Last Words: -

तो कुछ इस तरह से आप भी अपनी खुद की एक Multi Tool Website बड़ी आसानी से बना सकते है. उम्मीद करता हु की ये आर्टिकल आपके लिए जानकारीभरा रहा होगा और आपको पसंद भी आया होगा। अगर इस पूरी प्रक्रिया में कोई परेशानी हो तो आप निचे Comment करके पूछ सकते है. इस आर्टिकल को अंत तक पढ़ने के लिए आपका धन्यवाद।

Let's Make $10,000 Per Month from a Multi Tool Website Using AI | Full Course

Name Selection & Checking

Create Gmail Account

Create GithHub Account

Code Generation

Prompt For Multi Tool Website Main Page

Complete Code To Create Multi Tool Website Home Page

Code For Palette Generator Tool: -

एक टिप्पणी भेजें

Contact form