Hugging Face's logo

Spaces:
mgbam
/
builder
Running

App Files Community
mgbam commited on
Commit
a59b2b4
·
verified ·
1 Parent(s): ccc5332

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +236 -98
static/index.html CHANGED
@@ -1,98 +1,236 @@
1
- <!-- index.html -->
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
-
8
- <!-- Title & SEO -->
9
- <title>AnyCoder AI Code Generator</title>
10
- <meta
11
- name="description"
12
- content="Generate, modify, and understand code with the most advanced AI models."
13
- />
14
-
15
- <!-- External CSS -->
16
- <link rel="stylesheet" href="/static/style.css" />
17
- </head>
18
-
19
- <body>
20
- <!-- ────────────── Header ────────────── -->
21
- <header>
22
- <h1>🚀 AnyCoder AI</h1>
23
- <p>Your AI partner for generating, modifying, and understanding code.</p>
24
- </header>
25
-
26
- <!-- ────────────── Main UI ────────────── -->
27
- <main>
28
- <!-- 1‑ Select Model -->
29
- <section aria-labelledby="model-selection">
30
- <h2 id="model-selection">1. Select Model</h2>
31
- <label class="visually-hidden" for="model">AI Model</label>
32
- <select id="model"></select>
33
- </section>
34
-
35
- <!-- 2‑ Provide Context -->
36
- <section aria-labelledby="context-input">
37
- <h2 id="context-input">2. Provide Context</h2>
38
-
39
- <div class="tabs" role="tablist">
40
- <button role="tab" id="tab-prompt" aria-controls="panel-prompt" aria-selected="true">Prompt</button>
41
- <button role="tab" id="tab-file" aria-controls="panel-file" aria-selected="false">File</button>
42
- <button role="tab" id="tab-website" aria-controls="panel-website" aria-selected="false">Website</button>
43
- </div>
44
-
45
- <div id="panel-prompt" role="tabpanel"><textarea id="prompt" placeholder="Describe what you want to build…"></textarea></div>
46
- <div id="panel-file" role="tabpanel" hidden>
47
- <label for="reference-file">Reference File</label>
48
- <input type="file" id="reference-file" accept=".pdf,.docx,.txt" />
49
- </div>
50
- <div id="panel-website" role="tabpanel" hidden>
51
- <label for="website-url">Website URL</label>
52
- <input type="url" id="website-url" placeholder="https://example.com" />
53
- </div>
54
- </section>
55
-
56
- <!-- 3‑ Configure Output -->
57
- <section aria-labelledby="output-config">
58
- <h2 id="output-config">3. Configure Output</h2>
59
- <label for="language">Target Language</label>
60
- <select id="language">
61
- <option value="html">HTML</option>
62
- <option value="python">Python</option>
63
- <option value="javascript">JavaScript</option>
64
- <option value="transformers.js">Transformers.js</option>
65
- </select>
66
-
67
- <div class="search-toggle">
68
- <input type="checkbox" id="web-search" />
69
- <label for="web-search">Enable Web Search</label>
70
- </div>
71
- </section>
72
-
73
- <!-- Actions -->
74
- <section class="actions">
75
- <button id="clear" type="button">Clear Session</button>
76
- <button id="generate" type="button">Generate Code</button>
77
- </section>
78
-
79
- <!-- 4‑ Output Tabs -->
80
- <section aria-labelledby="output-tabs">
81
- <h2 id="output-tabs" class="visually-hidden">Output</h2>
82
-
83
- <div class="tabs" role="tablist">
84
- <button role="tab" id="tab-code" aria-controls="panel-code" aria-selected="true">Code</button>
85
- <button role="tab" id="tab-preview" aria-controls="panel-preview" aria-selected="false">Live Preview</button>
86
- <button role="tab" id="tab-history" aria-controls="panel-history" aria-selected="false">History</button>
87
- </div>
88
-
89
- <div id="panel-code" role="tabpanel"><pre><code id="code-output">&lt;/&gt;</code></pre></div>
90
- <div id="panel-preview" role="tabpanel" hidden><iframe id="preview" title="Live preview" sandbox="allow-scripts allow-same-origin"></iframe></div>
91
- <div id="panel-history" role="tabpanel" hidden><ul id="history-list" aria-live="polite"></ul></div>
92
- </section>
93
- </main>
94
-
95
- <!-- External JavaScript (ES module) -->
96
- <script type="module" src="/static/index.js"></script>
97
- </body>
98
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* static/style.css */
2
+ /* ---------------------------------------------------------
3
+ AnyCoder AI – global theme and responsive layout
4
+ ---------------------------------------------------------- */
5
+
6
+ :root {
7
+ --bg: #0d1117;
8
+ --bg-secondary: #161b22;
9
+ --border: #30363d;
10
+ --text: #c9d1d9;
11
+ --text-muted: #8b949e;
12
+ --accent: #58a6ff;
13
+ --accent-hover: #79c0ff;
14
+ --danger: #f85149;
15
+ --success: #56d364;
16
+ --font-mono: "SFMono-Regular", Consolas, "Liberation Mono",
17
+ Menlo, monospace;
18
+ --radius: 8px;
19
+ --transition: 0.2s ease;
20
+ }
21
+
22
+ * {
23
+ box-sizing: border-box;
24
+ margin: 0;
25
+ padding: 0;
26
+ }
27
+
28
+ body {
29
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
30
+ Helvetica, Arial, sans-serif;
31
+ background: var(--bg);
32
+ color: var(--text);
33
+ line-height: 1.6;
34
+ padding: 1rem;
35
+ }
36
+
37
+ /* ------------------------------------------------------------------
38
+ Layout
39
+ ------------------------------------------------------------------- */
40
+
41
+ header {
42
+ text-align: center;
43
+ margin-bottom: 2rem;
44
+ }
45
+
46
+ header h1 {
47
+ font-size: 2.5rem;
48
+ margin-bottom: 0.5rem;
49
+ }
50
+
51
+ header p {
52
+ color: var(--text-muted);
53
+ font-size: 1.1rem;
54
+ }
55
+
56
+ main {
57
+ max-width: 900px;
58
+ margin: 0 auto;
59
+ display: grid;
60
+ gap: 2rem;
61
+ }
62
+
63
+ section {
64
+ background: var(--bg-secondary);
65
+ border: 1px solid var(--border);
66
+ border-radius: var(--radius);
67
+ padding: 1.5rem;
68
+ }
69
+
70
+ h2 {
71
+ font-size: 1.25rem;
72
+ margin-bottom: 1rem;
73
+ }
74
+
75
+ /* ------------------------------------------------------------------
76
+ Form controls
77
+ ------------------------------------------------------------------- */
78
+
79
+ label {
80
+ display: block;
81
+ margin-bottom: 0.5rem;
82
+ font-weight: 600;
83
+ }
84
+
85
+ select,
86
+ input[type="file"],
87
+ input[type="url"],
88
+ textarea {
89
+ width: 100%;
90
+ padding: 0.75rem;
91
+ border: 1px solid var(--border);
92
+ border-radius: var(--radius);
93
+ background: var(--bg);
94
+ color: var(--text);
95
+ font-size: 1rem;
96
+ transition: border-color var(--transition);
97
+ }
98
+
99
+ select:focus,
100
+ input:focus,
101
+ textarea:focus {
102
+ outline: none;
103
+ border-color: var(--accent);
104
+ }
105
+
106
+ textarea {
107
+ resize: vertical;
108
+ min-height: 120px;
109
+ font-family: var(--font-mono);
110
+ }
111
+
112
+ /* ------------------------------------------------------------------
113
+ Tabs
114
+ ------------------------------------------------------------------- */
115
+
116
+ .tabs {
117
+ display: flex;
118
+ gap: 0.5rem;
119
+ margin-bottom: 1rem;
120
+ }
121
+
122
+ .tabs button {
123
+ background: transparent;
124
+ border: 1px solid var(--border);
125
+ border-radius: var(--radius);
126
+ padding: 0.5rem 1rem;
127
+ color: var(--text-muted);
128
+ cursor: pointer;
129
+ transition: background var(--transition), color var(--transition);
130
+ }
131
+
132
+ .tabs button[aria-selected="true"] {
133
+ background: var(--accent);
134
+ color: var(--bg);
135
+ border-color: var(--accent);
136
+ }
137
+
138
+ .tabs button:hover:not([aria-selected="true"]) {
139
+ background: var(--border);
140
+ color: var(--text);
141
+ }
142
+
143
+ /* ------------------------------------------------------------------
144
+ Toggles & buttons
145
+ ------------------------------------------------------------------- */
146
+
147
+ .search-toggle {
148
+ display: flex;
149
+ align-items: center;
150
+ gap: 0.5rem;
151
+ margin-top: 1rem;
152
+ }
153
+
154
+ .actions {
155
+ display: flex;
156
+ gap: 1rem;
157
+ justify-content: flex-end;
158
+ }
159
+
160
+ button {
161
+ padding: 0.75rem 1.5rem;
162
+ border: none;
163
+ border-radius: var(--radius);
164
+ font-size: 1rem;
165
+ cursor: pointer;
166
+ transition: background var(--transition);
167
+ }
168
+
169
+ #clear {
170
+ background: var(--border);
171
+ color: var(--text);
172
+ }
173
+
174
+ #clear:hover {
175
+ background: var(--text-muted);
176
+ }
177
+
178
+ #generate {
179
+ background: var(--accent);
180
+ color: var(--bg);
181
+ }
182
+
183
+ #generate:hover {
184
+ background: var(--accent-hover);
185
+ }
186
+
187
+ /* ------------------------------------------------------------------
188
+ Output panels
189
+ ------------------------------------------------------------------- */
190
+
191
+ pre {
192
+ background: var(--bg);
193
+ border: 1px solid var(--border);
194
+ border-radius: var(--radius);
195
+ padding: 1rem;
196
+ overflow-x: auto;
197
+ font-family: var(--font-mono);
198
+ font-size: 0.9rem;
199
+ }
200
+
201
+ iframe {
202
+ width: 100%;
203
+ height: 400px;
204
+ border: 1px solid var(--border);
205
+ border-radius: var(--radius);
206
+ background: #fff;
207
+ }
208
+
209
+ /* ------------------------------------------------------------------
210
+ Accessibility helpers
211
+ ------------------------------------------------------------------- */
212
+
213
+ .visually-hidden {
214
+ position: absolute;
215
+ width: 1px;
216
+ height: 1px;
217
+ overflow: hidden;
218
+ clip: rect(0 0 0 0);
219
+ white-space: nowrap;
220
+ }
221
+
222
+ /* ------------------------------------------------------------------
223
+ Responsive
224
+ ------------------------------------------------------------------- */
225
+
226
+ @media (max-width: 600px) {
227
+ body {
228
+ padding: 0.5rem;
229
+ }
230
+ header h1 {
231
+ font-size: 2rem;
232
+ }
233
+ .actions {
234
+ flex-direction: column;
235
+ }
236
+ }