diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..461eb85 --- /dev/null +++ b/.gitignore @@ -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 diff --git a/index.html b/index.html index 95930c0..d639396 100644 --- a/index.html +++ b/index.html @@ -1,90 +1,73 @@ - - Visual Subnet Calculator 2.0 - + + + Visual Subnet Calculator 2.0 + - - - - - -
-

Visual Subnet Calculator

Enter the network you wish to subnet:

- - - - - - - - - - - -
Network AddressMask bits
/ - -
- -

Show columns: - - - - - - - -

+
+
+
+
Network Address
+
/ Mask Bits
+
+
+
+
/
+
+ + +
+
+
+
-

Click below to split and join subnets.
+ + + +

Click below to split and join subnets.
If you wish to save this subnetting for later, bookmark this hyperlink.

-		 -Sargasso Networks -
- -
-
-
+
--------- - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + +
Subnet addressNetmaskRange of addressesUseable IPsHostsDivideJoin
Subnet addressNetmaskRange of addressesUseable IPsHostsDivideJoin
diff --git a/styles.css b/styles.css index 88e64e2..c1a25f0 100644 --- a/styles.css +++ b/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; }