start subnetz-calculator

2026-04-14 20:03:44 +02:00 · 2025-03-29 16:14:12 +01:00
parent f36e52a2fe
commit 84611f36f5
3 changed files with 336 additions and 0 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -60,10 +60,28 @@
        #traceroute-output .error-line { color: #f87171; font-weight: bold;} /* Rot */
        #traceroute-output .end-line { color: #a78bfa; font-weight: bold; margin-top: 10px;} /* Lila */

+        /* Navigations-Styling */
+        nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; }
+        nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; }
+        nav a:hover { color: #a78bfa; /* purple-400 */ text-decoration: underline; }
+        header { background-color: #374151; /* gray-700 */ padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; /* rounded-lg */ display: flex; justify-content: space-between; align-items: center; }
+        header h1 { font-size: 1.5rem; /* text-2xl */ font-weight: bold; color: #e5e7eb; /* gray-200 */ }
+
    </style>
 </head>
 <body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">

+    <header>
+        <h1>uTools</h1>
+        <nav>
+            <ul>
+                <li><a href="index.html">IP Info</a></li>
+                <li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
+                <!-- Weitere Menüpunkte hier hinzufügen -->
+            </ul>
+        </nav>
+    </header>
+
    <div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">

        <h1 class="text-3xl font-bold mb-6 text-purple-400 glitch-text text-center">IP Information & Diagnostics</h1>
@@ -209,6 +227,7 @@

        <!-- Footer für Version -->
        <footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
+            <p>&copy; 2025 <a href="https://johanneskr.de">Johannes Krüger</a></p>
            <p>Version: <span id="commit-sha" class="font-mono">loading...</span></p>
        </footer>

@@ -221,5 +240,6 @@
            crossorigin=""></script>
    <!-- Eigene JS-Logik -->
    <script src="script.js"></script>
+    <!-- Kein subnet-calculator.js hier, da es nur auf der Subnetz-Seite benötigt wird -->
 </body>
 </html>
--- a/frontend/subnet-calculator.html
+++ b/frontend/subnet-calculator.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IP Subnetz Rechner - Netzwerk Tools</title>
+    <!-- Tailwind CSS Play CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Eigene Styles (für Navigation etc., wie in index.html) -->
+    <style>
+        /* Navigations-Styling */
+        nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; }
+        nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; }
+        nav a:hover { color: #a78bfa; /* purple-400 */ text-decoration: underline; }
+        header { background-color: #374151; /* gray-700 */ padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; /* rounded-lg */ display: flex; justify-content: space-between; align-items: center; }
+        header h1 { font-size: 1.5rem; /* text-2xl */ font-weight: bold; color: #e5e7eb; /* gray-200 */ }
+
+        /* Styling für Formular und Ergebnisse */
+        label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #d1d5db; /* gray-300 */ }
+        input[type="text"] {
+            width: 100%;
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            background-color: #4b5563; /* gray-600 */
+            border: 1px solid #6b7280; /* gray-500 */
+            border-radius: 0.375rem; /* rounded-md */
+            color: #e5e7eb; /* gray-200 */
+            font-family: monospace;
+        }
+        input[type="text"]:focus {
+            outline: none;
+            border-color: #a78bfa; /* purple-400 */
+            box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.5);
+        }
+        button[type="submit"] {
+            background-color: #8b5cf6; /* purple-500 */
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 0.375rem; /* rounded-md */
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        button[type="submit"]:hover {
+            background-color: #7c3aed; /* purple-600 */
+        }
+        #results {
+            margin-top: 2rem;
+            padding: 1.5rem;
+            background-color: #374151; /* gray-700 */
+            border-radius: 0.5rem; /* rounded-lg */
+        }
+        #results h3 {
+            font-size: 1.25rem; /* text-xl */
+            font-weight: 600;
+            color: #c4b5fd; /* purple-300 */
+            margin-bottom: 1rem;
+            border-bottom: 1px solid #6b7280; /* gray-500 */
+            padding-bottom: 0.5rem;
+        }
+        #results p {
+            margin-bottom: 0.75rem;
+            color: #d1d5db; /* gray-300 */
+        }
+        #results p strong {
+            color: #e5e7eb; /* gray-200 */
+            min-width: 150px; /* Für bessere Ausrichtung */
+            display: inline-block;
+        }
+         #results span {
+            font-family: monospace;
+            color: #a78bfa; /* purple-400 */
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
+
+    <header>
+        <h1>uTools</h1>
+        <nav>
+            <ul>
+                <li><a href="index.html">IP Info</a></li>
+                <li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
+                <!-- Weitere Menüpunkte hier hinzufügen -->
+            </ul>
+        </nav>
+    </header>
+
+    <div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
+
+        <h2 class="text-2xl font-bold mb-6 text-purple-400 text-center">IP Subnetz Rechner</h2>
+
+        <form id="subnet-form" class="mb-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div>
+                    <label for="ip-address">IP Adresse:</label>
+                    <input type="text" id="ip-address" name="ip-address" placeholder="z.B. 192.168.1.1" required
+                           class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
+                </div>
+                <div>
+                    <label for="cidr">CIDR / Subnetzmaske:</label>
+                    <input type="text" id="cidr" name="cidr" placeholder="z.B. 24 oder 255.255.255.0" required
+                           class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
+                </div>
+            </div>
+
+            <button type="submit"
+                    class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
+                Berechnen
+            </button>
+        </form>
+
+        <div id="results" class="bg-gray-700 rounded p-6">
+            <h3 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-2 mb-4">Ergebnisse:</h3>
+            <div class="space-y-2 text-sm">
+                <p><strong>Netzwerkadresse:</strong> <span id="network-address" class="font-mono text-purple-400">-</span></p>
+                <p><strong>Broadcast-Adresse:</strong> <span id="broadcast-address" class="font-mono text-purple-400">-</span></p>
+                <p><strong>Subnetzmaske:</strong> <span id="subnet-mask" class="font-mono text-purple-400">-</span></p>
+                <p><strong>Anzahl der Hosts:</strong> <span id="host-count" class="font-mono text-purple-400">-</span></p>
+                <p><strong>Erste Host-Adresse:</strong> <span id="first-host" class="font-mono text-purple-400">-</span></p>
+                <p><strong>Letzte Host-Adresse:</strong> <span id="last-host" class="font-mono text-purple-400">-</span></p>
+            </div>
+        </div>
+
+    </div>
+
+    <footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
+        <p>&copy; 2025 <a href="https://johanneskr.de">Johannes Krüger</a></p>
+    </footer>
+
+    <!-- Nur das Skript für den Rechner laden -->
+    <script src="subnet-calculator.js"></script>
+</body>
+</html>
--- a/frontend/subnet-calculator.js
+++ b/frontend/subnet-calculator.js
@@ -0,0 +1,181 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('subnet-form');
+    if (form) {
+        form.addEventListener('submit', handleSubnetCalculation);
+    }
+});
+
+function handleSubnetCalculation(event) {
+    event.preventDefault(); // Verhindert das Neuladen der Seite
+
+    const ipAddressInput = document.getElementById('ip-address').value.trim();
+    const cidrInput = document.getElementById('cidr').value.trim();
+
+    // Einfache Validierung (könnte verbessert werden)
+    if (!isValidIP(ipAddressInput)) {
+        alert("Bitte geben Sie eine gültige IP-Adresse ein.");
+        return;
+    }
+
+    let cidr;
+    let subnetMask;
+
+    if (cidrInput.includes('.')) { // Annahme: Subnetzmaske im Format xxx.xxx.xxx.xxx
+        if (!isValidIP(cidrInput)) {
+            alert("Bitte geben Sie eine gültige Subnetzmaske ein.");
+            return;
+        }
+        subnetMask = cidrInput;
+        cidr = maskToCidr(subnetMask);
+        if (cidr === null) {
+            alert("Ungültige Subnetzmaske.");
+            return;
+        }
+    } else { // Annahme: CIDR-Notation
+        cidr = parseInt(cidrInput, 10);
+        if (isNaN(cidr) || cidr < 0 || cidr > 32) {
+            alert("Bitte geben Sie einen gültigen CIDR-Wert (0-32) ein.");
+            return;
+        }
+        subnetMask = cidrToMask(cidr);
+    }
+
+    try {
+        const results = calculateSubnet(ipAddressInput, cidr);
+        displayResults(results, subnetMask);
+    } catch (error) {
+        alert("Fehler bei der Berechnung: " + error.message);
+        clearResults();
+    }
+}
+
+function isValidIP(ip) {
+    const ipPattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    return ipPattern.test(ip);
+}
+
+function ipToBinary(ip) {
+    return ip.split('.').map(octet => parseInt(octet, 10).toString(2).padStart(8, '0')).join('');
+}
+
+function binaryToIp(binary) {
+    const octets = [];
+    for (let i = 0; i < 32; i += 8) {
+        octets.push(parseInt(binary.substring(i, i + 8), 2));
+    }
+    return octets.join('.');
+}
+
+function cidrToMask(cidr) {
+    if (cidr < 0 || cidr > 32) return null;
+    const maskBinary = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
+    return binaryToIp(maskBinary);
+}
+
+function maskToCidr(mask) {
+    if (!isValidIP(mask)) return null;
+    const binaryMask = ipToBinary(mask);
+    // Zähle die führenden Einsen
+    let cidr = 0;
+    let validMask = true;
+    let encounteredZero = false;
+    for (let i = 0; i < 32; i++) {
+        if (binaryMask[i] === '1') {
+            if (encounteredZero) { // Einsen dürfen nicht nach Nullen kommen
+                validMask = false;
+                break;
+            }
+            cidr++;
+        } else {
+            encounteredZero = true;
+        }
+    }
+     // Prüfen, ob die Maske gültig ist (nur Einsen gefolgt von Nullen)
+    const calculatedMask = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
+    if (!validMask || binaryMask !== calculatedMask) {
+        return null; // Ungültige Maske
+    }
+
+    return cidr;
+}
+
+
+function calculateSubnet(ip, cidr) {
+    const ipBinary = ipToBinary(ip);
+    const maskBinary = '1'.repeat(cidr) + '0'.repeat(32 - cidr);
+
+    // Netzwerkadresse berechnen (Bitweises UND)
+    let networkBinary = '';
+    for (let i = 0; i < 32; i++) {
+        networkBinary += (parseInt(ipBinary[i], 10) & parseInt(maskBinary[i], 10)).toString();
+    }
+    const networkAddress = binaryToIp(networkBinary);
+
+    // Broadcast-Adresse berechnen (Netzwerkadresse | invertierte Maske)
+    let broadcastBinary = '';
+    for (let i = 0; i < 32; i++) {
+        broadcastBinary += (parseInt(networkBinary[i], 10) | (1 - parseInt(maskBinary[i], 10))).toString();
+    }
+    const broadcastAddress = binaryToIp(broadcastBinary);
+
+    // Anzahl der Hosts
+    const hostBits = 32 - cidr;
+    const hostCount = hostBits <= 1 ? 0 : Math.pow(2, hostBits) - 2; // -2 für Netzwerk- und Broadcast-Adresse
+
+    // Erste Host-Adresse (Netzwerkadresse + 1) - nur wenn Hosts möglich sind
+    let firstHost = '-';
+     if (hostBits > 1) {
+        let firstHostBinary = networkBinary.substring(0, 31) + '1';
+         // Sonderfall /31 Netzwerke haben keine traditionellen Host-Adressen
+         if (cidr === 31) {
+             firstHost = networkAddress; // Oder eine andere Konvention, je nach Definition
+         } else {
+            // Umwandlung in Zahl, +1, zurück in Binär (sicherer für Überlauf)
+            const networkNum = parseInt(networkBinary, 2);
+            firstHostBinary = (networkNum + 1).toString(2).padStart(32, '0');
+            firstHost = binaryToIp(firstHostBinary);
+         }
+    }
+
+
+    // Letzte Host-Adresse (Broadcast-Adresse - 1) - nur wenn Hosts möglich sind
+    let lastHost = '-';
+    if (hostBits > 1) {
+        let lastHostBinary = broadcastBinary.substring(0, 31) + '0';
+         // Sonderfall /31 Netzwerke
+         if (cidr === 31) {
+             lastHost = broadcastAddress; // Oder eine andere Konvention
+         } else {
+            // Umwandlung in Zahl, -1, zurück in Binär
+            const broadcastNum = parseInt(broadcastBinary, 2);
+            lastHostBinary = (broadcastNum - 1).toString(2).padStart(32, '0');
+            lastHost = binaryToIp(lastHostBinary);
+         }
+    }
+
+    return {
+        networkAddress,
+        broadcastAddress,
+        hostCount,
+        firstHost,
+        lastHost
+    };
+}
+
+function displayResults(results, subnetMask) {
+    document.getElementById('network-address').textContent = results.networkAddress;
+    document.getElementById('broadcast-address').textContent = results.broadcastAddress;
+    document.getElementById('host-count').textContent = results.hostCount >= 0 ? results.hostCount.toLocaleString() : '-';
+    document.getElementById('first-host').textContent = results.firstHost;
+    document.getElementById('last-host').textContent = results.lastHost;
+    document.getElementById('subnet-mask').textContent = subnetMask; // Zeige die berechnete/validierte Maske an
+}
+
+function clearResults() {
+     document.getElementById('network-address').textContent = '-';
+    document.getElementById('broadcast-address').textContent = '-';
+    document.getElementById('host-count').textContent = '-';
+    document.getElementById('first-host').textContent = '-';
+    document.getElementById('last-host').textContent = '-';
+    document.getElementById('subnet-mask').textContent = '-';
+}