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 */ + } +
@@ -123,6 +155,48 @@ + +| 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 | +
Klicken Sie auf "Beispiel", um die Felder oben auszufüllen.
+