paradizelost/visualsubnetcalculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates, Optimizations.

Browse Source 
* Got rid of table at top of page, changed for <div>
* Intro Google Fonts
	* Lato for most
	* Source Code Pro for addresses
* Overall beautify
This commit is contained in:
Jason Costomiris 2018-07-06 15:48:29 -04:00
parent 8ff281ddb6
commit 0354c4fbc8
3 changed files with 177 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
.gitignore vendored Normal file
View File

@ -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

123
index.html
View File

@ -1,90 +1,73 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Source+Code+Pro">
<title>Visual Subnet Calculator 2.0</title> <link rel="stylesheet" type="text/css" href="styles.css" />
<script src="funcs.js"></script> <title>Visual Subnet Calculator 2.0</title>
<script src="funcs.js"></script>
</head> </head>
<body> <body>
<table width="100%">
<tr valign=top>
<td>
<h1>Visual Subnet Calculator</h1> <h1>Visual Subnet Calculator</h1>
<p>Enter the network you wish to subnet:</p> <p>Enter the network you wish to subnet:</p>
<form name="calc" onsubmit="updateNetwork(); return false;"> <form name="calc" onsubmit="updateNetwork(); return false;">
<div class="rTable">
<table cellspacing="0"> <div class="rTableBody">
<tr> <div class="rTableRow">
<td class="label">Network Address</td> <div class="rTableHead">Network Address</div>
<td class="label">Mask bits</td> <div class="rTableHead">/ Mask Bits</div>
</tr> </div>
<tr> <div class="rTableRow">
<td><input type="text" name="network" size="15" maxlength="15" value="192.168.0.0"></td> <div class="rTableCell"><input maxlength="15" name="network" size="15" type="text" value="192.168.0.0" /></div>
<td>/<input type="text" name="netbits" size="2" maxlength="2" value="16"></td> <div class="rTableCell">/<input maxlength="2" name="netbits" size="2" type="text" value="16" /></div>
<td><input type="submit" value="Update"> <div class="rTableCellButton">
<input type="button" value="Reset" onclick="if (confirm('This will reset all subnet divisions you have made. Proceed?')) startOver();"> <input type="submit" value="Update" />
</td> <input type="button" value="Reset" onclick="if (confirm('This will reset all subnet divisions you have made. Proceed?')) startOver();">
</tr> </div>
</table> </div>
</div>
<p>Show columns: </div>
<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> </form>
<p>Click below to split and join subnets.<br>
<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> If you wish to save this subnetting for later, bookmark <a href="index.html" id="saveLink">this hyperlink</a>.</p>
</td> <hr />
<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"> <table class="calc" cellspacing="0" cellpadding="2">
<colgroup> <colgroup>
<col id="col_subnet"> <col id="col_subnet">
<col id="col_netmask" style="display: none"> <col id="col_netmask" style="display: none">
<col id="col_range"> <col id="col_range">
<col id="col_useable"> <col id="col_useable">
<col id="col_hosts"> <col id="col_hosts">
<col id="col_divide"> <col id="col_divide">
<col id="col_join"> <col id="col_join">
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
<td>Subnet address</td> <td>Subnet address</td>
<td>Netmask</td> <td>Netmask</td>
<td>Range of addresses</td> <td>Range of addresses</td>
<td>Useable IPs</td> <td>Useable IPs</td>
<td>Hosts</td> <td>Hosts</td>
<td>Divide</td> <td>Divide</td>
<td id="joinHeader">Join</td> <td id="joinHeader">Join</td>
</tr> </tr>
</thead> </thead>
<tbody id="calcbody"> <tbody id="calcbody">
<!--tr> <!--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>

94
styles.css
View File

@ -1,34 +1,38 @@
h1 { h1 {
font-family: Arial, Verdana, sans-serif; font-family: 'Lato', sans-serif;
font-size: 18pt; font-size: 18pt;
} }
body { body {
font-family: Arial, Verdana, sans-serif; font-family: 'Lato', sans-serif;
} }
p { p {
font-family: Arial, Verdana, sans-serif; font-family: 'Lato', sans-serif;
font-size: 75%; font-size: 80%;
} }
.label { hr {
font-family: Arial, Verdana, sans-serif; border-bottom: 1px solid #fff;
font-size: 60%; border-top: 1px solid #8c8b8b;
size: 1;
} }
.calc { .calc {
font-family: Arial, Verdana, sans-serif; border-collapse: collapse;
font-size: 80%; font-family: 'Source Code Pro', sans-serif;
border-collapse: collapse; font-size: 80%;
} }
.calc td { .calc td {
border: 1px solid black; border: 1px solid black;
} }
.calc thead { .calc thead {
font-weight: bold;
background-color: #eeeeee; background-color: #eeeeee;
font-family: 'Lato', sans-serif;
font-size: 100%;
font-weight: bold;
} }
.disabledAction { .disabledAction {
@ -39,14 +43,72 @@ p {
background-color: #cccccc; background-color: #cccccc;
text-align: right; text-align: right;
} }
.maskSpanJoinable { .maskSpanJoinable {
background-color: #cccccc; background-color: #cccccc;
cursor: hand;
text-align: right; text-align: right;
cursor: hand;
} }
.maskSpanRotate { .rTable {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); display: table;
background-color:green; }
.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-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;
} }