change design on ssl_checker

backend/Dockerfile.dev

@@ -0,0 +1,72 @@
+# Stage 1: Build Dependencies
+# Use an official Node.js runtime as a parent image
+FROM node:18-alpine AS builder
+
+WORKDIR /app
+
+# Install OS dependencies needed for ping/traceroute
+# Using apk add --no-cache reduces layer size
+RUN apk add --no-cache iputils-ping traceroute
+
+# Copy package.json and package-lock.json (or yarn.lock)
+# Ensure these files include 'oui' as a dependency before building!
+COPY package*.json ./
+
+# Install app dependencies using npm ci for faster, reliable builds
+# --only=production installs only production dependencies (including 'oui')
+RUN npm ci --only=production
+# REMOVED: RUN npm i oui (should be installed by npm ci now)
+
+# Stage 2: Production Image
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Install only necessary OS dependencies again for the final image
+RUN apk add --no-cache iputils-ping traceroute
+
+# Copy dependencies from the builder stage
+COPY --from=builder /app/node_modules ./node_modules
+
+# Copy application code
+COPY . .
+
+# Copy MaxMind data (assuming it's in ./data)
+# Ensure the 'data' directory exists in your project root
+COPY ./data ./data
+
+# Create a non-root user and group
+RUN addgroup -S appgroup && adduser -S appuser -G appgroup
+# Optional: Change ownership of app files to the new user
+# RUN chown -R appuser:appgroup /app
+
+# Switch to the non-root user
+USER appuser
+
+# Make port specified in environment variable available to the world outside this container
+# Default to 3000 if not specified
+ARG PORT=3000
+ENV PORT=${PORT}
+EXPOSE ${PORT}
+
+# Define environment variable for Node environment (important for Pino, Express etc.)
+ENV NODE_ENV=production
+# Define default Log Level if not set externally
+ENV LOG_LEVEL=info
+# Define default Ping Count if not set externally
+ENV PING_COUNT=4
+# Define paths to GeoIP DBs (can be overridden by external .env or docker run -e)
+ENV GEOIP_CITY_DB=./data/GeoLite2-City.mmdb
+ENV GEOIP_ASN_DB=./data/GeoLite2-ASN.mmdb
+
+# Define build argument and environment variable for Git commit SHA
+ARG GIT_COMMIT_SHA=unknown
+ENV GIT_COMMIT_SHA=${GIT_COMMIT_SHA}
+
+# Define build argument and environment variable for Sentry DSN
+ARG SENTRY_DSN
+ENV SENTRY_DSN=${SENTRY_DSN}
+
+
+# Run the app when the container launches
+CMD ["node", "server.js"]

backend/routes/sslCheck.js

@@ -0,0 +1,219 @@
+const express = require('express');
+const { exec } = require('child_process');
+const router = express.Router();
+const os = require('os'); // Für Timeout-Signal
+
+// Funktion zum Parsen der openssl x509 -text Ausgabe
+function parseSslOutput(output) {
+    const result = {
+        issuer: null,
+        subject: null,
+        validFrom: null,
+        validTo: null,
+        validity: "Could not determine validity", // Standardwert
+        error: null,
+        details: output // Rohausgabe für Debugging/Anzeige
+    };
+
+    try {
+        // Extrahiere Issuer und Subject (robusterer Regex, der Zeilenumbrüche berücksichtigt)
+        const issuerMatch = output.match(/Issuer:([^\n]+(?:\n\s+[^\n]+)*)/);
+        if (issuerMatch) result.issuer = issuerMatch[1].replace(/\n\s+/g, ' ').trim();
+
+        const subjectMatch = output.match(/Subject:([^\n]+(?:\n\s+[^\n]+)*)/);
+        if (subjectMatch) result.subject = subjectMatch[1].replace(/\n\s+/g, ' ').trim();
+
+        // Extrahiere Gültigkeitsdaten (verschiedene Datumsformate berücksichtigen)
+        const validFromMatch = output.match(/Not Before\s*:\s*(.+)/);
+        if (validFromMatch) {
+            try {
+                result.validFrom = new Date(validFromMatch[1].trim()).toISOString();
+            } catch (dateError) {
+                console.warn("Could not parse 'Not Before' date:", validFromMatch[1].trim());
+            }
+        }
+
+        const validToMatch = output.match(/Not After\s*:\s*(.+)/);
+         if (validToMatch) {
+             try {
+                result.validTo = new Date(validToMatch[1].trim()).toISOString();
+             } catch (dateError) {
+                 console.warn("Could not parse 'Not After' date:", validToMatch[1].trim());
+             }
+        }
+
+        // Bewerte Gültigkeit basierend auf geparsten Daten
+        if (result.validFrom && result.validTo) {
+            const now = new Date();
+            const validFromDate = new Date(result.validFrom);
+            const validToDate = new Date(result.validTo);
+            if (!isNaN(validFromDate) && !isNaN(validToDate)) { // Prüfen ob Daten gültig sind
+                 if (now < validFromDate) {
+                    result.validity = "Invalid (Not Yet Valid)";
+                 } else if (now > validToDate) {
+                    result.validity = "Invalid (Expired)";
+                 } else {
+                    result.validity = "Valid";
+                 }
+            } else {
+                 result.validity = "Could not parse validity dates";
+            }
+        } else {
+             result.validity = "Could not extract validity dates";
+        }
+
+    } catch (e) {
+        console.error("Error parsing openssl output:", e);
+        result.error = "Error parsing certificate details.";
+        result.validity = "Parsing Error"; // Spezifischer Status
+    }
+
+    return result;
+}
+
+// Einfache Domain-Validierung (grundlegend)
+function isValidDomain(domain) {
+    // Erlaubt Buchstaben, Zahlen, Bindestriche und Punkte. Muss mit Buchstabe/Zahl beginnen/enden.
+    // Nicht perfekt (z.B. IDNs), aber fängt grundlegende Fehler ab.
+    const domainRegex = /^[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+    // Zusätzliche Längenprüfung
+    return domain && domain.length <= 253 && domainRegex.test(domain);
+}
+
+
+router.get('/', async (req, res) => {
+    const domain = req.query.domain;
+
+    if (!domain) {
+        return res.status(400).json({ error: 'Domain parameter is required' });
+    }
+
+    // Grundlegende Validierung der Domain
+    if (!isValidDomain(domain)) {
+         return res.status(400).json({ error: 'Invalid domain format provided' });
+    }
+
+    // Verwende Port 443 für HTTPS. Timeout nach 10 Sekunden.
+    // Leite stderr nicht mehr nach /dev/null um, um Fehler von s_client zu sehen.
+    // Verwende -brief für eine kompaktere Ausgabe, falls -text fehlschlägt
+    const command = `echo "" | openssl s_client -servername ${domain} -connect ${domain}:443 -showcerts 2>&1 | openssl x509 -noout -text`;
+    const timeoutMs = 10000; // 10 Sekunden
+
+    const child = exec(command, { timeout: timeoutMs }, (error, stdout, stderr) => {
+        // WICHTIG: stderr wird hier durch 2>&1 im Befehl in stdout umgeleitet!
+        // Daher prüfen wir stdout auf Fehlermuster und error auf Exit-Code.
+
+        const combinedOutput = stdout || ""; // stdout enthält jetzt auch stderr
+
+        if (error) {
+            console.error(`exec error for domain ${domain}:`, error);
+            let errorMessage = 'Failed to execute openssl command.';
+            let errorDetails = combinedOutput || error.message; // Bevorzuge Output, wenn vorhanden
+
+            // Versuche, spezifischere Fehler aus der Ausgabe zu erkennen
+            if (error.signal === 'SIGTERM' || (error.code === null && error.signal === os.constants.signals.SIGTERM)) { // Expliziter Timeout Check
+                 errorMessage = `Connection timed out after ${timeoutMs / 1000} seconds.`;
+                 errorDetails = `Timeout while trying to connect to ${domain}:443`;
+            } else if (combinedOutput.includes("getaddrinfo: Name or service not known") || combinedOutput.includes("nodename nor servname provided, or not known") || combinedOutput.includes("failed to get server ip address")) {
+                errorMessage = `Could not resolve domain: ${domain}`;
+            } else if (combinedOutput.includes("connect: Connection refused")) {
+                errorMessage = `Connection refused by ${domain}:443. Is the server running and accepting connections?`;
+            } else if (combinedOutput.includes("connect:errno=") || combinedOutput.includes("SSL_connect:failed")) {
+                 errorMessage = `Could not establish SSL connection to ${domain}:443.`;
+            } else if (combinedOutput.includes("unable to load certificate") || combinedOutput.includes("Expecting: TRUSTED CERTIFICATE")) {
+                 errorMessage = `Could not retrieve or parse certificate from ${domain}. Server might not be sending a valid certificate.`;
+            } else if (error.code) {
+                 errorMessage = `OpenSSL command failed with exit code ${error.code}.`;
+            }
+
+            return res.status(500).json({ error: errorMessage, details: errorDetails });
+        }
+
+        // Wenn kein Fehler aufgetreten ist, aber stdout leer ist (sollte nicht passieren wegen 2>&1, aber sicherheitshalber)
+        if (!combinedOutput.trim()) {
+             console.warn(`Empty output received for domain ${domain}, although no exec error occurred.`);
+             return res.status(500).json({ error: 'Received empty response from openssl command.' });
+        }
+
+        // Versuche, das Zertifikat zu parsen
+        const certInfo = parseSslOutput(combinedOutput); // Parse die kombinierte Ausgabe
+
+        // Wenn das Parsen fehlschlägt ODER keine relevanten Infos gefunden wurden
+        if (certInfo.error || (!certInfo.issuer && !certInfo.subject && !certInfo.validTo)) {
+             // Möglicherweise war die Ausgabe nur eine Fehlermeldung von s_client oder x509
+             console.warn(`Could not parse certificate details for ${domain}. Raw output:`, combinedOutput);
+             // Gib einen spezifischeren Fehler zurück, wenn möglich
+             let parseErrorMsg = certInfo.error || `Could not extract certificate details from the server response.`;
+             if (combinedOutput.includes("connect:errno=")) {
+                 parseErrorMsg = `Could not establish SSL connection to ${domain}:443.`;
+             } else if (combinedOutput.toLowerCase().includes("no certificate")) {
+                  parseErrorMsg = `Server at ${domain}:443 did not present a certificate.`;
+             }
+             return res.status(500).json({ error: parseErrorMsg, details: combinedOutput });
+        }
+
+
+        // Einfache Bewertung hinzufügen
+        let score = 0;
+        let evaluation = [];
+        if (certInfo.validity === "Valid") {
+            score += 5; // Basispunktzahl für Gültigkeit
+            evaluation.push("Certificate is currently valid.");
+
+             // Prüfe die verbleibende Gültigkeitsdauer
+             try {
+                const daysRemaining = Math.floor((new Date(certInfo.validTo) - new Date()) / (1000 * 60 * 60 * 24));
+                if (!isNaN(daysRemaining)) {
+                    if (daysRemaining < 14) { // Strengere Warnung
+                        score -= 3;
+                        evaluation.push(`Warning: Certificate expires in ${daysRemaining} days (less than 14 days).`);
+                    } else if (daysRemaining < 30) {
+                        score -= 1;
+                        evaluation.push(`Warning: Certificate expires in ${daysRemaining} days (less than 30 days).`);
+                    } else {
+                        score += 2; // Bonus für gute Restlaufzeit
+                        evaluation.push(`Certificate expires in ${daysRemaining} days.`);
+                    }
+                } else {
+                     evaluation.push("Could not calculate remaining days.");
+                }
+             } catch (e) {
+                 console.warn("Could not calculate remaining days:", e);
+                 evaluation.push("Could not calculate remaining days.");
+             }
+        } else {
+            // Keine Punkte für ungültige Zertifikate
+            evaluation.push(`Certificate is not valid (${certInfo.validity}).`);
+        }
+
+        // Weitere Prüfungen könnten hier hinzugefügt werden
+
+        res.json({
+            domain: domain,
+            certificate: { // Nur relevante Infos senden, nicht die ganze Roh-Ausgabe im Hauptobjekt
+                 issuer: certInfo.issuer,
+                 subject: certInfo.subject,
+                 validFrom: certInfo.validFrom,
+                 validTo: certInfo.validTo,
+                 validity: certInfo.validity,
+                 details: certInfo.details // Roh-Details bleiben für die Anzeige im Frontend
+            },
+            evaluation: {
+                score: Math.max(0, Math.min(10, score)), // Score zwischen 0 und 10 begrenzen
+                summary: evaluation.join(' ')
+            }
+         });
+    });
+
+     // Timeout-Handling (falls das interne Timeout von exec nicht greift)
+     const timer = setTimeout(() => {
+         console.warn(`Forcing termination of openssl command for ${domain} after ${timeoutMs}ms`);
+         child.kill('SIGTERM'); // Versuche, den Prozess sauber zu beenden
+     }, timeoutMs + 1000); // Gib dem internen Timeout eine kleine Gnadenfrist
+
+     child.on('exit', () => {
+         clearTimeout(timer); // Timer löschen, wenn der Prozess normal endet
+     });
+});
+
+module.exports = router;

backend/server.js

@@ -33,6 +33,7 @@ const lookupRoutes = require('./routes/lookup');
 const dnsLookupRoutes = require('./routes/dnsLookup');
 const whoisLookupRoutes = require('./routes/whoisLookup');
 const versionRoutes = require('./routes/version');
+const sslCheckRoutes = require('./routes/sslCheck'); // <-- NEUE ROUTE IMPORTIERT
 
 // --- Logger Initialisierung ---
 const logger = pino({
@@ -94,6 +95,7 @@ app.use('/api/traceroute', generalLimiter);
 app.use('/api/lookup', generalLimiter);
 app.use('/api/dns-lookup', generalLimiter);
 app.use('/api/whois-lookup', generalLimiter);
+app.use('/api/ssl-check', generalLimiter); // <-- RATE LIMITER FÜR NEUE ROUTE
 
 
 // --- API Routes ---
@@ -105,6 +107,7 @@ app.use('/api/lookup', lookupRoutes);
 app.use('/api/dns-lookup', dnsLookupRoutes);
 app.use('/api/whois-lookup', whoisLookupRoutes);
 app.use('/api/version', versionRoutes);
+app.use('/api/ssl-check', sslCheckRoutes); // <-- NEUE ROUTE REGISTRIERT
 
 
 // --- Sentry Error Handler ---

build-dev.sh

@@ -0,0 +1,3 @@
+docker compose down
+export GIT_COMMIT_SHA=$(git rev-parse --short HEAD)
+docker compose -f compose.dev.yml up -d --build

compose.dev.yml

@@ -0,0 +1,54 @@
+services:
+  # Backend Service (Node.js App)
+  backend-dev:
+    build:
+      context: ./backend # Pfad zum Verzeichnis mit dem Backend-Dockerfile
+      dockerfile: Dockerfile.dev
+      args:
+        # Übergibt den Git Commit Hash als Build-Argument.
+        # Erwartet, dass GIT_COMMIT_SHA in der Shell-Umgebung gesetzt ist (z.B. export GIT_COMMIT_SHA=$(git rev-parse --short HEAD))
+        - GIT_COMMIT_SHA=${GIT_COMMIT_SHA:-unknown}
+        # Übergibt den Sentry DSN als Build-Argument (optional, falls im Code benötigt)
+        - SENTRY_DSN="https://7ea70caba68f548fb96482a573006a7b@o447623.ingest.us.sentry.io/4509062020333568"
+    container_name: utools_backend_dev # Eindeutiger Name für den Container
+    restart: unless-stopped
+    environment:
+      # Setze Umgebungsvariablen für das Backend
+      NODE_ENV: production # Wichtig für Performance und Logging
+      PORT: 3000 # Port innerhalb des Containers
+      LOG_LEVEL: info # Oder 'warn' für weniger Logs in Produktion
+      PING_COUNT: 4
+      # Die DB-Pfade werden aus dem Backend-Dockerfile ENV genommen,
+      # könnten hier aber überschrieben werden, falls nötig.
+      # GEOIP_CITY_DB: ./data/GeoLite2-City.mmdb
+      # GEOIP_ASN_DB: ./data/GeoLite2-ASN.mmdb
+      # Sentry DSN aus der Umgebung/ .env Datei übernehmen
+      SENTRY_DSN: "https://7ea70caba68f548fb96482a573006a7b@o447623.ingest.us.sentry.io/4509062020333568" # Wichtig für die Laufzeit
+    dns:
+      - 1.1.1.1    # Cloudflare DNS
+      - 1.0.0.1    # Cloudflare DNS
+      - 8.8.8.8    # Google DNS
+      - 8.8.4.4    # Google DNS
+    networks:
+      - utools_network # Verbinde mit unserem benutzerdefinierten Netzwerk
+
+  # Frontend Service (Nginx)
+  frontend-dev:
+    build:
+      context: ./frontend # Pfad zum Verzeichnis mit dem Frontend-Dockerfile
+      dockerfile: Dockerfile.dev
+    container_name: utools_frontend_dev
+    restart: unless-stopped
+    ports:
+      # Mappe Port 8080 vom Host auf Port 80 im Container (wo Nginx lauscht)
+      # Zugriff von außen (Browser) erfolgt über localhost:8080
+      - "127.0.0.1:5874:80"
+    depends_on:
+      - backend-dev # Stellt sicher, dass Backend gestartet wird (aber nicht unbedingt bereit ist)
+    networks:
+      - utools_network # Verbinde mit unserem benutzerdefinierten Netzwerk
+
+# Definiere ein benutzerdefiniertes Netzwerk (gute Praxis)
+networks:
+  utools_network:
+    driver: bridge # Standard-Netzwerktreiber

frontend/Dockerfile.dev

@@ -0,0 +1,26 @@
+# Stage 1: Build (falls wir später einen Build-Schritt hätten, z.B. für Tailwind Purge)
+# Aktuell nicht nötig, da wir CDN/statische Dateien haben.
+
+# Stage 2: Production Environment using Nginx
+FROM nginx:1.25-alpine
+
+# Arbeitsverzeichnis im Container (optional, aber gute Praxis)
+WORKDIR /usr/share/nginx/html
+
+# Entferne die Standard Nginx Willkommensseite
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Kopiere unsere eigene Nginx Konfiguration
+COPY nginx.dev.conf /etc/nginx/conf.d/default.conf
+
+# Kopiere die Frontend-Dateien in das Verzeichnis, das Nginx ausliefert
+COPY app/ .
+# Falls du später CSS-Dateien oder Bilder hast, kopiere sie auch:
+# COPY styles.css .
+# COPY images/ ./images
+
+# Nginx lauscht standardmäßig auf Port 80
+EXPOSE 80
+
+# Der Basis-Image startet Nginx bereits. Kein CMD nötig, außer wir wollen Optionen ändern.
+# CMD ["nginx", "-g", "daemon off;"] # Standard-CMD im Basis-Image

frontend/app/index.html

@@ -92,6 +92,7 @@
                 <li><a href="subnet-calculator.html">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="ssl-check.html">SSL Check</a></li> <!-- <-- NEUER LINK -->
                 <!-- REMOVED: MAC Lookup Link -->
             </ul>
         </nav>

frontend/app/ssl-check.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SSL Certificate Check - uTools</title>
+    <!-- Tailwind CSS Play CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Font Awesome (für Icons) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Eigene Styles (ähnlich wie index.html) -->
+    <style>
+        /* Einfacher Lade-Spinner (Tailwind animiert) */
+        .loader {
+            border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
+            border-left-color: #a855f7; /* Lila */
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Navigations-Styling (aus index.html übernommen) */
+        nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
+        nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; white-space: nowrap; }
+        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; }
+        @media (min-width: 768px) { /* md breakpoint */
+             header { flex-direction: row; justify-content: space-between; }
+        }
+        header h1 { font-size: 1.5rem; /* text-2xl */ font-weight: bold; color: #e5e7eb; /* gray-200 */ }
+        /* Ergebnis-Box */
+        .result-box pre {
+            white-space: pre-wrap;
+            word-break: break-all;
+            font-family: monospace;
+            background-color: #1f2937; /* Dunkelgrau */
+            color: #d1d5db; /* Hellgrau */
+            padding: 1rem;
+            border-radius: 0.375rem; /* rounded-md */
+            max-height: 400px;
+            overflow-y: auto;
+            font-size: 0.875rem; /* text-sm */
+        }
+        /* Score Bar */
+        .score-bar { height: 20px; background-color: #4b5563; /* gray-600 */ border-radius: 0.25rem; overflow: hidden; }
+        .score-bar-inner { height: 100%; background-color: #ef4444; /* red-500 */ transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; }
+        /* Hilfsklasse zum Verstecken */
+        .hidden { display: none; }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
+
+    <header>
+        <h1><a href="index.html" class="hover:text-purple-300"><i class="fas fa-network-wired mr-2"></i>uTools Network Suite</a></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="dns-lookup.html">DNS Lookup</a></li>
+                <li><a href="whois-lookup.html">WHOIS Lookup</a></li>
+                <li><a href="ssl-check.html" class="text-purple-400 font-bold">SSL Check</a></li> <!-- Aktive Seite hervorheben -->
+            </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 text-center"><i class="fas fa-shield-alt mr-2"></i>SSL Certificate Check</h1>
+        <p class="text-center text-gray-400 mb-6">Enter a domain name to check its SSL/TLS certificate details and validity.</p>
+
+        <form id="ssl-check-form" class="mb-6">
+            <div class="flex flex-col sm:flex-row gap-2">
+                <input type="text" id="domain-input" placeholder="e.g., google.com" required
+                       class="flex-grow 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">
+                <button type="submit" id="submit-button"
+                        class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out flex items-center justify-center">
+                    <span id="button-text">Check Certificate</span>
+                    <div id="loading-spinner" class="loader ml-2 hidden"></div>
+                </button>
+            </div>
+        </form>
+
+        <!-- Ergebnisbereich -->
+        <div id="result" class="result-box bg-gray-700 p-4 rounded border border-gray-600 hidden">
+             <h2 class="text-xl font-semibold text-purple-300 mb-4">Result for <span id="result-domain" class="font-bold font-mono"></span></h2>
+
+             <!-- Fehleranzeige -->
+             <div id="error-message" class="bg-red-800 text-red-100 p-3 rounded mb-4 hidden"></div>
+
+             <!-- Auswertung (nur bei Erfolg) -->
+             <div id="evaluation" class="mb-4 hidden">
+                 <h4 class="text-lg font-semibold text-purple-300 mb-2">Evaluation</h4>
+                 <div class="score-bar mb-2">
+                     <div id="score-bar-inner" class="score-bar-inner"></div>
+                 </div>
+                 <p class="text-sm">Score: <span id="score-value" class="font-bold"></span>/10</p>
+                 <p class="text-sm font-semibold mt-1" id="evaluation-summary"></p>
+             </div>
+
+             <!-- Zertifikatsdetails (nur bei Erfolg) -->
+             <div id="certificate-details" class="hidden">
+                 <h4 class="text-lg font-semibold text-purple-300 mb-2">Certificate Details</h4>
+                 <pre id="cert-output"></pre>
+             </div>
+        </div>
+    </div>
+
+    <!-- Footer (aus index.html übernommen) -->
+    <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" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
+        <p>Version: <span id="commit-sha" class="font-mono">loading...</span></p> <!-- ID beibehalten für script.js -->
+    </footer>
+
+    <!-- Eigene JS-Logik -->
+    <script src="/app/ssl-check.js"></script>
+    <!-- Gemeinsames Skript für Version etc. (falls benötigt, sonst entfernen) -->
+    <script>
+        // Minimales Skript, um die Version zu laden (aus index.html's script.js extrahiert)
+        async function fetchVersion() {
+            try {
+                const response = await fetch('/api/version');
+                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+                const data = await response.json();
+                const commitShaSpan = document.getElementById('commit-sha');
+                if (commitShaSpan && data.commitSha) {
+                    commitShaSpan.textContent = data.commitSha.substring(0, 7); // Kurze SHA
+                } else if (commitShaSpan) {
+                     commitShaSpan.textContent = 'N/A';
+                }
+            } catch (error) {
+                console.error('Error fetching version:', error);
+                const commitShaSpan = document.getElementById('commit-sha');
+                if (commitShaSpan) commitShaSpan.textContent = 'Error';
+            }
+        }
+        document.addEventListener('DOMContentLoaded', fetchVersion);
+    </script>
+</body>
+</html>

frontend/app/ssl-check.js

@@ -0,0 +1,117 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('ssl-check-form');
+    const domainInput = document.getElementById('domain-input');
+    const resultDiv = document.getElementById('result');
+    const resultDomainSpan = document.getElementById('result-domain');
+    const evaluationDiv = document.getElementById('evaluation');
+    const scoreValueSpan = document.getElementById('score-value');
+    const scoreBarInner = document.getElementById('score-bar-inner');
+    const evaluationSummaryP = document.getElementById('evaluation-summary');
+    const certificateDetailsDiv = document.getElementById('certificate-details');
+    const certOutputPre = document.getElementById('cert-output');
+    const errorMessageDiv = document.getElementById('error-message');
+    const loadingSpinner = document.getElementById('loading-spinner'); // Geändert
+    const submitButton = document.getElementById('submit-button');
+    const buttonTextSpan = document.getElementById('button-text'); // Geändert
+
+    form.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        const domain = domainInput.value.trim();
+
+        if (!domain) {
+            showError('Please enter a domain name.');
+            return;
+        }
+
+        // Reset UI
+        hideError();
+        resultDiv.classList.add('hidden');
+        evaluationDiv.classList.add('hidden');
+        certificateDetailsDiv.classList.add('hidden');
+        loadingSpinner.classList.remove('hidden'); // Spinner anzeigen
+        submitButton.disabled = true;
+        buttonTextSpan.textContent = 'Checking...'; // Text im Button ändern
+
+
+        try {
+            // Verwende /api/ Relative Pfad, da Nginx als Proxy dient
+            const apiUrl = `/api/ssl-check?domain=${encodeURIComponent(domain)}`;
+            console.log(`Fetching: ${apiUrl}`); // Debugging
+            const response = await fetch(apiUrl);
+            const data = await response.json();
+            console.log("API Response:", data); // Debugging
+
+            resultDiv.classList.remove('hidden'); // Ergebnisbereich anzeigen
+            resultDomainSpan.textContent = domain;
+
+            if (!response.ok || data.error) {
+                // API-Fehler oder Fehler in der JSON-Antwort behandeln
+                const errorMsg = data.error || `HTTP error! Status: ${response.status}`;
+                const errorDetails = data.details ? ` Details: ${data.details}` : (data.raw_output ? ` Raw Output: ${data.raw_output}` : '');
+                 console.error("API Error:", errorMsg, errorDetails); // Debugging
+                showError(`${errorMsg}${errorDetails}`);
+                evaluationDiv.classList.add('hidden'); // Auswertung ausblenden bei Fehler
+                certificateDetailsDiv.classList.add('hidden'); // Details ausblenden bei Fehler
+            } else if (!data.certificate || !data.evaluation) {
+                 // Unerwartete, aber erfolgreiche Antwort
+                 console.error("Unexpected API response structure:", data); // Debugging
+                 showError("Received an unexpected response from the server.");
+                 evaluationDiv.classList.add('hidden');
+                 certificateDetailsDiv.classList.add('hidden');
+            }
+            else {
+                // Erfolgreiches Ergebnis anzeigen
+                evaluationDiv.classList.remove('hidden');
+                certificateDetailsDiv.classList.remove('hidden');
+
+                // Auswertung
+                scoreValueSpan.textContent = data.evaluation.score;
+                evaluationSummaryP.textContent = data.evaluation.summary;
+                updateScoreBar(data.evaluation.score);
+
+                // Zertifikatsdetails formatieren
+                let formattedDetails = `Issuer: ${data.certificate.issuer || 'N/A'}\n`;
+                formattedDetails += `Subject: ${data.certificate.subject || 'N/A'}\n`;
+                formattedDetails += `Valid From: ${data.certificate.validFrom ? new Date(data.certificate.validFrom).toLocaleString() : 'N/A'}\n`;
+                formattedDetails += `Valid To: ${data.certificate.validTo ? new Date(data.certificate.validTo).toLocaleString() : 'N/A'}\n`;
+                formattedDetails += `Validity Status: ${data.certificate.validity || 'N/A'}\n\n`;
+                formattedDetails += `--- Raw OpenSSL Output ---\n${data.certificate.details || 'N/A'}`;
+                certOutputPre.textContent = formattedDetails;
+            }
+        } catch (error) {
+            console.error('Fetch or processing error:', error); // Debugging
+            showError(`An error occurred: ${error.message}. Check the browser console for more details.`);
+            evaluationDiv.classList.add('hidden');
+            certificateDetailsDiv.classList.add('hidden');
+        } finally {
+            loadingSpinner.classList.add('hidden'); // Spinner ausblenden
+            submitButton.disabled = false;
+            buttonTextSpan.textContent = 'Check Certificate'; // Button-Text zurücksetzen
+        }
+    });
+
+    function showError(message) {
+        errorMessageDiv.textContent = message;
+        errorMessageDiv.classList.remove('hidden');
+        resultDiv.classList.remove('hidden'); // Sicherstellen, dass der Ergebnisbereich sichtbar ist, um den Fehler anzuzeigen
+    }
+
+    function hideError() {
+        errorMessageDiv.classList.add('hidden');
+        errorMessageDiv.textContent = '';
+    }
+
+    function updateScoreBar(score) {
+        const percentage = Math.max(0, Math.min(100, score * 10)); // Sicherstellen, dass der Wert zwischen 0 und 100 liegt
+        scoreBarInner.style.width = `${percentage}%`;
+
+        // Farbwechsel basierend auf dem Score
+        if (score >= 8) {
+            scoreBarInner.style.backgroundColor = '#22c55e'; // green-500
+        } else if (score >= 5) {
+            scoreBarInner.style.backgroundColor = '#facc15'; // yellow-400
+        } else {
+            scoreBarInner.style.backgroundColor = '#ef4444'; // red-500
+        }
+    }
+});

frontend/nginx.dev.conf

@@ -0,0 +1,42 @@
+server {
+    listen 80;
+    server_name localhost; # Oder deine Domain
+
+    # Root-Verzeichnis für statische Dateien
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Logging (optional, aber nützlich)
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+
+    # Statische Dateien direkt ausliefern
+    location / {
+        try_files $uri $uri/ /index.html; # Wichtig für Single-Page-Apps (auch wenn wir keine sind)
+    }
+
+    # API-Anfragen an den Backend-Service weiterleiten
+    location /api/ {
+        # Der Name 'backend' muss dem Service-Namen in docker-compose.yml entsprechen
+        proxy_pass http://backend-dev:3000; # Leitet an den Backend-Container auf Port 3000 weiter
+
+        # Wichtige Proxy-Header setzen
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # Header für Server-Sent Events (Traceroute)
+        proxy_set_header Connection '';
+        proxy_http_version 1.1;
+        proxy_buffering off; # Wichtig für Streaming
+        proxy_cache off; # Wichtig für Streaming
+        proxy_read_timeout 300s; # Längerer Timeout für potenziell lange Traceroutes
+    }
+}
+
+# Upstream-Definition (optional, aber sauberer für proxy_pass)
+# upstream backend_server {
+#    server backend:3000;
+# }
+# Dann in location /api/: proxy_pass http://backend_server;