Refactor memory card components and update memory usage display

Author: codeperfectplus

src/static/js/refreshCardData.js

@@ -179,7 +179,8 @@ async function refreshData() {
 
     updateCard('.bg-disk', 'disk_percent', data, '%', '.disk-bar');
     updateCard('.cpu-temp-card', 'current_temp', data, ' °C', '.temp-bar');
-    updateCard('.bg-memory', 'memory_percent', data, '%', '.memory-usage-bar');
+    updateCard('.memory-usage-percent-card', 'memory_percent', data, '%', '.memory-usage-bar');
+    updateCard('.memory-usage-number-card', 'memory_used', data, ' GB');
     updateCard('.cpu-frequency-card', 'cpu_frequency', data, ' MHz', '.frequency-bar', 'cpu_max_frequency');
     updateCard('.cpu-usage-card', 'cpu_percent', data, '%', '.cpu-usage-bar');
     updateCard('.network-received', 'network_received', data, 'MB');

src/templates/card_comp/memory/usage.html

@@ -1,6 +1,6 @@
 {% if card_settings.is_memory_usage_card_enabled %}
 <div class="col-md-6 col-lg-4 mb-4">
-    <div class="card memory-usage-card bg-memory shadow-sm" data-memory-usage="{{ system_info['memory_percent'] }}"
+    <div class="card memory-usage-percent-card" data-memory-usage="{{ system_info['memory_percent'] }}"
         data-memory-total="{{ system_info['memory_available'] }}">
         <div class="card-body d-flex flex-column align-items-center">
             <h5 class="card-title mb-3">Memory Usage <i class="fas fa-memory"></i></h5>

src/templates/card_comp/memory/used.html

@@ -1,8 +1,20 @@
 <div class="col-md-6 col-lg-4 mb-4">
-    <div class="card bg-memory shadow-sm border-0 rounded-3">
-        <div class="card-body">
-            <h5 class="card-title">Memory Used <i class="fas fa-memory"></i></h5>
-            <p class="card-text fs-4">{{ system_info['memory_used']}} GB</p>
+    <div class="card memory-usage-number-card" data-memory-total="{{ system_info['memory_available'] }}">
+        <div class="card-body d-flex flex-column align-items-center text-center">
+            <!-- Title with Icon -->
+            <h5 class="card-title mb-3 d-flex align-items-center">
+                <span class="me-2">Memory Usage</span>
+                <i class="fas fa-memory"></i>
+            </h5>
+
+            <!-- Memory Usage Text -->
+            <p class="card-text fs-4 usage-value" data-bs-toggle="tooltip" title="Current memory usage in percentage">
+                {{ system_info['memory_used'] }} GB
+            </p>
+            
+            <p class="card-text fs-6 text-muted mb-0">
+                Total Memory: {{ system_info['memory_available'] }} GB
+            </p>
         </div>
     </div>
-</div>
+</div>

src/utils.py

@@ -482,6 +482,7 @@ def _get_system_info():
     info = {
         'cpu_percent': cpu_usage_percent(),
         'memory_percent': round(memory_info.percent, 2),
+        "memory_used": get_memory_used(),
         'memory_available': memory_available,
         'disk_percent': round(disk_info.percent, 2),
         'disk_total': disk_total,