Hugging Face's logo

Spaces:
Gertie01
/
mini-bot-419
Running

App Files Community
Gertie01 commited on
Commit
6027554
·
verified ·
1 Parent(s): eb7c603

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +269 -46
style.css CHANGED
@@ -1,76 +1,299 @@
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 content here */
2
+ /* General Reset and Variables */
3
+ :root {
4
+ --color-primary: #1a73e8; /* Google blue for a modern look */
5
+ --color-secondary: #5f6368;
6
+ --color-background: #f1f3f4; /* Light gray background */
7
+ --color-surface: #ffffff;
8
+ --color-text: #202124;
9
+ --color-success: #34a853; /* Google green */
10
+ --color-error: #ea4335; /* Google red */
11
+ --font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
+ --border-radius: 8px;
13
+ --padding-unit: 1.25rem;
14
+ }
15
+
16
+ body {
17
+ font-family: var(--font-family);
18
+ margin: 0;
19
  padding: 0;
20
+ background-color: var(--color-background);
21
+ color: var(--color-text);
22
+ line-height: 1.6;
23
+ }
24
+
25
+ header {
26
+ background-color: var(--color-surface);
27
+ border-bottom: 1px solid #dadce0;
28
+ padding: var(--padding-unit) 5%;
29
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
30
+ }
31
+
32
+ .header-content {
33
+ display: flex;
34
+ justify-content: space-between;
35
+ align-items: center;
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ }
39
+
40
+ h1 {
41
+ font-size: 1.8rem;
42
+ color: var(--color-text);
43
  margin: 0;
44
+ font-weight: 500;
45
  }
46
 
47
+ .anycoder-link {
48
+ font-size: 0.85rem;
49
+ color: var(--color-primary);
50
+ text-decoration: none;
51
+ padding: 5px 10px;
52
+ border-radius: 4px;
53
+ transition: background-color 0.2s;
54
  }
55
 
56
+ .anycoder-link:hover {
57
+ background-color: #e8f0fe;
58
+ }
59
+
60
+ main {
61
+ max-width: 1200px;
62
+ margin: 2rem auto;
63
+ padding: 0 5%;
64
+ }
65
+
66
+ .explanation {
67
+ background-color: #e7f2ff;
68
+ color: #1a4d95;
69
+ padding: 1rem;
70
+ border-radius: var(--border-radius);
71
+ margin-bottom: 1.5rem;
72
+ border: 1px solid #c5e3ff;
73
+ font-size: 0.95rem;
74
+ }
75
+
76
+ /* Controls and Interface Grid */
77
+ .controls {
78
+ margin-bottom: 1.5rem;
79
+ }
80
+
81
+ .interface-grid {
82
+ display: grid;
83
+ grid-template-columns: 1fr;
84
+ gap: 2rem;
85
+ }
86
+
87
+ .input-panel, .output-panel, .controls {
88
+ background-color: var(--color-surface);
89
+ padding: var(--padding-unit);
90
+ border-radius: var(--border-radius);
91
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
92
+ }
93
+
94
+ h2 {
95
+ color: var(--color-primary);
96
+ font-size: 1.2rem;
97
+ margin-top: 0;
98
+ padding-bottom: 0.5rem;
99
+ border-bottom: 1px solid #f0f0f0;
100
+ font-weight: 400;
101
+ }
102
+
103
+ /* Input Styles */
104
+ .input-group {
105
+ margin-bottom: 1rem;
106
+ }
107
+
108
+ label {
109
+ display: block;
110
+ margin-bottom: 0.5rem;
111
+ font-weight: 500;
112
+ color: var(--color-text);
113
+ }
114
+
115
+ textarea {
116
+ width: 100%;
117
+ padding: 0.75rem;
118
+ border: 1px solid #dadce0;
119
+ border-radius: var(--border-radius);
120
+ box-sizing: border-box;
121
+ font-size: 1rem;
122
+ resize: vertical;
123
+ min-height: 100px;
124
+ transition: border-color 0.2s;
125
+ }
126
+
127
+ textarea:focus {
128
+ border-color: var(--color-primary);
129
+ outline: none;
130
+ box-shadow: 0 0 0 1px var(--color-primary);
131
+ }
132
+
133
+ /* File Input Custom Styling */
134
+ .file-label {
135
+ background-color: var(--color-secondary);
136
+ color: white;
137
+ padding: 0.75rem 1.25rem;
138
+ border-radius: var(--border-radius);
139
+ cursor: pointer;
140
+ text-align: center;
141
+ transition: background-color 0.2s;
142
+ display: inline-block;
143
+ font-weight: 500;
144
+ }
145
+
146
+ .file-label:hover {
147
+ background-color: #4a4d51;
148
+ }
149
+
150
+ #image-upload {
151
+ display: none;
152
+ }
153
+
154
+ /* Button */
155
+ #classify-button {
156
+ width: 100%;
157
+ padding: 1rem;
158
+ background-color: var(--color-primary);
159
+ color: white;
160
+ border: none;
161
+ border-radius: var(--border-radius);
162
+ font-size: 1.1rem;
163
+ cursor: pointer;
164
+ transition: background-color 0.2s, opacity 0.2s;
165
+ margin-top: 1rem;
166
+ font-weight: 500;
167
  }
168
 
169
+ #classify-button:hover:not(:disabled) {
170
+ background-color: #0c61e0;
171
+ }
172
+
173
+ #classify-button:disabled {
174
+ background-color: #ccc;
175
+ cursor: not-allowed;
176
+ opacity: 0.8;
177
+ }
178
+
179
+ /* Output Area */
180
+ #image-preview-container {
181
+ height: 300px;
182
+ border: 1px solid #dadce0;
183
+ border-radius: var(--border-radius);
184
+ margin-bottom: 1.5rem;
185
  display: flex;
 
186
  justify-content: center;
187
  align-items: center;
188
+ overflow: hidden;
189
+ background-color: #fcfcfc;
190
  }
191
 
192
+ #image-preview {
 
 
 
 
 
193
  max-width: 100%;
194
  max-height: 100%;
195
+ object-fit: contain;
196
+ }
197
 
198
+ .placeholder-text {
199
+ color: var(--color-secondary);
200
+ font-style: italic;
201
+ }
 
202
 
203
+ #status {
204
+ font-weight: 400;
205
+ margin-bottom: 1rem;
206
+ padding: 10px;
207
+ background-color: #e6f4ea; /* Light success background */
208
+ border-radius: 4px;
209
+ color: #1e8e3e;
210
  }
211
 
212
+ /* Classification Results Styling */
213
+ #classification-results {
214
+ margin-top: 1rem;
215
  }
216
 
217
+ .result-item {
218
+ display: flex;
219
+ align-items: center;
220
+ padding: 0.75rem 0;
221
+ border-bottom: 1px solid #f0f0f0;
222
  }
223
 
224
+ .result-item:last-child {
225
+ border-bottom: none;
 
 
226
  }
227
 
228
+ .label-text {
229
+ width: 25%;
230
+ font-weight: 400;
231
  }
232
 
233
+ .score-bar-container {
234
+ flex-grow: 1;
235
+ height: 15px;
236
+ background-color: #e8f0fe;
237
+ border-radius: 4px;
238
+ overflow: hidden;
239
+ margin: 0 1rem;
240
  }
241
 
242
+ .score-bar {
243
+ height: 100%;
244
+ background-color: var(--color-primary);
245
+ transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
246
+ }
247
+
248
+ .score-text {
249
+ width: 50px;
250
+ text-align: right;
251
+ font-weight: 600;
252
+ font-size: 0.95rem;
253
+ color: var(--color-primary);
254
+ }
255
+
256
+ /* Device Toggle */
257
+ .device-toggle-container {
258
+ display: flex;
259
+ align-items: center;
260
+ gap: 15px;
261
+ padding-top: 10px;
262
+ }
263
+
264
+ #device-select {
265
+ padding: 0.5rem;
266
+ border-radius: 4px;
267
+ border: 1px solid #dadce0;
268
+ }
269
+
270
+ /* Responsive Adjustments */
271
+ @media (min-width: 768px) {
272
+ .interface-grid {
273
+ grid-template-columns: 1fr 1.5fr;
274
+ }
275
+ }
276
+
277
+ @media (max-width: 767px) {
278
+ h1 {
279
+ font-size: 1.5rem;
280
+ }
281
+ .header-content {
282
+ flex-direction: column;
283
+ gap: 0.5rem;
284
+ }
285
+ .anycoder-link {
286
+ margin-bottom: 0.5rem;
287
+ }
288
+ main {
289
+ padding: 0 1rem;
290
+ }
291
+ .label-text {
292
+ width: auto;
293
+ min-width: 30%;
294
+ margin-right: 0.5rem;
295
+ }
296
+ .score-bar-container {
297
+ margin: 0 0.5rem;
298
+ }
299
  }