From 06e4971f1f6cbe4ffa798393f6ad477b7a62fb6f Mon Sep 17 00:00:00 2001
From: MrUnknownDE <me@johanneskr.de>
Date: Sat, 29 Mar 2025 16:16:07 +0100
Subject: [PATCH] add adress examples

---
 frontend/subnet-calculator.html | 94 ++++++++++++++++++++++++++++++++-
 1 file changed, 92 insertions(+), 2 deletions(-)
diff --git a/frontend/subnet-calculator.html b/frontend/subnet-calculator.html
index 8f0f7b6..f8e512c 100644
--- a/frontend/subnet-calculator.html
+++ b/frontend/subnet-calculator.html
@@ -45,13 +45,13 @@
         button[type="submit"]:hover {
             background-color: #7c3aed; /* purple-600 */
         }
-        #results {
+        #results, #examples {
             margin-top: 2rem;
             padding: 1.5rem;
             background-color: #374151; /* gray-700 */
             border-radius: 0.5rem; /* rounded-lg */
         }
-        #results h3 {
+        #results h3, #examples h3 {
             font-size: 1.25rem; /* text-xl */
             font-weight: 600;
             color: #c4b5fd; /* purple-300 */
@@ -72,6 +72,38 @@
             font-family: monospace;
             color: #a78bfa; /* purple-400 */
         }
+        /* Styling für Beispiel-Tabelle */
+        #examples table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 1rem;
+        }
+        #examples th, #examples td {
+            padding: 0.75rem;
+            text-align: left;
+            border-bottom: 1px solid #4b5563; /* gray-600 */
+            color: #d1d5db; /* gray-300 */
+        }
+        #examples th {
+            color: #e5e7eb; /* gray-200 */
+            font-weight: 600;
+        }
+        #examples td code {
+            font-family: monospace;
+            background-color: #4b5563; /* gray-600 */
+            padding: 0.2rem 0.4rem;
+            border-radius: 0.25rem;
+            color: #c4b5fd; /* purple-300 */
+        }
+        #examples .example-link {
+            color: #a78bfa; /* purple-400 */
+            cursor: pointer;
+            text-decoration: underline;
+        }
+        #examples .example-link:hover {
+            color: #c4b5fd; /* purple-300 */
+        }
+
     </style>
 </head>
 <body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
@@ -123,6 +155,48 @@
             </div>
         </div>
 
+        <!-- Beispiel-Subnetze -->
+        <div id="examples" class="bg-gray-700 rounded p-6 mt-8">
+             <h3 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-2 mb-4">Beispiel-Subnetze (Private Adressbereiche)</h3>
+             <div class="overflow-x-auto">
+                 <table class="min-w-full text-sm">
+                     <thead>
+                         <tr>
+                             <th>Bereich</th>
+                             <th>CIDR</th>
+                             <th>Subnetzmaske</th>
+                             <th>Beschreibung</th>
+                             <th>Aktion</th>
+                         </tr>
+                     </thead>
+                     <tbody class="divide-y divide-gray-600">
+                         <tr>
+                             <td><code>192.168.0.0 - 192.168.255.255</code></td>
+                             <td><code>/16</code> (Gesamt)</td>
+                             <td><code>255.255.0.0</code></td>
+                             <td>Klasse C (oft als /24 genutzt)</td>
+                             <td><span class="example-link" data-ip="192.168.1.1" data-cidr="24">Beispiel /24</span></td>
+                         </tr>
+                         <tr>
+                             <td><code>172.16.0.0 - 172.31.255.255</code></td>
+                             <td><code>/12</code> (Gesamt)</td>
+                             <td><code>255.240.0.0</code></td>
+                             <td>Klasse B</td>
+                             <td><span class="example-link" data-ip="172.16.10.5" data-cidr="16">Beispiel /16</span></td>
+                         </tr>
+                         <tr>
+                             <td><code>10.0.0.0 - 10.255.255.255</code></td>
+                             <td><code>/8</code> (Gesamt)</td>
+                             <td><code>255.0.0.0</code></td>
+                             <td>Klasse A</td>
+                             <td><span class="example-link" data-ip="10.0.50.100" data-cidr="8">Beispiel /8</span></td>
+                         </tr>
+                     </tbody>
+                 </table>
+             </div>
+             <p class="mt-4 text-xs text-gray-400">Klicken Sie auf "Beispiel", um die Felder oben auszufüllen.</p>
+        </div>
+
     </div>
 
     <footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
@@ -131,5 +205,21 @@
 
     <!-- Nur das Skript für den Rechner laden -->
     <script src="subnet-calculator.js"></script>
+    <script>
+        // Kleine Ergänzung, um die Beispiel-Links klickbar zu machen
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelectorAll('.example-link').forEach(link => {
+                link.addEventListener('click', (event) => {
+                    const ip = event.target.getAttribute('data-ip');
+                    const cidr = event.target.getAttribute('data-cidr');
+                    document.getElementById('ip-address').value = ip;
+                    document.getElementById('cidr').value = cidr;
+                    // Optional: Berechnung direkt auslösen
+                    // document.getElementById('subnet-form').dispatchEvent(new Event('submit'));
+                    window.scrollTo({ top: 0, behavior: 'smooth' }); // Nach oben scrollen
+                });
+            });
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file

Bereich	CIDR	Subnetzmaske	Beschreibung	Aktion
`192.168.0.0 - 192.168.255.255`	`/16` (Gesamt)	`255.255.0.0`	Klasse C (oft als /24 genutzt)	Beispiel /24
`172.16.0.0 - 172.31.255.255`	`/12` (Gesamt)	`255.240.0.0`	Klasse B	Beispiel /16
`10.0.0.0 - 10.255.255.255`	`/8` (Gesamt)	`255.0.0.0`	Klasse A	Beispiel /8