Skip to content

Commit c749c34

Browse files
codeperfectpluscodeperfectplus
committed
art: css changes made to the webpage
1 parent 2e7d529 commit c749c34

7 files changed

Lines changed: 100 additions & 55 deletions

File tree

‎README.md‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,49 @@
11
# SystemDashboard
22

3-
System Dashboard is flask app to monitor the server stats like CPU, Memory, Disk, Network etc. It also provides the option to monitor the server stats in real time.
3+
System Dashboard is a Flask app designed to monitor server stats such as CPU, Memory, Disk, and Network. It also provides real-time monitoring capabilities.
44

55
## Installation
66

7-
1. Clone the repository
7+
1. Clone the repository:
88

99
```bash
1010
git clone https://github.com/codeperfectplus/SystemDashboard.git
1111
```
1212

13-
2. Install the dependencies
13+
2. Install the dependencies:
1414

1515
```bash
1616
pip install -r requirements.txt
1717
```
1818

19-
3. Run the app
19+
3. Run the app:
2020

2121
```bash
2222
python app.py
2323
```
2424

25-
4. Open the app in your browser
25+
4. Open the app in your browser:
2626

2727
```bash
2828
http://localhost:5000
2929
```
3030

3131
## Features
3232

33-
- Monitor the server stats like CPU, Memory, Disk, Network etc.
34-
- Check the network speed of the server. (Speed test)
35-
- Rate limit the speed test to avoid the abuse.
33+
- Monitor server stats like CPU, Memory, Disk, and Network.
34+
- Check the network speed of the server using a speed test.
35+
- Rate limit the speed test to prevent abuse.
3636

37-
## Why not the docker image?
38-
39-
I have not created the docker image for this project because it requires the access to the host machine to get the server stats. So, it is not possible to get the server stats from the docker container.
37+
## Why not use a Docker image?
4038

39+
A Docker image has not been created for this project because it requires access to the host machine in order to retrieve server stats. Therefore, it is not possible to obtain server stats from within a Docker container.
4140

4241
## Acknowledgments
43-
| Project | License | Repository |
44-
|---------|---------|------------|
45-
| `speedtest-cli` | Apache License 2.0 | [GitHub repository](https://github.com/sivel/speedtest-cli) |
46-
| `psutil` | BSD 3-Clause License | [GitHub repository](https://github.com/giampaolo/psutil) |
47-
| `flask` | BSD 3-Clause License | [GitHub repository](https://github.com/pallets/flask) |
48-
| `chart.js` | MIT License | [GitHub repository](https://github.com/chartjs/Chart.js) |
42+
43+
| Project | License | Repository |
44+
| -------------- | ------------------- | ----------------------------------------------- |
45+
| `speedtest-cli`| Apache License 2.0 | [GitHub repository](https://github.com/sivel/speedtest-cli) |
46+
| `psutil` | BSD 3-Clause License| [GitHub repository](https://github.com/giampaolo/psutil) |
47+
| `flask` | BSD 3-Clause License| [GitHub repository](https://github.com/pallets/flask) |
48+
| `chart.js` | MIT License | [GitHub repository](https://github.com/chartjs/Chart.js) |
49+

‎app.py‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class SpeedTestResult(db.Model):
2020
download_speed = db.Column(db.String(50))
2121
upload_speed = db.Column(db.String(50))
2222
ping = db.Column(db.String(50))
23-
timestamp = db.Column(db.DateTime, default=datetime.datetime.utcnow)
23+
timestamp = db.Column(db.DateTime, default=datetime.datetime.now(datetime.UTC))
2424

2525
def __repr__(self):
2626
return f'<SpeedTestResult {self.download_speed}, {self.upload_speed}, {self.ping}>'
@@ -60,7 +60,7 @@ def run_speedtest():
6060

6161
@app.route('/speedtest')
6262
def speedtest():
63-
one_hour_ago = datetime.datetime.utcnow() - datetime.timedelta(hours=1)
63+
one_hour_ago = datetime.datetime.now(datetime.UTC) - datetime.timedelta(hours=1)
6464
recent_results = SpeedTestResult.query.filter(SpeedTestResult.timestamp > one_hour_ago).all()
6565

6666
if len(recent_results) < 3:
@@ -83,6 +83,7 @@ def speedtest():
8383
next_test_time=next_test_time)
8484

8585
def get_system_info():
86+
print("Getting system information...")
8687
ipv4_dict, ipv6_dict = get_established_connections()
8788
info = {
8889
'username': os.getlogin(),

‎static/css/style.css‎

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
body {
33
font-family: 'Arial', sans-serif;
44
color: #333;
5-
background-color: #f8f9fa;
5+
background-image: url('/static/images/background.jpg');
6+
background-size: cover; /* Ensure the image covers the entire background */
7+
background-repeat: no-repeat; /* Prevent the image from repeating */
8+
background-position: center center; /* Center the image */
69
}
710

811
.header {
@@ -20,32 +23,63 @@ body {
2023

2124
/* Navbar Styles */
2225
.navbar {
23-
background-color: #007bff; /* Bright blue background color */
26+
background-color: #0056b3; /* Dark blue background */
27+
padding: 0.75rem 1rem; /* Increased padding for a more substantial navbar */
28+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
29+
border-radius: 0.5rem; /* Slightly rounded corners */
2430
}
2531

2632
.navbar-brand {
27-
font-size: 1.5rem;
28-
color: #1a1414; /* White text color */
33+
font-size: 1.75rem; /* Slightly larger and bolder for prominence */
34+
color: #000000; /* White text color for contrast */
35+
font-weight: bold; /* Added weight for emphasis */
2936
}
3037

3138
.navbar-nav .nav-link {
3239
color: #000000; /* White text color */
40+
font-size: 1.125rem; /* Slightly larger font for readability */
41+
padding: 0.5rem 1rem; /* More padding for clickable area */
42+
transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
3343
}
3444

3545
.navbar-nav .nav-link:hover {
36-
color: #f8f9fa; /* Light text color on hover */
37-
background-color: #0056b3; /* Darker blue background on hover */
46+
color: #0056b3; /* Blue text on hover */
47+
background-color: #f8f9fa; /* Light gray background on hover */
3848
border-radius: 0.25rem;
3949
}
4050

51+
/* Active Page Styling */
52+
.navbar-nav .nav-link.active {
53+
background-color: #003d80; /* Darker blue for the active page */
54+
color: #ffffff; /* Keep the text white */
55+
border-radius: 0.25rem; /* Match the hover effect */
56+
}
57+
4158
.navbar-toggler {
42-
border-color: #ffffff; /* White border for toggler */
59+
border: none; /* Remove default border */
60+
outline: none; /* Remove focus outline */
61+
padding: 0.25rem 0.5rem; /* Smaller padding for a sleek look */
4362
}
4463

4564
.navbar-toggler-icon {
4665
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
66+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); /* Add subtle shadow */
4767
}
4868

69+
/* Responsive Styles */
70+
@media (max-width: 767.98px) {
71+
.navbar-nav .nav-link {
72+
padding-right: 1rem;
73+
padding-left: 1rem;
74+
text-align: center; /* Center-align links on smaller screens */
75+
}
76+
77+
.navbar-brand {
78+
font-size: 1.5rem; /* Adjust brand size on smaller screens */
79+
}
80+
}
81+
82+
4983
.card {
5084
min-height: 150px; /* Ensures consistent card height */
5185
}

‎static/images/background.jpg‎

442 KB
Loading

‎templates/base.html‎

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>{% block title %}Server Dashboard{% endblock %}</title>
7+
<title>{% block title %}System Dashboard{% endblock %}</title>
78
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
89
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
910
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
1011
{% block extra_head %}{% endblock %}
1112
</head>
13+
1214
<body>
13-
<header class="header py-5 text-center">
14-
<h1 class="display-4">Server Dashboard</h1>
15-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
16-
<a class="navbar-brand" href="{{ url_for('dashboard') }}">Home</a>
17-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
18-
<span class="navbar-toggler-icon"></span>
19-
</button>
20-
<div class="collapse navbar-collapse" id="navbarNav">
21-
<ul class="navbar-nav">
22-
<li class="nav-item">
23-
<a class="nav-link" href="{{ url_for('cpu_usage') }}">CPU Usage</a>
24-
</li>
25-
<li class="nav-item">
26-
<a class="nav-link" href="{{ url_for('memory_usage') }}">Memory Usage</a>
27-
</li>
28-
<li class="nav-item">
29-
<a class="nav-link" href="{{ url_for('disk_usage') }}">Disk Usage</a>
30-
</li>
31-
<li class="nav-item">
32-
<a class="nav-link" href="{{ url_for('network_stats') }}">Network Stats</a>
33-
</li>
34-
<li class="nav-item">
35-
<a class="nav-link" href="{{ url_for('system_health') }}">System Health</a>
36-
</li>
37-
</ul>
38-
</div>
39-
</nav>
40-
</header>
15+
{% include 'ext/navbar.html' %}
4116
<div class="container mt-5">
4217
{% block content %}{% endblock %}
4318
</div>
@@ -46,4 +21,5 @@ <h1 class="display-4">Server Dashboard</h1>
4621
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
4722
{% block extra_scripts %}{% endblock %}
4823
</body>
24+
4925
</html>

‎templates/ext/header.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- Header -->
2+
<!-- <header class="header py-5 text-center">
3+
<a href="/"><img
4+
src="https://capsule-render.vercel.app/api?type=rect&color=343a40&height=100&section=header&text=System Dashboard&fontSize=80%&fontColor=ffffff"
5+
alt="System Dashboard">
6+
</a>
7+
</header> -->

‎templates/ext/navbar.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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>
3+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
4+
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
5+
<span class="navbar-toggler-icon"></span>
6+
</button>
7+
<div class="collapse navbar-collapse" id="navbarNav">
8+
<ul class="navbar-nav">
9+
<li class="nav-item">
10+
<a class="nav-link {% if request.endpoint == 'cpu_usage' %}active{% endif %}" href="{{ url_for('cpu_usage') }}">CPU Usage</a>
11+
</li>
12+
<li class="nav-item">
13+
<a class="nav-link {% if request.endpoint == 'memory_usage' %}active{% endif %}" href="{{ url_for('memory_usage') }}">Memory Usage</a>
14+
</li>
15+
<li class="nav-item">
16+
<a class="nav-link {% if request.endpoint == 'disk_usage' %}active{% endif %}" href="{{ url_for('disk_usage') }}">Disk Usage</a>
17+
</li>
18+
<li class="nav-item">
19+
<a class="nav-link {% if request.endpoint == 'network_stats' %}active{% endif %}" href="{{ url_for('network_stats') }}">Network Stats</a>
20+
</li>
21+
<li class="nav-item">
22+
<a class="nav-link {% if request.endpoint == 'system_health' %}active{% endif %}" href="{{ url_for('system_health') }}">System Health</a>
23+
</li>
24+
</ul>
25+
</div>
26+
</nav>

0 commit comments

Comments
 (0)