|
|
|
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>AnyCoder AI Code Generator</title> |
|
|
<meta name="description" |
|
|
content="Generate, modify, and understand code with the most advanced AI models." /> |
|
|
|
|
|
<link rel="stylesheet" href="file=/static/style.css" /> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<h1>🚀 AnyCoder AI</h1> |
|
|
<p>Your AI partner for generating, modifying & understanding code.</p> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
|
|
|
<section aria-labelledby="model‑h"> |
|
|
<h2 id="model‑h">1. Select Model</h2> |
|
|
<label class="visually‑hidden" for="model">AI model</label> |
|
|
<select id="model"></select> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section aria-labelledby="context‑h"> |
|
|
<h2 id="context‑h">2. Provide Context</h2> |
|
|
|
|
|
<div class="tabs" role="tablist"> |
|
|
<button role="tab" id="tab‑prompt" aria-controls="pane‑prompt" aria-selected="true">Prompt</button> |
|
|
<button role="tab" id="tab‑file" aria-controls="pane‑file" aria-selected="false">File</button> |
|
|
<button role="tab" id="tab‑website" aria-controls="pane‑website" aria-selected="false">Website</button> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane‑prompt"> |
|
|
<textarea id="prompt" placeholder="Describe what you want to build…" |
|
|
aria-label="Prompt"></textarea> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane‑file" hidden> |
|
|
<label for="reference‑file">Reference file</label> |
|
|
<input id="reference‑file" type="file" accept=".pdf,.docx,.txt" /> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane‑website" hidden> |
|
|
<label for="website‑url">Website URL</label> |
|
|
<input id="website‑url" type="url" placeholder="https://example.com" /> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section aria-labelledby="output‑h"> |
|
|
<h2 id="output‑h">3. Configure Output</h2> |
|
|
<label for="language">Target language</label> |
|
|
<select id="language"></select> |
|
|
|
|
|
<div class="search‑toggle"> |
|
|
<input id="web‑search" type="checkbox" /> |
|
|
<label for="web‑search">Enable web search</label> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="actions"> |
|
|
<button id="clear" type="button">Clear session</button> |
|
|
<button id="generate" type="button">Generate code</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section aria-labelledby="panes‑h"> |
|
|
<h2 id="panes‑h" class="visually‑hidden">Output</h2> |
|
|
|
|
|
<div class="tabs" role="tablist"> |
|
|
<button role="tab" id="tab‑code" aria-controls="pane‑code" aria-selected="true">Code</button> |
|
|
<button role="tab" id="tab‑preview" aria-controls="pane‑preview" aria-selected="false">Live preview</button> |
|
|
<button role="tab" id="tab‑history" aria-controls="pane‑history" aria-selected="false">History</button> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane‑code"> |
|
|
<pre><code id="code‑out"></code></pre> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane‑preview" hidden> |
|
|
<iframe id="preview" sandbox="allow-scripts allow-same-origin"></iframe> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane‑history" hidden> |
|
|
<ul id="history‑list" aria-live="polite"></ul> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<script type="module" src="file=/static/index.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
