diff --git a/.gitignore b/.gitignore index 7508544..65651ca 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .idea/* -**/node_modules/* \ No newline at end of file +**/node_modules/* +**/certs/* \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index 8ddbc0c..a81deba 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.16.0 +v20.12.2 diff --git a/README.md b/README.md index 2a19117..0f05ce7 100644 --- a/README.md +++ b/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/). diff --git a/dist/css/main.css b/dist/css/main.css index 99dfea3..cb43160 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -254,4 +254,9 @@ writing-mode: vertical-rl; white-space: nowrap; padding-top: 0.25rem; +} + +.active-mode { + color: #4091C9; + font-weight: bold; } \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 5017430..62172dc 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,7 +6,7 @@ Visual Subnet Calculator - Split/Join - + @@ -36,11 +36,10 @@

Enter the network you wish to subnet and use the Split/Join buttons on the right to start designing!

- -
+
-
+
@@ -48,7 +47,7 @@
-
+
@@ -60,24 +59,30 @@
+ -
+ - +
Subnet address Range of addressesUsable IPsUsable IPs Hosts Note -
Split/Join
+
Split/Join