Upload folder using huggingface_hub

index.html

@@ -993,38 +993,79 @@
             box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
         }
         
-        /* Productivity Options */
-        .productivity-options {
-            display: flex;
-            gap: 15px;
+        /* Productivity Options - STYLE MODIFIÉ */
+        .productivity-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
             margin-top: 10px;
         }
         
-        .productivity-option {
-            flex: 1;
-            padding: 15px;
-            border: 2px solid #e2e8f0;
+        .option-section {
+            background: white;
             border-radius: 10px;
-            text-align: center;
+            padding: 1rem;
+            border: 1px solid #e2e8f0;
+        }
+        
+        .option-section h4 {
+            font-size: 1rem;
+            color: #333;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .option-section h4 i {
+            color: #333;
+        }
+        
+        .option-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 10px;
+        }
+        
+        .option-item {
+            padding: 12px;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
             cursor: pointer;
             transition: all 0.3s;
+            text-align: center;
+            background: white;
         }
         
-        .productivity-option:hover {
-            border-color: var(--primary-color);
-            background: rgba(59, 130, 246, 0.05);
+        .option-item:hover {
+            border-color: #666;
+            background: #f8f9fa;
         }
         
-        .productivity-option.selected {
-            border-color: var(--primary-color);
-            background: rgba(59, 130, 246, 0.1);
-            box-shadow: 0 5px 15px rgba(59, 130, 246, 0.1);
+        .option-item.selected {
+            border-color: #333;
+            background: #f0f0f0;
+            font-weight: 600;
         }
         
-        .productivity-icon {
-            font-size: 1.5rem;
-            margin-bottom: 8px;
+        .option-icon {
+            font-size: 1.2rem;
+            margin-bottom: 5px;
             display: block;
+            color: #333;
+        }
+        
+        .option-title {
+            font-weight: 500;
+            color: #333;
+            font-size: 0.9rem;
+            margin-bottom: 3px;
+        }
+        
+        .option-description {
+            font-size: 0.8rem;
+            color: #666;
+            line-height: 1.2;
         }
         
         /* Energy Pattern */
@@ -1271,7 +1312,10 @@
                 font-size: 2rem;
             }
             
-            .productivity-options,
+            .productivity-grid {
+                grid-template-columns: 1fr;
+            }
+            
             .energy-patterns {
                 flex-direction: column;
             }
@@ -1816,7 +1860,7 @@
             </div>
         </section>
         
-        <!-- Objectif Section -->
+        <!-- Objectif Section - STYLE MODIFIÉ -->
         <section id="objectif" class="tab-content">
             <div class="card">
                 <div class="card-header">
@@ -1867,38 +1911,44 @@
                     </select>
                 </div>
                 
-                <!-- Habitudes Productivité -->
-                <div class="form-group">
-                    <label class="form-label"><i class="fas fa-chart-line"></i> Méthode Productivité</label>
-                    <div class="productivity-options">
-                        <div class="productivity-option selected" onclick="selectProductivityMethod('pomodoro')">
-                            <span class="productivity-icon">🍅</span>
-                            <div>Pomodoro</div>
-                            <small>25 min travail / 5 min pause</small>
-                        </div>
-                        <div class="productivity-option" onclick="selectProductivityMethod('deepwork')">
-                            <span class="productivity-icon">⏳</span>
-                            <div>Deep Work</div>
-                            <small>90 min focus intense</small>
+                <!-- Section modifiée avec style professionnel noir et blanc -->
+                <div class="productivity-grid">
+                    <!-- Méthode Productivité -->
+                    <div class="option-section">
+                        <h4><i class="fas fa-chart-line"></i> Méthode Productivité</h4>
+                        <div class="option-grid">
+                            <div class="option-item selected" onclick="selectProductivityMethod('pomodoro')">
+                                <span class="option-icon"><i class="fas fa-hourglass-half"></i></span>
+                                <div class="option-title">Pomodoro</div>
+                                <div class="option-description">25 min / 5 min pause</div>
+                            </div>
+                            <div class="option-item" onclick="selectProductivityMethod('deepwork')">
+                                <span class="option-icon"><i class="fas fa-brain"></i></span>
+                                <div class="option-title">Deep Work</div>
+                                <div class="option-description">90 min focus intense</div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                
-                <!-- Type d'Énergie -->
-                <div class="form-group">
-                    <label class="form-label"><i class="fas fa-sun"></i> Type d'Énergie</label>
-                    <div class="energy-patterns">
-                        <div class="energy-pattern selected" onclick="selectEnergyPattern('morning')">
-                            <div>🌅 Matinale</div>
-                            <small>Meilleure concentration le matin</small>
-                        </div>
-                        <div class="energy-pattern" onclick="selectEnergyPattern('evening')">
-                            <div>🌙 Vespérale</div>
-                            <small>Plus productif en soirée</small>
-                        </div>
-                        <div class="energy-pattern" onclick="selectEnergyPattern('flexible')">
-                            <div>🔄 Flexible</div>
-                            <small>Adaptable selon le jour</small>
+                    
+                    <!-- Type d'Énergie -->
+                    <div class="option-section">
+                        <h4><i class="fas fa-bolt"></i> Type d'Énergie</h4>
+                        <div class="option-grid">
+                            <div class="option-item selected" onclick="selectEnergyPattern('morning')">
+                                <span class="option-icon"><i class="fas fa-sun"></i></span>
+                                <div class="option-title">Matinale</div>
+                                <div class="option-description">Productif le matin</div>
+                            </div>
+                            <div class="option-item" onclick="selectEnergyPattern('evening')">
+                                <span class="option-icon"><i class="fas fa-moon"></i></span>
+                                <div class="option-title">Vespérale</div>
+                                <div class="option-description">Productif le soir</div>
+                            </div>
+                            <div class="option-item" onclick="selectEnergyPattern('flexible')">
+                                <span class="option-icon"><i class="fas fa-sync-alt"></i></span>
+                                <div class="option-title">Flexible</div>
+                                <div class="option-description">Adaptable</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -2820,19 +2870,20 @@
         // Sélectionner la méthode de productivité
         function selectProductivityMethod(method) {
             productivityMethod = method;
-            document.querySelectorAll('.productivity-option').forEach(option => {
-                option.classList.remove('selected');
+            document.querySelectorAll('.option-item').forEach(item => {
+                item.classList.remove('selected');
             });
-            event.target.closest('.productivity-option').classList.add('selected');
+            event.target.closest('.option-item').classList.add('selected');
         }
         
         // Sélectionner le type d'énergie
         function selectEnergyPattern(pattern) {
             energyPattern = pattern;
-            document.querySelectorAll('.energy-pattern').forEach(pattern => {
-                pattern.classList.remove('selected');
+            const patternElements = document.querySelectorAll('.option-section:nth-child(2) .option-item');
+            patternElements.forEach(item => {
+                item.classList.remove('selected');
             });
-            event.target.closest('.energy-pattern').classList.add('selected');
+            event.target.closest('.option-item').classList.add('selected');
         }
         
         // Basculer créneau horaire
@@ -2930,7 +2981,7 @@
                     repetition: i + 1,
                     type: i === 0 ? 'Apprentissage' : i < 3 ? 'Consolidation' : 'Maintien',
                     strategie: i === 0 ? 'Focus intense' : 'Révision active',
-                    productivity_method: productivityMethod === 'pomodoro' ? '🍅 Pomodoro' : '⏳ Deep Work',
+                    productivity_method: productivityMethod === 'pomodoro' ? 'Pomodoro' : 'Deep Work',
                     optimal_time: energyPattern === 'morning' ? '08:00-10:00' : 
                                  energyPattern === 'evening' ? '19:00-21:00' : 'Adaptable'
                 });