Update color coding and limits for CPU, memory, frequency, and temperature bars

Author: codeperfectplus

src/static/css/style.css

@@ -135,7 +135,7 @@ body {
 
 /* General Card Styles */
 .card {
-    min-height: 160px;
+    min-height: 190px;
     /* background: linear-gradient(120deg, #e3f2fd, #bbdefb); */
     /* background: linear-gradient(135deg, #f5f7fa, #c3cfe2); */
     background: linear-gradient(200deg, #f5f7fa, #c3cfe2);
@@ -197,7 +197,7 @@ body {
     font-weight: bold;
 }
 
-.temp-indicator, .usage-indicator, .memory-usage-bar, .frequency-indicator {
+.temp-indicator, .usage-indicator, .memory-usage-bar, .frequency-indicator, .battery-indicator {
     width: 100%;
     background-color: #e2e6ea;
     border-radius: 5px;
@@ -209,7 +209,6 @@ body {
     transition: width 0.3s ease;
 }
 
-
 .cpu-core-visualization {
     display: flex;
     justify-content: center;
@@ -272,13 +271,6 @@ body {
 }
 
 /* batter bar */
-.battery-indicator {
-    width: 100%;
-    background-color: #e0e0e0;
-    border-radius: 5px;
-    overflow: hidden;
-    position: relative;
-}
 
 
 /* Battery color indicators based on percentage */
@@ -342,7 +334,7 @@ body {
 /* .frequency-bar */
 
 .frequency-bar.low {
-    background-color: #57d474; /* Green for low frequency */
+    background: linear-gradient(90deg, #57d474, #41d865); /* Green for low temperature */
 }
 .frequency-bar.medium {
     background-color: #d7b25c; /* Yellow for medium frequency */

src/static/js/refreshCardData.js

@@ -99,10 +99,10 @@ function updateColorBars() {
     const barConfigs = [
         { selector: '.battery-bar', dataAttr: 'data-battery', limits: [25, 75] }, // alreday in %
         { selector: '.disk-bar', dataAttr: 'data-disk-usage', limits: [60, 80] }, // alreday in %
-        { selector: '.cpu-usage-bar', dataAttr: 'data-cpu-usage', limits: [50, 80] }, // alreday in %
-        { selector: '.memory-usage-bar', dataAttr: 'data-memory-usage', limits: [50, 80], maxAttr: 'data-memory-total' },
-        { selector: '.frequency-bar', dataAttr: 'data-cpu-frequency', limits: [50, 80], maxAttr: 'data-cpu-max-frequency' },
-        { selector: '.temp-bar', dataAttr: 'data-cpu-temp', limits: [20, 50], maxAttr: 'data-cpu-max-temp' }
+        { selector: '.cpu-usage-bar', dataAttr: 'data-cpu-usage', limits: [60, 90] }, // alreday in %
+        { selector: '.memory-usage-bar', dataAttr: 'data-memory-usage', limits: [60, 90], maxAttr: 'data-memory-total' },
+        { selector: '.frequency-bar', dataAttr: 'data-cpu-frequency', limits: [60, 90], maxAttr: 'data-cpu-max-frequency' },
+        { selector: '.temp-bar', dataAttr: 'data-cpu-temp', limits: [70, 90], maxAttr: 'data-cpu-max-temp' }
     ];
 
     barConfigs.forEach(({ selector, dataAttr, limits, maxAttr }) => {
@@ -111,22 +111,21 @@ function updateColorBars() {
         const maxElement = maxAttr ? document.querySelector(`[${maxAttr}]`) : null;
 
         if (!bar || !card) return;
-        let percentage = parseFloat(bar.style.width);
-        if (isNaN(percentage)) return;
+        let card_value = parseFloat(bar.style.width);
+        if (isNaN(card_value)) return;
 
         if (maxElement) {
             const maxValue = parseFloat(maxElement.getAttribute(maxAttr));
             if (!isNaN(maxValue)) {
                 limits = [maxValue * limits[0]/100, maxValue * limits[1]/100];
             }
         }
-
-        percentage = Math.min(percentage, 100); // Ensure percentage is not greater than 100
+        
         bar.classList.remove('low', 'medium', 'high');
         // Apply the appropriate class based on the limits
-        if (percentage <= limits[0]) {
+        if (card_value <= limits[0]) {
             bar.classList.add('low');
-        } else if (percentage > limits[0] && percentage <= limits[1]) {
+        } else if (card_value > limits[0] && card_value <= limits[1]) {
             bar.classList.add('medium');
         } else {
             bar.classList.add('high');

src/templates/card_comp/cpu/current_temp.html

@@ -8,6 +8,7 @@ <h5 class="card-title mb-3">CPU Temperature <i class="fas fa-microchip"></i></h5
             <div class="temp-indicator mt-2">
                 <div class="temp-bar" style="width: {{ system_info['current_temp'] }}%;"></div>
             </div>
+            <p class="card-text">Max Temperature: {{ system_info['high_temp'] }} &deg;C</p>
         </div>
     </div>
 </div>

src/templates/card_comp/cpu/frequency.html

@@ -9,6 +9,7 @@ <h5 class="card-title mb-3">CPU Frequency <i class="fas fa-microchip"></i></h5>
             <div class="frequency-indicator mt-3">
                 <div class="frequency-bar" style="width: {{ 100 * system_info['cpu_frequency'] / (system_info['cpu_max_frequency'] if system_info['cpu_max_frequency'] != 0 else 1) }}%;"></div>
             </div>
+            <p class="card-text fs-6 mt-2">Max Frequency: {{ system_info['cpu_max_frequency'] }} MHz</p>
         </div>
     </div>
 </div>

src/templates/card_comp/disk/usage.html

@@ -9,6 +9,7 @@ <h5 class="card-title mb-3">Disk Usage <i class="fas fa-hdd"></i></h5>
             <div class="usage-indicator mt-2">
                 <div class="disk-bar" style="width: {{ system_info['disk_percent'] }}%;"></div>
             </div>
+            <p class="card-text fs-6 mt-2">Total Disk: {{ system_info['disk_total'] }} Gb</p>
         </div>
     </div>
 </div>

src/templates/card_comp/memory/usage.html

@@ -10,6 +10,7 @@ <h5 class="card-title mb-3">Memory Usage <i class="fas fa-memory"></i></h5>
             <div class="usage-indicator mt-2">
                 <div class="memory-usage-bar" style="width: {{ system_info['memory_percent'] }}%;"></div>
             </div>
+            <p class="card-text fs-6 mt-2">Total Memory: {{ system_info['memory_available'] }} Mb</p>
         </div>
     </div>
 </div>

src/utils.py

@@ -437,6 +437,7 @@ def _get_system_info():
     """
     boot_time = get_cached_value('boot_time', lambda: datetime.datetime.fromtimestamp(psutil.boot_time()))
     uptime_dict = get_cached_value('uptime', lambda: format_uptime(datetime.datetime.now() - boot_time))
+    disk_total = get_cached_value("disk_total", get_disk_total)
     memory_available = get_cached_value("memory_available", get_memory_available) 
     # Gathering fresh system information
     battery_info = psutil.sensors_battery()
@@ -454,6 +455,7 @@ def _get_system_info():
         'memory_percent': round(memory_info.percent, 2),
         'memory_available': memory_available,
         'disk_percent': round(disk_info.percent, 2),
+        'disk_total': disk_total,
         'network_sent': network_sent,
         'battery_percent': round(battery_info.percent, 1) if battery_info else 0,
         'network_received': network_received,