<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon"> <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon"> <title>fabric</title> <link rel="shortcut icon" type="image/x-icon" href="https://beehiiv-images-production.s3.amazonaws.com/uploads/asset/file/971f362a-f3fa-427f-b619-7e04cc135d17/fabric-logo-miessler-transparent.png?t=1704525002" /> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-gray-900 text-white min-h-screen"> <div class="container mx-auto py-10 px-4"> <div class="flex justify-between items-center mb-6"> <!-- Add this line inside the div with class "flex justify-between items-center mb-6" --> <p><img src="static/fabric-logo-miessler-transparent.png" alt="fabric logo" class="h-20 w-auto mr-2"></p> <h1 class="text-4xl font-bold"><code>fabric</code></h1> </div> <p>Enter your content and the API you want to send it to.</p> <br /> <form method="POST" class="space-y-4"> <div> <label for="prompt" class="block text-sm font-medium">Content:</label> <input type="text" id="prompt" name="prompt" required class="w-full px-3 py-2 border border-gray-300 rounded-md text-black"> </div> <div> <label for="api" class="block text-sm font-medium">API:</label> <select id="api" name="api" class="w-full px-3 py-2 border border-gray-300 rounded-md text-black"> <option value="/extwis">/extwis</option> <!-- Add more API endpoints here... --> </select> </div> <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-white font-medium">Submit</button> </form> {% if response %} <div class="mt-8"> <div class="flex justify-between items-center mb-4"> <h2 class="text-2xl font-bold">Response:</h2> <button id="copy-button" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md">Copy</button> </div> <pre id="response-output" class="bg-gray-800 p-4 rounded-md whitespace-pre-wrap">{{ response }}</pre> </div> {% endif %} </div> <script> document.getElementById("api").addEventListener("change", function() { document.getElementById("response-output").textContent = ""; }); document.getElementById("copy-button").addEventListener("click", function() { const responseOutput = document.getElementById("response-output"); const range = document.createRange(); range.selectNode(responseOutput); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand("copy"); window.getSelection().removeAllRanges(); }); </script> </body> </html>