Vynl, site vitrine
Site marketing statique de Vynl, la plateforme de streaming de musique IA
(AI-generated et AI-assisted). HTML, CSS et JavaScript natifs : pas de
framework, pas de build, aucune dépendance. Il oriente vers l'app auditeur et
le Creator Studio, et affiche le catalogue réel via l'API publique.
Pages
| Fichier | Contenu |
|---|
index.html | Accueil : hero (disque géant), bande défilante, pourquoi Vynl (défilement horizontal épinglé), les 2 étiquettes, catalogue réel, studio (pile de cartes), appel final |
creators.html | Creator Studio : bento incliné des fonctionnalités (Live / Coming), frise verticale en 4 étapes, prérequis |
transparency.html | Étiquettes AI-assisted / AI-generated, royalties centrées sur l'utilisateur |
roadmap.html | Avancement de la beta : ce qui est en ligne et ce qui reste à construire (musique AI-assisted, abonnements, publicité, royalties, versements, textes légaux, migration de la base) et, en tête, les quatre règles de la bêta. Les étapes sont écrites en dur dans le HTML (une li par étape, classe road__item--live pour « Live ») ; le compteur du hero est un attribut --v (pourcentage) et un texte à mettre à jour à la main |
privacy.html, terms.html, creator-terms.html, legal-notice.html | Brouillons juridiques, à relire avec un juriste (voir « Pages légales » plus bas) |
takedown.html | Signalement des ayants droit (brouillon juridique, noindex) : formulaire public envoyé à POST /rights/claims de l'API ; renvoie un numéro de dossier (RC-…). Les signalements se traitent dans la page « Claims » de l'admin |
404.html | Page introuvable (chemins absolus : elle est servie à l'adresse demandée) |
Structure
css/style.css tokens de design + tous les composants
js/config.js URLs des autres apps et de l'API (seul endroit à modifier)
js/takedown.js formulaire de signalement (takedown.html) : validation, envoi à l'API, numéro de dossier
js/main.js liens, menu mobile, disque, apparition au scroll, éclairage des tuiles, catalogue
js/motion.js scénographie au défilement (GSAP + ScrollTrigger), tout est optionnel
assets/vendor/ GSAP 3.12.7 et ScrollTrigger, hébergés localement (116 Ko)
assets/fonts/ Dela Gothic One et Sora (latin, hébergées localement)
assets/icons.svg sprite d'icônes Phosphor (regular, play et pause en fill)
assets/vynl-icon.png icône du logo, 192 px (en-tête et pied de page)
assets/vynl-logo-720.webp logo en grand, avec transparence (hero Créateurs, filigrane de l'appel final)
favicon.ico, favicon-32.png, favicon-192.png, apple-touch-icon.png (favicon.png : ancien fichier, plus référencé)
vercel.json { "framework": null, "cleanUrls": true }
Lancer en local
python3 -m http.server 8110
Puis ouvrir http://localhost:8110. En local, le catalogue interroge
http://localhost:4000 (l'API) ; s'il ne répond pas, la section reste
simplement masquée.
URLs propres. Sur Vercel, cleanUrls sert /roadmap et redirige
/roadmap.html vers /roadmap. Les liens du HTML gardent .html pour que la
navigation marche aussi avec ce serveur Python, qui ne connaît pas les URLs
propres (le visiteur est simplement redirigé).
Identité
Direction artistique « studio d'écoute nocturne » : un fond très sombre et une
seule source de lumière bleue qui fait briller le vinyle. Règle : 80 % de
sombre, 15 % de bleu, 5 % de cyan (le cyan est rare : ce qui est actif).
| Token | Valeur | Usage |
|---|
--vynl-nuit | #050816 | fond principal |
--vynl-abysse | #0B1130 | menu mobile, fonds de disque |
--vynl-vinyle | #17204F | survols |
--vynl-sillon | #32428C | bordures (à 40 %), pistes de progression |
--vynl-bleu / --vynl-bleu-profond | #0059F9 / #001CB2 | boutons, survol |
--vynl-cyan | #19E3FF | accent rare : actif, focus, badge AI-generated |
--vynl-reflet | #90BFE9 | reflets du disque |
--vynl-indigo / --vynl-ocean | #1C2C8C / #0F4A9E | teintes des sections et des panneaux |
--vynl-azur / --vynl-azur-clair / --vynl-ciel | #3D8BFF / #94BFFF / #6FD6FF | détails, mots mis en valeur, icônes |
Texte : blanc #FFFFFF, bleu-gris #A9B4D6, bleu-gris foncé #6B77A6
(réservé à la ligne légale, jamais sur fond bleu : le contraste y est trop bas).
Polices : Dela Gothic One pour la marque et les deux grands titres
d'impact (hero et appel final, jamais sous 24 px), Sora pour tout le
reste. Formes : boutons en pilule de 48 px, panneaux 24 px, cartes 16 px,
badges 8 px. Une seule lueur forte par écran, animations de 200 à 500 ms.
Seul dégradé sur du texte : l'accent des titres de hero.
Principes de mise en page
- Pas de trait entre les sections : les sections bleues (
.section--tint)
se fondent dans le fond. Le dégradé est transparent aux deux bouts (rampe en
S sur --fade) et déborde de --blend sur les voisines sans bouger le
contenu, donc deux sections bleues qui se suivent se mélangent sans creux.
- Un seul H1 par page, des H2 qui portent de vrais mots-clés (musique IA,
artistes IA). Pas de H2 décoratifs : les titres du pied de page sont des
p.
- Aucun tiret long dans le texte visible (point, virgule ou deux-points).
- Mouvement motivé : chaque animation a une raison (voir l'en-tête de
js/motion.js). Le disque et le logo tournent avec le défilement ; la section
« why » est épinglée et défile à l'horizontale (trois idées, dans l'ordre) ;
les mots AI-assisted / AI-generated arrivent de côté et se remplissent ; les
cartes du studio se superposent en s'assombrissant ; le fil de la frise et les
arcs du schéma se dessinent. Avec prefers-reduced-motion, sans JavaScript ou
si GSAP ne charge pas : la section « why » devient un défilement horizontal
natif, la pile de cartes reste collante en CSS pur, les mots sont déjà pleins.
- Même scénographie sur mobile et sur ordinateur : la section « why » est
épinglée sur les deux (panneaux à 82 % de la largeur sur mobile), la pile de
cartes reste collante, le disque déborde, le bento garde son inclinaison. Seuls
les effets au curseur (éclairage des tuiles, boutons magnétiques) sont réservés
aux pointeurs précis.
ScrollTrigger.config({ ignoreMobileResize: true })
évite que la barre d'adresse mobile ne décale les sections épinglées.
- Ordre de création des animations :
js/motion.js crée la section épinglée
EN PREMIER (avec refreshPriority). Un épinglage décale tout ce qui est en
dessous et ScrollTrigger calcule les positions dans l'ordre de création : créé
après, il laissait les mots des étiquettes, la pile et l'appel final déjà
terminés dès le chargement (le remplissage vide vers plein ne se voyait plus).
- Mots d'étiquette = titres : « AI-assisted » et « AI-generated » sont des
h3 visibles (pas de badge en doublon), dimensionnés pour tenir en entier dans
la largeur sur ordinateur comme sur mobile.
À savoir
- Liens vers les apps : ils vivent dans
js/config.js et sont injectés via
data-link="<clé>". Le href écrit dans le HTML n'est qu'un repli sans JS.
- CORS : le catalogue appelle l'API depuis le navigateur. Le domaine de ce
site (
https://www.vynl.ch) doit figurer dans CORS_ALLOWED_ORIGINS sur Render, sinon la section
« New AI tracks, just pressed » ne s'affichera jamais (sans erreur visible).
- Aucune donnée inventée : pas de faux artistes ni de chiffres. Les
fonctionnalités pas encore construites sont marquées « Coming ».
- Animation du disque : purement décorative. Elle démarre à l'arrêt si le
visiteur a activé
prefers-reduced-motion.
- Thème : sombre uniquement, comme dans la DA (le mode clair n'est pas prévu
pour le site).
- La roadmap reflète le code : une étape est « Live » seulement si la
fonction marche dans l'API, le Studio ou l'app d'écoute (à vérifier dans leur
code, pas de mémoire). Tout ce que la vitrine promet sans que ce soit en ligne
doit avoir une étape « Coming » et une mention discrète sous la promesse :
<p class="dev-note">… <a href="roadmap.html#next">See the roadmap</a></p> (anneau
gris comme les étapes « Coming »). À retirer, avec l'étape passée en « Live »,
quand la fonction sort. Pendant la bêta : seule la musique déclarée AI-generated
est acceptée (règle de l'API et de l'admin, provenance.ts).
- Domaines : le site est sur
www.vynl.ch (vynl.ch redirige vers www),
l'app d'écoute sur app.vynl.ch, le Studio sur creator.vynl.ch. Ces adresses
vivent dans js/config.js ; le href écrit dans le HTML est le repli sans JS et
doit rester identique. L'API est sur api.vynl.ch (domaine personnalisé du service
Render ; l'ancienne adresse music-app-api-9cjg.onrender.com répond toujours).
- À ajouter plus tard : image de partage Open Graph,
canonical, og:url,
sitemap.xml et robots.txt (le domaine est connu : https://www.vynl.ch).
Pages légales (brouillons)
privacy.html, terms.html, creator-terms.html et legal-notice.html sont des
exemples, écrits à partir de l'inventaire de
Vynl-App-1.1.2/V1.1.2/docs/PRIVACY_POLICY_DRAFT.md et du code de l'API, pour être
relus avec un juriste (droit suisse nLPD et RGPD). Un bandeau « Draft for legal
review » est affiché en haut de chaque page.
- Les champs à remplir sont des
<span class="ph">[…]</span> (société, adresse,
contacts, durées, droit applicable). Les retrouver : grep -n 'class="ph"' *.html.
- Les pages portent
<meta name="robots" content="noindex"> : à retirer une fois
les textes validés, ainsi que le bandeau, la ligne « Draft v0.1 » et le
« (Draft) » des titres.
- Les liens du pied de page (
Privacy, Terms, Creator Terms, Legal notice)
sont sur toutes les pages. Les futures URLs PRIVACY_POLICY_URL et TERMS_URL
de l'app auditeur sont /privacy et /terms.
- Le Studio affiche encore un texte provisoire pour les Creator Terms : il doit
pointer vers
https://www.vynl.ch/creator-terms.
