poe-preview

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template poe-preview.html

Version 1.0.0

Date de création 19 Mars 2026

Auteur / Designer Refoia Jeremy Tech (Modèle IA)

Type de page Outil Web Monopage (Single Page Tool)

Objectif principal Permettre la saisie et la mise en forme automatique d’un Business Plan avec export texte.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template offre une interface intuitive permettant de transformer des données brutes en un document structuré. L’utilisateur remplit un formulaire (identité du projet, stratégie, prévisions financières sur 3 ans), et l’outil génère instantanément une vue documentée prête à être copiée.

📌 Public cible (Persona)

👤 Entrepreneurs en phase de démarrage.

👤 Consultants souhaitant un outil rapide de structuration d’idées.

👤 Étudiants en gestion/commerce pour leurs projets académiques.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 sémantique.

Framework CSS : Aucun (CSS pur avec Flexbox et CSS Grid).

Framework JS : Vanilla JS (JavaScript natif).

Responsive : ✅ Oui — Adapté aux mobiles (Media Queries incluses).

📦 Dépendances / Assets

Polices : ‘Segoe UI’, Tahoma (Polices système prioritaires).

Couleurs : Dégradés linéaires (Linear gradients).

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 projectName str ✅ Nom commercial ou titre du projet.

2 docId str ✅ Identifiant unique du document (ex: BP-2026).

3 mainContent text ✅ Corps du texte (Résumé, stratégie, etc.).

4 year1 / 2 / 3 int ✅ Chiffres d’affaires prévisionnels annuels.

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

Submit (Générer) : Déclenche le formatage HTML et l’affichage de la section « Output ».

Reset (Réinitialiser) : Vide les champs et masque les résultats.

Copy (Copier) : Utilise l’API navigator.clipboard pour copier le texte brut.

📂 Formulaires / Envois

Type : Client-side Processing.

Méthode : Traitement local via JavaScript (aucun envoi serveur par défaut).

🧱 STRUCTURE DU FICHIER — DOM

poe-preview.html

📌: Configuration CSP (sécurité), encodage UTF-8, et styles internes (Internal CSS).

📌

🏗️ .container : Enveloppe principale centrée.

Header : Titre et icône « 📊 ».

Form Section : Formulaire avec classes .form-group et .financial-inputs (Grid).

Output Section : Zone de résultat cachée par défaut (display: none).

Business Plan : Structure générée dynamiquement (H2, Tableaux).

Success Message : Feedback visuel après copie.

🎨 CHARTE GRAPHIQUE

🎨 Palette de Couleurs

Primaire (Gradient) : #667eea (Bleu indigo) vers #764ba2 (Violet).

Succès : #4caf50 (Vert).

Neutre : #f9f9f9 (Fonds), #e0e0e0 (Bordures).

📐 Mise en Page

Simulation financière : Utilise grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) pour un alignement parfait des inputs de CA.

Typographie : Sans-serif moderne, haute lisibilité.

🧪 TESTS & VALIDATION (STATUT)

# Cas de test Résultat attendu Statut

1 Responsive Menu et inputs s’empilent verticalement sur mobile. ✅ Passé

2 Formatage Les nombres sont formatés avec séparateurs de milliers (ex: 10 000). ✅ Passé

3 Copie Le texte est correctement placé dans le presse-papiers. ✅ Passé

4 Validation Les champs obligatoires empêchent la génération si vides. ✅ Passé

📝 EXEMPLE D’INTÉGRATION JAVASCRIPT

Le template utilise une fonction de formatage pour améliorer la lisibilité des données financières :

JavaScript

function formatNumber(num) {

return num.toString().replace(/B(?=(d{3})+(?!d))/g, ‘ ‘);

}