Merge 0a5424f01df41a9c6882c9870174f963f82f6c2a into 1e98ebdca52f80d6f90cc2e82c5b578b265e9bad

2018-07-10 17:02:14 +00:00 · 2018-07-10 17:02:14 +00:00 · abced9db5f
commit abced9db5f
parent 1e98ebdca5 0a5424f01d
71 changed files with 255 additions and 180 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,46 @@
 # Windows image file caches
 Thumbs.db
 ehthumbs.db
 # Folder config file
 Desktop.ini
 # Recycle Bin used on file shares
 $RECYCLE.BIN/
 # Windows Installer files
 *.cab
 *.msi
 *.msm
 *.msp
 # Windows shortcuts
 *.lnk
 # =========================
 # Operating System Files
 # =========================
 # OSX
 # =========================
 .DS_Store
 .AppleDouble
 .LSOverride
 # Thumbnails
 ._*
 # Files that might appear on external disk
 .Spotlight-V100
 .Trashes
 # Directories potentially created on remote AFP share
 .AppleDB
 .AppleDesktop
 Network Trash Folder
 Temporary Items
 .apdisk
 # Jupyter Notebook Checkpoints
 .ipynb_checkpoints
--- a/README.md
+++ b/README.md
@ -1,2 +1,2 @@
 # subnets
-Visual subnet calculator as seen at http://www.davidc.net/sites/default/subnets/subnets.html
+Forked copy of a Visual subnet calculator. Original seen at http://www.davidc.net/sites/default/subnets/subnets.html
--- a/subnets.html
+++ b/subnets.html
@ -1,9 +1,3 @@
 <html>
 <head>
 <title>Visual Subnet Calculator</title>
 <script language="javascript" type="text/javascript">
 <!--
 var curNetwork = 0;
 var curMask = 0;
@ -80,7 +74,7 @@ function recreateTables()
  /* Create the bookmark hyperlink */
  var link = document.getElementById('saveLink');
  if (link) {
-    link.href = 'subnets.html?network='+inet_ntoa(curNetwork)+'&mask='+curMask+'&division='+binToAscii(nodeToString(rootSubnet));
+    link.href = 'index.html?network='+inet_ntoa(curNetwork)+'&mask='+curMask+'&division='+binToAscii(nodeToString(rootSubnet));
  }
 }
@ -172,12 +166,12 @@ function createRow(calcbody, node, address, mask, labels, depth)
    else {
      addressRange = inet_ntoa(addressFirst)+' - '+inet_ntoa(addressLast);
      if (mask == 31) {
-	useableRange = addressRange;
+    useableRange = addressRange;
-	numHosts = 2;
+    numHosts = 2;
      }
      else {
-	useableRange = inet_ntoa(useableFirst)+' - '+inet_ntoa(useableLast);
+    useableRange = inet_ntoa(useableFirst)+' - '+inet_ntoa(useableLast);
-	numHosts = (1 + useableLast - useableFirst);
+    numHosts = (1 + useableLast - useableFirst);
      }
    }
@ -232,16 +226,16 @@ function createRow(calcbody, node, address, mask, labels, depth)
      newCell.colSpan = (colspan > 1 ? colspan : 1);
      if (i == (labels.length/3)-1) {
-	newCell.className = 'maskSpan';
+    newCell.className = 'maskSpan';
      }
      else {
-	newCell.className = 'maskSpanJoinable';
+    newCell.className = 'maskSpanJoinable';
-	newCell.onclick = newJoin(joinnode);
+    newCell.onclick = newJoin(joinnode);
-	//	newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];}
+    //  newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];}
      }
      var newImg = document.createElement('IMG');
-      newImg.src = 'img/'+mask+'.gif';
+      newImg.src = 'img/'+mask+'.png';
      newCell.appendChild(newImg);
      newRow.appendChild(newCell);
@ -363,7 +357,7 @@ function preloadSubnetImages()
    for (var i=0; i<=32; i++) {
      var img = new Image();
-      img.src = 'img/'+i+'.gif';
+      img.src = 'img/'+i+'.png';
      document.preloadedImages.push(img);
    }
  }
@ -417,169 +411,8 @@ function parseQueryString (str)
    for (var f = 0; f < fields.length; f++) {
      var field = fields[f].split('=');
      args[unescape(field[0].replace(/\+/g, ' '))] = 
-	unescape(field[1].replace(/\+/g, ' '));
+    unescape(field[1].replace(/\+/g, ' '));
    }
  }
  return args;
 }
 window.onload = calcOnLoad;
 function toggleColumn(cb)
 {
  var colName = 'col_'+(cb.id.substr(3));
  var col = document.getElementById(colName);
  if (cb.checked) {
    col.style.display = 'block';
  }
  else {
    col.style.display = 'none';
  }
  recreateTables(); /* because IE draws lines all over the place with border-collapse */
 }
 //-->
 </script>
 <style type="text/css">
 H1		{
  font-family: Arial, Verdana, sans-serif;
  font-size: 18pt;
 }
 BODY		{
  font-family: Arial, Verdana, sans-serif;
 }
 P		{
  font-family: Arial, Verdana, sans-serif;
  font-size: 75%;
 }
 .label		{
  font-family: Arial, Verdana, sans-serif;
  font-size: 60%;
 }
 .calc {
  font-family: Arial, Verdana, sans-serif;
  font-size: 80%;
  border-collapse: collapse; 
 }
 .calc td {
 border: 1px solid black;
 }
 .calc thead {
  font-weight: bold;
  background-color: #eeeeee;
 }
 .disabledAction {
 color: #dddddd;
 }
 .maskSpan {
  background-color: #cccccc;
  text-align: right;
 }
 .maskSpanJoinable {
  background-color: #cccccc;
  text-align: right;
 cursor: hand;
 }
 .maskSpanRotate {
 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 background-color:green;
 }
 </style>
 </head>
 <body>
 <table width="100%">
 <tr valign=top>
 <td>
 <h1>Visual Subnet Calculator</h1>
 <p>Enter the network you wish to subnet:</p>
 <form name="calc" onsubmit="updateNetwork(); return false;">
 <table cellspacing="0">
 <tr>
 <td class="label">Network Address</td>
 <td class="label">Mask bits</td>
 </tr>
 <tr>
 <td><input type="text" name="network" size="15" maxlength="15" value="192.168.0.0"></td>
 <td>/<input type="text" name="netbits" size="2" maxlength="2" value="16"></td>
 <td><input type="submit" value="Update">
 <input type="button" value="Reset" onclick="if (confirm('This will reset all subnet divisions you have made. Proceed?')) startOver();">
 </td>
 </tr>
 </table>
 <p>Show columns: 
 <input type="checkbox" id="cb_subnet" checked onclick="toggleColumn(this)"><label for="cb_subnet">Subnet address</label>
 <input type="checkbox" id="cb_netmask" onclick="toggleColumn(this)"><label for="cb_netmask">Netmask</label>
 <input type="checkbox" id="cb_range" checked onclick="toggleColumn(this)"><label for="cb_range">Range of addresses</label>
 <input type="checkbox" id="cb_useable" checked onclick="toggleColumn(this)"><label for="cb_useable">Useable IPs</label>
 <input type="checkbox" id="cb_hosts" checked onclick="toggleColumn(this)"><label for="cb_hosts">Hosts</label>
 <input type="checkbox" id="cb_divide" checked onclick="toggleColumn(this)"><label for="cb_divide">Divide</label>
 <input type="checkbox" id="cb_join" checked onclick="toggleColumn(this)"><label for="cb_join">Join</label>
 </p>
 </form>
 <p>Click below to split and join subnets.<br>
 If you wish to save this subnetting for later, bookmark <a href="subnets.html" id="saveLink">this hyperlink</a>.</p>
 </td>
 <td align="right">
 <a href="http://www.sargasso.net/"><img src="http://noc.us.sargasso.net/neteng.gif" width="162" height="64" alt="Sargasso Networks" border="0"></a>
 </td>
 </tr>
 </table>
 <br>
 <hr noshade color="black" size="1">
 <br>
 <table class="calc" cellspacing="0" cellpadding="2">
 <colgroup>
 <col id="col_subnet">
 <col id="col_netmask" style="display: none">
 <col id="col_range">
 <col id="col_useable">
 <col id="col_hosts">
 <col id="col_divide">
 <col id="col_join">
 </colgroup>
 <thead>
 <tr>
 <td>Subnet address</td>
 <td>Netmask</td>
 <td>Range of addresses</td>
 <td>Useable IPs</td>
 <td>Hosts</td>
 <td>Divide</td>
 <td id="joinHeader">Join</td>
 </tr>
 </thead>
 <tbody id="calcbody">
 <!--tr>
 <td>130.94.203.0/24</td>
 <td>130.94.203.0 - 130.94.203.255</td>
 <td>130.94.203.1 - 130.94.203.254 (254)</td>
 <td>Divide</td>
 </tr-->
 </tbody>
 </table>
 </body>
 </html>
--- a/img/0.gif
+++ b/img/0.gif
--- a/img/0.png
+++ b/img/0.png
--- a/img/1.gif
+++ b/img/1.gif
--- a/img/1.png
+++ b/img/1.png
--- a/img/10.gif
+++ b/img/10.gif
--- a/img/10.png
+++ b/img/10.png
--- a/img/11.gif
+++ b/img/11.gif
--- a/img/11.png
+++ b/img/11.png
--- a/img/12.gif
+++ b/img/12.gif
--- a/img/12.png
+++ b/img/12.png
--- a/img/13.gif
+++ b/img/13.gif
--- a/img/13.png
+++ b/img/13.png
--- a/img/14.gif
+++ b/img/14.gif
--- a/img/14.png
+++ b/img/14.png
--- a/img/15.gif
+++ b/img/15.gif
--- a/img/15.png
+++ b/img/15.png
--- a/img/16.gif
+++ b/img/16.gif
--- a/img/16.png
+++ b/img/16.png
--- a/img/17.gif
+++ b/img/17.gif
--- a/img/17.png
+++ b/img/17.png
--- a/img/18.gif
+++ b/img/18.gif
--- a/img/18.png
+++ b/img/18.png
--- a/img/19.gif
+++ b/img/19.gif
--- a/img/19.png
+++ b/img/19.png
--- a/img/2.gif
+++ b/img/2.gif
--- a/img/2.png
+++ b/img/2.png
--- a/img/20.gif
+++ b/img/20.gif
--- a/img/20.png
+++ b/img/20.png
--- a/img/21.gif
+++ b/img/21.gif
--- a/img/21.png
+++ b/img/21.png
--- a/img/22.gif
+++ b/img/22.gif
--- a/img/22.png
+++ b/img/22.png
--- a/img/23.gif
+++ b/img/23.gif
--- a/img/23.png
+++ b/img/23.png
--- a/img/24.gif
+++ b/img/24.gif
--- a/img/24.png
+++ b/img/24.png
--- a/img/25.gif
+++ b/img/25.gif
--- a/img/25.png
+++ b/img/25.png
--- a/img/26.gif
+++ b/img/26.gif
--- a/img/26.png
+++ b/img/26.png
--- a/img/27.gif
+++ b/img/27.gif
--- a/img/27.png
+++ b/img/27.png
--- a/img/28.gif
+++ b/img/28.gif
--- a/img/28.png
+++ b/img/28.png
--- a/img/29.gif
+++ b/img/29.gif
--- a/img/29.png
+++ b/img/29.png
--- a/img/3.gif
+++ b/img/3.gif
--- a/img/3.png
+++ b/img/3.png
--- a/img/30.gif
+++ b/img/30.gif
--- a/img/30.png
+++ b/img/30.png
--- a/img/31.gif
+++ b/img/31.gif
--- a/img/31.png
+++ b/img/31.png
--- a/img/32.gif
+++ b/img/32.gif
--- a/img/32.png
+++ b/img/32.png
--- a/img/4.gif
+++ b/img/4.gif
--- a/img/4.png
+++ b/img/4.png
--- a/img/5.gif
+++ b/img/5.gif
--- a/img/5.png
+++ b/img/5.png
--- a/img/6.gif
+++ b/img/6.gif
--- a/img/6.png
+++ b/img/6.png
--- a/img/7.gif
+++ b/img/7.gif
--- a/img/7.png
+++ b/img/7.png
--- a/img/8.gif
+++ b/img/8.gif
--- a/img/8.png
+++ b/img/8.png
--- a/img/9.gif
+++ b/img/9.gif
--- a/img/9.png
+++ b/img/9.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,76 @@
 <!DOCTYPE html>
 <html>
 <head>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Source+Code+Pro">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Visual Subnet Calculator 2.0</title>
    <script src="funcs.js"></script>
    <script>window.onload = calcOnLoad;</script>
 </head>
 <body>
 <h1>Visual Subnet Calculator</h1>
 <p>Enter the network you wish to subnet:</p>
 <form name="calc" onsubmit="updateNetwork(); return false;">
    <div class="rTable">
        <div class="rTableBody">
            <div class="rTableRow">
                <div class="rTableHead">Network Address</div>
                <div class="rTableHead">/ Mask Bits</div>
            </div>
            <div class="rTableRow">
                <div class="rTableCell"><input maxlength="15" name="network" size="15" type="text" value="192.168.0.0" /></div>
                <div class="rTableCell">/<input maxlength="2" name="netbits" size="2" type="text" value="16" /></div>
                <div class="rTableCellButton">
                    <input type="submit" value="Update" />
                    <input type="button" value="Reset" onclick="if (confirm('This will reset all subnet divisions you have made. Proceed?')) startOver();">
                </div>
            </div>
        </div>
    </div>
 </form>
 <p>Click below to split and join subnets.</p>
 <p>If you wish to save this subnetting for later, bookmark <a href="index.html" id="saveLink">this hyperlink</a>.</p>
 <p>Confused about the /31 netmask? Read <a href="https://tools.ietf.org/html/rfc3021" target="_blank">RFC3021</a> to get some clarity.</p>
 <hr />
 <table class="calc" cellspacing="0" cellpadding="2">
    <colgroup>
        <col id="col_subnet">
        <col id="col_netmask" style="display: none">
        <col id="col_range">
        <col id="col_useable">
        <col id="col_hosts">
        <col id="col_divide">
        <col id="col_join">
    </colgroup>
    <thead>
        <tr>
            <td>Subnet address</td>
            <td>Netmask</td>
            <td>Range of addresses</td>
            <td>Useable IPs</td>
            <td>Hosts</td>
            <td>Divide</td>
            <td id="joinHeader">Join</td>
        </tr>
    </thead>
    <tbody id="calcbody">
    <!--tr>
    <td>130.94.203.0/24</td>
    <td>130.94.203.0 - 130.94.203.255</td>
    <td>130.94.203.1 - 130.94.203.254 (254)</td>
    <td>Divide</td>
    </tr-->
    </tbody>
 </table>
 </body>
 </html>
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,120 @@
 h1 {
  font-family: 'Lato', sans-serif;
  font-size: 140%;
 }
 body {
  font-family: 'Lato', sans-serif;
 }
 p {
  font-family: 'Lato', sans-serif;
  font-size: 80%;
 }
 hr {
  border-bottom: 1px solid #fff;
  border-top: 1px solid #8c8b8b;
 }
 .calc {
  border-collapse: collapse;
  font-family: 'Source Code Pro', sans-serif;
  font-size: 80%; 
 }
 .calc td {
  border: 1px solid black;
  padding: 5px;
 }
 .calc thead {
  background-color: #eeeeee;
  font-family: 'Lato', sans-serif;
  font-size:  120%;
  font-weight: bold;
 }
 .disabledAction {
  color: red;
 }
 .maskSpan {
  background-color: #cccccc;
  text-align: right;
 }
 .maskSpanJoinable {
  background-color: #cccccc;
  cursor: hand;
  text-align: right;
 }
 .rTable {
  display: table;
 } 
 .rTableRow {
  display: table-row;
 } 
 .rTableHeading {
  background-color: #ddd;
  display: table-header-group;
 } 
 .rTableCell {
  display: table-cell;
 }
 .rTableHead {
  display: table-cell;
  font-size: 80%;
  font-weight: bold;
 }
 .rTableCellButton {
  display: table-cell;
 }
 .rTableHeading {
  background-color: #ddd;
  display: table-header-group;
  font-weight: bold;
 } 
 .rTableFoot {
  background-color: #ddd;
  display: table-footer-group;
  font-weight: bold;
 }
 .rTableBody {
  display: table-row-group;
 }
 input[type=button], input[type=submit], input[type=reset] {
  border: none;
  color: white;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 90%;
  font-weight: bold;
  margin: 4px 2px;
  padding: 8px 8px;
  text-decoration: none;
 }
 input[type=submit] {
  background-color: green;
 }
 input[type=button], input[type=reset] {
  background-color: red;
 }
 input[type=text] {
  font-family: 'Source Code Pro', sans-serif;
  font-size: 90%;
 }
`@ -1,2 +1,2 @@`
	`# subnets`	`# subnets`
	`Visual subnet calculator as seen at http://www.davidc.net/sites/default/subnets/subnets.html`	`Forked copy of a Visual subnet calculator. Original seen at http://www.davidc.net/sites/default/subnets/subnets.html`