Initial Push after fork.

* Change from GIF to PNG (unencumbered image formats are better) * Modularized - Moved CSS and JS to their own files
2018-07-06 13:28:34 -04:00 · 2018-07-06 13:28:34 -04:00 · 8ff281ddb6
commit 8ff281ddb6
parent 1e98ebdca5
70 changed files with 156 additions and 160 deletions
--- 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,7 +1,3 @@
 <html>
 <head>
 <title>Visual Subnet Calculator</title>
 <script language="javascript" type="text/javascript">
 <!--
 var curNetwork = 0;
@ -80,7 +76,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));
  }
 }
@ -241,7 +237,7 @@ function createRow(calcbody, node, address, mask, labels, depth)
      }
      var newImg = document.createElement('IMG');
-      newImg.src = 'img/'+mask+'.gif';
+      newImg.src = 'img/'+mask+'.png';
      newCell.appendChild(newImg);
      newRow.appendChild(newCell);
@ -363,7 +359,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);
    }
  }
@ -440,146 +436,3 @@ function toggleColumn(cb)
 }
 //-->
 </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,91 @@
 <!DOCTYPE html>
 <html>
 <head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <title>Visual Subnet Calculator 2.0</title>
  <script src="funcs.js"></script>
 </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="index.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/styles.css
+++ b/styles.css
@ -0,0 +1,52 @@
 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;
 }
`@ -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`