Skip to content

Commit 251585c

Browse files
codeperfectpluscodeperfectplus
committed
feat: ✨ new cards added
1 parent de03d7e commit 251585c

4 files changed

Lines changed: 194 additions & 23 deletions

File tree

‎app.py‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,50 @@
11
from flask import Flask, render_template
22
import os
3-
import psutil
3+
import psutil, datetime
44

55
app = Flask(__name__)
66

7+
def get_established_connections():
8+
connection = psutil.net_connections()
9+
10+
ipv4_dict = {}
11+
ipv6_dict = {}
12+
13+
for conn in connection:
14+
if conn.status == 'ESTABLISHED':
15+
if '.' in conn.laddr.ip:
16+
ipv4_dict = conn.laddr.ip
17+
elif ':' in conn.laddr.ip:
18+
ipv6_dict = conn.laddr.ip
19+
20+
return ipv4_dict, ipv6_dict
21+
722
def get_system_info():
823
info = {
924
'username': os.getlogin(),
1025
'cpu_percent': psutil.cpu_percent(interval=1),
1126
'memory_percent': psutil.virtual_memory().percent,
1227
'disk_usage': psutil.disk_usage('/').percent,
13-
'battery_percent': psutil.sensors_battery().percent if psutil.sensors_battery() else "N/A",
28+
'battery_percent': round(psutil.sensors_battery().percent) if psutil.sensors_battery() else "N/A",
29+
'cpu_core': psutil.cpu_count(),
30+
'boot_time': datetime.datetime.fromtimestamp(psutil.boot_time()).strftime("%Y-%m-%d %H:%M:%S"),
31+
'network_sent': round(psutil.net_io_counters().bytes_sent / (1024 ** 2), 2), # In MB
32+
'network_received': round(psutil.net_io_counters().bytes_recv / (1024 ** 2), 2), # In MB
33+
'process_count': len(psutil.pids()),
34+
'swap_memory': psutil.swap_memory().percent,
35+
'uptime': datetime.datetime.now() - datetime.datetime.fromtimestamp(psutil.boot_time())
1436
}
37+
38+
ipv4_conn, ipv6_conn = get_established_connections()
39+
info['ipv4_connections'] = ipv4_conn
40+
info['ipv6_connections'] = ipv6_conn
1541
return info
1642

43+
1744
@app.route('/')
1845
def dashboard():
1946
system_info = get_system_info()
2047
return render_template('dashboard.html', system_info=system_info)
2148

2249
if __name__ == '__main__':
23-
app.run(host='0.0.0.0', port=5000)
50+
app.run(host='0.0.0.0', port=5000, debug=True)

‎static/css/style.css‎

Lines changed: 72 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,96 @@
1+
/* General Body Styles */
12
body {
2-
font-family: 'Arial', sans-serif;
3-
background-color: #f4f4f4;
3+
font-family: 'Poppins', sans-serif;
4+
background-color: #f0f2f5;
45
color: #333;
6+
margin: 0;
7+
padding: 0;
8+
line-height: 1.6;
59
}
610

7-
header {
8-
background: linear-gradient(135deg, #007bff, #00d2ff);
11+
/* Header Styles */
12+
.header {
13+
background: linear-gradient(45deg, #00b4d8, #48cae4);
914
color: #fff;
10-
padding: 20px;
11-
border-bottom: 2px solid #0056b3;
15+
padding: 60px 0;
16+
margin-bottom: 30px;
17+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
1218
}
1319

20+
.header h1 {
21+
font-size: 3rem;
22+
font-weight: 700;
23+
}
24+
25+
/* Card Styles */
1426
.card {
27+
background: linear-gradient(135deg, #ffffff, #e0e0e0);
28+
border-radius: 10px;
29+
border: none;
30+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
1531
transition: transform 0.3s ease, box-shadow 0.3s ease;
16-
border: 1px solid #e0e0e0;
1732
}
1833

1934
.card:hover {
20-
transform: translateY(-10px);
21-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
35+
transform: translateY(-8px);
36+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
2237
}
2338

2439
.card-title {
25-
font-size: 1.25rem;
26-
font-weight: bold;
40+
font-size: 1.5rem;
41+
font-weight: 600;
42+
color: #00b4d8;
2743
}
2844

2945
.card-text {
30-
font-size: 1.125rem;
46+
font-size: 1.25rem;
47+
color: #495057;
3148
}
3249

50+
/* Responsive Design */
3351
@media (max-width: 768px) {
52+
.header h1 {
53+
font-size: 2.5rem;
54+
}
55+
3456
.card {
35-
margin-bottom: 1rem;
57+
margin-bottom: 20px;
3658
}
3759
}
60+
61+
/* Battery Card Styles */
62+
.battery-card {
63+
background: linear-gradient(135deg, #ffffff, #e0e0e0);
64+
border-radius: 10px;
65+
border: none;
66+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
67+
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
68+
color: #333;
69+
}
70+
71+
.battery-card[data-battery="100"] {
72+
background: linear-gradient(135deg, #76c7c0, #4caf50);
73+
}
74+
75+
.battery-card[data-battery="75"] {
76+
background: linear-gradient(135deg, #76c7c0, #ffeb3b);
77+
}
78+
79+
.battery-card[data-battery="50"] {
80+
background: linear-gradient(135deg, #fbc02d, #ff9800);
81+
}
82+
83+
.battery-card[data-battery="25"] {
84+
background: linear-gradient(135deg, #ff7043, #f44336);
85+
}
86+
87+
.battery-card[data-battery="0"] {
88+
background: linear-gradient(135deg, #f44336, #d32f2f);
89+
}
90+
91+
/* The hover effect still applies */
92+
.battery-card:hover {
93+
transform: translateY(-8px);
94+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
95+
color: #fff;
96+
}

‎static/js/script.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
11
$(document).ready(function() {
22
// Any custom JS animations or functionalities can go here.
33
});
4+
document.addEventListener('DOMContentLoaded', function () {
5+
const batteryCard = document.querySelector('.battery-card');
6+
const batteryPercent = parseInt(batteryCard.getAttribute('data-battery'), 10);
7+
8+
let backgroundColor;
9+
10+
if (batteryPercent >= 75) {
11+
backgroundColor = 'linear-gradient(135deg, #76c7c0, #4caf50)'; // Green
12+
} else if (batteryPercent >= 50) {
13+
backgroundColor = 'linear-gradient(135deg, #fbc02d, #ffeb3b)'; // Yellow
14+
} else if (batteryPercent >= 25) {
15+
backgroundColor = 'linear-gradient(135deg, #ff7043, #ff9800)'; // Orange
16+
} else {
17+
backgroundColor = 'linear-gradient(135deg, #f44336, #d32f2f)'; // Red
18+
}
19+
20+
batteryCard.style.background = backgroundColor;
21+
});

‎templates/dashboard.html‎

Lines changed: 74 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,51 +9,118 @@
99
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
1010
</head>
1111
<body>
12-
<header class="bg-primary text-white text-center py-4">
12+
<header class="header py-5 text-center">
1313
<h1 class="display-4">Server Dashboard</h1>
1414
</header>
1515
<div class="container mt-5">
1616
<div class="row mt-4">
17+
<!-- Repeat the card structure here as in the original HTML -->
18+
<!-- Example for one card -->
1719
<div class="col-md-6 col-lg-4 mb-4">
1820
<div class="card shadow-sm border-0 rounded-3">
1921
<div class="card-body">
20-
<h5 class="card-title">Username <i class="fa fa-user"></i></h5>
22+
<h5 class="card-title">Username <i class="fas fa-user"></i></h5>
2123
<p class="card-text fs-4">{{ system_info['username'] }}</p>
2224
</div>
2325
</div>
2426
</div>
2527
<div class="col-md-6 col-lg-4 mb-4">
2628
<div class="card shadow-sm border-0 rounded-3">
2729
<div class="card-body">
28-
<h5 class="card-title">CPU Usage <i class="fa fa-microchip"></i></h5>
30+
<h5 class="card-title">CPU Usage <i class="fas fa-microchip"></i></h5>
2931
<p class="card-text fs-4">{{ system_info['cpu_percent'] }}%</p>
3032
</div>
3133
</div>
3234
</div>
3335
<div class="col-md-6 col-lg-4 mb-4">
3436
<div class="card shadow-sm border-0 rounded-3">
3537
<div class="card-body">
36-
<h5 class="card-title">Memory Usage <i class="fa fa-memory"></i></h5>
38+
<h5 class="card-title">IPV4 <i class="fas fa-network-wired"></i></h5>
39+
<p class="card-text fs-4">{{ system_info['ipv4_connections'] }}</p>
40+
</div>
41+
</div>
42+
</div>
43+
<div class="col-md-6 col-lg-4 mb-4">
44+
<div class="card shadow-sm border-0 rounded-3">
45+
<div class="card-body">
46+
<h5 class="card-title">CPU Core <i class="fas fa-microchip"></i></h5>
47+
<p class="card-text fs-4">{{ system_info['cpu_core'] }}</p>
48+
</div>
49+
</div>
50+
</div>
51+
<div class="col-md-6 col-lg-4 mb-4">
52+
<div class="card shadow-sm border-0 rounded-3">
53+
<div class="card-body">
54+
<h5 class="card-title">Boot Time <i class="fas fa-clock"></i></h5>
55+
<p class="card-text fs-4">{{ system_info['boot_time'] }}</p>
56+
</div>
57+
</div>
58+
</div>
59+
<div class="col-md-6 col-lg-4 mb-4">
60+
<div class="card shadow-sm border-0 rounded-3">
61+
<div class="card-body">
62+
<h5 class="card-title">Memory Usage <i class="fas fa-memory"></i></h5>
3763
<p class="card-text fs-4">{{ system_info['memory_percent'] }}%</p>
3864
</div>
3965
</div>
4066
</div>
4167
<div class="col-md-6 col-lg-4 mb-4">
4268
<div class="card shadow-sm border-0 rounded-3">
4369
<div class="card-body">
44-
<h5 class="card-title">Disk Usage <i class="fa fa-hdd"></i></h5>
70+
<h5 class="card-title">Disk Usage <i class="fas fa-hdd"></i></h5>
4571
<p class="card-text fs-4">{{ system_info['disk_usage'] }}%</p>
4672
</div>
4773
</div>
4874
</div>
4975
<div class="col-md-6 col-lg-4 mb-4">
50-
<div class="card shadow-sm border-0 rounded-3">
76+
<div class="card shadow-sm border-0 rounded-3 battery-card" data-battery="{{ system_info['battery_percent'] }}">
5177
<div class="card-body">
52-
<h5 class="card-title">Battery Percentage <i class="fa fa-battery-three-quarters"></i></h5>
78+
<h5 class="card-title">Battery Percentage <i class="fas fa-battery-three-quarters"></i></h5>
5379
<p class="card-text fs-4">{{ system_info['battery_percent'] }}%</p>
5480
</div>
5581
</div>
5682
</div>
83+
<div class="col-md-6 col-lg-4 mb-4">
84+
<div class="card shadow-sm border-0 rounded-3">
85+
<div class="card-body">
86+
<h5 class="card-title">Network Sent <i class="fas fa-upload"></i></h5>
87+
<p class="card-text fs-4">{{ system_info['network_sent'] }} MB</p>
88+
</div>
89+
</div>
90+
</div>
91+
<div class="col-md-6 col-lg-4 mb-4">
92+
<div class="card shadow-sm border-0 rounded-3">
93+
<div class="card-body">
94+
<h5 class="card-title">Network Received <i class="fas fa-download"></i></h5>
95+
<p class="card-text fs-4">{{ system_info['network_received'] }} MB</p>
96+
</div>
97+
</div>
98+
</div>
99+
<div class="col-md-6 col-lg-4 mb-4">
100+
<div class="card shadow-sm border-0 rounded-3">
101+
<div class="card-body">
102+
<h5 class="card-title">Process Count <i class="fas fa-tasks"></i></h5>
103+
<p class="card-text fs-4">{{ system_info['process_count'] }}</p>
104+
</div>
105+
</div>
106+
</div>
107+
<div class="col-md-6 col-lg-4 mb-4">
108+
<div class="card shadow-sm border-0 rounded-3">
109+
<div class="card-body">
110+
<h5 class="card-title">Swap Memory Usage <i class="fas fa-exchange-alt"></i></h5>
111+
<p class="card-text fs-4">{{ system_info['swap_memory'] }}%</p>
112+
</div>
113+
</div>
114+
</div>
115+
<div class="col-md-6 col-lg-4 mb-4">
116+
<div class="card shadow-sm border-0 rounded-3">
117+
<div class="card-body">
118+
<h5 class="card-title">System Uptime <i class="fas fa-clock"></i></h5>
119+
<p class="card-text fs-4">{{ system_info['uptime'] }}</p>
120+
</div>
121+
</div>
122+
</div>
123+
57124
</div>
58125
</div>
59126
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

0 commit comments

Comments
 (0)