davidc · jcostom · Jul 6, 2018 · Jul 6, 2018 · Jul 10, 2018 · Jul 10, 2018
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,49 @@
+# 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
+
+# vscode emphasis
+.vscode
diff --git 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
diff --git a/subnets.html → funcs.js b/subnets.html → funcs.js
@@ -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 @@
   /* 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 @@
     else {
       addressRange = inet_ntoa(addressFirst)+' - '+inet_ntoa(addressLast);
       if (mask == 31) {
-	useableRange = addressRange;
-	numHosts = 2;
+    useableRange = addressRange;
+    numHosts = 2;
       }
       else {
-	useableRange = inet_ntoa(useableFirst)+' - '+inet_ntoa(useableLast);
-	numHosts = (1 + useableLast - useableFirst);
+    useableRange = inet_ntoa(useableFirst)+' - '+inet_ntoa(useableLast);
+    numHosts = (1 + useableLast - useableFirst);
       }
     }
 
@@ -232,16 +226,16 @@
       newCell.colSpan = (colspan > 1 ? colspan : 1);
 
       if (i == (labels.length/3)-1) {
-	newCell.className = 'maskSpan';
+    newCell.className = 'maskSpan';
       }
       else {
-	newCell.className = 'maskSpanJoinable';
-	newCell.onclick = newJoin(joinnode);
-	//	newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];}
+    newCell.className = 'maskSpanJoinable';
+    newCell.onclick = newJoin(joinnode);
+    //  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);
 
@@ -340,7 +334,7 @@
 
 function subnet_addresses(mask)
 {
-  return 1<<(32-mask);
+  return 2**(32-mask);
 }
 
 function subnet_last_address(subnet, mask)
@@ -363,7 +357,7 @@
 
     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 @@
     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>
diff --git a/img/0.gif b/img/0.gif
diff --git a/img/0.png b/img/0.png
diff --git a/img/1.gif b/img/1.gif
diff --git a/img/1.png b/img/1.png
diff --git a/img/10.gif b/img/10.gif
diff --git a/img/10.png b/img/10.png
diff --git a/img/11.gif b/img/11.gif
diff --git a/img/11.png b/img/11.png
diff --git a/img/12.gif b/img/12.gif
diff --git a/img/12.png b/img/12.png
diff --git a/img/13.gif b/img/13.gif
diff --git a/img/13.png b/img/13.png
diff --git a/img/14.gif b/img/14.gif
diff --git a/img/14.png b/img/14.png
diff --git a/img/15.gif b/img/15.gif
diff --git a/img/15.png b/img/15.png
diff --git a/img/16.gif b/img/16.gif
diff --git a/img/16.png b/img/16.png
diff --git a/img/17.gif b/img/17.gif
diff --git a/img/17.png b/img/17.png
diff --git a/img/18.gif b/img/18.gif
diff --git a/img/18.png b/img/18.png
diff --git a/img/19.gif b/img/19.gif
diff --git a/img/19.png b/img/19.png
diff --git a/img/2.gif b/img/2.gif
diff --git a/img/2.png b/img/2.png
diff --git a/img/20.gif b/img/20.gif
diff --git a/img/20.png b/img/20.png
diff --git a/img/21.gif b/img/21.gif
diff --git a/img/21.png b/img/21.png
diff --git a/img/22.gif b/img/22.gif
diff --git a/img/22.png b/img/22.png
diff --git a/img/23.gif b/img/23.gif
diff --git a/img/23.png b/img/23.png
diff --git a/img/24.gif b/img/24.gif
diff --git a/img/24.png b/img/24.png
diff --git a/img/25.gif b/img/25.gif
diff --git a/img/25.png b/img/25.png
diff --git a/img/26.gif b/img/26.gif
diff --git a/img/26.png b/img/26.png
diff --git a/img/27.gif b/img/27.gif
diff --git a/img/27.png b/img/27.png
diff --git a/img/28.gif b/img/28.gif
diff --git a/img/28.png b/img/28.png
diff --git a/img/29.gif b/img/29.gif
diff --git a/img/29.png b/img/29.png
diff --git a/img/3.gif b/img/3.gif
diff --git a/img/3.png b/img/3.png
diff --git a/img/30.gif b/img/30.gif
diff --git a/img/30.png b/img/30.png
diff --git a/img/31.gif b/img/31.gif
diff --git a/img/31.png b/img/31.png
diff --git a/img/32.gif b/img/32.gif
diff --git a/img/32.png b/img/32.png
diff --git a/img/4.gif b/img/4.gif
diff --git a/img/4.png b/img/4.png
diff --git a/img/5.gif b/img/5.gif
diff --git a/img/5.png b/img/5.png
diff --git a/img/6.gif b/img/6.gif
diff --git a/img/6.png b/img/6.png
diff --git a/img/7.gif b/img/7.gif
diff --git a/img/7.png b/img/7.png
diff --git a/img/8.gif b/img/8.gif
diff --git a/img/8.png b/img/8.png
diff --git a/img/9.gif b/img/9.gif
diff --git a/img/9.png b/img/9.png
diff --git 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>