Fiche Descriptive Complète : Luxe & Spiritueux
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template deepseek_html_20260313_c62c2e.html
Version 1.1.0 (Édition Prestige)
Date de création 18 Mars 2026
Auteur / Designer Gemini (Refoia Jeremy Tech Style)
Type de page Fiche Produit E-commerce Luxe
Objectif principal Présentation haut de gamme et conversion d’achat (CTA)
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template est une vitrine immersive pour un produit d’exception. Il utilise des animations fluides (fade-in, flottement, scintillement) et un design sombre (« Dark Mode » luxueux) pour évoquer l’exclusivité. Il combine une illustration vectorielle dynamique (SVG) du produit avec une structure de vente claire.
📌 Public cible (Persona)
👤 Collectionneurs & Amateurs de Cognac : Recherchant une expérience visuelle raffinée.
👤 Acheteurs de cadeaux de luxe : Sensibles à la présentation « Édition Limitée ».
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Standard HTML : HTML5 sémantique.
Style : CSS3 pur (Custom Properties & Animations Keyframes).
Framework JS : Aucun (Performance maximale, 0 dépendance).
Responsive : ✅ Oui (Optimisé pour Mobile, Tablette et Desktop via Media Queries).
📦 Dépendances / Assets
Google Fonts : Cormorant Garamond (Typographie Serif classique).
Icônes : Caractères Unicode (✦) pour la légèreté.
Graphismes : Bouteille générée en SVG inline (pas de requête HTTP externe pour l’image).
📥 ENTRÉES — CONTENU DYNAMIQUE (Variables)
# Nom de la variable Type Obligatoire Description
1 product_title str ✅ Titre (ex: Paradis)
2 vintage_year int ✅ Année du millésime (ex: 2005)
3 price_ttc float ✅ Prix affiché en euros
4 alcohol_pct str ❌ Degré d’alcool (40% Vol.)
🧱 STRUCTURE DU FICHIER — DOM
index.html
(Gradient 135deg sombre)
.container (Centrage flexbox)
.product-card (Effet Glassmorphism & Blur)
.image-section :
svg.bottle : Animation de flottement + dégradés complexes.
.vintage-badge : Badge doré flottant.
.content-section :
.brand : Typographie espacée (Luxury branding).
.details-grid : Grille 2×2 pour les spécifications techniques.
.actions : Boutons CTA avec effet de brillance au survol.
🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM
🎨 Palette de Couleurs (Design Tokens)
Or (Primary) : #d4af37 / #b8860b (Utilisé pour les bordures, titres et CTAs).
Sombre (Background) : #1a1a1a vers #2a1f0f (Évocation du bois de chêne et de l’ombre des chais).
Texte (Ivory) : #f5e6d3 (Lecture douce sur fond sombre).
📐 Mise en Page — Layout
Grille Desktop : 2 colonnes (Image 50% / Contenu 50%).
Grille Mobile : 1 colonne (Image au-dessus du texte).
Animations : fadeIn (apparition), float (lévitation bouteille), shine (reflet sur le bouton).
♿ ACCESSIBILITÉ & SEO
Hiérarchie : Utilisation correcte du
pour le nom du produit.
Contrastes : Texte doré sur fond noir/brun profond (Ratio conforme aux standards luxe).
Sémantique : Boutons
🧪 TESTS & VALIDATION
[x] Responsive : Passage fluide de 2 colonnes à 1 colonne sous 968px.
[x] Performance : Poids de la page extrêmement faible (pas d’images raster type .jpg).
[x] Interactivité : Effet de survol (hover) sur les boutons avec transition de 0.3s.
Avis
Il n’y a pas encore d’avis.