Updates, Optimizations.
* 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
parent
8ff281ddb6
commit
0354c4fbc8
46
.gitignore
vendored
Normal file
46
.gitignore
vendored
Normal 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
123
index.html
@ -1,90 +1,73 @@
|
||||
<!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>
|
||||
<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>
|
||||
</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>
|
||||
<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.<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>
|
||||
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
94
styles.css
94
styles.css
@ -1,34 +1,38 @@
|
||||
h1 {
|
||||
font-family: Arial, Verdana, sans-serif;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Verdana, sans-serif;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: Arial, Verdana, sans-serif;
|
||||
font-size: 75%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: Arial, Verdana, sans-serif;
|
||||
font-size: 60%;
|
||||
hr {
|
||||
border-bottom: 1px solid #fff;
|
||||
border-top: 1px solid #8c8b8b;
|
||||
size: 1;
|
||||
}
|
||||
|
||||
.calc {
|
||||
font-family: Arial, Verdana, sans-serif;
|
||||
font-size: 80%;
|
||||
border-collapse: collapse;
|
||||
border-collapse: collapse;
|
||||
font-family: 'Source Code Pro', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.calc td {
|
||||
border: 1px solid black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.calc thead {
|
||||
font-weight: bold;
|
||||
background-color: #eeeeee;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.disabledAction {
|
||||
@ -39,14 +43,72 @@ p {
|
||||
background-color: #cccccc;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.maskSpanJoinable {
|
||||
background-color: #cccccc;
|
||||
cursor: hand;
|
||||
text-align: right;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.maskSpanRotate {
|
||||
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
||||
background-color:green;
|
||||
.rTable {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user