Spaces:

darkvibe314
/

arena-api

Paused

App Files Files Community

darkvibe314 commited on Mar 11

Commit

7402ced

verified ·

1 Parent(s): c092c2f

Create public/index.html

Browse files

Files changed (1) hide show

public/index.html +126 -0

public/index.html ADDED Viewed

	@@ -0,0 +1,126 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Silent Tech | API Portal</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body { background-color: #0f172a; color: #e5e7eb; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
+        .glass-panel { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); border: 1px solid #334155; }
+        .glow-text { text-shadow: 0 0 15px rgba(56, 189, 248, 0.5); }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col items-center p-6">
+    <!-- HEADER -->
+    <header class="w-full max-w-4xl flex justify-between items-center py-6 mb-8 border-b border-slate-700">
+        <h1 class="text-3xl font-bold text-sky-400 glow-text">SILENT TECH</h1>
+        <span class="px-3 py-1 bg-sky-500/20 text-sky-300 text-sm rounded-full border border-sky-500/30">v1.0.0 Live</span>
+    </header>
+    <main class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-8">
+        <!-- DOCUMENTATION COLUMN -->
+        <section class="flex flex-col gap-6">
+            <div class="glass-panel p-6 rounded-2xl">
+                <h2 class="text-xl font-semibold text-white mb-2">Arena Generation API</h2>
+                <p class="text-sm text-slate-400 mb-6">Bypass Cloudflare and generate media seamlessly through the Silent Tech engine.</p>
+                <div class="mb-4">
+                    <span class="px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs font-bold mr-2">POST</span>
+                    <code class="text-sky-300">/api/generate</code>
+                </div>
+                <h3 class="text-sm font-semibold text-slate-300 mb-2 mt-6">Request Body (JSON)</h3>
+                <pre class="bg-slate-900 p-4 rounded-lg border border-slate-700 text-sm text-sky-200 overflow-x-auto">
+{
+  "prompt": "A futuristic car running on water"
+}</pre>
+            </div>
+        </section>
+        <!-- INTERACTIVE TESTER COLUMN -->
+        <section class="flex flex-col gap-6">
+            <div class="glass-panel p-6 rounded-2xl">
+                <h2 class="text-xl font-semibold text-white mb-4 flex items-center gap-2">
+                    <svg class="w-5 h-5 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    Interactive Explorer
+                </h2>
+                <label class="block text-sm font-medium text-slate-400 mb-2">Prompt</label>
+                <input type="text" id="promptInput" value="A futuristic car running on water" class="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-sky-500 mb-4 transition-colors">
+                <button id="execBtn" onclick="executeApi()" class="w-full bg-sky-500 hover:bg-sky-400 text-slate-900 font-bold py-3 px-4 rounded-lg transition-all shadow-[0_0_15px_rgba(56,189,248,0.3)]">
+                    Execute Request
+                </button>
+                <div id="loader" class="hidden mt-6 text-center text-sky-400 text-sm font-medium animate-pulse">
+                    [ SILENT ENGINE ] Bypassing Cloudflare... Executing Render...
+                </div>
+                <div id="responseBox" class="hidden mt-6">
+                    <h3 class="text-sm font-semibold text-slate-400 mb-2">Server Response:</h3>
+                    <pre id="jsonOutput" class="bg-slate-900 p-4 rounded-lg border border-slate-700 text-xs text-green-400 overflow-x-auto whitespace-pre-wrap"></pre>
+                    <div id="mediaContainer" class="mt-4 rounded-lg overflow-hidden border border-slate-700 hidden">
+                        <!-- Media will render here -->
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="mt-12 text-center text-slate-600 text-sm">
+        &copy; 2026 Silent Tech API. Powered by advanced web interception.
+    </footer>
+    <script>
+        async function executeApi() {
+            const prompt = document.getElementById('promptInput').value;
+            const btn = document.getElementById('execBtn');
+            const loader = document.getElementById('loader');
+            const responseBox = document.getElementById('responseBox');
+            const jsonOutput = document.getElementById('jsonOutput');
+            const mediaContainer = document.getElementById('mediaContainer');
+            btn.disabled = true;
+            btn.classList.add('opacity-50');
+            loader.classList.remove('hidden');
+            responseBox.classList.add('hidden');
+            mediaContainer.classList.add('hidden');
+            try {
+                const start = Date.now();
+                const res = await fetch('/api/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ prompt })
+                });
+                const data = await res.json();
+                const timeTaken = ((Date.now() - start) / 1000).toFixed(1) + 's';
+                jsonOutput.innerHTML = `// Status: ${res.status}\n// Time: ${timeTaken}\n\n` + JSON.stringify(data, null, 2);
+                responseBox.classList.remove('hidden');
+                if (data.success && data.url) {
+                    mediaContainer.classList.remove('hidden');
+                    if (data.url.endsWith('.mp4')) {
+                        mediaContainer.innerHTML = `<video controls autoplay loop class="w-full"><source src="${data.url}" type="video/mp4"></video>`;
+                    } else {
+                        mediaContainer.innerHTML = `<img src="${data.url}" class="w-full object-cover">`;
+                    }
+                }
+            } catch (err) {
+                jsonOutput.innerHTML = `// Fatal Error\n\n${err.message}`;
+                responseBox.classList.remove('hidden');
+            } finally {
+                btn.disabled = false;
+                btn.classList.remove('opacity-50');
+                loader.classList.add('hidden');
+            }
+        }
+    </script>
+</body>
+</html>