Willkommen im EnhancelyCompare Wiki!

EnhancelyCompare

EnhancelyCompare ist ein leichtgewichtiges und intuitives Web-Tool, das für den direkten Vergleich von zwei Bildern über Direktlinks entwickelt wurde. Entwickelt mit Unterstützung von Google Gemini und Claude Sonnet 4.6, ermöglicht dieses Tool eine präzise visuelle Analyse dank seiner Zoom-Funktionen. Es verfügt über anpassbare Themes (Hell/Dunkel) sowie einen Modus zum Wechseln zwischen Link-Feldern und dem Browsing-Modus für direkte Uploads über die Benutzeroberfläche.

✨ Funktionen

Multimodaler Vergleich:

Zeigen Sie zwei Bilder gleichzeitig an, um kleinste Unterschiede zu erkennen.

Interaktiver Zoom und Reset:

Erkunden Sie Details mit der integrierten Zoom-Funktion. Eine Schaltfläche „Zurücksetzen“ erscheint automatisch, um zur ursprünglichen Ansicht zurückzukehren.

Verlauf:

Suchen und bearbeiten Sie Ihre Vergleiche mithilfe des Verlaufs in der Seitenleiste.

Sie können jeden Vergleich einzeln löschen oder anheften. Oder Sie löschen alles mit dem roten Button „Alle löschen“. Die gesamte Liste wird dann entfernt. Sie können die gesamte Verlaufsliste auch im JSON-Format importieren und exportieren.

Wenn Sie den Verlauf importieren, während Einträge vorhanden sind, die mit der JSON-Datei identisch sind, erscheint ein Popup-Fenster mit der Frage, ob Sie "ersetzen", "eine Kopie hinzufügen" oder einfach "abbrechen" möchten.

Wenn Sie einen Teil des Verlaufs mit ein oder zwei Klicks exportieren oder löschen möchten, können Sie einen der Einträge (+/- 2 Sekunden) gedrückt halten, wodurch alle Einträge in den Auswahlmodus versetzt werden.

Anschließend können Sie einen oder mehrere Einträge auswählen, die Sie exportieren oder löschen möchten. Beispiel:

Selbstverständlich steht Ihnen die Schaltfläche „Alle auswählen“ zur Verfügung, um alle Einträge auszuwählen. Dies ist ideal, wenn Sie einige wenige Einträge (z. B. 2 oder 3) aus einer großen Anzahl von Verlaufseinträgen entfernen möchten.

Mit der dritten Taste können Sie den Auswahlmodus einfach verlassen und den Vorgang abbrechen.

Link-Umkehrung:

Falls Sie versehentlich Links oder Bilder umgekehrt haben, keine Panik! Sie müssen nicht von vorne beginnen. Mit der Umkehr-Schaltfläche können Sie die Links oder Bilder korrigieren. Nach dem Anklicken wird der Viewport automatisch aktualisiert.

Der Bildvergleich ist nun korrekt.

Erweiterte Kompatibilität:

Funktioniert mit Google Drive-Links sowie mit jedem externen Image-Hosting-Dienst. Läuft perfekt auf Touch-Geräten wie Smartphones und Tablets.

Anpassbare Benutzeroberfläche:

• Wechseln Sie je nach Vorliebe zwischen Dunkel- und Hellmodus.
• Intelligente Theme-Steuerung basierend auf den Standardeinstellungen Ihres Browsers.

Mehrsprachig:

• Integrierte Unterstützung für den Sprachwechsel mit einem Klick. Fünf Sprachen verfügbar:
  • Französisch
  • Englisch
  • Deutsch
  • Italienisch
  • Spanisch
• Intelligente Standard-Sprachsteuerung basierend auf der Browsersprache. Falls die Browsersprache nicht verfügbar ist, wird standardmäßig Englisch gewählt.

Weitere grafische Elemente:

• Besucherzähler unten rechts neben den Credits hinzugefügt (Achtung: bei aktiviertem Werbeblocker nicht sichtbar).
• GitHub-Link zur Dokumentation links neben den Credits hinzugefügt.

🚀 Bedienungsanleitung

Links abrufen (wenn Modus „URL-Links einfügen“ aktiv ist):

Kopieren Sie die URL Ihrer Bilder (Google Drive, Imgur oder andere).

Anzeige konfigurieren:

Fügen Sie die Links in die entsprechenden Felder ein und geben Sie jedem Bild einen Titel.

„Durchsuchen“ nutzen (wenn Modus „Upload via ImgBB“ aktiv ist):

Navigieren Sie zum Ordner Ihrer Bilder, um diese zu importieren.

Generieren:

Klicken Sie auf die Schaltfläche „Anzeige generieren“, um den Vergleich anzuzeigen.

Analysieren:

Nutzen Sie die Maus, um bei Bedarf in spezifische Bereiche zu zoomen.

Link kopieren:

Klicken Sie auf „GitHub-Link kopieren“, um einen Freigabelink zu erstellen.

📺 Tutorial: Wie man das Vergleichstool nutzt

Lernen Sie, wie Sie Ihre Bilder integrieren und mit wenigen Klicks eine Vergleichsansicht erstellen. Dieses Video zeigt Ihnen, wie Sie Direktlinks von verschiedenen unterstützten Bildhosting-Diensten abrufen können.

🛠️ Behandelte Kernpunkte:

• Bildhosting: Verwendung von Zupimages, Freeimage.host, ImgBB, PostImage und Imgur.
• Extrahieren von Direktlinks: Wie man die URL abruft, die auf .jpg, .png oder .webp endet (unerlässlich für die Anzeige).
• Anpassung: Ändern der Titel (FR, EN, IT, ES, DE) und Verwaltung des Vollbildmodus.
• Teilen: Generierung eines eindeutigen Links über GitHub, um Ihren Vergleich zu teilen. Ich habe die TinyURL-API hinzugefügt, um den Freigabelink zu kürzen. Es öffnet sich also ein neues Fenster, aber Sie können auf den Vorschaubereich klicken, um direkt zum Bildvergleich zu gelangen.
• Auflösung: Unterstützung von hochauflösenden Bildern. Bitte beachten Sie, dass das Laden der Bilder etwas länger dauern kann, bevor sie angezeigt werden.

🚀 Nächste Schritte (Roadmap)

• Unterschiedliche Seitenverhältnisse: Hinzufügen eines Bedienfelds (vielleicht), um die Bilder anzupassen, wenn die Seitenverhältnisse der 2 Bilder unterschiedlich sind.

---

📜 Liste der Updates für EnhancelyCompare:

22/03/2026:

• Erstellung des Bildvergleichstools.
• Umbenennung von index in index.html.
• Titel-Update und Optimierung der Bildvergleichslinks.
• Titel-Update und Optimierung des Bildrenderings.
• Titel-Update und Behebung von Problemen bei der Bildanzeige.
• Überarbeitung der HTML-Struktur und des Stils für das Bildvergleichstool.
• HTML-Update für Theme und Funktionen der Dark Edition.
• Wechsel zu Version 17 mit Unterstützung für das helle Theme.
• Titel-Update in index.html.
• Hinzufügen des Favicon-Links zu index.html.
• Update des Favicon-Links in index.html.
• Update des Favicon-Links mit dem Versionsabfrageparameter.
• Update von index.html.
• Überarbeitung der Credits und der Footer-Übersetzungen.
• Verbesserung der Sichtbarkeit und Zentrierung von Masken und Griffen.
• CSS-Überarbeitung für die Elemente before-mask und handle.
• Verbesserung der Sichtbarkeit und Zentrierung der Griffe.

23/03/2026:

• Refaktorisierung der Logik zur Berechnung und Aktualisierung der Ansichtsfenstergröße.
• Hinzufügen eines Reset-Buttons und Verbesserung der Zoom-Funktion.
• Hinzufügen von schwebenden Steuerelementen und Verbesserung des Layout-Managements.
• Refaktorisierung der HTML-Struktur und Verbesserung des Stils.
• Korrektur der italienischen Übersetzung und Optimierung des URL-Textes.
• Entfernung der Unterstützung für Italienisch und Spanisch.
• Hinzufügen der Sprachoptionen Italienisch und Spanisch.
• Refaktorisierung der Stile für ein besseres Layout und bessere Reaktionsfähigkeit.
• Verbesserung der Touch-Interaktion und Leistung in index.html.
• Optimierung der HTML-Struktur und des Stils des Bildvergleichstools.
• Update index.html
• Update index.html
• Update index.html
• Update index.html
• Update index.html

24/03/2026:

• 27 Verbesserungs-Patches.

25/03/2026:

• 5 Verbesserungs-Patches.

26/03/2026:

• 7 Verbesserungs-Patches.

27/03/2026:

• 4 Verbesserungs-Patches.

28/03/2026:

• 20 Verbesserungs-Patches.

29/03/2026:

• 9 Verbesserungs-Patches.

30/03/2026:

• 7 Verbesserungs-Patches.

31/03/2026:

• 13 Verbesserungs-Patches.

03/04/2026:

• 4 Verbesserungs-Patches.

05/04/2026:

• 8 Verbesserungs-Patches.

08/04/2026:

• 16 Verbesserungs-Patches.

09/04/2026:

• 2 Verbesserungs-Patches.

10/04/2026:

• 1 Verbesserungs-Patch.

12/04/2026:

• 4 Verbesserungs-Patches.

24/04/2026:

• Update des Freeimage-Links, damit er auf die Download-Seite verweist.

25/04/2026:

• Wechsel des Upload-Dienstes: Freeimage.host zu ImgBB.
• Verbesserung der HTML-Struktur und des Stils.

26/04/2026:

• Verschiebung des Sprach-Dropdown-Menüs von unten links nach oben rechts neben die Theme-Schaltfläche.
• Anpassung des Dropdown-Menüs zum Umschalten zwischen dem Modus "Links in Textfelder einfügen" und dem Modus "Upload via ImgBB". Jetzt ist beim Öffnen der Benutzeroberfläche standardmäßig der Modus "Upload via ImgBB" aktiv. Die Hoster-Schaltflächen sind in diesem Modus ausgeblendet.

28/04/2026:

• Update des Viewports zur Minimierung der Verschiebung zwischen normalem Modus und Vollbildmodus.
• Verbesserung des Stils und der Funktionalität der Download-Schaltfläche.
  • Hinzufügen von Hover-Stilen für die Download-Schaltflächen und Verbesserung der Download-Funktion mit Drag-and-Drop-Unterstützung.
  • Hinzufügen eines Fortschrittsbalkens für den Download und von Schaltflächen-Containern.
  • Update des Stils des Fortschrittsbalkens und der Schaltflächen während des Ladens.

29/04/2026:

• Verbesserung der Logik für das Rendering und die Transformation von Bildern.
  • Refaktorisierung der Rendering-Funktion für eine bessere Verwaltung und Transformation von Bildern.
• Verbesserung der Logik für die Größenänderung des Fensters und der Kommentare.
  • Überarbeitung der Kommentare und Verbesserung der Logik zur Neukalibrierung des Zooms.

30/04/2026:

• Update des Stils des Fortschrittsbalkens und der Schaltflächen während des Ladens.
  • Hinzufügen eines Fortschrittsprozentsatzes.
• Update des Verhaltens des Fortschrittsbalkens während des Ladens.
  • Kleines Update. Wiederherstellung der Bereinigungsleiste, die das Laden bestätigt.
• Update der Kopier-Warnmeldungen in mehreren Sprachen.
• Verbesserung der Hover- und Aktivierungseffekte von Schaltflächen.
  • Hinzufügen von Hover- und Aktivierungseffekten für Schaltflächen, um die Konsistenz der Benutzeroberfläche zu verbessern.
• Hinzufügen der Spracherkennung und der anfänglichen Übersetzung.
  • Ermöglicht die richtige Standardsprache basierend auf der Browsersprache.

01/05/2026:

• Refaktorisierung der Spracherkennung und Theme-Initialisierung.
  • Hinzufügen der Automatisierung des Wechsels zwischen dunklem und hellem Theme basierend auf dem Standard-Theme des Browsers.
  • Hinzufügen eines Listeners für Änderungen des System-Themes in Echtzeit.

02/05/2026:

• Hinzufügen von Funktionen zur automatischen Vorschau und Dateivalidierung für Bild-Uploads, einschließlich Benutzeroberflächenelementen zur Anzeige ausgewählter Dateien und Fortschrittsbalken.
  • Implementierung eines automatischen Vorschau- und Validierungssystems für hochgeladene Dateien.
• Ersetzen des alten Zählers durch hitwebcounter.
  • Der alte Zähler von freecounterstat.com scheint tot zu sein.

03/05/2026:

• Update der Meta-Tags title und viewport in index.html.
  • Automatisierung der Viewport-Generierung.
  • Echtzeit-Automatisierung der Titelaktualisierung beim Ausfüllen jedes Titelfelds.
  • Änderung des Programmtitels von "Einfacher Bildvergleich" zu "Willkommen bei EnhancelyCompare"
  • Änderung von "GitHub-Link kopieren" zu "Freigabelink kopieren "
  • Update des title-Tags mit dem Namen „EnhancelyCompare“ für die Vorschau im Browser-Tab.
• Hinzufügen einer Kopfzeile und des Theme-Stils.
  • Überarbeitung des Stils der Kopfzeile und der Steuerelemente, Update der Theme-Farben.
  • Update des Stils der Home-Schaltfläche und Hinzufügen des Kopfzeilen-Layouts.
• Neujustierung der Position der Datei-Löschen-Schaltfläche.

04/05/2026:

• Fixierte Kopfzeile und den Namen auswählbar machen.
  • Korrektur der schwebenden Kopfzeile, um sie zu fixieren.
• Verhindern der Textauswahl im Anzeigebereich des Sliders.
  • Die Eigenschaft user-select wurde geändert, um die Textauswahl zu verhindern, und webkit-user-select wurde zur Sicherstellung der Kompatibilität hinzugefügt.
• Update des Footer-Links zum GitHub-Wiki.
• Entfernung der automatischen Rückkehr der Viewport-Slide-Leiste beim Loslassen und Hinzufügen der Neuzentrierung der Leiste bei jedem Aktualisieren des Viewports.
• Hinzufügen adaptiver Stile für kleine Bildschirme
• Verbesserung der Kopfzeilenstile für Ausrichtung und Auffüllung.
  • Hinzufügen von Stilen zur Kopfzeile für eine bessere Ausrichtung und eine präzisere Auffüllung.

05/05/2026:

• Ersetzen der Home-Schaltfläche durch einen klickbaren Markennamen.
• Anpassen der Stile und der Medienabfrage für den Haupttitel.
  • Anpassung der Höhe des Haupttitels im Hochformat für Smartphones.

06/05/2026=:

• Die Logik zum Umschalten der Sprache wurde überarbeitet und das CSS bereinigt.
  • Der Wiki-Link wurde basierend auf der in der Funktion changeLang ausgewählten Sprache aktualisiert und unnötige !important-Anweisungen wurden entfernt.
• Header-Stile für kleine Bildschirme überarbeiten.
• Die Hilfemeldungen von hostHelp wurden zur besseren Verständlichkeit überarbeitet.
  • Der Hilfetext für den Import von Bildlinks wurde in mehreren Sprachen aktualisiert.

07/05/2026:

• WebP-Komprimierungsfunktionalität hinzufügen und Benutzeroberflächenaktualisierungen.
• Sprachumschaltung mit Mausradunterstützung implementiert.
  • Die Funktionalität zur Sprachumschaltung mittels Mausradereignissen wurde hinzugefügt.
• Eingabefelder für mehrsprachige Unterstützung aktualisiert.
  • Aktualisierte Platzhalter für Eingabefelder in verschiedenen Sprachen.

08/05/2026:

• Füge einen Ereignis-Listener für das Scrollrad zur Modusauswahl hinzu.
  • Das Scrollen mit der Modustaste ist nun möglich.
• Einrückung korrigieren und Absatz im Host-Hilfetext neu anordnen.

10/05/2026:

• Eine Seitenleiste mit dem Vergleichsverlauf wurde hinzugefügt.
  • Neu ist die Seitenleiste LocalStorage, mit der Sie Vergleiche abrufen und bearbeiten können. Dies können Links oder Titel sein. Die Bearbeitung wird in Ihrem Verlauf gespeichert. Sie können einzelne Vergleiche oder alle gleichzeitig löschen. Da es sich um den LocalStorage handelt, gehen natürlich alle Ihre Vergleiche verloren, wenn Sie Ihren Browserverlauf löschen.
• Thumbnail-Generierung implementiert und saveComparison aktualisiert.
  • Eine Funktion zur Generierung eines 40x40-Thumbnails aus einer Bild-URL wurde hinzugefügt, inklusive Fallback für CORS-Probleme. Die Funktion saveComparison wurde aktualisiert, um das generierte Thumbnail zu verwenden.
• Die Erkennung des Freigabemodus wurde in index.html implementiert.
  • Die synchrone Erkennung des Freigabemodus wurde hinzugefügt, um ein Flackern der Seitenleiste zu verhindern.
• Den Schaltflächen wurde eine Spiegelanimation hinzugefügt, die beim Überfahren mit der Maus angezeigt wird.

11/05/2026:

• Position und Z-Index der Seitenleiste anpassen.
  • Die Höhe der Seitenleiste so einstellen, dass sie direkt unter der Kopfzeile positioniert wird.
• Implementiere eine Vollbildumschaltung mit Beibehaltung der Bildmitte.
  • Vollbild-Umschaltfunktion mit Beibehaltung der Mittelposition hinzugefügt.
• Es wurde eine Schaltfläche zum Wechseln zwischen Eingabefeldern hinzugefügt.
  • Mit dieser Schaltfläche kann nun zwischen den Eingabefeldern gewechselt werden. Die Darstellung wurde aktualisiert.

13/05/2026:

• Die Seitenleistengestaltung wurde mithilfe eines Pseudo-Elements verbessert.
  • Ein Pseudo-Element wurde zur visuellen Anpassung in die Seitenleiste eingefügt.

14/05/2026:

• Verbesserte SVG-Übergangseffekte im Tauschbutton.
  • Fügt sanfte Übergangseffekte für SVG im Tauschbutton hinzu.

15/05/2026:

• Füge einen Rotationseffekt beim Überfahren des Tausch-Buttons mit der Maus hinzu.
  • Das SVG-Symbol dreht sich nun beim Überfahren mit der Maus um 180°.

16/05/2026:

• Die Datei index.html wurde mit verschiedenen Stil- und Darstellungsänderungen aktualisiert.
  • Den internen Schaltflächen des Viewports wurde ein Spiegeleffekt hinzugefügt. Außerdem wurden kleinere Anpassungen am Spinner und seinem Container vorgenommen.
• Überarbeiten Sie das Layout und die Auswahlstile des Modus.
  • Zentrieren Sie die Modus-Schaltfläche neu, um eine perfekte vertikale Ausrichtung zwischen den Titelfeldern und den „Durchsuchen“-Schaltflächen zu gewährleisten.
• Reestructurar el diseño y los estilos de selección del modo.
  • Recentrar el botón de modo para lograr una alineación vertical perfecta entre los campos de título y los botones "Explorar".

02/06/2026:

• Füge Google Analytics-Ereignisse für Interaktionen in der Seitenleiste hinzu.

03/06/2026:

• Richte Google Analytics Tracking für Seitenleisten-Aktionen ein.
  • Google Analytics Ereignisverfolgung für Bearbeitungen und Pinning in der Seitenleiste hinzugefügt.

05/06/2026:

• Den Verlaufseinträgen wurden Informationen zum Bildformat und zur Auflösung hinzugefügt.
• Aktualisierte Übersetzungen für historische Einträge und korrigierte Formatierung in index.html.

08/06/2026:

• Refaktoriere Seitenleisten-Buttons und importiere modale Stile
  • Änderung des "Alles löschen"-Button der Seitenleiste und Hinzufügen von 2 neuen Buttons zum Importieren und Exportieren der Inhalte der Seitenleisteen.
• Vergrößern Sie die Miniaturansichten in den Verlaufseinträgen.

09/06/2026:

• Einen Fehler in neuen Geschichtseinträgen behoben.
  • Beim Hinzufügen eines neuen Vergleichs wurden Auflösungs- und Formatinformationen beim ersten Versuch nicht angezeigt. Man musste auf den Eintrag klicken, damit die Akualisierung fertig war. Jetzt ist es behoben.

10/06/2026:

• Passe den Stil der Symbole der Seitenleiste-Geschichtseinträge an.
  • Die Symbole in den Seitenleisten-Einträgen sind jetzt perfekt transparent und vertikal statt horizontal ausgerichtet.
• Implementiere einen Multi-Select-Modus mit Aktionsleiste.
  • Die Möglichkeit hinzugefügt, einen oder mehrere Einträge auszuwählen, um die Auswahl exportieren oder löschen zu können. Dafür reicht ein 2-Sekunden-Druck, um das System auszulösen. Es werden 2 neue Knöpfe erscheinen. Ein Korb🗑 und ein Kreuz❌. Die erste löscht die Auswahl, und die zweite hebt die Auswahl auf.

11/06/2026:

• Fügen Sie einen Button und vollständige Auswahlfunktion hinzu.
• Verbesserte Zoom-Funktionalität und eine adaptive Maske basierend auf dem Thema unter dem Bild links hinzugefügt.
  • Der Zoom-Container wurde ein Hintergrund hinzugefügt und die Maße von zoomerB aktualisiert.

12/06/2026:

• Fehlerbehebung: Vergleichseintrag kann nicht neu generiert werden, wenn er gelöscht wird.
  • Wenn wir einen neuen Vergleich erstellen und den Eintrag aus dem Verlauf löschen, können wir den Eintrag nun neu generieren.

13/06/2026:

• Lösche den API-Schlüssel und aktualisiere den Upload-Endpunkt (Neuer API-Schlüssel generiert).
  • Übertragung von "enhancelycompare" an CloudFlare und Ausblendung des API-Schlüssels.
• Aktualisieren Sie die GitHub-Links zum neuen Repository.
• Die Basis-URL für das Dateiprotokoll wurde aktualisiert.

14/06/2026:

• Verbesserte Handhabung lokaler Speichereingaben und -updates.
  • Neugestaltung des Eingabe-Event-Handlers für eine effizientere Handhabung lokaler Speicherupdates und eine ordnungsgemäße Trennung neuer Einträge.
• Refaktorisieren von Historie-Item-Auswählern in index.html
  • 2 kleine kleinere Korrekturen. Die Reihenfolge, in der Einträge in absteigender Reihenfolge aufgezeichnet wurden, in die logischere aufsteigende Reihenfolge geändert und Titel, die beim Bearbeiten eines Geschichtseintrags nicht in Echtzeit aktualisiert wurden, korrigiert.
• Aktualisierungsbestätigungsmeldungen und Import-Fehlertexte.
  • Die Warnmeldung "❌ Ungültige JSON-Datei" in den 5 Sprachen der Schnittstelle hinzugefügt.

15/06/2026:

• Überarbeitete die Handhabung von Daten in historischen Einträgen.
• Aktualisieren Sie den Titel und fügen Sie eine Meta-Beschreibung in der index.html-Datei hinzu.
• Verbesserte index.html Datei mit Open-Graph-Meta-Tags.
  • Open-Graph-Meta-Tags für ein besseres Teilen in sozialen Medien hinzugefügt.

16/06/2026:

• Verbesserte lokale Speicherverwaltung für Swap-Einträge.
  • Hinzugefügte Funktionen zum Speichern von Handelsdetails im lokalen Speicher und zur Aktualisierung des Bearbeitungsstatus von Einträgen.

17/06/2026:

• Open Graph und Twitter Meta-Tags zu index.html hinzugefügt.
  • Meta-Zeile hinzugefügt, um ein Thumbnail unter dem Link anzuzeigen, sobald dieses auf anderen Seiten und sozialen Netzwerken gepostet wurde.
• Füge das Meta-Tag für den Open Graph-Sitenamen hinzu.

18/06/2026:

• Meta-Beschreibung und Open Graph-Tags aktualisieren.