Update the html readme

2026-01-07 21:18:57 +01:00
parent 2ed228b7fb
commit 5ecb74ad78
2 changed files with 97 additions and 59 deletions
--- a/README.md
+++ b/README.md
@@ -20,21 +20,12 @@ curl "http://localhost:3000/?url=https://api.example.com/data"

 # Skip cache for this request
 curl -H "X-NoCache: 1" "http://localhost:3000/?url=https://api.example.com/data"
-
-# Cache custom status codes (e.g., 400s)
-curl -H "X-Status: 400" "http://localhost:3000/?url=https://api.example.com/bad"
-
-# Purge cache for specific URL
-curl "http://localhost:3000/purge/?url=https://api.example.com/data"
 ```

 ## Features

 - **Always caches** 2xx status codes for 1 year
 - Cache size: 100GB max
- Request size: 128MB max
 - X-Cache-Status header shows cache status
 - X-NoCache header bypasses cache
- X-Status header caches custom status codes
 - Interactive web interface at root path
- Cache purge endpoint
--- a/index.html
+++ b/index.html
@@ -3,85 +3,132 @@
 <head>
    <title>Nginx Cache Proxy</title>
    <style>
-        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
-        .usage { background: #f5f5f5; padding: 15px; border-radius: 5px; margin: 10px 0; }
-        .copy-field { margin: 20px 0; }
-        input { width: 100%; padding: 10px; font-size: 16px; }
-        button { background: #007cba; color: white; border: none; padding: 10px 20px; cursor: pointer; }
-        button:hover { background: #005a87; }
-        .status { margin-top: 10px; color: green; }
+        :root {
+            --bg: #ffffff;
+            --text: #333333;
+            --heading: #007cba;
+            --border: #007cba;
+            --code-bg: #f4f4f4;
+            --code-inline-bg: #f4f4f4;
+            --pre-bg: #2d2d2d;
+            --pre-text: #f8f8f2;
+            --copy-bg: #e8f4fd;
+            --copy-border: #007cba;
+            --success: #28a745;
+            --error: #dc3545;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg: #1a1a1a;
+                --text: #e0e0e0;
+                --heading: #58a6ff;
+                --border: #58a6ff;
+                --code-bg: #2d2d2d;
+                --code-inline-bg: #3d3d3d;
+                --pre-bg: #0d0d0d;
+                --copy-bg: #1c3d5e;
+                --copy-border: #58a6ff;
+                --success: #3fb950;
+                --error: #f85149;
+            }
+        }
+
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; color: var(--text); background: var(--bg); }
+        h1 { border-bottom: 2px solid var(--border); padding-bottom: 10px; color: var(--text); }
+        h2 { color: var(--heading); margin-top: 30px; }
+        h3 { color: var(--text); opacity: 0.8; }
+        code { background: var(--code-inline-bg); padding: 2px 6px; border-radius: 3px; font-family: "Consolas", "Monaco", monospace; font-size: 0.9em; color: var(--text); }
+        pre { background: var(--pre-bg); color: var(--pre-text); padding: 15px; border-radius: 5px; overflow-x: auto; }
+        pre code { background: none; padding: 0; color: inherit; }
+        .copy-section { background: var(--copy-bg); padding: 20px; border-radius: 8px; margin: 20px 0; border-left: 4px solid var(--copy-border); }
+        .copy-section h3 { margin-top: 0; color: var(--text); }
+        .copy-section p { color: var(--text); }
+        button { background: var(--heading); color: white; border: none; padding: 12px 24px; cursor: pointer; border-radius: 5px; font-size: 14px; font-weight: 600; }
+        button:hover { filter: brightness(0.9); }
+        .status { margin-top: 10px; font-size: 14px; }
+        .status.success { color: var(--success); }
+        .status.error { color: var(--error); }
+        ul { line-height: 1.8; }
+        li { color: var(--text); }
    </style>
 </head>
 <body>
    <h1>Nginx Cache Proxy</h1>
    <p>Proxy and cache any HTTP/HTTPS URL with automatic caching.</p>

-    <div class="copy-field">
-        <h3>Quick URL Builder</h3>
-        <input type="text" id="urlInput" placeholder="Enter target URL (e.g., https://api.example.com/data)">
-        <button onclick="copyUrl()">Copy Proxy URL</button>
+    <div class="copy-section">
+        <h3>Quick Copy</h3>
+        <p>Copy this proxy URL with <code>?url=</code> appended, then paste any URL after it:</p>
+        <button onclick="copyProxyUrl()">Copy Proxy URL</button>
        <div id="status" class="status"></div>
    </div>

-    <h2>Usage</h2>
+    <h2>Usage Examples</h2>

-    <div class="usage">
-        <h3>Basic Proxy</h3>
-        <pre>curl "http://localhost:3000/?url=https://api.example.com/data"</pre>
-    </div>
+    <h3>Basic Proxy (Cached)</h3>
+    <pre><code id="basicExample">Loading...</code></pre>

-    <div class="usage">
-        <h3>Skip Cache</h3>
-        <pre>curl -H "X-NoCache: 1" "http://localhost:3000/?url=https://api.example.com/data"</pre>
-    </div>
-
-    <div class="usage">
-        <h3>Cache Custom Status Codes</h3>
-        <pre>curl -H "X-Status: 400" "http://localhost:3000/?url=https://api.example.com/bad"</pre>
-    </div>
-
-    <div class="usage">
-        <h3>Purge Cache</h3>
-        <pre>curl "http://localhost:3000/purge/?url=https://api.example.com/data"</pre>
-    </div>
+    <h3>Skip Cache</h3>
+    <pre><code id="nocacheExample">Loading...</code></pre>

    <h2>Features</h2>
    <ul>
-        <li>Always caches 2xx status codes for 1 year</li>
-        <li>100GB max cache size</li>
-        <li>128MB max per request</li>
-        <li>X-Cache-Status header shows hit/miss</li>
-        <li>X-NoCache header bypasses cache</li>
-        <li>X-Status header caches custom status codes</li>
-        <li>Purge endpoint for cache management</li>
+        <li>Always caches <strong>2xx</strong> status codes for <strong>1 year</strong></li>
+        <li>Cache size: <strong>100GB</strong> max</li>
+        <li><code>X-Cache-Status</code> header shows cache hit/miss</li>
+        <li><code>X-NoCache</code> header bypasses cache</li>
+        <li>Interactive web interface</li>
    </ul>

    <script>
-        function copyUrl() {
-            const input = document.getElementById('urlInput');
-            const status = document.getElementById('status');
+        function getBaseUrl() {
+            const protocol = window.location.protocol;
+            const hostname = window.location.hostname;
+            const port = window.location.port;
+            let baseUrl = protocol + '//' + hostname;

-            if (!input.value.trim()) {
-                status.textContent = 'Please enter a URL first';
-                status.style.color = 'red';
-                return;
+            if ((protocol === 'http:' && port !== '80' && port !== '') ||
+                (protocol === 'https:' && port !== '443' && port !== '')) {
+                baseUrl += ':' + port;
            }
+            return baseUrl;
+        }

-            const proxyUrl = window.location.origin + '/?url=' + encodeURIComponent(input.value);
+        document.addEventListener('DOMContentLoaded', function() {
+            const base = getBaseUrl();
+
+            document.getElementById('basicExample').textContent =
+                'curl "' + base + '/?url=https://api.example.com/data"';
+
+            document.getElementById('nocacheExample').textContent =
+                'curl -H "X-NoCache: 1" "' + base + '/?url=https://api.example.com/data"';
+        });
+
+        function copyProxyUrl() {
+            const proxyUrl = window.location.href + '?url=';
+            const statusEl = document.getElementById('status');

            navigator.clipboard.writeText(proxyUrl).then(() => {
-                status.textContent = 'Proxy URL copied to clipboard!';
-                status.style.color = 'green';
+                statusEl.className = 'status success';
+                statusEl.textContent = 'Copied: ' + proxyUrl;
            }).catch(err => {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = proxyUrl;
+                textArea.style.position = 'fixed';
+                textArea.style.opacity = '0';
                document.body.appendChild(textArea);
                textArea.select();
-                document.execCommand('copy');
+                try {
+                    document.execCommand('copy');
+                    statusEl.className = 'status success';
+                    statusEl.textContent = 'Copied: ' + proxyUrl;
+                } catch (e) {
+                    statusEl.className = 'status error';
+                    statusEl.textContent = 'Copy failed. URL: ' + proxyUrl;
+                }
                document.body.removeChild(textArea);
-                status.textContent = 'Proxy URL copied to clipboard!';
-                status.style.color = 'green';
            });
        }
    </script>