Hugging Face's logo

Spaces:
akhaliq
/
anycoder-be39978b
Running

App Files Community
akhaliq HF Staff commited on
Commit
96d67be
·
verified ·
1 Parent(s): dd17993

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +419 -50
style.css CHANGED
@@ -1,76 +1,445 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  * {
2
- box-sizing: border-box;
3
- padding: 0;
4
- margin: 0;
5
- font-family: sans-serif;
6
  }
7
 
8
- html,
9
  body {
10
- height: 100%;
 
 
 
 
11
  }
12
 
13
- body {
14
- padding: 32px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
 
17
- body,
18
- #container {
19
- display: flex;
20
- flex-direction: column;
21
- justify-content: center;
22
- align-items: center;
23
  }
24
 
25
- #container {
26
- position: relative;
27
- gap: 0.4rem;
 
28
 
29
- width: 640px;
30
- height: 640px;
31
- max-width: 100%;
32
- max-height: 100%;
33
 
34
- border: 2px dashed #D1D5DB;
35
- border-radius: 0.75rem;
36
- overflow: hidden;
37
- cursor: pointer;
38
- margin: 1rem;
 
 
 
 
 
 
 
 
 
39
 
40
- background-size: 100% 100%;
41
- background-position: center;
42
- background-repeat: no-repeat;
43
- font-size: 18px;
 
 
 
 
44
  }
45
 
46
- #upload {
47
- display: none;
 
 
 
 
 
 
48
  }
49
 
50
- svg {
51
- pointer-events: none;
 
 
52
  }
53
 
54
- #example {
55
- font-size: 14px;
56
- text-decoration: underline;
57
- cursor: pointer;
58
  }
59
 
60
- #example:hover {
61
- color: #2563EB;
 
 
62
  }
63
 
64
- .bounding-box {
65
- position: absolute;
66
- box-sizing: border-box;
67
- border: solid 2px;
 
68
  }
69
 
70
- .bounding-box-label {
71
- color: white;
72
- position: absolute;
73
- font-size: 12px;
74
- margin: -16px 0 0 -2px;
75
- padding: 1px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
 
1
+ :root {
2
+ --primary-color: #007AFF;
3
+ --primary-hover: #0051D5;
4
+ --background: #F2F2F7;
5
+ --surface: #FFFFFF;
6
+ --surface-secondary: #F9F9F9;
7
+ --text-primary: #1C1C1E;
8
+ --text-secondary: #8E8E93;
9
+ --border-color: #C6C6C8;
10
+ --user-bubble: #007AFF;
11
+ --assistant-bubble: #E5E5EA;
12
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
13
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
14
+ --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
15
+ --radius: 12px;
16
+ --radius-sm: 8px;
17
+ }
18
+
19
  * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
 
23
  }
24
 
 
25
  body {
26
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
27
+ background: var(--background);
28
+ color: var(--text-primary);
29
+ height: 100vh;
30
+ overflow: hidden;
31
  }
32
 
33
+ .app-container {
34
+ height: 100vh;
35
+ display: flex;
36
+ flex-direction: column;
37
+ }
38
+
39
+ .header {
40
+ background: var(--surface);
41
+ border-bottom: 1px solid var(--border-color);
42
+ backdrop-filter: blur(20px);
43
+ -webkit-backdrop-filter: blur(20px);
44
+ background: rgba(255, 255, 255, 0.72);
45
+ }
46
+
47
+ .header-content {
48
+ max-width: 800px;
49
+ margin: 0 auto;
50
+ padding: 16px 20px;
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: space-between;
54
+ }
55
+
56
+ .app-info {
57
+ display: flex;
58
+ flex-direction: column;
59
+ gap: 2px;
60
+ }
61
+
62
+ .app-title {
63
+ font-size: 20px;
64
+ font-weight: 600;
65
+ color: var(--text-primary);
66
+ }
67
+
68
+ .app-subtitle {
69
+ font-size: 13px;
70
+ color: var(--text-secondary);
71
+ font-weight: 400;
72
+ }
73
+
74
+ .built-with {
75
+ font-size: 13px;
76
+ color: var(--text-secondary);
77
+ text-decoration: none;
78
+ padding: 6px 12px;
79
+ border-radius: var(--radius-sm);
80
+ transition: all 0.2s ease;
81
+ }
82
+
83
+ .built-with:hover {
84
+ background: var(--surface-secondary);
85
+ color: var(--primary-color);
86
+ }
87
+
88
+ .chat-container {
89
+ flex: 1;
90
+ display: flex;
91
+ flex-direction: column;
92
+ max-width: 800px;
93
+ width: 100%;
94
+ margin: 0 auto;
95
+ position: relative;
96
+ }
97
+
98
+ .messages-wrapper {
99
+ flex: 1;
100
+ overflow-y: auto;
101
+ padding: 20px;
102
+ display: flex;
103
+ flex-direction: column;
104
+ }
105
+
106
+ .messages {
107
+ display: flex;
108
+ flex-direction: column;
109
+ gap: 16px;
110
+ }
111
+
112
+ .welcome-message {
113
+ max-width: 600px;
114
+ margin: 0 auto 40px;
115
+ text-align: center;
116
+ padding: 40px 20px;
117
+ }
118
+
119
+ .welcome-content {
120
+ background: var(--surface);
121
+ border-radius: 20px;
122
+ padding: 40px;
123
+ box-shadow: var(--shadow-md);
124
+ }
125
+
126
+ .welcome-icon {
127
+ font-size: 48px;
128
+ margin-bottom: 16px;
129
+ }
130
+
131
+ .welcome-content h2 {
132
+ font-size: 24px;
133
+ font-weight: 600;
134
+ margin-bottom: 8px;
135
+ color: var(--text-primary);
136
+ }
137
+
138
+ .welcome-content > p {
139
+ font-size: 16px;
140
+ color: var(--text-secondary);
141
+ margin-bottom: 32px;
142
+ line-height: 1.5;
143
+ }
144
+
145
+ .example-prompts {
146
+ margin-top: 24px;
147
+ }
148
+
149
+ .examples-title {
150
+ font-size: 14px;
151
+ color: var(--text-secondary);
152
+ margin-bottom: 12px;
153
+ font-weight: 500;
154
+ }
155
+
156
+ .example-chips {
157
+ display: flex;
158
+ flex-wrap: wrap;
159
+ gap: 8px;
160
+ justify-content: center;
161
+ }
162
+
163
+ .example-chip {
164
+ background: var(--surface-secondary);
165
+ border: 1px solid var(--border-color);
166
+ color: var(--text-primary);
167
+ padding: 8px 16px;
168
+ border-radius: 20px;
169
+ font-size: 14px;
170
+ cursor: pointer;
171
+ transition: all 0.2s ease;
172
+ font-weight: 400;
173
+ }
174
+
175
+ .example-chip:hover {
176
+ background: var(--primary-color);
177
+ color: white;
178
+ border-color: var(--primary-color);
179
+ transform: translateY(-1px);
180
+ box-shadow: var(--shadow-sm);
181
+ }
182
+
183
+ .message {
184
+ display: flex;
185
+ gap: 12px;
186
+ animation: fadeInUp 0.3s ease;
187
+ }
188
+
189
+ @keyframes fadeInUp {
190
+ from {
191
+ opacity: 0;
192
+ transform: translateY(10px);
193
+ }
194
+ to {
195
+ opacity: 1;
196
+ transform: translateY(0);
197
+ }
198
+ }
199
+
200
+ .message.user {
201
+ flex-direction: row-reverse;
202
+ }
203
+
204
+ .message-avatar {
205
+ width: 32px;
206
+ height: 32px;
207
+ border-radius: 50%;
208
+ display: flex;
209
+ align-items: center;
210
+ justify-content: center;
211
+ font-size: 14px;
212
+ font-weight: 600;
213
+ flex-shrink: 0;
214
+ }
215
+
216
+ .message.user .message-avatar {
217
+ background: var(--user-bubble);
218
+ color: white;
219
+ }
220
+
221
+ .message.assistant .message-avatar {
222
+ background: var(--assistant-bubble);
223
+ color: var(--text-primary);
224
+ }
225
+
226
+ .message-content {
227
+ max-width: 70%;
228
+ background: var(--surface);
229
+ border-radius: var(--radius);
230
+ padding: 12px 16px;
231
+ box-shadow: var(--shadow-sm);
232
+ position: relative;
233
+ }
234
+
235
+ .message.user .message-content {
236
+ background: var(--user-bubble);
237
+ color: white;
238
+ }
239
+
240
+ .message-text {
241
+ font-size: 15px;
242
+ line-height: 1.4;
243
+ white-space: pre-wrap;
244
+ word-wrap: break-word;
245
+ }
246
+
247
+ .message.user .message-text {
248
+ font-weight: 500;
249
+ }
250
+
251
+ .typing-indicator {
252
+ display: flex;
253
+ gap: 4px;
254
+ padding: 8px 0;
255
+ }
256
+
257
+ .typing-dot {
258
+ width: 8px;
259
+ height: 8px;
260
+ background: var(--text-secondary);
261
+ border-radius: 50%;
262
+ animation: typing 1.4s infinite;
263
+ }
264
+
265
+ .typing-dot:nth-child(2) {
266
+ animation-delay: 0.2s;
267
+ }
268
+
269
+ .typing-dot:nth-child(3) {
270
+ animation-delay: 0.4s;
271
+ }
272
+
273
+ @keyframes typing {
274
+ 0%, 60%, 100% {
275
+ transform: translateY(0);
276
+ }
277
+ 30% {
278
+ transform: translateY(-10px);
279
+ }
280
+ }
281
+
282
+ .input-container {
283
+ padding: 20px;
284
+ background: var(--surface);
285
+ border-top: 1px solid var(--border-color);
286
+ }
287
+
288
+ .input-wrapper {
289
+ display: flex;
290
+ gap: 12px;
291
+ align-items: flex-end;
292
+ background: var(--surface-secondary);
293
+ border-radius: var(--radius);
294
+ padding: 8px;
295
+ border: 1px solid var(--border-color);
296
+ transition: all 0.2s ease;
297
+ }
298
+
299
+ .input-wrapper:focus-within {
300
+ border-color: var(--primary-color);
301
+ box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
302
+ }
303
+
304
+ .message-input {
305
+ flex: 1;
306
+ border: none;
307
+ background: transparent;
308
+ font-size: 15px;
309
+ font-family: inherit;
310
+ resize: none;
311
+ outline: none;
312
+ padding: 8px 12px;
313
+ max-height: 120px;
314
+ line-height: 1.4;
315
+ color: var(--text-primary);
316
+ }
317
+
318
+ .message-input::placeholder {
319
+ color: var(--text-secondary);
320
+ }
321
+
322
+ .send-button {
323
+ width: 36px;
324
+ height: 36px;
325
+ border-radius: 50%;
326
+ border: none;
327
+ background: var(--primary-color);
328
+ color: white;
329
+ cursor: pointer;
330
+ display: flex;
331
+ align-items: center;
332
+ justify-content: center;
333
+ transition: all 0.2s ease;
334
+ flex-shrink: 0;
335
+ }
336
+
337
+ .send-button:hover:not(:disabled) {
338
+ background: var(--primary-hover);
339
+ transform: scale(1.05);
340
  }
341
 
342
+ .send-button:disabled {
343
+ background: var(--text-secondary);
344
+ cursor: not-allowed;
345
+ opacity: 0.5;
 
 
346
  }
347
 
348
+ .input-status {
349
+ margin-top: 8px;
350
+ text-align: center;
351
+ }
352
 
353
+ #statusText {
354
+ font-size: 12px;
355
+ color: var(--text-secondary);
356
+ }
357
 
358
+ .loading-overlay {
359
+ position: fixed;
360
+ top: 0;
361
+ left: 0;
362
+ right: 0;
363
+ bottom: 0;
364
+ background: rgba(0, 0, 0, 0.5);
365
+ backdrop-filter: blur(10px);
366
+ -webkit-backdrop-filter: blur(10px);
367
+ display: flex;
368
+ align-items: center;
369
+ justify-content: center;
370
+ z-index: 1000;
371
+ }
372
 
373
+ .loading-content {
374
+ background: var(--surface);
375
+ border-radius: 20px;
376
+ padding: 40px;
377
+ text-align: center;
378
+ max-width: 400px;
379
+ width: 90%;
380
+ box-shadow: var(--shadow-lg);
381
  }
382
 
383
+ .loading-spinner {
384
+ width: 48px;
385
+ height: 48px;
386
+ border: 4px solid var(--surface-secondary);
387
+ border-top-color: var(--primary-color);
388
+ border-radius: 50%;
389
+ animation: spin 1s linear infinite;
390
+ margin: 0 auto 20px;
391
  }
392
 
393
+ @keyframes spin {
394
+ to {
395
+ transform: rotate(360deg);
396
+ }
397
  }
398
 
399
+ .loading-content h3 {
400
+ font-size: 20px;
401
+ font-weight: 600;
402
+ margin-bottom: 8px;
403
  }
404
 
405
+ .loading-content p {
406
+ color: var(--text-secondary);
407
+ font-size: 14px;
408
+ margin-bottom: 20px;
409
  }
410
 
411
+ .progress-bar {
412
+ height: 4px;
413
+ background: var(--surface-secondary);
414
+ border-radius: 2px;
415
+ overflow: hidden;
416
  }
417
 
418
+ .progress-fill {
419
+ height: 100%;
420
+ background: var(--primary-color);
421
+ border-radius: 2px;
422
+ width: 0%;
423
+ transition: width 0.3s ease;
424
+ }
425
+
426
+ @media (max-width: 640px) {
427
+ .message-content {
428
+ max-width: 85%;
429
+ }
430
+
431
+ .welcome-content {
432
+ padding: 30px 20px;
433
+ }
434
+
435
+ .example-chips {
436
+ justify-content: stretch;
437
+ }
438
+
439
+ .example-chip {
440
+ flex: 1;
441
+ min-width: 0;
442
+ text-align: center;
443
+ font-size: 13px;
444
+ }
445
  }