scroll into table when generated, change font colors

Author: kolle86

docs/index.html

@@ -14,7 +14,7 @@ <h1 class="text-2xl font-bold mb-4">🧮 Subnet-Calculator</h1>
         <div class="flex items-center">
             <input type="text" id="ipv4" name="ipv4" value="192.168.1.1" class="shadow appearance-none border rounded w-4/5 py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-white border-gray-600" oninput="calculateSubnet(event)">
             <label class="ml-2" for="ipClassValue">Class:</label>
-            <input type="text" id="ipClassValue" name="ipClass" disabled class="shadow appearance-none border rounded w-1/5 py-2 px-3 leading-tight focus:outline-none focus:shadow-outline text-center ml-1 bg-gray-800 text-white border-gray-600" value="">
+            <input type="text" id="ipClassValue" name="ipClass" disabled class="shadow appearance-none border rounded w-1/5 py-2 px-3 leading-tight focus:outline-none focus:shadow-outline text-center ml-1 bg-gray-800 text-gray-400 border-gray-600" value="">
         </div>
         <br>
 
@@ -25,19 +25,19 @@ <h1 class="text-2xl font-bold mb-4">🧮 Subnet-Calculator</h1>
         </div><br>
 
         <label for="net-id">Net ID:</label>
-        <input type="text" id="net-id" name="net-id" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-white border-gray-600"><br><br>
+        <input type="text" id="net-id" name="net-id" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-gray-400 border-gray-600"><br><br>
 
         <label for="broadcast">Broadcast:</label>
-        <input type="text" id="broadcast" name="broadcast" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-white border-gray-600"><br><br>
+        <input type="text" id="broadcast" name="broadcast" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-gray-400 border-gray-600"><br><br>
 
         <label for="host-addresses">Number of Host Addresses:</label>
-        <input type="text" id="host-addresses" name="host-addresses" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-white border-gray-600"><br><br>
+        <input type="text" id="host-addresses" name="host-addresses" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-gray-400 border-gray-600"><br><br>
 
         <label for="subnets">Number of Subnets:</label>
-        <input type="text" id="subnets" name="subnets" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-white border-gray-600"><br><br>
+        <input type="text" id="subnets" name="subnets" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-gray-400 border-gray-600"><br><br>
 
         <label for="subnet-id">Subnet ID:</label>
-        <input type="text" id="subnet-id" name="subnet-id" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-white border-gray-600"><br><br>
+        <input type="text" id="subnet-id" name="subnet-id" disabled class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-800 text-gray-400 border-gray-600"><br><br>
     </form>
 
     <button id="generate-table-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
@@ -236,7 +236,7 @@ <h1 class="text-2xl font-bold mb-4">🧮 Subnet-Calculator</h1>
             table.appendChild(thead);
 
             const tbody = document.createElement("tbody");
-            tbody.className = "text-sm text-gray-500";
+            tbody.className = "text-sm text-gray-400";
 
             const numSubnets = Math.pow(2, subnetMask - minSubnet);
 
@@ -332,6 +332,8 @@ <h1 class="text-2xl font-bold mb-4">🧮 Subnet-Calculator</h1>
 
             table.appendChild(tbody);
             tableContainer.appendChild(table);
+
+            table.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
 
         generateTableButton.addEventListener("click", generateSubnetTable);