Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calendrier Pré-Ouverture - École de Musique 2025</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .timeline-item:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 7px; | |
| top: 24px; | |
| height: calc(100% - 24px); | |
| width: 2px; | |
| background: #3b82f6; | |
| } | |
| .phase-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .checklist-item:hover { | |
| background-color: #f8fafc; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-12 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">Calendrier Pré-Ouverture</h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold text-indigo-600">École de Musique - Septembre 2025</h2> | |
| <div class="mt-6"> | |
| <div class="inline-flex items-center bg-indigo-100 text-indigo-800 px-6 py-2 rounded-full text-sm"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>9 mois pour construire votre succès</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Progress Overview --> | |
| <section class="bg-white rounded-xl shadow-md p-6 mb-10"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-line text-indigo-600 mr-2"></i> | |
| Vue d'ensemble du projet | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <h4 class="font-medium text-indigo-700 text-sm mb-1">Date d'ouverture</h4> | |
| <p class="text-xl font-bold text-indigo-900">15 Septembre 2025</p> | |
| </div> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <h4 class="font-medium text-indigo-700 text-sm mb-1">Mois restants</h4> | |
| <p class="text-xl font-bold text-indigo-900">9 mois</p> | |
| </div> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <h4 class="font-medium text-indigo-700 text-sm mb-1">Progression globale</h4> | |
| <div class="mt-1"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-indigo-600 h-2 rounded-full" style="width: 10%"></div> | |
| </div> | |
| <p class="text-right text-xs text-gray-600 mt-1">10% complété</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timeline Condensée --> | |
| <section class="mb-12"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-6 text-center"> | |
| <i class="fas fa-road mr-2 text-indigo-600"></i> | |
| Feuille de route condensée (Janvier-Septembre 2025) | |
| </h3> | |
| <!-- Phase 1 - Préparation (3 mois) --> | |
| <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-6 transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/4 bg-indigo-700 p-4 text-white flex flex-col justify-center"> | |
| <h4 class="text-lg font-bold mb-1">Phase 1</h4> | |
| <p class="text-indigo-100 text-sm">Janvier - Mars 2025</p> | |
| <p class="text-indigo-200 text-xs mt-1">Fondations & Visibilité</p> | |
| <span class="inline-block mt-2 px-2 py-0.5 bg-indigo-600 rounded-full text-xs font-medium">3 mois</span> | |
| </div> | |
| <div class="md:w-3/4 p-4"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start timeline-item relative pl-6"> | |
| <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div> | |
| <div> | |
| <h5 class="font-semibold text-gray-800 text-sm">Janvier 2025</h5> | |
| <ul class="mt-1 space-y-1 text-gray-600 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Finalisation identité visuelle et charte graphique</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Lancement site web et réseaux sociaux</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Recrutement des premiers professeurs</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="flex items-start timeline-item relative pl-6"> | |
| <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div> | |
| <div> | |
| <h5 class="font-semibold text-gray-800 text-sm">Février 2025</h5> | |
| <ul class="mt-1 space-y-1 text-gray-600 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Campagne pré-inscriptions avec tarifs préférentiels</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Partenariats avec magasins de musique locaux</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Premiers ateliers découverte dans écoles</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="flex items-start relative pl-6"> | |
| <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div> | |
| <div> | |
| <h5 class="font-semibold text-gray-800 text-sm">Mars 2025</h5> | |
| <ul class="mt-1 space-y-1 text-gray-600 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Aménagement des locaux et équipement</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Conférence de presse de présentation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Lancement chaîne YouTube pédagogique</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 2 - Accélération (3 mois) --> | |
| <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-6 transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/4 bg-indigo-600 p-4 text-white flex flex-col justify-center"> | |
| <h4 class="text-lg font-bold mb-1">Phase 2</h4> | |
| <p class="text-indigo-100 text-sm">Avril - Juin 2025</p> | |
| <p class="text-indigo-200 text-xs mt-1">Engagement & Recrutement</p> | |
| <span class="inline-block mt-2 px-2 py-0.5 bg-indigo-500 rounded-full text-xs font-medium">3 mois</span> | |
| </div> | |
| <div class="md:w-3/4 p-4"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start timeline-item relative pl-6"> | |
| <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div> | |
| <div> | |
| <h5 class="font-semibold text-gray-800 text-sm">Avril 2025</h5> | |
| <ul class="mt-1 space-y-1 text-gray-600 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Masterclass avec artistes invités</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Campagne publicitaire intensive (online/offline)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Partenariats écoles et entreprises locales</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="flex items-start timeline-item relative pl-6"> | |
| <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div> | |
| <div> | |
| <h5 class="font-semibold text-gray-800 text-sm">Mai 2025</h5> | |
| <ul class="mt-1 space-y-1 text-gray-600 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Portes ouvertes avec démonstrations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Participation festivals musicaux locaux</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Lancement programme de parrainage</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="flex items-start relative pl-6"> | |
| <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div> | |
| <div> | |
| <h5 class="font-semibold text-gray-800 text-sm">Juin 2025</h5> | |
| <ul class="mt-1 space-y-1 text-gray-600 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Stages d'été intensifs (communication parents)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Finalisation programme pédagogique</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Lancement podcast sur l'apprentissage musical</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 3 - Lancement (3 mois) --> | |
| <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/4 bg-indigo-500 p-4 text-white flex flex-col justify-center"> | |
| <h4 class="text-lg font-bold mb-1">Phase 3</h4> | |
| <p class="text-indigo-100 text-sm">Juillet - Septembre 2025</p> | |
| <p class="text-indigo-200 text-xs mt-1">Lancement & Pérennisation</p> | |
| <span class="inline-block mt-2 px-2 py-0.5 bg-indigo-400 rounded-full text-xs font-medium">3 mois</span> | |
| </div> | |
| <div class="md:w-3/4 p-4"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start timeline-item relative pl-6"> | |
| <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div> | |
| <div> | |
| <h5 class="font-semibold text-gray-800 text-sm">Juillet 2025</h5> | |
| <ul class="mt-1 space-y-1 text-gray-600 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Grande campagne de lancement multi-canaux</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Partenariats médias locaux (radio, journaux)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Concours jeunes talents avec jury professionnel</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="flex items-start timeline-item relative pl-6"> | |
| <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div> | |
| <div> | |
| <h5 class="font-semibold text-gray-800 text-sm">Août 2025</h5> | |
| <ul class="mt-1 space-y-1 text-gray-600 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Portes ouvertes avec concerts d'élèves</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Finalisation inscriptions rentrée</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Programme "Rentrée musicale" avantages</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="flex items-start relative pl-6"> | |
| <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div> | |
| <div> | |
| <h5 class="font-semibold text-gray-800 text-sm">Septembre 2025</h5> | |
| <ul class="mt-1 space-y-1 text-gray-600 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Événement d'ouverture avec concert inaugural</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Reportage média sur la première rentrée</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Mise en place programme alumni</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Checklist condensée --> | |
| <section class="bg-white rounded-xl shadow-md p-5 mb-10"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-tasks text-indigo-600 mr-2"></i> | |
| Checklist des Canaux de Communication | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3"> | |
| <!-- Digital --> | |
| <div class="checklist-item border border-gray-200 rounded-lg p-3 transition duration-200"> | |
| <h4 class="font-medium text-indigo-700 text-sm mb-2 flex items-center"> | |
| <i class="fas fa-laptop-code mr-1 text-xs"></i> | |
| Digital | |
| </h4> | |
| <ul class="space-y-1 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Site web + blog pédagogique</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Réseaux sociaux actifs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Newsletter emailing</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Événementiel --> | |
| <div class="checklist-item border border-gray-200 rounded-lg p-3 transition duration-200"> | |
| <h4 class="font-medium text-indigo-700 text-sm mb-2 flex items-center"> | |
| <i class="fas fa-calendar-check mr-1 text-xs"></i> | |
| Événementiel | |
| </h4> | |
| <ul class="space-y-1 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Portes ouvertes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Concerts pédagogiques</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Participation salons</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Partenariats --> | |
| <div class="checklist-item border border-gray-200 rounded-lg p-3 transition duration-200"> | |
| <h4 class="font-medium text-indigo-700 text-sm mb-2 flex items-center"> | |
| <i class="fas fa-handshake mr-1 text-xs"></i> | |
| Partenariats | |
| </h4> | |
| <ul class="space-y-1 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Écoles/centres culturels</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Magasins instruments</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Artistes locaux</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Print --> | |
| <div class="checklist-item border border-gray-200 rounded-lg p-3 transition duration-200"> | |
| <h4 class="font-medium text-indigo-700 text-sm mb-2 flex items-center"> | |
| <i class="fas fa-newspaper mr-1 text-xs"></i> | |
| </h4> | |
| <ul class="space-y-1 text-xs"> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Flyers et affiches</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Dossier de presse</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i> | |
| <span>Encarts presse locale</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Budget condensé --> | |
| <section class="bg-white rounded-xl shadow-md p-5 mb-10"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-coins text-indigo-600 mr-2"></i> | |
| Budget Communication Condensé | |
| </h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200 text-xs"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Poste</th> | |
| <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Phase 1</th> | |
| <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Phase 2</th> | |
| <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Phase 3</th> | |
| <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Site web & réseaux</td> | |
| <td class="px-3 py-2 whitespace-nowrap">2 500€</td> | |
| <td class="px-3 py-2 whitespace-nowrap">1 500€</td> | |
| <td class="px-3 py-2 whitespace-nowrap">1 000€</td> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">5 000€</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Publicité</td> | |
| <td class="px-3 py-2 whitespace-nowrap">1 000€</td> | |
| <td class="px-3 py-2 whitespace-nowrap">3 000€</td> | |
| <td class="px-3 py-2 whitespace-nowrap">2 000€</td> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">6 000€</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Événements</td> | |
| <td class="px-3 py-2 whitespace-nowrap">2 000€</td> | |
| <td class="px-3 py-2 whitespace-nowrap">5 000€</td> | |
| <td class="px-3 py-2 whitespace-nowrap">3 000€</td> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">10 000€</td> | |
| </tr> | |
| <tr> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Print</td> | |
| <td class="px-3 py-2 whitespace-nowrap">1 500€</td> | |
| <td class="px-3 py-2 whitespace-nowrap">1 000€</td> | |
| <td class="px-3 py-2 whitespace-nowrap">500€</td> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">3 000€</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Total</td> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">7 000€</td> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">10 500€</td> | |
| <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">6 500€</td> | |
| <td class="px-3 py-2 whitespace-nowrap font-bold text-indigo-800">24 000€</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-3 text-xs text-gray-600"> | |
| <p><i class="fas fa-info-circle text-indigo-500 mr-1"></i> Budget adapté pour une période de 9 mois</p> | |
| </div> | |
| </section> | |
| <!-- Tips condensés --> | |
| <section class="bg-indigo-50 rounded-xl p-5"> | |
| <h3 class="text-lg font-semibold text-indigo-800 mb-3 flex items-center"> | |
| <i class="fas fa-lightbulb text-indigo-600 mr-2"></i> | |
| Conseils Clés | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <h4 class="font-medium text-indigo-700 text-sm mb-1 flex items-center"> | |
| <i class="fas fa-users mr-1"></i> | |
| Stratégie Contenu | |
| </h4> | |
| <ul class="space-y-1 text-xs text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Blog conseils + vidéos courtes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Mettre en avant les succès élèves</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <h4 class="font-medium text-indigo-700 text-sm mb-1 flex items-center"> | |
| <i class="fas fa-hand-holding-usd mr-1"></i> | |
| Rentabilisation | |
| </h4> | |
| <ul class="space-y-1 text-xs text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Cours d'essai payants</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-0.5 mr-1"></i> | |
| <span>Stages vacances</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="mt-10 text-center text-gray-600 text-xs"> | |
| <p>© 2025 Calendrier Pré-Ouverture École de Musique</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Animation pour la barre de progression | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const progressBar = document.querySelector('.progress-bar'); | |
| let width = 10; | |
| const interval = setInterval(function() { | |
| if (width >= 33) { | |
| clearInterval(interval); | |
| } else { | |
| width++; | |
| progressBar.style.width = width + '%'; | |
| progressBar.previousElementSibling.textContent = width + '% complété'; | |
| } | |
| }, 50); | |
| // Interaction checklist | |
| const checklistItems = document.querySelectorAll('.checklist-item li'); | |
| checklistItems.forEach(item => { | |
| item.addEventListener('click', function() { | |
| const icon = this.querySelector('i'); | |
| if (icon.classList.contains('fa-square')) { | |
| icon.classList.remove('fa-square', 'text-gray-400'); | |
| icon.classList.add('fa-check-square', 'text-green-500'); | |
| } else { | |
| icon.classList.remove('fa-check-square', 'text-green-500'); | |
| icon.classList.add('fa-square', 'text-gray-400'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Pyfefactory/zvf-affiliation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |