File size: 4,069 Bytes
c0b43a6 b07d55c 0d7841a c0b43a6 0d7841a c0b43a6 b07d55c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<!-- /static/index.html -->
<!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."
/>
<!-- one dark‑mode friendly stylesheet -->
<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 LAYOUT ───────────── -->
<main>
<!-- 1 · Model -->
<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>
<!-- 2 · Context -->
<section class="card" aria-labelledby="h‑context">
<h2 id="h‑context">2. Provide Context</h2>
<!-- tab buttons -->
<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>
<!-- tab panels -->
<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>
<!-- 3 · Output -->
<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>
<!-- 4 · Actions -->
<section class="actions">
<button id="clear" type="button">Clear Session</button>
<button id="generate" type="button" class="primary">Generate Code</button>
</section>
<!-- 5 · Output tabs -->
<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>
<!-- front‑end logic -->
<script type="module" src="/static/index.js"></script>
</body>
</html>
|