improve packet display

css/main.css

@@ -1116,3 +1116,12 @@ input[type="button"], button {
 .login-button {
     cursor: pointer;
 }
+
+h2:has(+ #exam-list:empty),  h2:has(+ #packet-list:empty){
+    opacity: 30%;
+}
+
+#exam-list:empty::after,  #packet-list:empty::after{
+    content: "None available.";
+    opacity: 30%;
+}

index.html

@@ -68,14 +68,13 @@
                 <div id="packets">
                     <p>Click buttons below to load an exam / packet</p>
                     <span class="exam-wrapper">
-                        <h2>Available Exams:</h2>
+                        <h2>Exams:</h2>
-                        <span id="exam-list">
+                        <span id="exam-list"></span>
-
-                        </span>
                     </span>
 
-                    <h2>Available Packets:</h2>
+                    <span class="packet-wrapper">
-                    <span id="packet-list">
+                        <h2>Packets:</h2>
+                        <span id="packet-list"></span>
                     </span>
                 </div>
                 <div id="options-link">