PonyWave Tools ist eine umfangreiche Sammlung von 34+ Browser-Tools, die komplett clientseitig funktionieren und maximale Privatsphäre bieten. Die Tools sind in drei Hauptkategorien organisiert: Utilities, Spiele und Unterhaltung.

Features

Responsive Design mit Grid-Layout
Dark Mode mit automatischer Erkennung und localStorage-Persistenz
Privacy-First - Die meisten Tools funktionieren komplett offline
Minimale Abhängigkeiten - Vanilla JavaScript wo möglich

Technologie-Stack

Frontend

HTML5 mit semantischem Markup und Open Graph Tags
CSS3 mit CSS Variables, Grid/Flexbox, Dark Mode Support
JavaScript (Vanilla ES6+) für maximale Performance
Canvas API für Spiele und Visualisierungen

Backend (Selektiv)

PHP für spezifische Funktionen:
- Steam-Verfügbarkeitsprüfung (cURL)
- IP-Informationsabruf
- URL-Expansion und Redirect-Verfolgung
- YouTube-Playlist-Datenabruf

Externe Bibliotheken

D3.js (v7) - Datenvisualisierung
Chart.js (v4.4.1) - Diagramm-Rendering
p5.js - Canvas-Zeichenbibliothek
html2canvas - Screenshot/Canvas-Rendering

Analytics

Umami Analytics - Privacy-fokussierte Nutzungsstatistiken
Jedes Tool hat ein eindeutiges Tracking-Tag

Projektstruktur

PonyWave-Tools/
├── index.html              # Hauptportal mit Tool-Übersicht
├── header.png              # Banner-Bild
├── favicon.png             # Site-Favicon
├── sitemap.txt             # XML-Sitemap
├── .gitignore              # Git-Ignore-Regeln
│
├── anime_graph/            # MyAnimeList Visualisierung
├── ba_memory/              # Blue Archive Memory-Spiel
├── ba_steam/               # Blue Archive Steam-Check
├── bohne/                  # Julien Bam Videos-Übersicht
├── breakout/               # Breakout-Spiel
├── cell/                   # Platelets Poking
├── chrome_extensions_checker/  # Chrome Extensions Analyzer
├── depp_gpt/               # Depp GPT
├── dogify/                 # Doge Meme Generator
├── dsgvo_helper/           # DSGVO-Export Informationen
├── eml_viewer/             # EML-Dateien-Viewer
├── emoji/                  # Emoji Rain
├── flash_dl/               # Flash Downloader
├── favorites_viewer/       # Favoriten-Viewer
├── gronkh_games/           # Gronkh Games-Suche
├── kemonogen/              # Kemono Friends Logo Generator
├── minesweeper/            # Minesweeper-Spiel
├── pinkie_timer/           # Pinkie Pie Timer
├── pokemon_quiz/           # Pokémon Quiz
├── solitaire/              # Solitaire-Spiel
├── sys_info/               # Systeminformationen
├── text_cleaner/           # Text Cleaner
├── text_decoder/           # Text Decoder
├── text_sorter/            # Text Sorter
├── url_expander/           # URL Expander
├── yt_playlist/            # YouTube Playlist Analyzer
├── yt_thumb/               # YouTube Thumbnail Viewer
├── zeitzonen/              # Zeitzonen-Rechner
├── 2048/                   # 2048-Spiel
├── banana_run/             # Banana Runner
├── emoji_jump/             # Emoji Doodle Jump
└── shape_shifter/          # Shape Shifter

Jedes Tool befindet sich in seinem eigenen Verzeichnis und enthält typischerweise:

index.html - Haupt-HTML-Datei
Assets (Bilder, Fonts, JSON-Daten) je nach Bedarf
Optional: PHP-Backend-Dateien für spezifische Funktionen

Installation & Deployment

Lokale Entwicklung

Repository klonen:

git clone https://git.ponywave.de/Akamaru/PonyWave-Tools.git
cd PonyWave-Tools

Einen lokalen Webserver starten:

# Mit Python
python -m http.server 8000

# Mit PHP
php -S localhost:8000

# Mit Node.js (npx)
npx serve

Im Browser öffnen: http://localhost:8000

Produktions-Deployment

Die Seite benötigt nur einen Standard-Webserver (Apache, Nginx, etc.) mit PHP-Unterstützung für die wenigen Backend-Features.

Anforderungen:

Webserver (Apache/Nginx)
PHP 7.4+ (für Backend-Features)
cURL-Extension für PHP (für Steam-Check und URL-Expander)

Konfiguration:

Alle Tools sind so konfiguriert, dass sie von https://tools.ponywave.de aus laufen
Bei anderem Hostnamen müssen die URLs in den HTML-Dateien angepasst werden

Design-Prinzipien

Farbschema

Primärfarbe: #7F006E (PonyWave Purple)
Sekundärfarbe: #FF7FED (PonyWave Pink)
Gradient: Lila-zu-Pink-Verlauf

Dark Mode

Automatische Erkennung über prefers-color-scheme
Manueller Toggle mit localStorage-Persistenz
Angepasste Farben und Kontraste für bessere Lesbarkeit

Responsive Design

Mobile-First-Ansatz
Grid-Layout passt sich automatisch an
Touch-optimierte Interaktionen für Spiele

Entwicklung

Einen neuen Tool hinzufügen

Erstelle ein neues Verzeichnis für dein Tool
Füge eine index.html Datei mit dem Tool-Code hinzu
Füge das Tool zur Hauptseite (index.html) hinzu:

<a href="https://tools.ponywave.de/dein-tool" class="tool-bubble">
    <h2 class="tool-title">Tool-Titel</h2>
    <p class="tool-description">Tool-Beschreibung</p>
</a>

Füge Umami-Tracking hinzu (optional):

<script defer src="https://stats.ponywave.de/script"
    data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131"
    data-tag="dein-tool"></script>

Code-Stil

Bevorzuge Vanilla JavaScript über Frameworks
Clientseitige Verarbeitung wo möglich (Privacy)
Minimale Abhängigkeiten für schnellere Ladezeiten
Kommentare auf Deutsch im Code
Responsive Design von Anfang an

Autor

Akamaru

Website: https://akamaru.de
Git: https://git.ponywave.de/Akamaru/PonyWave-Tools

README.md

PonyWave Tools

Über das Projekt