os card design improvement

os card improvement
color coding fixed

Author: codeperfectplus

src/templates/card_comp/cpu/core.html

@@ -2,8 +2,7 @@
 <div class="col-md-6 col-lg-4 mb-4">
     <div class="card cpu-core-card bg-cpu shadow-sm">
         <div class="card-body d-flex flex-column align-items-center text-center">
-            <h5 class="card-title mb-3">CPU Cores <i class="fas fa-microchip"></i></h5>
-            <p class="card-text fs-4 mb-3">{{ system_info['cpu_core'] }} Cores</p>
+            <h5 class="card-title mb-3">{{ system_info['cpu_core'] }} CPU Cores <i class="fas fa-microchip"></i></h5>
             <div class="cpu-core-visualization d-flex justify-content-center flex-wrap">
                 {% for i in range(system_info['cpu_core']) %} 
                 <div class="cpu-core-bar mx-1"></div>

src/templates/card_comp/other/os_info.html

@@ -1,10 +1,17 @@
 {% if card_settings.is_user_card_enabled %}
 <div class="col-md-6 col-lg-4 mb-4">
-    <div class="card user-card bg-username shadow-sm">
-        <div class="card-body text-center">
-            <h5 class="card-title">Installed OS <i class="fa-solid fa-server"></i></h5>
-            <p class="card-text fs-5"><i class="fa-brands fa-{{ system_info['os_info']['os_name']|lower }}"></i>
-                {{ system_info['os_info']['os_full_name'] }}</p>
+    <div class="card user-card shadow-sm border-0 rounded-3 bg-dark text-light">
+        <div class="card-body text-center p-4">
+            <!-- OS Icon and Name -->
+            <h5 class="card-title d-flex justify-content-center align-items-center mb-3">
+                <i class="fa-brands fa-{{ system_info['os_info']['os_name']|lower }} me-2 text-info fs-1"></i>
+                <span>{{ system_info['os_info']['os_full_name'] }}</span>
+            </h5>
+            
+            <!-- Optional OS Details -->
+            <p class="card-text text-muted fs-6 mt-2">
+                {{ system_info['os_info']['os_version'] }} - {{ system_info['os_info']['operating_system'] }}
+            </p>
         </div>
     </div>
 </div>

src/templates/card_comp/other/username.html

@@ -1,12 +1,19 @@
 {% if card_settings.is_user_card_enabled %}
 <div class="col-md-6 col-lg-4 mb-4">
-    <div class="card user-card shadow-sm">
-        <div class="card-body text-center">
-            <h5 class="card-title mb-3">System Node <i class="fas fa-user"></i></h5>
-            <div class="d-flex justify-content-center align-items-center">
-                <p class="card-text fs-5 fw-bold mb-1">{{ system_info['system_username'] }}<span class="text-muted">@{{ system_ip_address }}</span></p>
+    <div class="card user-card shadow-sm border-0 rounded-3 bg-dark text-light">
+        <div class="card-body text-center p-4">
+            <!-- Card Title -->
+            <h5 class="card-title">
+                {{ system_info['system_username'] }}@{{ system_info['nodename'] }}
+            </h5>
+
+            <!-- User Info -->
+            <div class="d-flex justify-content-center align-items-center mt-3">
+                <p class="card-text fs-5 fw-bold mb-0">
+                    {{ system_info['system_username'] }} 
+                    <span class="text-muted">@{{ system_ip_address }}</span>
+                </p>
             </div>
-            <p class="card-text fs-6 text-secondary">{{ system_info['system_username'] }}@{{ system_info['nodename'] }}</p>
         </div>
     </div>
 </div>