Expanded README and performed some initial table styling
This commit is contained in:
Caesar Kabalan
parent
feb2eb50d5
commit
384d194188
5 changed files with 245 additions and 1 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.idea/*
|
||||
17
README.md
17
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
|
||||
|
||||
|
|
|
|||
163
index.html
Normal file
163
index.html
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Visual Subnet Calculator</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="main.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-xxl">
|
||||
<h1>Visual Subnet Calculator</h1>
|
||||
|
||||
<table id="calc" class="table table-bordered font-monospace">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="subnetHeader" style="display: table-cell;">Subnet address</th>
|
||||
<th id="netmaskHeader" style="display: none;">Netmask</th>
|
||||
<th id="rangeHeader" style="display: table-cell;">Range of addresses</th>
|
||||
<th id="useableHeader" style="display: table-cell;">Useable IPs</th>
|
||||
<th id="hostsHeader" style="display: table-cell;">Hosts</th>
|
||||
<th id="noteHeader" style="display: table-cell;">Note</th>
|
||||
<th id="joinHeader" colspan="14" style="display: table-cell;"><span class="split">Split</span>/<span class="join">Join</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="calcbody">
|
||||
<tr>
|
||||
<td>10.0.0.0/17</td>
|
||||
<td>10.0.0.0 - 10.0.127.255</td>
|
||||
<td>10.0.0.1 - 10.0.127.254</td>
|
||||
<td>32766</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="13" class="split rotate"><span>/17</span></td>
|
||||
<td rowspan="14" colspan="1" class="join rotate"><span>/16</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.128.0/19</td>
|
||||
<td>10.0.128.0 - 10.0.159.255</td>
|
||||
<td>10.0.128.1 - 10.0.159.254</td>
|
||||
<td>8190</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="11" class="split rotate"><span>/19</span></td>
|
||||
<td rowspan="6" colspan="1" class="join rotate"><span>/18</span></td>
|
||||
<td rowspan="13" colspan="1" class="join rotate"><span>/17</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.160.0/20</td>
|
||||
<td>10.0.160.0 - 10.0.175.255</td>
|
||||
<td>10.0.160.1 - 10.0.175.254</td>
|
||||
<td>4094</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="10" class="split rotate"><span>/20</span></td>
|
||||
<td rowspan="5" colspan="1" class="join rotate"><span>/19</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.176.0/23</td>
|
||||
<td>10.0.176.0 - 10.0.177.255</td>
|
||||
<td>10.0.176.1 - 10.0.177.254</td>
|
||||
<td>510</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="7" class="split rotate"><span>/23</span></td>
|
||||
<td rowspan="2" colspan="1" class="join rotate"><span>/22</span></td>
|
||||
<td rowspan="3" colspan="1" class="join rotate"><span>/21</span></td>
|
||||
<td rowspan="4" colspan="1" class="join rotate"><span>/20</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.178.0/23</td>
|
||||
<td>10.0.178.0 - 10.0.179.255</td>
|
||||
<td>10.0.178.1 - 10.0.179.254</td>
|
||||
<td>510</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="7" class="split rotate"><span>/23</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.180.0/22</td>
|
||||
<td>10.0.180.0 - 10.0.183.255</td>
|
||||
<td>10.0.180.1 - 10.0.183.254</td>
|
||||
<td>1022</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="8" class="split rotate"><span>/22</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.184.0/21</td>
|
||||
<td>10.0.184.0 - 10.0.191.255</td>
|
||||
<td>10.0.184.1 - 10.0.191.254</td>
|
||||
<td>2046</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="9" class="split rotate"><span>/21</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.192.0/19</td>
|
||||
<td>10.0.192.0 - 10.0.223.255</td>
|
||||
<td>10.0.192.1 - 10.0.223.254</td>
|
||||
<td>8190</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="11" class="split rotate"><span>/19</span></td>
|
||||
<td rowspan="7" colspan="1" class="join rotate"><span>/18</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.224.0/20</td>
|
||||
<td>10.0.224.0 - 10.0.239.255</td>
|
||||
<td>10.0.224.1 - 10.0.239.254</td>
|
||||
<td>4094</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="10" class="split rotate"><span>/20</span></td>
|
||||
<td rowspan="6" colspan="1" class="join rotate"><span>/19</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.240.0/21</td>
|
||||
<td>10.0.240.0 - 10.0.247.255</td>
|
||||
<td>10.0.240.1 - 10.0.247.254</td>
|
||||
<td>2046</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="9" class="split rotate"><span>/21</span></td>
|
||||
<td rowspan="5" colspan="1" class="join rotate"><span>/20</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.248.0/22</td>
|
||||
<td>10.0.248.0 - 10.0.251.255</td>
|
||||
<td>10.0.248.1 - 10.0.251.254</td>
|
||||
<td>1022</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="8" class="split rotate"><span>/22</span></td>
|
||||
<td rowspan="4" colspan="1" class="join rotate"><span>/21</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.252.0/23</td>
|
||||
<td>10.0.252.0 - 10.0.253.255</td>
|
||||
<td>10.0.252.1 - 10.0.253.254</td>
|
||||
<td>510</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="7" class="split rotate"><span>/23</span></td>
|
||||
<td rowspan="3" colspan="1" class="join rotate"><span>/22</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.254.0/24</td>
|
||||
<td>10.0.254.0 - 10.0.254.255</td>
|
||||
<td>10.0.254.1 - 10.0.254.254</td>
|
||||
<td>254</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="6" class="split rotate"><span>/24</span></td>
|
||||
<td rowspan="2" colspan="1" class="join rotate"><span>/23</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10.0.255.0/24</td>
|
||||
<td>10.0.255.0 - 10.0.255.255</td>
|
||||
<td>10.0.255.1 - 10.0.255.254</td>
|
||||
<td>254</td>
|
||||
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
|
||||
<td rowspan="1" colspan="6" class="split rotate"><span>/24</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="main.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
65
main.css
Normal file
65
main.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
0
main.js
Normal file
0
main.js
Normal file
Loading…
Reference in a new issue