2023-05-10 05:43:44 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2023-10-03 21:15:00 +00:00
< title > Visual Subnet Calculator - Split/Join< / title >
2023-06-05 20:20:24 +00:00
< link rel = "stylesheet" href = "css/bootstrap.min.css" >
2023-05-25 05:14:20 +00:00
< link href = "css/main.css" rel = "stylesheet" >
2024-06-24 17:07:26 +00:00
< 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." >
2023-05-18 05:41:00 +00:00
< meta name = "robots" content = "index, follow" / >
2023-06-05 20:27:29 +00:00
< 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" >
2023-05-21 05:21:57 +00:00
< meta name = "msapplication-TileColor" content = "#da532c" >
< meta name = "theme-color" content = "#ffffff" >
2023-05-10 05:43:44 +00:00
< / head >
< body >
2023-05-10 07:40:12 +00:00
< div class = "container-xxl mt-3" >
< div class = "float-end" id = "navigation" >
2024-10-14 17:25:30 +00:00
< a href = "#" id = "info_icon" data-bs-toggle = "modal" data-bs-target = "#aboutModal" aria-label = "About" >
2023-05-10 07:40:12 +00:00
< 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 >
2024-10-14 17:25:30 +00:00
< / a > < a href = "https://github.com/ckabalan/visualsubnetcalc" target = "_blank" aria-label = "GitHub" >
2023-05-10 07:40:12 +00:00
< 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 >
2023-05-23 07:38:41 +00:00
< h1 > Visual Subnet Calculator< / h1 >
2023-05-19 06:08:38 +00:00
< div class = "alert alert-primary alert-dismissible show mt-3" role = "alert" >
2023-09-20 17:31:09 +00:00
< 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 >
2023-05-10 07:40:12 +00:00
< button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "Close" > < / button >
< / div >
2024-06-24 15:52:29 +00:00
< form id = "input_form" class = "row g-2 mb-3" >
2023-05-21 06:05:19 +00:00
< div class = "font-monospace col-lg-2 col-md-3 col-4" >
2023-05-19 06:08:38 +00:00
< div > < label for = "network" class = "form-label mb-0 ms-1" > Network Address< / label > < / div >
2024-06-24 21:53:48 +00:00
< 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 >
2023-05-10 07:40:12 +00:00
< / div >
2023-05-21 06:05:19 +00:00
< div class = "font-monospace col-auto" >
2023-05-10 07:40:12 +00:00
< div style = "height:2rem" > < / div >
< div > /< / div >
< / div >
2023-05-21 06:05:19 +00:00
< div class = "font-monospace col-lg-2 col-md-3 col-4" >
2023-05-19 06:08:38 +00:00
< div > < label for = "netsize" class = "form-label mb-0 ms-1" > Network Size< / label > < / div >
2024-06-24 21:53:48 +00:00
< 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 >
2023-05-10 07:40:12 +00:00
< / div >
2023-05-21 06:05:19 +00:00
< div class = "col-lg-2 col-md-3 col-3 font-" >
2023-05-10 07:40:12 +00:00
< div style = "height:1.5rem" > < / div >
< div >
2023-05-17 04:09:05 +00:00
< button id = "btn_go" class = "btn btn-success mb-0 mt-auto" type = "button" > Go< / button >
2023-05-21 06:05:19 +00:00
< 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" >
2024-06-24 17:07:26 +00:00
< 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 >
2024-06-24 15:52:29 +00:00
< li > < hr class = "dropdown-divider" > < / li >
2024-06-24 17:07:26 +00:00
< li > < a class = "dropdown-item" href = "#" data-bs-toggle = "modal" data-bs-target = "#importExportModal" id = "btn_import_export" > Import / Export< / a > < / li >
2023-05-21 06:05:19 +00:00
< / ul >
< / div >
2023-05-10 07:40:12 +00:00
< / div >
2024-06-24 17:07:26 +00:00
< / div >
2023-05-19 06:08:38 +00:00
< / form >
2023-05-10 05:43:44 +00:00
2024-06-24 15:52:29 +00:00
2024-10-14 04:58:25 +00:00
< table id = "calc" class = "table table-bordered font-monospace" aria-label = "Subnet Table" >
2023-05-10 07:40:12 +00:00
< thead >
< tr >
2024-10-14 17:25:30 +00:00
< 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;" >
2023-05-18 04:04:14 +00:00
Note
2024-10-14 04:58:25 +00:00
< 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 >
2023-05-18 04:04:14 +00:00
< / th >
2023-05-10 07:40:12 +00:00
< / tr >
< / thead >
< tbody id = "calcbody" >
2024-10-14 04:58:25 +00:00
< 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 >
2024-10-14 23:07:25 +00:00
< td class = "note" > < label > < input aria-labelledby = "noteHeader" type = "text" class = "form-control shadow-none p-0" > < / label > < / td >
2024-10-14 04:58:25 +00:00
< 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 >
2023-05-10 07:40:12 +00:00
< / tr >
< / tbody >
< / table >
2023-05-23 05:15:37 +00:00
< div id = "bottom_nav" >
2024-10-14 17:25:30 +00:00
< 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 >
2023-05-23 05:15:37 +00:00
< / div >
2024-10-14 17:25:30 +00:00
< 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 >
2023-05-25 06:35:45 +00:00
< div class = "d-inline-block align-top pt-1 ps-3" id = "copy_url" > < span > Copy Shareable URL< / span > < / div >
2024-10-15 22:41:26 +00:00
< div class = "d-inline-block align-top pt-1 ps-3" id = "whats_new" >
< a title = "Released 2024-10-15" class = "link-success" href = "https://github.com/ckabalan/visualsubnetcalc/releases/tag/v1.3.0" target = "_blank" aria-label = "What's New" > v1.3.0 (What's New?)< / a >
< / div >
2023-05-22 06:42:43 +00:00
< / div >
2023-05-19 06:08:38 +00:00
2023-05-23 05:15:37 +00:00
2024-10-14 17:25:30 +00:00
< div class = "modal fade" id = "notifyModal" tabindex = "-1" aria-hidden = "true" >
2023-05-19 06:08:38 +00:00
< div class = "modal-dialog modal-md" >
2024-10-14 17:25:30 +00:00
< div class = "modal-content alert-warning" role = "alertdialog" aria-labelledby = "notifyModalLabel" aria-describedby = "notifyModalDescription" >
2023-05-19 06:08:38 +00:00
< 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 >
2024-10-14 17:25:30 +00:00
< div class = "modal-body pt-1" id = "notifyModalDescription" >
2023-05-19 06:08:38 +00:00
Notification Text Here
< / div >
< / div >
< / div >
< / div >
2024-10-14 23:07:25 +00:00
< div class = "modal fade" id = "importExportModal" tabindex = "-1" aria-hidden = "true" >
2023-05-21 06:05:19 +00:00
< div class = "modal-dialog modal-xl modal-dialog-centered" >
2024-10-14 23:07:25 +00:00
< div class = "modal-content" role = "alertdialog" aria-labelledby = "importExportModalLabel" aria-describedby = "importExportModalDescription" >
2023-05-21 06:05:19 +00:00
< 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" >
2024-10-14 23:07:25 +00:00
< div class = "alert alert-primary show mt-3" id = "importExportModalDescription" >
2023-05-21 06:05:19 +00:00
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" >
2024-10-14 23:07:25 +00:00
< textarea class = "form-control pt-3" id = "importExportArea" style = "height: 510px" aria-label = "Import/Export Content" > < / textarea >
2023-05-21 06:05:19 +00:00
< 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 >
2023-05-19 06:08:38 +00:00
2023-05-10 07:40:12 +00:00
< 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" >
2023-05-18 05:41:00 +00:00
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 / >
2023-05-23 07:47:39 +00:00
< h4 > Design Tenets< / h4 >
2023-05-18 05:41:00 +00:00
< 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 >
2023-05-25 05:14:20 +00:00
< 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 >
2023-05-18 05:41:00 +00:00
< 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 >
2023-05-23 07:47:39 +00:00
< 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 >
2023-05-18 05:41:00 +00:00
< / ul >
< h4 class = "mt-4" > Credits< / h4 >
2023-05-18 04:15:55 +00:00
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 / >
2023-05-21 05:21:57 +00:00
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 / >
2023-05-18 04:15:55 +00:00
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 >
2023-05-10 07:40:12 +00:00
< / div >
< / div >
< / div >
< / div >
2024-06-24 15:52:29 +00:00
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
2023-05-10 07:40:12 +00:00
crossorigin="anonymous">< / script >
2023-05-17 04:09:05 +00:00
< script src = "https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous">< / script >
2024-06-24 21:53:48 +00:00
< 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"
2024-06-24 15:52:29 +00:00
crossorigin="anonymous">< / script >
2023-06-05 20:20:24 +00:00
< script src = "js/lz-string.min.js" > < / script >
< script src = "js/main.js" > < / script >
2023-05-10 05:43:44 +00:00
< / div >
< / body >
2023-06-05 20:20:24 +00:00
< / html >
