Skip to content

Commit cb15655

Browse files
codeperfectpluscodeperfectplus
authored
Features/refactor (#31)
* powered by text added, improvement in the network scan page on network scan page, page loading animation added every card powered by text added * improved the contril page * Refactor control panel layout and add more utilities * chore: card component width fixed * Refactor card component styles * fixed checkbox * Refactor card component styles and add tooltips
1 parent 059e304 commit cb15655

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+610
-356
lines changed

‎README.md‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,22 @@ System Guard is a Flask app designed to monitor server stats such as CPU, Memory
44

55
## Features 🚀
66

7-
- Lightweight, open-source, and free to use with a straightforward installation process.
7+
- Lightweight, open-source, and free to use with a straightforward installation process, out-of-the-box monitoring solution.
88
- Capable of monitoring core server metrics like CPU, memory, disk usage, and network traffic.
9+
- Analyze fluctuations in server performance with historical data displayed as charts.
10+
- Centralized control panel for monitor/manage/analyze the fleet of servers.
11+
- Role-Based Access Control (RBAC) for managing user permissions.
912
- Includes built-in security features such as authentication for login, logout, and signup.
13+
- Analuze the network speed with the built-in speed test feature.
14+
- Anaylze the suspicious processes and terminate them with a single click.
15+
- Anaylze the network statistics with the built-in network statistics feature.
16+
- Anaylze the subnet for security vulnerabilities with the built-in security analysis feature.
17+
- Option to download historical data in CSV format for detailed analysis (upcoming feature).
18+
- Role-based dashboards tailored for Developer, Admin, IT Manager, and Manager roles (upcoming feature).
19+
- Update security updates with a single click or automatically update to the latest version to simplify maintenance.
20+
21+
## Old Features 🚀
22+
1023
- Administrators can manage user accounts by creating, updating, or deleting users.
1124
- Admin-level access is required for configuring settings, managing users, and adjusting security and notification - preferences.
1225
- Historical performance data can be viewed as charts, aiding in trend analysis.
@@ -19,7 +32,6 @@ System Guard is a Flask app designed to monitor server stats such as CPU, Memory
1932
- Notifications are sent to users and admins when a process is manually terminated.
2033
- Offers website monitoring tasks that trigger email alerts when a website becomes unavailable.
2134
- Configurable email alerts for various actions across the server.
22-
- Role-based dashboards tailored for Developer, Admin, IT Manager, and Manager roles (upcoming feature).
2335
- Option to download historical data in CSV format for detailed analysis (upcoming feature).
2436
- Server status monitoring with alerts for server downtime or recovery (upcoming feature).
2537

@@ -42,7 +54,7 @@ The installation process is straightforward and can be completed in a few steps.
4254

4355
## Product Screenshots 📸
4456

45-
Check the product screenshots [here](/src/docs/README.md).
57+
Check the product [screenshots](/src/docs/README.md) for a visual representation of the app.
4658

4759
## Why not use a Docker image? 🐳
4860

@@ -56,11 +68,7 @@ Contributions are always welcome! Please read the [contribution guidelines](/CON
5668

5769
This project is licensed under the MIT License - see the [LICENSE](/LICENSE) file for details.
5870

59-
## Acknowledgments
6071

61-
| Project | License | Repository |
62-
| --------------- | -------------------- | ----------------------------------------------------------- |
63-
| `speedtest-cli` | Apache License 2.0 | [GitHub repository](https://github.com/sivel/speedtest-cli) |
64-
| `psutil` | BSD 3-Clause License | [GitHub repository](https://github.com/giampaolo/psutil) |
65-
| `flask` | BSD 3-Clause License | [GitHub repository](https://github.com/pallets/flask) |
66-
| `chart.js` | MIT License | [GitHub repository](https://github.com/chartjs/Chart.js) |
72+
<!-- ## Contact 📧
73+
74+
- Please email me at [email protected] to schedule a demo of the commercial version of the app. This version includes the latest features, a centralized control panel, role-based dashboards, support for multiple servers, and more. -->

‎src/static/css/control_tab.css‎

Lines changed: 78 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,116 @@
1-
/* General Container Styling */
1+
/* Container */
22
.settings-container {
3-
background-color: #f4f6f9;
43
padding: 30px;
5-
border-radius: 15px;
6-
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
7-
margin-top: 50px;
4+
background-color: #f9f9f9;
85
}
96

10-
.settings-title {
11-
font-size: 2.8rem;
12-
color: #2c3e50;
13-
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
7+
/* General Card Styling */
8+
.card {
9+
border-radius: 12px;
10+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
11+
margin-bottom: 30px;
12+
background-color: #ffffff;
13+
transition: box-shadow 0.3s ease, transform 0.3s ease;
1414
}
1515

16-
/* Tab Navigation Styling */
17-
.nav-tabs .nav-link {
18-
color: #2980b9;
19-
border: none;
16+
/* Card Hover Effect */
17+
.card:hover {
18+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
19+
transform: translateY(-5px);
20+
}
21+
22+
/* Card Titles */
23+
.card-title {
24+
font-size: 1.6rem;
2025
font-weight: 600;
21-
font-size: 1.2rem;
22-
transition: all 0.3s ease;
23-
background-color: transparent;
26+
margin-bottom: 20px;
27+
display: flex;
28+
align-items: center;
29+
justify-content: center;
30+
color: #333;
2431
}
2532

26-
.nav-tabs .nav-link:hover {
27-
color: #1abc9c;
33+
/* Button Styling */
34+
.btn {
35+
border-radius: 25px;
36+
padding: 12px 24px;
37+
margin: 10px 0;
38+
width: 100%;
39+
font-size: 1rem;
40+
font-weight: 500;
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
transition: background-color 0.3s ease, border-color 0.3s ease;
2845
}
2946

30-
.nav-tabs .nav-link.active {
47+
.btn-primary {
48+
background-color: #007bff;
49+
border-color: #007bff;
3150
color: #fff;
32-
background-color: #2980b9;
33-
border: none;
34-
border-radius: 0.5rem 0.5rem 0 0;
3551
}
3652

37-
/* Card Styling */
38-
.card {
39-
border: none;
40-
border-radius: 10px;
41-
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
42-
transition: all 0.3s ease;
43-
background: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7 100%);
53+
.btn-primary:hover {
54+
background-color: #0056b3;
55+
border-color: #004080;
4456
}
4557

46-
.card:hover {
47-
transform: translateY(-8px);
48-
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
58+
.btn-success {
59+
background-color: #28a745;
60+
border-color: #28a745;
61+
color: #fff;
4962
}
5063

51-
.card-title {
52-
font-size: 1.5rem;
53-
margin-bottom: 20px;
54-
color: #34495e;
64+
.btn-success:hover {
65+
background-color: #218838;
66+
border-color: #1e7e34;
5567
}
5668

57-
/* Button Styling */
58-
.btn-primary {
59-
background-color: #2980b9;
60-
border: none;
69+
/* Button Groups */
70+
.btn-group {
71+
display: flex;
72+
flex-wrap: wrap;
73+
gap: 10px;
74+
justify-content: center;
75+
}
76+
77+
/* Tab Navigation */
78+
.nav-tabs .nav-link {
79+
border-radius: 8px;
6180
padding: 10px 20px;
62-
font-size: 1.1rem;
81+
font-size: 1rem;
6382
font-weight: 600;
64-
border-radius: 25px;
65-
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
66-
transition: all 0.3s ease;
83+
transition: background-color 0.3s ease, color 0.3s ease;
6784
}
6885

69-
.btn-primary:hover {
70-
background-color: #1abc9c;
71-
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
72-
transform: translateY(-2px);
86+
.nav-tabs .nav-link.active {
87+
background-color: #007bff;
88+
color: #fff;
7389
}
7490

75-
.btn-primary i {
76-
margin-right: 10px;
91+
.nav-tabs .nav-link:hover {
92+
background-color: #f1f1f1;
7793
}
7894

79-
/* Utility Buttons: Alternate Button Style */
80-
.btn-secondary {
81-
background-color: #8e44ad;
82-
color: #fff;
83-
border: none;
84-
padding: 10px 20px;
85-
font-size: 1.1rem;
86-
font-weight: 600;
87-
border-radius: 25px;
88-
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
89-
transition: all 0.3s ease;
95+
/* Tab Content Margin */
96+
.tab-content {
97+
margin-top: 30px;
9098
}
9199

92-
.btn-secondary:hover {
93-
background-color: #9b59b6;
94-
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
100+
/* Profile Card Improvements */
101+
.card-body {
102+
padding: 25px;
103+
font-size: 1rem;
95104
}
96105

97-
/* Responsive Media Queries */
106+
/* Responsive Design */
98107
@media (max-width: 768px) {
99-
.settings-title {
100-
font-size: 2rem;
101-
}
102-
103-
.nav-tabs .nav-link {
104-
font-size: 1rem;
108+
.btn {
109+
padding: 10px 15px;
110+
font-size: 0.9rem;
105111
}
106112

107113
.card-title {
108-
font-size: 1.2rem;
114+
font-size: 1.4rem;
109115
}
110-
111-
.btn-primary, .btn-secondary {
112-
font-size: 1rem;
113-
padding: 8px 15px;
114-
}
115-
}
116-
117-
/* Tooltip Styling for Extra Info on Hover */
118-
.btn-primary[data-toggle="tooltip"], .btn-secondary[data-toggle="tooltip"] {
119-
position: relative;
120-
overflow: hidden;
121-
}
122-
123-
.btn-primary[data-toggle="tooltip"]:hover::before,
124-
.btn-secondary[data-toggle="tooltip"]:hover::before {
125-
content: attr(data-original-title);
126-
position: absolute;
127-
top: -40px;
128-
left: 50%;
129-
transform: translateX(-50%);
130-
background-color: #34495e;
131-
color: white;
132-
padding: 5px 10px;
133-
border-radius: 5px;
134-
font-size: 0.9rem;
135-
opacity: 0;
136-
animation: fadeIn 0.3s forwards;
137-
}
138-
139-
@keyframes fadeIn {
140-
0% { opacity: 0; transform: translateY(-10px); }
141-
100% { opacity: 1; transform: translateY(0); }
142116
}

‎src/static/css/edit_profile.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,3 +107,56 @@ h2 {
107107
color: #007bff;
108108
font-size: 18px;
109109
}
110+
111+
/* Checkbox styling */
112+
.form-check {
113+
display: flex;
114+
align-items: center;
115+
margin-bottom: 25px;
116+
}
117+
118+
.form-check-input {
119+
margin-right: 10px;
120+
}
121+
122+
/* Hide the default checkbox */
123+
.checkbox-input {
124+
display: none;
125+
}
126+
127+
/* Custom checkbox appearance */
128+
.checkbox-label input[type="checkbox"] + span {
129+
display: inline-block;
130+
width: 18px;
131+
height: 18px;
132+
border: 1px solid #ced4da;
133+
border-radius: 4px;
134+
background-color: #fff;
135+
position: relative;
136+
vertical-align: middle;
137+
margin-right: 10px;
138+
cursor: pointer;
139+
}
140+
141+
.checkbox-label input[type="checkbox"]:checked + span {
142+
background-color: #007bff;
143+
border-color: #007bff;
144+
}
145+
146+
.checkbox-label input[type="checkbox"]:checked + span::after {
147+
content: "";
148+
position: absolute;
149+
left: 6px;
150+
top: 2px;
151+
width: 6px;
152+
height: 12px;
153+
border: solid white;
154+
border-width: 0 2px 2px 0;
155+
transform: rotate(45deg);
156+
}
157+
158+
.checkbox-label i {
159+
margin-right: 8px;
160+
color: #007bff;
161+
font-size: 18px;
162+
}

0 commit comments

Comments
 (0)