Skip to content

Commit d882bbb

Browse files
codeperfectpluscodeperfectplus
committed
chore: card design updated
1 parent 0225992 commit d882bbb

8 files changed

Lines changed: 101 additions & 86 deletions

File tree

‎src/static/css/style.css‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,12 @@ body {
136136
/* General Card Styles */
137137
.card {
138138
min-height: 140px;
139-
background: linear-gradient(120deg, #e3f2fd, #bbdefb);
140-
border: 1px solid #cdddeb;
139+
/* background: linear-gradient(120deg, #e3f2fd, #bbdefb); */
140+
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
141+
/* background: linear-gradient(200deg, #f5f7fa, #c3cfe2); */
142+
/* background: linear-gradient(135deg, #f5faf7, #c3e2d0); */
143+
box-sizing: border-box;
144+
border: 1px solid #cdddeb;
141145
border-radius: 15px;
142146
box-shadow: 0 12px 24px var(--color-shadow);
143147
color: var(--color-dark);
@@ -165,10 +169,6 @@ body {
165169
transition: transform 0.3s ease, box-shadow 0.3s ease;
166170
}
167171

168-
.battery-card, .cpu-usage-card, .cpu-temp-card {
169-
background: linear-gradient(135deg, #e3f2fd, #bbdefb); /* Default gradient */
170-
transition: background 0.3s ease;
171-
}
172172

173173
.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 {
174174
transform: translateY(-5px);
@@ -184,9 +184,22 @@ body {
184184
}
185185

186186
.card-text {
187+
font-family: 'Roboto', sans-serif; /* Modern font for better readability */
187188
font-size: 1.25rem;
188189
color: var(--color-secondary);
189-
margin-bottom: 0;
190+
margin-bottom: 0.75rem;
191+
}
192+
193+
.text-muted {
194+
color: #6c757d; /* Subtle grey for less important text */
195+
}
196+
197+
.shadow-sm {
198+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
199+
}
200+
201+
.fw-bold {
202+
font-weight: 700; /* Bold username for emphasis */
190203
}
191204

192205
/* Specific Card Elements */
@@ -374,3 +387,29 @@ body {
374387
.frequency-bar.high {
375388
background-color: #dc3545; /* Red for high frequency */
376389
}
390+
391+
/* speedtest result */
392+
393+
<style>.bg-speedtest {
394+
background-color: #f1f4f9; /* Light background to match other cards */
395+
border-radius: 12px;
396+
}
397+
398+
.bg-speedtest .card-title {
399+
font-size: 1.5rem;
400+
color: #333;
401+
}
402+
403+
.bg-speedtest .fw-bold {
404+
color: #007bff; /* Highlighted labels */
405+
}
406+
407+
.bg-speedtest .btn-primary {
408+
background-color: #007bff;
409+
border-color: #007bff;
410+
padding: 10px 20px;
411+
}
412+
413+
.bg-speedtest .card-text {
414+
color: #495057;
415+
}

‎src/static/js/color_bar.js‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,42 @@
11
document.addEventListener('DOMContentLoaded', function () {
22
const bars = [
33
{ selector: '.battery-bar', dataAttr: 'data-battery', limits: [25, 75] },
4-
{ selector: '.disk-bar', dataAttr: 'data-disk-usage', limits: [50, 80] },
4+
{ selector: '.disk-bar', dataAttr: 'data-disk-usage', limits: [60, 80] },
55
{ selector: '.cpu-usage-bar', dataAttr: 'data-cpu-usage', limits: [50, 80] },
6-
{ selector: '.memory-usage-bar', dataAttr: 'data-memory-usage', limits: [.5, .8] , max_attr: 'data-memory-total' },
7-
{ selector: '.frequency-bar', dataAttr: 'data-cpu-frequency', limits: [.5, .8], max_attr: 'data-cpu-max-frequency' },
8-
{ selector: '.temp-bar', dataAttr: 'data-cpu-temp', limits: [.7, .9], max_attr: 'data-cpu-max-temp' },
9-
// todo: find max frequency and max temperature for the CPU
6+
{ selector: '.memory-usage-bar', dataAttr: 'data-memory-usage', limits: [0.5, 0.8], maxAttr: 'data-memory-total' },
7+
{ selector: '.frequency-bar', dataAttr: 'data-cpu-frequency', limits: [0.5, 0.8], maxAttr: 'data-cpu-max-frequency' },
8+
{ selector: '.temp-bar', dataAttr: 'data-cpu-temp', limits: [0.75, 0.9], maxAttr: 'data-cpu-max-temp' }
109
];
1110

12-
bars.forEach(({ selector, dataAttr, limits, max_attr}) => {
11+
bars.forEach(({ selector, dataAttr, limits, maxAttr }) => {
1312
const bar = document.querySelector(selector);
1413
const card = document.querySelector(`[${dataAttr}]`);
15-
const max_value = document.querySelector(`[${max_attr}]`);
16-
console.log(max_value);
17-
14+
const maxElement = maxAttr ? document.querySelector(`[${maxAttr}]`) : null;
1815

1916
if (!bar || !card) {
20-
// console.warn(`Element not found for selector: ${selector} or data attribute: ${dataAttr}`);
17+
console.warn(`Element not found for selector: ${selector} or data attribute: ${dataAttr}`);
2118
return;
2219
}
2320

24-
// if max_attr is defined, use that to define the limits
25-
if (max_value) {
26-
const max = parseInt(card.getAttribute(max_attr), 10);
27-
console.log("dataAttr: ", dataAttr, "max: ", max);
28-
if (isNaN(max)) {
29-
// console.warn(`Invalid max value for ${max_value}`);
30-
return;
31-
}
21+
let percentage = parseFloat(card.getAttribute(dataAttr));
3222

33-
limits = [max * limits[0], max * limits[1]];
34-
console.log(`Limits for ${dataAttr}: ${limits}`);
23+
if (isNaN(percentage)) {
24+
console.warn(`Invalid percentage value for ${dataAttr}`);
25+
return;
3526
}
3627

37-
const percentage = parseInt(card.getAttribute(dataAttr), 10);
28+
// If maxAttr is defined, use it to scale the limits
29+
if (maxElement) {
30+
const maxValue = parseFloat(maxElement.getAttribute(maxAttr));
31+
if (isNaN(maxValue)) {
32+
console.warn(`Invalid max value for ${maxAttr}`);
33+
return;
34+
}
3835

39-
if (isNaN(percentage)) {
40-
// console.warn(`Invalid percentage value for ${dataAttr}`);
41-
return;
36+
limits = [maxValue * limits[0], maxValue * limits[1]];
4237
}
4338

39+
// Apply class based on percentage within the defined limits
4440
if (percentage <= limits[0]) {
4541
bar.classList.add('low');
4642
} else if (percentage > limits[0] && percentage <= limits[1]) {

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

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
11
{% if card_settings.is_speedtest_enabled %}
22
<div class="col-md-12 mb-4">
3-
<div class="card bg-speedtest">
4-
<div class="card-body">
5-
<h5 class="card-title">Perform Speed Test <i class="fas fa-clock"></i></h5>{% if not speedtest_result["show_prompt"] %} <p
6-
class="card-text fs-4">Download Speed:{{ speedtest_result["download_speed"]}}</p>
7-
<p class="card-text fs-4">Upload Speed:{{ speedtest_result["upload_speed"]}}</p>
8-
<p class="card-text fs-4">Test Last Performed:{{ last_timestamp}}</p>
9-
<p class="card-text fs-4">Try again test in :{{ speedtest_result["remaining_time_for_next_test"] }} mins</p>{% endif %}
10-
{% if speedtest_result["show_prompt"] %} <a
11-
href="{{ url_for('speedtest')}}" class="btn btn-light">Run Speed Test</a>{% endif %}
3+
<div class="card bg-speedtest shadow-sm border-0 rounded-3">
4+
<div class="card-body text-center">
5+
<h5 class="card-title mb-3">Perform Speed Test <i class="fas fa-tachometer-alt"></i></h5>
6+
7+
{% if not speedtest_result["show_prompt"] %}
8+
<p class="card-text fs-4 mb-2">
9+
<span class="fw-bold">Download Speed:</span> {{ speedtest_result["download_speed"] }} Mbps
10+
</p>
11+
<p class="card-text fs-4 mb-2">
12+
<span class="fw-bold">Upload Speed:</span> {{ speedtest_result["upload_speed"] }} Mbps
13+
</p>
14+
<p class="card-text fs-5 mb-2">
15+
<span class="fw-bold">Test Last Performed:</span> {{ last_timestamp }}
16+
</p>
17+
<p class="card-text fs-5 mb-3">
18+
<span class="fw-bold">Try again in:</span> {{ speedtest_result["remaining_time_for_next_test"] }} mins
19+
</p>
20+
{% endif %}
21+
22+
{% if speedtest_result["show_prompt"] %}
23+
<a href="{{ url_for('speedtest') }}" class="btn btn-primary btn-lg">Run Speed Test</a>
24+
{% endif %}
1225
</div>
1326
</div>
1427
</div>
15-
{% endif %}
28+
{% endif %}

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

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,3 @@ <h5 class="card-title">System Uptime <i class="fas fa-clock"></i></h5>
1111
</div>
1212
</div>
1313
{% endif %}
14-
15-
16-
<!-- <script>
17-
// Function to format uptime as 'X days, Y hours, Z minutes, W seconds'
18-
function formatUptime(days, hours, minutes, seconds) {
19-
let uptimeString = `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`;
20-
return uptimeString;
21-
}
22-
23-
// Initial uptime values from the backend
24-
let days = parseInt('{{ system_info["uptime_days"] }}');
25-
let hours = parseInt('{{ system_info["uptime_hours"] }}');
26-
let minutes = parseInt('{{ system_info["uptime_minutes"] }}');
27-
let seconds = parseInt('{{ system_info["uptime_seconds"] }}');
28-
29-
// Function to update uptime
30-
function updateUptime() {
31-
seconds++;
32-
if (seconds >= 60) {
33-
seconds = 0;
34-
minutes++;
35-
if (minutes >= 60) {
36-
minutes = 0;
37-
hours++;
38-
if (hours >= 24) {
39-
hours = 0;
40-
days++;
41-
}
42-
}
43-
}
44-
45-
// Update the display
46-
document.getElementById('system-uptime').textContent = formatUptime(days, hours, minutes, seconds);
47-
}
48-
49-
// Update the uptime every second
50-
setInterval(updateUptime, 1000);
51-
</script> -->

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
{% if card_settings.is_user_card_enabled %}
22
<div class="col-md-6 col-lg-4 mb-4">
3-
<div class="card user-card bg-username shadow-sm">
3+
<div class="card user-card shadow-sm">
44
<div class="card-body text-center">
5-
<h5 class="card-title">System Node <i class="fas fa-user"></i></h5>
6-
<p class="card-text fs-5 mb-2">{{ system_info['system_username'] }}@{{ system_ip_address }}</p>
7-
<!-- <p class="card-text fs-5">{{ system_info['system_username'] }}@{{ system_info['nodename'] }}</p> -->
5+
<h5 class="card-title mb-3">System Node <i class="fas fa-user"></i></h5>
6+
<div class="d-flex justify-content-center align-items-center">
7+
<p class="card-text fs-5 fw-bold mb-1">{{ system_info['system_username'] }}<span class="text-muted">@{{ system_ip_address }}</span></p>
8+
</div>
9+
<p class="card-text fs-6 text-secondary">{{ system_info['system_username'] }}@{{ system_info['nodename'] }}</p>
810
</div>
911
</div>
1012
</div>

‎src/templates/card_comp/selector/refresh_button.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<label for="refresh-interval">Select Refresh Interval (seconds):</label>
44
<select id="refresh-interval">
55
<option value="60000" {% if user_dashboard_settings.refresh_interval == 0 %}selected{% endif %}>No Refresh</option>
6-
<!-- <option value="1" {% if user_dashboard_settings.refresh_interval == 1 %}selected{% endif %}>1 seconds</option> -->
6+
<option value="2" {% if user_dashboard_settings.refresh_interval == 2 %}selected{% endif %}>2 seconds</option>
77
<option value="5" {% if user_dashboard_settings.refresh_interval == 5 %}selected{% endif %}>5 seconds</option>
88
<option value="10" {% if user_dashboard_settings.refresh_interval == 10 %}selected{% endif %}>10 seconds</option>
99
<option value="15" {% if user_dashboard_settings.refresh_interval == 15 %}selected{% endif %}>15 seconds</option>

‎src/templates/info_pages/cpu_info.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h2 class="my-4">CPU
1111
<div class="container mt-4">
1212
<div class="row">{% include 'card_comp/cpu/core.html' %} {% include 'card_comp/cpu/frequency.html' %} {%
1313
include 'card_comp/cpu/usages.html' %} {% include 'card_comp/cpu/current_temp.html' %} {% include
14-
'card_comp/cpu/highest_temp.html' %} {% include 'card_comp/cpu/critical_temp.html' %} </div>
14+
'card_comp/cpu/highest_temp.html' %} </div>
1515
</div>
1616
{% endblock %}
1717
{% block extra_scripts %}

‎src/utils.py‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -444,6 +444,7 @@ def _get_system_info():
444444
disk_info = psutil.disk_usage('/')
445445
network_sent, network_received = get_network_io()
446446
cpu_freq, max_freq = get_cpu_frequency()
447+
current_temp, high_temp, critical_temp = get_cpu_temp()
447448

448449
# ifconfig | grep -E 'RX packets|TX packets' -A 1
449450

@@ -460,7 +461,9 @@ def _get_system_info():
460461
'dashboard_memory_usage': get_flask_memory_usage(),
461462
'cpu_frequency': cpu_freq,
462463
'cpu_max_frequency': max_freq,
463-
'current_temp': get_cpu_temp()[0],
464+
'current_temp': current_temp,
465+
'high_temp': high_temp,
466+
'critical_temp': critical_temp,
464467
'timestamp': datetime.datetime.now(),
465468
}
466469
# update uptime dictionary

0 commit comments

Comments
 (0)