|
|
|
|
|
<!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 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="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…"></textarea> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane-file" hidden> |
|
|
<label for="file">Reference file</label> |
|
|
<input id="file" type="file" accept=".pdf,.docx,.txt"> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane-website" 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="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-hist" aria-controls="pane-hist" aria-selected="false">History</button> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane-code"> |
|
|
<pre><code id="code"></code></pre> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane-preview" hidden> |
|
|
<iframe id="preview" title="Live preview" |
|
|
sandbox="allow-scripts allow-same-origin"></iframe> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="pane-hist" hidden> |
|
|
<ul id="hist" aria-live="polite"></ul> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<script type="module" src="file=static/index.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
