Hugging Face's logo

Spaces:
akhaliq
/
qwen-3-anycoder-2
Running

App Files Community
akhaliq HF Staff commited on
Commit
251a3b8
·
verified ·
1 Parent(s): d00ab12

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +194 -50
style.css CHANGED
@@ -1,76 +1,220 @@
 
 
 
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
+ /* style.css */
2
+
3
+ /* Base Styles */
4
  * {
5
+ box-sizing: border-box;
6
+ margin: 0;
7
+ padding: 0;
 
8
  }
9
 
 
10
  body {
11
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
13
+ color: #333;
14
+ line-height: 1.6;
15
+ padding: 20px;
16
+ min-height: 100vh;
17
  }
18
 
19
+ .chat-container {
20
+ max-width: 800px;
21
+ margin: 0 auto;
22
+ background: white;
23
+ border-radius: 12px;
24
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
25
+ overflow: hidden;
26
+ display: flex;
27
+ flex-direction: column;
28
+ height: 90vh;
29
  }
30
 
31
+ /* Header Styles */
32
+ header {
33
+ background: #4a6fa5;
34
+ color: white;
35
+ padding: 20px;
36
+ text-align: center;
37
  }
38
 
39
+ header h1 {
40
+ font-size: 1.8rem;
41
+ margin-bottom: 8px;
42
+ }
43
 
44
+ header p {
45
+ font-size: 1rem;
46
+ opacity: 0.9;
47
+ }
48
 
49
+ /* Chat History Styles */
50
+ .chat-history {
51
+ flex: 1;
52
+ overflow-y: auto;
53
+ padding: 20px;
54
+ background: #f9f9f9;
55
+ display: flex;
56
+ flex-direction: column;
57
+ gap: 15px;
58
+ }
59
 
60
+ .chat-message {
61
+ padding: 12px 16px;
62
+ border-radius: 18px;
63
+ max-width: 80%;
64
+ word-wrap: break-word;
65
+ animation: fadeIn 0.3s ease-in-out;
66
  }
67
 
68
+ .chat-message.user {
69
+ background: #e3f2fd;
70
+ align-self: flex-end;
71
+ border-bottom-right-radius: 4px;
72
  }
73
 
74
+ .chat-message.assistant {
75
+ background: #f5f5f5;
76
+ border: 1px solid #ddd;
77
+ align-self: flex-start;
78
+ border-bottom-left-radius: 4px;
79
  }
80
 
81
+ .chat-message.system {
82
+ background: #fff8e1;
83
+ align-self: center;
84
+ font-size: 0.9rem;
85
+ text-align: center;
86
+ max-width: 90%;
87
+ border-radius: 8px;
88
  }
89
 
90
+ .chat-message.error {
91
+ background: #ffebee;
92
+ align-self: center;
93
+ color: #c62828;
94
+ font-size: 0.9rem;
95
+ text-align: center;
96
+ max-width: 90%;
97
+ border-radius: 8px;
98
  }
99
 
100
+ /* Input Area Styles */
101
+ .input-area {
102
+ display: flex;
103
+ padding: 20px;
104
+ background: white;
105
+ border-top: 1px solid #eee;
106
+ gap: 10px;
107
  }
108
 
109
+ #user-input {
110
+ flex: 1;
111
+ padding: 12px 15px;
112
+ border: 1px solid #ddd;
113
+ border-radius: 24px;
114
+ resize: none;
115
+ font-family: inherit;
116
+ font-size: 1rem;
117
+ outline: none;
118
+ transition: border-color 0.3s;
119
+ }
120
+
121
+ #user-input:focus {
122
+ border-color: #4a6fa5;
123
+ }
124
+
125
+ #send-button {
126
+ padding: 12px 25px;
127
+ background: #4a6fa5;
128
+ color: white;
129
+ border: none;
130
+ border-radius: 24px;
131
+ cursor: pointer;
132
+ font-size: 1rem;
133
+ font-weight: 600;
134
+ transition: background 0.3s;
135
+ align-self: flex-end;
136
+ }
137
+
138
+ #send-button:hover {
139
+ background: #3a5a80;
140
+ }
141
+
142
+ #send-button:disabled {
143
+ background: #ccc;
144
+ cursor: not-allowed;
145
+ }
146
+
147
+ /* Loader Animation */
148
+ .loader {
149
+ display: inline-block;
150
+ width: 16px;
151
+ height: 16px;
152
+ border: 3px solid rgba(74, 111, 165, 0.2);
153
+ border-top: 3px solid #4a6fa5;
154
+ border-radius: 50%;
155
+ margin-right: 10px;
156
+ animation: spin 1s linear infinite;
157
+ }
158
+
159
+ @keyframes spin {
160
+ 0% { transform: rotate(0deg); }
161
+ 100% { transform: rotate(360deg); }
162
+ }
163
+
164
+ @keyframes fadeIn {
165
+ from { opacity: 0; transform: translateY(10px); }
166
+ to { opacity: 1; transform: translateY(0); }
167
+ }
168
+
169
+ /* Responsive Styles */
170
+ @media (max-width: 768px) {
171
+ body {
172
+ padding: 10px;
173
+ }
174
+
175
+ .chat-container {
176
+ height: 95vh;
177
+ }
178
+
179
+ header h1 {
180
+ font-size: 1.5rem;
181
+ }
182
+
183
+ .chat-history {
184
+ padding: 15px;
185
+ }
186
+
187
+ .chat-message {
188
+ max-width: 90%;
189
+ }
190
+
191
+ .input-area {
192
+ padding: 15px;
193
+ }
194
+
195
+ #send-button {
196
+ padding: 10px 20px;
197
+ }
198
+ }
199
+
200
+ @media (max-width: 480px) {
201
+ header {
202
+ padding: 15px;
203
+ }
204
+
205
+ header h1 {
206
+ font-size: 1.3rem;
207
+ }
208
+
209
+ .chat-message {
210
+ max-width: 95%;
211
+ }
212
+
213
+ .input-area {
214
+ flex-direction: column;
215
+ }
216
+
217
+ #send-button {
218
+ align-self: stretch;
219
+ }
220
  }