1 changed files with 359 additions and 0 deletions
@ -0,0 +1,359 @@ |
|||
<!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> |
Loading…
Reference in new issue