Skip to content

Commit 52eedb2

Browse files
SolrikkSolrikk
authored
# UI improvements and data visualization enhancements
1 parent 9b65557 commit 52eedb2

File tree

1 file changed

+206
-58
lines changed

1 file changed

+206
-58
lines changed

‎styles.css

+206-58
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,254 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
21

3-
body {
4-
display: flex;
5-
justify-content: center;
6-
align-items: center;
7-
height: 100vh;
8-
margin: 0;
9-
font-family: Arial, sans-serif;
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
3+
4+
:root {
5+
--primary-color: #72007a;
6+
--primary-dark: #47004d;
7+
--primary-light: #a8009e;
8+
--text-color: #333;
9+
--bg-color: #f8f8f8;
10+
--card-bg: #ffffff;
11+
--border-radius: 8px;
12+
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
1013
}
1114

12-
.container {
13-
text-align: center;
15+
* {
16+
box-sizing: border-box;
17+
margin: 0;
18+
padding: 0;
1419
}
1520

16-
form {
17-
display: inline-block;
18-
margin-top: 20px;
21+
body {
22+
font-family: 'Roboto', sans-serif;
23+
background-color: var(--bg-color);
24+
color: var(--text-color);
25+
line-height: 1.6;
26+
padding: 20px;
27+
min-height: 100vh;
1928
}
2029

21-
label, input, button {
22-
display: block;
23-
margin: 10px auto;
30+
.container {
31+
max-width: 1000px;
32+
margin: 0 auto;
33+
padding: 30px;
34+
background-color: var(--card-bg);
35+
border-radius: var(--border-radius);
36+
box-shadow: var(--shadow);
2437
}
38+
2539
h1 {
26-
margin: 20px 0;
27-
color: #72007a;
28-
font-size: 2em;
29-
font-weight: 500;
40+
color: var(--primary-color);
41+
font-size: 2.5em;
42+
font-weight: 700;
43+
text-align: center;
44+
margin-bottom: 10px;
45+
}
46+
47+
.subtitle {
48+
text-align: center;
49+
color: #666;
50+
margin-bottom: 30px;
3051
}
3152

3253
form {
33-
background: white;
34-
padding: 20px;
35-
border-radius: 8px;
36-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
37-
display: flex;
38-
flex-direction: column;
39-
align-items: center;
40-
width: 90%;
41-
max-width: 400px;
54+
background: var(--card-bg);
55+
padding: 25px;
56+
border-radius: var(--border-radius);
57+
box-shadow: var(--shadow);
58+
width: 100%;
59+
margin-bottom: 30px;
4260
}
4361

4462
form label {
45-
color: #7a006a;
63+
color: var(--primary-color);
4664
font-weight: 500;
4765
margin-bottom: 10px;
48-
align-self: flex-start;
66+
display: block;
4967
}
5068

5169
input[type="text"] {
5270
width: 100%;
5371
padding: 12px 15px;
5472
margin-bottom: 20px;
55-
border: 1px solid #bbb;
56-
border-radius: 5px;
73+
border: 1px solid #ddd;
74+
border-radius: var(--border-radius);
5775
font-size: 1em;
76+
transition: border-color 0.3s;
77+
}
78+
79+
input[type="text"]:focus {
80+
border-color: var(--primary-color);
81+
outline: none;
82+
box-shadow: 0 0 0 2px rgba(114, 0, 122, 0.2);
5883
}
5984

6085
button {
6186
padding: 12px 20px;
62-
background-color: #6c007a;
87+
background-color: var(--primary-color);
6388
color: white;
6489
border: none;
65-
border-radius: 5px;
90+
border-radius: var(--border-radius);
6691
font-weight: 500;
6792
cursor: pointer;
68-
transition: background-color 0.3s;
93+
transition: background-color 0.3s, transform 0.2s;
94+
display: block;
95+
width: 100%;
96+
font-size: 1em;
6997
}
7098

7199
button:hover {
72-
background-color: #47004d;
100+
background-color: var(--primary-dark);
101+
transform: translateY(-2px);
73102
}
74103

75-
h2 {
76-
margin: 30px 0 10px;
77-
color: #47004d;
104+
button:active {
105+
transform: translateY(0);
78106
}
79107

80-
ul {
81-
list-style-type: none;
82-
padding: 0;
83-
width: 90%;
84-
max-width: 400px;
108+
.instructions, .features {
109+
margin: 20px 0;
110+
padding: 20px;
111+
background-color: #f9f0fa;
112+
border-radius: var(--border-radius);
113+
border-left: 4px solid var(--primary-color);
114+
}
115+
116+
.instructions h3, .features h3 {
117+
color: var(--primary-color);
118+
margin-bottom: 10px;
119+
}
120+
121+
.instructions ol, .features ul {
122+
margin-left: 20px;
85123
}
86124

87-
li {
88-
background: white;
89-
margin: 10px 0;
90-
padding: 15px;
91-
border-radius: 8px;
92-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
93-
display: flex;
94-
justify-content: space-between;
95-
align-items: center;
125+
.instructions li, .features li {
126+
margin-bottom: 8px;
96127
}
97128

98-
li a {
99-
color: #7a0076;
129+
#resultsContainer {
130+
margin-top: 30px;
131+
}
132+
133+
#resultsContainer h2 {
134+
color: var(--primary-color);
135+
margin-bottom: 15px;
136+
padding-bottom: 8px;
137+
border-bottom: 2px solid #f0f0f0;
138+
}
139+
140+
#data-table {
141+
width: 100%;
142+
border-collapse: collapse;
143+
margin-bottom: 20px;
144+
box-shadow: var(--shadow);
145+
border-radius: var(--border-radius);
146+
overflow: hidden;
147+
}
148+
149+
#data-table thead {
150+
background-color: var(--primary-color);
151+
color: white;
152+
}
153+
154+
#data-table th, #data-table td {
155+
padding: 12px 15px;
156+
text-align: left;
157+
border-bottom: 1px solid #ddd;
158+
}
159+
160+
#data-table th {
161+
font-weight: 500;
162+
}
163+
164+
#data-table tbody tr:hover {
165+
background-color: #f9f0fa;
166+
}
167+
168+
#data-table .section-header {
169+
background-color: #f0f0f0;
170+
font-weight: 500;
171+
color: var(--primary-dark);
172+
}
173+
174+
#data-table .section-header td {
175+
font-size: 1.1em;
176+
padding: 10px 15px;
177+
}
178+
179+
.summary {
180+
background-color: #f9f0fa;
181+
padding: 10px 15px;
182+
border-radius: var(--border-radius);
183+
margin-top: 20px;
184+
color: var(--primary-dark);
185+
font-weight: 500;
186+
}
187+
188+
a {
189+
color: #009e92;
100190
text-decoration: none;
101191
font-weight: 500;
192+
transition: color 0.3s;
102193
}
103194

104-
li a:hover {
195+
a:hover {
196+
color: #00766d;
105197
text-decoration: underline;
106-
}
198+
}
199+
200+
.no-data {
201+
text-align: center;
202+
padding: 20px;
203+
color: #888;
204+
font-style: italic;
205+
}
206+
207+
#error {
208+
background-color: #ffebee;
209+
color: #c62828;
210+
padding: 12px 15px;
211+
border-radius: var(--border-radius);
212+
margin-bottom: 20px;
213+
display: none;
214+
}
215+
216+
#loading {
217+
text-align: center;
218+
margin: 20px 0;
219+
color: var(--primary-color);
220+
font-weight: 500;
221+
}
222+
223+
.spinner {
224+
width: 40px;
225+
height: 40px;
226+
margin: 10px auto;
227+
border: 3px solid rgba(114, 0, 122, 0.2);
228+
border-top-color: var(--primary-color);
229+
border-radius: 50%;
230+
animation: spin 1s ease-in-out infinite;
231+
}
232+
233+
@keyframes spin {
234+
to { transform: rotate(360deg); }
235+
}
236+
237+
@media (max-width: 800px) {
238+
body {
239+
padding: 10px;
240+
}
241+
242+
.container {
243+
padding: 20px;
244+
}
245+
246+
h1 {
247+
font-size: 2em;
248+
}
249+
250+
#data-table {
251+
display: block;
252+
overflow-x: auto;
253+
}
254+
}

0 commit comments

Comments
 (0)