| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MorphoWeb 3D - Mode École</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <style> |
| .grade-level { |
| transition: all 0.3s ease; |
| } |
| .grade-level:hover { |
| transform: translateY(-5px); |
| } |
| .project-card { |
| border-left: 4px solid transparent; |
| transition: all 0.3s ease; |
| } |
| .project-card:hover { |
| border-left-color: #4f46e5; |
| } |
| .progress-bar { |
| height: 8px; |
| border-radius: 4px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <div class="container mx-auto px-4 py-8"> |
| <header class="mb-12 text-center"> |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">MorphoWeb 3D - Mode École</h1> |
| <p class="text-xl text-gray-600">Plateforme éducative pour apprendre la création web de manière ludique</p> |
| </header> |
|
|
| <section class="mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Niveaux Scolaires</h2> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> |
| <div class="grade-level bg-white p-8 rounded-xl shadow-md text-center"> |
| <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="book-open" class="text-blue-600 w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mb-3">Primaire</h3> |
| <p class="text-gray-600 mb-4">IA Pédagogique 🏫 - Apprentissage ludique et coloré</p> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg"> |
| Niveau 6 - IA Pédagogique |
| </button> |
| </div> |
|
|
| <div class="grade-level bg-white p-8 rounded-xl shadow-md text-center"> |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="compass" class="text-green-600 w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mb-3">Collège</h3> |
| <p class="text-gray-600 mb-4">IA Ludique 🎪 - Bac à sable créatif</p> |
| <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg"> |
| Niveau 4 - IA Ludique |
| </button> |
| </div> |
| <div class="grade-level bg-white p-8 rounded-xl shadow-md text-center"> |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="code" class="text-purple-600 w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mb-3">Lycée</h3> |
| <p class="text-gray-600 mb-4">IA Patiente 👵 - Apprentissage progressif</p> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg"> |
| Niveau 5 - IA Patiente |
| </button> |
| </div> |
|
|
| <div class="grade-level bg-white p-8 rounded-xl shadow-md text-center"> |
| <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="award" class="text-gray-600 w-10 h-10"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mb-3">Université</h3> |
| <p class="text-gray-600 mb-4">IA Experte 🧠 - Niveau Maître</p> |
| <button class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg"> |
| Niveau 3 - IA Experte |
| </button> |
| </div> |
|
|
| <div class="project-card bg-white p-6 rounded-lg shadow-sm flex"> |
| <div class="mr-4"> |
| <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center"> |
| <i data-feather="cpu" class="text-indigo-600 w-8 h-8"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Simulateur d'IA</h3> |
| <p class="text-gray-600 mb-3">Créez un modèle d'apprentissage automatique interactif</p> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-500 mr-2">Progression:</span> |
| <div class="flex-1 bg-gray-200 rounded-full"> |
| <div class="progress-bar bg-indigo-500" style="width: 36%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Projets Pédagogiques</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <div class="project-card bg-white p-6 rounded-lg shadow-sm flex"> |
| <div class="mr-4"> |
| <div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center"> |
| <i data-feather="calendar" class="text-yellow-600 w-8 h-8"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Emploi du temps interactif</h3> |
| <p class="text-gray-600 mb-3">Créez un emploi du temps dynamique pour votre classe</p> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-500 mr-2">Progression:</span> |
| <div class="flex-1 bg-gray-200 rounded-full"> |
| <div class="progress-bar bg-yellow-500" style="width: 45%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="project-card bg-white p-6 rounded-lg shadow-sm flex"> |
| <div class="mr-4"> |
| <div class="w-16 h-16 bg-red-100 rounded-lg flex items-center justify-center"> |
| <i data-feather="clipboard" class="text-red-600 w-8 h-8"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Journal scolaire numérique</h3> |
| <p class="text-gray-600 mb-3">Concevez un journal en ligne pour votre école</p> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-500 mr-2">Progression:</span> |
| <div class="flex-1 bg-gray-200 rounded-full"> |
| <div class="progress-bar bg-red-500" style="width: 28%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="project-card bg-white p-6 rounded-lg shadow-sm flex"> |
| <div class="mr-4"> |
| <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center"> |
| <i data-feather="map" class="text-green-600 w-8 h-8"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Carte des échanges scolaires</h3> |
| <p class="text-gray-600 mb-3">Visualisez vos correspondants sur une carte interactive</p> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-500 mr-2">Progression:</span> |
| <div class="flex-1 bg-gray-200 rounded-full"> |
| <div class="progress-bar bg-green-500" style="width: 72%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="project-card bg-white p-6 rounded-lg shadow-sm flex"> |
| <div class="mr-4"> |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center"> |
| <i data-feather="book" class="text-blue-600 w-8 h-8"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Livre numérique collaboratif</h3> |
| <p class="text-gray-600 mb-3">Écrivez une histoire avec toute la classe</p> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-500 mr-2">Progression:</span> |
| <div class="flex-1 bg-gray-200 rounded-full"> |
| <div class="progress-bar bg-blue-500" style="width: 89%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="bg-white p-8 rounded-xl shadow-md"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Suivi des Progrès</h2> |
| <div class="max-w-2xl mx-auto"> |
| <div class="flex items-center mb-4"> |
| <div class="w-1/3 text-right pr-4"> |
| <span class="font-medium">Compétences techniques:</span> |
| </div> |
| <div class="w-2/3"> |
| <div class="flex items-center"> |
| <div class="progress-bar bg-indigo-600 w-3/4"></div> |
| <span class="ml-2">75%</span> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center mb-4"> |
| <div class="w-1/3 text-right pr-4"> |
| <span class="font-medium">Créativité:</span> |
| </div> |
| <div class="w-2/3"> |
| <div class="flex items-center"> |
| <div class="progress-bar bg-purple-600 w-4/5"></div> |
| <span class="ml-2">80%</span> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center mb-4"> |
| <div class="w-1/3 text-right pr-4"> |
| <span class="font-medium">Collaboration:</span> |
| </div> |
| <div class="w-2/3"> |
| <div class="flex items-center"> |
| <div class="progress-bar bg-green-600 w-2/3"></div> |
| <span class="ml-2">67%</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.progress-bar').forEach(bar => { |
| const width = bar.style.width; |
| bar.style.width = '0'; |
| setTimeout(() => { |
| bar.style.width = width; |
| bar.style.transition = 'width 1s ease'; |
| }, 100); |
| }); |
| |
| document.querySelectorAll('.grade-level button').forEach(btn => { |
| btn.addEventListener('click', () => { |
| const level = btn.closest('.grade-level').querySelector('h3').textContent; |
| if(level === "Université") { |
| window.location.href = "university.html"; |
| } else { |
| alert(`Affichage des projets pour le niveau ${level}`); |
| } |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
