Schluss mit Link-Chaos: HyperJump – Die personalisierte und blitzschnelle Startseite

Jeder kennt das: Der Browser öffnet sich, und man wird von einem Wust an Lesezeichen oder einem statischen Standard-Dashboard begrüßt. Gerade wenn man viele interne Dienste, lokale Netzwerkanwendungen, Entwickler-Tools oder private Home-Automation-Systeme betreibt, braucht man eine zentrale Anlaufstelle, die schnell, intuitiv und vor allem anpassbar ist.

Deshalb freue ich mich, heute HyperJump vorzustellen – ein simples, aber extrem leistungsfähiges Dashboard, das genau dieses Problem löst.

🚀 Was ist HyperJump? Die schnelle, personalisierte Kommandozentrale

HyperJump ist eine Single-Page-Anwendung (SPA), die als Ihr persönliches Startseiten-Dashboard dient. Der Fokus liegt auf der Organisation Ihrer wichtigsten Links in klaren, visuell ansprechenden Kategorien, die ich “Bubbles” nenne.

Das gesamte Projekt ist darauf ausgelegt, extrem schlank zu sein. Dadurch lädt es blitzschnell und ist ideal als Startseite für den Browser auf allen Geräten – vom Desktop bis zum Smartphone.

Sie wollen es selbst sehen? Eine Live-Demo steht Ihnen zur Verfügung (bitte beachten Sie, dass das Demo-Passwort öffentlich ist und die Links anonymisiert sind):

• Demo-Link: https://axel.jerabek.fi/hyperjump_demo/
• Demo-Passwort (Admin): jabittetest

✨ Hauptfunktionen: Organisation, Geschwindigkeit und Kontrolle

HyperJump ist mehr als nur eine Link-Liste. Es ist ein echtes Administrationswerkzeug für Ihren digitalen Alltag:

1. Intelligente Link-Bubbles (Kategorisierung)

Organisieren Sie Hunderte von Links in klaren, faltbaren Kategorien (z. B. “Home System”, “Web Services”, “Local AI”). Jede Kategorie erhält eine definierte Farbe und einen Titel, was die Übersichtlichkeit enorm verbessert.

2. Live-Verwaltung per Admin-Dashboard

Der Clou liegt im passwortgeschützten Admin-Bereich (admin.php). Hier können Sie neue Links hinzufügen, bestehende bearbeiten (URL, Text, Icon, Farbe) oder löschen – und zwar ohne einen einzigen Editor öffnen oder Code neu starten zu müssen.

3. Drag-and-Drop Sortierung in Echtzeit

Sie können sowohl die Reihenfolge der Link-Bubbles als auch die Reihenfolge der Links innerhalb einer Bubble per Drag-and-Drop anpassen. Die Änderungen werden sofort in der order.json gespeichert und auf der Startseite übernommen.

4. Integriertes Wetter-Widget (Optional)

Durch die einfache Integration des OpenWeatherMap-API-Schlüssels in die config.php erhalten Sie auf Ihrer Startseite ein kleines, aber informatives Widget mit der aktuellen Wetterlage für Ihren Standort.

5. Open-Source und Datenschutz

Das gesamte Projekt ist Open Source und auf GitHub verfügbar. Für die Veröffentlichung wurden alle privaten Links, Passwörter und API-Keys entfernt und durch Platzhalter ersetzt. Sie erhalten eine saubere Codebasis, die Sie sicher für Ihre Zwecke anpassen können.

💻 Technischer Unterbau für Entwickler

HyperJump ist bewusst einfach gehalten, um die Abhängigkeiten zu minimieren und die Ladezeit zu maximieren.

• Backend: Minimales PHP (Vanilla) für das Parsen der JSON-Daten und die Admin-Logik (Passwortschutz, Speichern der Links).
• Frontend: HTML5 und Vanilla JavaScript für Drag-and-Drop sowie die Steuerung der Bubbles.
• Styling: Modernes CSS3 mit Fokus auf Responsivität und eine saubere, moderne Ästhetik.
• Icons: Alle Icons werden über Font Awesome eingebunden – einfach den Icon-Namen im Admin-Bereich eintragen.

🛠 Starten Sie Ihr eigenes HyperJump Dashboard

Die Installation ist schnell erledigt, wenn Sie einen PHP-fähigen Webserver zur Verfügung haben.

1. Installation und Grundkonfiguration

1. Klonen Sie das Repository: Navigieren Sie zu Ihrem Webserver-Verzeichnis (z.B. /var/www) und klonen Sie das Projekt:git clone [https://github.com/axeljerabek/hyperjump/](https://github.com/axeljerabek/hyperjump/)
2. Webserver: Stellen Sie sicher, dass PHP (empfohlen: 7.4+) auf Ihrem Webserver läuft.
3. Zugangsdaten konfigurieren (WICHTIG!): Die Datei config.php ist das Herzstück der Konfiguration.

2. Das Admin-Passwort festlegen

Um den Admin-Bereich zu schützen, wird das Passwort als SHA256-Hash in der config.php gespeichert.

1. Editieren Sie mit einem Texteditor (zB nano) die Daten hash_generator.php und geben sie dort ihr gewünschtes Passwort ein.
2. Hash generieren: Rufen Sie nach der Installation die Datei /hash_generator.php in Ihrem Browser auf (z.B. http://localhost/hyperjump/hash_generator.php).
3. Fügen Sie diesen Hash in der config.php in die Konstante ADMIN_PASSWORD ein.

3. Das Wetter-Widget aktivieren

Um die Wetter-Anzeige zu aktivieren, benötigen Sie einen kostenlosen API-Schlüssel von OpenWeatherMap.

1. API-Key anfordern: Registrieren Sie sich bei OpenWeatherMap und generieren Sie einen neuen Schlüssel.
2. Konfiguration anpassen: Fügen Sie den Schlüssel und Ihre lokale Stadt-ID in die config.php ein:define('WEATHER_API_KEY', 'IHR_OPENWEATHERMAP_API_KEY'); define('WEATHER_CITY_ID', 'IHRE_STADT-ID_HIER');

4. Links verwalten

Nachdem Sie die Konfiguration abgeschlossen haben, können Sie den Admin-Bereich aufrufen (Klicken Sie im Widget rechts unten auf Admin oder besuchen Sie /admin.php), um sich anzumelden und Ihre eigenen Links zu verwalten.

Viel Spaß beim Organisieren Ihrer digitalen Welt mit HyperJump! Ich freue mich über Feedback, Beiträge und Forks auf GitHub.

Zum GitHub-Repository von HyperJump