diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1c2d52b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/* diff --git a/README.md b/README.md index 48b74d2..97daff9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,21 @@ # Visual Subnet Calculator -To be completed. +Visual Subnet Calculator is a modernized tool based on the original work by [davidc](https://github.com/davidc/subnets). +It strives to be a tool for quickly designing networks and collaborating on that design with others. It focuses on +expediting the work of network administrators, not academic subnetting math. + +## Design Tenants + +The following tenants are the most important values that drive the design of the tool. New features, pull requests, etc +should align to these tenants, or propose an adjustment to the tenants. + +- **Simplicity is king.** Network admins are busy and Visual Subnet Calculator should always be easy for FIRST TIME USERS to + quickly and intuitively use. +- **Subnetting is design work.** Promote features that enhance visual clarity and easy mental processing of even the most + complex architectures. +- **Users control the data.** We store nothing, but provide convenient ways for users to save and share their designs. +- **Embrace community contributions.** Consider and respond to all feedback and pull requests in the context of these + tenants. ## License diff --git a/index.html b/index.html new file mode 100644 index 0000000..180af17 --- /dev/null +++ b/index.html @@ -0,0 +1,163 @@ + + + + + + Visual Subnet Calculator + + + + +
+

Visual Subnet Calculator

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Subnet addressRange of addressesUseable IPsHostsNoteSplit/Join
10.0.0.0/1710.0.0.0 - 10.0.127.25510.0.0.1 - 10.0.127.25432766/17/16
10.0.128.0/1910.0.128.0 - 10.0.159.25510.0.128.1 - 10.0.159.2548190/19/18/17
10.0.160.0/2010.0.160.0 - 10.0.175.25510.0.160.1 - 10.0.175.2544094/20/19
10.0.176.0/2310.0.176.0 - 10.0.177.25510.0.176.1 - 10.0.177.254510/23/22/21/20
10.0.178.0/2310.0.178.0 - 10.0.179.25510.0.178.1 - 10.0.179.254510/23
10.0.180.0/2210.0.180.0 - 10.0.183.25510.0.180.1 - 10.0.183.2541022/22
10.0.184.0/2110.0.184.0 - 10.0.191.25510.0.184.1 - 10.0.191.2542046/21
10.0.192.0/1910.0.192.0 - 10.0.223.25510.0.192.1 - 10.0.223.2548190/19/18
10.0.224.0/2010.0.224.0 - 10.0.239.25510.0.224.1 - 10.0.239.2544094/20/19
10.0.240.0/2110.0.240.0 - 10.0.247.25510.0.240.1 - 10.0.247.2542046/21/20
10.0.248.0/2210.0.248.0 - 10.0.251.25510.0.248.1 - 10.0.251.2541022/22/21
10.0.252.0/2310.0.252.0 - 10.0.253.25510.0.252.1 - 10.0.253.254510/23/22
10.0.254.0/2410.0.254.0 - 10.0.254.25510.0.254.1 - 10.0.254.254254/24/23
10.0.255.0/2410.0.255.0 - 10.0.255.25510.0.255.1 - 10.0.255.254254/24
+ + + + +
+ + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..9eeb279 --- /dev/null +++ b/main.css @@ -0,0 +1,65 @@ +:root { + --split-foreground: #000000; + --split-background: indianred; + --join-foreground: #000000; + --join-background: skyblue; +} + +#calc { + vertical-align: middle; +} + +#calc>tbody>tr>td, #calc>tbody>tr>th, #calc>tfoot>tr>td, #calc>tfoot>tr>th, #calc>thead>tr>td, #calc>thead>tr>th { + /* Equivalent to p-1 */ + padding: 0.25rem; + /* Equivalent to p-2 */ + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +#calc span.split { + color: var(--split-background); +} + +#calc span.join { + color: var(--join-background); +} + +#calc td.split { + background-color: var(--split-background); + color: var(--split-foreground); +} + +#calc td.join { + background-color: var(--join-background); + color: var(--join-foreground); +} + +#calc td.split, #calc td.join { + padding: 0; +} + +#calc td.split span, #calc td.join span { + padding-right: 0.4rem; +} +#class .note { + +} + +#calc .note input { + border: none !important; + border-color: transparent !important; +} + +/* https://stackoverflow.com/a/47245068/606974 */ +.rotate { + vertical-align: middle; + text-align: end; +} +.rotate span { + -ms-writing-mode: tb-rl; + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + white-space: nowrap; + padding-top: 0.5rem; +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..e69de29