Implementation Guide: Professional WebTools Suite

Welcome to the WebTools Utility Suite! This application is built using vanilla HTML, CSS, and JavaScript. It requires no database, no backend server, and no complex build tools (like Node.js or Webpack). All tools run entirely in the user's browser, making it blazingly fast and completely private.

1. Quick Start (Running Locally)

To view and test the website on your computer:

1. Create a new folder on your computer (e.g., WebTools).

2. Save the provided code into a file named index.html inside that folder.

3. Double-click the index.html file. It will automatically open and run in your default web browser (Chrome, Safari, Edge, etc.).

2. Customizing the Website (Branding & Design)

You can easily rebrand the website to match your own domain or company by editing a few lines in the index.html file using any text editor (like VS Code, Notepad++, or Sublime Text).

Changing the Primary Color

The entire website uses a single CSS variable for its color theme. To change the blue theme to your brand color, find the :root section (around line 12) and update the --primary and --primary-hover HEX codes:

:root {
    --primary: #2563eb; /* Change this hex code */
    --primary-hover: #1d4ed8; /* Change to a slightly darker shade */
    /* ... */
}

Changing the Logo and Titles

• Main Logo: Search for <a class="logo" (around line 170) and change "WebTools" to your brand name.

• Page Title: Search for <title> (line 6) and change the browser tab title.

• Footer Text: Scroll to the bottom of the HTML (inside the <footer> tag) to update the copyright year and links.

3. How to Add a New Tool

The script is built as a Single Page Application (SPA). To add a new tool (e.g., a "Word to PDF" converter), follow these 3 exact steps:

Step 1: Create the Dashboard Card Find the <div class="grid"> section. Add a new card button linking to your new tool's ID:

<div class="card" onclick="openTool('my-new-tool')">
    <div class="card-icon">🚀</div>
    <h3>My New Tool</h3>
    <p>Short description of what it does.</p>
</div>

Step 2: Create the Tool UI Scroll down to the <!-- ================= TOOL INTERFACES ================= --> section. Add your tool's interface block. Make sure the id matches the one you used in Step 1.

<div id="my-new-tool" class="tool-view">
    <div class="tool-header">
        <button class="back-btn" onclick="showDashboard()">← Back</button>
        <h2>My New Tool</h2>
    </div>
    <!-- Add your inputs and buttons here -->
    <button class="btn-primary" onclick="myCustomFunction()">Run Tool</button>
</div>

Step 3: Add the JavaScript Logic Scroll down to the <script> section at the bottom of the file and write your logic:

function myCustomFunction() {
    alert("New tool is working!");
    // Add your tool's mathematical or processing logic here
}

4. Hosting & Deployment

Because this is a static, client-side application, it is incredibly cheap (often free) and easy to host. Here are the best methods:

Option A: Standard Web Hosting (cPanel, Hostinger, GoDaddy)

1. Log into your hosting control panel.

2. Open the File Manager.

3. Navigate to your public_html folder (or your domain's root folder).

4. Upload the index.html file.

5. Visit your domain name—your site is live!

Option B: Free Hosting via Netlify (Recommended)

1. Go to Netlify Drop.

2. Drag and drop the folder containing your index.html file into the browser window.

3. Netlify will instantly generate a live URL for your site. You can then link your custom domain for free in the Netlify settings.

Option C: Free Hosting via GitHub Pages

1. Create a free account on GitHub.

2. Create a new repository and upload your index.html file.

3. Go to the repository Settings > Pages.

4. Select the main branch as your source and save. GitHub will provide a free live link to your tools suite.