From 4feb3f83eea4c230a3cc259281341381286b77ef Mon Sep 17 00:00:00 2001
From: A4tur <artur.niko.super@gmail.com>
Date: Sat, 3 Apr 2021 20:38:25 +0000
Subject: [PATCH] =?UTF-8?q?Dateien=20hochladen=20nach=20=E2=80=9E=E2=80=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 final.html | 359 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 359 insertions(+)
 create mode 100644 final.html
diff --git a/final.html b/final.html
new file mode 100644
index 0000000..a14012c
--- /dev/null
+++ b/final.html
@@ -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>
