|
|
|
|
|
<!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 & 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> |
|
|
<h2>1. Select Model</h2> |
|
|
<select id="model" aria-label="AI Model"></select> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2>2. Provide Context</h2> |
|
|
<div class="tabs" role="tablist"> |
|
|
<button role="tab" id="tab‑prompt" aria-controls="panel‑prompt" aria-selected="true">Prompt</button> |
|
|
<button role="tab" id="tab‑file" aria-controls="panel‑file" aria-selected="false">File</button> |
|
|
<button role="tab" id="tab‑web" aria-controls="panel‑web" aria-selected="false">Website</button> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel‑prompt"> |
|
|
<textarea id="prompt" placeholder="Describe what you want to build…"></textarea> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel‑file" hidden> |
|
|
<label for="file">Reference file</label> |
|
|
<input id="file" type="file" accept=".pdf,.docx,.txt"> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel‑web" hidden> |
|
|
<label for="url">Website URL</label> |
|
|
<input id="url" type="url" placeholder="https://example.com"> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2>3. Configure Output</h2> |
|
|
<label for="lang">Target language</label> |
|
|
<select id="lang"></select> |
|
|
|
|
|
<div class="search"> |
|
|
<input id="search" type="checkbox"> |
|
|
<label for="search">Enable web search</label> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="actions"> |
|
|
<button id="clear">Clear session</button> |
|
|
<button id="gen">Generate code</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2 class="visually‑hidden">Output</h2> |
|
|
<div class="tabs" role="tablist"> |
|
|
<button role="tab" id="tab‑code" aria-controls="panel‑code" aria-selected="true">Code</button> |
|
|
<button role="tab" id="tab‑preview" aria-controls="panel‑preview" aria-selected="false">Live Preview</button> |
|
|
<button role="tab" id="tab‑hist" aria-controls="panel‑hist" aria-selected="false">History</button> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel‑code"> |
|
|
<pre><code id="code"></code></pre> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel‑preview" hidden> |
|
|
<iframe id="preview" sandbox="allow-scripts allow-same-origin"></iframe> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel‑hist" hidden> |
|
|
<ul id="hist" aria-live="polite"></ul> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<script type="module" src="file=/static/index.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
