AI Se Multi Tool Website Kaise Banaye

Grok 3 ये वह नाम है जो अभी पुरे इंटरनेट पर गूंज रहा है. कुछ समाये पहले तक Chat Gpt ने अपना दबदबा पुरे इंटरनेट पर बना रखा था. लेकिन कुछ समय पहले ही चीन की एक कंपनी DeepSeek ने अपना एक Chat Bot DeepSeek R1 को मार्किट में उतारा उसके बाद इसने कई सारे मामलो में गूगल के Gemini और OpenAI के Chat Gpt 4.0 मॉडल को पीछे छोर दिया था. लेकिन अब Elon Musk की कंपनी X.ai ने अपना chat bot Grok 3 को लॉन्च किया है. इसके बाद इसने कई सारे आस्पेक्ट्स में chat gpt, gemini और तो और Deepseek को पीछे चोर दिया है. लेकिन आज हम इनमे से किसी भी मॉडल के ऊपर बात करने के इरादे से नहीं आए है. बल्कि आज हम आपको इसी grok 3 का इस्तमाल करके एक Multi tool website बनाकर ऑनलाइन पैसे कैसे कमाना है इसके ऊपर बात करने वाले है. तो चलिए ज्यादा समय ना लेते हुए हम इस आर्टिकल में आगे बढ़ते है। इसके लिए सबसे पहले आपको समझना होगा की-

Multi Tool Website क्या है.

ये एक ऐसा वेबसाइट होता है. जहा पर आपको कई अलग अलग तरह के टूल्स मिलते है. जिन्हे आप अपने छोटे- बड़े कामो के लिए इस्तेमाल कर सकते है. मान लीजिये आपके पास एक image है जो की png formate है और आपको अपने किसी काम के लिए image jpg formate में चाहिए तो आप गूगल पर सर्च करेंगे "png to jpg image converter" तब आपके सामने कई सारि वेबसाइट आ जाएँगी जहा से आप अपने इमेज के Formate को बदल सकते हैं. इन्हे हम tool website कहते है. और ऐसी वेबसाइट जिनके अंदर बहुत से Tool होते जैसे- Image Converter Tool, Video Converter Tool, Age Calculator Tool, EMI Calculator, Image Compressor, Audio Cutting Tool...etc. ऐसे websites को हम multi tool website बोलते है.

Multi Tool Website से पैसे कैसे कमाए।

अगर आप ऐसी वेबसाइट बनाकर पब्लिश कर देते है. तो आपके वेबसाइट को कोई भी इंसान अपने काम के लिए इस्तमाल कर सकता है. और आप उनपर एड्स लगा सकते है. फिर आपको कुछ खास करने की जरुरत नहीं है. लोग आपकी वेबसाइट का इस्तमाल करेंगे और आप उनसे अच्छा पैसा कमा सकते है.

AI से Free में Multi Tool Website कैसे बनाये।

इसके लिए आपको किसी भी Generative AI Chat Bot- जैसे की chat gpt, gemini, perplexicity, claude, deepseek , grok...etc का इस्तेमाल कर सकते है. मैं यहाँ grok 3 का इस्तमाल करने वाला हु.

AI से Multi Tool Website बनाने के लिए निचे दिए Steps को Follow करे:-

1- किसी भी AI Chat Bot को open करके Sign Up करे.

2- सबसे पहले हम अपने वेबसाइट का Main Page बनाएंगे इसके लिए आपको AI को एक Prompt देना होगा जो की निचे दिया गया है.

Prompt For Multi Tool Website

"Create a fully responsive multi-tool website landing page called 'Multi Tool Hub' using HTML, CSS, and JavaScript. The page should have the following features:

Design Theme:

Background Color: Dark navy #1E1E2F
Text Color: Light gray #EAEAEA
Header Background: Deep blue #2B2D42
Accent Color: Gold #FFD700
Tool Card Background: Dark grayish-blue #3A3D5B
Hover Effects:
Tool card background changes to #FFD700, with text turning dark navy #1E1E2F.
Button background changes from #FFD700 to a deeper gold #E6C200 on hover.
Box Shadow: Soft gold shadow (rgba(255, 215, 0, 0.2)) for a premium look.
Page Layout:

A centered header with the title "Multi Tool Hub".
A grid-based layout (grid-template-columns: repeat(2, 1fr)) with 8 tool cards.
On mobile screens, the grid should switch to a single-column layout.
Tools Included:

Image Converter
Image Compressor
Image Crop
Video Converter
Age Calculator
EMI Calculator
SIP Calculator
Audio Trim
Tool Cards:

Each tool card contains:
A title (h2)
A short description (p)
A clickable button (button) that alerts "Redirecting to [tool name]" (placeholder for real navigation).
Button Styling:

Buttons are rounded (border-radius: 5px), bold, and change color on hover.
Buttons should be easy to click on both desktop and mobile.
Responsive Design:

Desktop: Two-column grid layout.
Mobile: Single-column layout for better readability.
Code Structure:

Use HTML for structure.
Use CSS for styling and responsiveness.
Use JavaScript for simple interactions (button click alerts).
Make sure the website looks modern, minimalistic, and premium, maintaining good spacing and alignment. Ensure it works well on all screen sizes. Provide the full HTML, CSS, and JavaScript code to achieve this."

इस Prompt को AI में Paste करने के बाद वो आपको एक पूरा Code बनाकर देगा। वो कोड मैं यहाँ पर दे रहा हु. आप चाहे तो Directly इस कोड का भी इस्तमाल कर सकते है.

Code For Multi Tool Website

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi Tool Hub</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            background: #1E1E2F;
            color: #EAEAEA;
            text-align: center;
        }

.header {
            background: #2B2D42;
            padding: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #FFD700;
        }

.container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            max-width: 900px;
            margin: 40px auto;
        }

.tool-card {
            background: #3A3D5B;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            transition: 0.3s;
            box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2);
        }

.tool-card:hover {
            background: #FFD700;
            color: #1E1E2F;
        }

.tool-card h2 {
            margin-bottom: 10px;
        }

.btn {
            display: inline-block;
            margin-top: 10px;
            padding: 10px 20px;
            background: #FFD700;
            color: #1E1E2F;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

.btn:hover {
            background: #E6C200;
        }

@media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="header">Multi Tool Hub</div>
    
    <div class="container">
        <div class="tool-card">
            <h2>Image Converter</h2>
            <p>Convert images to different formats easily.</p>
            <button class="btn" onclick="goToSection('image-converter')">Go to Tool</button>
        </div>

<div class="tool-card">
            <h2>Image Compressor</h2>
            <p>Compress images without losing quality.</p>
            <button class="btn" onclick="goToSection('image-compressor')">Go to Tool</button>
        </div>

<div class="tool-card">
            <h2>Image Crop</h2>
            <p>Crop images to the desired size and dimensions.</p>
            <button class="btn" onclick="goToSection('image-crop')">Go to Tool</button>
        </div>

<div class="tool-card">
            <h2>Video Converter</h2>
            <p>Convert videos to different formats quickly.</p>
            <button class="btn" onclick="goToSection('video-converter')">Go to Tool</button>
        </div>

<div class="tool-card">
            <h2>Age Calculator</h2>
            <p>Find your exact age in years, months, and days.</p>
            <button class="btn" onclick="goToSection('age-calculator')">Go to Tool</button>
        </div>

<div class="tool-card">
            <h2>EMI Calculator</h2>
            <p>Calculate your loan EMIs quickly.</p>
            <button class="btn" onclick="goToSection('emi-calculator')">Go to Tool</button>
        </div>

<div class="tool-card">
            <h2>SIP Calculator</h2>
            <p>Calculate your SIP returns effortlessly.</p>
            <button class="btn" onclick="goToSection('sip-calculator')">Go to Tool</button>
        </div>

<div class="tool-card">
            <h2>Audio Trim</h2>
            <p>Trim audio files to your required length.</p>
            <button class="btn" onclick="goToSection('audio-trim')">Go to Tool</button>
        </div>
    </div>

अब हमने Main Page के लिए code बना लिया है. अब हमें इस कोड का उपयोग करते हुए वेबसाइट बनाना होगा। तो इसके लिए हम blogger.com का इस्तमाल करेंगे जहा आप free में अपनी खुद की वेबसाइट बना सकते है। ब्लॉगर पर वेबसाइट बनाने के लिए निचे दिए गए स्टेप्स को अच्छी तरह से फॉलो करे।

1. सबसे पहले blogger.com जाकर अपने Google Account से Sign Up करे.

2. अब आपको अपने blog यानि website का एक नाम रखना होगा। आप कुछ भी नाम रख सकते है जैसे की- (My Tool Hub , Free Tool Wale, Rishi Tools... etc)

3. इसके बाद आपको अपना Website Address या Domain Name बनाना होगा। आप यहाँ ऊपर मेरे वेबसाइट का नाम डोमेन देख सकते है जो की है (gyanreach.com) यही सर्च करके कोई यूजर मेरे वेबसाइट तक पहुंच सकता है। इसके ऊपर विसेस जानकारी आपको यहाँ मिलेगी।

Read More- https://www.gyanreach.com/2022/09/domain%20aur%20hosting%20kya%20hota%20hai.html

अब आपका ब्लॉग बनकर तैयार है। आप लेफ्ट साइड में view blog पर क्लिक करके अपना ब्लॉग देख सकते है। अभी हमारा ब्लॉग बिलकुल भी एक टूल वेबसाइट की तरह नहीं लग रहा होगा. क्योकि अब तक हमने इसके theme को change नहीं किया है। तो चलिए करते है-

1. इसके लिए लेफ्ट साइड में theme पर क्लिक करे।

2. अब ड्राप मेनू से "switch to first generation classic theme" पर क्लिक करे।

3. अब edit html पर क्लिक करे।

4. यहाँ आपको कुछ कोड नज़र आ रहा होगा। आपको इस कोड को पूरा डिलीट करके ऊपर मैंने जो कोड दिया है या आपने prompt का इस्तमाल करके जो कोड गेनेराते किया उसे paste है।

5. इसके बाद save पर क्लिक। अब जब आप view blog पर क्लिक करके अपना ब्लॉग देखेंगे तो आपका वेबसाइट बिलकुल एक टूल वेबसाइट की तरह लगने लगेगा। यहाँ आपको बहुत से सेक्शंस देखेंगे जैसे की- (image converter tool, video converter tool..etc) लेकिन अभी कोई भी काम नहीं कर रहा होगा।

इसके लिए हमें हर टूल का ब्लॉग बनाकर उसे main वेबसाइट से कनेक्ट करना पड़ेगा इसके लिए अब हम अपने हर के टूल के लिए अलग अलग पेज बनाना होगा। तो शुरुआत करते है Image Converter Tool से. इसके लिए आपको निचे दिए गए prompt का इस्तमाल करना होगा।

Prompt For Image Converter Tool

Objective:
Create an Image Converter Tool for my Multi Tool Hub website. The tool should allow users to upload an image, choose an output format, and download the converted image while also displaying a preview of the output.

Functional Requirements:
Image Upload:

Users should be able to upload an image using a file input field.
Supported input formats: PNG, JPG, JPEG, BMP, GIF, TIFF, and WEBP.
Format Selection:

Provide a dropdown or button-based selection for output formats such as PNG, JPG, JPEG, PDF, BMP, GIF, WEBP, and TIFF.
Processing Status:

Once a user selects a format and clicks the "Convert" button, a loading indicator or "Processing image..." message should appear.
Output Preview & Download:

After the conversion is complete, display a preview of the converted image.
Provide a download button to save the converted image.
User-Friendly Interface:

Use a clean and modern UI with a dark theme to match the Multi Tool Hub website.
Ensure proper error handling (e.g., unsupported file types, file too large).
Technical Requirements:
Use HTML, CSS, and JavaScript for the frontend.
Implement JavaScript (or a suitable library like Canvas API) for image conversion.
Ensure the tool is fully responsive and works well on both desktop and mobile devices.
Expected Deliverables:
Complete HTML, CSS, and JavaScript code.
Fully functional image upload, conversion, and download features.
A visually appealing and easy-to-use user interface.

इस Prompt को AI में डालने के बाद आपको कुछ इस तरह का कोड मिलेगा। आप चाहे तो डायरेक्टली इस कोड का भी इस्तमाल कर सकते है.

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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            background: #1E1E2F;
            color: #EAEAEA;
            text-align: center;
            padding: 20px;
        }

.container {
            max-width: 600px;
            margin: auto;
            background: #2B2D42;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2);
        }

input, select, button {
            margin: 10px 0;
            padding: 10px;
            width: 100%;
            border-radius: 5px;
            border: none;
        }

button {
            background: #FFD700;
            color: #1E1E2F;
            cursor: pointer;
            font-weight: bold;
        }

button:hover {
            background: #E6C200;
        }

.preview {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Image Converter</h2>
        <input type="file" id="imageInput" accept="image/*">
        <select id="formatSelect">
            <option value="png">PNG</option>
            <option value="jpg">JPG</option>
            <option value="webp">WEBP</option>
        </select>
        <button onclick="convertImage()">Convert Image</button>
        <p id="status"></p>
        <div class="preview" id="previewContainer"></div>
    </div>

if (!fileInput.files.length) {
                alert('Please upload an image first.');
                return;
            }

status.textContent = 'Processing image...';
            const file = fileInput.files[0];
            const reader = new FileReader();

reader.onload = function (event) {
                const img = new Image();
                img.src = event.target.result;
                img.onload = function () {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    
                    const convertedImage = canvas.toDataURL(`image/${format}`);
                    previewContainer.innerHTML = `<img src="${convertedImage}" style="max-width: 100%; border-radius: 5px; margin-top: 10px;">`;
                    const downloadBtn = document.createElement('a');
                    downloadBtn.href = convertedImage;
                    downloadBtn.download = `converted_image.${format}`;
                    downloadBtn.textContent = 'Download Image';
                    downloadBtn.style.display = 'block';
                    downloadBtn.style.background = '#FFD700';
                    downloadBtn.style.color = '#1E1E2F';
                    downloadBtn.style.padding = '10px';
                    downloadBtn.style.marginTop = '10px';
                    downloadBtn.style.textDecoration = 'none';
                    downloadBtn.style.borderRadius = '5px';
                    previewContainer.appendChild(downloadBtn);
                    status.textContent = '';
                };
            };
            reader.readAsDataURL(file);
        }
    </script>
</body>
</html>

1. अब आपको Blogger पर जाना होगा।

2. यहाँ Left Section में आपको अपने ब्लॉग का नाम दिखाई दे रहा होगा। वहा साइड में एक बटन मिलेगा जिससे Drop Down Menu ओपन हो जायेगा।

3. वहा आपको New Blog पर क्लिक करना है.

4. इसके बाद आपने ब्लॉग का नाम रखे जैसे की मेरा Main Website का नाम है Free Tools Hub और उसमे एक टूल है Image Converter तो हम इसका नाम कुछ इस प्रकार बनाएंगे- Free Tool Hub Image Converter. इसके बाद आपको यूजरनाम चुनना होगा जैसे- (freetoolhubimageconverter.blogspot.com)

Note - अगर सिर्फ नाम available ना हो तो उसके लास्ट में कोई नंबर लगा दे जैसे की- (freetoolhub95.blogspot.com), (freetoolhubimageconverter7.blogspot.com).....इत्यादि।

5. इसके बाद आपका ब्लॉग बनकर तैयार हो जायेगा। अब आपको लेफ्ट साइड में Theme के विकल्प पर क्लिक करके Edit Theme के Drop Down बटन पर क्लिक करके Switch To First Generation Theme Layout पर क्लिक करना होगा। इसके बाद Edit Html पर क्लिक करे.

6. आपको सबसे पहले पुरे कोड को delete कर देना है. उसके बाद Image Converter बनाने के लिए मैंने जो कोड ऊपर दिया है या जिसे आपने AI से generate किया है, उसे paste कर देना है. इसके बाद आपके वेबसाइट का इंटरफ़ेस पूरी तरह बदल जायेगा।

अब हमें आपने image converter tool वाले blog को अपने main blog से connect करना होगा ताकि जब आप image converter tool पर क्लिक करे तो image converter टूल का पेज खुल जाये। इसके लिए आगे की प्रक्रिया थोड़ा सा टेक्निकल हो सकता है इसीलिए इसे थोड़ा ध्यान से समझे।

अब आपको अपने main blog पर theme में जाकर edit html पर क्लिक करना होगा। उसके बाद कोड में कही भी क्लिक करके Ctrl +F को प्रेस करे इससे सर्च बॉक्स खुल जायेगा। वह आपको Image Converter या आपके टूल का जो भी नाम है उसे सर्च करना पड़ेगा। वहा आपको कुछ ऐसा कोड मिलेगा।

-----------------------------------------------------------------------------------------------<h2>Image Converter</h2> <p>Convert images to different formats easily.</p> <button class="btn" onclick="goToSection('image-converter')">Go to Tool</button>

इस कोड को आपको इस तरह से बदल देना है।

<h2>Image Converter</h2> <p>Convert images to different formats easily.</p> <button class="btn" onclick="window.location.href='https://yourwebsite.com/image-converter'">Go to Tool</button>

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

यहाँ आपको onclick के बगल में "gotosection" की जगह "window.location.href='image converter blog url'" डाल कर सेव कर देना है।अब जब आप main वेबसाइट पर जाकर टूल बटन पर क्लिक करेंगे तो वो वर्क करने लगेगा।

आपको same इसी तरह से सभी टूल के लिए prompt की सहायता से कोड को generate करना है और same प्रोसेस से लिंक्स को replace करके आप पूरी वेबसाइट बना पाएंगे। इसके लिए में सभी prompts दे रहा हु जिनसे आप कोड generate कर सकते है। अगर आप कोड generate नहीं करना चाहते है तो मैं आपको कोड generate करके भी निचे दे रहा ही आप डायरेक्टली कोड का भी इस्तमाल कर सकते है।

Image Compressor Tool Prompt

Develop an Image Compressor Tool for my Multi Tool Hub website. The tool should allow users to upload an image, select the desired quality, and compress the image while displaying a preview and providing a download option.

Functional Requirements:
1. Image Upload:
Users should be able to upload an image using a file input field.
Supported input formats: PNG, JPG, JPEG, BMP, GIF, TIFF, and WEBP.
2. Quality Selection:
Provide a slider or dropdown menu for users to select the compression quality (e.g., High, Medium, Low).
The lower the quality, the more compressed the image will be.
3. Compression Process:
Once the user selects the quality and clicks "Compress", a processing indicator or "Compressing image..." message should appear.
4. Output Preview & Download:
After compression, the tool should display a preview of the compressed image.
A "Download" button should be available to save the compressed image.
5. User-Friendly Interface:
Use a modern and premium UI with a dark theme to match the Multi Tool Hub website.
Ensure proper error handling (e.g., unsupported file types, file too large).
The tool should be responsive and work well on both desktop and mobile devices.
Technical Requirements:
Use HTML, CSS, and JavaScript for the frontend.
Implement JavaScript (or a suitable library like Canvas API or Compressor.js) for image compression.
Ensure that the tool works efficiently without requiring a backend server for compression.
Expected Deliverables:
✔ Complete HTML, CSS, and JavaScript code for the Image Compressor Tool.
✔ Fully functional image upload, compression, preview, and download features.
✔ Visually appealing and easy-to-use user interface.

Image Compressor Tool Code

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            background: #1E1E2F;
            color: #EAEAEA;
            text-align: center;
            padding: 20px;
        }

input, select, button {
            margin: 10px 0;
            padding: 10px;
            width: 100%;
            border: none;
            border-radius: 5px;
            font-size: 16px;
        }

button {
            background: #FFD700;
            color: #1E1E2F;
            cursor: pointer;
        }

button:hover {
            background: #E6C200;
        }

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

.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Image Compressor</h2>
        <input type="file" id="imageInput" accept="image/*">
        <label for="quality">Select Quality:</label>
        <select id="quality">
            <option value="0.8">High</option>
            <option value="0.5">Medium</option>
            <option value="0.2">Low</option>
        </select>
        <button onclick="compressImage()">Compress</button>
        <p id="status" class="hidden">Compressing image...</p>
        <img id="preview" class="hidden">
        <a id="download" class="hidden" download="compressed-image.jpg">
            <button>Download</button>
        </a>
    </div>

if (fileInput.files.length === 0) {
                alert('Please upload an image first.');
                return;
            }

Image Crop Tool Prompt

Develop an Image Crop Tool for My Multi Tool Hub Website
The Image Crop Tool will allow users to upload an image, select a predefined aspect ratio, crop the image, and download the final result with a preview.

Functional Requirements:
1. Image Upload:
Users should be able to upload an image using a file input field.
Supported input formats: PNG, JPG, JPEG, BMP, GIF, TIFF, and WEBP.
2. Aspect Ratio Selection:
Provide options for users to select predefined aspect ratios, such as:
4:3
16:9
16:10
3:2
1:1 (Square)
Users should also have an option for freeform cropping (custom aspect ratio).
3. Cropping Process:
Once the user selects the aspect ratio and clicks "Crop," a processing indicator should appear.
The tool should crop the image based on the selected aspect ratio.
4. Output Preview & Download:
After cropping, the tool should display a preview of the cropped image.
A "Download" button should be available to save the cropped image.
5. User-Friendly Interface:
Use a modern and premium UI with a dark theme to match the Multi Tool Hub website.
Ensure proper error handling (e.g., unsupported file types, file too large).
The tool should be fully responsive for both desktop and mobile users.
Technical Requirements:
Use HTML, CSS, and JavaScript for the frontend.
Implement JavaScript (or a suitable library like Cropper.js or the Canvas API) for image cropping.
Ensure the tool runs efficiently without requiring a backend server for cropping.
Expected Deliverables:
✔ Complete HTML, CSS, and JavaScript code for the Image Crop Tool.
✔ Fully functional image upload, aspect ratio selection, cropping, preview, and download features.
✔ Visually appealing and easy-to-use user interface.

Image Crop Tool Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Crop Tool</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
    <style>
        body {
            background-color: #1E1E2F;
            color: #EAEAEA;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background: #2B2D42;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2);
        }
        .preview-container {
            margin-top: 10px;
        }
        .crop-options {
            margin-top: 10px;
        }
        button {
            padding: 10px 15px;
            margin: 5px;
            background: #FFD700;
            color: #1E1E2F;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background: #E6C200;
        }
        img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Image Crop Tool</h2>
        <input type="file" id="imageInput" accept="image/*">
        <div class="preview-container">
            <img id="imagePreview">
        </div>
        <div class="crop-options">
            <button onclick="setAspectRatio(4/3)">4:3</button>
            <button onclick="setAspectRatio(16/9)">16:9</button>
            <button onclick="setAspectRatio(16/10)">16:10</button>
            <button onclick="setAspectRatio(3/2)">3:2</button>
            <button onclick="setAspectRatio(1/1)">1:1</button>
            <button onclick="setAspectRatio(NaN)">Freeform</button>
            <button onclick="cropImage()">Crop</button>
        </div>
        <canvas id="croppedCanvas" style="display: none;"></canvas>
        <a id="downloadLink" style="display: none;" download="cropped-image.png">Download Cropped Image</a>
    </div>

function setAspectRatio(ratio) {
            if (cropper) {
                cropper.setAspectRatio(ratio);
            }
        }

Prompt For Video Converter Tool

Develop a Video Converter Tool for My Multi Tool Hub Website
The Video Converter Tool will allow users to upload a video, choose an output format, process the conversion, and download the converted video while also providing a preview.

Functional Requirements:
1. Video Upload:
Users should be able to upload a video file using a file input field.
Supported input formats: MP4, MOV, WMV, AVI, MKV, FLV, WEBM.
2. Format Selection:
Provide options for users to select the desired output format, including:
MP4
MOV
WMV
AVI
MKV
FLV
WEBM
3. Conversion Process:
Once the user selects a format and clicks the "Convert" button, a processing indicator should appear.
The video conversion process should begin and notify the user when completed.
4. Output Preview & Download:
After conversion, display a preview of the converted video.
Provide a "Download" button to save the converted video.
5. User-Friendly Interface:
Implement a modern and intuitive UI with a dark theme to match the Multi Tool Hub website.
Ensure proper error handling (e.g., unsupported file types, file too large).
The tool should be fully responsive and work seamlessly on desktop and mobile devices.
Technical Requirements:
Use HTML, CSS, and JavaScript for the frontend.
Implement FFmpeg.js or another suitable library for video format conversion.
Ensure that the tool works efficiently without requiring a backend server for conversion (if possible).
Expected Deliverables:
✔ Complete HTML, CSS, and JavaScript code for the Video Converter Tool.
✔ Fully functional video upload, format selection, conversion, preview, and download features.
✔ Visually appealing and easy-to-use user interface.

Code For Video Converter Tool

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Converter Tool</title>
    <script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@latest"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #1E1E2F;
            color: #EAEAEA;
            text-align: center;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: auto;
            background: #2B2D42;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2);
        }
        .btn {
            padding: 10px 20px;
            background: #FFD700;
            color: #1E1E2F;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
            transition: 0.3s;
        }
        .btn:hover {
            background: #E6C200;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Video Converter</h2>
        <input type="file" id="videoInput" accept="video/*">
        <br><br>
        <label for="formatSelect">Choose Output Format:</label>
        <select id="formatSelect">
            <option value="mp4">MP4</option>
            <option value="mov">MOV</option>
            <option value="wmv">WMV</option>
            <option value="avi">AVI</option>
            <option value="mkv">MKV</option>
            <option value="flv">FLV</option>
            <option value="webm">WEBM</option>
        </select>
        <br><br>
        <button class="btn" onclick="convertVideo()">Convert</button>
        <p id="status"></p>
        <video id="videoPreview" controls style="display:none; width: 100%; margin-top: 10px;"></video>
        <a id="downloadLink" style="display:none;" class="btn" download>Download Converted Video</a>
    </div>

Prompt For Age calculator Tool

Develop an Age Calculator Tool for My Multi Tool Hub Website
The Age Calculator Tool will allow users to input their date of birth, including the day and time, and calculate their exact age in years, months, days, hours, and minutes.

Functional Requirements:
1. User Input:
Users should enter their date of birth (DD/MM/YYYY).
Optionally, users can input the time of birth (HH:MM AM/PM) for more accurate results.
2. Age Calculation:
The tool should calculate the exact age in years, months, days, hours, and minutes.
It should update dynamically based on the current date and time.
3. Display Results:
Show a detailed breakdown of age in:
Years, Months, and Days
Hours and Minutes (if the time of birth is provided)
Display the next birthday countdown in days.
4. User-Friendly Interface:
Implement a modern, responsive UI with a dark theme to match the Multi Tool Hub website.
Ensure error handling (e.g., invalid date, future date input).
Technical Requirements:
Use HTML, CSS, and JavaScript for the frontend.
Implement JavaScript Date API for accurate age calculation.
Ensure that the tool is fully responsive on both desktop and mobile devices.
Expected Deliverables:
✔ Complete HTML, CSS, and JavaScript code for the Age Calculator Tool.
✔ Fully functional input form, age calculation, and result display.
✔ A visually appealing and easy-to-use user interface.

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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            background: #1E1E2F;
            color: #EAEAEA;
            text-align: center;
            padding: 50px;
        }

.container {
            background: #2B2D42;
            padding: 20px;
            border-radius: 10px;
            width: 50%;
            margin: auto;
            box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2);
        }

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

input, button {
            padding: 10px;
            margin: 10px;
            border: none;
            border-radius: 5px;
        }

input {
            width: 80%;
            text-align: center;
        }

button {
            background: #FFD700;
            color: #1E1E2F;
            cursor: pointer;
            font-weight: bold;
        }

button:hover {
            background: #E6C200;
        }

.result {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Age Calculator</h2>
        <label for="dob">Enter Your Date of Birth:</label><br>
        <input type="datetime-local" id="dob"><br>
        <button onclick="calculateAge()">Calculate Age</button>
        <div class="result" id="result"></div>
    </div>

Prompt For EMI Calculator Tool

Develop an EMI Calculator Tool for My Multi Tool Hub Website
The EMI (Equated Monthly Installment) Calculator tool will allow users to calculate their monthly loan payments based on loan amount, interest rate, and tenure.

Functional Requirements:
1. User Input:
Users should enter the following details:
Loan Amount (in currency)
Annual Interest Rate (in percentage)
Loan Tenure (in months or years)
Provide sliders or input fields for easy value selection.
2. EMI Calculation:
Use the standard EMI formula:
𝐸
𝑀
𝐼
=
𝑃
×
𝑅
×
(
1
+
𝑅
)
𝑁
(
1
+
𝑅
)
𝑁
−
1
EMI= 
(1+R) 
N
 −1
P×R×(1+R) 
N

P = Loan Amount
R = Monthly Interest Rate (Annual Rate / 12 / 100)
N = Loan Tenure (in months)
Dynamically display the EMI amount as users change the values.
3. Display Results:
Show the calculated EMI amount instantly.
Provide a breakdown of total payment, including:
Total Principal Amount Paid
Total Interest Paid
Total Payment (Principal + Interest)
Display a payment schedule or an amortization table (optional).
4. User-Friendly Interface:
Implement a modern, responsive UI with a dark theme to match the Multi Tool Hub website.
Ensure proper error handling (e.g., invalid or missing inputs).
Technical Requirements:
Use HTML, CSS, and JavaScript for the frontend.
Implement JavaScript for real-time EMI calculations.
Ensure responsiveness for both desktop and mobile devices.
Expected Deliverables:
✔ Complete HTML, CSS, and JavaScript code for the EMI Calculator Tool.
✔ Fully functional input fields, EMI calculation, and result display.
✔ A visually appealing and easy-to-use interface.

Code For 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>EMI Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #1e1e1e;
            color: #fff;
            text-align: center;
            padding: 20px;
        }
        .container {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            background: #333;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
        }
        input, button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            border: none;
        }
        button {
            background-color: #ff9800;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #e68900;
        }
        .result {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>EMI Calculator</h2>
        <label for="loanAmount">Loan Amount (₹):</label>
        <input type="number" id="loanAmount" placeholder="Enter Loan Amount" required>
        
        <label for="interestRate">Annual Interest Rate (%):</label>
        <input type="number" id="interestRate" step="0.01" placeholder="Enter Interest Rate" required>
        
        <label for="loanTenure">Loan Tenure (Months):</label>
        <input type="number" id="loanTenure" placeholder="Enter Loan Tenure" required>
        
        <button onclick="calculateEMI()">Calculate EMI</button>
        
        <div class="result" id="emiResult"></div>
    </div>

Prompt For SIP Calculator

Develop a SIP Calculator Tool for My Multi Tool Hub Website
The SIP (Systematic Investment Plan) Calculator will allow users to estimate their investment returns based on monthly investment, expected annual return rate, and investment tenure.

Functional Requirements
1. User Input:
Users should enter the following details:

Monthly Investment Amount (in currency)
Expected Annual Return Rate (in percentage)
Investment Tenure (in months or years)
Optionally, provide a slider for easy value selection
2. SIP Calculation:
The tool should use the compound interest formula for SIP:

𝐹
𝑉
=
𝑃
×
(
1
+
𝑟
)
𝑛
−
1
𝑟
×
(
1
+
𝑟
)
FV=P× 
r
(1+r) 
n
 −1

×(1+r)
Where:

FV = Future Value of the Investment
P = Monthly Investment Amount
r = Monthly Interest Rate (Annual Rate / 12 / 100)
n = Number of Months
Dynamically display results as users modify the input values.

3. Display Results:
Show the total corpus (final investment value) after the specified tenure.
Provide a breakdown of:
Total Investment Amount
Total Returns (Interest Earned)
Total Value at Maturity
Optionally, include a graph or chart to visually represent the investment growth over time.
4. User-Friendly Interface:
Implement a modern, premium UI with a dark theme to match the Multi Tool Hub website.
Ensure proper error handling (e.g., invalid inputs, negative values).
The tool should be responsive, ensuring usability on both desktop and mobile devices.
Technical Requirements
Use HTML, CSS, and JavaScript for the frontend.
Implement JavaScript for real-time SIP calculations.
Use Chart.js (optional) for graphical representation of investment growth.
Expected Deliverables
✔ Complete HTML, CSS, and JavaScript code for the SIP Calculator Tool.
✔ Fully functional input fields, SIP calculation, and result display.
✔ A visually appealing and easy-to-use user interface.

Code For SIP Calculator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SIP Calculator</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: #fff;
            text-align: center;
            padding: 20px;
        }
        .container {
            max-width: 400px;
            margin: auto;
            background: #1e1e1e;
            padding: 20px;
            border-radius: 10px;
        }
        input, button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            border: none;
        }
        button {
            background-color: #ff9800;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #e68900;
        }
        canvas {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>SIP Calculator</h2>
        <label>Monthly Investment (₹):</label>
        <input type="number" id="investment" placeholder="Enter Amount" required>
        
        <label>Expected Annual Return Rate (%):</label>
        <input type="number" id="rate" placeholder="Enter Rate" required>
        
        <label>Investment Tenure (Years):</label>
        <input type="number" id="tenure" placeholder="Enter Years" required>
        
        <button onclick="calculateSIP()">Calculate</button>
        
        <h3>Results:</h3>
        <p>Total Investment: ₹<span id="totalInvestment">0</span></p>
        <p>Total Returns: ₹<span id="totalReturns">0</span></p>
        <p>Maturity Value: ₹<span id="maturityValue">0</span></p>
        
        <canvas id="sipChart"></canvas>
    </div>

document.getElementById('totalInvestment').innerText = totalInvestment.toFixed(2);
            document.getElementById('totalReturns').innerText = totalReturns.toFixed(2);
            document.getElementById('maturityValue').innerText = FV.toFixed(2);

drawChart(totalInvestment, totalReturns);
        }

Prompt For Audio Trim Tool

Develop an Audio Trim Tool for My Multi Tool Hub Website
The Audio Trim Tool will allow users to upload an audio file, select a start and end time, trim the audio, and download the processed file.

Functional Requirements
1. Audio Upload:
Users should be able to upload an audio file using a file input field.
Supported input formats: MP3, WAV, AAC, OGG, FLAC.
2. Trim Selection:
Provide an interactive slider or input fields where users can select:
Start time (HH:MM:SS).
End time (HH:MM:SS).
3. Trimming Process:
When the user clicks the "Trim" button, the tool should display a "Processing..." message.
The selected portion of the audio should be extracted.
4. Output Preview & Download:
After processing, the tool should allow users to preview the trimmed audio.
A "Download" button should be available to save the trimmed file.
5. User-Friendly Interface:
Implement a modern and interactive UI with a dark theme to match the Multi Tool Hub website.
Ensure proper error handling (e.g., unsupported file types, incorrect time selection).
The tool should be responsive and work seamlessly on desktop and mobile devices.
Technical Requirements
Use HTML, CSS, and JavaScript for the frontend.
Utilize Web Audio API or FFmpeg.js for audio processing.
Ensure the tool runs efficiently without requiring a backend server.
Expected Deliverables
✔ Complete HTML, CSS, and JavaScript code for the Audio Trim Tool.
✔ Fully functional input fields, trimming process, and output download.
✔ A visually appealing and easy-to-use interface.

Code For Audio Trim Tool

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Trim Tool</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: white;
            text-align: center;
            padding: 20px;
        }
        .container {
            max-width: 500px;
            margin: auto;
            background: #1e1e1e;
            padding: 20px;
            border-radius: 10px;
        }
        input, button {
            margin: 10px;
            padding: 10px;
            width: 80%;
        }
        #audioPlayer {
            width: 100%;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Audio Trim Tool</h2>
        <input type="file" id="audioFile" accept="audio/*">
        <br>
        <label>Start Time (seconds):</label>
        <input type="number" id="startTime" min="0" value="0">
        <br>
        <label>End Time (seconds):</label>
        <input type="number" id="endTime" min="1">
        <br>
        <button onclick="trimAudio()">Trim</button>
        <p id="status"></p>
        <audio id="audioPlayer" controls></audio>
        <br>
        <a id="downloadLink" style="display:none;" download="trimmed_audio.mp3">Download Trimmed Audio</a>
    </div>

function trimAudio() {
            if (!audioBuffer) {
                alert("Please upload an audio file first.");
                return;
            }

const startTime = parseFloat(document.getElementById('startTime').value);
            const endTime = parseFloat(document.getElementById('endTime').value);
            if (startTime >= endTime || startTime < 0 || endTime > audioBuffer.duration) {
                alert("Invalid time selection.");
                return;
            }

document.getElementById('status').innerText = "Processing...";
            
            const sampleRate = audioBuffer.sampleRate;
            const startOffset = Math.floor(startTime * sampleRate);
            const endOffset = Math.floor(endTime * sampleRate);
            const newLength = endOffset - startOffset;
            
            const trimmedBuffer = audioContext.createBuffer(
                audioBuffer.numberOfChannels,
                newLength,
                sampleRate
            );

for (let i = 0; i < audioBuffer.numberOfChannels; i++) {
                const oldChannelData = audioBuffer.getChannelData(i);
                const newChannelData = trimmedBuffer.getChannelData(i);
                newChannelData.set(oldChannelData.subarray(startOffset, endOffset));
            }

exportTrimmedAudio(trimmedBuffer);
        }

function exportTrimmedAudio(trimmedBuffer) {
            const wavBuffer = audioBufferToWav(trimmedBuffer);
            const blob = new Blob([wavBuffer], { type: 'audio/wav' });
            const url = URL.createObjectURL(blob);
            
            document.getElementById('audioPlayer').src = url;
            document.getElementById('downloadLink').href = url;
            document.getElementById('downloadLink').style.display = 'block';
            document.getElementById('status').innerText = "Trimmed audio ready.";
        }

function audioBufferToWav(buffer) {
            const numOfChan = buffer.numberOfChannels,
                  length = buffer.length * numOfChan * 2 + 44,
                  bufferArray = new ArrayBuffer(length),
                  view = new DataView(bufferArray);
            
            const channels = [], sampleRate = buffer.sampleRate;
            let offset = 0;

function writeString(view, offset, string) {
                for (let i = 0; i < string.length; i++) {
                    view.setUint8(offset + i, string.charCodeAt(i));
                }
            }

writeString(view, offset, 'RIFF'); offset += 4;
            view.setUint32(offset, 36 + buffer.length * numOfChan * 2, true); offset += 4;
            writeString(view, offset, 'WAVE'); offset += 4;
            writeString(view, offset, 'fmt '); offset += 4;
            view.setUint32(offset, 16, true); offset += 4;
            view.setUint16(offset, 1, true); offset += 2;
            view.setUint16(offset, numOfChan, true); offset += 2;
            view.setUint32(offset, sampleRate, true); offset += 4;
            view.setUint32(offset, sampleRate * numOfChan * 2, true); offset += 4;
            view.setUint16(offset, numOfChan * 2, true); offset += 2;
            view.setUint16(offset, 16, true); offset += 2;
            writeString(view, offset, 'data'); offset += 4;
            view.setUint32(offset, buffer.length * numOfChan * 2, true); offset += 4;
            
            for (let i = 0; i < numOfChan; i++) {
                channels.push(buffer.getChannelData(i));
            }

return bufferArray;
        }
    </script>
</body>
</html>

तो अब आपका Multi Tool Website बनकर तैयार है. अब आप Earning वाले सेक्शन में जाकर Google Adsence अकाउंट बनाएंगे और उसके बाद लोग आपकी वेबसाइट पर अपने छोटे- बड़े काम करने आएंगे तो उन्हें ads दिखाई जाएगी। जिससे आप पैसे कमा सकेंगे। इस बाड़े में ज्यादा जानकारी के लिए ये आर्टिकल पढ़ सकते है।

Read More-https://www.gyanreach.com/2022/03/blogging%20kya%20hai%202022.html

Read More- https://www.gyanreach.com/2022/03/Free%20blog%20kaise%20banaye%20.html

Last Words-

तो कुछ इस तरह से आप multi tool website बनाकर ऑनलाइन पैसे कमा सकते है। मैं उम्मीद करता हु की ये आर्टिकल आपके लिए उपयोगी रहा होगा और आपको पसंद भी आया होगा। तो आज के इस आर्टिकल को पढ़ने के लिए आपको धन्यवाद।

AI Se Multi Tool Website Kaise Banaye

Multi Tool Website क्या है.

Multi Tool Website से पैसे कैसे कमाए।

AI से Free में Multi Tool Website कैसे बनाये।

AI से Multi Tool Website बनाने के लिए निचे दिए Steps को Follow करे:-

2 टिप्पणियाँ

Contact form