Adding keyboard shortcuts

.gitignore

@@ -1,2 +1,3 @@
 .idea/*
-**/node_modules/*
+**/node_modules/*
+**/certs/*

.nvmrc

@@ -1 +1 @@
-v18.16.0
+v20.12.2

README.md

@@ -45,8 +45,59 @@ Compile from source:
 > npm start
 ```
 
+
+
 The full application should then be available within `./dist/`, open `./dist/index.html` in a browser.
 
+### Run with certificates (Optional)
+
+***NB:*** *required for testing clipboard.writeText() in the browser. Feature is only available in secure (https) mode.*
+
+```shell
+
+#Install mkcert
+> brew install mkcert
+# generate CA Certs to be trusted by local browsers
+> mkcert install
+# generate certs for local development
+> cd visualsubnetcalc/src
+# generate certs for local development
+> npm run setup:certs
+# run the local webserver with https
+> npm run local-secure-start
+````
+
+# Cloud Subnet Notes
+
+- [AWS reserves 3 additional IPs](https://docs.aws.amazon.com/vpc/latest/userguide/subnet-sizing.html)
+
+- [Azure reserves 3 additional IPs](https://learn.microsoft.com/en-us/azure/virtual-network/virtual-networks-faq#are-there-any-restrictions-on-using-ip-addresses-within-these-subnets)
+
+
+## Standard mode:
+   - Smallest subnet: /32
+   - Two reserved addresses per subnet of size <= 30:
+     - Network Address (network + 0)
+     - Broadcast Address (last network address)
+##  AWS mode :
+   - Smallest subnet: /28
+   - Five reserved addresses per subnet:
+     - Network Address (network + 0)
+     - AWS Reserved - VPC Router
+     - AWS Reserved - VPC DNS
+     - AWS Reserved - Future Use
+     - Broadcast Address (last network address)
+## Azure mode :
+   - Smallest subnet: /29
+   - Five reserved addresses per subnet:
+     - Network Address (network + 0)
+     - Azure Reserved - Default Gateway
+     - Azure Reserved - DNS Mapping
+     - Azure Reserved - DNS Mapping
+     - Broadcast Address (last network address)
+
+
+
 ## Credits
 
 Split icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [Flaticon](https://www.flaticon.com/).

dist/css/main.css

@@ -254,4 +254,4 @@
     writing-mode: vertical-rl;
     white-space: nowrap;
     padding-top: 0.25rem;
-}
+}

dist/index.html

@@ -36,19 +36,42 @@ <h1>Visual Subnet Calculator</h1>
         <p class="mb-0">Enter the network you wish to subnet and use the Split/Join buttons on the right to start designing!</p>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>
-
-    <form id="input_form" class="row g-2 mb-3" novalidate>
+    <form id="input_form" class="row g-2 mb-3">
         <div class="font-monospace col-lg-2 col-md-3 col-4">
             <div><label for="network" class="form-label mb-0 ms-1">Network Address</label></div>
-            <div><input id="network" type="text" class="form-control" value="10.0.0.0" aria-label="Network Address" pattern="^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" required></div>
+            <div><input data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        data-bs-custom-class="custom-tooltip"
+                        data-bs-title="Error"
+                        data-bs-trigger="manual"
+                        name="network"
+                        id="network"
+                        type="text"
+                        class="form-control"
+                        value="10.0.0.0"
+                        aria-label="Network Address"
+                        pattern="^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)"
+                        required></div>
         </div>
         <div class="font-monospace col-auto">
             <div style="height:2rem"></div>
             <div>/</div>
         </div>
         <div class="font-monospace col-lg-2 col-md-3 col-4">
             <div><label for="netsize" class="form-label mb-0 ms-1">Network Size</label></div>
-            <div><input id="netsize" type="text" class="form-control w-10" value="16" aria-label="Network Size" pattern="^(\d|[12]\d|30)$" required></div>
+            <div><input data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        data-bs-custom-class="custom-tooltip"
+                        data-bs-title="Error"
+                        data-bs-trigger="manual"
+                        name="netsize"
+                        id="netsize"
+                        type="text"
+                        class="form-control w-10"
+                        value="16"
+                        aria-label="Network Size"
+                        pattern="^([0-9]|[12][0-9]|3[0-2])$"
+                        required></div>
         </div>
         <div class="col-lg-2 col-md-3 col-3 font-">
             <div style="height:1.5rem"></div>
@@ -59,6 +82,10 @@ <h1>Visual Subnet Calculator</h1>
                         Tools
                     </button>
                     <ul class="dropdown-menu">
+                        <li><a class="dropdown-item active" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_standard" aria-current="true">Mode - Standard</a></li>
+                        <li><a class="dropdown-item" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_aws">Mode - AWS</a></li>
+                        <li><a class="dropdown-item" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_azure">Mode - Azure</a></li>
+                        <li><hr class="dropdown-divider"></li>
                         <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importExportModal" id="btn_import_export">Import / Export</a></li>
                     </ul>
                 </div>
@@ -67,6 +94,7 @@ <h1>Visual Subnet Calculator</h1>
     </form>
 
 
+
     <table id="calc" class="table table-bordered font-monospace">
         <thead>
             <tr>
@@ -77,11 +105,8 @@ <h1>Visual Subnet Calculator</h1>
                 <th id="hostsHeader" style="display: table-cell;">Hosts</th>
                 <th id="noteHeader" colspan="100%" style="display: table-cell;">
                     Note
-                    <div style="display:inline-block; float:right;"><span class="split">Split</span>/<span class="join">Join</span></div>
+              <div style="float:right;"><span class="split">Sp<span style="text-decoration: underline">l</span>it</span>/<span class="join"><span style="text-decoration: underline">J</span>oin</span></div>
                 </th>
-                <!--
-                <th id="joinHeader" colspan="100%" style="display: table-cell;"><span class="split">Split</span>/<span class="join">Join</span></th>
-                -->
             </tr>
         </thead>
         <tbody id="calcbody">
@@ -191,12 +216,18 @@ <h4 class="mt-4">Credits</h4>
             </div>
         </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
             crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.7.0.min.js"
             integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
             crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.1/dist/jquery.validate.min.js"
+            integrity="sha256-0xVRcEF27BnewkTwGDpseENfeitZEOsQAVSlDc7PgG0="
+            crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.1/dist/additional-methods.min.js"
+            integrity="sha384-Wxa7enUK34eRCZgjQIh81NeuzGHX2YaEkcLPCBIvASsdqlXBtAvVUiM7Tb56UvtC"
+            crossorigin="anonymous"></script>
     <script src="js/lz-string.min.js"></script>
     <script src="js/main.js"></script>
 </div>