Skip to content

Commit 7e4329e

Browse files
codeperfectpluscodeperfectplus
committed
dashboard style improved
1 parent ceae809 commit 7e4329e

6 files changed

Lines changed: 46 additions & 80 deletions

File tree

‎src/static/css/style.css‎

Lines changed: 34 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
/* Base Colors */
44
--color-primary: #7ea0c4;
55
--color-secondary: #6c757d;
6-
--color-success: #28a745;
7-
--color-danger: #dc3545;
8-
--color-warning: #ffc107;
6+
--color-success: #57d474;
7+
--color-danger: #dd6c77;
8+
--color-warning: #d7b25c;
99
--color-info: #17a2b8;
1010
--color-light: #f8f9fa;
1111
--color-dark: #343a40;
@@ -137,8 +137,8 @@ body {
137137
.card {
138138
min-height: 140px;
139139
/* background: linear-gradient(120deg, #e3f2fd, #bbdefb); */
140-
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
141-
/* background: linear-gradient(200deg, #f5f7fa, #c3cfe2); */
140+
/* background: linear-gradient(135deg, #f5f7fa, #c3cfe2); */
141+
background: linear-gradient(200deg, #f5f7fa, #c3cfe2);
142142
/* background: linear-gradient(135deg, #f5faf7, #c3e2d0); */
143143
box-sizing: border-box;
144144
border: 1px solid #cdddeb;
@@ -153,7 +153,8 @@ body {
153153
transform: translateY(-10px);
154154
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
155155
transition: transform 0.3s, box-shadow 0.3s;
156-
}
156+
border: 2px solid var(--color-primary);
157+
}
157158

158159
/* Card Body Styles */
159160
.card-body {
@@ -163,18 +164,6 @@ body {
163164
align-items: center;
164165
}
165166

166-
/* Individual Card Types */
167-
.cpu-temp-card, .cpu-usage-card, .cpu-core-card, .memory-card, .cpu-frequency-card, .cpu-high-temp-card, .user-card, .battery-card {
168-
border-radius: 12px;
169-
transition: transform 0.3s ease, box-shadow 0.3s ease;
170-
}
171-
172-
173-
.cpu-temp-card:hover, .cpu-usage-card:hover, .cpu-core-card:hover, .memory-card:hover, .cpu-frequency-card:hover, .cpu-high-temp-card:hover, .user-card:hover, .battery-card:hover {
174-
transform: translateY(-5px);
175-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
176-
}
177-
178167
/* Card Title and Text Styles */
179168
.card-title {
180169
font-size: 1.5rem;
@@ -216,28 +205,13 @@ body {
216205
}
217206

218207
.temp-bar, .disk-bar, .frequency-bar, .cpu-usage-bar, .memory-usage-bar {
219-
height: 8px;
208+
height: 25px;
220209
transition: width 0.3s ease;
221210
}
222211

223-
.temp-bar {
224-
background-color: #ff5733;
225-
}
226-
227-
.disk-bar {
228-
background-color: var(--color-primary);
229-
}
230-
231-
.cpu-usage-bar {
232-
background-color: var(--color-primary);
233-
}
234-
235-
.memory-usage-bar {
236-
background-color: var(--color-primary);
237-
}
238-
239-
.memory-usage-fill, .frequency-bar {
240-
background-color: var(--color-primary);
212+
.battery-bar {
213+
height: 25px;
214+
transition: width 0.3s ease;
241215
}
242216

243217
.cpu-core-visualization {
@@ -250,15 +224,15 @@ body {
250224

251225
.cpu-core-bar {
252226
width: 15px;
253-
height: 5px;
227+
height: 55px;
254228
background-color: var(--color-primary);
255229
border-radius: 5px;
256230
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
257231
transition: background-color 0.3s ease;
258232
}
259233

260234
.cpu-core-bar:nth-child(even) {
261-
background-color: #0056b3;
235+
background-color: #d7b25c;
262236
}
263237

264238
.cpu-core-bar:hover {
@@ -304,88 +278,81 @@ body {
304278
/* batter bar */
305279
.battery-indicator {
306280
width: 100%;
307-
height: 10px;
308281
background-color: #e0e0e0;
309282
border-radius: 5px;
310283
overflow: hidden;
311284
position: relative;
312285
}
313286

314-
.battery-bar {
315-
height: 100%;
316-
background-color: var(--battery-color, #28a745); /* Default color is green */
317-
border-radius: 5px;
318-
transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
319-
}
320287

321288
/* Battery color indicators based on percentage */
322289
.battery-bar.low {
323-
background-color: #dc3545; /* Red for low battery */
290+
background-color: #dd6c77; /* Red for low battery */
324291
}
325292
.battery-bar.medium {
326-
background-color: #ffc107; /* Yellow for medium battery */
293+
background-color: #d7b25c; /* Yellow for medium battery */
327294
}
328295
.battery-bar.high {
329-
background-color: #28a745; /* Green for high battery */
296+
background-color: #57d474; /* Green for high battery */
330297
}
331298

332299
/* Temperature color indicators based on value */
333300
.temp-bar.low {
334-
background-color: #28a745; /* Green for low temperature */
301+
background-color: #57d474; /* Green for low temperature */
335302
}
336303
.temp-bar.medium {
337-
background-color: #ffc107; /* Yellow for medium temperature */
304+
background-color: #d7b25c; /* Yellow for medium temperature */
338305
}
339306
.temp-bar.high {
340-
background-color: #dc3545; /* Red for high temperature */
307+
background-color: #dd6c77; /* Red for high temperature */
341308
}
342309

343310
/* disk usage bar | disk-bar*/
344311

345312
.disk-bar.low {
346-
background-color: #28a745; /* Green for low disk usage */
313+
background-color: #57d474; /* Green for low disk usage */
347314
}
348315
.disk-bar.medium {
349-
background-color: #ffc107; /* Yellow for medium disk usage */
316+
background-color: #d7b25c; /* Yellow for medium disk usage */
350317
}
351318
.disk-bar.high {
352-
background-color: #dc3545; /* Red for high disk usage */
319+
background-color: #dd6c77; /* Red for high disk usage */
353320
}
354321

355322
/* cpu-usage-bar */
356323

357324
.cpu-usage-bar.low {
358-
background-color: #28a745; /* Green for low cpu usage */
325+
background-color: #57d474; /* Green for low cpu usage */
359326
}
360327
.cpu-usage-bar.medium {
361-
background-color: #ffc107; /* Yellow for medium cpu usage */
328+
background-color: #d7b25c; /* Yellow for medium cpu usage */
362329
}
363330
.cpu-usage-bar.high {
364-
background-color: #dc3545; /* Red for high cpu usage */
331+
background-color: #dd6c77; /* Red for high cpu usage */
365332
}
366333

367334
/* memory-usage-bar */
368335

369336
.memory-usage-bar.high {
370-
background-color: #28a745; /* Green for low memory usage */
337+
background-color: #57d474; /* Green for low memory usage */
371338
}
372339
.memory-usage-bar.medium {
373-
background-color: #ffc107; /* Yellow for medium memory usage */
340+
background-color: #d7b25c; /* Yellow for medium memory usage */
374341
}
375342
.memory-usage-bar.low {
376-
background-color: #dc3545; /* Red for high memory usage */
343+
background-color: #dd6c77; /* Red for high memory usage */
377344
}
378345

379346
/* .frequency-bar */
380347

381348
.frequency-bar.low {
382-
background-color: #28a745; /* Green for low frequency */
349+
background-color: #57d474; /* Green for low frequency */
383350
}
384351
.frequency-bar.medium {
385-
background-color: #ffc107; /* Yellow for medium frequency */
352+
background-color: #d7b25c; /* Yellow for medium frequency */
386353
}
387354
.frequency-bar.high {
388-
background-color: #dc3545; /* Red for high frequency */
355+
background-color: #dd6c77; /* Red for high frequency */
389356
}
390357

391358
/* speedtest result */
@@ -401,12 +368,12 @@ body {
401368
}
402369

403370
.bg-speedtest .fw-bold {
404-
color: #007bff; /* Highlighted labels */
371+
color: #72a0d1; /* Highlighted labels */
405372
}
406373

407374
.bg-speedtest .btn-primary {
408-
background-color: #007bff;
409-
border-color: #007bff;
375+
background-color: #72a0d1;
376+
border-color: #72a0d1;
410377
padding: 10px 20px;
411378
}
412379

‎src/static/js/refreshCardData.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,12 @@ async function refreshData() {
9797
// Update the color of bars based on their percentage
9898
function updateColorBars() {
9999
const barConfigs = [
100-
{ selector: '.battery-bar', dataAttr: 'data-battery', limits: [25, 75] },
101-
{ selector: '.disk-bar', dataAttr: 'data-disk-usage', limits: [60, 80] },
102-
{ selector: '.cpu-usage-bar', dataAttr: 'data-cpu-usage', limits: [50, 80] },
103-
{ selector: '.memory-usage-bar', dataAttr: 'data-memory-usage', limits: [.50, .80], maxAttr: 'data-memory-total' },
104-
{ selector: '.frequency-bar', dataAttr: 'data-cpu-frequency', limits: [.50, .80], maxAttr: 'data-cpu-max-frequency' },
105-
{ selector: '.temp-bar', dataAttr: 'data-cpu-temp', limits: [.70, .90], maxAttr: 'data-cpu-max-temp' }
100+
{ selector: '.battery-bar', dataAttr: 'data-battery', limits: [25, 75] }, // alreday in %
101+
{ selector: '.disk-bar', dataAttr: 'data-disk-usage', limits: [60, 80] }, // alreday in %
102+
{ selector: '.cpu-usage-bar', dataAttr: 'data-cpu-usage', limits: [50, 80] }, // alreday in %
103+
{ selector: '.memory-usage-bar', dataAttr: 'data-memory-usage', limits: [50, 80], maxAttr: 'data-memory-total' },
104+
{ selector: '.frequency-bar', dataAttr: 'data-cpu-frequency', limits: [50, 80], maxAttr: 'data-cpu-max-frequency' },
105+
{ selector: '.temp-bar', dataAttr: 'data-cpu-temp', limits: [20, 50], maxAttr: 'data-cpu-max-temp' }
106106
];
107107

108108
barConfigs.forEach(({ selector, dataAttr, limits, maxAttr }) => {
@@ -117,7 +117,7 @@ function updateColorBars() {
117117
if (maxElement) {
118118
const maxValue = parseFloat(maxElement.getAttribute(maxAttr));
119119
if (!isNaN(maxValue)) {
120-
limits = [maxValue * limits[0], maxValue * limits[1]];
120+
limits = [maxValue * limits[0]/100, maxValue * limits[1]/100];
121121
}
122122
}
123123

‎src/templates/card_comp/cpu/core.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="card cpu-core-card bg-cpu shadow-sm">
44
<div class="card-body d-flex flex-column align-items-center">
55
<h5 class="card-title mb-3">CPU Cores <i class="fas fa-microchip"></i></h5>
6-
<p class="card-text fs-4 mb-3">{{ system_info['cpu_core'] }} Cores</p>
6+
<!-- <p class="card-text fs-4 mb-3">{{ system_info['cpu_core'] }} Cores</p> -->
77
<div class="cpu-core-visualization">
88
{% for i in range(system_info['cpu_core']) %}
99
<div class="cpu-core-bar"></div>

‎src/templates/card_comp/other/speedtest.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ <h5 class="card-title mb-3">Perform Speed Test <i class="fas fa-tachometer-alt">
66

77
{% if not speedtest_result["show_prompt"] %}
88
<p class="card-text fs-4 mb-2">
9-
<span class="fw-bold">Download Speed:</span> {{ speedtest_result["download_speed"] }} Mbps
9+
<span class="fw-bold">Download Speed:</span> {{ speedtest_result["download_speed"] }}
1010
</p>
1111
<p class="card-text fs-4 mb-2">
12-
<span class="fw-bold">Upload Speed:</span> {{ speedtest_result["upload_speed"] }} Mbps
12+
<span class="fw-bold">Upload Speed:</span> {{ speedtest_result["upload_speed"] }}
1313
</p>
1414
<p class="card-text fs-5 mb-2">
1515
<span class="fw-bold">Test Last Performed:</span> {{ last_timestamp }}

‎src/templates/dashboard/developer.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,5 @@
2424
{% endblock %}
2525
{% block extra_scripts %}
2626
<script src="{{ url_for('static', filename='js/boot_time.js')}}"></script>
27-
<!-- <script src="{{ url_for('static', filename='js/color_bar.js')}}"></script> -->
2827
<script src="{{ url_for('static', filename='js/refreshCardData.js')}}"></script>
2928
{% endblock %}

‎src/templates/ext/navbar.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@
100100
<i class="fas fa-user-alt me-1"></i> SuperAdmin
101101
</span>
102102
{% else %}
103-
<i class="fas fa-user-alt me-1"></i>
104-
<span class="username">{{ current_user.username }}</span>
103+
<i class="fas fa-user-alt me-2"></i>
104+
<span class="username">{{ current_user.username | capitalize }}</span>
105105
{% endif %}
106106
</a>
107107

0 commit comments

Comments
 (0)