Hugging Face's logo

Spaces:
mgbam
/
builder
Running

App Files Community
mgbam commited on
Commit
7c31000
·
verified ·
1 Parent(s): a258a4f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +105 -142
index.html CHANGED
@@ -1,142 +1,105 @@
1
- /* ----------------------------------------------------------
2
- AnyCoder AI – global dark‑mode theme (readable version)
3
- ---------------------------------------------------------- */
4
- :root{
5
- --bg: #0d1117;
6
- --bg-secondary: #1e2228; /* brighter than before */
7
- --input-bg: #f5f7fa; /* light surface for inputs */
8
- --input-text: #0d1117; /* dark text inside light inputs */
9
- --border: #30363d;
10
- --text: #c9d1d9;
11
- --text-muted: #8b949e;
12
- --accent: #58a6ff;
13
- --accent-hover: #79c0ff;
14
- --font-mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
15
- --radius: 8px;
16
- --transition: .2s ease;
17
- }
18
-
19
- /* ----- reset ------------------------------------------------- */
20
- *{box-sizing:border-box;margin:0;padding:0}
21
- body{
22
- font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
23
- background:var(--bg);
24
- color:var(--text);
25
- line-height:1.6;
26
- padding:1rem;
27
- }
28
-
29
- /* ----- layout containers ------------------------------------- */
30
- header{ text-align:center;margin-bottom:2rem }
31
- header h1{ font-size:2.5rem;margin-bottom:.5rem }
32
- header p { color:var(--text-muted);font-size:1.1rem }
33
-
34
- main{
35
- max-width:900px;
36
- margin:0 auto;
37
- display:grid;
38
- gap:2rem;
39
- }
40
-
41
- section{
42
- background:var(--bg-secondary);
43
- border:1px solid var(--border);
44
- border-radius:var(--radius);
45
- padding:1.5rem;
46
- box-shadow:0 4px 12px rgba(0,0,0,.25);
47
- }
48
-
49
- h2{ font-size:1.25rem;margin-bottom:1rem }
50
- label{ display:block;margin-bottom:.5rem;font-weight:600 }
51
-
52
- /* ----- form controls ----------------------------------------- */
53
- select,
54
- input[type="file"],
55
- input[type="url"],
56
- textarea{
57
- width:100%;
58
- padding:.75rem;
59
- border:1px solid var(--border);
60
- border-radius:var(--radius);
61
- background:var(--input-bg);
62
- color:var(--input-text);
63
- font-size:1rem;
64
- transition:border-color var(--transition);
65
- }
66
- select:focus,
67
- input:focus,
68
- textarea:focus{ outline:none;border-color:var(--accent) }
69
-
70
- textarea{
71
- resize:vertical;
72
- min-height:120px;
73
- font-family:var(--font-mono);
74
- }
75
-
76
- /* ----- tabs -------------------------------------------------- */
77
- .tabs{ display:flex;gap:.5rem;margin-bottom:1rem }
78
- .tabs button{
79
- background:transparent;
80
- border:1px solid var(--border);
81
- border-radius:var(--radius);
82
- padding:.5rem 1rem;
83
- color:var(--text-muted);
84
- cursor:pointer;
85
- transition:background var(--transition),color var(--transition);
86
- }
87
- .tabs button[aria-selected="true"]{
88
- background:var(--accent);
89
- color:var(--bg);
90
- border-color:var(--accent);
91
- }
92
- .tabs button:hover:not([aria-selected="true"]){
93
- background:var(--border);
94
- color:var(--text);
95
- }
96
-
97
- /* ----- misc -------------------------------------------------- */
98
- .search-toggle{ display:flex;align-items:center;gap:.5rem;margin-top:1rem }
99
-
100
- .actions{ display:flex;gap:1rem;justify-content:flex-end }
101
- button{
102
- padding:.75rem 1.5rem;
103
- border:none;
104
- border-radius:var(--radius);
105
- font-size:1rem;
106
- cursor:pointer;
107
- transition:background var(--transition);
108
- }
109
- #clear{ background:var(--border);color:var(--text) }
110
- #clear:hover{ background:var(--text-muted) }
111
- #generate{ background:var(--accent);color:var(--bg) }
112
- #generate:hover{ background:var(--accent-hover) }
113
-
114
- pre{
115
- background:var(--bg);
116
- border:1px solid var(--border);
117
- border-radius:var(--radius);
118
- padding:1rem;
119
- overflow-x:auto;
120
- font-family:var(--font-mono);
121
- font-size:.9rem;
122
- }
123
-
124
- iframe{
125
- width:100%;
126
- height:400px;
127
- border:1px solid var(--border);
128
- border-radius:var(--radius);
129
- background:#fff;
130
- }
131
-
132
- .visually-hidden{
133
- position:absolute;width:1px;height:1px;overflow:hidden;
134
- clip:rect(0 0 0 0);white-space:nowrap;
135
- }
136
-
137
- /* ----- mobile tweaks ---------------------------------------- */
138
- @media(max-width:600px){
139
- body{ padding:.5rem }
140
- header h1{ font-size:2rem }
141
- .actions{ flex-direction:column }
142
- }
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>AnyCoder AI Code Generator</title>
7
+ <meta name="description"
8
+ content="Generate, modify, and understand code with the most advanced AI models." />
9
+
10
+ <!-- global stylesheet -->
11
+ <link rel="stylesheet" href="/static/style.css" />
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <h1>🚀 AnyCoder AI</h1>
16
+ <p>Your AI partner for generating, modifying, and understanding code.</p>
17
+ </header>
18
+
19
+ <main>
20
+ <!-- 1 · Model -->
21
+ <section aria-labelledby="model-selection">
22
+ <h2 id="model-selection">1. Select Model</h2>
23
+ <label for="model" class="visually-hidden">AI Model</label>
24
+ <select id="model"></select>
25
+ </section>
26
+
27
+ <!-- 2 · Context -->
28
+ <section aria-labelledby="context-input">
29
+ <h2 id="context-input">2. Provide Context</h2>
30
+
31
+ <div class="tabs" role="tablist">
32
+ <button role="tab" aria-selected="true"
33
+ id="tab-prompt" aria-controls="panel-prompt">Prompt</button>
34
+ <button role="tab" aria-selected="false"
35
+ id="tab-file" aria-controls="panel-file">File</button>
36
+ <button role="tab" aria-selected="false"
37
+ id="tab-website" aria-controls="panel-website">Website</button>
38
+ </div>
39
+
40
+ <div role="tabpanel" id="panel-prompt">
41
+ <textarea id="prompt" placeholder="Describe what you want to build…"
42
+ aria-label="Prompt input"></textarea>
43
+ </div>
44
+
45
+ <div role="tabpanel" id="panel-file" hidden>
46
+ <label for="reference-file">Reference File</label>
47
+ <input type="file" id="reference-file" accept=".pdf,.docx,.txt" />
48
+ </div>
49
+
50
+ <div role="tabpanel" id="panel-website" 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 · 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"></select> <!-- filled by JS -->
61
+
62
+ <div class="search-toggle">
63
+ <input type="checkbox" id="web-search" />
64
+ <label for="web-search">Enable Web Search</label>
65
+ </div>
66
+ </section>
67
+
68
+ <!-- actions -->
69
+ <section class="actions">
70
+ <button id="clear" type="button">Clear Session</button>
71
+ <button id="generate" type="button">Generate Code</button>
72
+ </section>
73
+
74
+ <!-- output -->
75
+ <section aria-labelledby="output-tabs">
76
+ <h2 id="output-tabs" class="visually-hidden">Output area</h2>
77
+
78
+ <div class="tabs" role="tablist">
79
+ <button role="tab" aria-selected="true"
80
+ id="tab-code" aria-controls="panel-code">Code</button>
81
+ <button role="tab" aria-selected="false"
82
+ id="tab-preview" aria-controls="panel-preview">Live Preview</button>
83
+ <button role="tab" aria-selected="false"
84
+ id="tab-history" aria-controls="panel-history">History</button>
85
+ </div>
86
+
87
+ <div role="tabpanel" id="panel-code">
88
+ <pre><code id="code-output" class="language-html"></code></pre>
89
+ </div>
90
+
91
+ <div role="tabpanel" id="panel-preview" hidden>
92
+ <iframe id="preview" title="Live preview"
93
+ sandbox="allow-scripts allow-same-origin"></iframe>
94
+ </div>
95
+
96
+ <div role="tabpanel" id="panel-history" hidden>
97
+ <ul id="history-list" aria-live="polite"></ul>
98
+ </div>
99
+ </section>
100
+ </main>
101
+
102
+ <!-- front‑end logic -->
103
+ <script type="module" src="/static/index.js"></script>
104
+ </body>
105
+ </html>