Configurateur PC en Ligne – Composez Votre PC Idéal

Créez la configuration PC parfaite pour vos besoins avec notre outil de sélection de composants intelligent. Que vous soyez gamer, créateur de contenu ou professionnel, notre configurateur vous aide à choisir les meilleurs composants compatibles : 🔧 Sélection guidée des composants ✓ Vérification automatique de compatibilité 📊 Estimation des performances 💰 Calcul du budget en temps réel Comment utiliser le configurateur : Sélectionnez simplement vos composants un par un. Notre système vérifie automatiquement leur compatibilité et vous indique la performance globale attendue de votre configuration. .builder-container { max-width: 900px; margin: 20px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .builder-header { background: linear-gradient(45deg, #2c3e50, #3498db); color: white; padding: 25px; border-radius: 10px; margin-bottom: 20px; } .component-section { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px; } .component-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; cursor: pointer; transition: all 0.3s ease; position: relative; } .component-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #3498db; } .component-card.selected { border: 2px solid #2ecc71; background: #f7fcf9; } .price { color: #e74c3c; font-weight: bold; font-size: 1.1em; } .compatibility { margin-top: 20px; padding: 15px; border-radius: 8px; background: #f8f9fa; } .compatibility.warning { background: #fff3cd; border: 1px solid #ffeeba; } .total-section { background: #2c3e50; color: white; padding: 20px; border-radius: 8px; margin-top: 20px; display: flex; justify-content: space-between; align-items: center; } .performance-meter { background: #f0f0f0; height: 20px; border-radius: 10px; overflow: hidden; margin-top: 10px; } .performance-bar { height: 100%; background: linear-gradient(90deg, #2ecc71, #3498db); transition: width 0.3s ease; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 15px; } .stat-item { background: #f8f9fa; padding: 10px; border-radius: 5px; text-align: center; } .reset-btn { background: #e74c3c; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; } .reset-btn:hover { background: #c0392b; } Configurateur PC Sélectionnez vos composants et vérifiez leur compatibilité Processeur (CPU) AMD Ryzen 5 5600X 6 cœurs, 3.7 GHz - 4.6 GHz 299 € Intel i5-12600K 10 cœurs, 3.7 GHz - 4.9 GHz 319 € AMD Ryzen 7 5800X 8 cœurs, 3.8 GHz - 4.7 GHz 449 € Carte Graphique (GPU) RTX 3060 Ti 8GB GDDR6, Ray Tracing 499 € RX 6700 XT 12GB GDDR6, AMD RDNA 2 549 € RTX 3070 8GB GDDR6, Ray Tracing 649 € Mémoire RAM 16GB DDR4-3200 2x8GB, CL16 89 € 32GB DDR4-3600 2x16GB, CL18 169 € Total: 0 € Réinitialiser let configuration = { cpu: null, gpu: null, ram: null }; let totalPrice = 0; function selectComponent(type, name, price) { // Désélectionner l'ancien composant const cards = document.querySelectorAll(`#${type}-section .component-card`); cards.forEach(card => card.classList.remove('selected')); // Sélectionner le nouveau const selectedCard = Array.from(cards).find(card => card.textContent.includes(name)); selectedCard.classList.add('selected'); // Mettre à jour la configuration configuration[type] = { name, price }; updateTotal(); checkCompatibility(); updatePerformance(); } function updateTotal() { totalPrice = Object.values(configuration) .filter(item => item !== null) .reduce((sum, item) => sum + item.price, 0); document.getElementById('total-price').textContent = totalPrice + ' €'; } function checkCompatibility() { const compatibility = document.getElementById('compatibility'); let message = ''; let isWarning = false; if (configuration.cpu && configuration.gpu) { if (configuration.cpu.name.includes('AMD') && configuration.gpu.name.includes('RTX')) { message = '💡 Info: Configuration compatible. Pour des performances optimales avec un CPU AMD, une carte graphique AMD pourrait offrir de meilleures synergies.'; isWarning = true; } } if (configuration.cpu && configuration.ram) { if (configuration.cpu.name.includes('Ryzen') && !configuration.ram.name.includes('3600')) { message += '💡 Info: Les processeurs Ryzen fonctionnent mieux avec de la RAM DDR4-3600.'; isWarning = true; } } compatibility.innerHTML = message; compatibility.classList.toggle('warning', isWarning); } function updatePerformance() { let performanceScore = 0; let gaming = 0; let productivity = 0; if (configuration.cpu) { if (configuration.cpu.name.includes('5800X')) { performanceScore += 35; productivity += 95; gaming += 90; } else if (configuration.cpu.name.includes('12600K')) { performanceScore += 33; productivity += 90; gaming += 85; } else if (configuration.cpu.name.includes('5600X')) { performanceScore += 30; productivity += 85; gaming += 80; } } if (configuration.gpu) { if (configuration.gpu.name.includes('3070')) { performanceScore += 35; gaming += 95; } else if (configuration.gpu.name.includes('6700')) { performanceScore += 32; gaming += 90; } else if (configuration.gpu.name.includes('3060')) { performanceScore += 30; gaming += 85; } } if (configuration.ram) { if (configuration.ram.name.includes('32GB')) { performanceScore += 20; productivity += 95; } else if (configuration.ram.name.includes('16GB')) { performanceScore += 15; productivity += 85; } } document.getElementById('performance-bar').style.width = `${performanceScore}%`; // Mise à jour des statistiques document.getElementById('stats').innerHTML = ` Gaming ${gaming}% Productivité ${productivity}% Score Global ${performanceScore}% `; } function resetConfiguration() { configuration = { cpu: null, gpu: null, ram: null }; totalPrice = 0; // Réinitialiser les sélections visuelles document.querySelectorAll('.component-card').forEach(card => { card.classList.remove('selected'); }); // Réinitialiser les affichages document.getElementById('total-price').textContent = '0 €'; document.getElementById('compatibility').innerHTML = ''; document.getElementById('performance-bar').style.width = '0%'; document.getElementById('stats').innerHTML = ''; }