Update linux section UI

Author: zxdong262

bin/data.js

@@ -114,35 +114,71 @@ function createReleaseData () {
       prev.mac.releaseDate = dt
       prev.mac.items.push(nr)
     } else if (cname.includes('linux')) {
+      const isLegacy = cname.includes('-legacy')
+
       if (cname.endsWith('.rpm')) {
-        nr.desc = 'for Red Hat, Fedora...'
+        nr.desc = isLegacy ? 'for Red Hat, Fedora... (glibc < 2.34)' : 'for Red Hat, Fedora...'
       } else if (cname.endsWith('.deb')) {
-        nr.desc = 'for Debian, Ubuntu...'
+        nr.desc = isLegacy ? 'for Debian, Ubuntu... (glibc < 2.34, like UOS/Ubuntu 18)' : 'for Debian, Ubuntu...'
       } else if (cname.endsWith('.snap')) {
         nr.desc = 'for all linux that support snap'
       } else if (cname.endsWith('.gz')) {
-        nr.desc = 'for all linux, just extract'
+        nr.desc = isLegacy ? 'for all linux, just extract (glibc < 2.34)' : 'for all linux, just extract'
       } else if (cname.endsWith('.AppImage')) {
-        nr.desc = 'for all linux, just run it'
+        nr.desc = isLegacy ? 'for all linux, just run it (glibc < 2.34)' : 'for all linux, just run it'
       }
-      nr.tag = 'ARM64 Beta'
-      nr.index = 2
+
+      // Determine architecture and legacy status
+      let archType = ''
+
       if (cname.includes('x64') || cname.includes('x86') || cname.includes('amd64')) {
-        nr.index = 1
-        nr.tag = 'x86/64'
+        archType = 'x86_64'
+      } else if (cname.includes('arm64') || cname.includes('aarch64')) {
+        archType = 'arm64'
       } else if (cname.includes('armv7l')) {
-        nr.tag = 'ARM Beta'
-        nr.index = 3
+        archType = 'armv7'
       }
-      prev.linux.releaseDate = dt
-      prev.linux.releaseNote = releaseNote
-      prev.linux.items.push(nr)
+
+      // Add to appropriate architecture group
+      const category = isLegacy ? `${archType}_legacy` : archType
+      if (!prev.linux[category]) {
+        prev.linux[category] = {
+          name: '',
+          items: []
+        }
+      }
+
+      prev.linux[category].releaseDate = dt
+      prev.linux[category].releaseNote = releaseNote
+      prev.linux[category].items.push(nr)
     }
     return prev
   }, {
     linux: {
-      name: 'Linux x86/x64/arm/arm64',
-      items: []
+      x86_64: {
+        name: 'Linux x86_64',
+        items: []
+      },
+      x86_64_legacy: {
+        name: 'Linux x86_64 Legacy',
+        items: []
+      },
+      arm64: {
+        name: 'Linux ARM64',
+        items: []
+      },
+      arm64_legacy: {
+        name: 'Linux ARM64 Legacy',
+        items: []
+      },
+      armv7: {
+        name: 'Linux ARMv7',
+        items: []
+      },
+      armv7_legacy: {
+        name: 'Linux ARMv7 Legacy',
+        items: []
+      }
     },
     mac: {
       name: 'Mac OS x64',
@@ -153,7 +189,6 @@ function createReleaseData () {
       items: []
     }
   })
-  arr.linux.items.sort((a, b) => a.index - b.index)
   return {
     assets: arr,
     version

bin/qr-code.cut.js

@@ -58,7 +58,7 @@ async function cropImage () {
     // Paper stack settings
     const paperPadding = 60 // Extra space for rotated papers
     const rotationAngle = 5 * Math.PI / 180 // 5 degrees in radians
-    
+
     // Create canvas with extra space for rotated papers
     const canvasWidth = newWidth + paperPadding * 2
     const canvasHeight = newHeight + paperPadding * 2
@@ -72,51 +72,51 @@ async function cropImage () {
     // Helper function to draw a paper with shadow
     function drawPaper (x, y, width, height, rotation, shadowIntensity) {
       ctx.save()
-      
+
       // Move to center of where paper should be
       ctx.translate(x + width / 2, y + height / 2)
       ctx.rotate(rotation)
-      
+
       // Draw shadow
       ctx.shadowColor = `rgba(0, 0, 0, ${shadowIntensity})`
       ctx.shadowBlur = 8
       ctx.shadowOffsetX = 4
       ctx.shadowOffsetY = 4
-      
+
       // Draw paper
       ctx.fillStyle = '#ffffff'
       ctx.fillRect(-width / 2, -height / 2, width, height)
-      
+
       // Add subtle border
       ctx.shadowColor = 'transparent'
       ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'
       ctx.lineWidth = 1
       ctx.strokeRect(-width / 2, -height / 2, width, height)
-      
+
       ctx.restore()
     }
 
     // Draw background papers (rotated)
     const centerX = canvasWidth / 2 - newWidth / 2
     const centerY = canvasHeight / 2 - newHeight / 2
-    
+
     // Bottom paper (rotated left)
     drawPaper(centerX - 3, centerY + 6, newWidth, newHeight, -rotationAngle, 0.15)
-    
+
     // Middle paper (rotated right)
     drawPaper(centerX + 3, centerY + 3, newWidth, newHeight, rotationAngle, 0.2)
-    
+
     // Top paper (no rotation) - we'll draw the actual image on this one
     ctx.save()
     ctx.shadowColor = 'rgba(0, 0, 0, 0.25)'
     ctx.shadowBlur = 10
     ctx.shadowOffsetX = 2
     ctx.shadowOffsetY = 2
-    
+
     // Draw white background for top paper
     ctx.fillStyle = '#ffffff'
     ctx.fillRect(centerX, centerY, newWidth, newHeight)
-    
+
     // Reset shadow for the actual image
     ctx.shadowColor = 'transparent'
     ctx.shadowBlur = 0
@@ -131,12 +131,12 @@ async function cropImage () {
       centerX, centerY, // Destination x, y (centered on top paper)
       newWidth, newHeight // Destination width, height
     )
-    
+
     // Add subtle border to top paper
     ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'
     ctx.lineWidth = 1
     ctx.strokeRect(centerX, centerY, newWidth, newHeight)
-    
+
     ctx.restore()
 
     // Save the cropped image

src/css/home.styl

@@ -164,6 +164,46 @@ ul
         &.active
           display block
 
+// Linux architecture sub-tabs styles
+.linux-arch-tabs
+  .arch-tab-buttons
+    display flex
+    justify-content center
+    margin-bottom 20px
+    padding 10px 0
+    border-bottom 1px solid #e9ecef
+    flex-wrap wrap
+    gap 5px
+    
+    .arch-tab-btn
+      background none
+      border 1px solid #dee2e6
+      padding 8px 16px
+      font-size 0.9em
+      cursor pointer
+      border-radius 4px
+      transition all 0.2s ease
+      color #666
+      margin 2px
+      
+      &:hover
+        background #f8f9fa
+        border-color #adb5bd
+        color #333
+        
+      &.active
+        background #333
+        border-color #333
+        color white
+        font-weight bold
+
+  .arch-tab-content
+    .arch-tab-panel
+      display none
+      
+      &.active
+        display block
+
 .os-downloads
   h3
     margin-bottom 20px