Was es ist

Eine Front-End-Vorlage für eine Krypto-Transaktionsseite, die wie ein Beleg gelesen wird. Der erste Bildschirm beantwortet, was der Benutzer tatsächlich wissen möchte: Hat es funktioniert, was habe ich gegeben, was habe ich nach Gebühren erhalten und was hat es gekostet. Die On-Chain-Details befinden sich weiterhin da, nur einen Klick weiter unten.

Reines HTML, CSS und Vanilla JavaScript. Kein Framework, kein Build-Schritt, kein Backend.

Funktionen

- Belegorientierte Kopfzeile: Status, gesendeter Betrag, nach Gebühren empfangener Betrag, Gesamtkosten

- Abgleichendes Ledger: Pool-Preis, Pool-Gebühr, Aggregator-Gebühr, Netzgebühr und Miete addieren sich zur tatsächlichen Saldoänderung des Wallets (das Beispiel-Swap-Balances zum letzten Lamport)

- Routenansicht: Wallet zu Aggregator zu Pool zu Wallet in einfachen Worten, Beträge in jeder Zeile; eine Detaillierte Ansicht listet jede Bewegung mit einem Saldoabgleich auf

- Fehlzustand: zeigt, dass nichts getauscht wurde, was trotzdem bezahlt wurde und warum

- Besucherzustand: bei jemand anderem Transaktion liest sich "Dieses Wallet" statt "du"

- Exakte Werte: jede gerundete Zahl öffnet ihren exakten Wert und kopiert ihn korrekt

- Klarsprachige Definitionen für Fachbegriffe direkt dort, wo sie erscheinen

- Desktop und Mobile, helles und dunkles Theme, mit Tastatur zugänglich

- Design-Tokens in einer CSS-Datei für schnelle Markenanpassung

Was Sie bekommen

index.html (die vollständige interaktive Seite), 18 eigenständige Bildschirm-Layouts in exakten Größen (Desktop 1440 und Mobile 390: Beleg, Ledger, Route, exakter Wert, Glossar, technische Details, Besucher, Fehlgeschlagen, Design-System-Tafel), CSS-Tokens und -Stile, das Render-Modell in Vanilla JS, ein echtes Solana-Swap-Beispiel als Beispielsdaten (Rohes RPC-JSON), README mit Anleitung, wie Sie Ihre eigene Transaktion einbinden, MIT-Lizenz.

Umfang: Das Datenmodell wurde auf einem Solana-Swap (Jupiter über Pump.fun AMM geroutet) aufgebaut und geprüft. Andere Routen oder Transaktionstypen werden gerendert, aber deren Gebührenaufstellung könnte Änderungen in model.js erfordern.

Live-Demo des ursprünglichen Konzeptaufbaus (die Vorlage wird mit neutraler "Explorer"-Branding ausgeliefert): https://swiftbotlab.github.io/solscan-receipt-redesign/prototype.html

Fragen werden im Getly-Chat beantwortet.