Merge pull request 'feat: style panel' (#1) from feat/style-panel into develop

Reviewed-on: #1

judas_server/web/static/css/style.css

@@ -1,3 +1,22 @@
+:root {
+    --nord-bg0: #2e3440;
+    --nord-bg1: #3b4252;
+    --nord-bg2: #434c5e;
+    --nord-bg3: #4c566a;
+    --nord-fg0: #eceff4;
+    --nord-fg1: #e5e9f0;
+    --nord-fg2: #d8dee9;
+    --nord-acc0: #8fbcbb;
+    --nord-acc1: #88c0d0;
+    --nord-acc2: #81a1c1;
+    --nord-acc3: #5e81ac;
+    --nord-aur0: #bf616a;
+    --nord-aur1: #d08770;
+    --nord-aur2: #ebcb8b;
+    --nord-aur3: #a3be8c;
+    --nord-aur4: #b48ead;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -5,15 +24,15 @@
 }
 
 body {
-    background-color: #b48ead;
+    background-color: var(--nord-aur4);
     font-family: monospace, sans-serif !important;
-    color: #eceff4;
+    color: var(--nord-fg0);
 }
 
 input {
     font-family: inherit;
     color: #eceff4;
-    background-color: #434c5e;
+    background-color: var(--nord-bg2);
     border: none;
     border-radius: 0.25rem;
     padding: 0.25rem;
@@ -29,27 +48,27 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #2e3440;
-    color: #eceff4;
+    background-color: var(--nord-bg0);
+    color: var(--nord-fg0);
     padding: 1rem;
 }
 
 main {
     padding: 1rem;
-    background-color: #3b4252;
+    background-color: var(--nord-bg1);
     flex-grow: 1;
 }
 
 header a {
     text-decoration: none;
-    color: #eceff4;
+    color: var(--nord-fg0);
 }
 
 .button {
     display: inline-block;
     padding: 0.5rem 1rem;
     background-color: #8fbcbb;
-    color: #2e3440;
+    color: var(--nord-bg0);
     border: none;
     border-radius: 0.25rem;
     text-decoration: none;
@@ -57,10 +76,69 @@ header a {
 }
 
 .button:hover {
-    background-color: #81a1c1;
+    background-color: var(--nord-acc2);
     cursor: pointer;
 }
 
 .center {
     text-align: center;
+}
+
+.center-table {
+    margin: 0 auto;
+    width: 100%;
+}
+
+.select-table{
+    border-collapse: collapse;
+    border: 2px solid var(--nord-fg0);
+}
+
+.select-table thead {
+    position: sticky;
+    top: -1px;
+    z-index: 2;
+}
+
+.select-table th, .select-table td {
+    padding: 0.5rem;
+    text-align: center;
+    border: 1px solid var(--nord-fg1);
+    border-collapse: collapse;
+}
+
+.select-table th {
+    background-color: var(--nord-bg2);
+    color: var(--nord-fg0);
+}
+
+.select-table a {
+    display: block;
+    color: var(--nord-acc0);
+    text-decoration: none;
+    transition: 0.1s ease-in-out;
+}
+
+.select-table tr {
+    transition: 0.1s ease-in-out;
+}
+
+.select-table tr:hover {
+    background-color: var(--nord-acc1);
+}
+
+.select-table tr:hover a {
+    color: var(--nord-bg0);
+}
+
+.red-bg {
+    background-color: var(--nord-aur0);
+}
+
+.yellow-bg {
+    background-color: var(--nord-aur2);
+}
+
+.green-bg {
+    background-color: var(--nord-aur3);
 }

judas_server/web/templates/panel.html

@@ -13,7 +13,10 @@
             <p><a class="button" href="{{ url_for('logout') }}">Logout</a></p>
         </header>
         <main>
-            <table border="1">
+            <h2 class="center">Select a PC to Control</h2>
+            <p class="center">Choose a PC from the list below to view details or send commands.</p>
+            <br>
+            <table class="center-table select-table">
                 <thead>
                     <tr>
                         <th>PC ID</th>
@@ -25,8 +28,7 @@
                     {% for pc in pcs.values() %}
                     <tr>
                         <td><a href="{{ url_for('details', pc_id=pc.id) }}">{{ pc.id }}</a></td>
-                        <td>{{ pc.status if pc.status else 'Unknown' }}</td>
-                        <td>{{ pc.last_seen if pc.last_seen else 'Never' }}</td>
+                        <td class='{% if pc.status == "online" %}green-bg{% elif pc.status == "offline" %}red-bg{% else %}yellow-bg{% endif %}'>{{ pc.status if pc.status else 'Unknown' }}</td>                        <td>{{ pc.last_seen if pc.last_seen else 'Never' }}</td>
                     </tr>
                     {% else %}
                     <tr>

judas_server/web/web_server.py

@@ -17,14 +17,39 @@ login_manager.init_app(app)
 PC_DETAILS = {
     "PC1": {
         "id": "PC1",
-        "status": "Online",
+        "status": "online",
         "last_seen": "2023-10-01 12:00:00",
     },
     "PC2": {
         "id": "PC2",
-        "status": "Offline",
+        "status": "offline",
         "last_seen": "2023-10-01 11:00:00",
     },
+    "PC3": {
+        "id": "PC3",
+        "status": "offline",
+        "last_seen": "2023-10-01 11:00:00",
+    },
+    "PC4": {
+        "id": "PC4",
+        "status": "offline",
+        "last_seen": "2023-10-01 11:00:00",
+    },
+    "PC5": {
+        "id": "PC5",
+        "status": "offline",
+        "last_seen": "2023-10-01 11:00:00",
+    },
+    "PC6": {
+        "id": "PC6",
+        "status": "offline",
+        "last_seen": "2023-10-01 11:00:00",
+    },
+    "PC7": {
+        "id": "PC7",
+        "status": "offline",
+        "last_seen": "2023-10-01 11:00:00",
+    }
 }