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

<!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>