Update index.html

Author: devilAPI

index.html

@@ -58,33 +58,6 @@
             margin: 0 auto;
         }
 
-        .download-status {
-            display: flex;
-            justify-content: center;
-            padding: 25px 0;
-            background: rgba(15, 15, 30, 0.8);
-        }
-        
-        .status-card {
-            background: linear-gradient(135deg, #ff5b5b, #6bb1ff);
-            border-radius: 12px;
-            padding: 20px 40px;
-            text-align: center;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-        }
-        
-        .status-card i {
-            font-size: 2.5rem;
-            margin-bottom: 15px;
-            animation: pulse 2s infinite;
-        }
-        
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.1); }
-            100% { transform: scale(1); }
-        }
-        
         .content-area {
             padding: 30px;
             min-height: 500px;
@@ -168,16 +141,34 @@
             transform: translateY(1px);
         }
 
-        .version-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            gap: 12px;
-            margin-top: 15px;
-            max-height: 300px;
-            overflow-y: auto;
-            padding: 10px;
+        .version-sections {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .version-section {
             background: rgba(20, 20, 36, 0.5);
             border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+        
+        .section-header {
+            background: linear-gradient(90deg, #6bb1ff, #ff5b5b);
+            padding: 12px 20px;
+            font-size: 1.3rem;
+            font-weight: 600;
+        }
+        
+        .section-content {
+            padding: 15px;
+        }
+        
+        .version-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+            gap: 10px;
         }
 
         .version-item {
@@ -282,14 +273,6 @@ <h1>Ableton Live Direct Download</h1>
             <p class="subtitle">Get the exact version you need with one click</p>
         </header>
 
-        <div class="download-status">
-            <div class="status-card">
-                <i class="fas fa-cloud-download-alt"></i>
-                <h2>Ready to Download</h2>
-                <p>Select your preferences below</p>
-            </div>
-        </div>
-        
         <div class="content-area">
             <div class="step-title">
                 <div class="step-icon"><i class="fas fa-download"></i></div>
@@ -321,9 +304,9 @@ <h2>Ready to Download</h2>
             </div>
 
             <div class="form-group">
-                <label>Select Version (sorted by major version):</label>
-                <div class="version-grid" id="version-grid">
-                    <!-- Versions will be populated by JS -->
+                <label>Select Version:</label>
+                <div class="version-sections" id="version-sections">
+                    <!-- Version sections will be populated by JS -->
                 </div>
             </div>
 
@@ -431,25 +414,64 @@ <h2>Ready to Download</h2>
             return osValue;
         }
 
-        // Populate the version grid
-        const versionGrid = document.getElementById('version-grid');
-        let currentMajor = -1;
+        // Group versions by major version
+        function groupVersionsByMajor(versions) {
+            const grouped = {};
+            
+            versions.forEach(version => {
+                const major = version.split('.')[0];
+                if (!grouped[major]) {
+                    grouped[major] = [];
+                }
+                grouped[major].push(version);
+            });
+            
+            return grouped;
+        }
+        
+        // Populate the version sections
+        const versionSections = document.getElementById('version-sections');
+        const groupedVersions = groupVersionsByMajor(versions);
 
-        versions.forEach(version => {
-            const versionItem = document.createElement('div');
-            versionItem.className = 'version-item';
-            versionItem.textContent = version;
-            versionItem.dataset.version = version; // Store version in data attribute
+        // Sort major versions descending
+        const majorVersions = Object.keys(groupedVersions).sort((a, b) => b - a);
+        
+        majorVersions.forEach(major => {
+            const section = document.createElement('div');
+            section.className = 'version-section';
+            
+            const header = document.createElement('div');
+            header.className = 'section-header';
+            header.textContent = `Version ${major}.x`;
+            
+            const content = document.createElement('div');
+            content.className = 'section-content';
 
-            versionItem.addEventListener('click', () => {
-                // Remove selected class from all items
-                document.querySelectorAll('.version-item').forEach(item => {
-                    item.classList.remove('selected');
+            const grid = document.createElement('div');
+            grid.className = 'version-grid';
+            
+            groupedVersions[major].forEach(version => {
+                const versionItem = document.createElement('div');
+                versionItem.className = 'version-item';
+                versionItem.textContent = version;
+                versionItem.dataset.version = version;
+                
+                versionItem.addEventListener('click', () => {
+                    // Remove selected class from all items
+                    document.querySelectorAll('.version-item').forEach(item => {
+                        item.classList.remove('selected');
+                    });
+                    // Add selected class to clicked item
+                    versionItem.classList.add('selected');
                 });
-                // Add selected class to clicked item
-                versionItem.classList.add('selected');
+                
+                grid.appendChild(versionItem);
             });
-            versionGrid.appendChild(versionItem);
+            
+            content.appendChild(grid);
+            section.appendChild(header);
+            section.appendChild(content);
+            versionSections.appendChild(section);
         });
 
         // Download button event listener