🖼️ Prototype et Maquettes
Maquette HTML cliquable en ligne
Deux expériences produit + écrans détaillés, plein écran, vraies affiches via TMDB :
- Player desktop (avec Store intégré) → tangible-app.eu/app/library.html
- Store Web (navigateur, sans installation) → tangible-app.eu/app/web-store.html
- Page film détaillée (Dune : Part Two) → tangible-app.eu/app/film.html
- Certificat de propriété on-chain → tangible-app.eu/app/certificate.html
Sources :
/app/library.html,/app/web-store.html,/app/film.html,/app/certificate.html+ CSS commun/app/app.css.Choix d’architecture : le Player embarque le Store dans sa sidebar (zone “Store intégré”) pour que l’acte d’achat soit dans le même outil que l’acte de lecture. Le Store Web existe pour capter les utilisateurs non-équipés de l’app et servir de vitrine publique référençable par Google.
Info
Wireframes textuels ci-dessous pour les écrans clés de Tangible Player et Tangible Store. Ont servi de base pour la maquette HTML ci-dessus et devront être complétés en maquettes Figma pour le pitch final.
📺 Écran 1 — Accueil Player (Bibliothèque)
┌──────────────────────────────────────────────────────────────┐
│ [LOGO] Ma bibliothèque Store Collections [👤 Léon] │
├──────────────────────────────────────────────────────────────┤
│ │
│ ▶ CONTINUER │
│ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ Dune │ │Oppenh.│ │ Amélie│ ← 3 films en cours │
│ └───────┘ └───────┘ └───────┘ │
│ │
│ 🎞️ MA COLLECTION [Filtres] [Trier ▾] │
│ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ 🎬 │ │ 🎬 │ │ 🎬 │ │ 🎬 │ │ 🎬 │ │
│ │Titre │ │Titre │ │Titre │ │Titre │ │Titre │ │
│ │2023 4K│ │2021 HD│ │1995 4K│ │2024 4K│ │2020 HD│ │
│ └───────┘ └───────┘ └───────┘ └───────┘ └───────┘ │
│ │
│ 💡 Découvrir → Aller au Store │
└──────────────────────────────────────────────────────────────┘
État : Hors-ligne ✅ · 127 films · 1.4 TB
🛒 Écran 2 — Store (page film)
┌──────────────────────────────────────────────────────────────┐
│ ← Retour Store │
├──────────────────────────────────────────────────────────────┤
│ ┌────────────┐ DUNE : PART TWO │
│ │ │ Denis Villeneuve · 2024 · 2h46 │
│ │ AFFICHE │ ⭐ 8.5/10 · 4K Dolby Vision · VO/VF │
│ │ │ │
│ │ │ Synopsis : Paul Atréides unit les Fremen… │
│ │ │ │
│ └────────────┘ │
│ │
│ 💰 ACHETER │
│ ○ SD (5 €) ○ HD (9 €) ● 4K HDR (13 €) │
│ │
│ 🔐 Inclus : │
│ · Certificat de propriété blockchain │
│ · Téléchargement illimité, tous appareils │
│ · Revendable sur le marché secondaire │
│ │
│ [ ACHETER DÉFINITIVEMENT ] [ Ajouter à ma liste ] │
│ │
│ 💬 Marché secondaire : 3 exemplaires en revente à 8 € │
└──────────────────────────────────────────────────────────────┘
🔐 Écran 3 — Certificat de propriété
┌──────────────────────────────────────────────────────────────┐
│ 🎟️ CERTIFICAT DE PROPRIÉTÉ TANGIBLE │
├──────────────────────────────────────────────────────────────┤
│ │
│ Film : Dune : Part Two (2024) │
│ Qualité : 4K HDR Dolby Vision │
│ Acheté : 15 avril 2026 · 14:32 │
│ Prix : 13 € │
│ │
│ Propriétaire : leon.fvt34 (clé pub 0xAB…E9) │
│ Licence ID : TNGBL-D2-4K-0x9e3f… │
│ Hash fichier : sha3-256 : 8f…c0 │
│ Tx blockchain : 0x7ea…d83 (vérifier ↗) │
│ │
│ ✅ Preuve vérifiable hors-ligne │
│ ♻️ Revendable │
│ │
│ [ Exporter PDF ] [ Revendre ] │
└──────────────────────────────────────────────────────────────┘
🌐 Écran 4 — Page d’accueil du site vitrine (livrable 1)
╔══════════════════════════════════════════════════════════════╗
║ ║
║ TANGIBLE ║
║ Ne louez plus votre passion. Possédez-la. ║
║ Don't rent your passion. Own it. ║
║ ║
║ Le seul endroit où acheter un film signifie vraiment ║
║ le posséder. Chiffré localement. Vérifié on-chain. ║
║ Jouable hors-ligne, à vie. ║
║ ║
║ [ TÉLÉCHARGER GRATUITEMENT ] ║
║ ║
║ Win · macOS · Linux · iOS · Android · Smart TV (bientôt) ║
║ ║
╠══════════════════════════════════════════════════════════════╣
║ 🎬 Player premium 🔐 Propriété réelle ♻️ Revente légale ║
╠══════════════════════════════════════════════════════════════╣
║ « Netflix retire Matrix ? Votre copie reste. » ║
║ ║
║ → Voir comment ça marche ║
║ → Catalogue Store ║
║ → Pour les studios (B2B) ║
╚══════════════════════════════════════════════════════════════╝
📱 Écran 5 — Profil enfant
┌──────────────────────────────────────────────────────────────┐
│ 👶 Profil : Léa (6 ans) │
├──────────────────────────────────────────────────────────────┤
│ Films autorisés : U / -6 │
│ Temps max / jour : 1h30 │
│ Temps restant : 52 min │
│ │
│ 🎬 Mes dessins animés │
│ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ Totoro│ │Wall-E │ │Moana │ │
│ └───────┘ └───────┘ └───────┘ │
│ │
│ 🔒 Verrouillé par biométrie parent │
└──────────────────────────────────────────────────────────────┘
🛠️ Outils pour les maquettes définitives
- Figma — maquettes principales
- Excalidraw — wireframes rapides
- Mermaid — diagrammes de flux dans Obsidian
- Canva — page d’accueil pour le site vitrine