Update MaxMind GeoLite2 databases (LFS) (2026-04-01)

add asn info grid
fix limit on neighbours
2026-05-30 16:10:06 +02:00 · 2026-04-01 01:26:00 +00:00 · 2026-03-05 21:04:57 +01:00 · 2026-03-05 21:00:24 +01:00 · 2026-03-05 20:52:35 +01:00 · 2026-03-05 20:52:15 +01:00
34 changed files with 4248 additions and 1336 deletions
@@ -0,0 +1 @@
+backend/data/*.mmdb filter=lfs diff=lfs merge=lfs -text
@@ -1,97 +1,89 @@
-name: Build and Push Docker Images
+name: Docker Build and Push (Docker Hub, Multi-Arch)

-# Trigger: Wann soll der Workflow laufen?
 on:
-  workflow_dispatch: # Ermöglicht manuelles Starten über die GitHub UI
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      extra_tag:
+        description: "Optionaler Zusatz-Tag (z.B. v1.2.3). Kommt zusätzlich zu :latest und :<sha>."
+        required: false
+        default: ""

 jobs:
  build-and-push:
-    runs-on: ubuntu-latest # Verwendet den neuesten Ubuntu-Runner von GitHub
-
-    # Berechtigungen für den GITHUB_TOKEN, um nach GHCR pushen zu können
+    runs-on: ubuntu-latest
+    env:
+      REGISTRY: docker.io
+      DOCKERHUB_USER_LC: ${{ secrets.DOCKERHUB_USERNAME }}
    permissions:
-      contents: read      # Zum Auschecken des Codes
-      packages: write     # Zum Pushen nach GitHub Packages (GHCR)
+      contents: read

    steps:
-      # 1. Code auschecken
-      - name: Checkout repository
+      - name: Checkout
        uses: actions/checkout@v4
-
-      # 2. Docker Metadaten extrahieren (Tags, Labels)
-      #    Wir definieren hier die Namen für beide Images
-      - name: Extract Docker metadata
-        id: meta
-        uses: docker/metadata-action@v5
        with:
-          images: |
-            ghcr.io/${{ github.repository_owner }}/utools-backend
-            ghcr.io/${{ github.repository_owner }}/utools-frontend
-          # Tags generieren:
-          # - Typ 'sha' -> Kurzer Commit-Hash (z.B. sha-a1b2c3d)
-          # - Typ 'ref' für Events 'branch' -> Branch-Name (z.B. 'main' wird zu 'latest')
-          # - Typ 'ref' für Events 'tag' -> Git-Tag-Name (z.B. v1.0.0)
-          tags: |
-            type=sha,prefix=sha-
-            type=ref,event=branch
-            type=ref,event=tag
-            type=ref,event=pr # Nur für PR-Events
+          fetch-depth: 0
+          lfs: true # WICHTIG: Lädt die echten LFS-Dateien (MaxMind DBs) herunter
+
+      - name: Get short SHA
+        id: vars
+        run: echo "sha=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: docker.io
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}

-      # 3. QEMU für Multi-Plattform Builds (optional, aber gute Praxis)
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v3

-      # 4. Docker Buildx einrichten (verbesserter Builder)
-      - name: Set up Docker Buildx
+      - name: Set up Buildx
        uses: docker/setup-buildx-action@v3

-      # 5. Login bei GitHub Container Registry (GHCR)
-      #    Verwendet den automatisch generierten GITHUB_TOKEN
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
+      # -------- BACKEND --------
+      - name: Build & Push backend (multi-arch)
+        uses: docker/build-push-action@v6
        with:
-          registry: ghcr.io
-          username: ${{ github.actor }} # Benutzer oder Organisation, dem das Repo gehört
-          password: ${{ secrets.GHCR_PUSH_TOKEN }}
+          context: ./backend
+          file: ./backend/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.DOCKERHUB_USER_LC }}/utools-backend:latest
+            ${{ env.REGISTRY }}/${{ env.DOCKERHUB_USER_LC }}/utools-backend:${{ steps.vars.outputs.sha }}
+          build-args: |
+            GIT_COMMIT_SHA=${{ steps.vars.outputs.sha }}
+            SENTRY_DSN=${{ secrets.SENTRY_DSN }}

-      # 6. Backend Image bauen und pushen
-      - name: Build and push Backend image
-        id: build-backend
-        uses: docker/build-push-action@v5
-        with:
-          context: ./backend # Pfad zum Backend-Dockerfile
-          # Nur pushen, wenn es ein Push zum main-Branch oder ein Git-Tag ist
-          push: ${{ github.event_name == 'push' || github.event_name == 'create' && startsWith(github.ref, 'refs/tags/') }}
-          # Tags und Labels aus dem Metadaten-Schritt verwenden (gefiltert für Backend)
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          # Filter für das spezifische Backend-Image (Index 0 in der 'images'-Liste oben)
-          # Wichtig: Passe den Index an, falls du die Reihenfolge änderst!
-          image-name-index: 0 # Index des Backend-Images in der 'images'-Liste
-          cache-from: type=gha # GitHub Actions Cache verwenden (Lesen)
-          cache-to: type=gha,mode=max # GitHub Actions Cache verwenden (Schreiben)
-
-      # 7. Frontend Image bauen und pushen
-      - name: Build and push Frontend image
-        id: build-frontend
-        uses: docker/build-push-action@v5
-        with:
-          context: ./frontend # Pfad zum Frontend-Dockerfile
-          # Nur pushen, wenn es ein Push zum main-Branch oder ein Git-Tag ist
-          push: ${{ github.event_name == 'push' || github.event_name == 'create' && startsWith(github.ref, 'refs/tags/') }}
-          # Tags und Labels aus dem Metadaten-Schritt verwenden (gefiltert für Frontend)
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          # Filter für das spezifische Frontend-Image (Index 1 in der 'images'-Liste oben)
-          image-name-index: 1 # Index des Frontend-Images in der 'images'-Liste
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-      # 8. (Optional) Output der Image-Namen und Tags
-      - name: Print image names and tags
-        if: always() # Auch ausführen, wenn vorherige Schritte fehlschlagen (zum Debuggen)
+      - name: Tag backend with extra_tag (manifest retag)
+        if: ${{ github.event.inputs.extra_tag && github.event.inputs.extra_tag != '' }}
        run: |
-          echo "Backend Image Tags: ${{ steps.meta.outputs.tags }}"
-          echo "Frontend Image Tags: ${{ steps.meta.outputs.tags }}"
-          echo "Backend Image Digest: ${{ steps.build-backend.outputs.digest }}"
-          echo "Frontend Image Digest: ${{ steps.build-frontend.outputs.digest }}"
+          docker buildx imagetools create \
+            -t ${{ env.REGISTRY }}/${{ env.DOCKERHUB_USER_LC }}/utools-backend:${{ github.event.inputs.extra_tag }} \
+            ${{ env.REGISTRY }}/${{ env.DOCKERHUB_USER_LC }}/utools-backend:${{ steps.vars.outputs.sha }}
+
+      # -------- FRONTEND --------
+      - name: Build & Push frontend (multi-arch)
+        uses: docker/build-push-action@v6
+        with:
+          context: ./frontend
+          file: ./frontend/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.DOCKERHUB_USER_LC }}/utools-frontend:latest
+            ${{ env.REGISTRY }}/${{ env.DOCKERHUB_USER_LC }}/utools-frontend:${{ steps.vars.outputs.sha }}
+          build-args: |
+            GIT_COMMIT_SHA=${{ steps.vars.outputs.sha }}
+            SENTRY_DSN=${{ secrets.SENTRY_DSN }}
+
+      - name: Tag frontend with extra_tag (manifest retag)
+        if: ${{ github.event.inputs.extra_tag && github.event.inputs.extra_tag != '' }}
+        run: |
+          docker buildx imagetools create \
+            -t ${{ env.REGISTRY }}/${{ env.DOCKERHUB_USER_LC }}/utools-frontend:${{ github.event.inputs.extra_tag }} \
+            ${{ env.REGISTRY }}/${{ env.DOCKERHUB_USER_LC }}/utools-frontend:${{ steps.vars.outputs.sha }}
@@ -3,8 +3,7 @@ name: Update MaxMind GeoLite2 DBs
 on:
  workflow_dispatch: # Ermöglicht manuelles Starten
  schedule:
-    # Läuft jeden Dienstag um 05:00 UTC (anpassbar)
-    - cron: '0 5 * * 2'
+    - cron: '0 0 1 * *'

 jobs:
  update-db:
@@ -16,11 +15,13 @@ jobs:
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
+        with:
+          lfs: true # Wichtig: LFS-Dateien beim Checkout herunterladen

      - name: Download geoipupdate tool
        run: |
          # Lade eine spezifische Version oder die neueste herunter
-          GEOIPUPDATE_VERSION="4.11.1" # Beispielversion, prüfe auf neuere Releases
+          GEOIPUPDATE_VERSION="4.11.1"
          wget "https://github.com/maxmind/geoipupdate/releases/download/v${GEOIPUPDATE_VERSION}/geoipupdate_${GEOIPUPDATE_VERSION}_linux_amd64.tar.gz"
          tar -zxvf "geoipupdate_${GEOIPUPDATE_VERSION}_linux_amd64.tar.gz"
          # Verschiebe das Binary in einen bekannten Pfad und mache es ausführbar
@@ -31,12 +32,10 @@ jobs:

      - name: Create GeoIP.conf
        # Erstellt die Konfigurationsdatei für geoipupdate mit den Secrets
-        # Wichtig: Secrets nicht direkt im Log ausgeben!
        run: |
          echo "Creating GeoIP.conf..."
          cat << EOF > GeoIP.conf
          # GeoIP.conf file for geoipupdate
-          # Replace with your actual AccountID and LicenseKey from GitHub Secrets
          AccountID ${{ secrets.MAXMIND_ACCOUNT_ID }}
          LicenseKey ${{ secrets.MAXMIND_LICENSE_KEY }}

@@ -44,7 +43,6 @@ jobs:
          EditionIDs GeoLite2-ASN GeoLite2-City
          EOF
          echo "GeoIP.conf created."
-        # Umgebungsvariablen für Sicherheit (werden nicht geloggt)
        env:
          MAXMIND_ACCOUNT_ID: ${{ secrets.MAXMIND_ACCOUNT_ID }}
          MAXMIND_LICENSE_KEY: ${{ secrets.MAXMIND_LICENSE_KEY }}
@@ -52,42 +50,37 @@ jobs:
      - name: Run geoipupdate
        run: |
          echo "Running geoipupdate..."
-          # -f gibt die Konfigurationsdatei an
-          # -d gibt das Zielverzeichnis an (relativ zum Repo-Root)
-          # -v für ausführliche Ausgabe (hilft beim Debuggen)
+          # Lädt die Datenbanken nach ./backend/data herunter
          geoipupdate -f GeoIP.conf -d ./backend/data -v
          echo "geoipupdate finished."

-      - name: Check for changes
-        id: check_changes
+      - name: Configure Git and LFS
        run: |
-          # Prüfe, ob sich die .mmdb Dateien geändert haben
-          if git status --porcelain | grep -q 'backend/data/.*\.mmdb'; then
-            echo "Changes detected in MaxMind databases."
-            echo "changed=true" >> $GITHUB_OUTPUT
-          else
-            echo "No changes detected in MaxMind databases."
-            echo "changed=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Commit and push changes
-        # Nur ausführen, wenn Schritt 'check_changes' Änderungen gemeldet hat
-        if: steps.check_changes.outputs.changed == 'true'
-        run: |
-          echo "Committing and pushing changes..."
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          # Installiere Git LFS Hooks für diesen Run
+          git lfs install
+
+      - name: Track and Commit changes (LFS)
+        run: |
+          # Sage Git, dass .mmdb Dateien mit LFS verwaltet werden sollen
+          git lfs track "backend/data/*.mmdb"
+          
+          # Füge .gitattributes (hier steht die LFS-Konfiguration drin) hinzu
+          git add .gitattributes
+          
+          # Füge die eigentlichen Datenbank-Dateien hinzu
          git add ./backend/data/*.mmdb
-          # Erstelle Commit-Nachricht mit Datum
-          COMMIT_DATE=$(date -u +"%Y-%m-%d")
-          git commit -m "Update MaxMind GeoLite2 databases (${COMMIT_DATE})"
-          # Pushe zum aktuellen Branch (z.B. main)
-          git push
-          echo "Changes pushed."
-        # Umgebungsvariable für den Token (wird automatisch von GitHub bereitgestellt)
+
+          # Prüfe, ob Änderungen zum Committen vorliegen (staged changes)
+          if git diff --staged --quiet; then
+            echo "No changes detected in MaxMind databases."
+          else
+            echo "Changes detected. Committing..."
+            COMMIT_DATE=$(date -u +"%Y-%m-%d")
+            git commit -m "Update MaxMind GeoLite2 databases (LFS) (${COMMIT_DATE})"
+            git push
+            echo "Changes pushed via LFS."
+          fi
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: No changes to commit
-        if: steps.check_changes.outputs.changed == 'false'
-        run: echo "Skipping commit as no database files were updated."
@@ -0,0 +1,69 @@
+# Code of Conduct - uTools
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behaviour that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologising to those affected by our mistakes,
+and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+overall community
+
+Examples of unacceptable behaviour include:
+
+* The use of sexualised language or imagery, and sexual attention or advances
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying and enforcing our standards of
+acceptable behaviour and will take appropriate and fair corrective action in
+response to any instances of unacceptable behaviour.
+
+Project maintainers have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, or to ban
+temporarily or permanently any contributor for other behaviours that they deem
+inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behaviour may be
+reported to the community leaders responsible for enforcement at .
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org/), version
+[1.4](https://www.contributor-covenant.org/version/1/4/code-of-conduct/code_of_conduct.md) and
+[2.0](https://www.contributor-covenant.org/version/2/0/code_of_conduct/code_of_conduct.md),
+and was generated by [contributing.md](https://contributing.md/generator).
@@ -0,0 +1,159 @@
+<!-- omit in toc -->
+# Contributing to uTools
+
+First off, thanks for taking the time to contribute! ❤️
+
+All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
+
+> And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
+> - Star the project
+> - Tweet about it
+> - Refer this project in your project's readme
+> - Mention the project at local meetups and tell your friends/colleagues
+
+<!-- omit in toc -->
+## Table of Contents
+
+- [Code of Conduct](#code-of-conduct)
+- [I Have a Question](#i-have-a-question)
+- [I Want To Contribute](#i-want-to-contribute)
+- [Reporting Bugs](#reporting-bugs)
+- [Suggesting Enhancements](#suggesting-enhancements)
+- [Your First Code Contribution](#your-first-code-contribution)
+- [Improving The Documentation](#improving-the-documentation)
+- [Styleguides](#styleguides)
+- [Commit Messages](#commit-messages)
+- [Join The Project Team](#join-the-project-team)
+
+
+## Code of Conduct
+
+This project and everyone participating in it is governed by the
+[uTools Code of Conduct](https://github.com/MrUnknownDE/utools/blob/main/CODE_OF_CONDUCT.md).
+By participating, you are expected to uphold this code. Please report unacceptable behavior
+to .
+
+
+## I Have a Question
+
+> If you want to ask a question, we assume that you have read the available [Documentation](https://github.com/MrUnknownDE/utools).
+
+Before you ask a question, it is best to search for existing [Issues](https://github.com/MrUnknownDE/utools/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first.
+
+If you then still feel the need to ask a question and need clarification, we recommend the following:
+
+- Open an [Issue](https://github.com/MrUnknownDE/utools/issues/new).
+- Provide as much context as you can about what you're running into.
+- Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant.
+
+We will then take care of the issue as soon as possible.
+
+<!--
+You might want to create a separate issue tag for questions and include it in this description. People should then tag their issues accordingly.
+
+Depending on how large the project is, you may want to outsource the questioning, e.g. to Stack Overflow or Gitter. You may add additional contact and information possibilities:
+- IRC
+- Slack
+- Gitter
+- Stack Overflow tag
+- Blog
+- FAQ
+- Roadmap
+- E-Mail List
+- Forum
+-->
+
+## I Want To Contribute
+
+> ### Legal Notice <!-- omit in toc -->
+> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project licence.
+
+### Reporting Bugs
+
+<!-- omit in toc -->
+#### Before Submitting a Bug Report
+
+A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.
+
+- Make sure that you are using the latest version.
+- Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](https://github.com/MrUnknownDE/utools). If you are looking for support, you might want to check [this section](#i-have-a-question)).
+- To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/MrUnknownDE/utools/issues?q=label%3Abug).
+- Also make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue.
+- Collect information about the bug:
+- Stack trace (Traceback)
+- OS, Platform and Version (Windows, Linux, macOS, x86, ARM)
+- Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what seems relevant.
+- Possibly your input and the output
+- Can you reliably reproduce the issue? And can you also reproduce it with older versions?
+
+<!-- omit in toc -->
+#### How Do I Submit a Good Bug Report?
+
+> You must never report security related issues, vulnerabilities or bugs including sensitive information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to .
+<!-- You may add a PGP key to allow the messages to be sent encrypted as well. -->
+
+We use GitHub issues to track bugs and errors. If you run into an issue with the project:
+
+- Open an [Issue](https://github.com/MrUnknownDE/utools/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.)
+- Explain the behavior you would expect and the actual behavior.
+- Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case.
+- Provide the information you collected in the previous section.
+
+Once it's filed:
+
+- The project team will label the issue accordingly.
+- A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced.
+- If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution).
+
+<!-- You might want to create an issue template for bugs and errors that can be used as a guide and that defines the structure of the information to be included. If you do so, reference it here in the description. -->
+
+
+### Suggesting Enhancements
+
+This section guides you through submitting an enhancement suggestion for uTools, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.
+
+<!-- omit in toc -->
+#### Before Submitting an Enhancement
+
+- Make sure that you are using the latest version.
+- Read the [documentation](https://github.com/MrUnknownDE/utools) carefully and find out if the functionality is already covered, maybe by an individual configuration.
+- Perform a [search](https://github.com/MrUnknownDE/utools/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.
+- Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library.
+
+<!-- omit in toc -->
+#### How Do I Submit a Good Enhancement Suggestion?
+
+Enhancement suggestions are tracked as [GitHub issues](https://github.com/MrUnknownDE/utools/issues).
+
+- Use a **clear and descriptive title** for the issue to identify the suggestion.
+- Provide a **step-by-step description of the suggested enhancement** in as many details as possible.
+- **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you.
+- You may want to **include screenshots or screen recordings** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [LICEcap](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and the built-in [screen recorder in GNOME](https://help.gnome.org/users/gnome-help/stable/screen-shot-record.html.en) or [SimpleScreenRecorder](https://github.com/MaartenBaert/ssr) on Linux. <!-- this should only be included if the project has a GUI -->
+- **Explain why this enhancement would be useful** to most uTools users. You may also want to point out the other projects that solved it better and which could serve as inspiration.
+
+<!-- You might want to create an issue template for enhancement suggestions that can be used as a guide and that defines the structure of the information to be included. If you do so, reference it here in the description. -->
+
+### Your First Code Contribution
+<!-- TODO
+include Setup of env, IDE and typical getting started instructions?
+
+-->
+
+### Improving The Documentation
+<!-- TODO
+Updating, improving and correcting the documentation
+
+-->
+
+## Styleguides
+### Commit Messages
+<!-- TODO
+
+-->
+
+## Join The Project Team
+<!-- TODO -->
+
+<!-- omit in toc -->
+## Attribution
+This guide is based on the [contributing.md](https://contributing.md/generator)!
@@ -5,10 +5,7 @@

 A modern web application that displays detailed information about a client's IP address, including geolocation, ASN, rDNS, and provides network diagnostic tools like Ping, Traceroute, DNS Lookup, Subnet Calculation, and WHOIS Lookup. It also allows looking up information for any public IP address.

-<!-- Optional: Füge hier einen Screenshot hinzu -->
-<!-- ![Screenshot](link/to/your/screenshot.png) -->
-
-### Livedemo: https://utools.johanneskr.de
+### Preview: https://utools.mrunk.de

 ## 🚀 Features

@@ -16,150 +13,84 @@ A modern web application that displays detailed information about a client's IP
 *   **Geolocation:** Shows Country, Region, City, Postal Code, Coordinates, and Timezone based on the IP.
 *   **ASN Information:** Displays the Autonomous System Number (ASN) and organization name.
 *   **Reverse DNS (rDNS):** Performs a reverse DNS lookup for the IP address.
-*   **Interactive Map:** Visualizes the geolocation on an OpenStreetMap.
+*   **Interactive Dark Mode Map:** Visualizes the geolocation on a dark-themed OpenStreetMap/CartoDB map.
+*   **Glassmorphism UI:** Features a premium, modern transparent design with animated gradients.
 *   **IP Lookup:** Allows users to enter any public IP address to retrieve its Geo, ASN, and rDNS information.
-*   **Traceroute:** Initiates a server-side traceroute (via SSE stream) to the client's IP (on click) or a looked-up IP.
+*   **Traceroute:** Initiates a server-side traceroute (via SSE stream) to the client's IP or a looked-up IP.
 *   **Ping:** Performs a server-side ping test to a looked-up IP.
 *   **DNS Lookup:** Performs various DNS record lookups (A, AAAA, MX, NS, TXT, SOA) for a given domain.
-*   **Subnet Calculator:** Calculates network details (Network Address, Broadcast Address, Usable Hosts, etc.) for a given IP and CIDR or Subnet Mask.
+*   **Subnet Calculator:** Calculates network details (address ranges, usable hosts) for IPv4 subnets.
 *   **WHOIS Lookup:** Retrieves WHOIS information for a given domain or IP address.
-*   **Dockerized:** Both frontend and backend are containerized for easy deployment.
-*   **Modern UI:** Built with Tailwind CSS for a clean and responsive interface.
+*   **MAC Address Lookup:** Identifies the vendor/manufacturer of a network interface using OUI data.
+*   **Port Scan:** Scans common ports of a target IP (via SSE stream).
+*   **Dockerized:** both frontend and backend are containerized for easy deployment.
+
+## 📚 API Usage
+
+The backend exposes several RESTful endpoints that return JSON data.
+
+| Endpoint | Method | Params | Description |
+| :--- | :--- | :--- | :--- |
+| `/api/ipinfo` | `GET` | None | Returns info for the requestor's IP. |
+| `/api/lookup` | `GET` | `targetIp` | Returns Geo/ASN info for a specific IP. |
+| `/api/dns-lookup` | `GET` | `domain`, `type` | Resolves DNS records (A, AAAA, MX, etc.). |
+| `/api/whois-lookup` | `GET` | `query` | Performs a WHOIS lookup for a domain or IP. |
+| `/api/mac-lookup` | `GET` | `mac` | Returns the vendor for a MAC address. |
+| `/api/ping` | `GET` | `targetIp` | Pings an IP address (returns 4 packets). |
+| `/api/traceroute` | `GET` | `targetIp` | Streams traceroute hops via Server-Sent Events (SSE). |
+| `/api/port-scan` | `GET` | `targetIp` | Streams port scan results via Server-Sent Events (SSE). |
+
+### Examples
+
+**Lookup an IP:**
+```bash
+curl "http://localhost:3000/api/lookup?targetIp=8.8.8.8"
+```
+
+**DNS Lookup:**
+```bash
+curl "http://localhost:3000/api/dns-lookup?domain=google.com&type=A"
+```
+
+**MAC Vendor Lookup:**
+```bash
+curl "http://localhost:3000/api/mac-lookup?mac=00:50:56:C0:00:08"
+```

 ## 🛠️ Tech Stack

-*   **Backend:**
-    *   Node.js
-    *   Express.js
-    *   MaxMind GeoLite2 Databases (for GeoIP and ASN)
-    *   Pino (for logging)
-    *   `whois-json` (for WHOIS lookups)
-    *   `net`, `dns`, `child_process` (Node.js built-ins for Ping, Traceroute, rDNS, DNS Lookup)
-    *   `@sentry/node` (optional error tracking)
-*   **Frontend:**
-    *   Vanilla JavaScript (ES6+)
-    *   Tailwind CSS (via Play CDN for simplicity, can be built)
-    *   Leaflet.js (for OpenStreetMap)
-    *   Nginx (for serving static files and as a reverse proxy)
-*   **Deployment:**
-    *   Docker & Docker Compose
-    *   GitHub Actions (for CI/CD - building and pushing images to GHCR)
+*   **Backend:** Node.js, Express.js, MaxMind GeoLite2, `oui`, `whois-json`, `@sentry/node`.
+*   **Frontend:** Vanilla JS, Tailwind CSS, Leaflet.js.
+*   **Deployment:** Docker, GitHub Actions.

 ## 🏁 Getting Started

-You can run this application easily using Docker and Docker Compose.
+### Using Pre-built Images (Recommended)

-### Prerequisites
+1.  **Create `compose.yml`:**
+    (See provided `compose.yml` in repository)

-*   [Docker](https://docs.docker.com/get-docker/) installed
-*   [Docker Compose](https://docs.docker.com/compose/install/) installed (usually included with Docker Desktop)
-
-### Option 1: Using Pre-built Images (Recommended)
-
-This method uses the Docker images automatically built and pushed to GitHub Container Registry (GHCR) by the GitHub Actions workflow.
-
-1.  **Create `docker-compose.yml`:**
-    Save the following content as `docker-compose.yml` in a new directory on your machine:
-
-    ```yaml
-    version: '3.8'
-
-    services:
-      backend:
-        # Use the pre-built image from GHCR
-        image: ghcr.io/mrunknownde/utools-backend:latest # Or specify a specific tag/sha
-        container_name: utools_backend
-        restart: unless-stopped
-        environment:
-          # Production environment settings
-          NODE_ENV: production
-          PORT: 3000
-          LOG_LEVEL: info # Adjust log level if needed (e.g., 'debug', 'warn')
-          PING_COUNT: 4
-          # Optional: Set Sentry DSN for error tracking if you use Sentry
-          # SENTRY_DSN: "YOUR_SENTRY_DSN"
-        dns:
-          # Explicitly set reliable public DNS servers for rDNS lookups inside the container
-          - 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
-        # Note: No ports exposed directly, access is via frontend proxy
-
-      frontend:
-        # Use the pre-built image from GHCR
-        image: ghcr.io/mrunknownde/utools-frontend:latest # Or specify a specific tag/sha
-        container_name: utools_frontend
-        restart: unless-stopped
-        ports:
-          # Expose port 8080 on the host, mapping to port 80 in the container (Nginx)
-          - "8080:80"
-        depends_on:
-          - backend # Ensures backend service is started first
-        networks:
-          - utools_network
-
-    networks:
-      utools_network:
-        driver: bridge
-        name: utools_network # Give the network a specific name
-    ```
-
-2.  **Start the Application:**
-    Open a terminal in the directory where you saved the `docker-compose.yml` file and run:
+2.  **Start:**
    ```bash
    docker compose up -d
    ```
-    *(Note: Use `docker-compose` (with hyphen) if you have an older version)*
-    This will download the images (if not already present) and start the containers in the background.

-3.  **Access the Webapp:**
-    Open your web browser and navigate to `http://localhost:8080`.
-
-### Option 2: Building Images from Source
-
-If you want to modify the code or build the images yourself:
-
-1.  **Clone the Repository:**
-    ```bash
-    git clone https://github.com/mrunknownde/utools.git
-    cd utools
-    ```
-2.  **Build and Start:**
-    Use Docker Compose to build the images based on the `Dockerfile`s in the `backend` and `frontend` directories and then start the containers:
-    ```bash
-    # Optional: Set GIT_COMMIT_SHA for build args if needed
-    # export GIT_COMMIT_SHA=$(git rev-parse --short HEAD)
-    docker compose -f compose.yml up -d --build
-    ```
-    *(Note: Use `docker-compose` (with hyphen) if you have an older version. The `compose.yml` in the repository correctly uses `build:` directives)*
-
-3.  **Access the Webapp:**
-    Open your web browser and navigate to `http://localhost:8080`.
+3.  **Access:** `http://localhost:8080`

 ## ⚙️ Configuration

-The application is configured mainly through environment variables set in the `docker-compose.yml` file for the `backend` service:
-
-*   `NODE_ENV`: Set to `production` for optimal performance and JSON logging.
-*   `PORT`: The internal port the Node.js application listens on (default: `3000`).
-*   `LOG_LEVEL`: Controls the logging verbosity (e.g., `debug`, `info`, `warn`, `error`).
-*   `PING_COUNT`: Number of ping packets to send (default: `4`).
-*   `SENTRY_DSN` (Optional): Your Sentry Data Source Name for error tracking. Can be set during build via args or at runtime via environment variable.
-*   `dns` (in compose): Specifies DNS servers for the backend container, crucial for reliable rDNS lookups.
-
-The MaxMind database paths (`GEOIP_CITY_DB`, `GEOIP_ASN_DB`) are set within the backend's Dockerfile but could potentially be overridden if needed (e.g., using volumes).
+Key environment variables for the backend:
+*   `NODE_ENV`: `production` or `development`.
+*   `PORT`: Internal port (default 3000).
+*   `RATE_LIMIT_MAX`: Requests per window (e.g., 50).
+*   `SENTRY_DSN`: Optional Sentry integration.

 ## 🌐 Data Sources

-*   **Geolocation & ASN:** This tool uses GeoLite2 data created by MaxMind, available from [https://www.maxmind.com](https://www.maxmind.com).
-    *   **Important:** The GeoLite2 databases require periodic updates. You need a MaxMind account (free) to download them. The Docker images contain the databases at build time. For long-term use, you should implement a process to update the `.mmdb` files within the `backend/data` directory (if using volumes) or rebuild the backend image regularly using the provided GitHub Action workflow (`maxmind-update.yml`).
-*   **Map Tiles:** Provided by OpenStreetMap contributors.
-*   **WHOIS Data:** Retrieved in real-time using the `whois-json` library, which queries standard WHOIS servers.
-*   **DNS Data:** Retrieved in real-time using Node.js' built-in `dns` module.
+*   **Geolocation:** [MaxMind GeoLite2](https://www.maxmind.com).
+*   **Map Tiles:** [OpenStreetMap](https://www.openstreetmap.org) & [CartoDB](https://carto.com).
+*   **MAC Data:** [IEEE OUI](https://standards.ieee.org/products-services/regauth/oui/index.html).

 ## 📜 License

-This project is licensed under the MIT License. See the `LICENSE` file for details.
+MIT License.
@@ -1,6 +1,6 @@
 # Stage 1: Build Dependencies
 # Use an official Node.js runtime as a parent image
-FROM node:18-alpine AS builder
+FROM node:24-alpine AS builder

 WORKDIR /app

@@ -18,7 +18,7 @@ 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
+FROM node:24-alpine

 WORKDIR /app

@@ -37,8 +37,13 @@ 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
+
+# Create ASN cache directory and set correct ownership BEFORE switching user
+# This ensures the Docker volume mount is writable by appuser
+RUN mkdir -p /app/asn-cache && chown -R appuser:appgroup /app/asn-cache
+
+# Change ownership of all app files to the new user
+RUN chown -R appuser:appgroup /app

 # Switch to the non-root user
 USER appuser
@@ -5,3 +5,5 @@ PORT=3000
 LOG_LEVEL=debug # z.B. für mehr Details im Development
 PING_COUNT=4
 # NODE_ENV=development # Setze dies ggf. für pino-pretty
+RATE_LIMIT_MAX=200
+RATE_LIMIT_WINDOW_MS=300000 # 5 Minuten
@@ -11,14 +11,19 @@
  "license": "ISC",
  "dependencies": {
    "@maxmind/geoip2-node": "^6.0.0",
-    "@sentry/node": "^8.0.0",
+    "@sentry/node": "^10.42.0",
    "cors": "^2.8.5",
    "dotenv": "^16.4.7",
    "express": "^4.21.2",
    "express-rate-limit": "^7.5.0",
+    "mac-oui-lookup": "^1.1.4",
    "macaddress": "^0.5.3",
    "pino": "^9.6.0",
    "pino-pretty": "^13.0.0",
+    "qs": "^6.14.2",
    "whois-json": "^2.0.4"
+  },
+  "overrides": {
+    "underscore": "1.13.8"
  }
 }
@@ -0,0 +1,275 @@
+// backend/routes/asnLookup.js
+const express = require('express');
+const https = require('https');
+const fs = require('fs');
+const path = require('path');
+const pino = require('pino');
+const Sentry = require('@sentry/node');
+
+const logger = pino({ level: process.env.LOG_LEVEL || 'info' });
+const router = express.Router();
+
+// ─── Filesystem Cache (24h TTL) ───────────────────────────────────────────────
+const CACHE_TTL_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
+const CACHE_DIR = process.env.ASN_CACHE_DIR || path.join(__dirname, '..', 'data', 'asn-cache');
+
+// Ensure cache directory exists
+try {
+    fs.mkdirSync(CACHE_DIR, { recursive: true });
+} catch (e) {
+    logger.warn({ error: e.message }, 'Could not create ASN cache directory');
+}
+
+function cacheFilePath(key) {
+    // Sanitize key to safe filename
+    return path.join(CACHE_DIR, key.replace(/[^a-zA-Z0-9_:-]/g, '_') + '.json');
+}
+
+function getCached(key) {
+    try {
+        const file = cacheFilePath(key);
+        const raw = fs.readFileSync(file, 'utf8');
+        const entry = JSON.parse(raw);
+        if (Date.now() > entry.expiresAt) {
+            fs.unlinkSync(file);
+            return null;
+        }
+        return entry.data;
+    } catch {
+        return null; // File doesn't exist or parse failed
+    }
+}
+
+function setCache(key, data) {
+    try {
+        const entry = { data, expiresAt: Date.now() + CACHE_TTL_MS };
+        fs.writeFileSync(cacheFilePath(key), JSON.stringify(entry), 'utf8');
+    } catch (e) {
+        logger.warn({ key, error: e.message }, 'ASN cache write failed');
+    }
+}
+
+// ─── HTTP Helper ──────────────────────────────────────────────────────────────
+function fetchJson(url) {
+    return new Promise((resolve, reject) => {
+        const req = https.get(url, {
+            headers: {
+                'User-Agent': 'uTools-Network-Suite/1.0 (https://github.com/MrUnknownDE/utools)',
+                'Accept': 'application/json',
+            },
+            timeout: 15000,
+        }, (res) => {
+            let raw = '';
+            res.on('data', (chunk) => { raw += chunk; });
+            res.on('end', () => {
+                if (res.statusCode < 200 || res.statusCode >= 300) {
+                    return reject(new Error(`HTTP ${res.statusCode} from ${url}`));
+                }
+                try { resolve(JSON.parse(raw)); }
+                catch (e) { reject(new Error(`JSON parse error: ${e.message}`)); }
+            });
+        });
+        req.on('error', reject);
+        req.on('timeout', () => { req.destroy(); reject(new Error(`Timeout: ${url}`)); });
+    });
+}
+
+// ─── ASN Validation ───────────────────────────────────────────────────────────
+function parseAsn(raw) {
+    if (!raw || typeof raw !== 'string') return null;
+    const cleaned = raw.trim().toUpperCase().replace(/^AS/, '');
+    const n = parseInt(cleaned, 10);
+    if (isNaN(n) || n < 1 || n > 4294967295 || String(n) !== cleaned) return null;
+    return n;
+}
+
+// ─── RIPE Stat Fetchers ───────────────────────────────────────────────────────
+async function fetchOverview(asn) {
+    const key = `overview:${asn}`;
+    const cached = getCached(key);
+    if (cached) return cached;
+
+    const json = await fetchJson(`https://stat.ripe.net/data/as-overview/data.json?resource=AS${asn}`);
+    const d = json?.data;
+    const result = {
+        asn,
+        name: d?.holder || null,
+        announced: d?.announced ?? false,
+        type: d?.type || null,
+        block: d?.block || null,
+    };
+    setCache(key, result);
+    return result;
+}
+
+async function fetchNeighbours(asn) {
+    const key = `neighbours:${asn}`;
+    const cached = getCached(key);
+    if (cached) return cached;
+
+    const json = await fetchJson(`https://stat.ripe.net/data/asn-neighbours/data.json?resource=AS${asn}`);
+    const neighbours = (json?.data?.neighbours || []).map(n => ({
+        asn: n.asn,
+        type: n.type,       // 'left' = upstream, 'right' = downstream
+        power: n.power || 0,
+        v4_peers: n.v4_peers || 0,
+        v6_peers: n.v6_peers || 0,
+    }));
+    setCache(key, neighbours);
+    return neighbours;
+}
+
+async function fetchPrefixes(asn) {
+    const key = `prefixes:${asn}`;
+    const cached = getCached(key);
+    if (cached) return cached;
+
+    const json = await fetchJson(`https://stat.ripe.net/data/announced-prefixes/data.json?resource=AS${asn}`);
+    const prefixes = (json?.data?.prefixes || []).map(p => p.prefix);
+    setCache(key, prefixes);
+    return prefixes;
+}
+
+async function fetchPeeringDb(asn) {
+    const key = `peeringdb:${asn}`;
+    const cached = getCached(key);
+    if (cached !== null) return cached;
+
+    try {
+        const json = await fetchJson(`https://www.peeringdb.com/api/net?asn=${asn}&depth=2`);
+        const net = json?.data?.[0];
+        if (!net) { setCache(key, null); return null; }
+
+        const result = {
+            peeringPolicy: net.policy_general || null,
+            infoType: net.info_type || null,
+            infoTraffic: net.info_traffic || null,
+            infoRatio: net.info_ratio || null,
+            infoScope: net.info_scope || null,
+            website: net.website || null,
+            ixps: (net.netixlan_set || []).map(ix => ({
+                name: ix.name,
+                speed: ix.speed,
+                ipv4: ix.ipaddr4 || null,
+                ipv6: ix.ipaddr6 || null,
+            })).slice(0, 20),
+        };
+        setCache(key, result);
+        return result;
+    } catch (e) {
+        logger.warn({ asn, error: e.message }, 'PeeringDB fetch failed');
+        return null;
+    }
+}
+
+// ─── Resolve names for a list of ASNs ────────────────────────────────────────
+async function resolveNames(asnList) {
+    const results = await Promise.allSettled(asnList.map(a => fetchOverview(a)));
+    const map = {};
+    results.forEach((r, i) => {
+        map[asnList[i]] = r.status === 'fulfilled' ? (r.value.name || null) : null;
+    });
+    return map;
+}
+
+// ─── Route ────────────────────────────────────────────────────────────────────
+router.get('/', async (req, res, next) => {
+    const rawAsn = req.query.asn;
+    const requestIp = req.ip;
+
+    const asn = parseAsn(String(rawAsn || ''));
+    if (!asn) {
+        return res.status(400).json({
+            success: false,
+            error: 'Invalid ASN. Please provide a number between 1 and 4294967295, e.g. ?asn=15169'
+        });
+    }
+
+    logger.info({ requestIp, asn }, 'ASN lookup request');
+
+    try {
+        // Level 1 + Level 2: fetch all base data in parallel (allSettled = one failure won't crash everything)
+        const [overviewResult, neighboursResult, prefixesResult, peeringdbResult] = await Promise.allSettled([
+            fetchOverview(asn),
+            fetchNeighbours(asn),
+            fetchPrefixes(asn),
+            fetchPeeringDb(asn),
+        ]);
+
+        const overview = overviewResult.status === 'fulfilled' ? overviewResult.value : { asn, name: null, announced: false, type: null };
+        const neighbours = neighboursResult.status === 'fulfilled' ? neighboursResult.value : [];
+        const prefixes = prefixesResult.status === 'fulfilled' ? prefixesResult.value : [];
+        const peeringdb = peeringdbResult.status === 'fulfilled' ? peeringdbResult.value : null;
+
+        if (overviewResult.status === 'rejected') logger.warn({ asn, error: overviewResult.reason?.message }, 'Overview fetch failed, continuing with partial data');
+        if (neighboursResult.status === 'rejected') logger.warn({ asn, error: neighboursResult.reason?.message }, 'Neighbours fetch failed, continuing with partial data');
+        if (prefixesResult.status === 'rejected') logger.warn({ asn, error: prefixesResult.reason?.message }, 'Prefixes fetch failed, continuing with partial data');
+
+        // Split neighbours (keep ALL of them, sorted by power)
+        const allUpstreams = neighbours.filter(n => n.type === 'left').sort((a, b) => b.power - a.power);
+        const allDownstreams = neighbours.filter(n => n.type === 'right').sort((a, b) => b.power - a.power);
+
+        // Resolve names for only the Top 25 of each, to prevent hammering the RIPE API (rate limits)
+        const topLevel2Asns = [...new Set([
+            ...allUpstreams.slice(0, 25),
+            ...allDownstreams.slice(0, 25)
+        ].map(n => n.asn))];
+        const level2Names = await resolveNames(topLevel2Asns);
+
+        // Level 3: fetch upstreams-of-upstreams for top 5 Level 2 upstreams
+        const level3Raw = await Promise.allSettled(
+            allUpstreams.slice(0, 5).map(async (upstreamNode) => {
+                const theirNeighbours = await fetchNeighbours(upstreamNode.asn);
+                const theirUpstreams = theirNeighbours
+                    .filter(n => n.type === 'left')
+                    .sort((a, b) => b.power - a.power)
+                    .slice(0, 3);
+                return { parentAsn: upstreamNode.asn, theirUpstreams };
+            })
+        );
+
+        const level3Data = level3Raw
+            .filter(r => r.status === 'fulfilled')
+            .map(r => r.value);
+
+        // Resolve names for Level 3 nodes
+        const level3Asns = [...new Set(level3Data.flatMap(d => d.theirUpstreams.map(n => n.asn)))];
+        const level3Names = await resolveNames(level3Asns);
+
+        // ── Build graph ───────────────────────────────────────────────────────
+        const graph = {
+            center: { asn, name: overview.name },
+            level2: {
+                upstreams: allUpstreams.map(n => ({ asn: n.asn, name: level2Names[n.asn] || null, power: n.power, v4: n.v4_peers, v6: n.v6_peers })),
+                downstreams: allDownstreams.map(n => ({ asn: n.asn, name: level2Names[n.asn] || null, power: n.power, v4: n.v4_peers, v6: n.v6_peers })),
+            },
+            level3: level3Data.map(d => ({
+                parentAsn: d.parentAsn,
+                parentName: level2Names[d.parentAsn] || null,
+                upstreams: d.theirUpstreams.map(n => ({
+                    asn: n.asn,
+                    name: level3Names[n.asn] || null,
+                    power: n.power,
+                })),
+            })),
+        };
+
+        res.json({
+            success: true,
+            asn,
+            name: overview.name,
+            announced: overview.announced,
+            type: overview.type,
+            prefixes: prefixes, // Export all prefixes without limit
+            peeringdb,
+            graph,
+        });
+
+    } catch (error) {
+        logger.error({ asn, requestIp, error: error.message }, 'ASN lookup failed');
+        Sentry.captureException(error, { extra: { asn, requestIp } });
+        next(error);
+    }
+});
+
+module.exports = router;
@@ -0,0 +1,39 @@
+const express = require('express');
+const Sentry = require("@sentry/node");
+const pino = require('pino');
+const { getVendor } = require('mac-oui-lookup');
+const { isValidMacAddress } = require('../utils');
+
+const logger = pino({ level: process.env.LOG_LEVEL || 'info' });
+const router = express.Router();
+
+router.get('/', async (req, res) => {
+    const macRaw = req.query.mac;
+    const mac = typeof macRaw === 'string' ? macRaw.trim() : macRaw;
+    const requestIp = req.ip || req.socket.remoteAddress;
+
+    logger.info({ requestIp, mac }, 'MAC lookup request received');
+
+    if (!isValidMacAddress(mac)) {
+        logger.warn({ requestIp, mac }, 'Invalid MAC address for lookup');
+        return res.status(400).json({ success: false, error: 'Invalid MAC address format provided.' });
+    }
+
+    try {
+        const vendor = getVendor(mac);
+
+        if (vendor) {
+            logger.info({ requestIp, mac, vendor }, 'MAC lookup successful');
+            res.json({ success: true, mac, vendor });
+        } else {
+            logger.info({ requestIp, mac }, 'MAC address not found in OUI database');
+            res.status(404).json({ success: false, error: 'Vendor not found for this MAC address.' });
+        }
+    } catch (error) {
+        logger.error({ requestIp, mac, error: error.message }, 'MAC lookup failed');
+        Sentry.captureException(error, { extra: { requestIp, mac } });
+        res.status(500).json({ success: false, error: 'An unexpected error occurred during the MAC lookup.' });
+    }
+});
+
+module.exports = router;
@@ -0,0 +1,76 @@
+const express = require('express');
+const Sentry = require("@sentry/node");
+const pino = require('pino');
+const { isValidIp, isPrivateIp, checkPort } = require('../utils');
+
+const logger = pino({ level: process.env.LOG_LEVEL || 'info' });
+const router = express.Router();
+
+const COMMON_PORTS_TO_SCAN = [
+    21, 22, 25, 53, 80, 110, 143, 443, 3306, 3389, 5432, 8080, 8443
+];
+
+router.get('/', (req, res) => {
+    const targetIpRaw = req.query.targetIp;
+    const targetIp = typeof targetIpRaw === 'string' ? targetIpRaw.trim() : targetIpRaw;
+    const requestIp = req.ip || req.socket.remoteAddress;
+
+    logger.info({ requestIp, targetIp }, 'Port scan stream request received');
+
+    if (!isValidIp(targetIp)) {
+        logger.warn({ requestIp, targetIp }, 'Invalid target IP for port scan');
+        return res.status(400).json({ success: false, error: 'Invalid target IP address provided.' });
+    }
+    if (isPrivateIp(targetIp)) {
+        logger.warn({ requestIp, targetIp }, 'Attempt to scan private IP blocked');
+        return res.status(403).json({ success: false, error: 'Operations on private or local IP addresses are not allowed.' });
+    }
+
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+    res.setHeader('X-Accel-Buffering', 'no');
+    res.flushHeaders();
+
+    const sendEvent = (event, data) => {
+        if (!res.writableEnded) {
+            res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
+        }
+    };
+
+    let isConnectionClosed = false;
+    req.on('close', () => {
+        logger.info({ requestIp, targetIp }, 'Client disconnected from port scan stream.');
+        isConnectionClosed = true;
+    });
+
+    (async () => {
+        try {
+            sendEvent('info', { message: `Starting scan of ${COMMON_PORTS_TO_SCAN.length} common ports on ${targetIp}...` });
+
+            for (const port of COMMON_PORTS_TO_SCAN) {
+                if (isConnectionClosed) break;
+                const result = await checkPort(port, targetIp, 2000);
+                sendEvent('port_status', result);
+            }
+
+            if (!isConnectionClosed) {
+                logger.info({ requestIp, targetIp }, 'Port scan stream completed successfully.');
+                sendEvent('end', { message: 'Scan complete.' });
+            }
+        } catch (error) {
+            logger.error({ requestIp, targetIp, error: error.message }, 'Error during port scan stream');
+            // Add context directly to the captureException call
+            Sentry.captureException(error, { extra: { requestIp, targetIp } });
+            if (!isConnectionClosed) {
+                sendEvent('error', { error: 'An unexpected error occurred during the scan.' });
+            }
+        } finally {
+            if (!res.writableEnded) {
+                res.end();
+            }
+        }
+    })();
+});
+
+module.exports = router;
@@ -1,4 +1,3 @@
-// backend/routes/traceroute.js
 const express = require('express');
 const Sentry = require("@sentry/node");
 const { spawn } = require('child_process');
@@ -37,13 +36,6 @@ router.get('/', (req, res) => {
        return res.status(403).json({ success: false, error: 'Operations on private or local IP addresses are not allowed.' });
    }

-    // Add specific context for this request to the current Sentry scope
-    // Errors/Messages captured later in this request handler will have this context.
-    Sentry.configureScope(scope => {
-        scope.setContext("traceroute_details", { targetIp: targetIp, requestIp: requestIp });
-    });
-
-
    try {
        logger.info({ requestIp, targetIp }, `Starting traceroute stream...`);
        res.setHeader('Content-Type', 'text/event-stream');
@@ -77,7 +69,6 @@ router.get('/', (req, res) => {
                Sentry.captureException(e, { level: 'warning', extra: { requestIp, targetIp, event } });
                if (proc && !proc.killed) proc.kill();
                if (!res.writableEnded) res.end();
-                // No manual transaction finishing needed here
            }
        };

@@ -88,10 +79,8 @@ router.get('/', (req, res) => {
            lines.forEach(line => {
                const parsed = parseTracerouteLine(line);
                if (parsed) {
-                    // logger.debug({ requestIp, targetIp, hop: parsed.hop, ip: parsed.ip }, 'Sending hop data');
                    sendEvent('hop', parsed);
                } else if (line.trim()) {
-                     // logger.debug({ requestIp, targetIp, message: line.trim() }, 'Sending info data');
                     sendEvent('info', { message: line.trim() });
                }
            });
@@ -110,7 +99,6 @@ router.get('/', (req, res) => {
            Sentry.captureException(err, { extra: { requestIp, targetIp } }); // Capture original error
            sendEvent('error', { error: `Failed to start traceroute: ${errorMsg}` });
            if (!res.writableEnded) res.end();
-            // No manual transaction finishing needed here
        });

        proc.on('close', (code) => {
@@ -125,30 +113,23 @@ router.get('/', (req, res) => {
                logger.error({ requestIp, targetIp, exitCode: code }, errorMsg);
                Sentry.captureMessage('Traceroute command failed', { level: 'error', extra: { requestIp, targetIp, exitCode: code } });
                sendEvent('error', { error: errorMsg });
-                // Transaction status will be inferred by Sentry based on errors captured
            } else {
                logger.info({ requestIp, targetIp }, `Traceroute stream completed successfully.`);
-                // Transaction status will likely be 'ok' if no errors were captured
            }
             sendEvent('end', { exitCode: code });
             if (!res.writableEnded) res.end();
-             // No manual transaction finishing needed here
        });

        req.on('close', () => {
            logger.info({ requestIp, targetIp }, 'Client disconnected from traceroute stream, killing process.');
            if (proc && !proc.killed) proc.kill();
            if (!res.writableEnded) res.end();
-            // Sentry transaction might be marked as 'cancelled' automatically or based on timeout
-            // No manual transaction finishing needed here
        });

    } catch (error) {
-        // This catch handles errors during the initial setup (e.g., spawn fails immediately)
        const errorMsg = getErrorMessage(error, 'Failed to initiate traceroute due to an internal server error.');
        logger.error({ requestIp, targetIp, error: errorMsg, stack: error.stack }, 'Error setting up traceroute stream');
-        Sentry.captureException(error, { extra: { requestIp, targetIp } }); // Capture original error
-        // No manual transaction finishing needed here
+        Sentry.captureException(error, { extra: { requestIp, targetIp } });

        if (!res.headersSent) {
             res.status(500).json({ success: false, error: `Failed to initiate traceroute: ${errorMsg}` });
@@ -5,7 +5,7 @@ const whois = require('whois-json');
 const pino = require('pino');

 // Import utilities
-const { isValidIp, isValidDomain } = require('../utils');
+const { isValidIp, isValidDomain, isPrivateIp } = require('../utils');

 // Logger for this module
 const logger = pino({ level: process.env.LOG_LEVEL || 'info' });
@@ -26,6 +26,11 @@ router.get('/', async (req, res, next) => {
        return res.status(400).json({ success: false, error: 'Invalid domain name or IP address provided for WHOIS lookup.' });
    }

+    if (isValidIp(query) && isPrivateIp(query)) {
+         logger.warn({ requestIp, query }, 'Attempt to WHOIS lookup private IP blocked');
+         return res.status(403).json({ success: false, error: 'WHOIS lookup for private or local IP addresses is not supported.' });
+    }
+
    // Note: No isPrivateIp check here, as WHOIS for IPs might be desired regardless of range,
    // and domain lookups don't involve IP ranges.

@@ -1,5 +1,3 @@
-// server.js
-// Load .env variables FIRST!
 require('dotenv').config();

 // --- Sentry Initialisierung (GANZ OBEN, nach dotenv) ---
@@ -7,10 +5,16 @@ const Sentry = require("@sentry/node");

 // Initialize Sentry BEFORE requiring any other modules!
 Sentry.init({
-  // DSN should now be available from process.env if set in .env
-  dsn: process.env.SENTRY_DSN || "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa@oooooooooooooooo.ingest.sentry.io/123456",
-  // Enable tracing - Adjust sample rate as needed
-  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
+    // DSN should now be available from process.env if set in .env
+    dsn: process.env.SENTRY_DSN || "https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa@oooooooooooooooo.ingest.sentry.io/123456",
+    // Enable tracing - Adjust sample rate as needed
+    tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
+    integrations: [
+        // send console.log, console.warn, and console.error calls as logs to Sentry
+        Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }),
+    ],
+    // Enable logs to be sent to Sentry
+    enableLogs: true,
 });

 // DEBUG: Check Sentry object after init
@@ -33,13 +37,16 @@ const lookupRoutes = require('./routes/lookup');
 const dnsLookupRoutes = require('./routes/dnsLookup');
 const whoisLookupRoutes = require('./routes/whoisLookup');
 const versionRoutes = require('./routes/version');
+const portScanRoutes = require('./routes/portScan');
+const macLookupRoutes = require('./routes/macLookup');
+const asnLookupRoutes = require('./routes/asnLookup');

 // --- Logger Initialisierung ---
 const logger = pino({
-  level: process.env.LOG_LEVEL || 'info',
-  transport: process.env.NODE_ENV !== 'production'
-    ? { target: 'pino-pretty', options: { colorize: true, translateTime: 'SYS:standard', ignore: 'pid,hostname' } }
-    : undefined,
+    level: process.env.LOG_LEVEL || 'info',
+    transport: process.env.NODE_ENV !== 'production'
+        ? { target: 'pino-pretty', options: { colorize: true, translateTime: 'SYS:standard', ignore: 'pid,hostname' } }
+        : undefined,
 });

 // Create Express app instance
@@ -71,11 +78,11 @@ app.set('trust proxy', parseInt(process.env.TRUST_PROXY_COUNT || '2', 10)); // A
 // --- Rate Limiter ---
 // Apply a general limiter to most routes
 const generalLimiter = rateLimit({
-    windowMs: 5 * 60 * 1000, // 5 minutes
-    max: parseInt(process.env.RATE_LIMIT_MAX || (process.env.NODE_ENV === 'production' ? '20' : '200'), 10), // Requests per window per IP, ensure integer
+    windowMs: parseInt(process.env.RATE_LIMIT_WINDOW_MS || (5 * 60 * 1000).toString(), 10), // Default 5 minutes
+    max: parseInt(process.env.RATE_LIMIT_MAX || (process.env.NODE_ENV === 'production' ? '20' : '200'), 10), // Requests per window per IP
    standardHeaders: true, // Return rate limit info in the `RateLimit-*` headers
    legacyHeaders: false, // Disable the `X-RateLimit-*` headers
-    message: { success: false, error: 'Too many requests from this IP, please try again after 5 minutes' },
+    message: { success: false, error: 'Too many requests from this IP, please try again after a while' },
    keyGenerator: (req, res) => req.ip, // Use client IP address from Express
    handler: (req, res, next, options) => {
        logger.warn({ ip: req.ip, route: req.originalUrl }, 'Rate limit exceeded');
@@ -87,13 +94,8 @@ const generalLimiter = rateLimit({
    }
 });

-// Apply the limiter to specific API routes that perform external actions
-// Note: /api/ipinfo and /api/version are often excluded as they are less resource-intensive
-app.use('/api/ping', generalLimiter);
-app.use('/api/traceroute', generalLimiter);
-app.use('/api/lookup', generalLimiter);
-app.use('/api/dns-lookup', generalLimiter);
-app.use('/api/whois-lookup', generalLimiter);
+// Apply the limiter to ALL API routes
+app.use('/api', generalLimiter);


 // --- API Routes ---
@@ -105,6 +107,9 @@ 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/port-scan', portScanRoutes);
+app.use('/api/mac-lookup', macLookupRoutes);
+app.use('/api/asn-lookup', asnLookupRoutes);


 // --- Sentry Error Handler ---
@@ -112,12 +117,12 @@ app.use('/api/version', versionRoutes);
 if (Sentry.Handlers && Sentry.Handlers.errorHandler) {
    app.use(Sentry.Handlers.errorHandler({
        shouldHandleError(error) {
-          // Capture all 500 errors
-          if (error.status === 500) return true;
-          // Capture specific client errors if needed, e.g., 403
-          // if (error.status === 403) return true;
-          // By default, capture only server errors (5xx)
-          return error.status >= 500;
+            // Capture all 500 errors
+            if (error.status === 500) return true;
+            // Capture specific client errors if needed, e.g., 403
+            // if (error.status === 403) return true;
+            // By default, capture only server errors (5xx)
+            return error.status >= 500;
        },
    }));
 } else {
@@ -178,9 +183,9 @@ async function gracefulShutdown(signal) {
                await Sentry.close(2000); // 2 second timeout
                logger.info('Sentry closed.');
            } catch (e) {
-                 logger.error({ error: e.message }, 'Error closing Sentry');
+                logger.error({ error: e.message }, 'Error closing Sentry');
            } finally {
-                 process.exit(128 + signals[signal]); // Standard exit code for signals
+                process.exit(128 + signals[signal]); // Standard exit code for signals
            }
        });
    } else {
@@ -190,9 +195,9 @@ async function gracefulShutdown(signal) {
            await Sentry.close(2000);
            logger.info('Sentry closed (server never started).');
        } catch (e) {
-             logger.error({ error: e.message }, 'Error closing Sentry (server never started)');
+            logger.error({ error: e.message }, 'Error closing Sentry (server never started)');
        } finally {
-             process.exit(128 + signals[signal]);
+            process.exit(128 + signals[signal]);
        }
    }

@@ -205,5 +210,5 @@ async function gracefulShutdown(signal) {

 // Register signal handlers
 Object.keys(signals).forEach((signal) => {
-  process.on(signal, () => gracefulShutdown(signal));
+    process.on(signal, () => gracefulShutdown(signal));
 });
@@ -29,6 +29,12 @@ function isValidIp(ip) {
 */
 function isPrivateIp(ip) {
    if (!ip) return false;
+
+    // Normalize IPv6-mapped IPv4 addresses (e.g., ::ffff:192.168.1.1 -> 192.168.1.1)
+    if (ip.startsWith('::ffff:')) {
+        ip = ip.substring(7);
+    }
+
    const ipVersion = net.isIP(ip);

    if (ipVersion === 4) {
@@ -38,12 +44,15 @@ function isPrivateIp(ip) {
            (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) || // 172.16.0.0/12
            (parts[0] === 192 && parts[1] === 168) || // 192.168.0.0/16
            parts[0] === 127 || // 127.0.0.0/8 (Loopback)
-            (parts[0] === 169 && parts[1] === 254) // 169.254.0.0/16 (Link-local)
+            (parts[0] === 169 && parts[1] === 254) || // 169.254.0.0/16 (Link-local)
+            // Block 0.0.0.0 (Commonly "Any" or "Current Network")
+            (parts[0] === 0 && parts[1] === 0 && parts[2] === 0 && parts[3] === 0)
        );
    } else if (ipVersion === 6) {
        const lowerCaseIp = ip.toLowerCase();
        return (
            lowerCaseIp === '::1' || // ::1/128 (Loopback)
+            lowerCaseIp === '::' || // ::/128 (Unspecified)
            lowerCaseIp.startsWith('fc') || lowerCaseIp.startsWith('fd') || // fc00::/7 (Unique Local)
            lowerCaseIp.startsWith('fe8') || lowerCaseIp.startsWith('fe9') || // fe80::/10 (Link-local)
            lowerCaseIp.startsWith('fea') || lowerCaseIp.startsWith('feb')
@@ -66,6 +75,20 @@ function isValidDomain(domain) {
    return domainRegex.test(domain.trim());
 }

+/**
+ * Validiert eine MAC-Adresse.
+ * @param {string} mac - Die zu validierende MAC-Adresse.
+ * @returns {boolean} True, wenn das Format gültig ist, sonst false.
+ */
+function isValidMacAddress(mac) {
+    if (!mac || typeof mac !== 'string') {
+        return false;
+    }
+    // This regex matches common MAC address formats (e.g., 00:1A:2B:3C:4D:5E, 00-1A-2B-3C-4D-5E, 001A2B3C4D5E)
+    const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$|^([0-9A-Fa-f]{12})$/;
+    return macRegex.test(mac.trim());
+}
+

 /**
 * Bereinigt eine IP-Adresse (z.B. entfernt ::ffff: Präfix von IPv4-mapped IPv6).
@@ -167,7 +190,7 @@ function parsePingOutput(pingOutput) {

        // Handle both 'rtt' and 'round-trip' prefixes for broader compatibility
        const rttLine = lines.find(line => line.startsWith('rtt min/avg/max/mdev') || line.startsWith('round-trip min/avg/max/stddev'));
-         if (rttLine) {
+        if (rttLine) {
            const rttMatch = rttLine.match(/([\d.]+)\/([\d.]+)\/([\d.]+)\/([\d.]+)/);
            if (rttMatch) {
                rtt = {
@@ -186,7 +209,7 @@ function parsePingOutput(pingOutput) {

        // Check for common error messages or patterns
        if (packetsTransmitted > 0 && packetsReceived === 0) {
-             result.error = "Request timed out or host unreachable.";
+            result.error = "Request timed out or host unreachable.";
        } else if (pingOutput.includes('unknown host') || pingOutput.includes('Name or service not known')) {
            result.error = "Unknown host.";
        }
@@ -216,8 +239,8 @@ function parseTracerouteLine(line) {
    const timeoutMatch = line.match(/^(\s*\d+)\s+(\*\s+\*\s+\*)/); // Match lines with only timeouts

    if (timeoutMatch) {
-         // Handle timeout line
-         return {
+        // Handle timeout line
+        return {
            hop: parseInt(timeoutMatch[1].trim(), 10),
            hostname: null,
            ip: null,
@@ -243,7 +266,7 @@ function parseTracerouteLine(line) {
        // Pad with '*' if fewer than 3 RTTs were found (e.g., due to timeouts)
        while (rtts.length < 3) rtts.push('*');

-         return {
+        return {
            hop: hop,
            hostname: hostname || null, // Use null if hostname wasn't captured
            ip: ip,
@@ -256,14 +279,75 @@ function parseTracerouteLine(line) {
    return null;
 }

+/**
+ * Checks if a specific TCP port is open on a given host.
+ * @param {number} port - The port to check.
+ * @param {string} host - The target host IP address.
+ * @param {number} timeout - Connection timeout in milliseconds.
+ * @returns {Promise<{port: number, status: 'open'|'closed'|'timeout', service: string}>} A promise that resolves with the port status.
+ */
+function checkPort(port, host, timeout = 2000) {
+    // A small map of common ports to their services
+    const commonPorts = {
+        21: 'FTP', 22: 'SSH', 23: 'Telnet', 25: 'SMTP', 53: 'DNS', 80: 'HTTP',
+        110: 'POP3', 143: 'IMAP', 443: 'HTTPS', 445: 'SMB', 993: 'IMAPS',
+        995: 'POP3S', 1433: 'MSSQL', 1521: 'Oracle', 3306: 'MySQL', 3389: 'RDP',
+        5432: 'PostgreSQL', 5900: 'VNC', 8080: 'HTTP-Alt', 8443: 'HTTPS-Alt'
+    };
+    const service = commonPorts[port] || 'Unknown';
+
+    return new Promise((resolve, reject) => {
+        // DEFENSE IN DEPTH: Prevent scanning of private IPs at the function level
+        if (!isValidIp(host) || isPrivateIp(host)) {
+            const error = new Error(`Scanning restricted: ${host} is not a valid public IP.`);
+            logger.warn({ host, port }, "Blocked attempt to scan restricted IP in checkPort");
+            return resolve({
+                port,
+                status: 'error',
+                service,
+                error: 'Restricted IP',
+                details: 'Scanning private or invalid IPs is not allowed.'
+            });
+        }
+
+        const socket = new net.Socket();
+        socket.setTimeout(timeout);
+
+        socket.on('connect', () => {
+            socket.destroy();
+            resolve({ port, status: 'open', service });
+        });
+
+        socket.on('timeout', () => {
+            socket.destroy();
+            resolve({ port, status: 'timeout', service });
+        });
+
+        socket.on('error', (err) => {
+            socket.destroy();
+            // 'ECONNREFUSED' is the key for a closed port. Other errors might be network issues.
+            const status = err.code === 'ECONNREFUSED' ? 'closed' : 'error';
+            resolve({ port, status, service, error: err.code });
+        });
+
+        // Explicit inline guard (defence-in-depth; also satisfies CodeQL SSRF dataflow)
+        if (!isValidIp(host) || isPrivateIp(host)) {
+            socket.destroy();
+            return resolve({ port, status: 'error', service, error: 'Restricted IP' });
+        }
+        socket.connect(port, host);
+    });
+}
+

 module.exports = {
    isValidIp,
    isPrivateIp,
    isValidDomain,
+    isValidMacAddress,
    getCleanIp,
    executeCommand,
    parsePingOutput,
    parseTracerouteLine,
-    // Note: logger is not exported, assuming it's managed globally or passed where needed
+    checkPort,
 };
@@ -1,3 +1,13 @@
 docker compose down
+
+# Setzt die Git-Commit-Variable für den Build-Prozess
 export GIT_COMMIT_SHA=$(git rev-parse --short HEAD)
-docker compose -f compose.yml up -d --build
+export SENTRY_DSN="https://7ea70caba68f548fb96482a573006a7b@o447623.ingest.us.sentry.io/4509062020333568"
+
+# Schritt 1: Baue die Images mit der compose.build.yml
+echo "--- Building Docker images ---"
+docker compose -f compose.build.yml build
+
+# Schritt 2: Starte die Container mit der compose.yml, die die gebauten Images verwendet
+echo "--- Starting containers ---"
+docker compose -f compose.yml up -d
@@ -0,0 +1,16 @@
+# compose.build.yml
+services:
+  backend:
+    # Definiert, wie das Image gebaut wird
+    build:
+      context: ./backend
+      args:
+        - GIT_COMMIT_SHA=${GIT_COMMIT_SHA:-unknown}
+        - SENTRY_DSN=${SENTRY_DSN:-}
+    image: mrunknownde/utools-backend:latest
+
+  frontend:
+    # Definiert, wie das Image gebaut wird
+    build:
+      context: ./frontend
+    image: mrunknownde/utools-frontend:latest
@@ -1,51 +1,45 @@
 services:
  # Backend Service (Node.js App)
  backend:
-    build:
-      context: ./backend # Pfad zum Verzeichnis mit dem Backend-Dockerfile
-      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 # Eindeutiger Name für den Container
+    image: mrunknownde/utools-backend
+    container_name: utools_backend
    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
+      NODE_ENV: production
+      PORT: 3000
+      LOG_LEVEL: info
      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
+      SENTRY_DSN: "https://7ea70caba68f548fb96482a573006a7b@o447623.ingest.us.sentry.io/4509062020333568"
+      # ASN Cache directory (filesystem persistence across restarts)
+      ASN_CACHE_DIR: /app/asn-cache
+    volumes:
+      # Persistent ASN lookup cache — survives container restarts
+      - asn_cache:/app/asn-cache
    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
+      - 1.1.1.1
+      - 1.0.0.1
+      - 8.8.8.8
+      - 8.8.4.4
    networks:
-      - utools_network # Verbinde mit unserem benutzerdefinierten Netzwerk
+      - utools_network

  # Frontend Service (Nginx)
  frontend:
-    build: ./frontend # Pfad zum Verzeichnis mit dem Frontend-Dockerfile
+    image: mrunknownde/utools-frontend
    container_name: utools_frontend
    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
      - "8080:80"
    depends_on:
-      - backend # Stellt sicher, dass Backend gestartet wird (aber nicht unbedingt bereit ist)
+      - backend
    networks:
-      - utools_network # Verbinde mit unserem benutzerdefinierten Netzwerk
+      - utools_network

-# Definiere ein benutzerdefiniertes Netzwerk (gute Praxis)
 networks:
  utools_network:
-    driver: bridge # Standard-Netzwerktreiber
+    driver: bridge
+
+# Named volume — ASN cache persists across container restarts
+volumes:
+  asn_cache:
+    driver: local
@@ -0,0 +1,471 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ASN / AS Lookup - uTools</title>
+    <meta name="description"
+        content="Look up any Autonomous System Number (ASN) to see peering connections, network graph, prefixes and IXP information.">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- D3.js v7 for network graph -->
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <style>
+        .loader {
+            border: 4px solid rgba(168, 85, 247, 0.1);
+            border-left-color: #d8b4fe;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        .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);
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .fade-in {
+            animation: fadeIn 0.5s ease-out forwards;
+        }
+
+        .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;
+        }
+
+        nav ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        nav a {
+            color: #d1d5db;
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            transition: all 0.2s ease;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        nav a:hover {
+            color: #fff;
+            background: rgba(168, 85, 247, 0.2);
+            border-color: rgba(168, 85, 247, 0.4);
+        }
+
+        nav a.active-link {
+            background: rgba(168, 85, 247, 0.3);
+            color: #fff;
+            border-color: #a855f7;
+        }
+
+        header {
+            background: rgba(31, 41, 55, 0.4);
+            backdrop-filter: blur(10px);
+            padding: 1.5rem;
+            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;
+        }
+
+        @media (min-width: 768px) {
+            header {
+                flex-direction: row;
+                justify-content: space-between;
+            }
+        }
+
+        /* ── Network Graph ─────────────────────────────────────── */
+        #graph-container {
+            width: 100%;
+            height: 600px;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 0.75rem;
+            border: 1px solid rgba(255, 255, 255, 0.06);
+            overflow: hidden;
+            position: relative;
+        }
+
+        #graph-svg {
+            width: 100%;
+            height: 100%;
+            cursor: grab;
+        }
+
+        #graph-svg:active {
+            cursor: grabbing;
+        }
+
+        .node-center circle {
+            fill: #a855f7;
+            stroke: #d8b4fe;
+            stroke-width: 2.5;
+        }
+
+        .node-upstream circle {
+            fill: #3b82f6;
+            stroke: #93c5fd;
+            stroke-width: 1.5;
+        }
+
+        .node-downstream circle {
+            fill: #10b981;
+            stroke: #6ee7b7;
+            stroke-width: 1.5;
+        }
+
+        .node-tier1 circle {
+            fill: #6b7280;
+            stroke: #9ca3af;
+            stroke-width: 1.5;
+        }
+
+        .node text {
+            fill: #e5e7eb;
+            font-size: 11px;
+            font-family: 'Courier New', monospace;
+            pointer-events: none;
+            text-anchor: middle;
+        }
+
+        .node:hover circle {
+            filter: brightness(1.4);
+            cursor: pointer;
+        }
+
+        .link {
+            stroke: rgba(255, 255, 255, 0.12);
+            stroke-linecap: round;
+        }
+
+        .link-upstream {
+            stroke: rgba(59, 130, 246, 0.35);
+        }
+
+        .link-tier1 {
+            stroke: rgba(107, 114, 128, 0.3);
+            stroke-dasharray: 4 3;
+        }
+
+        .link-downstream {
+            stroke: rgba(16, 185, 129, 0.35);
+        }
+
+        /* Tooltip */
+        #graph-tooltip {
+            position: absolute;
+            pointer-events: none;
+            background: rgba(17, 24, 39, 0.95);
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(168, 85, 247, 0.4);
+            border-radius: 0.5rem;
+            padding: 0.6rem 0.9rem;
+            font-size: 12px;
+            color: #e5e7eb;
+            max-width: 220px;
+            z-index: 50;
+            opacity: 0;
+            transition: opacity 0.15s;
+        }
+
+        /* Prefix list */
+        .prefix-tag {
+            display: inline-block;
+            font-family: monospace;
+            font-size: 11px;
+            background: rgba(168, 85, 247, 0.15);
+            color: #c084fc;
+            border: 1px solid rgba(168, 85, 247, 0.3);
+            border-radius: 4px;
+            padding: 2px 6px;
+            margin: 2px;
+        }
+
+        /* IXP table */
+        .ixp-row {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        .ixp-row:last-child {
+            border-bottom: none;
+        }
+
+        ::-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-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="/">IP Info &amp; Tools</a></li>
+                <li><a href="/subnet">Subnetz Rechner</a></li>
+                <li><a href="/dns">DNS Lookup</a></li>
+                <li><a href="/whois">WHOIS Lookup</a></li>
+                <li><a href="/mac">MAC Lookup</a></li>
+                <li><a href="/asn" class="active-link">ASN Lookup</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div
+        class="container mx-auto max-w-6xl glass-panel rounded-xl shadow-2xl p-6 md:p-8 backdrop-blur-xl border border-gray-800/50">
+
+        <h1 class="text-3xl font-bold mb-2 text-center text-gradient">AS / ASN Lookup</h1>
+        <p class="text-center text-gray-400 text-sm mb-8">Peering graph, prefixes &amp; IXP connections for any
+            Autonomous System</p>
+
+        <!-- Search -->
+        <div class="flex flex-col sm:flex-row gap-3 mb-6 max-w-2xl mx-auto">
+            <input type="text" id="asn-input" placeholder="Enter ASN (e.g. 15169 or AS3320)"
+                class="flex-grow 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 placeholder-gray-600">
+            <button id="lookup-button"
+                class="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">
+                Lookup
+            </button>
+        </div>
+
+        <!-- Error -->
+        <div id="error-box"
+            class="hidden max-w-2xl mx-auto mb-6 p-4 bg-red-900/30 border border-red-500/40 text-red-300 rounded-lg text-sm">
+        </div>
+
+        <!-- Loading -->
+        <div id="loading-section" class="hidden flex flex-col items-center gap-4 py-16">
+            <div class="loader" style="width:40px;height:40px;border-width:5px;"></div>
+            <p class="text-gray-400 text-sm" id="loading-msg">Querying RIPE Stat &amp; PeeringDB…</p>
+            <!-- Shown after 3s for slow lookups -->
+            <div id="loading-hint" class="hidden mt-2 max-w-sm text-center">
+                <p class="text-xs text-amber-400/80 bg-amber-400/10 border border-amber-400/20 rounded-lg px-4 py-2">
+                    ⏳ Large ASes (like Cloudflare, Google, Tier-1 carriers) can take up to 15 seconds on the first
+                    lookup — subsequent lookups are cached for 7 days.
+                </p>
+            </div>
+        </div>
+
+        <!-- Results -->
+        <div id="results-section" class="hidden fade-in">
+
+            <!-- AS Info Header -->
+            <div class="glass-card rounded-xl p-6 mb-6">
+                <div class="flex flex-col md:flex-row md:items-center gap-4">
+                    <div class="flex-1">
+                        <div class="flex items-center gap-3 mb-1">
+                            <span id="res-asn" class="font-mono text-2xl font-bold text-purple-400"></span>
+                            <span id="res-announced-badge"
+                                class="hidden text-xs px-2 py-0.5 bg-green-500/20 border border-green-500/40 text-green-400 rounded-full">Announced</span>
+                            <span id="res-type-badge"
+                                class="text-xs px-2 py-0.5 bg-blue-500/20 border border-blue-500/40 text-blue-300 rounded-full"></span>
+                        </div>
+                        <h2 id="res-name" class="text-xl font-semibold text-white mb-1"></h2>
+                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-400 mb-2">
+                            <span id="res-policy-container" class="hidden">Peering Policy: <span id="res-policy"
+                                    class="text-gray-200"></span></span>
+                            <span id="res-website-container" class="hidden">Website: <a id="res-website" href="#"
+                                    target="_blank"
+                                    class="text-purple-400 hover:text-purple-300 transition-colors"></a></span>
+                        </div>
+
+                        <!-- Rich Info Grid -->
+                        <div id="res-rich-info"
+                            class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-4 pt-4 border-t border-gray-700/50 hidden">
+                            <div id="res-info-type-container" class="hidden">
+                                <div class="text-xs text-gray-500 uppercase tracking-widest">Type</div>
+                                <div id="res-info-type" class="text-sm text-gray-200 capitalize mt-0.5"></div>
+                            </div>
+                            <div id="res-info-scope-container" class="hidden">
+                                <div class="text-xs text-gray-500 uppercase tracking-widest">Scope</div>
+                                <div id="res-info-scope" class="text-sm text-gray-200 capitalize mt-0.5"></div>
+                            </div>
+                            <div id="res-info-traffic-container" class="hidden">
+                                <div class="text-xs text-gray-500 uppercase tracking-widest">Traffic</div>
+                                <div id="res-info-traffic" class="text-sm text-gray-200 capitalize mt-0.5"></div>
+                            </div>
+                            <div id="res-info-ratio-container" class="hidden">
+                                <div class="text-xs text-gray-500 uppercase tracking-widest">Ratio</div>
+                                <div id="res-info-ratio" class="text-sm text-gray-200 capitalize mt-0.5"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 text-center">
+                        <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3">
+                            <div id="res-upstream-count" class="text-xl font-bold text-blue-400">—</div>
+                            <div class="text-xs text-gray-400 mt-0.5">Upstreams</div>
+                        </div>
+                        <div class="bg-green-500/10 border border-green-500/20 rounded-lg p-3">
+                            <div id="res-downstream-count" class="text-xl font-bold text-green-400">—</div>
+                            <div class="text-xs text-gray-400 mt-0.5">Downstreams</div>
+                        </div>
+                        <div
+                            class="bg-purple-500/10 border border-purple-500/20 rounded-lg p-3 col-span-2 sm:col-span-1">
+                            <div id="res-prefix-count" class="text-xl font-bold text-purple-400">—</div>
+                            <div class="text-xs text-gray-400 mt-0.5">Prefixes</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Network Map -->
+            <div class="glass-card rounded-xl p-6 mb-6">
+                <div class="flex items-center gap-3 mb-4">
+                    <h3 class="text-lg font-bold text-purple-300">Network Map</h3>
+                    <div class="flex gap-3 text-xs text-gray-400">
+                        <span class="flex items-center gap-1"><span
+                                class="inline-block w-3 h-3 rounded-full bg-gray-500"></span>Tier-1 / Transit</span>
+                        <span class="flex items-center gap-1"><span
+                                class="inline-block w-3 h-3 rounded-full bg-blue-500"></span>Upstream</span>
+                        <span class="flex items-center gap-1"><span
+                                class="inline-block w-3 h-3 rounded-full bg-purple-500"></span>This AS</span>
+                        <span class="flex items-center gap-1"><span
+                                class="inline-block w-3 h-3 rounded-full bg-green-500"></span>Downstream</span>
+                    </div>
+                    <span class="ml-auto text-xs text-gray-500">Scroll to zoom · Drag to pan · Click node to open</span>
+                </div>
+                <div id="graph-container">
+                    <svg id="graph-svg"></svg>
+                    <div id="graph-tooltip"></div>
+                </div>
+            </div>
+
+            <!-- Prefixes + IXPs side by side -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+
+                <!-- Prefixes -->
+                <div class="glass-card rounded-xl p-5">
+                    <div class="flex items-center justify-between mb-3">
+                        <h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest">Announced Prefixes</h3>
+                        <button id="prefix-toggle"
+                            class="text-xs text-purple-400 hover:text-purple-300 transition-colors">Show all</button>
+                    </div>
+                    <div id="prefix-list" class="max-h-48 overflow-y-auto"></div>
+                    <p id="prefix-empty" class="hidden text-sm text-gray-500 italic">No prefix data available.</p>
+                </div>
+
+                <!-- IXPs -->
+                <div class="glass-card rounded-xl p-5">
+                    <h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-3">IXP Presence <span
+                            class="text-xs font-normal text-gray-500">(via PeeringDB)</span></h3>
+                    <div id="ixp-list" class="space-y-1 text-sm max-h-48 overflow-y-auto">
+                        <p id="ixp-empty" class="text-gray-500 italic text-sm">Not listed on PeeringDB.</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Direct Peers Table -->
+            <div class="glass-card rounded-xl p-5">
+                <h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-3">Direct Neighbours <span
+                        class="text-xs font-normal text-gray-500">(Level 2 · via RIPE Stat)</span></h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <!-- Upstreams -->
+                    <div>
+                        <h4 class="text-xs font-semibold text-blue-400 mb-2 flex items-center gap-1">
+                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd"
+                                    d="M10 17a.75.75 0 01-.75-.75V5.56l-2.47 2.47a.75.75 0 01-1.06-1.06l3.75-3.75a.75.75 0 011.06 0l3.75 3.75a.75.75 0 11-1.06 1.06L10.75 5.56v10.69A.75.75 0 0110 17z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Upstreams (Transit Providers)
+                        </h4>
+                        <div id="upstream-table" class="space-y-1 text-xs font-mono max-h-52 overflow-y-auto"></div>
+                    </div>
+                    <!-- Downstreams -->
+                    <div>
+                        <h4 class="text-xs font-semibold text-green-400 mb-2 flex items-center gap-1">
+                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd"
+                                    d="M10 3a.75.75 0 01.75.75v10.69l2.47-2.47a.75.75 0 111.06 1.06l-3.75 3.75a.75.75 0 01-1.06 0l-3.75-3.75a.75.75 0 111.06-1.06L9.25 14.44V3.75A.75.75 0 0110 3z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Downstreams (Customers)
+                        </h4>
+                        <div id="downstream-table" class="space-y-1 text-xs font-mono max-h-52 overflow-y-auto"></div>
+                    </div>
+                </div>
+            </div>
+
+        </div><!-- /results -->
+
+        <footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
+            <p>Data: <a href="https://stat.ripe.net" target="_blank"
+                    class="text-purple-400 hover:text-purple-300 transition-colors">RIPE Stat</a> &amp; <a
+                    href="https://www.peeringdb.com" target="_blank"
+                    class="text-purple-400 hover:text-purple-300 transition-colors">PeeringDB</a> · Cache: 7 days</p>
+            <p class="mt-1">&copy; 2025 <a href="https://mrunk.de"
+                    class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
+        </footer>
+
+    </div>
+
+    <script src="asn-lookup.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,399 @@
+// frontend/app/asn-lookup.js
+'use strict';
+
+const API_BASE = '/api';
+
+// ─── State ────────────────────────────────────────────────────────────────────
+let currentData = null;
+let showAllPrefixes = false;
+
+// ─── DOM Refs ─────────────────────────────────────────────────────────────────
+const asnInput = document.getElementById('asn-input');
+const lookupButton = document.getElementById('lookup-button');
+const errorBox = document.getElementById('error-box');
+const loadingSection = document.getElementById('loading-section');
+const loadingMsg = document.getElementById('loading-msg');
+const resultsSection = document.getElementById('results-section');
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function showError(msg) {
+    errorBox.textContent = msg;
+    errorBox.classList.remove('hidden');
+    loadingSection.classList.add('hidden');
+    resultsSection.classList.add('hidden');
+    if (window._loadingHintTimer) clearTimeout(window._loadingHintTimer);
+}
+function hideError() { errorBox.classList.add('hidden'); }
+
+function setLoading(msg = 'Querying RIPE Stat & PeeringDB…') {
+    hideError();
+    loadingMsg.textContent = msg;
+    loadingSection.classList.remove('hidden');
+    resultsSection.classList.add('hidden');
+
+    // After 3s show a hint that large ASes can be slow
+    if (window._loadingHintTimer) clearTimeout(window._loadingHintTimer);
+    window._loadingHintTimer = setTimeout(() => {
+        const hint = document.getElementById('loading-hint');
+        if (hint) hint.classList.remove('hidden');
+    }, 3000);
+}
+
+function updateUrlParam(asn) {
+    const url = new URL(window.location);
+    url.searchParams.set('asn', asn);
+    window.history.pushState({}, '', url);
+}
+
+// ─── Main Lookup ──────────────────────────────────────────────────────────────
+async function doLookup(rawAsn) {
+    const asn = String(rawAsn || '').trim().toUpperCase().replace(/^AS/, '');
+    if (!asn || isNaN(Number(asn))) {
+        showError('Please enter a valid ASN (e.g. 15169 or AS3320).');
+        return;
+    }
+
+    setLoading('Querying RIPE Stat & PeeringDB…');
+    updateUrlParam(asn);
+
+    try {
+        const res = await fetch(`${API_BASE}/asn-lookup?asn=${encodeURIComponent(asn)}`);
+        const data = await res.json();
+
+        if (!res.ok || !data.success) {
+            showError(data.error || `Request failed (HTTP ${res.status})`);
+            return;
+        }
+
+        currentData = data;
+        renderResults(data);
+
+    } catch (err) {
+        showError(`Network error: ${err.message}`);
+    }
+}
+
+// ─── Render ───────────────────────────────────────────────────────────────────
+function renderResults(data) {
+    // Show results FIRST so the graph container has real dimensions (clientWidth > 0)
+    loadingSection.classList.add('hidden');
+    resultsSection.classList.remove('hidden');
+    // Reset loading hint for next lookup
+    if (window._loadingHintTimer) clearTimeout(window._loadingHintTimer);
+    const hint = document.getElementById('loading-hint');
+    if (hint) hint.classList.add('hidden');
+
+    // Header
+    document.getElementById('res-asn').textContent = `AS${data.asn}`;
+    document.getElementById('res-name').textContent = data.name || 'Unknown';
+
+    const announcedBadge = document.getElementById('res-announced-badge');
+    if (announcedBadge) {
+        if (data.announced) announcedBadge.classList.remove('hidden');
+        else announcedBadge.classList.add('hidden');
+    }
+
+    const typeBadge = document.getElementById('res-type-badge');
+    if (typeBadge) {
+        typeBadge.textContent = data.type || '';
+        typeBadge.classList.toggle('hidden', !data.type);
+    }
+
+    const peeringPolicy = data.peeringdb?.peeringPolicy;
+    const policyContainer = document.getElementById('res-policy-container');
+    const policyEl = document.getElementById('res-policy');
+    if (policyContainer && policyEl) {
+        if (peeringPolicy) {
+            policyEl.textContent = peeringPolicy;
+            policyContainer.classList.remove('hidden');
+        } else {
+            policyContainer.classList.add('hidden');
+        }
+    }
+
+    const website = data.peeringdb?.website;
+    const websiteContainer = document.getElementById('res-website-container');
+    const websiteEl = document.getElementById('res-website');
+    if (websiteContainer && websiteEl) {
+        if (website) {
+            websiteEl.href = website;
+            websiteEl.textContent = website.replace(/^https?:\/\//, '').replace(/\/$/, '');
+            websiteContainer.classList.remove('hidden');
+        } else {
+            websiteContainer.classList.add('hidden');
+        }
+    }
+
+    // Rich Info Grid
+    const richInfo = document.getElementById('res-rich-info');
+    let hasRichInfo = false;
+
+    const fields = [
+        { id: 'type', value: data.peeringdb?.infoType },
+        { id: 'scope', value: data.peeringdb?.infoScope },
+        { id: 'traffic', value: data.peeringdb?.infoTraffic },
+        { id: 'ratio', value: data.peeringdb?.infoRatio }
+    ];
+
+    fields.forEach(f => {
+        const container = document.getElementById(`res-info-${f.id}-container`);
+        const el = document.getElementById(`res-info-${f.id}`);
+        if (container && el) {
+            if (f.value) {
+                el.textContent = f.value;
+                container.classList.remove('hidden');
+                hasRichInfo = true;
+            } else {
+                container.classList.add('hidden');
+            }
+        }
+    });
+
+    if (richInfo) {
+        if (hasRichInfo) richInfo.classList.remove('hidden');
+        else richInfo.classList.add('hidden');
+    }
+
+    document.getElementById('res-upstream-count').textContent = data.graph?.level2?.upstreams?.length ?? '?';
+    document.getElementById('res-downstream-count').textContent = data.graph?.level2?.downstreams?.length ?? '?';
+    document.getElementById('res-prefix-count').textContent = data.prefixes?.length ?? '?';
+
+    // Prefixes + IXPs (before graph — these are cheap)
+    renderPrefixes(data.prefixes);
+    renderIxps(data.peeringdb?.ixps);
+    renderNeighbourTable('upstream-table', data.graph?.level2?.upstreams ?? [], 'blue');
+    renderNeighbourTable('downstream-table', data.graph?.level2?.downstreams ?? [], 'green');
+
+    // Graph LAST — needs the container to be visible for clientWidth
+    if (data.graph) renderGraph(data.graph);
+}
+
+// ─── Prefix List ─────────────────────────────────────────────────────────────
+function renderPrefixes(prefixes) {
+    const list = document.getElementById('prefix-list');
+    const empty = document.getElementById('prefix-empty');
+    const toggle = document.getElementById('prefix-toggle');
+
+    if (!prefixes || prefixes.length === 0) {
+        list?.classList.add('hidden');
+        empty?.classList.remove('hidden');
+        toggle?.classList.add('hidden');
+        return;
+    }
+    empty?.classList.add('hidden');
+    toggle?.classList.remove('hidden');
+
+    const toShow = showAllPrefixes ? prefixes : prefixes.slice(0, 20);
+    if (list) list.innerHTML = toShow.map(p => `<span class="prefix-tag">${p}</span>`).join('');
+    if (toggle) toggle.textContent = showAllPrefixes ? 'Show less' : `Show all (${prefixes.length})`;
+}
+
+document.getElementById('prefix-toggle').addEventListener('click', () => {
+    showAllPrefixes = !showAllPrefixes;
+    if (currentData) renderPrefixes(currentData.prefixes);
+});
+
+// ─── IXP List ─────────────────────────────────────────────────────────────────
+function renderIxps(ixps) {
+    const list = document.getElementById('ixp-list');
+    const empty = document.getElementById('ixp-empty');
+
+    if (!ixps || ixps.length === 0) {
+        if (list) list.innerHTML = '';
+        empty?.classList.remove('hidden');
+        return;
+    }
+    empty?.classList.add('hidden');
+    if (list) {
+        list.innerHTML = ixps.map(ix => `
+        <div class="ixp-row py-1.5 flex items-center justify-between gap-2 text-sm">
+            <span class="text-gray-200 truncate">${ix.name}</span>
+            <span class="text-xs text-gray-500 shrink-0">${ix.speed >= 1000 ? `${ix.speed / 1000}G` : `${ix.speed}M`}</span>
+        </div>
+        `).join('');
+    }
+}
+
+// ─── Neighbour Table ──────────────────────────────────────────────────────────
+function renderNeighbourTable(elId, nodes, colour) {
+    const el = document.getElementById(elId);
+    if (!nodes || nodes.length === 0) {
+        el.innerHTML = `<p class="text-gray-500 italic">None reported.</p>`;
+        return;
+    }
+    const colClass = colour === 'blue' ? 'text-blue-400' : 'text-green-400';
+    el.innerHTML = nodes.map(n => `
+        <div class="flex items-center gap-2 py-0.5 hover:bg-white/5 rounded px-1 cursor-pointer group"
+             onclick="window.location.href='/asn?asn=${n.asn}'">
+            <span class="${colClass} font-bold w-14 shrink-0">AS${n.asn}</span>
+            <span class="text-gray-300 truncate flex-1 group-hover:text-white">${n.name || '—'}</span>
+            <span class="text-gray-600 shrink-0">${n.power ? `pwr:${n.power}` : ''}</span>
+        </div>
+    `).join('');
+}
+
+// ─── D3 Network Graph ─────────────────────────────────────────────────────────
+function renderGraph(graph) {
+    const container = document.getElementById('graph-container');
+    const svg = d3.select('#graph-svg');
+    svg.selectAll('*').remove();
+
+    const W = container.clientWidth;
+    const H = container.clientHeight;
+
+    // ── Build nodes & links ───────────────────────────────────────────────────
+    const nodeMap = new Map();
+
+    function addNode(asn, name, role) {
+        const key = String(asn);
+        if (!nodeMap.has(key)) nodeMap.set(key, { id: key, asn, name: name || `AS${asn}`, role });
+    }
+
+    addNode(graph.center.asn, graph.center.name, 'center');
+
+    // Limit graph nodes to top 15 to prevent Physics Engine crash & unreadable hairball
+    const vizUpstreams = graph.level2.upstreams.slice(0, 15);
+    const vizDownstreams = graph.level2.downstreams.slice(0, 15);
+
+    vizUpstreams.forEach(n => addNode(n.asn, n.name, 'upstream'));
+    vizDownstreams.forEach(n => addNode(n.asn, n.name, 'downstream'));
+    graph.level3.forEach(d => {
+        d.upstreams.forEach(n => addNode(n.asn, n.name, 'tier1'));
+    });
+
+    const nodes = Array.from(nodeMap.values());
+
+    const links = [];
+    const centerId = String(graph.center.asn);
+
+    vizUpstreams.forEach(n => {
+        links.push({ source: String(n.asn), target: centerId, type: 'upstream', power: n.power || 1 });
+    });
+    vizDownstreams.forEach(n => {
+        links.push({ source: centerId, target: String(n.asn), type: 'downstream', power: n.power || 1 });
+    });
+    graph.level3.forEach(d => {
+        d.upstreams.forEach(n => {
+            links.push({ source: String(n.asn), target: String(d.parentAsn), type: 'tier1', power: n.power || 1 });
+        });
+    });
+
+    // Remove duplicate links
+    const uniqueLinks = Array.from(
+        new Map(links.map(l => [`${l.source}-${l.target}`, l])).values()
+    );
+
+    // ── Layer X positions (fixed horizontal layout) ────────────────────────
+    const layerX = { tier1: W * 0.08, upstream: W * 0.3, center: W * 0.55, downstream: W * 0.8 };
+
+    nodes.forEach(n => {
+        n.fx = layerX[n.role] ?? W / 2;
+    });
+
+    // ── Power → stroke width ──────────────────────────────────────────────
+    const maxPower = Math.max(...uniqueLinks.map(l => l.power), 1);
+    const strokeScale = d3.scaleLinear().domain([0, maxPower]).range([0.5, 4]);
+
+    // ── Node size ─────────────────────────────────────────────────────────
+    const nodeRadius = { center: 20, upstream: 11, downstream: 11, tier1: 8 };
+
+    // ── Simulation ────────────────────────────────────────────────────────
+    const sim = d3.forceSimulation(nodes)
+        .force('link', d3.forceLink(uniqueLinks).id(d => d.id).distance(d => {
+            if (d.type === 'tier1') return 90;
+            if (d.type === 'upstream') return 130;
+            return 110;
+        }).strength(0.6))
+        .force('charge', d3.forceManyBody().strength(-220))
+        .force('y', d3.forceY(H / 2).strength(0.04))
+        .force('collide', d3.forceCollide().radius(d => nodeRadius[d.role] + 14))
+        .alphaDecay(0.025);
+
+    // ── Zoom/Pan ──────────────────────────────────────────────────────────
+    const g = svg.append('g');
+    svg.call(d3.zoom().scaleExtent([0.3, 3]).on('zoom', evt => g.attr('transform', evt.transform)));
+
+    // ── Draw links ────────────────────────────────────────────────────────
+    const link = g.append('g').selectAll('line')
+        .data(uniqueLinks).join('line')
+        .attr('class', d => `link link-${d.type}`)
+        .attr('stroke-width', d => strokeScale(d.power));
+
+    // ── Draw nodes ────────────────────────────────────────────────────────
+    const tooltip = document.getElementById('graph-tooltip');
+
+    const node = g.append('g').selectAll('g')
+        .data(nodes).join('g')
+        .attr('class', d => `node node-${d.role}`)
+        .style('cursor', 'pointer')
+        .on('click', (_, d) => {
+            if (d.role !== 'center') window.location.href = `/asn?asn=${d.asn}`;
+        })
+        .on('mouseenter', (evt, d) => {
+            tooltip.style.opacity = '1';
+            tooltip.innerHTML = `
+                <strong class="text-purple-300">AS${d.asn}</strong><br>
+                <span class="text-gray-300">${d.name}</span><br>
+                <span class="text-gray-500 text-xs capitalize">${d.role === 'tier1' ? 'Tier-1 / Transit' : d.role}</span>
+            `;
+        })
+        .on('mousemove', (evt) => {
+            const rect = container.getBoundingClientRect();
+            let x = evt.clientX - rect.left + 14;
+            let y = evt.clientY - rect.top - 10;
+            if (x + 230 > W) x = x - 244;
+            tooltip.style.left = x + 'px';
+            tooltip.style.top = y + 'px';
+        })
+        .on('mouseleave', () => { tooltip.style.opacity = '0'; })
+        .call(d3.drag()
+            .on('start', (evt, d) => { if (!evt.active) sim.alphaTarget(0.3).restart(); d.fy = d.y; })
+            .on('drag', (evt, d) => { d.fy = evt.y; })
+            .on('end', (evt, d) => { if (!evt.active) sim.alphaTarget(0); d.fy = null; })
+        );
+
+    node.append('circle').attr('r', d => nodeRadius[d.role]);
+
+    // Label: 2 lines (ASN + name truncated)
+    node.append('text')
+        .attr('dy', d => nodeRadius[d.role] + 13)
+        .attr('font-size', d => d.role === 'center' ? 12 : 9)
+        .attr('fill', '#e5e7eb')
+        .text(d => `AS${d.asn}`);
+
+    // Name label for ALL roles (tier1 gets shorter truncation)
+    node.append('text')
+        .attr('dy', d => nodeRadius[d.role] + 23)
+        .attr('font-size', d => d.role === 'tier1' ? 7 : 8)
+        .attr('fill', d => d.role === 'tier1' ? '#6b7280' : '#9ca3af')
+        .text(d => {
+            if (!d.name) return '';
+            const max = d.role === 'center' ? 22 : d.role === 'tier1' ? 12 : 16;
+            return d.name.length > max ? d.name.slice(0, max) + '…' : d.name;
+        });
+
+    // ── Tick ──────────────────────────────────────────────────────────────
+    sim.on('tick', () => {
+        // Clamp Y so nodes don't fly off
+        nodes.forEach(n => { n.y = Math.max(30, Math.min(H - 30, n.y)); });
+
+        link
+            .attr('x1', d => d.source.x)
+            .attr('y1', d => d.source.y)
+            .attr('x2', d => d.target.x)
+            .attr('y2', d => d.target.y);
+
+        node.attr('transform', d => `translate(${d.x},${d.y})`);
+    });
+}
+
+// ─── Initialise ───────────────────────────────────────────────────────────────
+lookupButton.addEventListener('click', () => doLookup(asnInput.value));
+asnInput.addEventListener('keypress', e => { if (e.key === 'Enter') doLookup(asnInput.value); });
+
+// Auto-lookup from URL
+const urlParam = new URLSearchParams(window.location.search).get('asn');
+if (urlParam) {
+    asnInput.value = urlParam;
+    doLookup(urlParam);
+}
@@ -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,65 +9,200 @@
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Eigene Styles -->
    <style>
-        /* Einfacher Lade-Spinner */
+        /* Einfacher Lade-Spinner (Tailwind animiert) */
        .loader {
-            border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
-            border-left-color: #a855f7; /* Lila */
+            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); }
+            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;
+        }
+
        /* Ergebnis-Pre-Formatierung */
        .result-pre {
            white-space: pre-wrap;
            word-break: break-all;
-            font-family: monospace;
-            background-color: #1f2937; /* Dunkelgrau */
-            color: #d1d5db; /* Hellgrau */
+            font-family: 'Courier New', Courier, monospace;
+            background-color: rgba(0, 0, 0, 0.3);
+            color: #e5e7eb;
            padding: 1rem;
-            border-radius: 0.375rem; /* rounded-md */
+            border-radius: 0.375rem;
            max-height: 400px;
            overflow-y: auto;
-            font-size: 0.875rem; /* text-sm */
+            font-size: 0.875rem;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
        }
+
+        /* Scrollbar Styling */
+        ::-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;
+        }
+
        /* Navigations-Styling */
-        nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
-        nav a { color: #c4b5fd; text-decoration: none; white-space: nowrap; }
-        nav a:hover { color: #a78bfa; text-decoration: underline; }
-        header { background-color: #374151; padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
-        @media (min-width: 768px) { header { flex-direction: row; justify-content: space-between; } }
-        header h1 { font-size: 1.5rem; font-weight: bold; color: #e5e7eb; }
-        .hidden { display: none; }
+        nav ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        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);
+        }
+
+        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);
+        }
+
+        nav a.active-link {
+            background: rgba(168, 85, 247, 0.3);
+            color: #fff;
+            border-color: #a855f7;
+        }
+
+        header {
+            background: rgba(31, 41, 55, 0.4);
+            backdrop-filter: blur(10px);
+            padding: 1.5rem;
+            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);
+        }
+
+        @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;
+        }
    </style>
 </head>
-<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">

-    <header>
-        <h1>uTools Network Suite</h1>
+<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="dns-lookup.html">DNS Lookup</a></li>
-                <li><a href="whois-lookup.html">WHOIS Lookup</a></li>
+                <li><a href="/">IP Info &amp; Tools</a></li>
+                <li><a href="/subnet">Subnetz Rechner</a></li>
+                <li><a href="/dns" class="active-link">DNS Lookup</a></li>
+                <li><a href="/whois">WHOIS Lookup</a></li>
+                <li><a href="/mac">MAC Lookup</a></li>
+                <li><a href="/asn">ASN Lookup</a></li>
            </ul>
        </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">

-        <h1 class="text-3xl font-bold mb-6 text-purple-400 text-center">DNS Lookup</h1>
+        <h1 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">DNS Lookup</h1>

        <!-- Bereich für DNS Lookup -->
-        <div class="mt-8 p-4 bg-gray-700 rounded">
-            <div class="flex flex-col sm:flex-row gap-2 mb-4">
+        <div class="mt-8 p-6 glass-card rounded-xl">
+            <div class="flex flex-col sm:flex-row gap-3 mb-6">
                <input type="text" id="dns-domain-input" placeholder="Enter domain name (e.g., google.com)"
-                       class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
-                <select id="dns-type-select" class="px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                    class="flex-grow 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 placeholder-gray-600">
+                <select id="dns-type-select"
+                    class="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 cursor-pointer">
                    <option value="ANY">ANY</option>
                    <option value="A">A</option>
                    <option value="AAAA">AAAA</option>
@@ -79,30 +215,38 @@
                    <option value="PTR">PTR (Reverse)</option>
                </select>
                <button id="dns-lookup-button"
-                        class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
+                    class="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">
                    Lookup DNS
                </button>
            </div>
-            <div id="dns-lookup-error" class="text-red-400 mb-4 hidden"></div>
-            <div id="dns-lookup-results-section" class="hidden mt-4 border-t border-gray-600 pt-4">
-                <h3 class="text-lg font-semibold text-purple-300 mb-2">DNS Results for: <span id="dns-lookup-query" class="font-mono text-purple-400"></span></h3>
-                <div id="dns-lookup-loader" class="loader hidden mb-2"></div>
-                <pre id="dns-lookup-output" class="result-pre"></pre> <!-- Ergebnisbereich -->
+            <div id="dns-lookup-error"
+                class="text-red-400 mb-4 hidden p-3 bg-red-900/20 border border-red-500/30 rounded"></div>
+            <div id="dns-lookup-results-section" class="hidden mt-6 border-t border-gray-700/50 pt-6 fade-in">
+                <h3 class="text-lg font-semibold text-purple-300 mb-4 flex items-center gap-2">
+                    <div class="w-1.5 h-6 bg-purple-500 rounded-full"></div>
+                    DNS Results for: <span id="dns-lookup-query" class="font-mono text-purple-400 ml-1"></span>
+                </h3>
+                <div id="dns-lookup-loader" class="loader hidden mb-4"></div>
+                <pre id="dns-lookup-output" class="result-pre custom-scrollbar"></pre> <!-- Ergebnisbereich -->
            </div>
        </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>

-         <!-- Footer für Version -->
-         <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>
-         </footer>
+        <!-- Footer für Version -->
+        <footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
+            <p>&copy; 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>

    </div>

    <!-- Eigene JS-Logik für diese Seite -->
    <script src="dns-lookup.js"></script>
 </body>
+
 </html>
@@ -44,6 +44,11 @@ document.addEventListener('DOMContentLoaded', () => {
     * @param {function} displayFn - Funktion zur Formatierung und Anzeige der Daten im outputElement.
     */
    async function fetchAndDisplay(endpoint, params, resultsSection, loaderElement, errorElement, queryElement, outputElement, displayFn) {
+        // Reset animation
+        resultsSection.classList.remove('fade-in');
+        void resultsSection.offsetWidth; // Trigger reflow
+        resultsSection.classList.add('fade-in');
+
        resultsSection.classList.remove('hidden');
        loaderElement.classList.remove('hidden');
        errorElement.classList.add('hidden');
@@ -91,6 +96,35 @@ document.addEventListener('DOMContentLoaded', () => {
        }
    }

+    // --- URL Parameter Functions ---
+
+    /**
+     * Updates the URL with DNS lookup parameters
+     * @param {string} domain - The domain name
+     * @param {string} type - The DNS record type
+     */
+    function updateUrlParams(domain, type) {
+        const url = new URL(window.location);
+        url.searchParams.set('domain', domain);
+        url.searchParams.set('type', type);
+        window.history.pushState({}, '', url);
+    }
+
+    /**
+     * Reads URL parameters and returns domain and type if present
+     * @returns {object|null} Object with domain and type, or null if not present
+     */
+    function getUrlParams() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const domain = urlParams.get('domain');
+        const type = urlParams.get('type');
+
+        if (domain && type) {
+            return { domain, type };
+        }
+        return null;
+    }
+
    // --- DNS Lookup Specific Functions ---
    function displayDnsResults(data, outputEl) {
        if (!data.records || Object.keys(data.records).length === 0) {
@@ -109,6 +143,10 @@ document.addEventListener('DOMContentLoaded', () => {
            dnsLookupErrorEl.classList.remove('hidden');
            return;
        }
+
+        // Update URL with parameters
+        updateUrlParams(domain, type);
+
        fetchAndDisplay(
            '/dns-lookup',
            { domain, type },
@@ -121,6 +159,21 @@ document.addEventListener('DOMContentLoaded', () => {
        );
    }

+    /**
+     * Executes DNS lookup from URL parameters if they exist
+     */
+    function executeLookupFromUrl() {
+        const params = getUrlParams();
+        if (params) {
+            // Populate the input fields
+            dnsDomainInput.value = params.domain;
+            dnsTypeSelect.value = params.type;
+
+            // Trigger the lookup
+            handleDnsLookupClick();
+        }
+    }
+
    // --- Initial Load & Event Listeners ---
    fetchVersionInfo(); // Lade Versionsinfo für Footer

@@ -129,4 +182,7 @@ document.addEventListener('DOMContentLoaded', () => {
        if (event.key === 'Enter') handleDnsLookupClick();
    });

+    // Execute lookup from URL parameters if present
+    executeLookupFromUrl();
+
 }); // End DOMContentLoaded
@@ -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,244 +9,562 @@
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-          crossorigin=""/>
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <!-- Eigene Styles -->
    <style>
        /* Container für Karten müssen eine Höhe haben */
-        #map { height: 300px; }
-        #lookup-map { height: 250px; } /* Höhe für Lookup-Karte */
+        #map {
+            height: 300px;
+        }
+
+        #lookup-map {
+            height: 250px;
+        }
+
+        /* Höhe für Lookup-Karte */

        /* Einfacher Lade-Spinner (Tailwind animiert) */
        .loader {
-            border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
-            border-left-color: #a855f7; /* Lila */
+            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); }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        /* Glassmorphism Utilities */
+        .glass-panel {
+            background: rgba(17, 24, 39, 0.7);
+            /* gray-900 mit Opacity */
+            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);
+            /* gray-800 mit Opacity */
+            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;
        }

        /* Basis für Glitch-Effekt (Beispiel: Text-Schatten) */
        .glitch-text:hover {
            text-shadow:
-                1px 1px 0px rgba(168, 85, 247, 0.7), /* Lila */
-                -1px -1px 0px rgba(76, 29, 149, 0.7); /* Dunkleres Lila */
+                2px 2px 0px rgba(168, 85, 247, 0.4),
+                -2px -2px 0px rgba(236, 72, 153, 0.4);
        }
+
        /* Klickbarer IP-Cursor und Link-Styling */
        #ip-address-link {
-             cursor: pointer;
-             text-decoration: none; /* Standard-Link-Unterstreichung entfernen */
+            cursor: pointer;
+            text-decoration: none;
+            position: relative;
+            display: inline-block;
+            transition: color 0.3s ease;
        }
-        #ip-address-link:hover {
-            text-decoration: underline; /* Unterstreichung beim Hover */
+
+        #ip-address-link::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            transform: scaleX(0);
+            height: 2px;
+            bottom: 0;
+            left: 0;
+            background-color: #d8b4fe;
+            transform-origin: bottom right;
+            transition: transform 0.25s ease-out;
+        }
+
+        #ip-address-link:hover::after {
+            transform: scaleX(1);
+            transform-origin: bottom left;
        }

        /* Traceroute Output Formatierung */
-        #traceroute-output pre, .result-pre { /* Gemeinsamer Stil für <pre> */
-            white-space: pre-wrap; /* Zeilenumbruch */
-            word-break: break-all; /* Lange Zeilen umbrechen */
-            font-family: monospace;
-            background-color: #1f2937; /* Dunkelgrau */
-            color: #d1d5db; /* Hellgrau */
+        #traceroute-output pre,
+        .result-pre {
+            white-space: pre-wrap;
+            word-break: break-all;
+            font-family: 'Courier New', Courier, monospace;
+            /* Mehr Terminal-Feeling */
+            background-color: rgba(0, 0, 0, 0.3);
+            /* Transparenter */
+            color: #e5e7eb;
            padding: 1rem;
-            border-radius: 0.375rem; /* rounded-md */
+            border-radius: 0.375rem;
            max-height: 400px;
            overflow-y: auto;
-            font-size: 0.875rem; /* text-sm */
+            font-size: 0.875rem;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+        }
+
+        #traceroute-output .hop-line {
+            margin-bottom: 0.25rem;
+            padding-left: 0.5rem;
+            border-left: 2px solid transparent;
+            transition: border-left-color 0.3s;
+        }
+
+        #traceroute-output .hop-line:hover {
+            border-left-color: #a855f7;
+            background: rgba(255, 255, 255, 0.02);
+        }
+
+        #traceroute-output .hop-number {
+            display: inline-block;
+            width: 30px;
+            text-align: right;
+            margin-right: 15px;
+            color: #6b7280;
+            font-weight: bold;
+        }
+
+        #traceroute-output .hop-ip {
+            color: #60a5fa;
+            font-weight: 500;
+        }
+
+        #traceroute-output .hop-hostname {
+            color: #c084fc;
+        }
+
+        /* Helleres Lila */
+        #traceroute-output .hop-rtt {
+            color: #34d399;
+            margin-left: 8px;
+            font-size: 0.85em;
+        }
+
+        #traceroute-output .hop-timeout {
+            color: #f87171;
+        }
+
+        #traceroute-output .info-line {
+            color: #fbbf24;
+            font-style: italic;
+        }
+
+        #traceroute-output .error-line {
+            color: #f87171;
+            font-weight: bold;
+            border-left: 3px solid #f87171;
+            padding-left: 10px;
+        }
+
+        #traceroute-output .end-line {
+            color: #d8b4fe;
+            font-weight: bold;
+            margin-top: 15px;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            padding-top: 10px;
+        }
+
+        /* Scrollbar Styling */
+        ::-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;
        }
-        #traceroute-output .hop-line { margin-bottom: 0.25rem; }
-        #traceroute-output .hop-number { display: inline-block; width: 30px; text-align: right; margin-right: 10px; color: #9ca3af; } /* Grau */
-        #traceroute-output .hop-ip { color: #60a5fa; } /* Blau */
-        #traceroute-output .hop-hostname { color: #a78bfa; } /* Lila */
-        #traceroute-output .hop-rtt { color: #34d399; margin-left: 5px;} /* Grün */
-        #traceroute-output .hop-timeout { color: #f87171; } /* Rot */
-        #traceroute-output .info-line { color: #fbbf24; font-style: italic;} /* Gelb */
-        #traceroute-output .error-line { color: #f87171; font-weight: bold;} /* Rot */
-        #traceroute-output .end-line { color: #a78bfa; font-weight: bold; margin-top: 10px;} /* Lila */

        /* 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 */ }

-        /* Hilfsklasse zum Verstecken */
-        .hidden { display: none; }
+        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);
+        }

+        nav a:hover {
+            color: #fff;
+            background: rgba(168, 85, 247, 0.2);
+            /* Purple tint */
+            border-color: rgba(168, 85, 247, 0.4);
+            box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
+        }
+
+        nav a.active-link {
+            /* Optional active state */
+            background: rgba(168, 85, 247, 0.3);
+            color: #fff;
+            border-color: #a855f7;
+        }
+
+        header {
+            background: rgba(31, 41, 55, 0.4);
+            /* Sehr transparent */
+            backdrop-filter: blur(10px);
+            padding: 1.5rem;
+            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), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+
+        @media (min-width: 768px) {
+            header {
+                flex-direction: row;
+                justify-content: space-between;
+            }
+        }
+
+        /* Standard property for compatibility */
+        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;
+        }
    </style>
 </head>
-<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">

-    <header>
-        <h1>uTools Network Suite</h1> <!-- Name 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> <!-- Angepasst -->
-                <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>
-                <!-- REMOVED: MAC Lookup Link -->
+                <li><a href="/" class="active-link">IP Info &amp; Tools</a></li>
+                <li><a href="/subnet">Subnetz Rechner</a></li>
+                <li><a href="/dns">DNS Lookup</a></li>
+                <li><a href="/whois">WHOIS Lookup</a></li>
+                <li><a href="/mac">MAC Lookup</a></li>
+                <li><a href="/asn">ASN Lookup</a></li>
            </ul>
        </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">

-        <h1 class="text-3xl font-bold mb-6 text-purple-400 glitch-text text-center">IP Information</h1> <!-- Titel angepasst -->
+        <h1 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">Your Digital Footprint</h1>

        <!-- Bereich für EIGENE IP-Infos -->
-        <div id="info-section" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+        <div id="info-section" class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">

            <!-- Linke Spalte: Eigene IP, Geo, ASN, rDNS -->
-            <div class="space-y-4 p-4 bg-gray-700 rounded">
-                <h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">Your Public IP</h2>
-                <div id="ip-info" class="min-h-[50px]">
-                    <div id="ip-loader" class="loader"></div>
-                    <!-- Geändert zu <a> Tag -->
-                    <a id="ip-address-link" href="#" class="text-2xl font-mono font-bold text-purple-400 break-all hidden" title="Go to WHOIS Lookup for this IP">
-                        <span id="ip-address"></span> <!-- Span für den eigentlichen Text -->
-                    </a>
-                </div>
-
-                <h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">Geolocation</h2>
-                <div id="geo-info" class="min-h-[100px] space-y-1 text-sm">
-                    <div id="geo-loader" class="loader"></div>
-                    <div class="hidden"> <!-- Hide data until loaded -->
-                        <p><strong>Country:</strong> <span id="country">-</span></p>
-                        <p><strong>Region:</strong> <span id="region">-</span></p>
-                        <p><strong>City:</strong> <span id="city">-</span></p>
-                        <p><strong>Postal Code:</strong> <span id="postal">-</span></p>
-                        <p><strong>Coordinates:</strong> <span id="coords">-</span></p>
-                        <p><strong>Timezone:</strong> <span id="timezone">-</span></p>
-                        <p id="geo-error" class="text-red-400"></p>
+            <div class="space-y-6 fade-in" style="animation-delay: 0.1s;">
+                <!-- IP Card -->
+                <div class="glass-card rounded-lg p-5 relative overflow-hidden group">
+                    <div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-20 transition-opacity">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-purple-500" fill="none"
+                            viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+                        </svg>
+                    </div>
+                    <h2 class="text-xs font-bold text-purple-400 uppercase tracking-widest mb-2">Your Public IP</h2>
+                    <div id="ip-info" class="min-h-[40px] flex items-center">
+                        <div id="ip-loader" class="loader"></div>
+                        <a id="ip-address-link" href="#"
+                            class="text-3xl font-mono font-bold text-white tracking-tight break-all hidden hover:text-purple-300 transition-colors"
+                            title="Click for WHOIS Lookup">
+                            <span id="ip-address"></span>
+                        </a>
                    </div>
                </div>

-                <h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">ASN</h2>
-                <div id="asn-info" class="min-h-[50px] space-y-1 text-sm">
-                     <div id="asn-loader" class="loader"></div>
-                     <div class="hidden"> <!-- Hide data until loaded -->
-                        <p><strong>Number:</strong> <span id="asn-number">-</span></p>
-                        <p><strong>Organization:</strong> <span id="asn-org">-</span></p>
-                        <p id="asn-error" class="text-red-400"></p>
-                     </div>
+                <!-- Geo/ASN Combo Card -->
+                <div class="glass-card rounded-lg p-5 space-y-4">
+                    <div>
+                        <h2
+                            class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 border-b border-gray-700 pb-1">
+                            Location Details</h2>
+                        <div id="geo-info" class="min-h-[80px] space-y-1 text-sm text-gray-300">
+                            <div id="geo-loader" class="loader"></div>
+                            <div class="hidden grid grid-cols-2 gap-x-2 gap-y-1">
+                                <p><span class="text-gray-500">Country:</span> <span id="country"
+                                        class="text-gray-200 font-medium">-</span></p>
+                                <p><span class="text-gray-500">Region:</span> <span id="region"
+                                        class="text-gray-200 font-medium">-</span></p>
+                                <p><span class="text-gray-500">City:</span> <span id="city"
+                                        class="text-gray-200 font-medium">-</span></p>
+                                <p><span class="text-gray-500">Zip:</span> <span id="postal"
+                                        class="text-gray-200 font-medium">-</span></p>
+                                <p class="col-span-2"><span class="text-gray-500">Coords:</span> <span id="coords"
+                                        class="font-mono text-xs text-purple-300">-</span></p>
+                                <p class="col-span-2"><span class="text-gray-500">Time:</span> <span id="timezone"
+                                        class="text-gray-200 font-medium">-</span></p>
+                                <p id="geo-error" class="text-red-400 col-span-2 text-xs"></p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div>
+                        <h2
+                            class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 border-b border-gray-700 pb-1">
+                            Network (ASN)</h2>
+                        <div id="asn-info" class="min-h-[40px] space-y-1 text-sm text-gray-300">
+                            <div id="asn-loader" class="loader"></div>
+                            <div class="hidden">
+                                <p><span class="text-gray-500">AS Number:</span> <span id="asn-number"
+                                        class="font-mono text-purple-300">-</span></p>
+                                <p><span class="text-gray-500">Org:</span> <span id="asn-org"
+                                        class="font-medium text-white">-</span></p>
+                                <p id="asn-error" class="text-red-400 text-xs"></p>
+                            </div>
+                        </div>
+                    </div>
                </div>

-                 <h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">Reverse DNS (rDNS)</h2>
-                <div id="rdns-info" class="min-h-[50px] space-y-1 text-sm">
-                     <div id="rdns-loader" class="loader"></div>
-                     <div class="hidden"> <!-- Hide data until loaded -->
-                         <ul id="rdns-list" class="list-disc list-inside"><li>-</li></ul>
-                         <p id="rdns-error" class="text-red-400"></p>
-                     </div>
+                <!-- rDNS Card -->
+                <div class="glass-card rounded-lg p-5">
+                    <h2
+                        class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 border-b border-gray-700 pb-1">
+                        Hostname (rDNS)</h2>
+                    <div id="rdns-info" class="min-h-[30px] text-sm text-gray-300">
+                        <div id="rdns-loader" class="loader"></div>
+                        <div class="hidden">
+                            <ul id="rdns-list" class="list-none space-y-1 font-mono text-xs text-green-400">
+                                <li>-</li>
+                            </ul>
+                            <p id="rdns-error" class="text-red-400 text-xs"></p>
+                        </div>
+                    </div>
                </div>
            </div>

            <!-- Rechte Spalte: Eigene Karte -->
-            <div class="space-y-4 p-4 bg-gray-700 rounded">
-                 <h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1">Your Location Map</h2>
-                 <div id="map-container" class="bg-gray-600 rounded min-h-[300px] flex items-center justify-center relative">
-                     <div id="map-loader" class="loader absolute"></div>
-                     <div id="map" class="w-full rounded hidden"></div>
-                     <p id="map-message" class="text-gray-400 hidden absolute">Could not load map.</p>
-                 </div>
+            <div class="space-y-4 fade-in" style="animation-delay: 0.2s;">
+                <h2 class="text-lg font-semibold text-gray-200 flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-400" viewBox="0 0 20 20"
+                        fill="currentColor">
+                        <path fill-rule="evenodd"
+                            d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
+                            clip-rule="evenodd" />
+                    </svg>
+                    Location Visualization
+                </h2>
+                <div id="map-container"
+                    class="bg-gray-800/50 rounded-lg min-h-[400px] h-full flex items-center justify-center relative border border-gray-700/50 shadow-inner overflow-hidden">
+                    <div id="map-loader" class="loader absolute z-10"></div>
+                    <div id="map"
+                        class="w-full h-full rounded-lg hidden z-0 opacity-80 hover:opacity-100 transition-opacity duration-700">
+                    </div>
+                    <p id="map-message" class="text-gray-400 hidden absolute text-sm">Could not load map.</p>
+                    <div class="absolute inset-0 pointer-events-none rounded-lg ring-1 ring-inset ring-white/10"></div>
+                </div>
            </div>
        </div>

        <!-- Bereich für IP Lookup -->
-        <div class="mt-8 p-4 bg-gray-700 rounded">
-            <h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1 mb-4">IP Address Lookup</h2>
-            <div class="flex flex-col sm:flex-row gap-2 mb-4">
-                <input type="text" id="lookup-ip-input" placeholder="Enter IP address (e.g., 8.8.8.8)"
-                       class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
+        <div class="mt-8 p-6 glass-card rounded-xl">
+            <h2
+                class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500 mb-4 flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-500" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                IP Address / Domain Lookup
+            </h2>
+            <div class="flex flex-col sm:flex-row gap-3 mb-6">
+                <input type="text" id="lookup-ip-input" placeholder="Enter IP or Domain (e.g., 8.8.8.8 or google.com)"
+                    class="flex-grow 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 placeholder-gray-600">
                <button id="lookup-button"
-                        class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
-                    Lookup IP
+                    class="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">
+                    Lookup
                </button>
            </div>
-            <div id="lookup-error" class="text-red-400 mb-4 hidden"></div>
+            <div id="lookup-error" class="text-red-400 mb-4 hidden p-3 bg-red-900/20 border border-red-500/30 rounded">
+            </div>

            <!-- Ergebnisse des Lookups (initial versteckt) -->
-            <div id="lookup-results-section" class="hidden grid grid-cols-1 md:grid-cols-2 gap-6 mt-4 border-t border-gray-600 pt-4">
-                 <!-- Linke Spalte: IP, Geo, ASN, rDNS -->
-                 <div class="space-y-4">
-                    <h3 class="text-lg font-semibold text-purple-300">Lookup Result for: <span id="lookup-ip-address" class="font-mono text-purple-400"></span></h3>
-                    <div id="lookup-result-loader" class="loader hidden"></div> <!-- Loader für den gesamten Block -->
+            <div id="lookup-results-section"
+                class="hidden grid grid-cols-1 md:grid-cols-2 gap-8 mt-6 border-t border-gray-700/50 pt-6 fade-in">
+                <!-- Linke Spalte: IP, Geo, ASN, rDNS -->
+                <div class="space-y-6">
+                    <h3 class="text-lg font-semibold text-gray-200">Result for: <span id="lookup-ip-address"
+                            class="font-mono text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded"></span></h3>
+                    <div id="lookup-result-loader" class="loader hidden"></div>

-                    <div id="lookup-geo-info" class="space-y-1 text-sm">
-                        <h4 class="font-semibold text-purple-300">Geolocation</h4>
-                        <p><strong>Country:</strong> <span id="lookup-country">-</span></p>
-                        <p><strong>Region:</strong> <span id="lookup-region">-</span></p>
-                        <p><strong>City:</strong> <span id="lookup-city">-</span></p>
-                        <p><strong>Postal Code:</strong> <span id="lookup-postal">-</span></p>
-                        <p><strong>Coordinates:</strong> <span id="lookup-coords">-</span></p>
-                        <p><strong>Timezone:</strong> <span id="lookup-timezone">-</span></p>
-                        <p id="lookup-geo-error" class="text-red-400"></p>
+                    <div id="lookup-geo-info" class="space-y-1 text-sm text-gray-300">
+                        <h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2">Geolocation</h4>
+                        <div class="grid grid-cols-2 gap-x-2 gap-y-1">
+                            <p><span class="text-gray-500">Country:</span> <span id="lookup-country"
+                                    class="text-white">-</span></p>
+                            <p><span class="text-gray-500">Region:</span> <span id="lookup-region"
+                                    class="text-white">-</span></p>
+                            <p><span class="text-gray-500">City:</span> <span id="lookup-city"
+                                    class="text-white">-</span></p>
+                            <p><span class="text-gray-500">Zip:</span> <span id="lookup-postal"
+                                    class="text-white">-</span></p>
+                            <p class="col-span-2"><span class="text-gray-500">Coords:</span> <span id="lookup-coords"
+                                    class="font-mono text-purple-300">-</span></p>
+                            <p class="col-span-2"><span class="text-gray-500">Time:</span> <span id="lookup-timezone"
+                                    class="text-white">-</span></p>
+                            <p id="lookup-geo-error" class="text-red-400 col-span-2"></p>
+                        </div>
                    </div>

-                    <div id="lookup-asn-info" class="space-y-1 text-sm">
-                        <h4 class="font-semibold text-purple-300">ASN</h4>
-                        <p><strong>Number:</strong> <span id="lookup-asn-number">-</span></p>
-                        <p><strong>Organization:</strong> <span id="lookup-asn-org">-</span></p>
+                    <div id="lookup-asn-info" class="space-y-1 text-sm text-gray-300">
+                        <h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2 mt-4">ASN</h4>
+                        <p><span class="text-gray-500">Number:</span> <span id="lookup-asn-number"
+                                class="text-white font-mono">-</span></p>
+                        <p><span class="text-gray-500">Org:</span> <span id="lookup-asn-org" class="text-white">-</span>
+                        </p>
                        <p id="lookup-asn-error" class="text-red-400"></p>
                    </div>

-                    <div id="lookup-rdns-info" class="space-y-1 text-sm">
-                        <h4 class="font-semibold text-purple-300">Reverse DNS (rDNS)</h4>
-                        <ul id="lookup-rdns-list" class="list-disc list-inside"><li>-</li></ul>
+                    <div id="lookup-rdns-info" class="space-y-1 text-sm text-gray-300">
+                        <h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2 mt-4">Reverse DNS</h4>
+                        <ul id="lookup-rdns-list" class="list-none space-y-1 font-mono text-xs text-green-400">
+                            <li>-</li>
+                        </ul>
                        <p id="lookup-rdns-error" class="text-red-400"></p>
                    </div>
-                 </div>
+                </div>

-                 <!-- Rechte Spalte: Karte & Aktionen -->
-                 <div class="space-y-4">
-                    <h4 class="font-semibold text-purple-300">Location Map</h4>
-                    <div id="lookup-map-container" class="bg-gray-600 rounded min-h-[250px] flex items-center justify-center relative">
-                         <div id="lookup-map-loader" class="loader hidden absolute"></div>
-                         <div id="lookup-map" class="w-full rounded hidden"></div> <!-- Höhe via CSS -->
-                         <p id="lookup-map-message" class="text-gray-400 hidden absolute">Could not load map.</p>
-                     </div>
-                     <!-- Optional: Buttons für Ping/Trace für diese IP -->
-                     <div class="mt-4 space-x-2">
-                         <button id="lookup-ping-button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded text-sm transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed" disabled>Ping this IP</button>
-                         <button id="lookup-trace-button" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-1 px-3 rounded text-sm transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed" disabled>Trace this IP</button>
-                     </div>
-                     <!-- Bereich für Ping-Ergebnisse (Lookup) -->
-                     <div id="lookup-ping-results" class="mt-2 text-sm hidden">
-                         <h4 class="font-semibold text-purple-300">Ping Results</h4>
-                         <div id="lookup-ping-loader" class="loader hidden"></div>
-                         <pre id="lookup-ping-output" class="mt-1 whitespace-pre-wrap break-all font-mono bg-gray-900 text-gray-300 p-2 rounded text-xs"></pre>
-                         <p id="lookup-ping-error" class="text-red-400"></p>
-                     </div>
-                 </div>
+                <!-- Rechte Spalte: Karte & Aktionen -->
+                <div class="space-y-6">
+                    <h4 class="font-bold text-gray-500 uppercase text-xs tracking-wider mb-2">Location Map</h4>
+                    <div id="lookup-map-container"
+                        class="glass-panel rounded-lg min-h-[250px] flex items-center justify-center relative overflow-hidden">
+                        <div id="lookup-map-loader" class="loader hidden absolute z-10"></div>
+                        <div id="lookup-map" class="w-full rounded hidden opacity-90"></div>
+                        <p id="lookup-map-message" class="text-gray-400 hidden absolute">Could not load map.</p>
+                        <div class="absolute inset-0 pointer-events-none ring-1 ring-inset ring-white/10 rounded-lg">
+                        </div>
+                    </div>
+
+                    <!-- Action Buttons -->
+                    <div class="flex flex-wrap gap-2 pt-2">
+                        <button id="lookup-ping-button"
+                            class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-gray-600 hover:border-gray-500 shadow-md"
+                            disabled>Ping</button>
+                        <button id="lookup-trace-button"
+                            class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-gray-600 hover:border-gray-500 shadow-md"
+                            disabled>Trace</button>
+                        <button id="lookup-scan-button"
+                            class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-gray-600 hover:border-gray-500 shadow-md"
+                            disabled>Port Scan</button>
+                    </div>
+
+                    <!-- Bereich für Ping-Ergebnisse (Lookup) -->
+                    <div id="lookup-ping-results" class="mt-4 text-sm hidden fade-in">
+                        <h4 class="font-bold text-purple-400 mb-2 flex items-center gap-2">
+                            <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> Ping Results
+                        </h4>
+                        <div id="lookup-ping-loader" class="loader hidden"></div>
+                        <pre id="lookup-ping-output" class="result-pre mt-1"></pre>
+                        <p id="lookup-ping-error" class="text-red-400 mt-2"></p>
+                    </div>
+                </div>
            </div>
        </div>

        <!-- Bereich für Traceroute -->
-        <div id="traceroute-section" class="mt-8 p-4 bg-gray-700 rounded hidden">
-             <h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1 mb-4">Traceroute Results</h2>
-             <div id="traceroute-status" class="flex items-center mb-2">
-                 <div id="traceroute-loader" class="loader mr-2 hidden"></div>
-                 <span id="traceroute-message" class="text-gray-400"></span>
-             </div>
-             <div id="traceroute-output"><pre></pre></div>
+        <div id="traceroute-section" class="mt-8 p-6 glass-card rounded-xl hidden fade-in">
+            <h2 class="text-xl font-bold text-purple-300 border-b border-purple-500/30 pb-2 mb-4">Traceroute Results
+            </h2>
+            <div id="traceroute-status" class="flex items-center mb-4 text-sm">
+                <div id="traceroute-loader" class="loader mr-3 hidden"></div>
+                <span id="traceroute-message" class="text-gray-300"></span>
+            </div>
+            <div id="traceroute-output" class="rounded-lg overflow-hidden custom-scrollbar">
+                <pre class="m-0"></pre>
+            </div>
+        </div>
+
+        <!-- Bereich für Port Scan -->
+        <div id="port-scan-section" class="mt-8 p-6 glass-card rounded-xl hidden fade-in">
+            <h2 class="text-xl font-bold text-purple-300 border-b border-purple-500/30 pb-2 mb-4">Port Scan Results</h2>
+            <div id="port-scan-status" class="flex items-center mb-4 text-sm">
+                <div id="port-scan-loader" class="loader mr-3 hidden"></div>
+                <span id="port-scan-message" class="text-gray-300"></span>
+            </div>
+            <div id="port-scan-output"
+                class="text-sm font-mono bg-gray-900/50 p-4 rounded-lg border border-gray-700/50 max-h-[300px] overflow-y-auto">
+            </div>
        </div>

        <!-- Globaler Fehlerbereich -->
-        <div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
+        <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>

        <!-- Footer für Version -->
-        <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>
+        <footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
+            <p>&copy; 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>


@@ -253,9 +572,9 @@

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-            crossorigin=""></script>
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <!-- Eigene JS-Logik -->
    <script src="script.js"></script>
 </body>
+
 </html>
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MAC Vendor Lookup - uTools</title>
+    <!-- Tailwind CSS Play CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Eigene Styles -->
+    <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;
+        }
+
+        /* Ergebnis-Pre-Formatierung */
+        .result-pre {
+            white-space: pre-wrap;
+            word-break: break-all;
+            font-family: 'Courier New', Courier, monospace;
+            background-color: rgba(0, 0, 0, 0.3);
+            color: #e5e7eb;
+            padding: 1rem;
+            border-radius: 0.375rem;
+            max-height: 400px;
+            overflow-y: auto;
+            font-size: 1.25rem;
+            text-align: center;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+        }
+
+        /* Scrollbar Styling */
+        ::-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;
+        }
+
+        /* Navigations-Styling */
+        nav ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        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);
+        }
+
+        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);
+        }
+
+        nav a.active-link {
+            background: rgba(168, 85, 247, 0.3);
+            color: #fff;
+            border-color: #a855f7;
+        }
+
+        header {
+            background: rgba(31, 41, 55, 0.4);
+            backdrop-filter: blur(10px);
+            padding: 1.5rem;
+            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);
+        }
+
+        @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;
+        }
+    </style>
+</head>
+
+<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="/">IP Info &amp; Tools</a></li>
+                <li><a href="/subnet">Subnetz Rechner</a></li>
+                <li><a href="/dns">DNS Lookup</a></li>
+                <li><a href="/whois">WHOIS Lookup</a></li>
+                <li><a href="/mac" class="active-link">MAC Lookup</a></li>
+                <li><a href="/asn">ASN Lookup</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <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">
+
+        <h1 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">MAC Address Vendor Lookup</h1>
+
+        <div class="mt-8 p-6 glass-card rounded-xl">
+            <div class="flex flex-col sm:flex-row gap-3 mb-6">
+                <input type="text" id="mac-input" placeholder="Enter MAC address (e.g., 00:1A:2B:3C:4D:5E)"
+                    class="flex-grow 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 placeholder-gray-600">
+                <button id="mac-lookup-button"
+                    class="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">
+                    Find Vendor
+                </button>
+            </div>
+            <div id="mac-lookup-error"
+                class="text-red-400 mb-4 hidden p-3 bg-red-900/20 border border-red-500/30 rounded"></div>
+            <div id="mac-lookup-results-section" class="hidden mt-6 border-t border-gray-700/50 pt-6 fade-in">
+                <h3 class="text-lg font-semibold text-purple-300 mb-4 flex items-center justify-center gap-2">
+                    <div class="w-1.5 h-6 bg-purple-500 rounded-full"></div>
+                    Vendor for: <span id="mac-lookup-query" class="font-mono text-purple-400 ml-1"></span>
+                </h3>
+                <div id="mac-lookup-loader" class="loader hidden mb-4 mx-auto"></div>
+                <pre id="mac-lookup-output" class="result-pre custom-scrollbar"></pre>
+            </div>
+        </div>
+
+        <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>
+
+        <footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
+            <p>&copy; 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>
+
+    </div>
+
+    <script src="mac-lookup.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,82 @@
+// frontend/app/mac-lookup.js
+document.addEventListener('DOMContentLoaded', () => {
+    const macInput = document.getElementById('mac-input');
+    const macLookupButton = document.getElementById('mac-lookup-button');
+    const macLookupErrorEl = document.getElementById('mac-lookup-error');
+    const macLookupResultsSection = document.getElementById('mac-lookup-results-section');
+    const macLookupQueryEl = document.getElementById('mac-lookup-query');
+    const macLookupLoader = document.getElementById('mac-lookup-loader');
+    const macLookupOutputEl = document.getElementById('mac-lookup-output');
+    const commitShaEl = document.getElementById('commit-sha');
+    const globalErrorEl = document.getElementById('global-error');
+
+    const API_BASE_URL = '/api';
+
+    function showGlobalError(message) {
+        if (!globalErrorEl) return;
+        globalErrorEl.textContent = `Error: ${message}`;
+        globalErrorEl.classList.remove('hidden');
+    }
+
+    async function fetchVersionInfo() {
+        if (!commitShaEl) return;
+        try {
+            const response = await fetch(`${API_BASE_URL}/version`);
+            if (!response.ok) throw new Error(`Network response: ${response.statusText}`);
+            const data = await response.json();
+            commitShaEl.textContent = data.commitSha || 'unknown';
+        } catch (error) {
+            console.error('Failed to fetch version info:', error);
+            commitShaEl.textContent = 'error';
+        }
+    }
+
+    function displayMacResult(data, outputEl) {
+        outputEl.textContent = data.vendor || 'No vendor found.';
+    }
+
+    async function handleMacLookup() {
+        const mac = macInput.value.trim();
+        if (!mac) {
+            macLookupErrorEl.textContent = 'Please enter a MAC address.';
+            macLookupErrorEl.classList.remove('hidden');
+            return;
+        }
+
+        // Reset animation
+        macLookupResultsSection.classList.remove('fade-in');
+        void macLookupResultsSection.offsetWidth; // Trigger reflow
+        macLookupResultsSection.classList.add('fade-in');
+
+        macLookupResultsSection.classList.remove('hidden');
+        macLookupLoader.classList.remove('hidden');
+        macLookupErrorEl.classList.add('hidden');
+        macLookupOutputEl.textContent = '';
+        macLookupQueryEl.textContent = mac;
+
+        try {
+            const response = await fetch(`${API_BASE_URL}/mac-lookup?mac=${encodeURIComponent(mac)}`);
+            const data = await response.json();
+
+            if (!response.ok || !data.success) {
+                throw new Error(data.error || `Request failed with status ${response.status}`);
+            }
+
+            displayMacResult(data, macLookupOutputEl);
+
+        } catch (error) {
+            console.error('Failed to fetch MAC vendor:', error);
+            macLookupErrorEl.textContent = `Error: ${error.message}`;
+            macLookupErrorEl.classList.remove('hidden');
+            macLookupOutputEl.textContent = '';
+        } finally {
+            macLookupLoader.classList.add('hidden');
+        }
+    }
+
+    fetchVersionInfo();
+    macLookupButton.addEventListener('click', handleMacLookup);
+    macInput.addEventListener('keypress', (event) => {
+        if (event.key === 'Enter') handleMacLookup();
+    });
+});
@@ -67,6 +67,13 @@ document.addEventListener('DOMContentLoaded', () => {
    const tracerouteLoader = document.getElementById('traceroute-loader');
    const tracerouteMessage = document.getElementById('traceroute-message');

+    // --- DOM Elements (Port Scan) ---
+    const portScanSection = document.getElementById('port-scan-section');
+    const portScanOutputEl = document.getElementById('port-scan-output');
+    const portScanLoader = document.getElementById('port-scan-loader');
+    const portScanMessage = document.getElementById('port-scan-message');
+    const lookupScanButton = document.getElementById('lookup-scan-button');
+
    // --- DOM Elements (Footer) ---
    const commitShaEl = document.getElementById('commit-sha');

@@ -79,6 +86,7 @@ document.addEventListener('DOMContentLoaded', () => {
    let currentIp = null; // Store the user's fetched IP
    let currentLookupIp = null; // Store the last successfully looked-up IP
    let eventSource = null; // Store the EventSource instance for traceroute
+    let portScanEventSource = null; // Store the EventSource for port scan

    // --- Helper Functions ---

@@ -141,33 +149,33 @@ document.addEventListener('DOMContentLoaded', () => {
        }
    }

-     /**
-      * Aktualisiert die rDNS Liste generisch.
-      * @param {HTMLElement} listElement - Das UL Element.
-      * @param {Array|object} rdnsData - Die rDNS Daten oder ein Fehlerobjekt.
-      * @param {HTMLElement} [loaderElement] - Das zu versteckende Loader-Element.
-      * @param {HTMLElement} [errorElement] - Das Element zur Anzeige von Fehlern.
-      */
+    /**
+     * Aktualisiert die rDNS Liste generisch.
+     * @param {HTMLElement} listElement - Das UL Element.
+     * @param {Array|object} rdnsData - Die rDNS Daten oder ein Fehlerobjekt.
+     * @param {HTMLElement} [loaderElement] - Das zu versteckende Loader-Element.
+     * @param {HTMLElement} [errorElement] - Das Element zur Anzeige von Fehlern.
+     */
    function updateRdns(listElement, rdnsData, loaderElement = null, errorElement = null) {
        if (loaderElement) loaderElement.classList.add('hidden');
        if (listElement) listElement.innerHTML = ''; // Clear previous entries
        if (errorElement) errorElement.textContent = '';

-         // Zeige das Elternelement des listElements, falls es vorher versteckt war
-         const dataContainer = listElement?.closest('div:not(.loader)');
-         if (dataContainer?.classList.contains('hidden')) {
+        // Zeige das Elternelement des listElements, falls es vorher versteckt war
+        const dataContainer = listElement?.closest('div:not(.loader)');
+        if (dataContainer?.classList.contains('hidden')) {
            dataContainer.classList.remove('hidden');
        }

        if (rdnsData && Array.isArray(rdnsData)) {
            if (rdnsData.length > 0) {
-                 rdnsData.forEach(hostname => {
+                rdnsData.forEach(hostname => {
                    const li = document.createElement('li');
                    li.textContent = hostname;
                    if (listElement) listElement.appendChild(li);
                });
            } else {
-                 if (listElement) listElement.innerHTML = '<li>No rDNS records found.</li>'; // Klarere Meldung
+                if (listElement) listElement.innerHTML = '<li>No rDNS records found.</li>'; // Klarere Meldung
            }
        } else if (rdnsData && rdnsData.error) {
            if (listElement) listElement.innerHTML = '<li>-</li>';
@@ -207,9 +215,10 @@ document.addEventListener('DOMContentLoaded', () => {
            } else {
                try {
                    mapInstance = L.map(mapId).setView([lat, lon], 13);
-                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                        maxZoom: 19,
-                        attribution: '© OpenStreetMap contributors'
+                    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+                        subdomains: 'abcd',
+                        maxZoom: 19
                    }).addTo(mapInstance);
                    L.marker([lat, lon]).addTo(mapInstance).bindPopup(`Approximate Location`).openPopup();
                    window[mapId + '_instance'] = mapInstance; // Store instance
@@ -233,10 +242,10 @@ document.addEventListener('DOMContentLoaded', () => {
            messageElement.classList.remove('hidden');
            messageElement.textContent = 'Map could not be loaded (missing or invalid coordinates).';
            // If map existed, remove it to clean up resources
-             if(mapInstance) {
-                 mapInstance.remove();
-                 window[mapId + '_instance'] = null;
-             }
+            if (mapInstance) {
+                mapInstance.remove();
+                window[mapId + '_instance'] = null;
+            }
            return null;
        }
    }
@@ -278,7 +287,17 @@ document.addEventListener('DOMContentLoaded', () => {
            updateField(coordsEl, data.geo?.latitude ? `${data.geo.latitude}, ${data.geo.longitude}` : null);
            updateField(timezoneEl, data.geo?.timezone, geoLoader); // Hide loader on last geo field

-            updateField(asnNumberEl, data.asn?.number, null, asnErrorEl);
+            // ASN — render as clickable link if has a number (not an error object)
+            const asnNum = (data.asn && !data.asn.error) ? data.asn.number : null;
+            if (asnNum && asnNumberEl) {
+                // Reveal the hidden data container manually (updateField won't run the link path via error branch)
+                const asnContainer = asnNumberEl.closest('div:not(.loader)');
+                if (asnContainer) asnContainer.classList.remove('hidden');
+                asnNumberEl.innerHTML =
+                    `<a href="/asn?asn=${asnNum}" class="hover:text-purple-200 underline decoration-dotted transition-colors" title="Open ASN Lookup">AS${asnNum}</a>`;
+            } else {
+                updateField(asnNumberEl, null, null, asnErrorEl, data.asn?.error || '-');
+            }
            updateField(asnOrgEl, data.asn?.organization, asnLoader);

            updateRdns(rdnsListEl, data.rdns, rdnsLoader, rdnsErrorEl);
@@ -319,6 +338,28 @@ document.addEventListener('DOMContentLoaded', () => {

    // --- Lookup Functions ---

+    // --- URL Parameter Functions ---
+
+    /**
+     * Updates the URL with IP lookup parameter
+     * @param {string} ip - The IP address or domain to lookup
+     */
+    function updateLookupUrlParams(ip) {
+        const url = new URL(window.location);
+        url.searchParams.set('ip', ip);
+        window.history.pushState({}, '', url);
+    }
+
+    /**
+     * Reads URL parameters and returns IP if present
+     * @returns {string|null} IP or domain from URL, or null if not present
+     */
+    function getLookupUrlParams() {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get('ip');
+    }
+
+
    /** Zeigt Fehler im Lookup-Bereich an */
    function showLookupError(message) {
        if (!lookupErrorEl) return;
@@ -349,8 +390,8 @@ document.addEventListener('DOMContentLoaded', () => {
    }


-     /** Setzt den Lookup-Ergebnisbereich zurück */
-     function resetLookupResults() {
+    /** Setzt den Lookup-Ergebnisbereich zurück */
+    function resetLookupResults() {
        if (!lookupResultsSection) return;
        lookupResultsSection.classList.add('hidden');
        if (lookupResultLoader) lookupResultLoader.classList.add('hidden');
@@ -361,6 +402,8 @@ document.addEventListener('DOMContentLoaded', () => {
        if (lookupPingLoader) lookupPingLoader.classList.add('hidden');
        if (lookupPingOutputEl) lookupPingOutputEl.textContent = '';
        if (lookupPingErrorEl) lookupPingErrorEl.textContent = '';
+        if (portScanSection) portScanSection.classList.add('hidden'); // Hide port scan results
+        if (portScanOutputEl) portScanOutputEl.innerHTML = '';
        hideLookupStatus(); // Hide status on reset

        const fieldsToClear = [
@@ -373,6 +416,7 @@ document.addEventListener('DOMContentLoaded', () => {

        if (lookupPingButton) lookupPingButton.disabled = true;
        if (lookupTraceButton) lookupTraceButton.disabled = true;
+        if (lookupScanButton) lookupScanButton.disabled = true;
        currentLookupIp = null;

        // Remove lookup map instance if it exists
@@ -380,7 +424,12 @@ document.addEventListener('DOMContentLoaded', () => {
            window['lookup-map_instance'].remove();
            window['lookup-map_instance'] = null;
        }
-     }
+
+        if (portScanEventSource) {
+            portScanEventSource.close();
+            portScanEventSource = null;
+        }
+    }

    /** Ruft Informationen für eine spezifische IP ab */
    async function fetchLookupInfo(ipToLookup) {
@@ -402,7 +451,7 @@ document.addEventListener('DOMContentLoaded', () => {
                throw new Error(data.error || `Network response: ${response.statusText} (${response.status})`);
            }

-            console.log(`Received Lookup Info for ${ipToLookup}:`, data);
+            console.log('Received Lookup Info for', ipToLookup, ':', data);
            currentLookupIp = data.ip; // Store the IP that was actually looked up

            updateField(lookupIpAddressEl, data.ip); // Display the looked-up IP
@@ -413,7 +462,13 @@ document.addEventListener('DOMContentLoaded', () => {
            updateField(lookupCoordsEl, data.geo?.latitude ? `${data.geo.latitude}, ${data.geo.longitude}` : null);
            updateField(lookupTimezoneEl, data.geo?.timezone);

-            updateField(lookupAsnNumberEl, data.asn?.number, null, lookupAsnErrorEl);
+            // ASN — render as clickable link if available
+            if (data.asn?.number && lookupAsnNumberEl) {
+                lookupAsnNumberEl.innerHTML =
+                    `<a href="/asn?asn=${data.asn.number}" class="text-purple-400 hover:text-purple-300 underline decoration-dotted transition-colors font-mono" title="Open ASN Lookup">AS${data.asn.number}</a>`;
+            } else {
+                updateField(lookupAsnNumberEl, data.asn?.number, null, lookupAsnErrorEl);
+            }
            updateField(lookupAsnOrgEl, data.asn?.organization);

            updateRdns(lookupRdnsListEl, data.rdns, null, lookupRdnsErrorEl);
@@ -422,9 +477,10 @@ document.addEventListener('DOMContentLoaded', () => {

            if (lookupPingButton) lookupPingButton.disabled = false;
            if (lookupTraceButton) lookupTraceButton.disabled = false;
+            if (lookupScanButton) lookupScanButton.disabled = false;

        } catch (error) {
-            console.error(`Failed to fetch lookup info for ${ipToLookup}:`, error);
+            console.error('Failed to fetch lookup info for', ipToLookup, ':', error);
            showLookupError(`Lookup failed: ${error.message}`);
            if (lookupMapMessageEl) {
                lookupMapMessageEl.textContent = 'Map could not be loaded due to an error.';
@@ -435,8 +491,8 @@ document.addEventListener('DOMContentLoaded', () => {
            resetLookupResults(); // Hide the section again on error

        } finally {
-             if (lookupResultLoader) lookupResultLoader.classList.add('hidden'); // Hide main loader
-             // Map loader is handled by initOrUpdateMap
+            if (lookupResultLoader) lookupResultLoader.classList.add('hidden'); // Hide main loader
+            // Map loader is handled by initOrUpdateMap
        }
    }

@@ -472,7 +528,7 @@ document.addEventListener('DOMContentLoaded', () => {
            throw new Error(data.error || 'No A or AAAA records found.');

        } catch (error) {
-            console.error(`DNS resolution failed for ${domain}:`, error);
+            console.error('DNS resolution failed for', domain, ':', error);
            throw new Error(`Could not resolve domain: ${error.message}`);
        }
    }
@@ -505,10 +561,10 @@ document.addEventListener('DOMContentLoaded', () => {
                if (data.stats.rtt) {
                    outputText += `Round Trip Time (ms): min=${data.stats.rtt.min}, avg=${data.stats.rtt.avg}, max=${data.stats.rtt.max}, mdev=${data.stats.rtt.mdev}\n`;
                } else if (data.stats.packets.received === 0) {
-                     outputText += `Status: Host unreachable or request timed out.\n`;
+                    outputText += `Status: Host unreachable or request timed out.\n`;
                }
            } else {
-                 outputText += `Could not parse statistics.\n`;
+                outputText += `Could not parse statistics.\n`;
            }
            outputText += `\n--- Raw Output ---\n${data.rawOutput || 'No raw output available.'}`;
            lookupPingOutputEl.textContent = outputText;
@@ -554,7 +610,7 @@ document.addEventListener('DOMContentLoaded', () => {
            console.error('EventSource failed:', event);
            let errorMsg = 'Connection error during traceroute.';
            if (eventSource.readyState === EventSource.CLOSED) {
-                 errorMsg = 'Connection closed. Server might have stopped or a network issue occurred.';
+                errorMsg = 'Connection closed. Server might have stopped or a network issue occurred.';
            }
            tracerouteMessage.textContent = errorMsg;
            tracerouteLoader.classList.add('hidden');
@@ -570,14 +626,14 @@ document.addEventListener('DOMContentLoaded', () => {
        });

        eventSource.addEventListener('info', (event) => {
-             try {
+            try {
                const infoData = JSON.parse(event.data);
                displayTracerouteLine(infoData.message, 'info-line');
            } catch (e) { displayTracerouteLine(`[Error parsing info data: ${event.data}]`, 'error-line'); }
        });

        eventSource.addEventListener('error', (event) => { // Backend error event
-             try {
+            try {
                const errorData = JSON.parse(event.data);
                displayTracerouteLine(errorData.error, 'error-line');
                tracerouteMessage.textContent = `Error during traceroute: ${errorData.error}`;
@@ -586,7 +642,7 @@ document.addEventListener('DOMContentLoaded', () => {

        eventSource.addEventListener('end', (event) => {
            console.log('SSE connection closed by server (end event).');
-             try {
+            try {
                const endData = JSON.parse(event.data);
                const endMessage = `Traceroute finished ${endData.exitCode === 0 ? 'successfully' : `with exit code ${endData.exitCode}`}.`;
                displayTracerouteLine(endMessage, 'end-line');
@@ -598,18 +654,19 @@ document.addEventListener('DOMContentLoaded', () => {
    }

    function displayTracerouteLine(text, className = '') {
-         if (!tracerouteOutputEl) return;
-         const lineDiv = document.createElement('div');
-         if (className) lineDiv.classList.add(className);
-         lineDiv.textContent = text;
-         tracerouteOutputEl.appendChild(lineDiv);
-         tracerouteOutputEl.scrollTop = tracerouteOutputEl.scrollHeight;
+        if (!tracerouteOutputEl) return;
+        const lineDiv = document.createElement('div');
+        if (className) lineDiv.classList.add(className);
+        lineDiv.classList.add('fade-in'); // Animation hinzufügen
+        lineDiv.textContent = text;
+        tracerouteOutputEl.appendChild(lineDiv);
+        tracerouteOutputEl.scrollTop = tracerouteOutputEl.scrollHeight;
    }

    function displayTracerouteHop(hopData) {
        if (!tracerouteOutputEl) return;
        const lineDiv = document.createElement('div');
-        lineDiv.classList.add('hop-line');
+        lineDiv.classList.add('hop-line', 'fade-in'); // Animation hinzufügen

        const hopNumSpan = document.createElement('span');
        hopNumSpan.classList.add('hop-number');
@@ -628,12 +685,12 @@ document.addEventListener('DOMContentLoaded', () => {
                lineDiv.appendChild(hostSpan);
            }
        } else if (hopData.rtt && hopData.rtt.every(r => r === '*')) {
-             const timeoutSpan = document.createElement('span');
-             timeoutSpan.classList.add('hop-timeout');
-             timeoutSpan.textContent = '* * *';
-             lineDiv.appendChild(timeoutSpan);
+            const timeoutSpan = document.createElement('span');
+            timeoutSpan.classList.add('hop-timeout');
+            timeoutSpan.textContent = '* * *';
+            lineDiv.appendChild(timeoutSpan);
        } else {
-             lineDiv.appendChild(document.createTextNode(hopData.rawLine || 'Unknown hop format'));
+            lineDiv.appendChild(document.createTextNode(hopData.rawLine || 'Unknown hop format'));
        }

        if (hopData.rtt && Array.isArray(hopData.rtt)) {
@@ -653,13 +710,98 @@ document.addEventListener('DOMContentLoaded', () => {
        tracerouteOutputEl.scrollTop = tracerouteOutputEl.scrollHeight;
    }

+    // --- Port Scan Functions ---
+    function startPortScan(ip) {
+        if (!ip) {
+            showGlobalError('Cannot start port scan: IP address is missing.');
+            return;
+        }
+        if (!portScanSection || !portScanOutputEl || !portScanLoader || !portScanMessage) return;
+
+        if (portScanEventSource) {
+            portScanEventSource.close();
+        }
+
+        portScanSection.classList.remove('hidden');
+        portScanOutputEl.innerHTML = '';
+        portScanLoader.classList.remove('hidden');
+        portScanMessage.textContent = `Starting port scan for ${ip}...`;
+        hideGlobalError();
+        hideLookupError();
+
+        const url = `${API_BASE_URL}/port-scan?targetIp=${encodeURIComponent(ip)}`;
+        portScanEventSource = new EventSource(url);
+
+        portScanEventSource.onopen = () => {
+            console.log('SSE connection opened for port scan.');
+        };
+
+        portScanEventSource.onerror = (event) => {
+            console.error('Port Scan EventSource failed:', event);
+            portScanMessage.textContent = 'Connection error during port scan.';
+            portScanLoader.classList.add('hidden');
+            portScanEventSource.close();
+        };
+
+        portScanEventSource.addEventListener('info', (event) => {
+            const infoData = JSON.parse(event.data);
+            portScanMessage.textContent = infoData.message;
+        });
+
+        portScanEventSource.addEventListener('port_status', (event) => {
+            const portData = JSON.parse(event.data);
+            displayPortScanResult(portData);
+        });
+
+        portScanEventSource.addEventListener('error', (event) => {
+            const errorData = JSON.parse(event.data);
+            displayPortScanResult({ error: errorData.error });
+        });
+
+        portScanEventSource.addEventListener('end', (event) => {
+            const endData = JSON.parse(event.data);
+            portScanMessage.textContent = endData.message;
+            portScanLoader.classList.add('hidden');
+            portScanEventSource.close();
+        });
+    }
+
+    function displayPortScanResult(data) {
+        if (!portScanOutputEl) return;
+        const lineDiv = document.createElement('div');
+        lineDiv.classList.add('mb-1', 'fade-in'); // Animation hinzufügen
+
+        let statusColor = 'text-gray-400';
+        let statusText = data.status.toUpperCase();
+        if (data.status === 'open') {
+            statusColor = 'text-green-400';
+            statusText = 'OPEN';
+        } else if (data.status === 'closed') {
+            statusColor = 'text-red-400';
+            statusText = 'CLOSED';
+        } else if (data.status === 'timeout') {
+            statusColor = 'text-yellow-400';
+            statusText = 'TIMEOUT (Filtered?)';
+        }
+
+        if (data.error) {
+            lineDiv.innerHTML = `<span class="text-red-400">Error: ${data.error}</span>`;
+        } else {
+            lineDiv.innerHTML = `Port <span class="font-bold w-12 inline-block">${data.port}</span> <span class="w-24 inline-block">(${data.service})</span>: <span class="font-bold ${statusColor}">${statusText}</span>`;
+        }
+
+        portScanOutputEl.appendChild(lineDiv);
+        portScanOutputEl.scrollTop = portScanOutputEl.scrollHeight;
+    }
+
+
    // --- Event Handlers ---
    function handleIpClick(event) {
        event.preventDefault(); // Verhindert das Standardverhalten des Links (#)
        if (currentIp) {
            console.log(`User IP link clicked: ${currentIp}. Redirecting to WHOIS lookup...`);
            // Leite zur Whois-Seite weiter und übergebe die IP als 'query'-Parameter
-            window.location.href = `whois-lookup.html?query=${encodeURIComponent(currentIp)}`;
+            window.location.href = `/whois?query=${encodeURIComponent(currentIp)}`;
        } else {
            console.warn('Cannot redirect to WHOIS: current IP is not available.');
        }
@@ -676,6 +818,9 @@ document.addEventListener('DOMContentLoaded', () => {
        resetLookupResults(); // Reset results before starting
        hideLookupError();

+        // Update URL with the query parameter
+        updateLookupUrlParams(query);
+
        if (isValidIpAddress(query)) {
            // Input is an IP address
            console.log(`Lookup button clicked for IP: ${query}`);
@@ -692,31 +837,52 @@ document.addEventListener('DOMContentLoaded', () => {
                    // lookupIpInput.value = resolvedIp;
                    fetchLookupInfo(resolvedIp); // Fetch info for the resolved IP
                } else {
-                     // Should be caught by the error in resolveDomainToIp, but as a fallback:
-                     showLookupError(`Could not resolve domain ${query} to an IP address.`);
+                    // Should be caught by the error in resolveDomainToIp, but as a fallback:
+                    showLookupError(`Could not resolve domain ${query} to an IP address.`);
                }
            } catch (error) {
                showLookupError(error.message); // Display resolution error
            } finally {
-                 hideLookupStatus(); // Hide status message regardless of outcome
+                hideLookupStatus(); // Hide status message regardless of outcome
            }
        }
    }


-     function handleLookupPingClick() {
-         if (currentLookupIp) {
-             console.log(`Starting ping for looked-up IP: ${currentLookupIp}`);
-             runLookupPing(currentLookupIp); // Call the new ping function
-         }
-     }
+    function handleLookupPingClick() {
+        if (currentLookupIp) {
+            console.log(`Starting ping for looked-up IP: ${currentLookupIp}`);
+            runLookupPing(currentLookupIp); // Call the new ping function
+        }
+    }

-     function handleLookupTraceClick() {
-         if (currentLookupIp) {
-             console.log(`Starting traceroute for looked-up IP: ${currentLookupIp}`);
-             startTraceroute(currentLookupIp);
-         }
-     }
+    function handleLookupTraceClick() {
+        if (currentLookupIp) {
+            console.log(`Starting traceroute for looked-up IP: ${currentLookupIp}`);
+            startTraceroute(currentLookupIp);
+        }
+    }
+
+    function handleLookupScanClick() {
+        if (currentLookupIp) {
+            console.log(`Starting port scan for looked-up IP: ${currentLookupIp}`);
+            startPortScan(currentLookupIp);
+        }
+    }
+
+    /**
+     * Executes IP lookup from URL parameters if they exist
+     */
+    function executeLookupFromUrl() {
+        const ipParam = getLookupUrlParams();
+        if (ipParam && lookupIpInput) {
+            // Populate the input field
+            lookupIpInput.value = ipParam;
+
+            // Trigger the lookup
+            handleLookupClick();
+        }
+    }

    // --- Initial Load & Event Listeners ---
    fetchIpInfo(); // Lade Infos zur eigenen IP
@@ -729,8 +895,12 @@ document.addEventListener('DOMContentLoaded', () => {
    });
    if (lookupPingButton) lookupPingButton.addEventListener('click', handleLookupPingClick);
    if (lookupTraceButton) lookupTraceButton.addEventListener('click', handleLookupTraceClick);
+    if (lookupScanButton) lookupScanButton.addEventListener('click', handleLookupScanClick);

    // Der Event Listener für den IP-Link wird jetzt in fetchIpInfo() hinzugefügt,
    // nachdem die IP erfolgreich abgerufen wurde.

+    // Execute lookup from URL parameters if present
+    executeLookupFromUrl();
+
 }); // End DOMContentLoaded
@@ -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,208 +9,299 @@
    <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> <!-- Angepasst -->
-                <li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
-                <li><a href="dns-lookup.html">DNS Lookup</a></li> <!-- Neu -->
-                <li><a href="whois-lookup.html">WHOIS Lookup</a></li> <!-- Neu -->
+                <li><a href="/">IP Info &amp; Tools</a></li>
+                <li><a href="/subnet" class="active-link">Subnetz Rechner</a></li>
+                <li><a href="/dns">DNS Lookup</a></li>
+                <li><a href="/whois">WHOIS Lookup</a></li>
+                <li><a href="/mac">MAC Lookup</a></li>
+                <li><a href="/asn">ASN Lookup</a></li>
            </ul>
        </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>&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> <!-- 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>&copy; 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 -->
@@ -247,8 +339,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');
                    }
                }
            }
@@ -256,4 +348,5 @@
        });
    </script>
 </body>
+
 </html>
@@ -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,89 +9,231 @@
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Eigene Styles -->
    <style>
-        /* Einfacher Lade-Spinner */
+        /* Einfacher Lade-Spinner (Tailwind animiert) */
        .loader {
-            border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
-            border-left-color: #a855f7; /* Lila */
+            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); }
+            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;
+        }
+
        /* Ergebnis-Pre-Formatierung */
        .result-pre {
            white-space: pre-wrap;
            word-break: break-all;
-            font-family: monospace;
-            background-color: #1f2937; /* Dunkelgrau */
-            color: #d1d5db; /* Hellgrau */
+            font-family: 'Courier New', Courier, monospace;
+            background-color: rgba(0, 0, 0, 0.3);
+            color: #e5e7eb;
            padding: 1rem;
-            border-radius: 0.375rem; /* rounded-md */
-            max-height: 600px; /* Mehr Höhe für WHOIS */
+            border-radius: 0.375rem;
+            max-height: 600px;
            overflow-y: auto;
-            font-size: 0.875rem; /* text-sm */
+            font-size: 0.875rem;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
        }
+
+        /* Scrollbar Styling */
+        ::-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;
+        }
+
        /* Navigations-Styling */
-        nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
-        nav a { color: #c4b5fd; text-decoration: none; white-space: nowrap; }
-        nav a:hover { color: #a78bfa; text-decoration: underline; }
-        header { background-color: #374151; padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
-        @media (min-width: 768px) { header { flex-direction: row; justify-content: space-between; } }
-        header h1 { font-size: 1.5rem; font-weight: bold; color: #e5e7eb; }
-        .hidden { display: none; }
+        nav ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        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);
+        }
+
+        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);
+        }
+
+        nav a.active-link {
+            background: rgba(168, 85, 247, 0.3);
+            color: #fff;
+            border-color: #a855f7;
+        }
+
+        header {
+            background: rgba(31, 41, 55, 0.4);
+            backdrop-filter: blur(10px);
+            padding: 1.5rem;
+            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);
+        }
+
+        @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;
+        }
    </style>
 </head>
-<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">

-    <header>
-        <h1>uTools Network Suite</h1>
+<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="dns-lookup.html">DNS Lookup</a></li>
-                <li><a href="whois-lookup.html">WHOIS Lookup</a></li>
+                <li><a href="/">IP Info &amp; Tools</a></li>
+                <li><a href="/subnet">Subnetz Rechner</a></li>
+                <li><a href="/dns">DNS Lookup</a></li>
+                <li><a href="/whois" class="active-link">WHOIS Lookup</a></li>
+                <li><a href="/mac">MAC Lookup</a></li>
+                <li><a href="/asn">ASN Lookup</a></li>
            </ul>
        </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">

-        <h1 class="text-3xl font-bold mb-6 text-purple-400 text-center">WHOIS Lookup</h1>
+        <h1 class="text-3xl font-bold mb-8 text-center text-gradient glitch-text">WHOIS Lookup</h1>

        <!-- Bereich für WHOIS Lookup -->
-        <div class="mt-8 p-4 bg-gray-700 rounded">
-            <div class="flex flex-col sm:flex-row gap-2 mb-4">
+        <div class="mt-8 p-6 glass-card rounded-xl">
+            <div class="flex flex-col sm:flex-row gap-3 mb-6">
                <input type="text" id="whois-query-input" placeholder="Enter domain or IP (e.g., google.com or 8.8.8.8)"
-                       class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
+                    class="flex-grow 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 placeholder-gray-600">
                <button id="whois-lookup-button"
-                        class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
+                    class="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">
                    Lookup WHOIS
                </button>
            </div>
-            <div id="whois-lookup-error" class="text-red-400 mb-4 hidden"></div>
-            <div id="whois-lookup-results-section" class="hidden mt-4 border-t border-gray-600 pt-4">
-                <h3 class="text-lg font-semibold text-purple-300 mb-2">WHOIS Results for: <span id="whois-lookup-query" class="font-mono text-purple-400"></span></h3>
-                <div id="whois-lookup-loader" class="loader hidden mb-2"></div>
-                <pre id="whois-lookup-output" class="result-pre"></pre> <!-- Ergebnisbereich -->
+            <div id="whois-lookup-error"
+                class="text-red-400 mb-4 hidden p-3 bg-red-900/20 border border-red-500/30 rounded"></div>
+            <div id="whois-lookup-results-section" class="hidden mt-6 border-t border-gray-700/50 pt-6 fade-in">
+                <h3 class="text-lg font-semibold text-purple-300 mb-4 flex items-center gap-2">
+                    <div class="w-1.5 h-6 bg-purple-500 rounded-full"></div>
+                    WHOIS Results for: <span id="whois-lookup-query" class="font-mono text-purple-400 ml-1"></span>
+                </h3>
+                <div id="whois-lookup-loader" class="loader hidden mb-4"></div>
+                <pre id="whois-lookup-output" class="result-pre custom-scrollbar"></pre> <!-- Ergebnisbereich -->
            </div>
        </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>

-         <!-- Footer für Version -->
-         <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>
-         </footer>
+        <!-- Footer für Version -->
+        <footer class="mt-12 pt-6 border-t border-gray-700/30 text-center text-xs text-gray-500">
+            <p>&copy; 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>

    </div>

    <!-- Eigene JS-Logik für diese Seite -->
    <script src="whois-lookup.js"></script>
 </body>
+
 </html>
@@ -43,6 +43,11 @@ document.addEventListener('DOMContentLoaded', () => {
     * @param {function} displayFn - Funktion zur Formatierung und Anzeige der Daten im outputElement.
     */
    async function fetchAndDisplay(endpoint, params, resultsSection, loaderElement, errorElement, queryElement, outputElement, displayFn) {
+        // Reset animation
+        resultsSection.classList.remove('fade-in');
+        void resultsSection.offsetWidth; // Trigger reflow
+        resultsSection.classList.add('fade-in');
+
        resultsSection.classList.remove('hidden');
        loaderElement.classList.remove('hidden');
        errorElement.classList.add('hidden');
@@ -94,10 +99,10 @@ document.addEventListener('DOMContentLoaded', () => {
    function displayWhoisResults(data, outputEl) {
        // WHOIS data can be large and unstructured, display as raw text
        if (typeof data.result === 'string') {
-             outputEl.textContent = data.result; // Display raw text
+            outputEl.textContent = data.result; // Display raw text
        } else {
-             // Fallback if the result is not a string (shouldn't happen with current backend)
-             outputEl.textContent = JSON.stringify(data.result, null, 2);
+            // Fallback if the result is not a string (shouldn't happen with current backend)
+            outputEl.textContent = JSON.stringify(data.result, null, 2);
        }
    }

@@ -10,9 +10,22 @@ server {
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

+    # Clean URL rewrites - Map short URLs to actual HTML files
+    rewrite ^/dns$ /dns-lookup.html last;
+    rewrite ^/dns-lookup$ /dns-lookup.html last;
+    rewrite ^/whois$ /whois-lookup.html last;
+    rewrite ^/whois-lookup$ /whois-lookup.html last;
+    rewrite ^/mac$ /mac-lookup.html last;
+    rewrite ^/mac-lookup$ /mac-lookup.html last;
+    rewrite ^/subnet$ /subnet-calculator.html last;
+    rewrite ^/subnet-calculator$ /subnet-calculator.html last;
+    rewrite ^/asn$ /asn-lookup.html last;
+    rewrite ^/asn-lookup$ /asn-lookup.html last;
+
    # Statische Dateien direkt ausliefern
    location / {
-        try_files $uri $uri/ /index.html; # Wichtig für Single-Page-Apps (auch wenn wir keine sind)
+        # First try the exact URI, then with .html, then fall back to index.html
+        try_files $uri $uri.html $uri/ /index.html;
    }

    # API-Anfragen an den Backend-Service weiterleiten
Author	SHA1	Message	Date
github-actions[bot]	07bc5ffd9f	Update MaxMind GeoLite2 databases (LFS) (2026-04-01)	2026-04-01 01:26:00 +00:00
MrUnknownDE	b78b19b58b	add asn info grid	2026-03-05 21:04:57 +01:00
MrUnknownDE	636cd9a1e4	fix limit on neighbours	2026-03-05 21:00:24 +01:00
MrUnknownDE	8bcc6270ca	fix: Null Issue on response	2026-03-05 20:52:35 +01:00
MrUnknownDE	828103be06	add Sentry Logs	2026-03-05 20:52:15 +01:00
MrUnknownDE	a606d8e649	update sentry plugin	2026-03-05 20:38:04 +01:00
MrUnknownDE	9fdd7d58a9	fix: display issue	2026-03-05 20:33:27 +01:00
MrUnknownDE	b226b81775	set cache to 7 days	2026-03-05 20:20:31 +01:00
MrUnknownDE	f21b06e6ad	fix: add asn-cache on filesystem	2026-03-05 20:09:53 +01:00
MrUnknownDE	6552d198cf	Merge branch 'main' of github.com:MrUnknownDE/utools	2026-03-05 19:57:17 +01:00
MrUnknownDE	564596e06a	feat: add ASN Function	2026-03-05 19:57:14 +01:00
MrUnknownDE	2d25dfc262	update qs and underscore	2026-03-05 19:44:54 +01:00
github-actions[bot]	49708b7b58	Update MaxMind GeoLite2 databases (LFS) (2026-03-05)	2026-03-05 18:35:15 +00:00
MrUnknownDE	d119ecf4a2	fix CodeQL-Alerts	2026-03-05 19:32:01 +01:00
github-actions[bot]	b3c7a7bef3	Update MaxMind GeoLite2 databases (LFS) (2026-03-01)	2026-03-01 01:16:33 +00:00
github-actions[bot]	aed28b982a	Update MaxMind GeoLite2 databases (LFS) (2026-02-01)	2026-02-01 01:17:59 +00:00
MrUnknownDE	080fed1008	fix: remove .html links	2026-01-14 17:12:31 +01:00
MrUnknownDE	33b7d5dffc	Merge branch 'main' of github.com:MrUnknownDE/utools	2026-01-14 17:10:57 +01:00
github-actions[bot]	6a47880288	Update MaxMind GeoLite2 databases (LFS) (2026-01-14)	2026-01-14 16:09:59 +00:00
MrUnknownDE	d584e11453	feat: add shareable links	2026-01-14 17:08:15 +01:00
MrUnknownDE	cde424e881	feat: Add MAC address vendor lookup API endpoint and dependencies	2026-01-02 18:14:53 +01:00
MrUnknownDE	eec2ed1adb	feat: Add new API endpoint for MAC address vendor lookup.	2026-01-02 18:08:07 +01:00
MrUnknownDE	7f3566888d	chore: update README.md	2026-01-02 18:03:10 +01:00
MrUnknownDE	a0ea88b2dd	feat: add MAC address lookup API endpoint and backend dependencies	2026-01-02 18:00:00 +01:00
MrUnknownDE	a7d8654d3c	feat: Add initial frontend logic for network utilities (IP info, lookup, traceroute, port scan) and a backend route for MAC lookup.	2026-01-02 17:56:31 +01:00
MrUnknownDE	ff0fd1098b	fix: switch to nodejs 24	2026-01-02 17:51:56 +01:00
MrUnknownDE	29fd909340	Fix SSRF vulnerability in utils.js	2026-01-02 17:49:19 +01:00
MrUnknownDE	a7d189d89d	feat: update style	2026-01-02 17:45:41 +01:00
MrUnknownDE	fdc753b32f	fix: update dependencies	2026-01-02 17:38:36 +01:00
MrUnknownDE	7a3b159105	feat: add example environment variables for backend configuration	2026-01-02 17:28:22 +01:00
MrUnknownDE	652010a92f	feat: Add initial backend server with various utility APIs, Sentry, logging, rate limiting, and a multi-arch Docker build workflow.	2026-01-02 17:26:09 +01:00
github-actions[bot]	e5902e9747	Update MaxMind GeoLite2 databases (LFS) (2026-01-01)	2026-01-01 01:02:49 +00:00
github-actions[bot]	068a8cd472	Update MaxMind GeoLite2 databases (LFS) (2025-12-18)	2025-12-18 17:03:22 +00:00
MrUnknownDE	eb3f43953a	chore: add github lfs	2025-12-18 18:02:34 +01:00
MrUnknownDE	ac6ec7e535	chore: change to github lfs	2025-12-18 18:01:58 +01:00
github-actions[bot]	db806fd06c	Update MaxMind GeoLite2 databases (2025-12-18)	2025-12-18 16:58:36 +00:00
MrUnknownDE	f7fad027db	change to monthly updates	2025-12-03 20:56:13 +01:00
github-actions[bot]	b74dcbff38	Update MaxMind GeoLite2 databases (2025-12-02)	2025-12-02 05:18:57 +00:00
github-actions[bot]	0ce8eec6e5	Update MaxMind GeoLite2 databases (2025-11-25)	2025-11-25 05:19:34 +00:00
github-actions[bot]	2ce5916fb3	Update MaxMind GeoLite2 databases (2025-11-22)	2025-11-22 19:49:44 +00:00
github-actions[bot]	fab48185c8	Update MaxMind GeoLite2 databases (2025-11-18)	2025-11-18 05:18:28 +00:00
github-actions[bot]	9597644607	Update MaxMind GeoLite2 databases (2025-11-11)	2025-11-11 05:18:51 +00:00
github-actions[bot]	6daa4ef4bc	Update MaxMind GeoLite2 databases (2025-11-04)	2025-11-04 05:18:32 +00:00
MrUnknownDE	26c22f907b	Verbesserung der Docker-Workflow-Konfiguration und Aktualisierung der Image-Referenzen	2025-11-01 18:17:33 +01:00
MrUnknownDE	e354d8aabd	edit footer	2025-11-01 18:14:31 +01:00
MrUnknownDE	26137c4ed0	[Workflow] Verbesserung der Tag-Definition für Multi-Arch-Images	2025-11-01 18:13:12 +01:00
MrUnknownDE	e3ae926043	move to DockerHUB + manuell trigger	2025-11-01 18:10:15 +01:00
github-actions[bot]	dce367ce78	Update MaxMind GeoLite2 databases (2025-10-28)	2025-10-28 05:18:41 +00:00
github-actions[bot]	9b4e2552dd	Update MaxMind GeoLite2 databases (2025-10-21)	2025-10-21 05:17:48 +00:00
github-actions[bot]	2f3241e36a	Update MaxMind GeoLite2 databases (2025-10-14)	2025-10-14 05:16:50 +00:00
github-actions[bot]	dff70e2b07	Update MaxMind GeoLite2 databases (2025-10-07)	2025-10-07 05:16:45 +00:00
github-actions[bot]	21e9c62441	Update MaxMind GeoLite2 databases (2025-09-30)	2025-09-30 05:17:12 +00:00
MrUnknownDE	8962cfadd9	update nav bar	2025-09-23 20:06:54 +02:00
MrUnknownDE	bb7fa35496	fix sentry error and mac-vendor utils issue	2025-09-23 20:01:19 +02:00
MrUnknownDE	dfdfbbdf68	try again mac-lookup	2025-09-23 19:54:27 +02:00
MrUnknownDE	f21da6b888	add Port-Scanner	2025-09-23 19:47:51 +02:00
MrUnknownDE	eabd59e945	add token secret	2025-09-23 19:38:20 +02:00
MrUnknownDE	93132c256d	try to push a docker image :D	2025-09-23 19:33:38 +02:00
MrUnknownDE	39a6c3dd8b	fix docker image lowcase naming	2025-09-23 19:29:41 +02:00
MrUnknownDE	b93b91d352	seperate docker-build compose	2025-09-23 19:19:28 +02:00
MrUnknownDE	9693238eb0	Update index.html	2025-09-23 19:10:51 +02:00
github-actions[bot]	e465887edc	Update MaxMind GeoLite2 databases (2025-09-23)	2025-09-23 05:17:13 +00:00
github-actions[bot]	ac63f5e5bb	Update MaxMind GeoLite2 databases (2025-09-16)	2025-09-16 05:16:58 +00:00
github-actions[bot]	8ad92755ed	Update MaxMind GeoLite2 databases (2025-09-09)	2025-09-09 05:16:42 +00:00
github-actions[bot]	6d3d7f4efb	Update MaxMind GeoLite2 databases (2025-09-02)	2025-09-02 05:18:09 +00:00
github-actions[bot]	9804a68ea5	Update MaxMind GeoLite2 databases (2025-08-26)	2025-08-26 05:18:15 +00:00
github-actions[bot]	2730ebb174	Update MaxMind GeoLite2 databases (2025-08-19)	2025-08-19 05:18:06 +00:00
github-actions[bot]	e4221f2e8f	Update MaxMind GeoLite2 databases (2025-08-12)	2025-08-12 05:18:56 +00:00
github-actions[bot]	5c9df4e6b1	Update MaxMind GeoLite2 databases (2025-08-05)	2025-08-05 05:28:01 +00:00
github-actions[bot]	a1753f4e85	Update MaxMind GeoLite2 databases (2025-07-29)	2025-07-29 05:27:53 +00:00
github-actions[bot]	c9846b0d88	Update MaxMind GeoLite2 databases (2025-07-22)	2025-07-22 05:23:59 +00:00
github-actions[bot]	b7c98e7f4d	Update MaxMind GeoLite2 databases (2025-07-15)	2025-07-15 05:23:24 +00:00
github-actions[bot]	ea4c74747d	Update MaxMind GeoLite2 databases (2025-07-08)	2025-07-08 05:19:31 +00:00
github-actions[bot]	aad232e6f4	Update MaxMind GeoLite2 databases (2025-07-01)	2025-07-01 05:22:02 +00:00
github-actions[bot]	c6cd5c59ea	Update MaxMind GeoLite2 databases (2025-06-24)	2025-06-24 05:20:00 +00:00
github-actions[bot]	9c493cc01e	Update MaxMind GeoLite2 databases (2025-06-17)	2025-06-17 05:18:21 +00:00
github-actions[bot]	104ebd4f83	Update MaxMind GeoLite2 databases (2025-06-10)	2025-06-10 05:18:06 +00:00
github-actions[bot]	d444b0f46b	Update MaxMind GeoLite2 databases (2025-06-03)	2025-06-03 05:18:49 +00:00
github-actions[bot]	7d382bf18e	Update MaxMind GeoLite2 databases (2025-05-27)	2025-05-27 05:17:59 +00:00
github-actions[bot]	6ed691e465	Update MaxMind GeoLite2 databases (2025-05-20)	2025-05-20 05:18:04 +00:00
github-actions[bot]	2e7cc5f2c9	Update MaxMind GeoLite2 databases (2025-05-13)	2025-05-13 05:17:52 +00:00
github-actions[bot]	940f5ff8fb	Update MaxMind GeoLite2 databases (2025-05-06)	2025-05-06 05:18:22 +00:00
github-actions[bot]	44d09e09c1	Update MaxMind GeoLite2 databases (2025-04-29)	2025-04-29 05:17:57 +00:00
MrUnknownDE	8c3e72a632	change live-preview url	2025-04-25 20:44:15 +02:00
github-actions[bot]	0a9d43da13	Update MaxMind GeoLite2 databases (2025-04-22)	2025-04-22 05:17:44 +00:00
github-actions[bot]	bc27677967	Update MaxMind GeoLite2 databases (2025-04-15)	2025-04-15 05:17:40 +00:00
github-actions[bot]	9e969b5745	Update MaxMind GeoLite2 databases (2025-04-08)	2025-04-08 05:17:16 +00:00
github-actions[bot]	5241de94b6	Update MaxMind GeoLite2 databases (2025-04-01)	2025-04-01 05:17:29 +00:00
MrUnknownDE	6b931cf99c	Create CODE_OF_CONDUCT.md	2025-03-29 19:36:36 +01:00
MrUnknownDE	ac5b1abd7b	Create CONTRIBUTING.md	2025-03-29 19:35:56 +01:00
				`@@ -0,0 +1 @@`
				`backend/data/*.mmdb filter=lfs diff=lfs merge=lfs -text`