diff --git a/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html b/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html index 74902bb..2119fe8 100644 --- a/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html +++ b/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html @@ -4596,27 +4596,55 @@ var wpcf7 = { } } - // Group storage options by signature (content similarity) - // This allows us to separate "Consumer Gen4 Slots" from "Enterprise Gen5 Slots" automatically - const storageGroups = {}; - const groupOrder = []; // Preserve order + // For instant customization, don't group - show each slot individually + // For custom servers, group similar slots together + if (isInstant) { + // Show each storage slot individually + groups.storage.forEach((opt, index) => { + const label = document.createElement('div'); + label.className = 'section-label'; + label.style.marginTop = '1.5rem'; + label.textContent = `💿 ${opt.label}`; + container.appendChild(label); - groups.storage.forEach(opt => { - // Create a signature based on available values. - // We use a simplified signature: text + price of all options - // We trim and lowercase to be robust against minor scraping diffs - const signature = opt.values.map(v => v.text.trim().toLowerCase() + '|' + v.price).join('||'); - - if (!storageGroups[signature]) { - storageGroups[signature] = []; - groupOrder.push(signature); - } - storageGroups[signature].push(opt); - }); + // Create visualizer for this single slot + const visualContainer = document.createElement('div'); + visualContainer.className = 'storage-slots-container'; + const uniqueSuffix = '-instant-s' + index; - // Render each group - groupOrder.forEach((sig, groupIndex) => { - const groupOpts = storageGroups[sig]; + visualContainer.innerHTML = ` +
+ Slot: ${opt.label} + Configured +
+
+
+
+ `; + container.appendChild(visualContainer); + + // Create individual option grid for this slot + container.appendChild(createOptionGrid(opt, true, -1, isInstant, preselected)); + }); + } else { + // Group storage options by signature for custom servers + const storageGroups = {}; + const groupOrder = []; // Preserve order + + groups.storage.forEach(opt => { + // Create a signature based on available values + const signature = opt.values.map(v => v.text.trim().toLowerCase() + '|' + v.price).join('||'); + + if (!storageGroups[signature]) { + storageGroups[signature] = []; + groupOrder.push(signature); + } + storageGroups[signature].push(opt); + }); + + // Render each group + groupOrder.forEach((sig, groupIndex) => { + const groupOpts = storageGroups[sig]; const firstOpt = groupOpts[0]; const label = document.createElement('div');