index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bash Web Server Dashboard</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🚀 Bash + Socat Web Server</h1>
            <p class="subtitle">A zero-dependency (well, almost!) asynchronous HTTP server written entirely in Bash.</p>
        </header>

        <!-- Interactive Demo Box -->
        <section class="card">
            <h2>🧪 Interactive Test Area</h2>
            <div id="status-box">Status: Waiting for action...</div>
            <button id="magic-btn">Click to Test JavaScript</button>
        </section>

        <!-- Project Explanation / Documentation Section -->
        <section class="card docs">
            <h2>📖 How This Project Works</h2>

            <div class="doc-item">
                <h3>1. The Core Engine (Socat)</h3>
                <p>Instead of traditional compiled languages, this server leverages <strong>socat</strong> with the <code>,fork</code> argument. Every time a browser connects, socat instantly spawns an independent background child process to handle the request asynchronously.</p>
            </div>

            <div class="doc-item">
                <h3>2. JSON Configuration</h3>
                <p>The server reads settings directly from <code>config.json</code> using <strong>jq</strong>. It strictly enforces parameters like host, port, async mode, and served directories, failing safely if any configuration is missing.</p>
            </div>

            <div class="doc-item">
                <h3>3. Worker Routing & Safety</h3>
                <p>When a request hits the server, it passes through a worker script that sanitizes file paths to prevent directory traversal attacks (<code>../</code>), handles custom 404 responses, and maps file extensions to correct HTTP Content-Types.</p>
            </div>
        </section>
    </div>

    <script src="/scripts/main.js"></script>
</body>
</html>