Initial Push after fork.
* Change from GIF to PNG (unencumbered image formats are better) * Modularized - Moved CSS and JS to their own files
Jason Costomiris
@ -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
|
||||
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
@ -172,12 +168,12 @@ function createRow(calcbody, node, address, mask, labels, depth)
|
||||
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 +228,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.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);
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -417,7 +413,7 @@ 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;
|
||||
@ -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>
|
||||
BIN
img/10.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/10.png
Normal file
|
After Width: | Height: | Size: 335 B |
BIN
img/11.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/11.png
Normal file
|
After Width: | Height: | Size: 315 B |
BIN
img/12.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/12.png
Normal file
|
After Width: | Height: | Size: 334 B |
BIN
img/13.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/13.png
Normal file
|
After Width: | Height: | Size: 333 B |
BIN
img/14.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/14.png
Normal file
|
After Width: | Height: | Size: 331 B |
BIN
img/15.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/15.png
Normal file
|
After Width: | Height: | Size: 336 B |
BIN
img/16.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/16.png
Normal file
|
After Width: | Height: | Size: 335 B |
BIN
img/17.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/17.png
Normal file
|
After Width: | Height: | Size: 333 B |
BIN
img/18.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/18.png
Normal file
|
After Width: | Height: | Size: 334 B |
BIN
img/19.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/19.png
Normal file
|
After Width: | Height: | Size: 336 B |
BIN
img/20.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/20.png
Normal file
|
After Width: | Height: | Size: 339 B |
BIN
img/21.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/21.png
Normal file
|
After Width: | Height: | Size: 338 B |
BIN
img/22.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/22.png
Normal file
|
After Width: | Height: | Size: 320 B |
BIN
img/23.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/23.png
Normal file
|
After Width: | Height: | Size: 338 B |
BIN
img/24.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/24.png
Normal file
|
After Width: | Height: | Size: 340 B |
BIN
img/25.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/25.png
Normal file
|
After Width: | Height: | Size: 340 B |
BIN
img/26.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/26.png
Normal file
|
After Width: | Height: | Size: 341 B |
BIN
img/27.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/27.png
Normal file
|
After Width: | Height: | Size: 337 B |
BIN
img/28.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/28.png
Normal file
|
After Width: | Height: | Size: 339 B |
BIN
img/29.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/29.png
Normal file
|
After Width: | Height: | Size: 338 B |
BIN
img/30.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/30.png
Normal file
|
After Width: | Height: | Size: 333 B |
BIN
img/31.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/31.png
Normal file
|
After Width: | Height: | Size: 334 B |
BIN
img/32.gif
|
Before Width: | Height: | Size: 179 B |
BIN
img/32.png
Normal file
|
After Width: | Height: | Size: 331 B |
91
index.html
Normal file
@ -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>
|
||||
52
styles.css
Normal file
@ -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;
|
||||
}
|
||||
|
||||