From 55c5867c751830ce388ef845312327bb10387997 Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Sat, 6 Dec 2025 02:20:19 +0400
Subject: [PATCH] enhance: improve visual appeal of storage in CONFIGURATION
 SUMMARY
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Replace plain text storage display with styled drive pills
- Add icons for different drive types (NVMe, Crucial, Kioxia, Samsung)
- Create gradient backgrounds with hover effects
- Show quantity and drive type separately for clarity
- Add subtle animations and shadows

Each drive now displays as:
[ICON] [QUANTITY]
       [DRIVE NAME]

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../new-baremetal.html                        | 110 ++++++++++++++++--
 1 file changed, 99 insertions(+), 11 deletions(-)

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 0c765c8..4c85cbc 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	
@@ -1179,6 +1179,50 @@ img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
             border: none;
         }
 
+        /* Enhanced Storage Pills for Summary */
+        .storage-pill {
+            display: inline-flex;
+            align-items: center;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 0.4rem 0.75rem;
+            margin: 0.25rem 0.5rem 0.25rem 0;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+            transition: all 0.2s ease;
+        }
+
+        .storage-pill:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .storage-icon {
+            font-size: 1.2rem;
+            margin-right: 0.5rem;
+            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+        }
+
+        .storage-info {
+            display: flex;
+            flex-direction: column;
+            gap: 0.1rem;
+        }
+
+        .storage-count {
+            font-size: 0.7rem;
+            font-weight: 600;
+            color: var(--brand-primary);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .storage-name {
+            font-size: 0.85rem;
+            font-weight: 500;
+            color: var(--text-primary);
+        }
+
         .server-meta-row {
             display: flex;
             justify-content: space-between;
@@ -1411,7 +1455,21 @@ img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
         }
 
         .summary-row .label { color: var(--text-secondary); }
-        .summary-row .val { font-weight: 500; text-align: right; max-width: 60%; }
+        .summary-row .val {
+            font-weight: 500;
+            text-align: right;
+            max-width: 60%;
+        }
+
+        /* Special handling for storage summary to allow multiple pills */
+        #summaryStorage {
+            max-width: 65%;
+            line-height: 1.2;
+        }
+
+        #summaryStorage .storage-pill {
+            margin-bottom: 0.5rem;
+        }
 
         .total-row {
             display: flex;
@@ -5127,11 +5185,11 @@ var wpcf7 = {
             if(specStorage) specStorage.innerHTML = pillsHtml;
         };
 
-        // Function to update storage summary
+        // Function to update storage summary with enhanced styling
         function updateStorageSummary() {
             // Collect all selected drives
             const storageCount = {};
-            let storageSummary = [];
+            let storageHtml = '';
 
             Object.values(storageSelection).forEach(drive => {
                 if (drive.name && !drive.name.toLowerCase().includes('none')) {
@@ -5139,17 +5197,47 @@ var wpcf7 = {
                 }
             });
 
-            // Build summary text with counts
-            Object.entries(storageCount).forEach(([name, count]) => {
-                storageSummary.push(`${count}x ${name}`);
-            });
+            if (Object.keys(storageCount).length === 0) {
+                document.getElementById('summaryStorage').innerHTML = '<span style="color: var(--text-secondary); font-style: italic;">No drives selected</span>';
+            } else {
+                // Create styled drive pills
+                Object.entries(storageCount).forEach(([name, count], index) => {
+                    // Determine drive type icon
+                    let icon = '💿';
+                    if (name.toLowerCase().includes('nvme')) {
+                        icon = '⚡';
+                        if (name.toLowerCase().includes('gen5')) icon = '🚀';
+                        if (name.toLowerCase().includes('t705')) icon = '🔥';
+                    }
+                    if (name.toLowerCase().includes('crucial')) icon = '🔴';
+                    if (name.toLowerCase().includes('kioxia')) icon = '🔵';
+                    if (name.toLowerCase().includes('samsung')) icon = '🔶';
 
-            const storageText = storageSummary.length > 0 ? storageSummary.join(' + ') : 'None';
-            document.getElementById('summaryStorage').textContent = storageText;
+                    // Extract clean name
+                    const cleanName = name.replace(/\s?[€$£].*/, '').trim();
 
-            // Update Tech Specs
+                    storageHtml += `
+                        <div class="storage-pill">
+                            <div class="storage-icon">${icon}</div>
+                            <div class="storage-info">
+                                <span class="storage-count">${count}x</span>
+                                <span class="storage-name">${cleanName}</span>
+                            </div>
+                        </div>
+                    `;
+                });
+
+                document.getElementById('summaryStorage').innerHTML = storageHtml;
+            }
+
+            // Update Tech Specs with simple text version
             const specStorage = document.getElementById('spec-storage-config-hero');
-            if (specStorage) specStorage.innerText = storageText;
+            if (specStorage) {
+                const storageText = Object.entries(storageCount)
+                    .map(([name, count]) => `${count}x ${name}`)
+                    .join(' + ') || 'None selected';
+                specStorage.textContent = storageText;
+            }
         }
 
         function createOptionGrid(opt, isWide, storageIndex = -1, isInstant = false, preselected = {}) {