This repository has been archived by the owner on Sep 2, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
133 lines (118 loc) · 4.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<html>
<head>
<meta charset="utf-8" />
<title>IPv4 Subnet Calculator</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="javascript:">IPv4 Subnet Calculator</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<span id="forkongithub"><a href="https://github.com/gdonald/ipv4-sn" target="_blank">Fork me on GitHub!</a></span>
<div class="container-fluid main">
<div class="container-fluid">
<form>
<div class="row">
<div class="form-group col-6">
<label for="addr">IP Address</label>
<input type="text" class="form-control" id="addr" aria-describedby="addrHelp" value="172.16.0.0" />
<p class="text-danger" id="addrError" style="display:none">invalid</p>
</div>
<div class="form-group col-6">
<label for="addrBin"> </label>
<p id="addrBin" aria-describedby="addrBinHelp" class="ip-read-only"></p>
</div>
</div>
<div class="row">
<div class="form-group col-4">
<label for="mask">Subnet Mask</label>
<input type="text" class="form-control" id="mask" aria-describedby="maskHelp" value="255.240.0.0" />
<p class="text-danger" id="maskError" style="display:none">invalid</p>
</div>
<div class="form-group col-2">
<label for="cidr">CIDR</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">/</span>
</div>
<input type="text" class="form-control" id="cidr" aria-describedby="cidrHelp" value="12" readonly="readonly" />
<div class="input-group-append">
<button id="cidrSub" class="btn btn-danger" type="button">－</button>
<button id="cidrAdd" class="btn btn-primary" type="button">＋</button>
</div>
</div>
</div>
<div class="form-group col-6">
<label for="maskBin"> </label>
<p id="maskBin" aria-describedby="maskHelp" class="ip-read-only"></p>
</div>
</div>
<div class="row">
<div class="form-group col-2">
<label for="cidr">Subnet Bits</label>
<div class="input-group">
<input type="text" class="form-control" id="subnetBits" aria-describedby="subnetBitsHelp" value="12" readonly="readonly" />
<div class="input-group-append">
<button id="subnetBitsSub" class="btn btn-danger" type="button">－</button>
<button id="subnetBitsAdd" class="btn btn-primary" type="button">＋</button>
</div>
</div>
</div>
<div class="form-group col-2">
<label for="cidr">Host Bits</label>
<div class="input-group">
<input type="text" class="form-control" id="hostBits" aria-describedby="hostBitsHelp" value="8" readonly="readonly" />
<div class="input-group-append">
<button id="hostBitsSub" class="btn btn-danger" type="button">－</button>
<button id="hostBitsAdd" class="btn btn-primary" type="button">＋</button>
</div>
</div>
</div>
<div class="form-group col-2">
</div>
<div class="form-group col-6">
<label for="subnetBin"> </label>
<p id="subnetBin" aria-describedby="subnetBinHelp" class="ip-read-only"></p>
</div>
</div>
</form>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-6 page-nav">
<button id="pagePrev" class="btn btn-sm btn-primary" type="button">Prev</button>
<button id="pageNext" class="btn btn-sm btn-danger" type="button">Next</button>
</div>
<div class="col-6 text-right">
<p class="totals">Total Subnets: <span id="totalSubnets">0</span> Available IPs Per Subnet: <span id="totalHosts">0</span></p>
</div>
</div>
<div class="table-responsive-md">
<table class="table table-bordered table-striped table-sm">
<thead>
<tr class="text-center">
<th scope="col">#</th>
<th scope="col">Network</th>
<th scope="col">First IP</th>
<th scope="col">Last IP</th>
<th scope="col">Broadcast</th>
<th scope="col">Subnet Mask</th>
<th scope="col">Wildcard Mask</th>
</tr>
</thead>
<tbody id="subnets"></tbody>
</table>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>