configurateur – Tech Solutions

<!DOCTYPE html>

<head>

<title>Configurateur PC Gamer Sur-Mesure | TechSolutions.tn</title>

tailwind.config = {

darkMode: ‘class’,

theme: {

extend: {

colors: {

brand: {

400: ‘#22d3ee’,

500: ‘#06b6d4’,

600: ‘#0891b2’,

darkbg: ‘#0a0e17’,

cardbg: ‘#111827’,

cardhover: ‘#1a2234’,

bordercolor: ‘#1f2937’

fontFamily: {

sans: [‘Inter’, ‘sans-serif’],

heading: [‘Space Grotesk’, ‘sans-serif’],

}

</script>

<style>

body { font-family: ‘Inter’, sans-serif; background-color: #0a0e17; color: #f3f4f6; }

h1, h2, h3, h4, .font-heading { font-family: ‘Space Grotesk’, sans-serif; }

.glow-brand { box-shadow: 0 0 25px -5px rgba(6, 182, 212, 0.25); }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }

.scrollbar-thin::-webkit-scrollbar-track { background: #0a0e17; }

.scrollbar-thin::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 3px; }

.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

@media print {

body { background: #fff !important; color: #000 !important; }

.no-print { display: none !important; }

.print-only { display: block !important; }

.card-print { border: 1px solid #ddd !important; background: #fff !important; color: #000 !important; }

}

</style>

</head>

</div>

<span>Tech<span class= »text-brand-400″>Solutions</span><span class= »text-xs text-gray-500 font-normal »>.tn</span></span>

</a>

<span class= »hidden sm:inline »>Réinitialiser</span>

</button>

<span>Besoin d’aide ?</span>

</a>

</div>

</header>

<div>

<i class= »fa-solid fa-wand-magic-sparkles »></i> EL CONFIGURATEUR PC 2026

</div>

<h1 class= »text-2xl sm:text-3xl font-bold text-white »>Assemblez votre PC Gamer & Pro en direct</h1>

<p class= »text-xs sm:text-sm text-gray-400 mt-1″>Compatibilité des composants testée automatiquement. Montage & Câble Management offerts.</p>

</div>

<span>Configuration 100% Compatible</span>

</div>

</section>

</div>

<span>Votre Configuration</span>

</h3>

<span id= »selectedCountBadge » class= »px-2 py-0.5 rounded-md bg-gray-800 text-brand-400 text-xs font-bold »>0 / 8 Pièces</span>

</div>

<p class= »text-gray-500 text-center py-6″>Aucun composant sélectionné.</p>

</div>

<i class= »fa-solid fa-bolt text-amber-400″></i> Puissance Estimée:

</span>

</div>

</div>

<p id= »psuRecommendationText » class= »text-[10px] text-gray-400 mt-1″>Alimentation conseillée : min. 450W</p>

</div>

<span class= »text-xs text-gray-400″>Total TTC (Dinar Tunisien) :</span>

</div>

<span class= »text-[10px] text-emerald-400 block mt-1″><i class= »fa-solid fa-truck-fast mr-1″></i> Livraison 24/48h & Montage Inclus</span>

</div>

<span>Commander via WhatsApp</span>

</button>

<i class= »fa-solid fa-print »></i> Imprimer Devis

</button>

<i class= »fa-solid fa-cart-plus »></i> Panier

</button>

</div>

<span>Garantie 1 An sur toutes les pièces neuves.</span>

</div>

<span>Montage rigoureux, test de stress & BIOS à jour.</span>

</div>

<div>

<h1 class= »text-2xl font-bold »>TechSolutions.tn</h1>

<p class= »text-xs text-gray-600″>Spécialiste Informatique & Gaming en Tunisie</p>

<p class= »text-xs text-gray-600″>Tél: +216 20 000 000 | Email: contact@techsolutions.tn</p>

</div>

<h2 class= »text-lg font-bold »>DEVIS PROFORMA</h2>

</div>

<thead>

<th class= »p-2″>Catégorie</th>

<th class= »p-2″>Désignation du Composant</th>

<th class= »p-2 text-right »>Prix Unitaire (DT)</th>

</tr>

</thead>

</tbody>

</table>

<div class= »flex justify-between »><span>Montage & Câblage:</span><span class= »font-bold »>GRATUIT</span></div>

<div class= »flex justify-between »><span>Livraison:</span><span class= »font-bold »>GRATUITE</span></div>

<span>Total Net:</span>

</div>

<p class= »text-[10px] text-gray-500 mt-8 text-center »>* Devis valable 7 jours sous réserve de disponibilité des stocks.</p>

</div>

</main>

<div>

Choisir un Composant

</h3>

<p class= »text-xs text-gray-400″ id= »modalSubtitle »>Sélectionnez la pièce adaptée à votre budget</p>

</div>

</button>

</div>

</div>

</div>

// 1. BASE DE DONNÉES DES COMPOSANTS (Marché Tunisien & Specs de Compatibilité)

const DATABASE = {

cpu: {

icon: « fa-microchip »,

items: [

{ id: « cpu-1 », name: « Intel Core i3-12100F (4C/8T up to 4.3GHz) », price: 295, socket: « LGA1700 », watts: 65, img: « https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=120 » },

{ id: « cpu-2 », name: « Intel Core i5-13400F (10C/16T up to 4.6GHz) », price: 620, socket: « LGA1700 », watts: 65, img: « https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=120 » },

{ id: « cpu-3 », name: « Intel Core i7-14700KF (20C/28T up to 5.6GHz) », price: 1290, socket: « LGA1700 », watts: 125, img: « https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=120 » },

{ id: « cpu-4 », name: « AMD Ryzen 5 5600 (6C/12T up to 4.4GHz) », price: 440, socket: « AM4 », watts: 65, img: « https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=120 » },

{ id: « cpu-5 », name: « AMD Ryzen 7 7800X3D (Gaming King AM5) », price: 1450, socket: « AM5 », watts: 120, img: « https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=120 » }

]

motherboard: {

icon: « fa-chess-board »,

items: [

{ id: « mb-1 », name: « MSI PRO H610M-E (DDR4 / LGA1700) », price: 245, socket: « LGA1700 », ramType: « DDR4 », watts: 30, img: « https://images.unsplash.com/photo-1518770660439-4636190af475?w=120 » },

{ id: « mb-2 », name: « ASUS PRIME B760-PLUS (DDR5 / LGA1700) », price: 540, socket: « LGA1700 », ramType: « DDR5 », watts: 40, img: « https://images.unsplash.com/photo-1518770660439-4636190af475?w=120 » },

{ id: « mb-3 », name: « Gigabyte B550M DS3H (DDR4 / AM4) », price: 340, socket: « AM4 », ramType: « DDR4 », watts: 30, img: « https://images.unsplash.com/photo-1518770660439-4636190af475?w=120 » },

{ id: « mb-4 », name: « MSI B650 GAMING PLUS WIFI (DDR5 / AM5) », price: 680, socket: « AM5 », ramType: « DDR5 », watts: 45, img: « https://images.unsplash.com/photo-1518770660439-4636190af475?w=120 » }

]

ram: {

icon: « fa-memory »,

items: [

{ id: « ram-1 », name: « Corsair Vengeance LPX 16GB (2x8GB) 3200MHz DDR4 », price: 135, ramType: « DDR4 », watts: 10, img: « https://images.unsplash.com/photo-1562976540-1502c2145186?w=120 » },

{ id: « ram-2 », name: « Kingston Fury Beast RGB 32GB (2x16GB) 3200MHz DDR4 », price: 270, ramType: « DDR4 », watts: 15, img: « https://images.unsplash.com/photo-1562976540-1502c2145186?w=120 » },

{ id: « ram-3 », name: « Corsair Vengeance 32GB (2x16GB) 6000MHz DDR5 », price: 390, ramType: « DDR5 », watts: 15, img: « https://images.unsplash.com/photo-1562976540-1502c2145186?w=120 » },

{ id: « ram-4 », name: « G.Skill Trident Z5 RGB 32GB (2x16GB) 6400MHz DDR5 », price: 490, ramType: « DDR5 », watts: 20, img: « https://images.unsplash.com/photo-1562976540-1502c2145186?w=120 » }

]

gpu: {

icon: « fa-tv »,

items: [

{ id: « gpu-1 », name: « MSI GeForce RTX 3050 Ventus 2X 6GB GDDR6 », price: 650, watts: 130, img: « https://images.unsplash.com/photo-1587202372775-e229f172b9d7?w=120 » },

{ id: « gpu-2 », name: « ASUS Dual GeForce RTX 4060 OC 8GB GDDR6 », price: 1080, watts: 115, img: « https://images.unsplash.com/photo-1587202372775-e229f172b9d7?w=120 » },

{ id: « gpu-3 », name: « Gigabyte GeForce RTX 4060 Ti Gaming OC 8GB », price: 1550, watts: 160, img: « https://images.unsplash.com/photo-1587202372775-e229f172b9d7?w=120 » },

{ id: « gpu-4 », name: « MSI GeForce RTX 4070 SUPER 12GB Ventus 2X », price: 2390, watts: 220, img: « https://images.unsplash.com/photo-1587202372775-e229f172b9d7?w=120 » }

]

cooler: {

icon: « fa-fan »,

items: [

{ id: « cl-1 », name: « Ventirad Stock Fourni / Basic Cooler », price: 0, watts: 5, img: « https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=120 » },

{ id: « cl-2 », name: « Thermalright Assassin X 120 Refroidisseur ARGB », price: 85, watts: 10, img: « https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=120 » },

{ id: « cl-3 », name: « Watercooling MSI MAG CoreLiquid 240R V2 (240mm) », price: 290, watts: 25, img: « https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=120 » }

]

ssd: {

icon: « fa-hard-drive »,

items: [

{ id: « ssd-1 », name: « SSD Crucial P3 Plus 500GB M.2 NVMe PCIe 4.0 », price: 125, watts: 5, img: « https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?w=120 » },

{ id: « ssd-2 », name: « SSD Kingston NV2 1TB M.2 NVMe PCIe 4.0 », price: 225, watts: 5, img: « https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?w=120 » },

{ id: « ssd-3 », name: « SSD Samsung 990 PRO 2TB M.2 NVMe (7450 Mo/s) », price: 540, watts: 8, img: « https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?w=120 » }

]

psu: {

icon: « fa-plug »,

items: [

{ id: « psu-1 », name: « MSI MAG A550BN 550W 80 Plus Bronze », price: 165, ratedWatts: 550, img: « https://images.unsplash.com/photo-1555680202-c86f0e12f086?w=120 » },

{ id: « psu-2 », name: « Gigabyte P650B 650W 80 Plus Bronze », price: 215, ratedWatts: 650, img: « https://images.unsplash.com/photo-1555680202-c86f0e12f086?w=120 » },

{ id: « psu-3 », name: « Corsair RM750e 750W 80 Plus Gold Full Modulaire », price: 395, ratedWatts: 750, img: « https://images.unsplash.com/photo-1555680202-c86f0e12f086?w=120 » }

]

case: {

icon: « fa-cube »,

items: [

{ id: « case-1 », name: « Boîtier MSI MAG Forge 100M (3 Ventilateurs RGB) », price: 185, watts: 10, img: « https://images.unsplash.com/photo-1587202372634-32705e3bf49c?w=120 » },

{ id: « case-2 », name: « Boîtier Aquarium Panoramique Dual Chamber RGB », price: 280, watts: 15, img: « https://images.unsplash.com/photo-1587202372634-32705e3bf49c?w=120 » }

]

}

};

// 2. ÉTAT DU CONFIGURATEUR

let userConfig = {

cpu: null,

motherboard: null,

ram: null,

gpu: null,

cooler: null,

ssd: null,

psu: null,

case: null

};

let currentActiveCategoryKey = null;

// 3. INITIALISATION ET AFFICHAGE DES LIGNES

function initConfigurator() {

const container = document.getElementById(‘categoriesContainer’);

container.innerHTML = »;

for (const [key, category] of Object.entries(DATABASE)) {

const isSelected = userConfig[key] !== null;

const item = userConfig[key];

const card = document.createElement(‘div’);

card.className = `p-4 sm:p-5 rounded-2xl border transition-all duration-200 ${

isSelected ? ‘bg-cardbg border-brand-500/40’ : ‘bg-cardbg/80 border-gray-800 hover:border-gray-700’

}`;

card.innerHTML = `

<div class= »w-12 h-12 rounded-xl flex items-center justify-center text-xl shrink-0 ${

isSelected ? ‘bg-brand-500/20 text-brand-400’ : ‘bg-gray-900 text-gray-400’

} »>

</div>

<div>

<span class= »text-[11px] text-gray-400 uppercase tracking-wider block font-semibold »>${category.name}</span>

${isSelected ? item.name : ‘<span class= »text-gray-500 font-normal italic »>Aucun composant sélectionné</span>’}

</h4>

${isSelected && item.socket ? `<span class= »text-[10px] bg-gray-800 text-brand-400 px-2 py-0.5 rounded font-mono mt-1 inline-block »>Socket: ${item.socket}</span>` : »}

${isSelected && item.ramType ? `<span class= »text-[10px] bg-gray-800 text-emerald-400 px-2 py-0.5 rounded font-mono mt-1 inline-block »>Format: ${item.ramType}</span>` : »}

</div>

${isSelected ? `<span class= »text-base font-bold text-brand-400 font-heading »>${item.price} DT</span>` : »}

${isSelected ? `

Modifier

</button>

</button>

` : `

<i class= »fa-solid fa-plus »></i> Choisir

</button>

</div>

container.appendChild(card);

}

updateSummaryAndStats();

}

// 4. GESTION DU MODAL DE SÉLECTION & VÉRIFICATION DE COMPATIBILITÉ

function openModal(categoryKey) {

currentActiveCategoryKey = categoryKey;

const category = DATABASE[categoryKey];

document.getElementById(‘modalTitle’).innerHTML = `<i class= »fa-solid ${category.icon} text-brand-400″></i> ${category.name}`;

document.getElementById(‘modalSearchInput’).value = »;

document.getElementById(‘modalBackdrop’).classList.remove(‘hidden’);

renderModalProducts(category.items);

}

function closeModal() {

document.getElementById(‘modalBackdrop’).classList.add(‘hidden’);

}

function renderModalProducts(items) {

const list = document.getElementById(‘modalProductList’);

list.innerHTML = »;

items.forEach(product => {

// TEST DE COMPATIBILITÉ

let isCompatible = true;

let incompatReason = « »;

// Vérif 1: Carte Mère Socket vs CPU sélectionné

if (currentActiveCategoryKey === ‘motherboard’ && userConfig.cpu) {

if (product.socket !== userConfig.cpu.socket) {

isCompatible = false;

incompatReason = `Incompatible avec le processeur (${userConfig.cpu.socket})`;

}

// Vérif 2: CPU vs Carte Mère sélectionnée

if (currentActiveCategoryKey === ‘cpu’ && userConfig.motherboard) {

if (product.socket !== userConfig.motherboard.socket) {

isCompatible = false;

incompatReason = `Incompatible avec la carte mère (${userConfig.motherboard.socket})`;

}

// Vérif 3: RAM vs Carte Mère (DDR4 / DDR5)

if (currentActiveCategoryKey === ‘ram’ && userConfig.motherboard) {

if (product.ramType !== userConfig.motherboard.ramType) {

isCompatible = false;

incompatReason = `Nécessite de la ${userConfig.motherboard.ramType}`;

}

const itemDiv = document.createElement(‘div’);

itemDiv.className = `p-3 sm:p-4 rounded-xl border flex flex-col sm:flex-row sm:items-center justify-between gap-4 transition-all ${

!isCompatible

? ‘bg-gray-900/40 border-red-900/30 opacity-60’

: ‘bg-gray-900 border-gray-800 hover:border-brand-500/50’

}`;

itemDiv.innerHTML = `

<div>

<h4 class= »text-xs sm:text-sm font-bold text-white »>${product.name}</h4>

${product.socket ? `<span class= »text-[10px] text-brand-400 bg-gray-800 px-1.5 py-0.5 rounded »>Socket: ${product.socket}</span>` : »}

${product.ramType ? `<span class= »text-[10px] text-emerald-400 bg-gray-800 px-1.5 py-0.5 rounded »>${product.ramType}</span>` : »}

${product.watts ? `<span class= »text-[10px] text-amber-400 bg-gray-800 px-1.5 py-0.5 rounded »>${product.watts}W</span>` : »}

</div>

${!isCompatible ? `<p class= »text-[11px] text-red-400 font-semibold mt-1″><i class= »fa-solid fa-triangle-exclamation mr-1″></i>${incompatReason}</p>` : »}

</div>

<span class= »text-base font-bold font-heading text-white »>${product.price} DT</span>

<button onclick= »selectComponent(‘${product.id}’) » ${!isCompatible ? ‘disabled’ : »} class= »px-4 py-2 rounded-xl text-xs font-bold transition-all ${

!isCompatible

? ‘bg-gray-800 text-gray-500 cursor-not-allowed’

: ‘bg-brand-500 hover:bg-brand-400 text-darkbg shadow-md’

} »>

Sélectionner

</button>

</div>

list.appendChild(itemDiv);

});

}

function filterModalProducts() {

const query = document.getElementById(‘modalSearchInput’).value.toLowerCase();

const items = DATABASE[currentActiveCategoryKey].items.filter(p => p.name.toLowerCase().includes(query));

renderModalProducts(items);

}

function selectComponent(productId) {

const product = DATABASE[currentActiveCategoryKey].items.find(p => p.id === productId);

userConfig[currentActiveCategoryKey] = product;

closeModal();

initConfigurator();

}

function removeComponent(categoryKey) {

userConfig[categoryKey] = null;

initConfigurator();

}

function resetConfig() {

if(confirm(« Voulez-vous réinitialiser toute la configuration ? »)) {

for (let key in userConfig) userConfig[key] = null;

initConfigurator();

}

// 5. CALCULS DYNAMIQUES (TOTAL + WATTAGE)

function updateSummaryAndStats() {

let total = 0;

let watts = 50; // Conso de base (fans, chipset, rgb)

let selectedCount = 0;

const summaryList = document.getElementById(‘summaryList’);

const printTableBody = document.getElementById(‘printTableBody’);

summaryList.innerHTML = »;

printTableBody.innerHTML = »;

for (const [key, item] of Object.entries(userConfig)) {

if (item) {

total += item.price;

watts += (item.watts || 0);

selectedCount++;

// Item dans sidebar

const div = document.createElement(‘div’);

div.className = ‘flex justify-between items-center text-gray-300 py-1 border-b border-gray-800/40’;

div.innerHTML = `

<span class= »truncate pr-2 text-white font-medium »>${DATABASE[key].name}: ${item.name}</span>

<span class= »font-bold text-brand-400 shrink-0″>${item.price} DT</span>

summaryList.appendChild(div);

// Item dans le devis d’impression

const tr = document.createElement(‘tr’);

tr.className = ‘border-b’;

tr.innerHTML = `

<td class= »p-2 font-semibold »>${DATABASE[key].name}</td>

<td class= »p-2 text-right font-bold »>${item.price} DT</td>

printTableBody.appendChild(tr);

}

if (selectedCount === 0) {

summaryList.innerHTML = ‘<p class= »text-gray-500 text-center py-6″>Aucun composant sélectionné.</p>’;

}

// Mise à jour des affichages

document.getElementById(‘selectedCountBadge’).innerText = `${selectedCount} / 8 Pièces`;

document.getElementById(‘totalPriceDisplay’).innerText = total.toLocaleString() + ‘ DT’;

document.getElementById(‘printTotalPrice’).innerText = total.toLocaleString() + ‘ DT’;

document.getElementById(‘printDate’).innerText = ‘Date : ‘ + new Date().toLocaleDateString(‘fr-TN’);

// Wattage Bar & Alim Recommandée

document.getElementById(‘wattageText’).innerText = `${watts} Watts`;

const recommendedPsu = Math.ceil((watts * 1.35) / 50) * 50; // Marge de sécurité 35%

document.getElementById(‘psuRecommendationText’).innerText = `Alimentation minimale conseillée : ${recommendedPsu}W`;

const barWidth = Math.min((watts / 850) * 100, 100);

document.getElementById(‘wattageBar’).style.width = `${barWidth}%`;

}

// 6. ENVOI SUR WHATSAPP

function orderViaWhatsApp() {

let msg = « Bonjour TechSolutions.tn, je souhaite commander la configuration PC suivante :\n\n »;

let total = 0;

let hasItem = false;

for (const [key, item] of Object.entries(userConfig)) {

if (item) {

hasItem = true;

total += item.price;

msg += `▪ *${DATABASE[key].name}* : ${item.name} (${item.price} DT)\n`;

}

if (!hasItem) {

alert(« Veuillez choisir au moins un composant avant de commander. »);

return;

}

msg += `\n💰 *PRIX TOTAL ESTIMÉ* : ${total} DT`;

msg += `\n🚚 *Livraison & Montage souhaités.*`;

window.open(`https://wa.me/21620000000?text=${encodeURIComponent(msg)}`, ‘_blank’);

}

function addToWooCommerceCart() {

alert(« Configuration envoyée au panier WooCommerce avec succès ! »);

}

// Lancement au chargement

document.addEventListener(‘DOMContentLoaded’, initConfigurator);

</script>

</body>

</html>