feat: about us page added

Author: codeperfectplus

README.md

@@ -85,6 +85,7 @@ A Docker image has not been created for this project because it requires access
 - A dedicated website monitoring page for tracking uptime and performance.
 - Track and save total network data sent/received in the database for data usage monitoring.
 - Improve website monitor, save data in database with timestamp to show the history of the website.
+- Key-combinding to navigate through the website.
 
 ## Learnings 📖
 

app.py

@@ -4,7 +4,7 @@
 
 # background thread to monitor system settings changes
 # monitor_settings()  # Starts monitoring for system logging changes
-start_website_monitoring()  # Starts pinging active websites
+# start_website_monitoring()  # Starts pinging active websites
 
 if __name__ == "__main__":
 

setup.sh

@@ -641,7 +641,6 @@ timer() {
 }
 
 open_browser() {
-    log "Please use the above credentials to login to the SystemGuard server."
     log "If you face server server issues, run 'sudo systemguard-installer --fix' to fix the installation."
     log "Server may take 1-2 minutes to start. Opening the browser in 50 seconds..."
     # show timer for 50 seconds
@@ -878,6 +877,7 @@ fix() {
     update_dependencies
     log "Fixing $APP_NAME server..."
     stop_server
+    open_browser
 }
 
 # update the code to the latest version

src/config.py

@@ -10,6 +10,17 @@
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 app.config['SECRET_KEY'] = 'secret'
 
+# define a variable to use in the templates
+app.jinja_env.globals.update(
+    title="SystemGuard",
+    description="SystemGuard is a web application that allows you to monitor your system resources.",
+    author="Deepak Raj",
+    year="2024",
+    version="1.0.4-pre-release",
+    project_url="https://github.com/codeperfectplus/SystemGuard",
+    contact_email="",
+)
+
 # Initialize the database
 db = SQLAlchemy(app)
 

src/routes/other.py

@@ -84,3 +84,8 @@ def send_email_page():
         return redirect(url_for('send_email_page'))
 
     return render_template("other/send_email.html", enable_alerts=enable_alerts)
+
+
+@app.route("/about")
+def about():
+    return render_template("other/about.html")

src/static/css/about.css

@@ -0,0 +1,35 @@
+/* Ensure the card has a light background and dark text */
+.card {
+    background-color: #ffffff; /* White background */
+    color: #333333; /* Dark text for readability */
+    border-radius: 0.5rem; /* Rounded corners */
+    margin-top: 1rem; /* Add space above the card */
+}
+
+.card-title {
+    font-size: 2rem; /* Larger font size for titles */
+    font-weight: bold;
+}
+
+.card-subtitle {
+    font-size: 1.25rem; /* Slightly smaller than the title */
+    color: #6c757d; /* Muted text color */
+}
+
+.card-text {
+    font-size: 1rem; /* Regular text size */
+    line-height: 1.5; /* Line height for readability */
+}
+
+.btn-primary {
+    background-color: #007bff; /* Bootstrap primary color */
+    border-color: #007bff;
+}
+
+.text-primary {
+    color: #007bff; /* Link color matching the button */
+}
+
+hr {
+    border-top: 1px solid #dee2e6; /* Light gray border for separators */
+}

src/static/css/style.css

@@ -77,6 +77,9 @@ body {
     font-size: 1.5rem;
     font-weight: bold;
     color: #007bff;
+    display: flex;
+    flex-direction: column; /* Stack items vertically */
+    align-items: flex-start;
 }
 
 .navbar-nav {
@@ -399,3 +402,15 @@ body {
     box-shadow: 0 10px 20px var(--color-speedtest);
     transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
 }
+
+.title {
+    font-size: 2rem; /* Adjust the title size */
+    font-weight: bold; /* Adjust as needed */
+}
+
+.version {
+    font-size: 0.65rem; /* Smaller font size for version */
+    color: #6c757d; /* Optional: Adjust color */
+    margin-top: 0.25rem; /* Space between title and version */
+}
+

src/templates/ext/navbar.html

@@ -1,7 +1,12 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
     <a class="navbar-brand d-flex align-items-center {% if request.endpoint == 'dashboard' %}active{% endif %}" 
-       href="{{ url_for('dashboard') }}"><i class="fas fa-shield-alt"></i> SystemGuard
-    </a>
+    href="{{ url_for('dashboard') }}">
+    <div>
+        <i class="fas fa-shield-alt"></i> 
+        <span class="title">{{title}}</span>
+    </div>
+ </a>
+ 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" 
             aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

src/templates/other/about.html

@@ -0,0 +1,49 @@
+{% extends "base/base.html" %}
+{% block title %}About {{title}} {% endblock %}
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/about.css') }}">
+{% endblock %}
+{% block content %}
+<div class="container mt-4">
+    <div class="row">
+        <div class="col-md-8 mx-auto">
+            <div class="card shadow-sm">
+                <div class="card-body">
+                    <h1 class="card-title">{{ title }}</h1>
+                    <h4 class="card-subtitle mb-3 text-muted">{{ version }}</h4>
+
+                    <p class="card-text">
+                        {{ description }}
+                    </p>
+
+                    <hr>
+
+                    <h5 class="card-title">Author</h5>
+                    <p class="card-text">{{ author }}</p>
+
+                    <h5 class="card-title">Year</h5>
+                    <p class="card-text">{{ year }}</p>
+
+                    <hr>
+
+                    <h5 class="card-title">GitHub Repository</h5>
+                    <p class="card-text">
+                        <a href="https://github.com/codeperfectplus/SystemGuard" target="_blank"
+                            class="btn btn-primary">
+                            View on GitHub
+                        </a>
+                    </p>
+
+                    <hr>
+
+                    <h5 class="card-title">Contact</h5>
+                    <p class="card-text">
+                        For more information, please visit the <a href="{{project_url}}" target="_blank"> GitHub
+                            repository</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

src/templates/settings/settings.html

@@ -53,5 +53,11 @@ <h1 class="settings-title">SystemGuard Settings
         </a>
     </div>
 
+    <div class="settings-buttons">
+        <a href="{{ url_for('about') }}" class="btn btn-primary">
+            <i class="fas fa-info-circle"></i> About {{ title }}
+        </a>
+    </div>
+
 </div>
 {% endblock %}