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