You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
360 lines
16 KiB
HTML
360 lines
16 KiB
HTML
4 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
body{
|
||
|
|
background-color: #ddd;
|
||
|
|
}
|
||
|
|
*{
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
font-family: "Bahnschrift Light";
|
||
|
|
}
|
||
|
|
input{
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
.input-field{
|
||
|
|
height: 97vh;
|
||
|
|
width: 25vw;
|
||
|
|
padding: 3vh 0vw 0vh 3vw;
|
||
|
|
position: absolute;
|
||
|
|
right: 0vw;
|
||
|
|
}
|
||
|
|
.output_field{
|
||
|
|
height: 90vh;
|
||
|
|
width: 50vw;
|
||
|
|
background-color: #eee;
|
||
|
|
padding: 10vh 0vw 0vh 3vw;
|
||
|
|
position: absolute;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
left: 47vw;
|
||
|
|
top: 50vh;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.output{
|
||
|
|
margin-left: 1.5vw;
|
||
|
|
width: 80%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.val, .category{
|
||
|
|
height: 1.2vw;
|
||
|
|
padding: .8vh 0vw;
|
||
|
|
margin: 1vh 0vw; /* Paragraphs use only the half of the margin, cause of the overlap of margin-top && margin-bottom. */
|
||
|
|
}
|
||
|
|
.category:nth-child(1), .category:nth-child(2){
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.val{
|
||
|
|
padding-left: 2%;
|
||
|
|
border: none;
|
||
|
|
border-radius: .6em;
|
||
|
|
background-color: rgba(20, 20, 20, 0.1);
|
||
|
|
margin: 0.5vh 0vw;
|
||
|
|
}
|
||
|
|
.inp{
|
||
|
|
padding: .2em;
|
||
|
|
width: 3em;
|
||
|
|
border-image: linear-gradient(30deg, rgba(20, 20, 20, 1) 1%, rgba(20, 20, 20, 0.2) 60%);
|
||
|
|
border-image-slice: 1;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.input_block{
|
||
|
|
height: 3.5em;
|
||
|
|
margin-right: 1em;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
float: right;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.inp_category{
|
||
|
|
float: left;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
input[type=submit]{
|
||
|
|
margin-top: 2vh;
|
||
|
|
margin-left: .3vw;
|
||
|
|
outline: none;
|
||
|
|
padding: .5em;
|
||
|
|
cursor: pointer;
|
||
|
|
border-image: linear-gradient(30deg, rgba(90, 90, 90, 1) 1%, rgba(20, 20, 20, 0.2) 60%);
|
||
|
|
border-image-slice: 1;
|
||
|
|
background-color: rgba(20, 20, 20, 0.1);
|
||
|
|
transition: .4s ease-out;
|
||
|
|
-o-transition: .4s ease-out;
|
||
|
|
-mo-transition: .4s ease-out;
|
||
|
|
-moz-transition: .4s ease-out;
|
||
|
|
-webkit-transition: .4s ease-out;
|
||
|
|
}
|
||
|
|
input[type=submit]:hover{
|
||
|
|
background-color: rgba(0, 0, 0, 0.0);
|
||
|
|
}
|
||
|
|
img{
|
||
|
|
float: left;
|
||
|
|
width: 2em;
|
||
|
|
margin-right: 1em;
|
||
|
|
filter: grayscale(0.3);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<main>
|
||
|
|
<div class="output_field">
|
||
|
|
<div class="categories">
|
||
|
|
<p class="category">Actual IP:</p>
|
||
|
|
<p class="category">Subnet:</p>
|
||
|
|
<p class="category">Network size:</p>
|
||
|
|
<p class="category">Network IP:</p>
|
||
|
|
<p class="category">Broadcast:</p>
|
||
|
|
<p class="category">Host-IP from:</p>
|
||
|
|
<p class="category">Host-IP to:</p>
|
||
|
|
</div>
|
||
|
|
<div class="output">
|
||
|
|
<input type="text" disabled class="val" id="ipOut">
|
||
|
|
<input type="text" disabled class="val" id="snmOut">
|
||
|
|
<input type="text" disabled class="val" id="nwSize">
|
||
|
|
<input type="text" disabled class="val" id="ntwOut">
|
||
|
|
<input type="text" disabled class="val" id="firstOut">
|
||
|
|
<input type="text" disabled class="val" id="lastOut">
|
||
|
|
<input type="text" disabled class="val" id="brdOut">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input-field">
|
||
|
|
<h2>IP-Calculator</h2>
|
||
|
|
<span class="inp_category">
|
||
|
|
<p style="display: flex; align-items: center;"><img src="icon/info.svg"> Actual IP:</p><br>
|
||
|
|
<p style="display: flex; align-items: center;"><img src="icon/info.svg"> Subnet musc:</p>
|
||
|
|
</span>
|
||
|
|
<span class="input_block">
|
||
|
|
<div>
|
||
|
|
<input class="inp" type="num" id="ip1" maxlength="3" value="40">.
|
||
|
|
<input class="inp" type="num" id="ip2" maxlength="3" value="1">.
|
||
|
|
<input class="inp" type="num" id="ip3" maxlength="3" value="1">.
|
||
|
|
<input class="inp" type="num" id="ip4" maxlength="3" value="90">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<input class="inp" type="num" id="snm1" maxlength="3" value="255">.
|
||
|
|
<input class="inp" type="num" id="snm2" maxlength="3" value="255">.
|
||
|
|
<input class="inp" type="num" id="snm3" maxlength="3" value="255">.
|
||
|
|
<input class="inp" type="num" id="snm4" maxlength="3" value="255">
|
||
|
|
</div>
|
||
|
|
</span>
|
||
|
|
<input type="submit" id="trigger" value="calculate">
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<script type="text/javascript">
|
||
|
|
const trigger = document.getElementById("trigger")
|
||
|
|
class IPCalc{
|
||
|
|
constructor(ip, subnet){
|
||
|
|
this.ip = ip
|
||
|
|
this.subnet = subnet
|
||
|
|
}
|
||
|
|
calculateSubnet(){
|
||
|
|
|
||
|
|
let subnetPartBinaryArr = []
|
||
|
|
let subnetBinaryArr = []
|
||
|
|
|
||
|
|
let filteredSubnet = ""
|
||
|
|
|
||
|
|
let filter = false
|
||
|
|
|
||
|
|
for(let i = 0; i < this.subnet.length; i++){
|
||
|
|
if(!this.subnet[i]){
|
||
|
|
this.subnet[i] = "0"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for(let i = 0; i < this.subnet.length; i++){
|
||
|
|
this.subnet[i] = parseInt(this.subnet[i]).toString(2)
|
||
|
|
|
||
|
|
for(let j = 0; j < this.subnet[i].length; j++){
|
||
|
|
subnetPartBinaryArr.push(this.subnet[i].charAt(j))
|
||
|
|
}
|
||
|
|
if(subnetPartBinaryArr.length < 8){
|
||
|
|
for(let j = subnetPartBinaryArr.length; j < 8; j++){
|
||
|
|
subnetPartBinaryArr.unshift("0")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if(subnetPartBinaryArr.length > 8){
|
||
|
|
subnetPartBinaryArr = ["1", "1", "1", "1", "1", "1", "1", "1"]
|
||
|
|
}
|
||
|
|
if(i == 0){
|
||
|
|
subnetPartBinaryArr = ["1", "1", "1", "1", "1", "1", "1", "1"]
|
||
|
|
}
|
||
|
|
subnetBinaryArr.push(subnetPartBinaryArr)
|
||
|
|
subnetPartBinaryArr = []
|
||
|
|
}
|
||
|
|
|
||
|
|
for(let i = 0; i < subnetBinaryArr.length; i++){
|
||
|
|
for(let j = 0; j < subnetBinaryArr[i].length; j++){
|
||
|
|
if(subnetBinaryArr[i][j] != "1"){
|
||
|
|
filter = true
|
||
|
|
}
|
||
|
|
if(filter == true){
|
||
|
|
subnetBinaryArr[i][j] = "0"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
filter = false
|
||
|
|
}
|
||
|
|
|
||
|
|
for(let i = 0; i < subnetBinaryArr.length; i++){
|
||
|
|
if(filter != true){
|
||
|
|
let mergedBinaryPart = subnetBinaryArr[i].join().replaceAll(",", "")
|
||
|
|
let decimalPart = parseInt(mergedBinaryPart, 2)
|
||
|
|
if(decimalPart != 255){
|
||
|
|
filter = true
|
||
|
|
}
|
||
|
|
filteredSubnet += decimalPart + "."
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
filteredSubnet += 0 + "."
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
filteredSubnet = filteredSubnet.substring(0, filteredSubnet.length - 1)
|
||
|
|
return filteredSubnet
|
||
|
|
}
|
||
|
|
|
||
|
|
calculateAvailableHosts(){
|
||
|
|
let pow = 0
|
||
|
|
let filteredSubnet = document.getElementById("snmOut").value
|
||
|
|
|
||
|
|
filteredSubnet = filteredSubnet.split(".")
|
||
|
|
for(let i = 0; i < filteredSubnet.length; i++){
|
||
|
|
let snmLast = 256 - filteredSubnet[i]
|
||
|
|
for(let j = 1; Math.pow(2, j) <= snmLast; j++){
|
||
|
|
pow++
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return Math.pow(2, pow)
|
||
|
|
}
|
||
|
|
|
||
|
|
calculateRest(){
|
||
|
|
let hosts = this.calculateAvailableHosts()
|
||
|
|
let fltIp = ""
|
||
|
|
|
||
|
|
let min = 0
|
||
|
|
let max = 0
|
||
|
|
let ntw = 0
|
||
|
|
let first = 0
|
||
|
|
let last = 0
|
||
|
|
let brd = 255
|
||
|
|
|
||
|
|
let out = []
|
||
|
|
|
||
|
|
let repeater = true
|
||
|
|
let counter = 0;
|
||
|
|
|
||
|
|
let c = 256
|
||
|
|
let b = 65536
|
||
|
|
let a = 16777216
|
||
|
|
|
||
|
|
for(let i = 0; i < this.ip.length; i++){
|
||
|
|
if(this.ip[i] > 255){
|
||
|
|
this.ip[i] = "255"
|
||
|
|
}
|
||
|
|
else if(this.ip[i] < 0){
|
||
|
|
this.ip[i] = 0
|
||
|
|
}
|
||
|
|
fltIp += this.ip[i] + "."
|
||
|
|
}
|
||
|
|
fltIp = fltIp.substring(0, fltIp.length - 1)
|
||
|
|
|
||
|
|
if(hosts <= 2){
|
||
|
|
while(repeater){
|
||
|
|
if(this.ip[3] - (counter * hosts) < hosts){
|
||
|
|
repeater = false
|
||
|
|
min = counter * hosts
|
||
|
|
max = ++counter * hosts - 1
|
||
|
|
}
|
||
|
|
counter++
|
||
|
|
}
|
||
|
|
ntw = this.ip[0] + "." + this.ip[1] + "." + this.ip[2] + "." + min
|
||
|
|
first = "-"
|
||
|
|
last = "-"
|
||
|
|
brd = this.ip[0] + "." + this.ip[1] + "." + this.ip[2] + "." + max
|
||
|
|
}
|
||
|
|
else if(2 < hosts && hosts <= c){ //C Class
|
||
|
|
while(repeater){
|
||
|
|
if(this.ip[3] - (counter * hosts) < hosts){
|
||
|
|
repeater = false
|
||
|
|
min = counter * hosts
|
||
|
|
max = ++counter * hosts - 1
|
||
|
|
}
|
||
|
|
counter++
|
||
|
|
}
|
||
|
|
ntw = this.ip[0] + "." + this.ip[1] + "." + this.ip[2] + "." + min
|
||
|
|
first = this.ip[0] + "." + this.ip[1] + "." + this.ip[2] + "." + (min + 1)
|
||
|
|
last = this.ip[0] + "." + this.ip[1] + "." + this.ip[2] + "." + (max - 1)
|
||
|
|
brd = this.ip[0] + "." + this.ip[1] + "." + this.ip[2] + "." + max
|
||
|
|
}
|
||
|
|
else if(hosts > c && hosts <= b){ //B Class
|
||
|
|
hosts = hosts / c
|
||
|
|
while(repeater){
|
||
|
|
if(this.ip[2] - (counter * hosts) < hosts){
|
||
|
|
repeater = false
|
||
|
|
min = counter * hosts
|
||
|
|
max = ++counter * hosts
|
||
|
|
}
|
||
|
|
counter++
|
||
|
|
}
|
||
|
|
ntw = this.ip[0] + "." + this.ip[1] + "." + min + "." + 0
|
||
|
|
first = this.ip[0] + "." + this.ip[1] + "." + min + "." + 1
|
||
|
|
last = this.ip[0] + "." + this.ip[1] + "." + (max - 1) + "." + 254
|
||
|
|
brd = this.ip[0] + "." + this.ip[1] + "." + (max - 1) + "." + 255
|
||
|
|
}
|
||
|
|
else if(hosts > b && hosts <= a){ //A Class
|
||
|
|
hosts = hosts / b
|
||
|
|
while(repeater){
|
||
|
|
if(this.ip[1] - (counter * hosts) < hosts){
|
||
|
|
repeater = false
|
||
|
|
min = counter * hosts
|
||
|
|
max = ++counter * hosts
|
||
|
|
}
|
||
|
|
counter++
|
||
|
|
}
|
||
|
|
ntw = this.ip[0] + "." + min + "." + 0 + "." + 0
|
||
|
|
first = this.ip[0] + "." + min + "." + 0 + "." + 1
|
||
|
|
last = this.ip[0] + "." + (max - 1)+ "." + 255 + "." + 254
|
||
|
|
brd = this.ip[0] + "." + (max - 1)+ "." + 255 + "." + 255
|
||
|
|
}
|
||
|
|
out = [fltIp, ntw, brd, first, last]
|
||
|
|
return out
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
output(){
|
||
|
|
document.getElementById("snmOut").value = this.calculateSubnet()
|
||
|
|
document.getElementById("nwSize").value = this.calculateAvailableHosts()
|
||
|
|
document.getElementById("ipOut").value = this.calculateRest()[0]
|
||
|
|
document.getElementById("ntwOut").value = this.calculateRest()[1]
|
||
|
|
document.getElementById("firstOut").value = this.calculateRest()[2]
|
||
|
|
document.getElementById("lastOut").value = this.calculateRest()[3]
|
||
|
|
document.getElementById("brdOut").value = this.calculateRest()[4]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
trigger.addEventListener("click", () => {
|
||
|
|
console.log(document.getElementById("ip2").value)
|
||
|
|
const ip = [document.getElementById("ip1").value,
|
||
|
|
document.getElementById("ip2").value,
|
||
|
|
document.getElementById("ip3").value,
|
||
|
|
document.getElementById("ip4").value]
|
||
|
|
const subnet = [document.getElementById("snm1").value,
|
||
|
|
document.getElementById("snm2").value,
|
||
|
|
document.getElementById("snm3").value,
|
||
|
|
document.getElementById("snm4").value]
|
||
|
|
|
||
|
|
const calc = new IPCalc(ip, subnet)
|
||
|
|
calc.output()
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|