Hugging Face's logo

Spaces:
DHEIVER
/
CalibrationReport
Running

App Files Community
DHEIVER commited on
Commit
8f862ae
·
verified ·
1 Parent(s): d08380e

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +105 -35
style.css CHANGED
@@ -1,32 +1,57 @@
1
  :root {
2
- --primary-color: #3b82f6;
3
- --error-color: #ef4444;
4
- --success-color: #22c55e;
 
 
 
5
  }
6
 
7
- body {
8
  margin: 0;
9
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
- background-color: #f3f4f6;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  }
12
 
13
  .container {
14
- max-width: 64rem;
15
- margin: 2rem auto;
16
  padding: 0 1rem;
17
  }
18
 
19
  .upload-area {
20
- border: 2px dashed #d1d5db;
 
21
  border-radius: 0.5rem;
22
  padding: 2rem;
23
  text-align: center;
24
- background-color: white;
25
- transition: border-color 0.3s;
26
  }
27
 
28
- .upload-area:hover {
29
  border-color: var(--primary-color);
 
30
  }
31
 
32
  .upload-label {
@@ -34,32 +59,34 @@ body {
34
  display: flex;
35
  flex-direction: column;
36
  align-items: center;
37
- gap: 0.5rem;
38
  }
39
 
40
  .upload-icon {
41
- width: 3rem;
42
- height: 3rem;
43
- border: 2px solid #9ca3af;
44
  border-radius: 50%;
45
  position: relative;
 
46
  }
47
 
48
  .hidden {
49
- display: none;
50
  }
51
 
52
  .loading {
53
  display: flex;
54
- justify-content: center;
55
- margin: 1rem 0;
 
 
56
  }
57
 
58
- .loading::after {
59
- content: "";
60
- width: 2rem;
61
- height: 2rem;
62
- border: 2px solid #e5e7eb;
63
  border-top-color: var(--primary-color);
64
  border-radius: 50%;
65
  animation: spin 1s linear infinite;
@@ -67,30 +94,73 @@ body {
67
 
68
  .analysis-results {
69
  margin-top: 2rem;
70
- display: flex;
71
- flex-direction: column;
72
- gap: 1rem;
73
  }
74
 
75
  .alert {
76
- padding: 1rem;
77
- border-radius: 0.5rem;
78
  background-color: white;
79
- border: 1px solid #e5e7eb;
 
 
 
 
 
 
 
80
  }
81
 
82
  .alert-error {
83
- border-color: var(--error-color);
84
- background-color: #fef2f2;
85
  }
86
 
87
- .alert-success {
88
- border-color: var(--success-color);
89
- background-color: #f0fdf4;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  }
91
 
92
  @keyframes spin {
93
  to {
94
  transform: rotate(360deg);
95
  }
 
 
 
 
 
 
 
 
 
 
96
  }
 
1
  :root {
2
+ --primary-color: #2563eb;
3
+ --success-color: #16a34a;
4
+ --error-color: #dc2626;
5
+ --warning-color: #d97706;
6
+ --background-color: #f8fafc;
7
+ --text-color: #1e293b;
8
  }
9
 
10
+ * {
11
  margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ body {
17
+ font-family: system-ui, -apple-system, sans-serif;
18
+ background-color: var(--background-color);
19
+ color: var(--text-color);
20
+ line-height: 1.5;
21
+ }
22
+
23
+ header {
24
+ background-color: white;
25
+ padding: 1rem;
26
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
27
+ margin-bottom: 2rem;
28
+ }
29
+
30
+ h1 {
31
+ max-width: 1200px;
32
+ margin: 0 auto;
33
+ font-size: 1.5rem;
34
+ font-weight: 600;
35
  }
36
 
37
  .container {
38
+ max-width: 1200px;
39
+ margin: 0 auto;
40
  padding: 0 1rem;
41
  }
42
 
43
  .upload-area {
44
+ background-color: white;
45
+ border: 2px dashed #cbd5e1;
46
  border-radius: 0.5rem;
47
  padding: 2rem;
48
  text-align: center;
49
+ transition: all 0.3s ease;
 
50
  }
51
 
52
+ .upload-area.drag-over {
53
  border-color: var(--primary-color);
54
+ background-color: #eff6ff;
55
  }
56
 
57
  .upload-label {
 
59
  display: flex;
60
  flex-direction: column;
61
  align-items: center;
62
+ gap: 1rem;
63
  }
64
 
65
  .upload-icon {
66
+ width: 4rem;
67
+ height: 4rem;
68
+ border: 2px solid #94a3b8;
69
  border-radius: 50%;
70
  position: relative;
71
+ transition: all 0.3s ease;
72
  }
73
 
74
  .hidden {
75
+ display: none !important;
76
  }
77
 
78
  .loading {
79
  display: flex;
80
+ flex-direction: column;
81
+ align-items: center;
82
+ gap: 1rem;
83
+ margin: 2rem 0;
84
  }
85
 
86
+ .spinner {
87
+ width: 2.5rem;
88
+ height: 2.5rem;
89
+ border: 3px solid #e2e8f0;
 
90
  border-top-color: var(--primary-color);
91
  border-radius: 50%;
92
  animation: spin 1s linear infinite;
 
94
 
95
  .analysis-results {
96
  margin-top: 2rem;
 
 
 
97
  }
98
 
99
  .alert {
 
 
100
  background-color: white;
101
+ border-radius: 0.5rem;
102
+ padding: 1rem;
103
+ margin-bottom: 1rem;
104
+ border-left: 4px solid;
105
+ }
106
+
107
+ .alert-success {
108
+ border-left-color: var(--success-color);
109
  }
110
 
111
  .alert-error {
112
+ border-left-color: var(--error-color);
 
113
  }
114
 
115
+ .alert-warning {
116
+ border-left-color: var(--warning-color);
117
+ }
118
+
119
+ .compliance-report {
120
+ background-color: white;
121
+ border-radius: 0.5rem;
122
+ padding: 1.5rem;
123
+ margin-top: 2rem;
124
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
125
+ }
126
+
127
+ .report-content {
128
+ margin-top: 1rem;
129
+ }
130
+
131
+ .report-section {
132
+ margin-bottom: 1.5rem;
133
+ }
134
+
135
+ .report-section h3 {
136
+ margin-bottom: 0.5rem;
137
+ font-size: 1.1rem;
138
+ font-weight: 600;
139
+ }
140
+
141
+ .metric {
142
+ display: flex;
143
+ justify-content: space-between;
144
+ padding: 0.5rem 0;
145
+ border-bottom: 1px solid #e2e8f0;
146
+ }
147
+
148
+ .metric:last-child {
149
+ border-bottom: none;
150
  }
151
 
152
  @keyframes spin {
153
  to {
154
  transform: rotate(360deg);
155
  }
156
+ }
157
+
158
+ @media (max-width: 640px) {
159
+ .container {
160
+ padding: 0 0.5rem;
161
+ }
162
+
163
+ .upload-area {
164
+ padding: 1rem;
165
+ }
166
  }