Seedwave ist eine fertige HTML-Vorlage für eine Website zum Austausch frei verbreitbarer Dateien: Open-Source-Software, Distributionen, Musik und Videos unter Creative Commons, gemeinfreie Bücher, Ressourcen für Designer und Lernkurse.

Dunkles Design mit giftgrünem Akzent, große ausdrucksstarke Typografie und viele dezente Animationen: Seiten gleiten beim Öffnen sanft herein, Blöcke erscheinen beim Scrollen, und die Cover der Uploads sind lebendig: Sie bewegen sich wie GIFs.

Die Vorlage ist statisch: nur HTML, CSS und JavaScript. Kein Server, keine Datenbank, kein Bundler und kein npm nötig: Archiv entpacken und die Dateien auf ein beliebiges Hosting hochladen.

SEITEN (7)

• Startseite: Hero-Bereich mit einer „Schwarm“-Animation von Peers, Suche und Schnellkategorien, Zähler, Laufband mit Aktivitäten, Kategorie-Kacheln, Blöcke „Neu auf der Website“ und „Am beliebtesten“ (Top-Liste mit Download-Balken), Aufruf zum Hinzufügen eines Uploads.

• Katalog: Filter nach Kategorien, Lizenzen, Größe und Anzahl der Seeds, Suche, 5 Sortieroptionen, Kachel- und Listenansicht, aktive Filter als „Chips“, endloses Nachladen beim Scrollen. Auf dem Smartphone fahren die Filter von unten herein.

• Upload-Seite: großes Cover, Eigenschaften, Schaltflächen „.torrent“, „Magnet“ (wird in die Zwischenablage kopiert), „Zu Favoriten“, „Teilen“, Anzeige der Upload-Gesundheit, Tabs „Beschreibung“, „Dateien“, „Kommentare“ mit Bewertungsformular, Autor und ähnliche Uploads.

• Profil: animiertes Banner, Ratio-Ring, Statistiken, Aktivitätskarte für das Jahr, Tabs „Meine Uploads“, „Downloads“ mit Fortschritt, „Favoriten“, „Einstellungen“ mit Schaltern.

• Kontakt: Auswahl des Anliegens, Feldprüfung, Zeichenzähler, Animation bei erfolgreichem Absenden, Kontaktdaten, aufklappbare FAQ mit Nachladen.

• Upload hinzufügen: Assistent in drei Schritten, Datei-Upload per Drag-and-drop, Tags, Live-Vorschau der Karte, Datenprüfung und Bestätigung der Rechte an den Dateien.

• 404-Seite.

ANIMATION UND DETAILS

• Sanftes, gestaffeltes Einblenden von Seiten und Blöcken; die Geschwindigkeit wird über eine einzige CSS-Variable geändert.

• 8 animierte Kategorie-Cover in Endlosschleife (animated WebP): Terminal, Code-Editor, Pixel-Spiel, Schallplatte mit Equalizer, Filmstreifen, Buch, Ebenen, Atom.

• Nachladen beim Scrollen mit schimmernden Platzhaltern auf allen Seiten mit Listen.

• Kartenneigung hinter dem Cursor mit Trägheit, Hervorhebung hinter dem Cursor, Welleneffekt beim Klicken auf Schaltflächen, gleitender Hintergrund für Menü und Tabs.

• Animierte Zähler, Diagramm zur Upload-Gesundheit, Pop-up-Benachrichtigungen.

• Die Systemeinstellung „Bewegung reduzieren“ wird berücksichtigt: Große Hintergrundbewegungen werden deaktiviert, sanfte Einblendungen bleiben erhalten.

TECHNISCHES

• HTML5, CSS3 (Variablen, Grid, Flexbox), reines JavaScript ohne Bibliotheken und Frameworks.

• Responsives Layout: von 360 px bis zu breiten Monitoren, mobiles Menü.

• Alle Daten liegen in einer einzigen Datei data.js: Uploads, Kategorien, Kommentare, Fragen, Profil. Leicht durch eine Anfrage an Ihre eigene API zu ersetzen: Die Stellen sind mit Kommentaren markiert.

• Header und Footer sind für alle Seiten gleich und werden an einer Stelle definiert.

• Favicon, Seitenbeschreibungen für Suchmaschinen und soziale Netzwerke, robots.txt, 404-Seite.

• Schriftarten Unbounded, Manrope und JetBrains Mono (Google Fonts, OFL-Lizenz).

• Getestet in Chrome; ausgelegt für moderne Browser (Chrome, Edge, Firefox, Safari).

INHALT DES ARCHIVS

• 7 HTML-Seiten, Stile, Skripte, 8 animierte Cover, Favicon, robots.txt.

• README mit Anleitung zur Veröffentlichung und einer Liste dessen, was für eine echte Website ersetzt werden muss.

WICHTIG

• Dies ist eine Oberflächenvorlage (Frontend). Formulare, Download-Schaltfläche und Kommentare funktionieren als Demo und senden nichts: Für einen echten Tracker brauchen Sie einen eigenen serverseitigen Handler und einen Torrent-Tracker.

• Alle Uploads, Autoren und Kommentare in der Demo sind erfunden, die Cover sind per Code gezeichnet: Die Vorlage enthält keine fremden Materialien.

• Die Vorlage ist ausschließlich für die Verbreitung von Inhalten gedacht, deren Weitergabe erlaubt ist: eigene Werke, Open-Source-Software, Materialien unter freien Lizenzen und Gemeinfreies. Beim Hinzufügen eines Uploads gibt der Nutzer die Lizenz an und bestätigt seine Rechte.