|
|
<!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="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" name="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"> |
|
|
<option value="python">Python</option> |
|
|
<option value="c">C</option> |
|
|
<option value="cpp">C++</option> |
|
|
<option value="markdown">Markdown</option> |
|
|
<option value="latex">LaTeX</option> |
|
|
<option value="json">JSON</option> |
|
|
<option value="html">HTML</option> |
|
|
<option value="css">CSS</option> |
|
|
<option value="javascript">JavaScript</option> |
|
|
<option value="jinja2">Jinja2</option> |
|
|
<option value="typescript">TypeScript</option> |
|
|
<option value="yaml">YAML</option> |
|
|
<option value="dockerfile">Dockerfile</option> |
|
|
<option value="shell">Shell</option> |
|
|
<option value="r">R</option> |
|
|
<option value="sql">SQL (generic)</option> |
|
|
<option value="sql-msSQL">SQL - MS SQL</option> |
|
|
<option value="sql-mySQL">SQL - MySQL</option> |
|
|
<option value="sql-mariaDB">SQL - MariaDB</option> |
|
|
<option value="sql-sqlite">SQL - SQLite</option> |
|
|
<option value="sql-cassandra">SQL - Cassandra</option> |
|
|
<option value="sql-plSQL">SQL - PL/SQL</option> |
|
|
<option value="sql-hive">SQL - Hive</option> |
|
|
<option value="sql-pgSQL">SQL - PostgreSQL</option> |
|
|
<option value="sql-gql">SQL - GraphQL</option> |
|
|
<option value="sql-gpSQL">SQL - Greenplum</option> |
|
|
<option value="sql-sparkSQL">SQL - SparkSQL</option> |
|
|
<option value="sql-esper">SQL - Esper</option> |
|
|
</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</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 src="index.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
