234 lines
16 KiB
HTML
234 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Visual Subnet Calculator - Split/Join</title>
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<link href="css/main.css" rel="stylesheet">
|
|
<meta name="description" content="Quickly and easily design network layouts. Split and join subnets, add notes and color, then collaborate with others by sharing a custom link to your design.">
|
|
<meta name="robots" content="index, follow" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
|
|
<link rel="manifest" href="icon/site.webmanifest">
|
|
<link rel="mask-icon" href="icon/safari-pinned-tab.svg" color="#5bbad5">
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
|
<meta name="theme-color" content="#ffffff">
|
|
</head>
|
|
<body>
|
|
<div class="container-xxl mt-3">
|
|
<div class="float-end" id="navigation">
|
|
<a href="#" id="info_icon" data-bs-toggle="modal" data-bs-target="#aboutModal" aria-label="About">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
|
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
|
|
</svg>
|
|
</a><a href="https://github.com/ckabalan/visualsubnetcalc" target="_blank" aria-label="GitHub">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<h1>Visual Subnet Calculator</h1>
|
|
<div class="alert alert-primary alert-dismissible show mt-3" role="alert">
|
|
<p class="mb-1">Quickly and easily design network layouts. Split and join subnets, add notes and color, then collaborate with others by sharing a custom link to your design.</p>
|
|
<p class="mb-0">Enter the network you wish to subnet and use the Split/Join buttons on the right to start designing!</p>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
<form id="input_form" class="row g-2 mb-3">
|
|
<div class="font-monospace col-lg-2 col-md-3 col-4">
|
|
<div><label for="network" class="form-label mb-0 ms-1">Network Address</label></div>
|
|
<div><input data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
data-bs-custom-class="custom-tooltip"
|
|
data-bs-title="Error"
|
|
data-bs-trigger="manual"
|
|
name="network"
|
|
id="network"
|
|
type="text"
|
|
class="form-control"
|
|
value="10.0.0.0"
|
|
aria-label="Network Address"
|
|
pattern="^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)"
|
|
required></div>
|
|
</div>
|
|
<div class="font-monospace col-auto">
|
|
<div style="height:2rem"></div>
|
|
<div>/</div>
|
|
</div>
|
|
<div class="font-monospace col-lg-2 col-md-3 col-4">
|
|
<div><label for="netsize" class="form-label mb-0 ms-1">Network Size</label></div>
|
|
<div><input data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
data-bs-custom-class="custom-tooltip"
|
|
data-bs-title="Error"
|
|
data-bs-trigger="manual"
|
|
name="netsize"
|
|
id="netsize"
|
|
type="text"
|
|
class="form-control w-10"
|
|
value="16"
|
|
aria-label="Network Size"
|
|
pattern="^([0-9]|[12][0-9]|3[0-2])$"
|
|
required></div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-3 col-3 font-">
|
|
<div style="height:1.5rem"></div>
|
|
<div>
|
|
<button id="btn_go" class="btn btn-success mb-0 mt-auto" type="button">Go</button>
|
|
<div class="dropdown d-inline">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Tools
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item active" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_standard" aria-current="true">Mode - Standard</a></li>
|
|
<li><a class="dropdown-item" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_aws">Mode - AWS</a></li>
|
|
<li><a class="dropdown-item" href="#" data-bs-toggle="operatingMode" data-bs-target="#operatingMode" id="dropdown_azure">Mode - Azure</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importExportModal" id="btn_import_export">Import / Export</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
|
|
<table id="calc" class="table table-bordered font-monospace" aria-label="Subnet Table">
|
|
<thead>
|
|
<tr>
|
|
<th aria-label="Subnet Address" id="subnetHeader" style="display: table-cell;">Subnet Address</th>
|
|
<th aria-label="Range of Addresses" id="rangeHeader" style="display: table-cell;">Range of Addresses</th>
|
|
<th aria-label="Usable IPs" id="useableHeader" style="display: table-cell;">Usable IPs</th>
|
|
<th aria-label="Hosts" id="hostsHeader" style="display: table-cell;">Hosts</th>
|
|
<th aria-label="Note" id="noteHeader" colspan="100%" style="display: table-cell;">
|
|
Note
|
|
<div style="float:right;"><span id="splitHeader" aria-label="Split" class="split">Split</span>/<span id="joinHeader" aria-label="Join" class="join">Join</span></div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="calcbody">
|
|
<tr id="row_10-0-0-0_16" aria-label="10.0.0.0/16">
|
|
<td aria-labelledby="subnetHeader" class="row_address">Loading...</td>
|
|
<td aria-labelledby="rangeHeader" class="row_range"></td>
|
|
<td aria-labelledby="useableHeader" class="row_usable"></td>
|
|
<td aria-labelledby="hostsHeader" class="row_hosts"></td>
|
|
<td class="note"><label><input aria-labelledby="noteHeader" type="text" class="form-control shadow-none p-0"></label></td>
|
|
<td aria-labelledby="splitHeader" rowspan="1" colspan="13" class="split rotate"><span></span></td>
|
|
<td aria-labelledby="joinHeader" rowspan="14" colspan="1" class="join rotate"><span></span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div id="bottom_nav">
|
|
<div class="d-inline-block align-top pt-1" id="colors_word_open" aria-label="Change Colors"><span>Change Colors »</span></div>
|
|
<div class="d-inline-block d-none" id="color_palette" aria-label="Color Palette">
|
|
<div role="button" aria-label="Color 1" id="palette_picker_1"></div>
|
|
<div role="button" aria-label="Color 2" id="palette_picker_2"></div>
|
|
<div role="button" aria-label="Color 3" id="palette_picker_3"></div>
|
|
<div role="button" aria-label="Color 4" id="palette_picker_4"></div>
|
|
<div role="button" aria-label="Color 5" id="palette_picker_5"></div>
|
|
<div role="button" aria-label="Color 6" id="palette_picker_6"></div>
|
|
<div role="button" aria-label="Color 7" id="palette_picker_7"></div>
|
|
<div role="button" aria-label="Color 8" id="palette_picker_8"></div>
|
|
<div role="button" aria-label="Color 9" id="palette_picker_9"></div>
|
|
<div role="button" aria-label="Color 10" id="palette_picker_10"></div>
|
|
</div>
|
|
<div class="d-inline-block align-top align-top pt-1 ps-2 d-none" id="colors_word_close" aria-label="Stop Changing Colors"><span>« Stop Changing Colors</span></div>
|
|
<div class="d-inline-block align-top pt-1 ps-3" id="copy_url"><span>Copy Shareable URL</span></div>
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="notifyModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-md">
|
|
<div class="modal-content alert-warning" role="alertdialog" aria-labelledby="notifyModalLabel" aria-describedby="notifyModalDescription">
|
|
<div class="modal-header border-bottom-0 pb-1">
|
|
<h3 class="modal-title" id="notifyModalLabel">Warning!</h3>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body pt-1" id="notifyModalDescription">
|
|
Notification Text Here
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="importExportModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered">
|
|
<div class="modal-content" role="alertdialog" aria-labelledby="importExportModalLabel" aria-describedby="importExportModalDescription">
|
|
<div class="modal-header border-bottom-0 pb-1">
|
|
<h3 class="modal-title" id="importExportModalLabel">Import/Export</h3>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body pt-1">
|
|
<div class="alert alert-primary show mt-3" id="importExportModalDescription">
|
|
Copy the content from the box below to EXPORT the current subnet configuration. Or, overwrite/paste a previously exported configuration into the box below and click IMPORT.
|
|
</div>
|
|
<div class="form-floating font-monospace">
|
|
<textarea class="form-control pt-3" id="importExportArea" style="height: 510px" aria-label="Import/Export Content"></textarea>
|
|
<label for="importExportArea"></label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="importBtn">Import</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" id="aboutModalLabel">About Visual Subnet Calculator</h3>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Visual Subnet Calculator strives to be a tool for quickly designing networks and collaborating on that design with others. It focuses on expediting the work of network administrators, not academic subnetting math.<br />
|
|
<br/>
|
|
<h4>Design Tenets</h4>
|
|
<ul>
|
|
<li><span style="font-weight:bold">Simplicity is king.</span> Network admins are busy and Visual Subnet Calculator should always be easy for FIRST TIME USERS to quickly and intuitively use.</li>
|
|
<li><span style="font-weight:bold">Subnetting is design work.</span> Promote features that enhance visual clarity and easy mental processing of even the most complex architectures.</li>
|
|
<li><span style="font-weight:bold">Users control the data.</span> We store nothing, but provide convenient ways for users to save and share their designs.</li>
|
|
<li><span style="font-weight:bold">Embrace community contributions.</span> Consider and respond to all feedback and pull requests in the context of these tenets.</li>
|
|
</ul>
|
|
<h4 class="mt-4">Credits</h4>
|
|
Developed by <a href="https://www.caesarkabalan.com/" target="_blank">Caesar Kabalan</a> with help from <a href="https://github.com/ckabalan/visualsubnetcalc/graphs/contributors" target="_blank">GitHub Contributors</a>!<br/>
|
|
<br/>
|
|
Special thanks to <a href="https://www.davidc.net/" target="_blank">davidc</a> for the <a href="https://www.davidc.net/sites/default/subnets/subnets.html" target="_blank">original tool</a> this website is inspired by.<br/>
|
|
<br/>
|
|
Split icon made by <a href="https://www.flaticon.com/authors/freepik" target="_blank">Freepik</a> from <a href="https://www.flaticon.com/" target="_blank">Flaticon</a>.<br />
|
|
<br/>
|
|
All contributions, even suggestions or bug reports, are welcome at:<br/>
|
|
<ul>
|
|
<li>GitHub: <a href="https://github.com/ckabalan/visualsubnetcalc" target="_blank">https://github.com/ckabalan/visualsubnetcalc</a></li>
|
|
<li>LinkedIn: <a href="https://www.linkedin.com/in/caesarkabalan/" target="_blank">Caesar Kabalan</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
|
|
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.1/dist/jquery.validate.min.js"
|
|
integrity="sha256-0xVRcEF27BnewkTwGDpseENfeitZEOsQAVSlDc7PgG0="
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.1/dist/additional-methods.min.js"
|
|
integrity="sha384-Wxa7enUK34eRCZgjQIh81NeuzGHX2YaEkcLPCBIvASsdqlXBtAvVUiM7Tb56UvtC"
|
|
crossorigin="anonymous"></script>
|
|
<script src="js/lz-string.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</div>
|
|
</body>
|
|
</html>
|