|
|
<!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="/static/style.css" /> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<h1>🚀 AnyCoder AI</h1> |
|
|
<p>Your AI partner for generating, modifying, and understanding code.</p> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
|
|
|
<section aria-labelledby="model-selection"> |
|
|
<h2 id="model-selection">1. Select Model</h2> |
|
|
<label for="model" class="visually-hidden">AI Model</label> |
|
|
<select id="model"></select> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section aria-labelledby="context-input"> |
|
|
<h2 id="context-input">2. Provide Context</h2> |
|
|
|
|
|
<div class="tabs" role="tablist"> |
|
|
<button role="tab" aria-selected="true" |
|
|
id="tab-prompt" aria-controls="panel-prompt">Prompt</button> |
|
|
<button role="tab" aria-selected="false" |
|
|
id="tab-file" aria-controls="panel-file">File</button> |
|
|
<button role="tab" aria-selected="false" |
|
|
id="tab-website" aria-controls="panel-website">Website</button> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel-prompt"> |
|
|
<textarea id="prompt" placeholder="Describe what you want to build…" |
|
|
aria-label="Prompt input"></textarea> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel-file" hidden> |
|
|
<label for="reference-file">Reference File</label> |
|
|
<input type="file" id="reference-file" accept=".pdf,.docx,.txt" /> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel-website" hidden> |
|
|
<label for="website-url">Website URL</label> |
|
|
<input type="url" id="website-url" placeholder="https://example.com" /> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section aria-labelledby="output-config"> |
|
|
<h2 id="output-config">3. Configure Output</h2> |
|
|
<label for="language">Target Language</label> |
|
|
<select id="language"></select> |
|
|
|
|
|
<div class="search-toggle"> |
|
|
<input type="checkbox" id="web-search" /> |
|
|
<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="output-tabs"> |
|
|
<h2 id="output-tabs" class="visually-hidden">Output area</h2> |
|
|
|
|
|
<div class="tabs" role="tablist"> |
|
|
<button role="tab" aria-selected="true" |
|
|
id="tab-code" aria-controls="panel-code">Code</button> |
|
|
<button role="tab" aria-selected="false" |
|
|
id="tab-preview" aria-controls="panel-preview">Live Preview</button> |
|
|
<button role="tab" aria-selected="false" |
|
|
id="tab-history" aria-controls="panel-history">History</button> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel-code"> |
|
|
<pre><code id="code-output" class="language-html"></code></pre> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel-preview" hidden> |
|
|
<iframe id="preview" title="Live preview" |
|
|
sandbox="allow-scripts allow-same-origin"></iframe> |
|
|
</div> |
|
|
|
|
|
<div role="tabpanel" id="panel-history" hidden> |
|
|
<ul id="history-list" aria-live="polite"></ul> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<script type="module" src="/static/index.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
