Seedwave est un modèle HTML prêt à l'emploi pour un site d'échange de fichiers librement distribuables : logiciels open source, distributions, musique et vidéos sous Creative Commons, livres du domaine public, ressources pour designers et cours de formation.

Design sombre avec un accent vert citron acidulé, une typographie grande et expressive et de nombreuses animations soignées : les pages apparaissent en douceur à l'ouverture, les blocs se révèlent au défilement et les couvertures des partages sont vivantes : elles bougent comme des GIF.

Le modèle est statique : uniquement HTML, CSS et JavaScript. Pas besoin de serveur, de base de données, de bundler ni de npm : décompressez l'archive et envoyez les fichiers sur n'importe quel hébergement.

PAGES (7)

• Accueil : premier écran avec une animation d'« essaim » de pairs, recherche et catégories rapides, compteurs, bandeau d'activité défilant, tuiles de catégories, blocs « Nouveautés sur le site » et « Les plus populaires » (classement avec barres de téléchargements), invitation à ajouter un partage.

• Catalogue : filtres par catégorie, licence, taille et nombre de seeds, recherche, 5 options de tri, affichage en grille et en liste, filtres actifs sous forme de « chips », chargement infini au défilement. Sur mobile, les filtres s'ouvrent depuis le bas.

• Page de partage : grande couverture, caractéristiques, boutons « .torrent », « Magnet » (copié dans le presse-papiers), « Ajouter aux favoris », « Partager », indicateur de santé du partage, onglets « Description », « Fichiers », « Commentaires » avec formulaire d'avis, auteur et partages similaires.

• Profil : bannière animée, anneau de ratio, statistiques, carte d'activité sur l'année, onglets « Mes partages », « Téléchargements » avec progression, « Favoris », « Paramètres » avec interrupteurs.

• Contact : choix du sujet de la demande, validation des champs, compteur de caractères, animation d'envoi réussi, coordonnées, FAQ dépliable avec chargement progressif.

• Ajout d'un partage : assistant en trois étapes, envoi de fichiers par glisser-déposer, tags, aperçu en direct de la carte, vérification des données et confirmation des droits sur les fichiers.

• Page 404.

ANIMATIONS ET DÉTAILS

• Apparition fluide et en cascade des pages et des blocs ; la vitesse se règle avec une seule variable CSS.

• 8 couvertures de catégories animées en boucle (animated WebP) : terminal, éditeur de code, jeu en pixel art, vinyle avec égaliseur, pellicule, livre, calques, atome.

• Chargement au défilement avec des espaces réservés scintillants sur toutes les pages de listes.

• Inclinaison des cartes suivant le curseur avec inertie, surbrillance sous le curseur, effet d'onde au clic sur les boutons, fond glissant pour le menu et les onglets.

• Compteurs animés, graphique de santé du partage, notifications contextuelles.

• Le réglage système « réduire les animations » est respecté : les grands mouvements d'arrière-plan sont désactivés, les apparitions douces sont conservées.

ASPECTS TECHNIQUES

• HTML5, CSS3 (variables, Grid, Flexbox), JavaScript pur sans bibliothèques ni frameworks.

• Mise en page responsive : de 360 px aux écrans larges, menu mobile.

• Toutes les données se trouvent dans un seul fichier data.js : partages, catégories, commentaires, questions, profil. Facile à remplacer par une requête vers votre propre API : les emplacements sont signalés par des commentaires.

• L'en-tête et le pied de page sont communs à toutes les pages et définis à un seul endroit.

• Favicon, descriptions de pages pour les moteurs de recherche et les réseaux sociaux, robots.txt, page 404.

• Polices Unbounded, Manrope et JetBrains Mono (Google Fonts, licence OFL).

• Testé dans Chrome ; conçu pour les navigateurs modernes (Chrome, Edge, Firefox, Safari).

CONTENU DE L'ARCHIVE

• 7 pages HTML, styles, scripts, 8 couvertures animées, favicon, robots.txt.

• README avec les instructions de mise en ligne et la liste de ce qu'il faut remplacer pour un vrai site.

IMPORTANT

• Il s'agit d'un modèle d'interface (frontend). Les formulaires, le bouton de téléchargement et les commentaires fonctionnent en démonstration et n'envoient rien : pour un vrai tracker, il vous faut votre propre traitement côté serveur et un tracker torrent.

• Tous les partages, auteurs et commentaires de la démo sont fictifs, et les couvertures sont dessinées par code : le modèle ne contient aucun contenu appartenant à des tiers.

• Le modèle est destiné au partage exclusif de contenus dont la diffusion est autorisée : œuvres personnelles, logiciels open source, contenus sous licences libres et domaine public. Lors de l'ajout d'un partage, l'utilisateur indique la licence et confirme ses droits.