Hugging Face's logo

Spaces:
DHEIVER
/
MetrologyRAGPipeline
Running

App Files Community
DHEIVER commited on
Commit
fde8b8c
·
verified ·
1 Parent(s): e355166

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +203 -101
style.css CHANGED
@@ -5,181 +5,283 @@
5
  }
6
 
7
  body {
8
- font-family: 'Roboto', sans-serif;
9
- background-color: #f4f7fa;
10
- color: #333;
11
- line-height: 1.6;
 
12
  }
13
 
14
  .container {
15
- max-width: 1200px;
16
  margin: 0 auto;
17
  padding: 20px;
18
  }
19
 
20
  /* Header */
21
- header {
 
22
  text-align: center;
23
- padding: 40px 0;
24
- background: linear-gradient(135deg, #007bff, #00ddeb);
25
- color: white;
26
- border-radius: 10px;
27
- margin-bottom: 30px;
 
 
28
  }
29
 
30
- header h1 {
31
- font-size: 2.5em;
32
- margin-bottom: 10px;
 
 
 
 
33
  }
34
 
35
- header p {
36
  font-size: 1.2em;
 
 
 
 
 
 
 
 
37
  }
38
 
39
- /* Main Layout */
40
- main {
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  display: grid;
42
- grid-template-columns: 3fr 1fr;
43
  gap: 30px;
 
44
  }
45
 
46
- /* Query Section */
47
- .query-section {
48
- grid-column: 1 / 2;
49
- background: white;
50
- padding: 20px;
51
- border-radius: 10px;
52
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 
53
  }
54
 
55
- .query-section h2 {
56
- font-size: 1.5em;
57
- margin-bottom: 15px;
 
 
 
 
 
 
 
58
  }
59
 
60
- #query-input {
 
61
  width: 100%;
 
 
 
62
  padding: 15px;
63
  font-size: 1em;
64
- border: 1px solid #ddd;
65
- border-radius: 5px;
66
  resize: vertical;
67
- margin-bottom: 15px;
68
  }
69
 
70
- #submit-query {
71
- background-color: #007bff;
72
- color: white;
73
- padding: 12px 20px;
 
 
 
 
74
  border: none;
75
- border-radius: 5px;
76
  font-size: 1em;
 
77
  cursor: pointer;
78
- transition: background-color 0.3s;
79
  }
80
 
81
- #submit-query:hover {
82
- background-color: #0056b3;
 
83
  }
84
 
85
- /* Response and Context Sections */
86
- .response-section, .context-section {
87
- grid-column: 1 / 2;
88
- background: white;
89
- padding: 20px;
90
- border-radius: 10px;
91
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
92
- margin-top: 20px;
93
  }
94
 
95
- .response-section h2, .context-section h2 {
96
- font-size: 1.5em;
97
- margin-bottom: 15px;
 
98
  }
99
 
100
- .output-box {
101
- background: #f8f9fa;
102
- padding: 15px;
103
- border-radius: 5px;
104
- min-height: 100px;
105
- border: 1px solid #ddd;
106
  }
107
 
108
- /* Settings Panel */
109
- .settings-panel {
110
- grid-column: 2 / 3;
111
- grid-row: 1 / 3;
112
- background: white;
113
- padding: 20px;
114
  border-radius: 10px;
115
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 
 
 
 
116
  }
117
 
118
- .settings-panel h2 {
119
- font-size: 1.5em;
120
- margin-bottom: 20px;
121
  }
122
 
123
- .setting {
124
- margin-bottom: 15px;
 
 
125
  }
126
 
127
- .setting label {
128
  display: block;
129
- font-weight: 500;
130
- margin-bottom: 5px;
 
 
131
  }
132
 
133
- .setting input, .setting select {
 
134
  width: 100%;
 
 
 
135
  padding: 10px;
136
- font-size: 1em;
137
- border: 1px solid #ddd;
138
- border-radius: 5px;
139
- }
140
-
141
- #apply-settings {
142
- background-color: #28a745;
143
- color: white;
144
- padding: 12px 20px;
145
- border: none;
146
- border-radius: 5px;
147
- font-size: 1em;
148
- cursor: pointer;
149
- width: 100%;
150
- margin-top: 10px;
151
- transition: background-color 0.3s;
152
  }
153
 
154
- #apply-settings:hover {
155
- background-color: #218838;
 
 
156
  }
157
 
158
  /* Footer */
159
- footer {
160
  text-align: center;
161
  padding: 20px 0;
162
- margin-top: 30px;
163
- border-top: 1px solid #ddd;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  color: #666;
165
  }
166
 
167
  /* Responsive Design */
168
- @media (max-width: 768px) {
169
- main {
170
  grid-template-columns: 1fr;
171
  }
172
 
173
- .settings-panel {
174
- grid-column: 1 / 2;
175
  grid-row: auto;
176
  }
177
 
178
- header h1 {
179
- font-size: 2em;
180
  }
181
 
182
- header p {
183
  font-size: 1em;
184
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  }
 
5
  }
6
 
7
  body {
8
+ font-family: 'Inter', sans-serif;
9
+ background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
10
+ color: #e0e0e0;
11
+ min-height: 100vh;
12
+ overflow-x: hidden;
13
  }
14
 
15
  .container {
16
+ max-width: 1400px;
17
  margin: 0 auto;
18
  padding: 20px;
19
  }
20
 
21
  /* Header */
22
+ .header {
23
+ position: relative;
24
  text-align: center;
25
+ padding: 60px 20px;
26
+ background: rgba(255, 255, 255, 0.05);
27
+ backdrop-filter: blur(12px);
28
+ border-radius: 20px;
29
+ margin-bottom: 40px;
30
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
31
+ animation: fadeIn 1s ease-out;
32
  }
33
 
34
+ .header h1 {
35
+ font-size: 3em;
36
+ font-weight: 800;
37
+ background: linear-gradient(45deg, #00ddeb, #ff007a);
38
+ -webkit-background-clip: text;
39
+ background-clip: text;
40
+ color: transparent;
41
  }
42
 
43
+ .header p {
44
  font-size: 1.2em;
45
+ color: #a0a0a0;
46
+ margin-top: 10px;
47
+ }
48
+
49
+ .theme-toggle {
50
+ position: absolute;
51
+ top: 20px;
52
+ right: 20px;
53
  }
54
 
55
+ #theme-switch {
56
+ background: none;
57
+ border: none;
58
+ font-size: 1.5em;
59
+ color: #e0e0e0;
60
+ cursor: pointer;
61
+ transition: transform 0.3s;
62
+ }
63
+
64
+ #theme-switch:hover {
65
+ transform: rotate(180deg);
66
+ }
67
+
68
+ /* Main Grid */
69
+ .main-grid {
70
  display: grid;
71
+ grid-template-columns: 2fr 1fr;
72
  gap: 30px;
73
+ padding-bottom: 40px;
74
  }
75
 
76
+ /* Card Styling */
77
+ .card {
78
+ background: rgba(255, 255, 255, 0.05);
79
+ backdrop-filter: blur(10px);
80
+ border-radius: 20px;
81
+ padding: 25px;
82
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
83
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
84
  }
85
 
86
+ .card:hover {
87
+ transform: translateY(-5px);
88
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
89
+ }
90
+
91
+ .card h2 {
92
+ font-size: 1.6em;
93
+ font-weight: 600;
94
+ margin-bottom: 20px;
95
+ color: #00ddeb;
96
  }
97
 
98
+ /* Query Card */
99
+ .query-card textarea {
100
  width: 100%;
101
+ background: rgba(255, 255, 255, 0.1);
102
+ border: 1px solid rgba(255, 255, 255, 0.2);
103
+ border-radius: 10px;
104
  padding: 15px;
105
  font-size: 1em;
106
+ color: #e0e0e0;
 
107
  resize: vertical;
108
+ transition: border-color 0.3s;
109
  }
110
 
111
+ .query-card textarea:focus {
112
+ outline: none;
113
+ border-color: #00ddeb;
114
+ }
115
+
116
+ /* Buttons */
117
+ .btn {
118
+ padding: 12px 24px;
119
  border: none;
120
+ border-radius: 10px;
121
  font-size: 1em;
122
+ font-weight: 600;
123
  cursor: pointer;
124
+ transition: background 0.3s, transform 0.2s;
125
  }
126
 
127
+ .btn-primary {
128
+ background: linear-gradient(45deg, #00ddeb, #ff007a);
129
+ color: white;
130
  }
131
 
132
+ .btn-primary:hover {
133
+ background: linear-gradient(45deg, #00b7c3, #e6006b);
134
+ transform: translateY(-2px);
 
 
 
 
 
135
  }
136
 
137
+ .btn-secondary {
138
+ background: rgba(255, 255, 255, 0.1);
139
+ color: #e0e0e0;
140
+ width: 100%;
141
  }
142
 
143
+ .btn-secondary:hover {
144
+ background: rgba(255, 255, 255, 0.2);
145
+ transform: translateY(-2px);
 
 
 
146
  }
147
 
148
+ /* Output Boxes */
149
+ .output-box {
150
+ background: rgba(0, 0, 0, 0.2);
 
 
 
151
  border-radius: 10px;
152
+ padding: 20px;
153
+ min-height: 150px;
154
+ font-size: 1em;
155
+ line-height: 1.5;
156
+ color: #c0c0c0;
157
  }
158
 
159
+ /* Settings Card */
160
+ .settings-card {
161
+ grid-row: span 2;
162
  }
163
 
164
+ .settings-grid {
165
+ display: grid;
166
+ gap: 20px;
167
+ margin-bottom: 20px;
168
  }
169
 
170
+ .setting-item label {
171
  display: block;
172
+ font-size: 0.9em;
173
+ font-weight: 400;
174
+ color: #a0a0a0;
175
+ margin-bottom: 8px;
176
  }
177
 
178
+ .setting-item input,
179
+ .setting-item select {
180
  width: 100%;
181
+ background: rgba(255, 255, 255, 0.1);
182
+ border: 1px solid rgba(255, 255, 255, 0.2);
183
+ border-radius: 8px;
184
  padding: 10px;
185
+ font-size: 0.9em;
186
+ color: #e0e0e0;
187
+ transition: border-color 0.3s;
 
 
 
 
 
 
 
 
 
 
 
 
 
188
  }
189
 
190
+ .setting-item input:focus,
191
+ .setting-item select:focus {
192
+ outline: none;
193
+ border-color: #00ddeb;
194
  }
195
 
196
  /* Footer */
197
+ .footer {
198
  text-align: center;
199
  padding: 20px 0;
200
+ color: #606060;
201
+ font-size: 0.9em;
202
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
203
+ }
204
+
205
+ /* Animations */
206
+ @keyframes fadeIn {
207
+ from { opacity: 0; transform: translateY(20px); }
208
+ to { opacity: 1; transform: translateY(0); }
209
+ }
210
+
211
+ .card, .footer {
212
+ animation: fadeIn 0.8s ease-out forwards;
213
+ }
214
+
215
+ /* Light Theme */
216
+ body.light {
217
+ background: linear-gradient(180deg, #f0f0f0 0%, #e0e0e0 100%);
218
+ color: #1a1a1a;
219
+ }
220
+
221
+ body.light .header,
222
+ body.light .card {
223
+ background: rgba(255, 255, 255, 0.7);
224
+ }
225
+
226
+ body.light .card h2 {
227
+ color: #007bff;
228
+ }
229
+
230
+ body.light .query-card textarea,
231
+ body.light .setting-item input,
232
+ body.light .setting-item select {
233
+ background: rgba(0, 0, 0, 0.05);
234
+ border-color: rgba(0, 0, 0, 0.1);
235
+ color: #1a1a1a;
236
+ }
237
+
238
+ body.light .output-box {
239
+ background: rgba(0, 0, 0, 0.05);
240
+ color: #333;
241
+ }
242
+
243
+ body.light .btn-secondary {
244
+ background: rgba(0, 0, 0, 0.1);
245
+ color: #1a1a1a;
246
+ }
247
+
248
+ body.light .btn-secondary:hover {
249
+ background: rgba(0, 0, 0, 0.2);
250
+ }
251
+
252
+ body.light .footer {
253
  color: #666;
254
  }
255
 
256
  /* Responsive Design */
257
+ @media (max-width: 900px) {
258
+ .main-grid {
259
  grid-template-columns: 1fr;
260
  }
261
 
262
+ .settings-card {
 
263
  grid-row: auto;
264
  }
265
 
266
+ .header h1 {
267
+ font-size: 2.2em;
268
  }
269
 
270
+ .header p {
271
  font-size: 1em;
272
  }
273
+ }
274
+
275
+ @media (max-width: 600px) {
276
+ .container {
277
+ padding: 10px;
278
+ }
279
+
280
+ .card {
281
+ padding: 15px;
282
+ }
283
+
284
+ .btn {
285
+ padding: 10px 20px;
286
+ }
287
  }