feat(style.css): add button container class

judas_server/web/static/css/style.css

@@ -42,11 +42,6 @@ input {
 a {
     color: var(--nord-acc0);
     text-decoration: none;
-    transition: 0.3s ease-in-out;
-}
-
-a:hover {
-    color: var(--nord-acc2);
 }
 
 #wrapper {
@@ -82,7 +77,7 @@ header a {
 .button {
     display: inline-block;
     padding: 0.5rem 1rem;
-    background-color: #8fbcbb;
+    background-color: var(--nord-acc0);
     color: var(--nord-bg0);
     border: none;
     border-radius: 0.25rem;
@@ -90,6 +85,11 @@ header a {
     transition: 0.3s ease-in-out;
 }
 
+.button a:hover {
+    color: var(--nord-bg0);
+    text-decoration: none;
+}
+
 .button:hover {
     background-color: var(--nord-acc2);
     cursor: pointer;
@@ -169,4 +169,38 @@ header a {
 
 .green-bg {
     background-color: var(--nord-aur3);
+}
+
+.button-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+.link {
+    transition: 0.3s ease-in-out;
+}
+
+.link:hover {
+    color: var(--nord-acc2);
+}
+
+.details-table tr td:first-child {
+    font-weight: 900;
+    background-color: var(--nord-bg3);
+    white-space: nowrap;
+    width: 1%;
+}
+
+.details-table {
+    border-collapse: collapse;
+    border: 2px solid var(--nord-fg0);
+}
+
+.details-table th, .details-table td {
+    padding: 0.5rem;
+    text-align: left;
+    border: 1px solid var(--nord-fg1);
+    border-collapse: collapse;
 }

judas_server/web/templates/details.html

@@ -13,15 +13,12 @@
             <p><a class="button" href="{{ url_for('logout') }}">Logout</a></p>
         </header>
         <main>
-            <h2>Details for PC ID: {{ pc.id }}</h2>
-            <h3><a href="{{ url_for('stream', pc_id=pc.id) }}">View Stream</a></h3>
-            <table border="1">
-                <thead>
-                    <tr>
-                        <th>Attribute</th>
-                        <th>Value</th>
-                    </tr>
-                </thead>
+            <div class="button-container">
+                <p><a href="{{ url_for('panel') }}" class="link">Back to Panel</a></p>
+                <h2>Details for PC ID: {{ pc.id }}</h2>
+                <p><a href="{{ url_for('stream', pc_id=pc.id) }}" class="link">View Stream</a></p>
+            </div>
+            <table class="center-table details-table">
                 <tbody>
                     <tr>
                         <td>Status</td>
@@ -33,7 +30,6 @@
                     </tr>
                 </tbody>
             </table>
-            <p><a href="{{ url_for('panel') }}">Back to Panel</a></p>
         </main>
     </div>
 </body>

judas_server/web/templates/index.html

@@ -24,7 +24,7 @@
             </div>
             <div>
                 <p style="color: #bf616a;"><strong>Notice:</strong> Please use this system responsibly and in accordance with all applicable laws and organizational policies.</p>
-                <p>Please <a href="{{ url_for('login')}}">log in</a> to manage your remote PCs.</p>
+                <p>Please <a href="{{ url_for('login')}}" class="link">log in</a> to manage your remote PCs.</p>
             </div>
         </main>
     </div>