Skip to content

Commit 3a79486

Browse files
codeperfectpluscodeperfectplus
committed
art: 🎨 card css improved
1 parent 04c7210 commit 3a79486

10 files changed

Lines changed: 69 additions & 48 deletions

File tree

‎src/static/css/style.css‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ body {
248248

249249
/* The hover effect still applies */
250250
.battery-card:hover {
251-
transform: translateY(-8px);
251+
transform: translateY(-10px);
252252
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
253253
color: #fff;
254254
}
@@ -285,7 +285,7 @@ body {
285285

286286
/* General Card Hover Effect */
287287
.card:hover {
288-
transform: translateY(-8px); /* Slight lift effect */
288+
transform: translateY(-10px); /* Slight lift effect */
289289
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
290290
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
291291
}
@@ -294,80 +294,89 @@ body {
294294

295295
/* User-related info */
296296
.card.bg-username:hover {
297-
transform: translateY(-8px); /* Slight lift effect */
298-
box-shadow: 0 10px 20px var(--color-shadow);
297+
transform: translateX(-10px); /* Slight lift effect */
298+
box-shadow: 0 10px 20px var(--color-username);
299+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
300+
}
301+
302+
/* Boot time */
303+
.card.bg-boot:hover {
304+
transform: translateZ(-10px); /* Slight lift effect */
305+
box-shadow: 0 10px 20px var(--color-boot);
306+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
307+
}
308+
309+
/* Memory Use */
310+
.card.bg-dashboard-memory:hover {
311+
transform: translateY(-10px); /* Slight lift effect */
312+
box-shadow: 0 10px 20px var(--color-bg-dashboard-memory);
299313
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
300314
}
301315

302316
/* Network info */
303-
.card.bg-ipv4:hover {
304-
transform: translateY(-8px); /* Slight lift effect */
305-
box-shadow: 0 10px 20px var(--color-shadow);
317+
.card.bg-connection:hover {
318+
transform: translateX(-10px); /* Slight lift effect */
319+
box-shadow: 0 10px 20px var(--color-connection);
306320
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
307321
}
308322

309323
/* CPU-related info */
310324
.card.bg-cpu:hover {
311-
transform: translateY(-8px); /* Slight lift effect */
312-
box-shadow: 0 10px 20px var(--color-shadow);
325+
transform: translateX(-10px); /* Slight lift effect */
326+
box-shadow: 0 10px 20px var(--color-cpu);
313327
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
314328
}
315329

316-
/* Boot time */
317-
.card.bg-boot:hover {
318-
transform: translateY(-8px); /* Slight lift effect */
330+
/* Battery Card Styles */
331+
.battery-card:hover {
332+
transform: translateY(-10px); /* Slight lift effect */
319333
box-shadow: 0 10px 20px var(--color-shadow);
320334
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
321335
}
322336

323337
/* CPU usage */
324338
.card.bg-cpu-usage:hover {
325-
transform: translateY(-8px); /* Slight lift effect */
326-
box-shadow: 0 10px 20px var(--color-shadow);
339+
transform: translateX(-10px); /* Slight lift effect */
340+
box-shadow: 0 10px 20px var(--color-cpu-usage);
327341
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
328342
}
329343

330344
/* Memory usage */
331345
.card.bg-memory:hover {
332-
transform: translateY(-8px); /* Slight lift effect */
333-
box-shadow: 0 10px 20px var(--color-shadow);
346+
transform: translateZ(-10px); /* Slight lift effect */
347+
box-shadow: 0 10px 20px var(--color-memory);
334348
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
335349
}
336350

337351
/* Disk usage */
338352
.card.bg-disk:hover {
339-
transform: translateY(-8px); /* Slight lift effect */
340-
box-shadow: 0 10px 20px var(--color-shadow);
353+
transform: translateY(-10px); /* Slight lift effect */
354+
box-shadow: 0 10px 20px var(--color-disk);
341355
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
342356
}
343357

344358
/* Uptime */
345359
.card.bg-uptime:hover {
346-
transform: translateY(-8px); /* Slight lift effect */
347-
box-shadow: 0 10px 20px var(--color-shadow);
360+
transform: translateX(-10px); /* Slight lift effect */
361+
box-shadow: 0 10px 20px var(--color-uptime);
348362
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
349363
}
350364

351365
/* Network statistics */
352366
.card.bg-network:hover {
353-
transform: translateY(-8px); /* Slight lift effect */
354-
box-shadow: 0 10px 20px var(--color-shadow);
367+
transform: translateY(-10px); /* Slight lift effect */
368+
box-shadow: 0 10px 20px var(--color-network);
355369
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
356370
}
357371

358372
/* Speedtest */
359373
.card.bg-speedtest:hover {
360-
transform: translateY(-8px); /* Slight lift effect */
361-
box-shadow: 0 10px 20px var(--color-shadow);
374+
transform: translateZ(-10px); /* Slight lift effect */
375+
box-shadow: 0 10px 20px var(--color-speedtest);
362376
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
363377
}
364378

365-
/* Battery Card Styles */
366-
.battery-card:hover {
367-
transform: translateY(-8px); /* Slight lift effect */
368-
box-shadow: 0 10px 20px var(--color-shadow);
369-
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
370-
}
379+
371380

372381
/* Card Red Bottom Effect */
373382
.card::before {

‎src/templates/dasbhboard_comp/cpu_usages.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="card-body">
44
<h5 class="card-title">CPU Usage <i class="fas fa-microchip"></i></h5>
55
<p class="card-text fs-4">{{ system_info['cpu_percent'] }}%</p>
6-
<a href="{{ url_for('cpu_usage') }}" class="btn btn-primary">View Details</a>
6+
<a href="{{ url_for('cpu_usage') }}" class="btn btn-light">View Details</a>
77
</div>
88
</div>
99
</div>

‎src/templates/dasbhboard_comp/disk_usage.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="card-body">
44
<h5 class="card-title">Disk Usage <i class="fas fa-hdd"></i></h5>
55
<p class="card-text fs-4">{{ system_info['disk_usage'] }}%</p>
6-
<a href="{{ url_for('disk_usage') }}" class="btn btn-primary">View Details</a>
6+
<a href="{{ url_for('disk_usage') }}" class="btn btn-light">View Details</a>
77
</div>
88
</div>
99
</div>

src/templates/dasbhboard_comp/memnory_usage.html renamed to src/templates/dasbhboard_comp/memory_usage.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="card-body">
44
<h5 class="card-title">Memory Usage <i class="fas fa-memory"></i></h5>
55
<p class="card-text fs-4">{{ system_info['memory_percent'] }}%</p>
6-
<a href="{{ url_for('memory_usage') }}" class="btn btn-primary">View Details</a>
6+
<a href="{{ url_for('memory_usage') }}" class="btn btn-light">View Details</a>
77
</div>
88
</div>
99
</div>

‎src/templates/dasbhboard_comp/network_stats.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="card-body text-center">
44
<h5 class="card-title">Network Statistics <i class="fas fa-network-wired"></i></h5>
55
<p class="card-text fs-4">D: {{ system_info['network_sent'] }} MB / U: {{ system_info['network_received'] }} MB</p>
6-
<a href="{{ url_for('network_stats') }}" class="btn btn-primary">View Details</a>
6+
<a href="{{ url_for('network_stats') }}" class="btn btn-light">View Details</a>
77
</div>
88
</div>
99
</div>

‎src/templates/dasbhboard_comp/speedtest.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h5 class="card-title">Perform Speed Test <i class="fas fa-clock"></i></h5>
99
<p class="card-text fs-4">Try again test in : {{ next_test_time }} mins</p>
1010
{% endif %}
1111
{% if show_prompt %}
12-
<a href="{{ url_for('speedtest') }}" class="btn btn-primary">Run Speed Test</a>
12+
<a href="{{ url_for('speedtest') }}" class="btn btn-light">Run Speed Test</a>
1313
{% endif %}
1414
</div>
1515
</div>

‎src/templates/dasbhboard_comp/uptime.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="card-body bg-uptime">
44
<h5 class="card-title">System Uptime <i class="fas fa-clock"></i></h5>
55
<p class="card-text fs-4">{{ system_info['uptime'] }}</p>
6-
<a href="{{ url_for('system_health') }}" class="btn btn-primary">View Details</a>
6+
<a href="{{ url_for('system_health') }}" class="btn btn-light">View Details</a>
77
</div>
88
</div>
99
</div>

‎src/templates/dashboard.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{% include 'dasbhboard_comp/cpu_core.html' %}
1414
{% include 'dasbhboard_comp/battery_percentage.html' %}
1515
{% include 'dasbhboard_comp/cpu_usages.html' %}
16-
{% include 'dasbhboard_comp/memnory_usage.html' %}
16+
{% include 'dasbhboard_comp/memory_usage.html' %}
1717
{% include 'dasbhboard_comp/disk_usage.html' %}
1818
{% include 'dasbhboard_comp/uptime.html' %}
1919
{% include 'dasbhboard_comp/network_stats.html' %}

‎src/templates/ext/navbar.html‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,39 @@
1-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2-
<a class="navbar-brand {% if request.endpoint == 'dashboard' %}active{% endif %}" href="{{ url_for('dashboard') }}">Home</a>
1+
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
2+
<a class="navbar-brand d-flex align-items-center {% if request.endpoint == 'dashboard' %}active{% endif %}" href="{{ url_for('dashboard') }}">
3+
<i class="fas fa-home mr-2"></i> Home
4+
</a>
35
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
46
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
57
<span class="navbar-toggler-icon"></span>
68
</button>
79
<div class="collapse navbar-collapse" id="navbarNav">
8-
<ul class="navbar-nav">
10+
<ul class="navbar-nav ml-auto">
911
<li class="nav-item">
10-
<a class="nav-link {% if request.endpoint == 'cpu_usage' %}active{% endif %}" href="{{ url_for('cpu_usage') }}">CPU Usage</a>
12+
<a class="nav-link {% if request.endpoint == 'cpu_usage' %}active{% endif %}" href="{{ url_for('cpu_usage') }}">
13+
<i class="fas fa-microchip mr-1"></i> CPU Usage
14+
</a>
1115
</li>
1216
<li class="nav-item">
13-
<a class="nav-link {% if request.endpoint == 'memory_usage' %}active{% endif %}" href="{{ url_for('memory_usage') }}">Memory Usage</a>
17+
<a class="nav-link {% if request.endpoint == 'memory_usage' %}active{% endif %}" href="{{ url_for('memory_usage') }}">
18+
<i class="fas fa-memory mr-1"></i> Memory Usage
19+
</a>
1420
</li>
1521
<li class="nav-item">
16-
<a class="nav-link {% if request.endpoint == 'disk_usage' %}active{% endif %}" href="{{ url_for('disk_usage') }}">Disk Usage</a>
22+
<a class="nav-link {% if request.endpoint == 'disk_usage' %}active{% endif %}" href="{{ url_for('disk_usage') }}">
23+
<i class="fas fa-hdd mr-1"></i> Disk Usage
24+
</a>
1725
</li>
1826
<li class="nav-item">
19-
<a class="nav-link {% if request.endpoint == 'network_stats' %}active{% endif %}" href="{{ url_for('network_stats') }}">Network Stats</a>
27+
<a class="nav-link {% if request.endpoint == 'network_stats' %}active{% endif %}" href="{{ url_for('network_stats') }}">
28+
<i class="fas fa-network-wired mr-1"></i> Network Stats
29+
</a>
2030
</li>
21-
2231
<li class="nav-item">
23-
<a class="nav-link {% if request.endpoint == 'settings' %}active{% endif %}" href="{{ url_for('settings') }}">Settings</a>
32+
<a class="nav-link {% if request.endpoint == 'settings' %}active{% endif %}" href="{{ url_for('settings') }}">
33+
<i class="fas fa-cog mr-1"></i> Settings
34+
</a>
2435
</li>
36+
2537
</ul>
2638
</div>
27-
</nav>
39+
</nav>

‎src/templates/speedtest_result.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ <h1 class="card-title text-center mb-4">Speed Test Result</h1>
4040
</div>
4141
{% endif %}
4242
<div class="text-center mt-4">
43-
<a href="{{ url_for('dashboard') }}" class="btn btn-primary">Back to Dashboard</a>
43+
<a href="{{ url_for('dashboard') }}" class="btn btn-light">Back to Dashboard</a>
4444
</div>
4545
</div>
4646
</div>

0 commit comments

Comments
 (0)