add some style to podstatus page

vshn · Jun 5, 2024 · 88ba0da · 88ba0da
1 parent a2a82a8
commit 88ba0da
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 5 deletions.
diff --git a/podstatus/app.py b/podstatus/app.py
@@ -28,7 +28,7 @@ def create_app():
     bootstrap = Bootstrap5(app)
 
     # Basic styling
-    app.config["BOOTSTRAP_BOOTSWATCH_THEME"] = "solar"
+    app.config["BOOTSTRAP_BOOTSWATCH_THEME"] = "vapor"
     app.config["BOOTSTRAP_SERVE_LOCAL"] = True
 
     # Load kubeconfig or use in-cluster configuration

diff --git a/podstatus/static/css/styles.css b/podstatus/static/css/styles.css
@@ -0,0 +1,29 @@
+.bg-image {
+    background-image: url('/static/images/background.webp');
+    background-size: cover;
+    background-position: center;
+    height: 100vh;
+}
+
+@media (max-width: 767px) {
+    .bg-image {
+        background-image: none;
+        background-color: #4081CB;
+    }
+}
+
+.container {
+    max-width: 850px;
+}
+
+.form-label {
+    color: white;
+}
+
+footer {
+    color: white;
+}
+
+footer a {
+    color: white;
+}
diff --git a/podstatus/static/images/logo.png b/podstatus/static/images/logo.png
diff --git a/podstatus/templates/base.html b/podstatus/templates/base.html
@@ -8,11 +8,28 @@
     <title>VSHN Pod Status</title>
     <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}">
     {{ bootstrap.load_css() }}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
     <script src="https://unpkg.com/htmx.org@1.9.12"></script>
 </head>
 
 <body>
-    {% block content %}{% endblock %}
+    <main class="container">
+        {{ render_messages(container=False, dismissible=True, dismiss_animate=True) }}
+        <img src="{{ url_for('static', filename='images/logo.png') }}" class="img-fluid mx-auto d-block w-50 m-5">
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="text-center m-5">
+        {% block footer %}
+        <small> &copy;
+            <script>document.write(new Date().getFullYear())</script> <a href="https://www.vshn.ch">VSHN AG</a> - Made
+            with <a href="https://github.com/vshn/conferenceli/" target="_blank">conferenceli</a>
+        </small>
+        {% endblock %}
+    </footer>
+
+    {{ bootstrap.load_js() }}
+    <script src="{{ url_for('static', filename='js/alert-autoclose.js') }}"></script>
 </body>
 
 </html>
diff --git a/podstatus/templates/index.html b/podstatus/templates/index.html
@@ -1,10 +1,11 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<h1>Kubernetes Pods Status</h1>
+<h1>Status of Pods on Kubernetes</h1>
 <div id="pod-status">
     Loading...
 </div>
+
 <script>
     document.addEventListener('DOMContentLoaded', function () {
         setTimeout(function () {
@@ -32,8 +33,8 @@ <h1>Kubernetes Pods Status</h1>
                 }
 
                 podElement.innerHTML = `<strong>${podName}</strong>: ${podStatusValue}`;
-                podElement.style.backgroundColor = podStatusValue === 'Running' ? 'green' :
-                    podStatusValue === 'Pending' ? 'yellow' : 'red';
+                podElement.style.backgroundColor = podStatusValue === 'Running' ? '#3cf281' :
+                    podStatusValue === 'Pending' ? '#ffc107' : '#e44c55';
             };
         }, 1000); // Delay of 1 second before initializing SSE connection
     });