creer un site de cours d'initiation a l'IA pour moi destine aux etudiants de la 1 ere annee en se basant sur se tableau de matiere
Browse filesLe cours titre est a la decouverte de l'IA avec "MohPython"
Table des matières
Partie 1
Découvrez ce qu'est l'intelligence artificielle
1
Tirez un maximum de ce cours
2
Détectez les applications de l'intelligence artificielle dans votre vie
3
Repérez-vous dans le champ de l'intelligence artificielle
4
Resituez le potentiel de l'intelligence artificielle au-delà des mythes
Quiz : Testez ce que vous avez compris de l'intelligence artificielle
Partie 2
Identifiez les opportunités et les défis de l'intelligence artificielle
1
Découvrez les opportunités de l’intelligence artificielle
2
Identifiez les enjeux de sûreté de l’intelligence artificielle
3
Identifiez les enjeux d’une IA responsable et digne de confiance
4
Évaluez l'impact de l'intelligence artificielle sur le travail
Quiz : Testez ce que vous avez compris des opportunités et défis de l'IA
Partie 3
Entrez au cœur d'un projet d'intelligence artificielle
1
Abordez les étapes d'un projet d'intelligence artificielle
2
Initiez-vous aux fondamentaux du Machine Learning ou de l'apprentissage automatique
3
Appréhendez le Deep Learning ou l'apprentissage profond
4
Appréhendez les modèles d’IA “à usage général”
Quiz : Testez ce que vous avez compris d'un projet d'IA et de ses sous-disciplines
il faut developper chaque points avec des images
- README.md +8 -5
- chapitre1-1.html +243 -0
- index.html +250 -18
- partie1.html +240 -0
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: AI Odyssey with MohPython 🚀
|
| 3 |
+
colorFrom: gray
|
| 4 |
+
colorTo: yellow
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
chapitre1-1.html
ADDED
|
@@ -0,0 +1,243 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Chapitre 1.1: Qu'est-ce que l'IA? | MohPython</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<style>
|
| 11 |
+
.definition-box {
|
| 12 |
+
border-left: 4px solid #8b5cf6;
|
| 13 |
+
background-color: #f5f3ff;
|
| 14 |
+
}
|
| 15 |
+
.timeline-item::before {
|
| 16 |
+
content: '';
|
| 17 |
+
position: absolute;
|
| 18 |
+
left: -38px;
|
| 19 |
+
top: 0;
|
| 20 |
+
width: 16px;
|
| 21 |
+
height: 16px;
|
| 22 |
+
border-radius: 50%;
|
| 23 |
+
background: #8b5cf6;
|
| 24 |
+
}
|
| 25 |
+
.concept-card:hover {
|
| 26 |
+
transform: translateY(-5px);
|
| 27 |
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
| 28 |
+
}
|
| 29 |
+
</style>
|
| 30 |
+
</head>
|
| 31 |
+
<body class="bg-gray-50 font-sans">
|
| 32 |
+
<!-- Navigation -->
|
| 33 |
+
<nav class="bg-white shadow-md">
|
| 34 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 35 |
+
<div class="flex justify-between h-16">
|
| 36 |
+
<div class="flex items-center">
|
| 37 |
+
<a href="index.html" class="text-xl font-bold text-purple-700">MohPython</a>
|
| 38 |
+
</div>
|
| 39 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 40 |
+
<a href="index.html#part1" class="text-purple-600 font-semibold">Partie 1</a>
|
| 41 |
+
<a href="index.html#part2" class="text-gray-700 hover:text-purple-600">Partie 2</a>
|
| 42 |
+
<a href="index.html#part3" class="text-gray-700 hover:text-purple-600">Partie 3</a>
|
| 43 |
+
<a href="partie1.html#quiz" class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700">Quiz</a>
|
| 44 |
+
</div>
|
| 45 |
+
<div class="md:hidden flex items-center">
|
| 46 |
+
<button class="mobile-menu-button">
|
| 47 |
+
<i data-feather="menu"></i>
|
| 48 |
+
</button>
|
| 49 |
+
</div>
|
| 50 |
+
</div>
|
| 51 |
+
</div>
|
| 52 |
+
</nav>
|
| 53 |
+
|
| 54 |
+
<!-- Progress Bar -->
|
| 55 |
+
<div class="bg-purple-100">
|
| 56 |
+
<div class="h-1 bg-purple-600" style="width: 5%"></div>
|
| 57 |
+
</div>
|
| 58 |
+
|
| 59 |
+
<!-- Chapter Content -->
|
| 60 |
+
<section class="py-12">
|
| 61 |
+
<div class="max-w-4xl mx-auto px-4">
|
| 62 |
+
<!-- Breadcrumb -->
|
| 63 |
+
<div class="flex items-center text-sm text-gray-500 mb-6">
|
| 64 |
+
<a href="index.html" class="hover:text-purple-600">Accueil</a>
|
| 65 |
+
<i data-feather="chevron-right" class="mx-2 w-4 h-4"></i>
|
| 66 |
+
<a href="partie1.html" class="hover:text-purple-600">Partie 1</a>
|
| 67 |
+
<i data-feather="chevron-right" class="mx-2 w-4 h-4"></i>
|
| 68 |
+
<span class="text-purple-600">Chapitre 1.1</span>
|
| 69 |
+
</div>
|
| 70 |
+
|
| 71 |
+
<!-- Chapter Header -->
|
| 72 |
+
<div class="mb-12">
|
| 73 |
+
<div class="flex items-center mb-4">
|
| 74 |
+
<div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">1.1</div>
|
| 75 |
+
<h1 class="text-3xl font-bold">Qu'est-ce que l'intelligence artificielle?</h1>
|
| 76 |
+
</div>
|
| 77 |
+
<div class="flex flex-wrap gap-4 mt-4">
|
| 78 |
+
<div class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full flex items-center text-sm">
|
| 79 |
+
<i data-feather="clock" class="mr-2 w-4 h-4"></i>
|
| 80 |
+
<span>~15 minutes</span>
|
| 81 |
+
</div>
|
| 82 |
+
<div class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full flex items-center text-sm">
|
| 83 |
+
<i data-feather="book" class="mr-2 w-4 h-4"></i>
|
| 84 |
+
<span>Concepts fondamentaux</span>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
<!-- Chapter Content -->
|
| 90 |
+
<div class="prose max-w-none">
|
| 91 |
+
<div class="definition-box p-4 rounded mb-8">
|
| 92 |
+
<h3 class="font-bold text-purple-700 mb-2">Définition</h3>
|
| 93 |
+
<p class="text-gray-700">L'<strong>intelligence artificielle</strong> (IA) désigne la simulation de processus d'intelligence humaine par des machines, particulièrement des systèmes informatiques. Ces processus incluent l'apprentissage, le raisonnement et l'auto-correction.</p>
|
| 94 |
+
</div>
|
| 95 |
+
|
| 96 |
+
<h2 class="text-2xl font-bold mt-12 mb-6 text-gray-800">Les fondements de l'IA</h2>
|
| 97 |
+
|
| 98 |
+
<div class="grid md:grid-cols-2 gap-6 mb-12">
|
| 99 |
+
<div class="bg-white p-6 rounded-lg shadow-sm concept-card transition duration-300">
|
| 100 |
+
<div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
|
| 101 |
+
<i data-feather="cpu" class="text-purple-600"></i>
|
| 102 |
+
</div>
|
| 103 |
+
<h3 class="font-bold text-lg mb-2">IA Faible vs IA Forte</h3>
|
| 104 |
+
<p class="text-gray-600">L'IA faible est spécialisée dans une tâche précise (comme les assistants vocaux), tandis que l'IA forte aurait une intelligence générale comparable à l'homme (encore théorique).</p>
|
| 105 |
+
</div>
|
| 106 |
+
<div class="bg-white p-6 rounded-lg shadow-sm concept-card transition duration-300">
|
| 107 |
+
<div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
|
| 108 |
+
<i data-feather="layers" class="text-purple-600"></i>
|
| 109 |
+
</div>
|
| 110 |
+
<h3 class="font-bold text-lg mb-2">Trois types d'IA</h3>
|
| 111 |
+
<p class="text-gray-600">1. IA symbolique (basée sur des règles), 2. IA statistique (apprentissage à partir de données), 3. IA neuronale (réseaux de neurones profonds).</p>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
|
| 115 |
+
<h2 class="text-2xl font-bold mt-12 mb-6 text-gray-800">Brève histoire de l'IA</h2>
|
| 116 |
+
|
| 117 |
+
<div class="relative mb-12">
|
| 118 |
+
<!-- Timeline -->
|
| 119 |
+
<div class="border-l-2 border-purple-200 pl-8 space-y-12">
|
| 120 |
+
<div class="relative timeline-item">
|
| 121 |
+
<div class="bg-white p-6 rounded-lg shadow-sm">
|
| 122 |
+
<h3 class="font-bold text-lg mb-2">1950-1956: Les fondations</h3>
|
| 123 |
+
<p class="text-gray-600">Alan Turing publie "Computing Machinery and Intelligence" (1950) introduisant le test de Turing. Le terme "intelligence artificielle" est créé en 1956 lors de la conférence de Dartmouth.</p>
|
| 124 |
+
</div>
|
| 125 |
+
</div>
|
| 126 |
+
<div class="relative timeline-item">
|
| 127 |
+
<div class="bg-white p-6 rounded-lg shadow-sm">
|
| 128 |
+
<h3 class="font-bold text-lg mb-2">1980-1990: L'hiver de l'IA</h3>
|
| 129 |
+
<p class="text-gray-600">Période de réduction des financements et d'optimisme déçu après que les promesses de l'IA ne se soient pas matérialisées. Les systèmes experts dominent cette période.</p>
|
| 130 |
+
</div>
|
| 131 |
+
</div>
|
| 132 |
+
<div class="relative timeline-item">
|
| 133 |
+
<div class="bg-white p-6 rounded-lg shadow-sm">
|
| 134 |
+
<h3 class="font-bold text-lg mb-2">2010-présent: Renaissance</h3>
|
| 135 |
+
<p class="text-gray-600">L'avènement du big data, de la puissance de calcul et des réseaux neuronaux profonds propulse l'IA au premier plan avec des applications concrètes comme la reconnaissance d'images et le traitement du langage.</p>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
</div>
|
| 139 |
+
</div>
|
| 140 |
+
|
| 141 |
+
<h2 class="text-2xl font-bold mt-12 mb-6 text-gray-800">Comment fonctionne l'IA?</h2>
|
| 142 |
+
|
| 143 |
+
<div class="bg-white p-6 rounded-lg shadow-sm mb-8">
|
| 144 |
+
<img src="http://static.photos/technology/640x360/44" alt="Fonctionnement IA" class="w-full h-auto rounded mb-6">
|
| 145 |
+
<div class="grid md:grid-cols-3 gap-4">
|
| 146 |
+
<div class="bg-purple-50 p-4 rounded">
|
| 147 |
+
<h4 class="font-bold mb-2 text-purple-700">1. Entrée</h4>
|
| 148 |
+
<p class="text-gray-600">Données brutes (texte, images, sons, etc.)</p>
|
| 149 |
+
</div>
|
| 150 |
+
<div class="bg-purple-50 p-4 rounded">
|
| 151 |
+
<h4 class="font-bold mb-2 text-purple-700">2. Traitement</h4>
|
| 152 |
+
<p class="text-gray-600">Algorithmes d'IA analysent et interprètent</p>
|
| 153 |
+
</div>
|
| 154 |
+
<div class="bg-purple-50 p-4 rounded">
|
| 155 |
+
<h4 class="font-bold mb-2 text-purple-700">3. Sortie</h4>
|
| 156 |
+
<p class="text-gray-600">Résultats ou actions (décisions, prédictions)</p>
|
| 157 |
+
</div>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
|
| 161 |
+
<div class="bg-blue-50 border border-blue-100 rounded-lg p-6 mb-12">
|
| 162 |
+
<div class="flex">
|
| 163 |
+
<div class="mr-4 text-blue-500">
|
| 164 |
+
<i data-feather="info"></i>
|
| 165 |
+
</div>
|
| 166 |
+
<div>
|
| 167 |
+
<h3 class="font-bold text-lg mb-2 text-blue-700">Saviez-vous?</h3>
|
| 168 |
+
<p class="text-gray-700">L'IA est partout autour de vous! Des recommandations Netflix aux filtres anti-spam de votre boîte mail, en passant par la reconnaissance faciale de votre smartphone, l'IA est déjà profondément intégrée dans nos vies quotidiennes.</p>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
|
| 173 |
+
<h2 class="text-2xl font-bold mt-12 mb-6 text-gray-800">Exercice pratique</h2>
|
| 174 |
+
|
| 175 |
+
<div class="bg-white p-6 rounded-lg shadow-sm mb-12">
|
| 176 |
+
<div class="flex items-start mb-4">
|
| 177 |
+
<div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4 flex-shrink-0">1</div>
|
| 178 |
+
<div>
|
| 179 |
+
<h3 class="font-bold text-lg mb-2">Identifier l'IA autour de vous</h3>
|
| 180 |
+
<p class="text-gray-600 mb-4">Prenez 5 minutes pour lister toutes les applications d'IA que vous utilisez quotidiennement. Puis comparez avec notre liste ci-dessous.</p>
|
| 181 |
+
<textarea class="w-full h-32 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Écrivez vos réponses ici..."></textarea>
|
| 182 |
+
<button class="mt-4 bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition duration-300">Soumettre</button>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
|
| 188 |
+
<!-- Navigation Buttons -->
|
| 189 |
+
<div class="flex flex-col sm:flex-row justify-between mt-16 gap-4">
|
| 190 |
+
<a href="partie1.html" class="bg-white text-purple-600 px-6 py-3 rounded-lg border border-purple-200 hover:bg-purple-50 transition duration-300 flex items-center justify-center">
|
| 191 |
+
<i data-feather="arrow-left" class="mr-2"></i> Retour à la partie 1
|
| 192 |
+
</a>
|
| 193 |
+
<a href="chapitre1-2.html" class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition duration-300 flex items-center justify-center">
|
| 194 |
+
Chapitre suivant: Applications de l'IA <i data-feather="arrow-right" class="ml-2"></i>
|
| 195 |
+
</a>
|
| 196 |
+
</div>
|
| 197 |
+
</div>
|
| 198 |
+
</section>
|
| 199 |
+
|
| 200 |
+
<!-- Footer -->
|
| 201 |
+
<footer class="bg-gray-900 text-white py-12">
|
| 202 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 203 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 204 |
+
<div>
|
| 205 |
+
<h3 class="text-xl font-bold mb-4">MohPython</h3>
|
| 206 |
+
<p class="text-gray-400">Rendre l'IA accessible à tous, un étudiant à la fois.</p>
|
| 207 |
+
</div>
|
| 208 |
+
<div>
|
| 209 |
+
<h4 class="font-bold mb-4">Navigation</h4>
|
| 210 |
+
<ul class="space-y-2">
|
| 211 |
+
<li><a href="index.html" class="text-gray-400 hover:text-white">Accueil</a></li>
|
| 212 |
+
<li><a href="partie1.html" class="text-white">Partie 1</a></li>
|
| 213 |
+
<li><a href="partie2.html" class="text-gray-400 hover:text-white">Partie 2</a></li>
|
| 214 |
+
<li><a href="partie3.html" class="text-gray-400 hover:text-white">Partie 3</a></li>
|
| 215 |
+
</ul>
|
| 216 |
+
</div>
|
| 217 |
+
<div>
|
| 218 |
+
<h4 class="font-bold mb-4">Contact</h4>
|
| 219 |
+
<div class="flex space-x-4">
|
| 220 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="mail"></i></a>
|
| 221 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
|
| 222 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
|
| 223 |
+
</div>
|
| 224 |
+
</div>
|
| 225 |
+
</div>
|
| 226 |
+
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
| 227 |
+
<p>© 2023 MohPython. Tous droits réservés.</p>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
+
</footer>
|
| 231 |
+
|
| 232 |
+
<script>
|
| 233 |
+
feather.replace();
|
| 234 |
+
|
| 235 |
+
// Mobile menu toggle
|
| 236 |
+
const mobileMenuButton = document.querySelector('.mobile-menu-button');
|
| 237 |
+
mobileMenuButton.addEventListener('click', () => {
|
| 238 |
+
// Implement mobile menu functionality here
|
| 239 |
+
alert("Menu mobile sera implémenté ici!");
|
| 240 |
+
});
|
| 241 |
+
</script>
|
| 242 |
+
</body>
|
| 243 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,251 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>À la découverte de l'IA avec MohPython</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<style>
|
| 11 |
+
.hero-gradient {
|
| 12 |
+
background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
|
| 13 |
+
}
|
| 14 |
+
.part-card:hover {
|
| 15 |
+
transform: translateY(-5px);
|
| 16 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 17 |
+
}
|
| 18 |
+
.floating {
|
| 19 |
+
animation: floating 3s ease-in-out infinite;
|
| 20 |
+
}
|
| 21 |
+
@keyframes floating {
|
| 22 |
+
0% { transform: translateY(0px); }
|
| 23 |
+
50% { transform: translateY(-15px); }
|
| 24 |
+
100% { transform: translateY(0px); }
|
| 25 |
+
}
|
| 26 |
+
</style>
|
| 27 |
+
</head>
|
| 28 |
+
<body class="bg-gray-50 font-sans">
|
| 29 |
+
<!-- Navigation -->
|
| 30 |
+
<nav class="bg-white shadow-md">
|
| 31 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 32 |
+
<div class="flex justify-between h-16">
|
| 33 |
+
<div class="flex items-center">
|
| 34 |
+
<span class="text-xl font-bold text-purple-700">MohPython</span>
|
| 35 |
+
</div>
|
| 36 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 37 |
+
<a href="#part1" class="text-gray-700 hover:text-purple-600">Partie 1</a>
|
| 38 |
+
<a href="#part2" class="text-gray-700 hover:text-purple-600">Partie 2</a>
|
| 39 |
+
<a href="#part3" class="text-gray-700 hover:text-purple-600">Partie 3</a>
|
| 40 |
+
<a href="#quiz" class="text-gray-700 hover:text-purple-600">Quiz</a>
|
| 41 |
+
</div>
|
| 42 |
+
<div class="md:hidden flex items-center">
|
| 43 |
+
<button class="mobile-menu-button">
|
| 44 |
+
<i data-feather="menu"></i>
|
| 45 |
+
</button>
|
| 46 |
+
</div>
|
| 47 |
+
</div>
|
| 48 |
+
</div>
|
| 49 |
+
</nav>
|
| 50 |
+
|
| 51 |
+
<!-- Hero Section -->
|
| 52 |
+
<section class="hero-gradient text-white py-20">
|
| 53 |
+
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center">
|
| 54 |
+
<div class="md:w-1/2 mb-10 md:mb-0">
|
| 55 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">À la découverte de l'IA</h1>
|
| 56 |
+
<p class="text-xl mb-8">Un voyage interactif dans le monde fascinant de l'intelligence artificielle pour les étudiants de première année.</p>
|
| 57 |
+
<button class="bg-white text-purple-700 px-6 py-3 rounded-full font-semibold hover:bg-purple-100 transition duration-300">Commencer l'aventure</button>
|
| 58 |
+
</div>
|
| 59 |
+
<div class="md:w-1/2 flex justify-center">
|
| 60 |
+
<img src="http://static.photos/technology/640x360/42" alt="IA Illustration" class="rounded-lg shadow-xl floating">
|
| 61 |
+
</div>
|
| 62 |
+
</div>
|
| 63 |
+
</section>
|
| 64 |
+
|
| 65 |
+
<!-- Course Parts Overview -->
|
| 66 |
+
<section id="parts" class="py-16 bg-white">
|
| 67 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 68 |
+
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Explorez le programme</h2>
|
| 69 |
+
|
| 70 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 71 |
+
<!-- Part 1 Card -->
|
| 72 |
+
<div id="part1" class="bg-purple-50 rounded-xl p-6 shadow-md transition duration-300 part-card">
|
| 73 |
+
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
|
| 74 |
+
<span class="text-purple-700 font-bold text-2xl">1</span>
|
| 75 |
+
</div>
|
| 76 |
+
<h3 class="text-xl font-bold mb-3 text-purple-800">Découverte de l'IA</h3>
|
| 77 |
+
<ul class="space-y-2 text-gray-700">
|
| 78 |
+
<li class="flex items-start">
|
| 79 |
+
<i data-feather="check-circle" class="text-purple-500 mr-2 mt-1"></i>
|
| 80 |
+
<span>Qu'est-ce que l'IA?</span>
|
| 81 |
+
</li>
|
| 82 |
+
<li class="flex items-start">
|
| 83 |
+
<i data-feather="check-circle" class="text-purple-500 mr-2 mt-1"></i>
|
| 84 |
+
<span>Applications quotidiennes</span>
|
| 85 |
+
</li>
|
| 86 |
+
<li class="flex items-start">
|
| 87 |
+
<i data-feather="check-circle" class="text-purple-500 mr-2 mt-1"></i>
|
| 88 |
+
<span>Démythifier l'IA</span>
|
| 89 |
+
</li>
|
| 90 |
+
</ul>
|
| 91 |
+
<button class="mt-4 text-purple-700 font-semibold flex items-center">
|
| 92 |
+
Explorer <i data-feather="arrow-right" class="ml-2"></i>
|
| 93 |
+
</button>
|
| 94 |
+
</div>
|
| 95 |
+
|
| 96 |
+
<!-- Part 2 Card -->
|
| 97 |
+
<div id="part2" class="bg-blue-50 rounded-xl p-6 shadow-md transition duration-300 part-card">
|
| 98 |
+
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
|
| 99 |
+
<span class="text-blue-700 font-bold text-2xl">2</span>
|
| 100 |
+
</div>
|
| 101 |
+
<h3 class="text-xl font-bold mb-3 text-blue-800">Opportunités & Défis</h3>
|
| 102 |
+
<ul class="space-y-2 text-gray-700">
|
| 103 |
+
<li class="flex items-start">
|
| 104 |
+
<i data-feather="check-circle" class="text-blue-500 mr-2 mt-1"></i>
|
| 105 |
+
<span>Opportunités de l'IA</span>
|
| 106 |
+
</li>
|
| 107 |
+
<li class="flex items-start">
|
| 108 |
+
<i data-feather="check-circle" class="text-blue-500 mr-2 mt-1"></i>
|
| 109 |
+
<span>Enjeux de sûreté</span>
|
| 110 |
+
</li>
|
| 111 |
+
<li class="flex items-start">
|
| 112 |
+
<i data-feather="check-circle" class="text-blue-500 mr-2 mt-1"></i>
|
| 113 |
+
<span>Impact sur le travail</span>
|
| 114 |
+
</li>
|
| 115 |
+
</ul>
|
| 116 |
+
<button class="mt-4 text-blue-700 font-semibold flex items-center">
|
| 117 |
+
Explorer <i data-feather="arrow-right" class="ml-2"></i>
|
| 118 |
+
</button>
|
| 119 |
+
</div>
|
| 120 |
+
|
| 121 |
+
<!-- Part 3 Card -->
|
| 122 |
+
<div id="part3" class="bg-green-50 rounded-xl p-6 shadow-md transition duration-300 part-card">
|
| 123 |
+
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
|
| 124 |
+
<span class="text-green-700 font-bold text-2xl">3</span>
|
| 125 |
+
</div>
|
| 126 |
+
<h3 class="text-xl font-bold mb-3 text-green-800">Projet d'IA</h3>
|
| 127 |
+
<ul class="space-y-2 text-gray-700">
|
| 128 |
+
<li class="flex items-start">
|
| 129 |
+
<i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
|
| 130 |
+
<span>Étapes d'un projet</span>
|
| 131 |
+
</li>
|
| 132 |
+
<li class="flex items-start">
|
| 133 |
+
<i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
|
| 134 |
+
<span>Machine Learning</span>
|
| 135 |
+
</li>
|
| 136 |
+
<li class="flex items-start">
|
| 137 |
+
<i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
|
| 138 |
+
<span>Deep Learning</span>
|
| 139 |
+
</li>
|
| 140 |
+
</ul>
|
| 141 |
+
<button class="mt-4 text-green-700 font-semibold flex items-center">
|
| 142 |
+
Explorer <i data-feather="arrow-right" class="ml-2"></i>
|
| 143 |
+
</button>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</section>
|
| 148 |
+
|
| 149 |
+
<!-- Testimonials -->
|
| 150 |
+
<section class="py-16 bg-gray-100">
|
| 151 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 152 |
+
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Ce que disent les étudiants</h2>
|
| 153 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 154 |
+
<div class="bg-white p-6 rounded-xl shadow">
|
| 155 |
+
<div class="flex items-center mb-4">
|
| 156 |
+
<img src="http://static.photos/people/200x200/1" alt="Étudiant" class="w-12 h-12 rounded-full mr-4">
|
| 157 |
+
<div>
|
| 158 |
+
<h4 class="font-bold">Alexandre</h4>
|
| 159 |
+
<p class="text-gray-600">Étudiant en Informatique</p>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
<p class="text-gray-700">"Ce cours m'a ouvert les yeux sur les possibilités infinies de l'IA. Les explications sont claires et les exemples concrets."</p>
|
| 163 |
+
</div>
|
| 164 |
+
<div class="bg-white p-6 rounded-xl shadow">
|
| 165 |
+
<div class="flex items-center mb-4">
|
| 166 |
+
<img src="http://static.photos/people/200x200/2" alt="Étudiante" class="w-12 h-12 rounded-full mr-4">
|
| 167 |
+
<div>
|
| 168 |
+
<h4 class="font-bold">Sophie</h4>
|
| 169 |
+
<p class="text-gray-600">Étudiante en Mathématiques</p>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
<p class="text-gray-700">"J'avais peur de l'IA avant ce cours. Maintenant, je comprends mieux ses limites et ses forces. Les quiz sont vraiment utiles!"</p>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
</section>
|
| 177 |
+
|
| 178 |
+
<!-- CTA Section -->
|
| 179 |
+
<section class="py-16 bg-purple-700 text-white">
|
| 180 |
+
<div class="max-w-6xl mx-auto px-4 text-center">
|
| 181 |
+
<h2 class="text-3xl font-bold mb-6">Prêt à plonger dans le monde de l'IA?</h2>
|
| 182 |
+
<p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez des centaines d'étudiants qui ont déjà commencé leur voyage avec MohPython.</p>
|
| 183 |
+
<button class="bg-white text-purple-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-purple-100 transition duration-300 shadow-lg">
|
| 184 |
+
S'inscrire maintenant <i data-feather="arrow-right" class="ml-2 inline"></i>
|
| 185 |
+
</button>
|
| 186 |
+
</div>
|
| 187 |
+
</section>
|
| 188 |
+
|
| 189 |
+
<!-- Footer -->
|
| 190 |
+
<footer class="bg-gray-900 text-white py-12">
|
| 191 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 192 |
+
<div class="grid md:grid-cols-4 gap-8">
|
| 193 |
+
<div>
|
| 194 |
+
<h3 class="text-xl font-bold mb-4">MohPython</h3>
|
| 195 |
+
<p class="text-gray-400">Rendre l'IA accessible à tous, un étudiant à la fois.</p>
|
| 196 |
+
</div>
|
| 197 |
+
<div>
|
| 198 |
+
<h4 class="font-bold mb-4">Navigation</h4>
|
| 199 |
+
<ul class="space-y-2">
|
| 200 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li>
|
| 201 |
+
<li><a href="#part1" class="text-gray-400 hover:text-white">Partie 1</a></li>
|
| 202 |
+
<li><a href="#part2" class="text-gray-400 hover:text-white">Partie 2</a></li>
|
| 203 |
+
<li><a href="#part3" class="text-gray-400 hover:text-white">Partie 3</a></li>
|
| 204 |
+
</ul>
|
| 205 |
+
</div>
|
| 206 |
+
<div>
|
| 207 |
+
<h4 class="font-bold mb-4">Ressources</h4>
|
| 208 |
+
<ul class="space-y-2">
|
| 209 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Quiz</a></li>
|
| 210 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Exercices</a></li>
|
| 211 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Bibliographie</a></li>
|
| 212 |
+
</ul>
|
| 213 |
+
</div>
|
| 214 |
+
<div>
|
| 215 |
+
<h4 class="font-bold mb-4">Contact</h4>
|
| 216 |
+
<div class="flex space-x-4">
|
| 217 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="mail"></i></a>
|
| 218 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
|
| 219 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
|
| 220 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
</div>
|
| 224 |
+
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
| 225 |
+
<p>© 2023 MohPython. Tous droits réservés.</p>
|
| 226 |
+
</div>
|
| 227 |
+
</div>
|
| 228 |
+
</footer>
|
| 229 |
+
|
| 230 |
+
<script>
|
| 231 |
+
feather.replace();
|
| 232 |
+
|
| 233 |
+
// Mobile menu toggle
|
| 234 |
+
const mobileMenuButton = document.querySelector('.mobile-menu-button');
|
| 235 |
+
mobileMenuButton.addEventListener('click', () => {
|
| 236 |
+
// Implement mobile menu functionality here
|
| 237 |
+
alert("Menu mobile sera implémenté ici!");
|
| 238 |
+
});
|
| 239 |
+
|
| 240 |
+
// Smooth scrolling for navigation links
|
| 241 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 242 |
+
anchor.addEventListener('click', function (e) {
|
| 243 |
+
e.preventDefault();
|
| 244 |
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
| 245 |
+
behavior: 'smooth'
|
| 246 |
+
});
|
| 247 |
+
});
|
| 248 |
+
});
|
| 249 |
+
</script>
|
| 250 |
+
</body>
|
| 251 |
</html>
|
partie1.html
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Partie 1: Découverte de l'IA | MohPython</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<style>
|
| 11 |
+
.chapter-card {
|
| 12 |
+
transition: all 0.3s ease;
|
| 13 |
+
}
|
| 14 |
+
.chapter-card:hover {
|
| 15 |
+
transform: translateY(-5px);
|
| 16 |
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
| 17 |
+
}
|
| 18 |
+
.progress-bar {
|
| 19 |
+
height: 6px;
|
| 20 |
+
transition: width 0.5s ease;
|
| 21 |
+
}
|
| 22 |
+
</style>
|
| 23 |
+
</head>
|
| 24 |
+
<body class="bg-gray-50 font-sans">
|
| 25 |
+
<!-- Navigation -->
|
| 26 |
+
<nav class="bg-white shadow-md">
|
| 27 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 28 |
+
<div class="flex justify-between h-16">
|
| 29 |
+
<div class="flex items-center">
|
| 30 |
+
<a href="index.html" class="text-xl font-bold text-purple-700">MohPython</a>
|
| 31 |
+
</div>
|
| 32 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 33 |
+
<a href="index.html#part1" class="text-purple-600 font-semibold">Partie 1</a>
|
| 34 |
+
<a href="index.html#part2" class="text-gray-700 hover:text-purple-600">Partie 2</a>
|
| 35 |
+
<a href="index.html#part3" class="text-gray-700 hover:text-purple-600">Partie 3</a>
|
| 36 |
+
<a href="#quiz" class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700">Quiz</a>
|
| 37 |
+
</div>
|
| 38 |
+
<div class="md:hidden flex items-center">
|
| 39 |
+
<button class="mobile-menu-button">
|
| 40 |
+
<i data-feather="menu"></i>
|
| 41 |
+
</button>
|
| 42 |
+
</div>
|
| 43 |
+
</div>
|
| 44 |
+
</div>
|
| 45 |
+
</nav>
|
| 46 |
+
|
| 47 |
+
<!-- Progress Bar -->
|
| 48 |
+
<div class="bg-purple-100">
|
| 49 |
+
<div class="progress-bar bg-purple-600" style="width: 25%"></div>
|
| 50 |
+
</div>
|
| 51 |
+
|
| 52 |
+
<!-- Hero Section -->
|
| 53 |
+
<section class="bg-gradient-to-r from-purple-600 to-blue-500 text-white py-16">
|
| 54 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 55 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 56 |
+
<div class="md:w-2/3">
|
| 57 |
+
<p class="text-purple-200 mb-2">Partie 1</p>
|
| 58 |
+
<h1 class="text-4xl font-bold mb-4">Découverte de l'Intelligence Artificielle</h1>
|
| 59 |
+
<p class="text-xl text-purple-100 max-w-2xl">Comprenez les fondamentaux de l'IA, ses applications quotidiennes et démystifiez les idées reçues.</p>
|
| 60 |
+
</div>
|
| 61 |
+
<div class="md:w-1/3 mt-8 md:mt-0 flex justify-center">
|
| 62 |
+
<img src="http://static.photos/technology/640x360/43" alt="IA Discovery" class="rounded-lg shadow-xl">
|
| 63 |
+
</div>
|
| 64 |
+
</div>
|
| 65 |
+
</div>
|
| 66 |
+
</section>
|
| 67 |
+
|
| 68 |
+
<!-- Chapters List -->
|
| 69 |
+
<section class="py-16">
|
| 70 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 71 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 72 |
+
<!-- Chapter 1 -->
|
| 73 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden chapter-card">
|
| 74 |
+
<img src="http://static.photos/abstract/640x360/1" alt="Qu'est-ce que l'IA?" class="w-full h-48 object-cover">
|
| 75 |
+
<div class="p-6">
|
| 76 |
+
<div class="flex items-center mb-4">
|
| 77 |
+
<div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">1</div>
|
| 78 |
+
<h3 class="text-xl font-bold">Qu'est-ce que l'intelligence artificielle?</h3>
|
| 79 |
+
</div>
|
| 80 |
+
<p class="text-gray-600 mb-4">Définitions fondamentales, histoire et concepts clés de l'IA. Comprenez ce qui distingue l'IA des programmes traditionnels.</p>
|
| 81 |
+
<div class="flex justify-between items-center">
|
| 82 |
+
<span class="text-sm text-gray-500">~15 minutes</span>
|
| 83 |
+
<a href="chapitre1-1.html" class="text-purple-600 font-semibold flex items-center">
|
| 84 |
+
Commencer <i data-feather="arrow-right" class="ml-2"></i>
|
| 85 |
+
</a>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
|
| 90 |
+
<!-- Chapter 2 -->
|
| 91 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden chapter-card">
|
| 92 |
+
<img src="http://static.photos/office/640x360/2" alt="Applications IA" class="w-full h-48 object-cover">
|
| 93 |
+
<div class="p-6">
|
| 94 |
+
<div class="flex items-center mb-4">
|
| 95 |
+
<div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">2</div>
|
| 96 |
+
<h3 class="text-xl font-bold">Applications de l'IA dans votre vie</h3>
|
| 97 |
+
</div>
|
| 98 |
+
<p class="text-gray-600 mb-4">Découvrez comment l'IA impacte déjà votre quotidien à travers des exemples concrets dans divers domaines.</p>
|
| 99 |
+
<div class="flex justify-between items-center">
|
| 100 |
+
<span class="text-sm text-gray-500">~20 minutes</span>
|
| 101 |
+
<a href="chapitre1-2.html" class="text-purple-600 font-semibold flex items-center">
|
| 102 |
+
Commencer <i data-feather="arrow-right" class="ml-2"></i>
|
| 103 |
+
</a>
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
|
| 108 |
+
<!-- Chapter 3 -->
|
| 109 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden chapter-card">
|
| 110 |
+
<img src="http://static.photos/science/640x360/3" alt="Champ de l'IA" class="w-full h-48 object-cover">
|
| 111 |
+
<div class="p-6">
|
| 112 |
+
<div class="flex items-center mb-4">
|
| 113 |
+
<div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">3</div>
|
| 114 |
+
<h3 class="text-xl font-bold">Le champ de l'intelligence artificielle</h3>
|
| 115 |
+
</div>
|
| 116 |
+
<p class="text-gray-600 mb-4">Explorez les différents domaines de l'IA et leurs spécificités. Cartographiez le paysage actuel de la recherche en IA.</p>
|
| 117 |
+
<div class="flex justify-between items-center">
|
| 118 |
+
<span class="text-sm text-gray-500">~25 minutes</span>
|
| 119 |
+
<a href="chapitre1-3.html" class="text-purple-600 font-semibold flex items-center">
|
| 120 |
+
Commencer <i data-feather="arrow-right" class="ml-2"></i>
|
| 121 |
+
</a>
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
</div>
|
| 125 |
+
|
| 126 |
+
<!-- Chapter 4 -->
|
| 127 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden chapter-card">
|
| 128 |
+
<img src="http://static.photos/minimal/640x360/4" alt="Mythes IA" class="w-full h-48 object-cover">
|
| 129 |
+
<div class="p-6">
|
| 130 |
+
<div class="flex items-center mb-4">
|
| 131 |
+
<div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">4</div>
|
| 132 |
+
<h3 class="text-xl font-bold">Mythes et réalité de l'IA</h3>
|
| 133 |
+
</div>
|
| 134 |
+
<p class="text-gray-600 mb-4">Séparez le vrai du faux sur l'IA. Comprenez ses limites actuelles et son potentiel réel au-delà des fantasmes hollywoodiens.</p>
|
| 135 |
+
<div class="flex justify-between items-center">
|
| 136 |
+
<span class="text-sm text-gray-500">~20 minutes</span>
|
| 137 |
+
<a href="chapitre1-4.html" class="text-purple-600 font-semibold flex items-center">
|
| 138 |
+
Commencer <i data-feather="arrow-right" class="ml-2"></i>
|
| 139 |
+
</a>
|
| 140 |
+
</div>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
</div>
|
| 145 |
+
</section>
|
| 146 |
+
|
| 147 |
+
<!-- Quiz Section -->
|
| 148 |
+
<section id="quiz" class="py-16 bg-purple-50">
|
| 149 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 150 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 151 |
+
<div class="md:flex">
|
| 152 |
+
<div class="md:w-1/3 bg-purple-600 text-white p-8 flex flex-col justify-center">
|
| 153 |
+
<h2 class="text-2xl font-bold mb-4">Testez vos connaissances</h2>
|
| 154 |
+
<p class="mb-6">Un quiz interactif pour valider votre compréhension des concepts clés de cette partie.</p>
|
| 155 |
+
<div class="flex items-center">
|
| 156 |
+
<i data-feather="award" class="mr-2"></i>
|
| 157 |
+
<span>10 questions - Score à obtenir: 80%</span>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
<div class="md:w-2/3 p-8">
|
| 161 |
+
<h3 class="text-xl font-bold mb-4">Quiz: Découverte de l'IA</h3>
|
| 162 |
+
<p class="text-gray-600 mb-6">Ce quiz couvre les 4 chapitres de cette partie. Vous pouvez le tenter après avoir complété tous les chapitres.</p>
|
| 163 |
+
<div class="flex flex-wrap gap-4">
|
| 164 |
+
<div class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full flex items-center">
|
| 165 |
+
<i data-feather="clock" class="mr-2 w-4 h-4"></i>
|
| 166 |
+
<span>15 minutes</span>
|
| 167 |
+
</div>
|
| 168 |
+
<div class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full flex items-center">
|
| 169 |
+
<i data-feather="help-circle" class="mr-2 w-4 h-4"></i>
|
| 170 |
+
<span>10 questions</span>
|
| 171 |
+
</div>
|
| 172 |
+
<div class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full flex items-center">
|
| 173 |
+
<i data-feather="repeat" class="mr-2 w-4 h-4"></i>
|
| 174 |
+
<span>3 tentatives</span>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
<button class="mt-8 bg-purple-600 text-white px-6 py-3 rounded-full font-semibold hover:bg-purple-700 transition duration-300 flex items-center">
|
| 178 |
+
Commencer le quiz <i data-feather="arrow-right" class="ml-2"></i>
|
| 179 |
+
</button>
|
| 180 |
+
</div>
|
| 181 |
+
</div>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
</section>
|
| 185 |
+
|
| 186 |
+
<!-- Next Part CTA -->
|
| 187 |
+
<section class="py-16 bg-white">
|
| 188 |
+
<div class="max-w-6xl mx-auto px-4 text-center">
|
| 189 |
+
<h2 class="text-2xl font-bold mb-4">Vous avez terminé cette partie?</h2>
|
| 190 |
+
<p class="text-gray-600 mb-8 max-w-2xl mx-auto">Passez à la partie suivante pour explorer les opportunités et défis de l'intelligence artificielle.</p>
|
| 191 |
+
<a href="partie2.html" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-full font-semibold hover:from-blue-600 hover:to-purple-700 transition duration-300 inline-flex items-center">
|
| 192 |
+
Partie 2: Opportunités & Défis <i data-feather="arrow-right" class="ml-2"></i>
|
| 193 |
+
</a>
|
| 194 |
+
</div>
|
| 195 |
+
</section>
|
| 196 |
+
|
| 197 |
+
<!-- Footer -->
|
| 198 |
+
<footer class="bg-gray-900 text-white py-12">
|
| 199 |
+
<div class="max-w-6xl mx-auto px-4">
|
| 200 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 201 |
+
<div>
|
| 202 |
+
<h3 class="text-xl font-bold mb-4">MohPython</h3>
|
| 203 |
+
<p class="text-gray-400">Rendre l'IA accessible à tous, un étudiant à la fois.</p>
|
| 204 |
+
</div>
|
| 205 |
+
<div>
|
| 206 |
+
<h4 class="font-bold mb-4">Navigation</h4>
|
| 207 |
+
<ul class="space-y-2">
|
| 208 |
+
<li><a href="index.html" class="text-gray-400 hover:text-white">Accueil</a></li>
|
| 209 |
+
<li><a href="partie1.html" class="text-white">Partie 1</a></li>
|
| 210 |
+
<li><a href="partie2.html" class="text-gray-400 hover:text-white">Partie 2</a></li>
|
| 211 |
+
<li><a href="partie3.html" class="text-gray-400 hover:text-white">Partie 3</a></li>
|
| 212 |
+
</ul>
|
| 213 |
+
</div>
|
| 214 |
+
<div>
|
| 215 |
+
<h4 class="font-bold mb-4">Contact</h4>
|
| 216 |
+
<div class="flex space-x-4">
|
| 217 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="mail"></i></a>
|
| 218 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
|
| 219 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
|
| 220 |
+
</div>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
| 224 |
+
<p>© 2023 MohPython. Tous droits réservés.</p>
|
| 225 |
+
</div>
|
| 226 |
+
</div>
|
| 227 |
+
</footer>
|
| 228 |
+
|
| 229 |
+
<script>
|
| 230 |
+
feather.replace();
|
| 231 |
+
|
| 232 |
+
// Mobile menu toggle
|
| 233 |
+
const mobileMenuButton = document.querySelector('.mobile-menu-button');
|
| 234 |
+
mobileMenuButton.addEventListener('click', () => {
|
| 235 |
+
// Implement mobile menu functionality here
|
| 236 |
+
alert("Menu mobile sera implémenté ici!");
|
| 237 |
+
});
|
| 238 |
+
</script>
|
| 239 |
+
</body>
|
| 240 |
+
</html>
|