mirror of
https://github.com/MrUnknownDE/utools.git
synced 2026-04-20 22:43:45 +02:00
feat: update style
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -8,116 +9,164 @@
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Eigene Styles (für Navigation etc., wie in index.html) -->
|
||||
<style>
|
||||
/* Einfacher Lade-Spinner (Tailwind animiert) */
|
||||
.loader {
|
||||
border: 4px solid rgba(168, 85, 247, 0.1);
|
||||
/* Lila sehr transparent */
|
||||
border-left-color: #d8b4fe;
|
||||
/* Helleres Lila */
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Glassmorphism Utilities */
|
||||
.glass-panel {
|
||||
background: rgba(17, 24, 39, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(31, 41, 55, 0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Navigations-Styling */
|
||||
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; } /* flex-wrap hinzugefügt */
|
||||
nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; white-space: nowrap; } /* nowrap hinzugefügt */
|
||||
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; flex-direction: column; align-items: center; gap: 0.5rem; } /* Flex direction geändert */
|
||||
@media (min-width: 768px) { /* md breakpoint */
|
||||
header { flex-direction: row; justify-content: space-between; }
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
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;
|
||||
nav a {
|
||||
color: #d1d5db;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: #a78bfa; /* purple-400 */
|
||||
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.5);
|
||||
|
||||
nav a:hover {
|
||||
color: #fff;
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
border-color: rgba(168, 85, 247, 0.4);
|
||||
box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
|
||||
}
|
||||
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;
|
||||
|
||||
nav a.active-link {
|
||||
background: rgba(168, 85, 247, 0.3);
|
||||
color: #fff;
|
||||
border-color: #a855f7;
|
||||
}
|
||||
button[type="submit"]:hover {
|
||||
background-color: #7c3aed; /* purple-600 */
|
||||
}
|
||||
#results, #examples {
|
||||
margin-top: 2rem;
|
||||
|
||||
header {
|
||||
background: rgba(31, 41, 55, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 1.5rem;
|
||||
background-color: #374151; /* gray-700 */
|
||||
border-radius: 0.5rem; /* rounded-lg */
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
#results h3, #examples 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 */
|
||||
}
|
||||
/* 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 */
|
||||
}
|
||||
.hidden { display: none; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
header h1 {
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #c084fc, #e879f9);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(31, 41, 55, 0.5);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #4b5563;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #6b7280;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
|
||||
|
||||
<header>
|
||||
<h1>uTools Network Suite</h1> <!-- Titel angepasst -->
|
||||
<body
|
||||
class="bg-gray-950 text-gray-100 font-sans p-4 md:p-8 min-h-screen bg-[url('https://tailwindcss.com/_next/static/media/hero-dark.939eb757.png')] bg-cover bg-center bg-fixed selection:bg-purple-500 selection:text-white">
|
||||
|
||||
<header class="glass-panel">
|
||||
<h1>uTools <span class="text-sm font-normal text-gray-400 opacity-75 tracking-wider uppercase ml-2">Network
|
||||
Suite</span></h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">IP Info & Tools</a></li>
|
||||
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
|
||||
<li><a href="subnet-calculator.html" class="active-link">Subnetz Rechner</a></li>
|
||||
<li><a href="dns-lookup.html">DNS Lookup</a></li>
|
||||
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
|
||||
<li><a href="mac-lookup.html">MAC Lookup</a></li>
|
||||
@@ -125,92 +174,133 @@
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
|
||||
<div
|
||||
class="container mx-auto max-w-5xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
|
||||
|
||||
<h2 class="text-2xl font-bold mb-6 text-purple-400 text-center">IP Subnetz Rechner</h2>
|
||||
<h2 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">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">
|
||||
<form id="subnet-form" class="mb-8 glass-card p-6 rounded-xl">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<label for="ip-address">IP Adresse:</label>
|
||||
<label for="ip-address"
|
||||
class="block text-gray-400 text-sm font-bold mb-2 uppercase tracking-wide">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">
|
||||
class="w-full px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all">
|
||||
</div>
|
||||
<div>
|
||||
<label for="cidr">CIDR / Subnetzmaske:</label>
|
||||
<label for="cidr" class="block text-gray-400 text-sm font-bold mb-2 uppercase tracking-wide">CIDR /
|
||||
Maske:</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">
|
||||
class="w-full px-4 py-3 bg-gray-900/50 border border-gray-700/50 rounded-lg text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono transition-all">
|
||||
</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">
|
||||
class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-purple-500/25 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
|
||||
Berechnen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="results" class="bg-gray-700 rounded p-6 hidden"> <!-- Ergebnisse initial verstecken -->
|
||||
<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 id="results" class="glass-card rounded-xl p-6 hidden fade-in"> <!-- Ergebnisse initial verstecken -->
|
||||
<h3
|
||||
class="text-xl font-bold text-purple-300 border-b border-purple-500/30 pb-2 mb-4 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Ergebnisse:
|
||||
</h3>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||
<span class="text-gray-400">Netzwerkadresse:</span>
|
||||
<span id="network-address" class="font-mono text-white font-semibold">-</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||
<span class="text-gray-400">Broadcast-Adresse:</span>
|
||||
<span id="broadcast-address" class="font-mono text-purple-400 font-semibold">-</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||
<span class="text-gray-400">Subnetzmaske:</span>
|
||||
<span id="subnet-mask" class="font-mono text-gray-300">-</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||
<span class="text-gray-400">Anzahl der Hosts:</span>
|
||||
<span id="host-count" class="font-mono text-green-400 font-bold">-</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border-b border-gray-700/50 pb-2">
|
||||
<span class="text-gray-400">Erste Host-Adresse:</span>
|
||||
<span id="first-host" class="font-mono text-blue-300">-</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<span class="text-gray-400">Letzte Host-Adresse:</span>
|
||||
<span id="last-host" class="font-mono text-blue-300">-</span>
|
||||
</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 und die Berechnung zu starten.</p>
|
||||
<div id="examples" class="glass-card rounded-xl p-6 mt-8">
|
||||
<h3 class="text-lg font-bold text-gray-400 uppercase tracking-wider border-b border-gray-700/50 pb-2 mb-4">
|
||||
Beispiel-Subnetze (Private Adressbereiche)</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm text-left text-gray-400">
|
||||
<thead class="text-xs uppercase bg-gray-800/50 text-gray-200">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3">Bereich</th>
|
||||
<th scope="col" class="px-6 py-3">CIDR</th>
|
||||
<th scope="col" class="px-6 py-3">Subnetzmaske</th>
|
||||
<th scope="col" class="px-6 py-3">Beschreibung</th>
|
||||
<th scope="col" class="px-6 py-3">Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-700/50">
|
||||
<tr class="hover:bg-gray-700/30 transition-colors">
|
||||
<td class="px-6 py-4 font-mono text-white">192.168.0.0 - 192.168.255.255</td>
|
||||
<td class="px-6 py-4 font-mono">/16 (Gesamt)</td>
|
||||
<td class="px-6 py-4 font-mono">255.255.0.0</td>
|
||||
<td class="px-6 py-4">Klasse C (oft als /24 genutzt)</td>
|
||||
<td class="px-6 py-4"><span
|
||||
class="example-link text-purple-400 hover:text-purple-300 cursor-pointer underline"
|
||||
data-ip="192.168.1.1" data-cidr="24">Beispiel /24</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-700/30 transition-colors">
|
||||
<td class="px-6 py-4 font-mono text-white">172.16.0.0 - 172.31.255.255</td>
|
||||
<td class="px-6 py-4 font-mono">/12 (Gesamt)</td>
|
||||
<td class="px-6 py-4 font-mono">255.240.0.0</td>
|
||||
<td class="px-6 py-4">Klasse B</td>
|
||||
<td class="px-6 py-4"><span
|
||||
class="example-link text-purple-400 hover:text-purple-300 cursor-pointer underline"
|
||||
data-ip="172.16.10.5" data-cidr="16">Beispiel /16</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-700/30 transition-colors">
|
||||
<td class="px-6 py-4 font-mono text-white">10.0.0.0 - 10.255.255.255</td>
|
||||
<td class="px-6 py-4 font-mono">/8 (Gesamt)</td>
|
||||
<td class="px-6 py-4 font-mono">255.0.0.0</td>
|
||||
<td class="px-6 py-4">Klasse A</td>
|
||||
<td class="px-6 py-4"><span
|
||||
class="example-link text-purple-400 hover:text-purple-300 cursor-pointer underline"
|
||||
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-500 italic">Klicken Sie auf "Beispiel", um die Felder oben auszufüllen und
|
||||
die Berechnung zu starten.</p>
|
||||
</div>
|
||||
|
||||
<!-- Globaler Fehlerbereich -->
|
||||
<div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
|
||||
<!-- Globaler Fehlerbereich -->
|
||||
<div id="global-error"
|
||||
class="mt-6 p-4 bg-red-900/50 border border-red-500/50 text-red-100 rounded-lg hidden backdrop-blur shadow-lg">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
|
||||
<p>© 2025 <a href="https://mrunk.de" class="text-purple-400 hover:underline">MrUnknownDE</a></p>
|
||||
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p> <!-- Footer mit Version hinzugefügt -->
|
||||
<footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
|
||||
<p>© 2025 <a href="https://mrunk.de"
|
||||
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
|
||||
<p class="mt-1">Version: <span id="commit-sha" class="font-mono text-gray-400">loading...</span></p>
|
||||
<!-- Footer mit Version hinzugefügt -->
|
||||
</footer>
|
||||
|
||||
<!-- Nur das Skript für den Rechner laden -->
|
||||
@@ -248,8 +338,8 @@
|
||||
console.error('Failed to fetch version info:', error);
|
||||
if (commitShaEl) commitShaEl.textContent = 'error';
|
||||
if (globalErrorEl) { // Zeige Fehler global an, wenn Element existiert
|
||||
globalErrorEl.textContent = `Error loading version: ${error.message}`;
|
||||
globalErrorEl.classList.remove('hidden');
|
||||
globalErrorEl.textContent = `Error loading version: ${error.message}`;
|
||||
globalErrorEl.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -257,4 +347,5 @@
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user