Hugging Face's logo

Spaces:
luguog
/
anycoder-4d476bdf
Running

App Files Community
luguog commited on
Commit
c8ae43c
·
verified ·
1 Parent(s): 900e950

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +289 -18
style.css CHANGED
@@ -1,28 +1,299 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --bg-primary: #0d1117;
3
+ --bg-secondary: #161b22;
4
+ --bg-tertiary: #21262d;
5
+ --text-primary: #c9d1d9;
6
+ --text-secondary: #8b949e;
7
+ --accent-primary: #58a6ff;
8
+ --accent-success: #3fb950;
9
+ --accent-error: #f85149;
10
+ --border-color: #30363d;
11
+ }
12
+
13
+ * {
14
+ margin: 0;
15
+ padding: 0;
16
+ box-sizing: border-box;
17
+ }
18
+
19
  body {
20
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
21
+ background-color: var(--bg-primary);
22
+ color: var(--text-primary);
23
+ line-height: 1.5;
24
+ }
25
+
26
+ .container {
27
+ max-width: 1200px;
28
+ margin: 0 auto;
29
+ padding: 2rem;
30
+ min-height: 100vh;
31
+ display: flex;
32
+ flex-direction: column;
33
+ }
34
+
35
+ header {
36
+ text-align: center;
37
+ margin-bottom: 2rem;
38
+ }
39
+
40
+ header h1 {
41
+ font-size: 2.5rem;
42
+ font-weight: 700;
43
+ margin-bottom: 0.5rem;
44
+ }
45
+
46
+ .subtitle {
47
+ color: var(--text-secondary);
48
+ font-size: 1.1rem;
49
+ margin-bottom: 1rem;
50
+ }
51
+
52
+ .attribution a {
53
+ display: inline-block;
54
+ padding: 0.5rem 1rem;
55
+ background-color: var(--bg-secondary);
56
+ color: var(--accent-primary);
57
+ text-decoration: none;
58
+ border-radius: 6px;
59
+ font-size: 0.9rem;
60
+ font-weight: 500;
61
+ transition: all 0.2s;
62
+ }
63
+
64
+ .attribution a:hover {
65
+ background-color: var(--bg-tertiary);
66
+ text-decoration: underline;
67
+ }
68
+
69
+ main {
70
+ flex: 1;
71
  }
72
 
73
+ .input-section {
74
+ background-color: var(--bg-secondary);
75
+ padding: 1.5rem;
76
+ border-radius: 8px;
77
+ border: 1px solid var(--border-color);
78
+ margin-bottom: 2rem;
79
  }
80
 
81
+ .input-section label {
82
+ display: block;
83
+ margin-bottom: 0.5rem;
84
+ font-weight: 500;
85
+ color: var(--text-primary);
86
  }
87
 
88
+ textarea {
89
+ width: 100%;
90
+ padding: 0.75rem;
91
+ background-color: var(--bg-primary);
92
+ color: var(--text-primary);
93
+ border: 1px solid var(--border-color);
94
+ border-radius: 6px;
95
+ font-size: 1rem;
96
+ font-family: inherit;
97
+ resize: vertical;
98
+ transition: border-color 0.2s;
99
  }
100
 
101
+ textarea:focus {
102
+ outline: none;
103
+ border-color: var(--accent-primary);
104
  }
105
+
106
+ .controls {
107
+ display: flex;
108
+ justify-content: space-between;
109
+ align-items: flex-end;
110
+ margin-top: 1rem;
111
+ gap: 1rem;
112
+ }
113
+
114
+ .language-selector {
115
+ flex: 1;
116
+ }
117
+
118
+ .language-selector label {
119
+ display: inline-block;
120
+ margin-right: 0.5rem;
121
+ margin-bottom: 0;
122
+ }
123
+
124
+ select {
125
+ padding: 0.5rem 0.75rem;
126
+ background-color: var(--bg-primary);
127
+ color: var(--text-primary);
128
+ border: 1px solid var(--border-color);
129
+ border-radius: 6px;
130
+ font-size: 0.95rem;
131
+ }
132
+
133
+ .generate-btn {
134
+ padding: 0.75rem 2rem;
135
+ background-color: var(--accent-primary);
136
+ color: white;
137
+ border: none;
138
+ border-radius: 6px;
139
+ font-size: 1rem;
140
+ font-weight: 600;
141
+ cursor: pointer;
142
+ transition: all 0.2s;
143
+ display: flex;
144
+ align-items: center;
145
+ gap: 0.5rem;
146
+ min-width: 150px;
147
+ justify-content: center;
148
+ }
149
+
150
+ .generate-btn:hover:not(:disabled) {
151
+ background-color: #4493f8;
152
+ }
153
+
154
+ .generate-btn:disabled {
155
+ opacity: 0.6;
156
+ cursor: not-allowed;
157
+ }
158
+
159
+ .btn-spinner {
160
+ width: 16px;
161
+ height: 16px;
162
+ border: 2px solid transparent;
163
+ border-top: 2px solid white;
164
+ border-radius: 50%;
165
+ animation: spin 1s linear infinite;
166
+ }
167
+
168
+ @keyframes spin {
169
+ 0% { transform: rotate(0deg); }
170
+ 100% { transform: rotate(360deg); }
171
+ }
172
+
173
+ .loading-section {
174
+ background-color: var(--bg-secondary);
175
+ padding: 2rem;
176
+ border-radius: 8px;
177
+ border: 1px solid var(--border-color);
178
+ text-align: center;
179
+ margin-bottom: 2rem;
180
+ }
181
+
182
+ .progress-container {
183
+ width: 100%;
184
+ height: 8px;
185
+ background-color: var(--bg-primary);
186
+ border-radius: 4px;
187
+ overflow: hidden;
188
+ margin-bottom: 1rem;
189
+ }
190
+
191
+ .progress-bar {
192
+ height: 100%;
193
+ background-color: var(--accent-primary);
194
+ width: 0%;
195
+ transition: width 0.3s ease;
196
+ }
197
+
198
+ .loading-text {
199
+ color: var(--text-secondary);
200
+ }
201
+
202
+ .error-section {
203
+ background-color: rgba(248, 81, 73, 0.1);
204
+ border: 1px solid var(--accent-error);
205
+ padding: 1rem;
206
+ border-radius: 8px;
207
+ margin-bottom: 2rem;
208
+ }
209
+
210
+ .error-text {
211
+ color: var(--accent-error);
212
+ }
213
+
214
+ .output-section {
215
+ background-color: var(--bg-secondary);
216
+ border-radius: 8px;
217
+ border: 1px solid var(--border-color);
218
+ overflow: hidden;
219
+ }
220
+
221
+ .output-header {
222
+ display: flex;
223
+ justify-content: space-between;
224
+ align-items: center;
225
+ padding: 1rem 1.5rem;
226
+ background-color: var(--bg-tertiary);
227
+ border-bottom: 1px solid var(--border-color);
228
+ }
229
+
230
+ .output-header span {
231
+ font-weight: 600;
232
+ color: var(--text-primary);
233
+ }
234
+
235
+ .copy-btn {
236
+ padding: 0.5rem 1rem;
237
+ background-color: var(--bg-primary);
238
+ color: var(--text-primary);
239
+ border: 1px solid var(--border-color);
240
+ border-radius: 6px;
241
+ cursor: pointer;
242
+ font-size: 0.9rem;
243
+ transition: all 0.2s;
244
+ }
245
+
246
+ .copy-btn:hover {
247
+ background-color: var(--accent-primary);
248
+ color: white;
249
+ border-color: var(--accent-primary);
250
+ }
251
+
252
+ pre {
253
+ margin: 0;
254
+ padding: 1.5rem;
255
+ overflow-x: auto;
256
+ background-color: var(--bg-primary) !important;
257
+ }
258
+
259
+ code {
260
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
261
+ font-size: 0.9rem;
262
+ }
263
+
264
+ footer {
265
+ text-align: center;
266
+ margin-top: 2rem;
267
+ padding-top: 2rem;
268
+ border-top: 1px solid var(--border-color);
269
+ color: var(--text-secondary);
270
+ font-size: 0.9rem;
271
+ }
272
+
273
+ footer a {
274
+ color: var(--accent-primary);
275
+ text-decoration: none;
276
+ }
277
+
278
+ footer a:hover {
279
+ text-decoration: underline;
280
+ }
281
+
282
+ @media (max-width: 768px) {
283
+ .container {
284
+ padding: 1rem;
285
+ }
286
+
287
+ header h1 {
288
+ font-size: 2rem;
289
+ }
290
+
291
+ .controls {
292
+ flex-direction: column;
293
+ align-items: stretch;
294
+ }
295
+
296
+ .generate-btn {
297
+ width: 100%;
298
+ }
299
+ }