Clean Apple-style UI + CSV/YAML/Markdown/Image formats + response headers tab

app.py

@@ -87,275 +87,333 @@ def ui():
     <style>
         * { box-sizing: border-box; margin: 0; padding: 0; }
         body {
-            font-family: 'Segoe UI', system-ui, sans-serif;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
+            background: #f5f5f7;
             min-height: 100vh;
-            color: #e4e4e4;
-            padding: 20px;
-        }
-        .container { max-width: 1200px; margin: 0 auto; }
-        h1 {
-            text-align: center;
-            margin-bottom: 10px;
-            font-size: 2.5em;
-            background: linear-gradient(90deg, #00d9ff, #00ff88);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            color: #1d1d1f;
+            font-size: 14px;
+            line-height: 1.5;
         }
-        .subtitle { text-align: center; color: #888; margin-bottom: 30px; }
-        .main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
-        @media (max-width: 900px) { .main-grid { grid-template-columns: 1fr; } }
 
-        .panel {
-            background: rgba(255,255,255,0.05);
-            border-radius: 16px;
-            padding: 20px;
-            border: 1px solid rgba(255,255,255,0.1);
-        }
-        .panel h2 {
-            font-size: 1.1em;
-            margin-bottom: 15px;
-            color: #00d9ff;
+        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
+
+        header {
             display: flex;
             align-items: center;
-            gap: 8px;
+            justify-content: space-between;
+            padding: 16px 0;
+            border-bottom: 1px solid #d2d2d7;
+            margin-bottom: 24px;
+        }
+        h1 { font-size: 21px; font-weight: 600; }
+        .header-links a {
+            color: #06c;
+            text-decoration: none;
+            margin-left: 24px;
+            font-size: 13px;
         }
+        .header-links a:hover { text-decoration: underline; }
 
-        /* Request Section */
-        .request-line {
+        /* Request Bar */
+        .request-bar {
             display: flex;
-            gap: 10px;
-            margin-bottom: 15px;
+            gap: 8px;
+            background: #fff;
+            padding: 8px;
+            border-radius: 10px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+            margin-bottom: 20px;
         }
         select, input, textarea, button {
             font-family: inherit;
             font-size: 14px;
             border: none;
-            border-radius: 8px;
             outline: none;
         }
         .method-select {
-            padding: 12px 15px;
-            background: #2d2d44;
-            color: #fff;
+            padding: 10px 12px;
+            background: #f5f5f7;
+            border-radius: 6px;
             font-weight: 600;
             cursor: pointer;
-            min-width: 110px;
+            color: #1d1d1f;
         }
         .url-input {
             flex: 1;
-            padding: 12px 15px;
-            background: #2d2d44;
-            color: #fff;
+            padding: 10px 12px;
+            background: #f5f5f7;
+            border-radius: 6px;
+            font-family: 'SF Mono', Menlo, monospace;
         }
-        .url-input::placeholder { color: #666; }
         .send-btn {
-            padding: 12px 30px;
-            background: linear-gradient(90deg, #00d9ff, #00ff88);
-            color: #1a1a2e;
-            font-weight: 700;
+            padding: 10px 24px;
+            background: #007aff;
+            color: #fff;
+            font-weight: 500;
+            border-radius: 6px;
             cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
+            transition: background 0.2s;
+        }
+        .send-btn:hover { background: #0056b3; }
+        .send-btn:disabled { background: #86868b; cursor: not-allowed; }
+
+        /* Main Layout */
+        .main-layout {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
         }
-        .send-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 20px rgba(0,217,255,0.3);
+        @media (max-width: 1000px) { .main-layout { grid-template-columns: 1fr; } }
+
+        .panel {
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+            overflow: hidden;
         }
-        .send-btn:active { transform: translateY(0); }
 
         /* Tabs */
         .tabs {
             display: flex;
-            gap: 5px;
-            margin-bottom: 10px;
+            border-bottom: 1px solid #d2d2d7;
+            background: #fafafa;
         }
         .tab {
-            padding: 8px 16px;
-            background: transparent;
-            color: #888;
+            padding: 10px 16px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #86868b;
             cursor: pointer;
-            border-radius: 6px;
-            transition: all 0.2s;
+            border-bottom: 2px solid transparent;
+            margin-bottom: -1px;
+            background: none;
+            transition: color 0.2s;
         }
-        .tab:hover { color: #fff; }
-        .tab.active { background: #2d2d44; color: #00d9ff; }
+        .tab:hover { color: #1d1d1f; }
+        .tab.active { color: #007aff; border-bottom-color: #007aff; }
 
         .tab-content { display: none; }
         .tab-content.active { display: block; }
 
+        .panel-body { padding: 16px; }
+
         textarea {
             width: 100%;
-            min-height: 150px;
+            min-height: 180px;
             padding: 12px;
-            background: #1a1a2e;
-            color: #e4e4e4;
+            background: #f5f5f7;
+            border-radius: 6px;
             resize: vertical;
-            font-family: 'Fira Code', 'Consolas', monospace;
+            font-family: 'SF Mono', Menlo, monospace;
             font-size: 13px;
-            line-height: 1.5;
+            line-height: 1.6;
+            color: #1d1d1f;
         }
 
-        /* Response */
-        .response-meta {
+        /* Response Panel */
+        .status-bar {
             display: flex;
-            gap: 15px;
-            margin-bottom: 15px;
-            flex-wrap: wrap;
-        }
-        .meta-item {
-            padding: 6px 12px;
-            background: #2d2d44;
-            border-radius: 6px;
-            font-size: 13px;
+            gap: 20px;
+            padding: 12px 16px;
+            background: #fafafa;
+            border-bottom: 1px solid #d2d2d7;
+            font-size: 12px;
         }
-        .status-ok { color: #00ff88; }
-        .status-err { color: #ff6b6b; }
-        .status-warn { color: #ffd93d; }
-
-        .response-body {
-            background: #1a1a2e;
-            border-radius: 8px;
-            padding: 15px;
-            font-family: 'Fira Code', 'Consolas', monospace;
-            font-size: 13px;
-            line-height: 1.6;
+        .status-item { color: #86868b; }
+        .status-value { font-weight: 600; color: #1d1d1f; margin-left: 6px; }
+        .status-ok { color: #34c759; }
+        .status-err { color: #ff3b30; }
+        .status-warn { color: #ff9500; }
+
+        .response-content {
+            padding: 16px;
+            font-family: 'SF Mono', Menlo, monospace;
+            font-size: 12px;
+            line-height: 1.7;
             overflow-x: auto;
             white-space: pre-wrap;
             word-break: break-word;
-            max-height: 400px;
+            max-height: 500px;
             overflow-y: auto;
+            background: #fff;
         }
 
+        /* Headers display */
+        .headers-list {
+            font-family: 'SF Mono', Menlo, monospace;
+            font-size: 12px;
+        }
+        .header-row {
+            display: flex;
+            padding: 6px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        .header-row:last-child { border-bottom: none; }
+        .header-name {
+            width: 200px;
+            flex-shrink: 0;
+            font-weight: 600;
+            color: #86868b;
+        }
+        .header-value { color: #1d1d1f; word-break: break-all; }
+
         /* Examples */
-        .examples {
+        .examples-section { margin-top: 20px; }
+        .examples-section h3 {
+            font-size: 13px;
+            font-weight: 600;
+            color: #86868b;
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .examples-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: 10px;
-            margin-top: 20px;
+            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+            gap: 8px;
         }
         .example-btn {
-            padding: 12px 15px;
-            background: rgba(255,255,255,0.05);
-            border: 1px solid rgba(255,255,255,0.1);
-            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px 12px;
+            background: #fff;
+            border: 1px solid #d2d2d7;
+            border-radius: 8px;
             cursor: pointer;
             text-align: left;
-            transition: all 0.2s;
+            transition: all 0.15s;
         }
         .example-btn:hover {
-            background: rgba(0,217,255,0.1);
-            border-color: rgba(0,217,255,0.3);
+            border-color: #007aff;
+            background: #f5f5f7;
         }
-        .example-method {
-            display: inline-block;
-            padding: 2px 8px;
+        .method-badge {
+            padding: 2px 6px;
             border-radius: 4px;
-            font-size: 11px;
+            font-size: 10px;
             font-weight: 700;
-            margin-right: 8px;
+            font-family: 'SF Mono', Menlo, monospace;
         }
-        .method-GET { background: #00ff88; color: #1a1a2e; }
-        .method-POST { background: #ffd93d; color: #1a1a2e; }
-        .method-PUT { background: #00d9ff; color: #1a1a2e; }
-        .method-DELETE { background: #ff6b6b; color: #1a1a2e; }
-        .method-PATCH { background: #c084fc; color: #1a1a2e; }
-        .example-title { font-weight: 600; margin-bottom: 4px; }
-        .example-desc { font-size: 12px; color: #888; }
-
-        .links { text-align: center; margin-top: 20px; }
-        .links a {
-            color: #00d9ff;
-            text-decoration: none;
-            margin: 0 15px;
+        .method-GET { background: #e8f5e9; color: #2e7d32; }
+        .method-POST { background: #fff3e0; color: #ef6c00; }
+        .method-PUT { background: #e3f2fd; color: #1565c0; }
+        .method-DELETE { background: #ffebee; color: #c62828; }
+        .method-PATCH { background: #f3e5f5; color: #7b1fa2; }
+        .example-info { flex: 1; min-width: 0; }
+        .example-title { font-weight: 500; font-size: 13px; }
+        .example-url {
+            font-size: 11px;
+            color: #86868b;
+            font-family: 'SF Mono', Menlo, monospace;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
-        .links a:hover { text-decoration: underline; }
 
-        /* Loading */
-        .loading { opacity: 0.6; pointer-events: none; }
-
-        /* JSON syntax highlighting */
-        .json-key { color: #00d9ff; }
-        .json-string { color: #00ff88; }
-        .json-number { color: #ffd93d; }
-        .json-boolean { color: #c084fc; }
-        .json-null { color: #888; }
+        /* JSON highlighting - subtle */
+        .json-key { color: #007aff; }
+        .json-string { color: #c41a16; }
+        .json-number { color: #1c00cf; }
+        .json-boolean { color: #aa0d91; }
+        .json-null { color: #86868b; }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>API Explorer</h1>
-        <p class="subtitle">Learn HTTP methods by doing - no setup required</p>
+        <header>
+            <h1>API Explorer</h1>
+            <div class="header-links">
+                <a href="/docs">Swagger Docs</a>
+                <a href="/api">API Info</a>
+            </div>
+        </header>
+
+        <div class="request-bar">
+            <select class="method-select" id="method">
+                <option value="GET">GET</option>
+                <option value="POST">POST</option>
+                <option value="PUT">PUT</option>
+                <option value="PATCH">PATCH</option>
+                <option value="DELETE">DELETE</option>
+            </select>
+            <input type="text" class="url-input" id="url" placeholder="/hello" value="/hello">
+            <button class="send-btn" id="send">Send</button>
+        </div>
 
-        <div class="main-grid">
+        <div class="main-layout">
+            <!-- Request Panel -->
             <div class="panel">
-                <h2>Request</h2>
-                <div class="request-line">
-                    <select class="method-select" id="method">
-                        <option value="GET">GET</option>
-                        <option value="POST">POST</option>
-                        <option value="PUT">PUT</option>
-                        <option value="PATCH">PATCH</option>
-                        <option value="DELETE">DELETE</option>
-                    </select>
-                    <input type="text" class="url-input" id="url" placeholder="/hello" value="/hello">
-                    <button class="send-btn" id="send">Send</button>
+                <div class="tabs" id="request-tabs">
+                    <button class="tab active" data-tab="req-body">Body</button>
+                    <button class="tab" data-tab="req-headers">Headers</button>
                 </div>
-
-                <div class="tabs">
-                    <button class="tab active" data-tab="body">Body</button>
-                    <button class="tab" data-tab="headers">Headers</button>
-                </div>
-
-                <div class="tab-content active" id="body-tab">
-                    <textarea id="body" placeholder='{"name": "Laptop", "price": 999.99, "quantity": 5}'></textarea>
-                </div>
-                <div class="tab-content" id="headers-tab">
-                    <textarea id="headers" placeholder="Content-Type: application/json">Content-Type: application/json</textarea>
+                <div class="panel-body">
+                    <div class="tab-content active" id="req-body-tab">
+                        <textarea id="body" placeholder='{"name": "Laptop", "price": 999.99, "quantity": 5}'></textarea>
+                    </div>
+                    <div class="tab-content" id="req-headers-tab">
+                        <textarea id="headers" placeholder="Content-Type: application/json">Content-Type: application/json</textarea>
+                    </div>
                 </div>
             </div>
 
+            <!-- Response Panel -->
             <div class="panel">
-                <h2>Response</h2>
-                <div class="response-meta" id="meta">
-                    <span class="meta-item">Status: <span id="status">-</span></span>
-                    <span class="meta-item">Time: <span id="time">-</span></span>
-                    <span class="meta-item">Size: <span id="size">-</span></span>
+                <div class="status-bar">
+                    <div class="status-item">Status<span class="status-value" id="status">-</span></div>
+                    <div class="status-item">Time<span class="status-value" id="time">-</span></div>
+                    <div class="status-item">Size<span class="status-value" id="size">-</span></div>
+                    <div class="status-item">Type<span class="status-value" id="content-type">-</span></div>
+                </div>
+                <div class="tabs" id="response-tabs">
+                    <button class="tab active" data-tab="res-body">Body</button>
+                    <button class="tab" data-tab="res-headers">Headers</button>
+                    <button class="tab" data-tab="res-raw">Raw</button>
+                </div>
+                <div class="tab-content active" id="res-body-tab">
+                    <div class="response-content" id="response">Send a request to see the response</div>
+                </div>
+                <div class="tab-content" id="res-headers-tab">
+                    <div class="panel-body">
+                        <div class="headers-list" id="response-headers"></div>
+                    </div>
+                </div>
+                <div class="tab-content" id="res-raw-tab">
+                    <div class="response-content" id="response-raw"></div>
                 </div>
-                <div class="response-body" id="response">Send a request to see the response...</div>
             </div>
         </div>
 
-        <div class="panel" style="margin-top: 20px;">
-            <h2>Try These Examples</h2>
-            <div class="examples" id="examples"></div>
-        </div>
-
-        <div class="links">
-            <a href="/docs">Swagger Docs</a>
-            <a href="/api">API Info</a>
+        <div class="examples-section">
+            <h3>Examples</h3>
+            <div class="examples-grid" id="examples"></div>
         </div>
     </div>
 
     <script>
         const examples = [
-            { method: 'GET', url: '/hello', title: 'Hello World', desc: 'Simplest GET request' },
-            { method: 'GET', url: '/time', title: 'Server Time', desc: 'Get current timestamp' },
-            { method: 'GET', url: '/greet?name=Student', title: 'Query Parameter', desc: 'Pass data via URL' },
-            { method: 'GET', url: '/greet/Alice', title: 'Path Parameter', desc: 'Data in the URL path' },
-            { method: 'GET', url: '/items', title: 'List Items', desc: 'Get all items in store' },
-            { method: 'GET', url: '/items/1', title: 'Get One Item', desc: 'Fetch item by ID' },
-            { method: 'POST', url: '/items', title: 'Create Item', desc: 'Add new item to store', body: '{"name": "Laptop", "price": 999.99, "quantity": 5}' },
-            { method: 'POST', url: '/echo', title: 'Echo JSON', desc: 'Server echoes your data', body: '{"message": "Hello!", "count": 42}' },
-            { method: 'PUT', url: '/items/1', title: 'Replace Item', desc: 'Full update of item', body: '{"name": "Green Apple", "price": 2.50, "quantity": 200}' },
-            { method: 'PATCH', url: '/items/1', title: 'Partial Update', desc: 'Update only price', body: '{"price": 1.99}' },
-            { method: 'DELETE', url: '/items/3', title: 'Delete Item', desc: 'Remove item from store' },
-            { method: 'GET', url: '/format/json', title: 'JSON Response', desc: 'Default JSON format' },
-            { method: 'GET', url: '/format/xml', title: 'XML Response', desc: 'XML formatted data' },
-            { method: 'GET', url: '/format/html', title: 'HTML Response', desc: 'Returns HTML page' },
-            { method: 'GET', url: '/headers', title: 'See Headers', desc: 'View request headers' },
-            { method: 'GET', url: '/status/404', title: 'Error 404', desc: 'Test error handling' },
-            { method: 'GET', url: '/status/201', title: 'Status 201', desc: 'Created status code' },
-            { method: 'GET', url: '/method', title: 'Method Check', desc: 'Shows HTTP method used' },
+            { method: 'GET', url: '/hello', title: 'Hello World' },
+            { method: 'GET', url: '/time', title: 'Server Time' },
+            { method: 'GET', url: '/greet?name=Student', title: 'Query Param' },
+            { method: 'GET', url: '/greet/Alice', title: 'Path Param' },
+            { method: 'GET', url: '/items', title: 'List Items' },
+            { method: 'GET', url: '/items/1', title: 'Get Item' },
+            { method: 'POST', url: '/items', title: 'Create Item', body: '{"name": "Laptop", "price": 999.99, "quantity": 5}' },
+            { method: 'POST', url: '/echo', title: 'Echo JSON', body: '{"message": "Hello!", "count": 42}' },
+            { method: 'PUT', url: '/items/1', title: 'Replace Item', body: '{"name": "Green Apple", "price": 2.50, "quantity": 200}' },
+            { method: 'PATCH', url: '/items/1', title: 'Partial Update', body: '{"price": 1.99}' },
+            { method: 'DELETE', url: '/items/3', title: 'Delete Item' },
+            { method: 'GET', url: '/format/json', title: 'JSON Format' },
+            { method: 'GET', url: '/format/xml', title: 'XML Format' },
+            { method: 'GET', url: '/format/html', title: 'HTML Format' },
+            { method: 'GET', url: '/format/csv', title: 'CSV Format' },
+            { method: 'GET', url: '/format/yaml', title: 'YAML Format' },
+            { method: 'GET', url: '/format/markdown', title: 'Markdown' },
+            { method: 'GET', url: '/format/image', title: 'PNG Image' },
+            { method: 'GET', url: '/headers', title: 'View Headers' },
+            { method: 'GET', url: '/status/404', title: 'Error 404' },
+            { method: 'GET', url: '/status/201', title: 'Status 201' },
         ];
 
         // Render examples
@@ -364,40 +422,43 @@ def ui():
             const btn = document.createElement('button');
             btn.className = 'example-btn';
             btn.innerHTML = `
-                <div class="example-title">
-                    <span class="example-method method-${ex.method}">${ex.method}</span>
-                    ${ex.title}
+                <span class="method-badge method-${ex.method}">${ex.method}</span>
+                <div class="example-info">
+                    <div class="example-title">${ex.title}</div>
+                    <div class="example-url">${ex.url}</div>
                 </div>
-                <div class="example-desc">${ex.url}</div>
             `;
-            btn.onclick = () => loadExample(ex);
+            btn.onclick = () => {
+                document.getElementById('method').value = ex.method;
+                document.getElementById('url').value = ex.url;
+                document.getElementById('body').value = ex.body || '';
+            };
             examplesContainer.appendChild(btn);
         });
 
-        function loadExample(ex) {
-            document.getElementById('method').value = ex.method;
-            document.getElementById('url').value = ex.url;
-            document.getElementById('body').value = ex.body || '';
-        }
-
         // Tab switching
-        document.querySelectorAll('.tab').forEach(tab => {
-            tab.onclick = () => {
-                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-                tab.classList.add('active');
-                document.getElementById(tab.dataset.tab + '-tab').classList.add('active');
-            };
-        });
+        function setupTabs(containerId) {
+            const container = document.getElementById(containerId);
+            container.querySelectorAll('.tab').forEach(tab => {
+                tab.onclick = () => {
+                    container.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                    tab.classList.add('active');
+                    const panel = container.closest('.panel') || document;
+                    panel.querySelectorAll(':scope > .tab-content, :scope > .panel-body > .tab-content').forEach(c => c.classList.remove('active'));
+                    document.getElementById(tab.dataset.tab + '-tab').classList.add('active');
+                };
+            });
+        }
+        setupTabs('request-tabs');
+        setupTabs('response-tabs');
 
-        // Syntax highlighting for JSON
-        function highlightJSON(json) {
-            if (typeof json !== 'string') json = JSON.stringify(json, null, 2);
-            return json
+        // JSON highlighting
+        function highlightJSON(str) {
+            return str
                 .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                 .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
                 .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
-                .replace(/: (\\d+\\.?\\d*)/g, ': <span class="json-number">$1</span>')
+                .replace(/: (-?\\d+\\.?\\d*)/g, ': <span class="json-number">$1</span>')
                 .replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
                 .replace(/: (null)/g, ': <span class="json-null">$1</span>');
         }
@@ -420,7 +481,8 @@ def ui():
                 opts.body = body;
             }
 
-            document.getElementById('send').classList.add('loading');
+            document.getElementById('send').disabled = true;
+            document.getElementById('send').textContent = 'Sending...';
             const start = performance.now();
 
             try {
@@ -428,15 +490,27 @@ def ui():
                 const elapsed = Math.round(performance.now() - start);
                 const text = await res.text();
 
-                // Update status
+                // Status
                 const statusEl = document.getElementById('status');
                 statusEl.textContent = res.status + ' ' + res.statusText;
-                statusEl.className = res.ok ? 'status-ok' : (res.status >= 500 ? 'status-err' : 'status-warn');
+                statusEl.className = 'status-value ' + (res.ok ? 'status-ok' : (res.status >= 500 ? 'status-err' : 'status-warn'));
 
+                // Meta
                 document.getElementById('time').textContent = elapsed + 'ms';
-                document.getElementById('size').textContent = (text.length / 1024).toFixed(2) + ' KB';
+                document.getElementById('size').textContent = text.length > 1024 ? (text.length / 1024).toFixed(1) + ' KB' : text.length + ' B';
+                document.getElementById('content-type').textContent = res.headers.get('content-type')?.split(';')[0] || '-';
+
+                // Response headers
+                const headersHtml = [];
+                res.headers.forEach((value, name) => {
+                    headersHtml.push(`<div class="header-row"><span class="header-name">${name}</span><span class="header-value">${value}</span></div>`);
+                });
+                document.getElementById('response-headers').innerHTML = headersHtml.join('') || '<div style="color:#86868b">No headers</div>';
+
+                // Raw response
+                document.getElementById('response-raw').textContent = text;
 
-                // Try to format as JSON
+                // Formatted response
                 let display;
                 try {
                     const json = JSON.parse(text);
@@ -448,17 +522,18 @@ def ui():
 
             } catch (err) {
                 document.getElementById('status').textContent = 'Error';
-                document.getElementById('status').className = 'status-err';
+                document.getElementById('status').className = 'status-value status-err';
                 document.getElementById('response').textContent = 'Request failed: ' + err.message;
+                document.getElementById('response-headers').innerHTML = '';
+                document.getElementById('response-raw').textContent = '';
             }
 
-            document.getElementById('send').classList.remove('loading');
+            document.getElementById('send').disabled = false;
+            document.getElementById('send').textContent = 'Send';
         }
 
         document.getElementById('send').onclick = sendRequest;
         document.getElementById('url').onkeydown = (e) => { if (e.key === 'Enter') sendRequest(); };
-
-        // Send initial request
         sendRequest();
     </script>
 </body>
@@ -678,6 +753,81 @@ def format_xml():
 </response>"""
     return Response(content=xml_content, media_type="application/xml")
 
+@app.get("/format/csv", tags=["Response Formats"])
+def format_csv():
+    """Returns data as CSV (spreadsheet format)"""
+    csv_content = """id,name,price,quantity,description
+1,Apple,1.50,100,Fresh red apple
+2,Banana,0.75,150,Yellow banana
+3,Orange,2.00,80,Juicy orange"""
+    return Response(
+        content=csv_content,
+        media_type="text/csv",
+        headers={"Content-Disposition": "inline; filename=items.csv"}
+    )
+
+@app.get("/format/markdown", tags=["Response Formats"])
+def format_markdown():
+    """Returns data as Markdown"""
+    md_content = """# User Profile
+
+| Field | Value |
+|-------|-------|
+| Name  | Alice |
+| Age   | 30    |
+| City  | Mumbai |
+
+## About
+This is a **markdown** formatted response.
+
+- Supports *italic* text
+- Supports **bold** text
+- Supports `code` blocks
+
+```python
+print("Hello, World!")
+```
+"""
+    return Response(content=md_content, media_type="text/markdown")
+
+@app.get("/format/yaml", tags=["Response Formats"])
+def format_yaml():
+    """Returns data as YAML"""
+    yaml_content = """# User Data in YAML format
+format: YAML
+content_type: application/x-yaml
+data:
+  user:
+    name: Alice
+    age: 30
+    city: Mumbai
+    hobbies:
+      - reading
+      - coding
+      - hiking
+"""
+    return Response(content=yaml_content, media_type="application/x-yaml")
+
+@app.get("/format/image", tags=["Response Formats"])
+def format_image():
+    """Returns a tiny PNG image (1x1 red pixel)"""
+    # Minimal valid PNG: 1x1 red pixel
+    import base64
+    png_base64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg=="
+    png_bytes = base64.b64decode(png_base64)
+    return Response(content=png_bytes, media_type="image/png")
+
+@app.get("/format/binary", tags=["Response Formats"])
+def format_binary():
+    """Returns raw binary data (demonstrates non-text response)"""
+    # Some example bytes
+    binary_data = bytes([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x00, 0xFF, 0xFE, 0x00, 0x01])
+    return Response(
+        content=binary_data,
+        media_type="application/octet-stream",
+        headers={"Content-Disposition": "inline; filename=data.bin"}
+    )
+
 # ============================================================================
 # EDUCATIONAL ENDPOINTS
 # ============================================================================