Dateien hochladen nach „“
This commit is contained in:
parent
0b2e02e264
commit
4feb3f83ee
359
final.html
Normal file
359
final.html
Normal file
@ -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
Block a user