A4tur
/
chonky_ding_dong
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Dateien hochladen nach „“

master
A4tur 1 year ago
parent
0b2e02e264
commit
4feb3f83ee
1 changed files with 359 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 359
      final.html

359
final.html
View 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>
Write Preview
Loading…
Cancel
Save