Skip to content

Commit 7fafd2c

Browse files
codeperfectpluscodeperfectplus
committed
chore: css changes
1 parent c749c34 commit 7fafd2c

3 files changed

Lines changed: 86 additions & 30 deletions

File tree

‎static/css/style.css‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
body {
33
font-family: 'Arial', sans-serif;
44
color: #333;
5-
background-image: url('/static/images/background.jpg');
65
background-size: cover; /* Ensure the image covers the entire background */
76
background-repeat: no-repeat; /* Prevent the image from repeating */
87
background-position: center center; /* Center the image */
@@ -79,11 +78,61 @@ body {
7978
}
8079
}
8180

82-
81+
/* General Card Styles */
8382
.card {
8483
min-height: 150px; /* Ensures consistent card height */
84+
background-size: cover; /* Ensure the image covers the entire card */
85+
background-repeat: no-repeat; /* Prevent the image from repeating */
86+
background-position: center center; /* Center the image */
87+
color: #fff; /* Adjust text color for better contrast */
88+
border: none; /* Remove default border */
89+
border-radius: 10px; /* Rounded corners */
90+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
91+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
92+
}
93+
94+
/* Specific Background Colors */
95+
.card.bg-username {
96+
background-color: #007bff; /* Bright blue for user-related info */
97+
}
98+
99+
.card.bg-ipv4 {
100+
background-color: #ff5722; /* Warm orange for network info */
85101
}
86102

103+
.card.bg-cpu {
104+
background-color: #f44336; /* Red for CPU-related info */
105+
}
106+
107+
.card.bg-boot {
108+
background-color: #9c27b0; /* Purple for boot time */
109+
}
110+
111+
.card.bg-cpu-usage {
112+
background-color: #ff9800; /* Orange for CPU usage */
113+
}
114+
115+
.card.bg-memory {
116+
background-color: #3f51b5; /* Deep blue for memory usage */
117+
}
118+
119+
.card.bg-disk {
120+
background-color: #607d8b; /* Blue-gray for disk usage */
121+
}
122+
123+
.card.bg-uptime {
124+
background-color: #8bc34a; /* Light green for uptime */
125+
}
126+
127+
.card.bg-network {
128+
background-color: #00bcd4; /* Teal for network statistics */
129+
}
130+
131+
.card.bg-speedtest {
132+
background-color: #ff9800; /* Orange for CPU usage */
133+
}
134+
135+
87136
.card-body {
88137
display: flex;
89138
flex-direction: column;
@@ -111,15 +160,14 @@ body {
111160
}
112161
}
113162

114-
115163
/* Battery Card Styles */
116164
.battery-card {
117165
background: linear-gradient(135deg, #ffffff, #e0e0e0);
118166
border-radius: 10px;
119167
border: none;
120168
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
121169
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
122-
color: #333;
170+
color: #fff;
123171
}
124172

125173
.battery-card[data-battery="100"] {
@@ -140,6 +188,7 @@ body {
140188

141189
.battery-card[data-battery="0"] {
142190
background: linear-gradient(135deg, #f44336, #d32f2f);
191+
color: #fff;
143192
}
144193

145194
/* The hover effect still applies */

‎templates/base.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
</head>
1313

1414
<body>
15+
1516
{% include 'ext/navbar.html' %}
1617
<div class="container mt-5">
1718
{% block content %}{% endblock %}

‎templates/dashboard.html‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,35 @@
66
<div class="container mt-4">
77
<div class="row">
88
<!-- General Information Cards -->
9-
<div class="col-md-6 col-lg-4 mb-4">
10-
<div class="card shadow-sm border-0 rounded-3">
9+
<div class="col-md-6 mb-4">
10+
<div class="card bg-username shadow-sm border-0 rounded-3">
1111
<div class="card-body">
1212
<h5 class="card-title">Username <i class="fas fa-user"></i></h5>
1313
<p class="card-text fs-4">{{ system_info['username'] }}</p>
1414
</div>
1515
</div>
1616
</div>
1717

18-
<div class="col-md-6 col-lg-4 mb-4">
19-
<div class="card shadow-sm border-0 rounded-3">
18+
<div class="col-md-6 mb-4">
19+
<div class="card bg-boot shadow-sm border-0 rounded-3">
2020
<div class="card-body">
21-
<h5 class="card-title">IPV4 Connections <i class="fas fa-network-wired"></i></h5>
22-
<p class="card-text fs-4">{{ system_info['ipv4_connections'] }}</p>
21+
<h5 class="card-title">Boot Time <i class="fas fa-clock"></i></h5>
22+
<p class="card-text fs-4">{{ system_info['boot_time'] }}</p>
2323
</div>
2424
</div>
2525
</div>
2626

2727
<div class="col-md-6 col-lg-4 mb-4">
28-
<div class="card shadow-sm border-0 rounded-3">
28+
<div class="card bg-ipv4 shadow-sm border-0 rounded-3">
2929
<div class="card-body">
30-
<h5 class="card-title">Battery Percentage <i class="fas fa-battery-three-quarters"></i></h5>
31-
<p class="card-text fs-4">{{ system_info['battery_percent'] }}%</p>
30+
<h5 class="card-title">IPV4 Connections <i class="fas fa-network-wired"></i></h5>
31+
<p class="card-text fs-4">{{ system_info['ipv4_connections'] }}</p>
3232
</div>
3333
</div>
3434
</div>
3535

3636
<div class="col-md-6 col-lg-4 mb-4">
37-
<div class="card shadow-sm border-0 rounded-3">
37+
<div class="card bg-cpu shadow-sm border-0 rounded-3">
3838
<div class="card-body">
3939
<h5 class="card-title">CPU Cores <i class="fas fa-microchip"></i></h5>
4040
<p class="card-text fs-4">{{ system_info['cpu_core'] }}</p>
@@ -43,17 +43,16 @@ <h5 class="card-title">CPU Cores <i class="fas fa-microchip"></i></h5>
4343
</div>
4444

4545
<div class="col-md-6 col-lg-4 mb-4">
46-
<div class="card shadow-sm border-0 rounded-3">
46+
<div class="card battery-card shadow-sm border-0 rounded-3">
4747
<div class="card-body">
48-
<h5 class="card-title">Boot Time <i class="fas fa-clock"></i></h5>
49-
<p class="card-text fs-4">{{ system_info['boot_time'] }}</p>
48+
<h5 class="card-title">Battery Percentage <i class="fas fa-battery-three-quarters"></i></h5>
49+
<p class="card-text fs-4">{{ system_info['battery_percent'] }}%</p>
5050
</div>
5151
</div>
5252
</div>
5353

54-
<!-- Performance Metrics Cards -->
5554
<div class="col-md-6 col-lg-4 mb-4">
56-
<div class="card shadow-sm border-0 rounded-3">
55+
<div class="card bg-cpu-usage shadow-sm border-0 rounded-3">
5756
<div class="card-body">
5857
<h5 class="card-title">CPU Usage <i class="fas fa-microchip"></i></h5>
5958
<p class="card-text fs-4">{{ system_info['cpu_percent'] }}%</p>
@@ -63,7 +62,7 @@ <h5 class="card-title">CPU Usage <i class="fas fa-microchip"></i></h5>
6362
</div>
6463

6564
<div class="col-md-6 col-lg-4 mb-4">
66-
<div class="card shadow-sm border-0 rounded-3">
65+
<div class="card bg-memory shadow-sm border-0 rounded-3">
6766
<div class="card-body">
6867
<h5 class="card-title">Memory Usage <i class="fas fa-memory"></i></h5>
6968
<p class="card-text fs-4">{{ system_info['memory_percent'] }}%</p>
@@ -73,7 +72,7 @@ <h5 class="card-title">Memory Usage <i class="fas fa-memory"></i></h5>
7372
</div>
7473

7574
<div class="col-md-6 col-lg-4 mb-4">
76-
<div class="card shadow-sm border-0 rounded-3">
75+
<div class="card bg-disk shadow-sm border-0 rounded-3">
7776
<div class="card-body">
7877
<h5 class="card-title">Disk Usage <i class="fas fa-hdd"></i></h5>
7978
<p class="card-text fs-4">{{ system_info['disk_usage'] }}%</p>
@@ -83,7 +82,7 @@ <h5 class="card-title">Disk Usage <i class="fas fa-hdd"></i></h5>
8382
</div>
8483

8584
<div class="col-md-6 col-lg-4 mb-4">
86-
<div class="card shadow-sm border-0 rounded-3">
85+
<div class="card bg-uptime shadow-sm border-0 rounded-3">
8786
<div class="card-body">
8887
<h5 class="card-title">System Uptime <i class="fas fa-clock"></i></h5>
8988
<p class="card-text fs-4">{{ system_info['uptime'] }}</p>
@@ -92,22 +91,29 @@ <h5 class="card-title">System Uptime <i class="fas fa-clock"></i></h5>
9291
</div>
9392
</div>
9493

95-
<!-- Network Statistics Card (Last Row) -->
96-
<div class="col-md-12 mb-4">
97-
<div class="card shadow-sm border-0 rounded-3">
94+
<div class="col-md-6 col-lg-4 mb-4">
95+
<div class="card bg-network shadow-sm border-0 rounded-3">
9896
<div class="card-body text-center">
9997
<h5 class="card-title">Network Statistics <i class="fas fa-network-wired"></i></h5>
10098
<p class="card-text fs-4">Sent: {{ system_info['network_sent'] }} MB</p>
101-
<p class="card-text fs-4">Received: {{ system_info['network_received'] }} MB</p>
10299
<a href="{{ url_for('network_stats') }}" class="btn btn-primary">View Details</a>
103100
</div>
104101
</div>
105102
</div>
106-
107-
<!-- Speed Test Button -->
103+
104+
<div class="col-md-6 col-lg-4 mb-4">
105+
<div class="card bg-speedtest shadow-sm border-0 rounded-3">
106+
<div class="card-body">
107+
<h5 class="card-title">Perform Speed Test <i class="fas fa-clock"></i></h5>
108+
<p class="card-text fs-4">Test your serve/system speed</p>
109+
<a href="{{ url_for('speedtest') }}" class="btn btn-primary">Run Speed Test</a>
110+
</div>
111+
</div>
112+
</div>
113+
<!--
108114
<div class="col-md-12 mb-4 text-center">
109115
<a href="{{ url_for('speedtest') }}" class="btn btn-primary btn-lg">Run Speed Test</a>
110-
</div>
116+
</div> -->
111117
</div>
112118
</div>
113-
{% endblock %}
119+
{% endblock %}

0 commit comments

Comments
 (0)