client tabs for admin staff

client/index.html

@@ -40,40 +40,38 @@
 
       <!-- Application Stage -->
       <div id="stage-submitted" class="d-none">
-	<h2 class="display-2">Hi, <span id="span-name">NAME</span></h2>
+        <h2 class="display-2">Hi, <span id="span-name">NAME</span></h2>
 
-	<hr />
-	<div id="stage-wait" class="stage">
-	  <p class="display-3 pulse bg-dark text-center p-3">Waiting for students...</p>
-	</div>
+        <hr />
+        <div id="stage-wait" class="stage">
+          <p class="display-3 pulse bg-dark text-center p-3">Waiting for students...</p>
+        </div>
 
-	<div id="stage-allocated" class="stage d-none">
-      	  <!-- Allocation Page -->
-	  <p class="display-3 text-center p-3 m-0">Group <span id="span-team">GROUP</span></p>
-	  <ul class="display-4 list-unstyled p-3 m-0" id="span-members">
-	  </ul>
-	</div>
+        <div id="stage-allocated" class="stage d-none">
+          <!-- Allocation Page -->
+          <p class="display-3 text-center p-3 m-0">Group <span id="span-team">GROUP</span></p>
+          <ul class="display-4 list-unstyled p-3 m-0" id="span-members">
+          </ul>
+        </div>
       </div>
 
       <!-- Staff Stage -->
       <div id="stage-staff" class="stage d-none">
-	    <div class="card-body">
 		<form class="row row-cols-lg-auto g-3 align-items-center" onsubmit="onStartAllocate(); return false;">
 		  <div class="col-12">
 		    <div class="input-group"></div>
 		    <input class="form-control" type="number" min="0" max="999" id="input-ideal" />
 		  </div>
 		  <div class="col-12">
-		    <div class="col">
 		      <select class="form-select" id="input-method">
     			<option value="groups">groups in total</option>
 	    		<option value="members">students per group</option>
 		      </select>
-		    </div>
 		  </div>
 		  <div class="col-12">
 		    <div class="input-group"></div>
 		    <input class="form-control" type="number" min="1" value="2" max="999" id="input-minsize" />
+            <span class="input-group-text">minimum</span>
 		  </div>
 		  <div class="col-12">
 		    <button class="btn btn-primary" />Start</button>
@@ -81,8 +79,15 @@
 		</form>
 		<hr />
 
-		<div id="staff-groupings" class="row row-cols-1 row-cols-md-2 g-4">
-		</div>
+        <ul class="nav nav-tabs" id="tab-groupings">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="staff-groupings-label" data-bs-target="#staff-groupings" type="button" role="tab">Groups</button>
+            </li>
+        </ul>
+        <div class="tab-content">
+		  <div class="tab-pane fade show active" id="staff-groupings" class="row row-cols-1 row-cols-md-2 g-4"></div>
+        </div>
+
 	    </div>
       </div>