Hugging Face's logo

Spaces:
Fahd-B
/
Image-comparison
Running

App Files Community
Fahd-B commited on
Commit
88a625a
·
verified ·
1 Parent(s): 6830417

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +385 -36
style.css CHANGED
@@ -1,76 +1,425 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
2
+
3
+ :root {
4
+ --primary-color: #007BFF;
5
+ --secondary-color: #F0F2F5;
6
+ --text-color: #333;
7
+ --light-text-color: #888;
8
+ --border-color: #E0E0E0;
9
+ --white-color: #FFF;
10
+ --error-color: #FF3B30;
11
+ --success-color: #34C759;
12
+ }
13
+
14
  * {
 
 
15
  margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
  }
19
 
 
20
  body {
21
+ font-family: 'Poppins', sans-serif;
22
+ background-color: var(--secondary-color);
23
+ color: var(--text-color);
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ min-height: 100vh;
28
  }
29
 
30
+ .container {
31
+ display: flex;
32
+ flex-direction: column;
33
+ width: 90vw;
34
+ max-width: 1200px;
35
+ min-width: 800px;
36
+ min-height: 80vh;
37
+ background-color: var(--white-color);
38
+ border-radius: 20px;
39
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
40
+ overflow: hidden;
41
+ }
42
+
43
+ .left-panel,
44
+ .right-panel {
45
+ padding: 40px;
46
+ display: flex;
47
+ flex-direction: column;
48
+ }
49
+
50
+ .left-panel {
51
+ width: 40%;
52
+ border-right: 1px solid var(--border-color);
53
+ }
54
+
55
+ .right-panel {
56
+ width: 60%;
57
+ background-color: #F7F9FC;
58
+ position: relative;
59
+ }
60
+
61
+ .header h1 {
62
+ font-size: 28px;
63
+ font-weight: 600;
64
+ }
65
+
66
+ .header p {
67
+ color: var(--light-text-color);
68
+ margin-top: 5px;
69
+ }
70
+
71
+ .info-section {
72
+ margin-top: 10px;
73
+ padding: 5px;
74
+ background-color: var(--secondary-color);
75
+ border-radius: 10px;
76
+ border: 1px solid var(--border-color);
77
+ }
78
+
79
+ .info-header {
80
+ display: flex;
81
+ align-items: center;
82
+ margin-bottom: 10px;
83
+ font-weight: 600;
84
+ color: var(--primary-color);
85
+ }
86
+
87
+ .info-header i {
88
+ margin-right: 8px;
89
+ font-size: 18px;
90
+ }
91
+
92
+ .info-content {
93
+ font-size: 14px;
94
+ color: var(--text-color);
95
  }
96
 
97
+ .info-content p {
98
+ margin-bottom: 8px;
99
+ display: flex;
100
+ align-items: flex-start;
101
+ }
102
+
103
+ .info-content i {
104
+ margin-right: 8px;
105
+ margin-top: 3px;
106
+ font-size: 14px;
107
+ color: var(--primary-color);
108
+ }
109
+
110
+ .upload-label {
111
+ margin-top: 20px;
112
+ border: 2px dashed var(--border-color);
113
+ border-radius: 10px;
114
  display: flex;
115
  flex-direction: column;
116
  justify-content: center;
117
  align-items: center;
118
+ height: 150px;
119
+ cursor: pointer;
120
+ transition: all 0.3s;
121
+ position: relative;
122
+ text-align: center;
123
+ }
124
+
125
+ .image-display-area {
126
+ width: 100%;
127
+ flex-grow: 1;
128
+ display: flex;
129
+ gap: 20px;
130
+ justify-content: center;
131
+ align-items: center;
132
  }
133
 
134
+ .image-preview {
135
+ width: calc(50% - 10px);
136
+ height: 100%;
137
+ border-radius: 10px;
138
+ display: flex;
139
+ justify-content: center;
140
+ align-items: center;
141
  position: relative;
142
+ transition: all 0.3s;
143
+ overflow: hidden;
144
+ }
145
+
146
+ .upload-label.highlight,
147
+ .image-preview.highlight {
148
+ border-color: var(--primary-color);
149
+ background-color: #f0f8ff;
150
+ }
151
 
152
+ .image-preview img {
 
153
  max-width: 100%;
154
  max-height: 100%;
155
+ object-fit: contain;
156
+ border-radius: 8px;
157
+ }
158
+
159
+ .upload-label i {
160
+ font-size: 32px;
161
+ color: var(--primary-color);
162
+ }
163
+
164
+ .upload-label span {
165
+ margin-top: 12px;
166
+ color: var(--light-text-color);
167
+ }
168
+
169
+ .upload-label small {
170
+ margin-top: 10px;
171
+ font-size: 12px;
172
+ opacity: 0.8;
173
+ }
174
+
175
+ .results-section {
176
+ margin-top: 20px;
177
+ flex-grow: 1;
178
+ display: flex;
179
+ flex-direction: column;
180
+ }
181
+
182
+ .results-section h2 {
183
+ font-size: 20px;
184
+ margin-bottom: 15px;
185
+ }
186
+
187
+ #results-container {
188
+ flex-grow: 1;
189
+ display: flex;
190
+ flex-direction: column;
191
+ justify-content: center;
192
+ align-items: center;
193
+ overflow-y: auto;
194
+ }
195
+
196
+ .comparison-result {
197
+ width: 100%;
198
+ display: flex;
199
+ flex-direction: column;
200
+ align-items: center;
201
+ }
202
+ .panels-wrapper {
203
+ display: flex;
204
+ flex-grow: 1;
205
+ }
206
+
207
+ .meter-label {
208
+ font-weight: 600;
209
+ margin-bottom: 8px;
210
+ font-size: 16px;
211
+ }
212
 
213
+ .meter-container {
214
+ width: 90%;
215
+ height: 20px;
216
+ background-color: var(--secondary-color);
217
+ border-radius: 10px;
218
  overflow: hidden;
219
+ }
220
+
221
+ .meter-bar {
222
+ height: 100%;
223
+ background-color: var(--success-color);
224
+ border-radius: 10px;
225
+ transition: width 0.5s ease-in-out;
226
+ }
227
+
228
+ .meter-description {
229
+ margin-top: 10px;
230
+ color: var(--light-text-color);
231
+ text-align: center;
232
+ }
233
+
234
+ .graph-container {
235
+ padding: 15px;
236
+ border-radius: 10px;
237
+ background-color: var(--white-color);
238
+ width: 100%;
239
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
240
+ }
241
+
242
+ .graph-title {
243
+ font-size: 16px;
244
+ font-weight: 600;
245
+ margin-bottom: 10px;
246
+ text-align: center;
247
+ }
248
+
249
+ .clear-section {
250
+ width: 100%;
251
+ display: flex;
252
+ justify-content: center;
253
+ margin-top: auto;
254
+ padding-top: 20px;
255
+ }
256
+
257
+ #clear-btn {
258
+ background-color: var(--error-color);
259
+ color: var(--white-color);
260
+ border: none;
261
+ border-radius: 8px;
262
  cursor: pointer;
263
+ font-size: 16px;
264
+ display: flex;
265
+ justify-content: center;
266
+ align-items: center;
267
+ transition: background-color 0.3s;
268
+ padding: 12px 20px;
269
+ width: 100%;
270
+ }
271
 
272
+ #clear-btn:hover {
273
+ background-color: #d93025;
 
 
274
  }
275
 
276
+ #clear-btn i {
277
+ margin-right: 8px;
278
+ }
279
+
280
+ #status-indicator {
281
+ display: flex;
282
+ align-items: center;
283
+ justify-content: center;
284
+ height: 30px;
285
+ margin-top: 20px;
286
+ }
287
+
288
+ .spinner {
289
+ border: 3px solid #f3f3f3;
290
+ border-top: 3px solid var(--primary-color);
291
+ border-radius: 50%;
292
+ width: 20px;
293
+ height: 20px;
294
+ animation: spin 1s linear infinite;
295
  display: none;
296
  }
297
 
298
+ #status-text {
299
+ margin-left: 10px;
300
+ color: var(--light-text-color);
301
  }
302
 
303
+ @keyframes spin {
304
+ 0% { transform: rotate(0deg); }
305
+ 100% { transform: rotate(360deg); }
306
+ }
307
+
308
+ .placeholder {
309
+ display: flex;
310
+ flex-direction: column;
311
+ justify-content: center;
312
+ align-items: center;
313
+ height: 100%;
314
+ text-align: center;
315
+ color: var(--light-text-color);
316
+ }
317
+
318
+ .placeholder i {
319
+ font-size: 50px;
320
+ color: var(--border-color);
321
+ }
322
+
323
+ .placeholder h2 {
324
+ margin-top: 20px;
325
+ font-size: 20px;
326
+ font-weight: 600;
327
+ color: var(--text-color);
328
+ }
329
+
330
+ .placeholder p {
331
+ margin-top: 10px;
332
+ font-size: 16px;
333
+ }
334
+
335
+ .error {
336
+ color: var(--error-color);
337
+ }
338
+ #meter-container {
339
+ padding: 10px 0;
340
+ display: flex;
341
+ justify-content: center;
342
+ }
343
+
344
+ .action-buttons {
345
+ text-align: center;
346
+ padding: 15px 0;
347
+ }
348
+
349
+ #show-graph-btn {
350
+ background-color: var(--primary-color);
351
+ color: var(--white-color);
352
+ border: none;
353
+ border-radius: 8px;
354
  cursor: pointer;
355
+ font-size: 15px;
356
+ padding: 10px 20px;
357
+ transition: background-color 0.3s;
358
  }
359
 
360
+ #show-graph-btn:hover {
361
+ background-color: #0056b3;
362
  }
363
 
364
+ .modal {
365
+ display: none;
366
+ position: fixed;
367
+ z-index: 1000;
368
+ left: 0;
369
+ top: 0;
370
+ width: 100%;
371
+ height: 100%;
372
+ overflow: auto;
373
+ background-color: rgba(0, 0, 0, 0.5);
374
+ animation: fadeIn 0.3s;
375
+ }
376
+
377
+ .modal-content {
378
+ background-color: #fefefe;
379
+ margin: 5% auto;
380
+ padding: 20px;
381
+ border: 1px solid #888;
382
+ width: 80%;
383
+ max-width: 900px;
384
+ border-radius: 10px;
385
+ position: relative;
386
+ }
387
+
388
+ .close-button {
389
+ color: #aaa;
390
  position: absolute;
391
+ top: 10px;
392
+ right: 20px;
393
+ font-size: 28px;
394
+ font-weight: bold;
395
+ cursor: pointer;
396
+ }
397
+
398
+ @keyframes fadeIn {
399
+ from { opacity: 0; }
400
+ to { opacity: 1; }
401
  }
402
 
403
+ .back-link-section {
 
404
  position: absolute;
405
+ top: 20px;
406
+ right: 40px;
407
+ }
408
+
409
+ .back-link {
410
+ display: flex;
411
+ align-items: center;
412
+ text-decoration: none;
413
+ color: var(--primary-color);
414
+ font-weight: 600;
415
+ font-size: 15px;
416
+ transition: color 0.3s;
417
+ }
418
+
419
+ .back-link:hover {
420
+ color: #0056b3;
421
+ }
422
+
423
+ .back-link i {
424
+ margin-right: 8px;
425
  }