WIP: undo some formatting
This commit is contained in:
Yehuda Katz
parent
5a01d82b6f
commit
6d1332dbcd
307
subnets.html
307
subnets.html
@ -1,11 +1,11 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Visual Subnet Calculator</title>
|
<title>Visual Subnet Calculator</title>
|
||||||
<script src="calculations_4.js"></script>
|
<script src="calculations_4.js"></script>
|
||||||
<script src="calculations_6.js"></script>
|
<script src="calculations_6.js"></script>
|
||||||
<script src="calculations.js"></script>
|
<script src="calculations.js"></script>
|
||||||
|
|
||||||
<script language="javascript" type="text/javascript">
|
<script language="javascript" type="text/javascript">
|
||||||
var curNetwork = 0;
|
var curNetwork = 0;
|
||||||
var curMask = 0;
|
var curMask = 0;
|
||||||
|
|
||||||
@ -403,7 +403,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function parseQueryString(str) {
|
function parseQueryString(str)
|
||||||
|
{
|
||||||
str = str ? str : location.search;
|
str = str ? str : location.search;
|
||||||
var query = str.charAt(0) == "?" ? str.substring(1) : str;
|
var query = str.charAt(0) == "?" ? str.substring(1) : str;
|
||||||
var args = new Object();
|
var args = new Object();
|
||||||
@ -418,222 +419,170 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
return args;
|
return args;
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = calcOnLoad;
|
window.onload = calcOnLoad;
|
||||||
|
|
||||||
function toggleColumn(cb) {
|
function toggleColumn(cb)
|
||||||
var colName = "col_" + cb.id.substr(3);
|
{
|
||||||
|
var colName = 'col_'+(cb.id.substr(3));
|
||||||
var col = document.getElementById(colName);
|
var col = document.getElementById(colName);
|
||||||
|
|
||||||
if (cb.checked) {
|
if (cb.checked) {
|
||||||
col.style.display = "block";
|
col.style.display = 'block';
|
||||||
} else {
|
}
|
||||||
col.style.display = "none";
|
else {
|
||||||
|
col.style.display = 'none';
|
||||||
}
|
}
|
||||||
recreateTables(); /* because IE draws lines all over the place with border-collapse */
|
recreateTables(); /* because IE draws lines all over the place with border-collapse */
|
||||||
}
|
}
|
||||||
</script>
|
|
||||||
|
|
||||||
<style type="text/css">
|
//-->
|
||||||
H1 {
|
</script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
H1 {
|
||||||
font-family: Arial, Verdana, sans-serif;
|
font-family: Arial, Verdana, sans-serif;
|
||||||
font-size: 18pt;
|
font-size: 18pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
BODY {
|
BODY {
|
||||||
font-family: Arial, Verdana, sans-serif;
|
font-family: Arial, Verdana, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
P {
|
P {
|
||||||
font-family: Arial, Verdana, sans-serif;
|
font-family: Arial, Verdana, sans-serif;
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
|
||||||
|
.label {
|
||||||
font-family: Arial, Verdana, sans-serif;
|
font-family: Arial, Verdana, sans-serif;
|
||||||
font-size: 60%;
|
font-size: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calc {
|
.calc {
|
||||||
font-family: Arial, Verdana, sans-serif;
|
font-family: Arial, Verdana, sans-serif;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
.calc td {
|
.calc td {
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calc thead {
|
.calc thead {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: #eeeeee;
|
background-color: #eeeeee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabledAction {
|
.disabledAction {
|
||||||
color: #dddddd;
|
color: #dddddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.maskSpan {
|
.maskSpan {
|
||||||
background-color: #cccccc;
|
background-color: #cccccc;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.maskSpanJoinable {
|
.maskSpanJoinable {
|
||||||
background-color: #cccccc;
|
background-color: #cccccc;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
cursor: hand;
|
cursor: hand;
|
||||||
}
|
}
|
||||||
|
|
||||||
.maskSpanRotate {
|
.maskSpanRotate {
|
||||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
||||||
background-color: green;
|
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>
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
<form name="calc" onsubmit="updateNetwork(); return false;">
|
<table width="100%">
|
||||||
<table cellspacing="0">
|
<tr valign=top>
|
||||||
<tr>
|
<td>
|
||||||
<td class="label">IPv4 / IPv6</td>
|
|
||||||
<td class="label">Network Address</td>
|
|
||||||
<td class="label">Mask bits</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<input type="radio" name="version" value="4" checked />
|
|
||||||
<input type="radio" name="version" value="6" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="network"
|
|
||||||
size="15"
|
|
||||||
maxlength="45"
|
|
||||||
value="192.168.0.0"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
/<input
|
|
||||||
type="text"
|
|
||||||
name="netbits"
|
|
||||||
size="3"
|
|
||||||
maxlength="3"
|
|
||||||
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>
|
<h1>Visual Subnet Calculator</h1>
|
||||||
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>
|
<p>Enter the network you wish to subnet:</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="https://github.com/davidc/subnets"
|
|
||||||
><img
|
|
||||||
alt="Fork me on GitHub"
|
|
||||||
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png"
|
|
||||||
style="right: 0; top: 0; position: absolute"
|
|
||||||
/></a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<br />
|
<form name="calc" onsubmit="updateNetwork(); return false;">
|
||||||
<hr noshade color="black" size="1" />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<table class="calc" cellspacing="0" cellpadding="2">
|
<table cellspacing="0">
|
||||||
<colgroup>
|
<tr>
|
||||||
<col id="col_subnet" />
|
<td class="label">IPv4 / IPv6</td>
|
||||||
<col id="col_netmask" style="display: none" />
|
<td class="label">Network Address</td>
|
||||||
<col id="col_range" />
|
<td class="label">Mask bits</td>
|
||||||
<col id="col_useable" />
|
</tr>
|
||||||
<col id="col_hosts" />
|
<tr>
|
||||||
<col id="col_divide" />
|
<td>
|
||||||
<col id="col_join" />
|
<input type="radio" name="version" value="4" checked />
|
||||||
</colgroup>
|
<input type="radio" name="version" value="6" />
|
||||||
<thead>
|
</td>
|
||||||
<tr>
|
<td><input type="text" name="network" size="15" maxlength="45" value="192.168.0.0"></td>
|
||||||
<td>Subnet address</td>
|
<td>/<input type="text" name="netbits" size="3" maxlength="3" value="16"></td>
|
||||||
<td>Netmask</td>
|
<td><input type="submit" value="Update" />
|
||||||
<td>Range of addresses</td>
|
<input type="button" value="Reset" onclick="if (confirm('This will reset all subnet divisions you have made. Proceed?')) startOver();">
|
||||||
<td>Useable IPs</td>
|
</td>
|
||||||
<td>Hosts</td>
|
</tr>
|
||||||
<td>Divide</td>
|
</table>
|
||||||
<td id="joinHeader">Join</td>
|
|
||||||
</tr>
|
<p>Show columns:
|
||||||
</thead>
|
<input type="checkbox" id="cb_subnet" checked onclick="toggleColumn(this)"><label for="cb_subnet">Subnet address</label>
|
||||||
<tbody id="calcbody">
|
<input type="checkbox" id="cb_netmask" onclick="toggleColumn(this)"><label for="cb_netmask">Netmask</label>
|
||||||
<!--tr>
|
<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="https://github.com/davidc/subnets"><img alt="Fork me on GitHub" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png" style="right: 0;top: 0;position: absolute;" ></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/24</td>
|
||||||
<td>130.94.203.0 - 130.94.203.255</td>
|
<td>130.94.203.0 - 130.94.203.255</td>
|
||||||
<td>130.94.203.1 - 130.94.203.254 (254)</td>
|
<td>130.94.203.1 - 130.94.203.254 (254)</td>
|
||||||
<td>Divide</td>
|
<td>Divide</td>
|
||||||
</tr-->
|
</tr-->
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</body>
|
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user