MrUnknownDE/utools
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/utools.git synced 2026-04-24 00:13:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

add adress examples

Browse Source
This commit is contained in:
MrUnknownDE
2025-03-29 16:16:07 +01:00
parent 84611f36f5
commit 06e4971f1f
1 changed files with 92 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/subnet-calculator.html
View File

@@ -45,13 +45,13 @@
button[type="submit"]:hover { button[type="submit"]:hover {
background-color: #7c3aed; /* purple-600 */ background-color: #7c3aed; /* purple-600 */
} }
#results { #results, #examples {
margin-top: 2rem; margin-top: 2rem;
padding: 1.5rem; padding: 1.5rem;
background-color: #374151; /* gray-700 */ background-color: #374151; /* gray-700 */
border-radius: 0.5rem; /* rounded-lg */ border-radius: 0.5rem; /* rounded-lg */
} }
#results h3 { #results h3, #examples h3 {
font-size: 1.25rem; /* text-xl */ font-size: 1.25rem; /* text-xl */
font-weight: 600; font-weight: 600;
color: #c4b5fd; /* purple-300 */ color: #c4b5fd; /* purple-300 */
@@ -72,6 +72,38 @@
font-family: monospace; font-family: monospace;
color: #a78bfa; /* purple-400 */ 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> </style>
</head> </head>
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8"> <body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
@@ -123,6 +155,48 @@
</div> </div>
</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> </div>
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500"> <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 --> <!-- Nur das Skript für den Rechner laden -->
<script src="subnet-calculator.js"></script> <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> </body>
</html> </html>