Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Laptop Performance Comparison</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> | |
| <style> | |
| .highlight-box { | |
| position: relative; | |
| border: 3px solid #3b82f6; | |
| box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); | |
| border-radius: 0.5rem; | |
| } | |
| .highlight-box::before { | |
| content: "Current Model"; | |
| position: absolute; | |
| top: -12px; | |
| left: 16px; | |
| background: #3b82f6; | |
| color: white; | |
| padding: 0 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .performance-badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| margin-left: 8px; | |
| } | |
| .better { | |
| background-color: #10b981; | |
| color: white; | |
| } | |
| .worse { | |
| background-color: #ef4444; | |
| color: white; | |
| } | |
| .similar { | |
| background-color: #f59e0b; | |
| color: white; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .tab-button.active { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 600; | |
| } | |
| .graph-container { | |
| transition: all 0.3s ease; | |
| height: 400px; | |
| } | |
| .graph-container:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .data-table { | |
| font-size: 14px; | |
| } | |
| .data-table th { | |
| white-space: nowrap; | |
| } | |
| .cpu-cell { | |
| background-color: rgba(59, 130, 246, 0.1); | |
| } | |
| .disk-cell { | |
| background-color: rgba(16, 185, 129, 0.1); | |
| } | |
| .gpu-cell { | |
| background-color: rgba(249, 168, 212, 0.1); | |
| } | |
| .chart-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #fff; | |
| margin-bottom: 12px; | |
| text-align: center; | |
| } | |
| body { | |
| background-color: #000; | |
| color: #fff; | |
| } | |
| .bg-white { | |
| background-color: #111 ; | |
| color: #fff; | |
| } | |
| .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500 { | |
| color: #ddd ; | |
| } | |
| .bg-gray-50 { | |
| background-color: #222 ; | |
| } | |
| .divide-gray-200 { | |
| border-color: #333 ; | |
| } | |
| .border-gray-200 { | |
| border-color: #333 ; | |
| } | |
| .export-btn { | |
| background-color: #3b82f6; | |
| color: white; | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| } | |
| .export-btn:hover { | |
| background-color: #2563eb; | |
| transform: translateY(-1px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-3xl font-bold text-white mb-2">Laptop Performance Comparison</h1> | |
| <p class="text-lg text-gray-400">X1 Gen12 vs Older Models - Complete Performance Analysis</p> | |
| </header> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h2 class="text-xl font-semibold text-white mb-4">Key Findings</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg"> | |
| <h3 class="font-medium text-blue-300 mb-2">CPU Single-Core</h3> | |
| <p class="text-gray-300">X1 Gen12 shows <span class="font-bold text-blue-300">mixed results</span> compared to older models</p> | |
| </div> | |
| <div class="bg-green-900 bg-opacity-30 p-4 rounded-lg"> | |
| <h3 class="font-medium text-green-300 mb-2">CPU Multi-Core</h3> | |
| <p class="text-gray-300">Older models <span class="font-bold text-green-300">outperform</span> X1 Gen12 in multi-core</p> | |
| </div> | |
| <div class="bg-purple-900 bg-opacity-30 p-4 rounded-lg"> | |
| <h3 class="font-medium text-purple-300 mb-2">Disk Performance</h3> | |
| <p class="text-gray-300">Disk speeds show <span class="font-bold text-purple-300">significant variation</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap mb-4 border-b border-gray-700"> | |
| <button class="tab-button active px-4 py-2 font-medium text-gray-300 hover:text-blue-400" data-tab="summary">Summary</button> | |
| <button class="tab-button px-4 py-2 font-medium text-gray-300 hover:text-blue-400" data-tab="charts">Charts</button> | |
| <button class="tab-button px-4 py-2 font-medium text-gray-300 hover:text-blue-400" data-tab="data">Full Data</button> | |
| <button class="tab-button px-4 py-2 font-medium text-gray-300 hover:text-blue-400" data-tab="specs">Detailed Specs</button> | |
| </div> | |
| <div id="summary" class="tab-content active"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <div class="highlight-box bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-lg font-semibold text-white mb-4">X1 Gen12, 2024</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <span class="font-medium text-gray-300">Overall:</span> | |
| <span class="font-bold text-white">4,139</span> | |
| <span class="performance-badge worse">-26% vs best</span> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-300">CPU Single:</span> | |
| <span class="font-bold text-white">6,385</span> | |
| <span class="performance-badge worse">-9% vs best</span> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-300">CPU Multi:</span> | |
| <span class="font-bold text-white">46,056</span> | |
| <span class="performance-badge similar">-3% vs best</span> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-300">Disk Seq Read:</span> | |
| <span class="font-bold text-white">21,382 MB/s</span> | |
| <span class="performance-badge worse">-35% vs best</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-lg font-semibold text-white mb-4">Best Performing Older Model</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <span class="font-medium text-gray-300">Model:</span> | |
| <span class="font-bold text-white">X1 Gen8, 2020</span> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-300">Overall:</span> | |
| <span class="font-bold text-white">5,618</span> | |
| <span class="performance-badge better">+36% vs current</span> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-300">CPU Single:</span> | |
| <span class="font-bold text-white">7,011</span> | |
| <span class="performance-badge better">+10% vs current</span> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-300">CPU Multi:</span> | |
| <span class="font-bold text-white">34,021</span> | |
| <span class="performance-badge worse">-26% vs current</span> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-300">Disk Seq Read:</span> | |
| <span class="font-bold text-white">25,647 MB/s</span> | |
| <span class="performance-badge better">+20% vs current</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h2 class="text-xl font-semibold text-white mb-4">Performance Comparison</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="graph-container bg-white p-4 rounded-lg border border-gray-700"> | |
| <div class="chart-title">CPU Single-Core (Higher is Better)</div> | |
| <canvas id="cpuSingleChart"></canvas> | |
| </div> | |
| <div class="graph-container bg-white p-4 rounded-lg border border-gray-700"> | |
| <div class="chart-title">CPU Multi-Core (Higher is Better)</div> | |
| <canvas id="cpuMultiChart"></canvas> | |
| </div> | |
| <div class="graph-container bg-white p-4 rounded-lg border border-gray-700"> | |
| <div class="chart-title">Disk Sequential Read (Higher is Better)</div> | |
| <canvas id="diskReadChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="charts" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h2 class="text-xl font-semibold text-white mb-4">Detailed Performance Charts</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="graph-container bg-white p-4 rounded-lg border border-gray-700"> | |
| <div class="chart-title">Overall Performance (Higher is Better)</div> | |
| <canvas id="allScoreChart"></canvas> | |
| </div> | |
| <div class="graph-container bg-white p-4 rounded-lg border border-gray-700"> | |
| <div class="chart-title">CPU Single-Core (Higher is Better)</div> | |
| <canvas id="detailedCpuSingleChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="graph-container bg-white p-4 rounded-lg border border-gray-700"> | |
| <div class="chart-title">CPU Multi-Core (Higher is Better)</div> | |
| <canvas id="detailedCpuMultiChart"></canvas> | |
| </div> | |
| <div class="graph-container bg-white p-4 rounded-lg border border-gray-700"> | |
| <div class="chart-title">Disk Sequential Read (Higher is Better)</div> | |
| <canvas id="detailedDiskReadChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="graph-container bg-white p-4 rounded-lg border border-gray-700"> | |
| <div class="chart-title">Disk Random Read (Higher is Better)</div> | |
| <canvas id="diskRandReadChart"></canvas> | |
| </div> | |
| <div class="graph-container bg-white p-4 rounded-lg border border-gray-700"> | |
| <div class="chart-title">Disk Sequential Write (Higher is Better)</div> | |
| <canvas id="diskSeqWriteChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="data" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-white">Complete Performance Data</h2> | |
| <button id="exportDataBtn" class="export-btn">Export to CSV</button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full data-table"> | |
| <thead class="bg-gray-800"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Model</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider cpu-cell">Overall</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider cpu-cell">CPU Single</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider cpu-cell">CPU Multi</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider disk-cell">Disk SeqRead</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider disk-cell">Disk RandRead</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider disk-cell">Disk SeqWrite</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider disk-cell">Disk RandWrite</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider gpu-cell">2D Text</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider gpu-cell">2D Square</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-gray-900 divide-y divide-gray-700"> | |
| <tr class="bg-blue-900 bg-opacity-20"> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">X1 Gen12, 2024</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">4,139</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">6,385</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">46,056</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">21,382</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">410</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">11,150</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">310</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">5,039</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">7,334</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">X1 Gen8, 2020</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">5,618</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">7,011</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">34,021</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">25,647</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">638</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">25,421</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">1,394</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">8,111</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">9,930</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">T14 Gen4, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">5,295</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">8,563</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">40,329</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">33,039</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">268</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">13,761</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">442</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">6,022</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">7,939</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">T14 Gen4, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">3,331</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">5,790</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">36,316</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">758</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">167</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">9,109</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">180</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">5,021</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">6,969</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">T14 Gen1, 2020</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">4,595</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">6,053</td> | |
| <td class="px-6 py-4 whitespace-nowrap cpu-cell">47,433</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">13,522</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">220</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">12,761</td> | |
| <td class="px-6 py-4 whitespace-nowrap disk-cell">210</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">4,021</td> | |
| <td class="px-6 py-4 whitespace-nowrap gpu-cell">5,969</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="specs" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-white">Detailed Hardware Specifications</h2> | |
| <button id="exportSpecsBtn" class="export-btn">Export to CSV</button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full data-table"> | |
| <thead class="bg-gray-800"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Model</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Processor</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Base Speed</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Turbo Speed</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Cores</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Threads</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">RAM</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">RAM Type</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Storage</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">GPU</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-gray-900 divide-y divide-gray-700"> | |
| <tr class="bg-blue-900 bg-opacity-20"> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">X1 Gen12, 2024</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Intel Core i7-1365U</td> | |
| <td class="px-6 py-4 whitespace-nowrap">1.8 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">4.9 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap">12</td> | |
| <td class="px-6 py-4 whitespace-nowrap">16 GB</td> | |
| <td class="px-6 py-4 whitespace-nowrap">LPDDR5</td> | |
| <td class="px-6 py-4 whitespace-nowrap">512 GB NVMe</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Iris Xe</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">X1 Gen8, 2020</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Intel Core i7-10610U</td> | |
| <td class="px-6 py-4 whitespace-nowrap">1.8 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">4.9 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">4</td> | |
| <td class="px-6 py-4 whitespace-nowrap">8</td> | |
| <td class="px-6 py-4 whitespace-nowrap">16 GB</td> | |
| <td class="px-6 py-4 whitespace-nowrap">DDR4</td> | |
| <td class="px-6 py-4 whitespace-nowrap">1 TB NVMe</td> | |
| <td class="px-6 py-4 whitespace-nowrap">UHD Graphics</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">T14 Gen4, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Intel Core i7-1260P</td> | |
| <td class="px-6 py-4 whitespace-nowrap">2.1 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">4.7 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">12</td> | |
| <td class="px-6 py-4 whitespace-nowrap">16</td> | |
| <td class="px-6 py-4 whitespace-nowrap">32 GB</td> | |
| <td class="px-6 py-4 whitespace-nowrap">LPDDR5</td> | |
| <td class="px-6 py-4 whitespace-nowrap">1 TB NVMe</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Iris Xe</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">T14 Gen4, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Intel Core i5-1240P</td> | |
| <td class="px-6 py-4 whitespace-nowrap">1.7 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">4.4 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">12</td> | |
| <td class="px-6 py-4 whitespace-nowrap">16</td> | |
| <td class="px-6 py-4 whitespace-nowrap">16 GB</td> | |
| <td class="px-6 py-4 whitespace-nowrap">LPDDR5</td> | |
| <td class="px-6 py-4 whitespace-nowrap">256 GB NVMe</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Iris Xe</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap font-medium text-white">T14 Gen1, 2020</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Intel Core i7-10510U</td> | |
| <td class="px-6 py-4 whitespace-nowrap">1.8 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">4.9 GHz</td> | |
| <td class="px-6 py-4 whitespace-nowrap">4</td> | |
| <td class="px-6 py-4 whitespace-nowrap">8</td> | |
| <td class="px-6 py-4 whitespace-nowrap">16 GB</td> | |
| <td class="px-6 py-4 whitespace-nowrap">DDR4</td> | |
| <td class="px-6 py-4 whitespace-nowrap">512 GB NVMe</td> | |
| <td class="px-6 py-4 whitespace-nowrap">UHD Graphics</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons and content | |
| document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); | |
| // Add active class to clicked button and corresponding content | |
| button.classList.add('active'); | |
| const tabId = button.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Function to sort data and labels by performance (descending) | |
| function sortByPerformance(data, labels) { | |
| // Combine data and labels into an array of objects | |
| const combined = labels.map((label, index) => ({ | |
| label, | |
| value: data[index] | |
| })); | |
| // Sort by value in descending order | |
| combined.sort((a, b) => b.value - a.value); | |
| // Extract sorted labels and data | |
| const sortedLabels = combined.map(item => item.label); | |
| const sortedData = combined.map(item => item.value); | |
| return { sortedData, sortedLabels }; | |
| } | |
| // Chart configuration | |
| const chartOptions = { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: '#ddd' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: '#ddd' | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| labels: { | |
| color: '#fff' | |
| } | |
| } | |
| } | |
| }; | |
| // Data for charts | |
| const models = ['X1 Gen12', 'X1 Gen8', 'T14 Gen4', 'T14 Gen4', 'T14 Gen1']; | |
| const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']; | |
| // Create charts with sorted data | |
| function createCharts() { | |
| // Sort data for each chart | |
| const cpuSingleData = [6385, 7011, 8563, 5790, 6053]; | |
| const { sortedData: sortedCpuSingleData, sortedLabels: sortedCpuSingleLabels } = sortByPerformance(cpuSingleData, models); | |
| const cpuMultiData = [46056, 34021, 40329, 36316, 47433]; | |
| const { sortedData: sortedCpuMultiData, sortedLabels: sortedCpuMultiLabels } = sortByPerformance(cpuMultiData, models); | |
| const diskReadData = [21382, 25647, 33039, 758, 13522]; | |
| const { sortedData: sortedDiskReadData, sortedLabels: sortedDiskReadLabels } = sortByPerformance(diskReadData, models); | |
| const allScoreData = [4139, 5618, 5295, 3331, 4595]; | |
| const { sortedData: sortedAllScoreData, sortedLabels: sortedAllScoreLabels } = sortByPerformance(allScoreData, models); | |
| const diskRandReadData = [410, 638, 268, 167, 220]; | |
| const { sortedData: sortedDiskRandReadData, sortedLabels: sortedDiskRandReadLabels } = sortByPerformance(diskRandReadData, models); | |
| const diskSeqWriteData = [11150, 25421, 13761, 9109, 12761]; | |
| const { sortedData: sortedDiskSeqWriteData, sortedLabels: sortedDiskSeqWriteLabels } = sortByPerformance(diskSeqWriteData, models); | |
| // CPU Single Chart | |
| new Chart(document.getElementById('cpuSingleChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: sortedCpuSingleLabels, | |
| datasets: [{ | |
| label: 'CPU Single-Core Score', | |
| data: sortedCpuSingleData, | |
| backgroundColor: colors, | |
| borderColor: colors.map(c => c.replace('0.8', '1')), | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: chartOptions | |
| }); | |
| // CPU Multi Chart | |
| new Chart(document.getElementById('cpuMultiChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: sortedCpuMultiLabels, | |
| datasets: [{ | |
| label: 'CPU Multi-Core Score', | |
| data: sortedCpuMultiData, | |
| backgroundColor: colors, | |
| borderColor: colors.map(c => c.replace('0.8', '1')), | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: chartOptions | |
| }); | |
| // Disk Read Chart | |
| new Chart(document.getElementById('diskReadChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: sortedDiskReadLabels, | |
| datasets: [{ | |
| label: 'Disk Sequential Read (MB/s)', | |
| data: sortedDiskReadData, | |
| backgroundColor: colors, | |
| borderColor: colors.map(c => c.replace('0.8', '1')), | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: chartOptions | |
| }); | |
| // All Score Chart | |
| new Chart(document.getElementById('allScoreChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: sortedAllScoreLabels, | |
| datasets: [{ | |
| label: 'Overall Score', | |
| data: sortedAllScoreData, | |
| backgroundColor: colors, | |
| borderColor: colors.map(c => c.replace('0.8', '1')), | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: chartOptions | |
| }); | |
| // Detailed CPU Single Chart | |
| new Chart(document.getElementById('detailedCpuSingleChart'), { | |
| type: 'line', | |
| data: { | |
| labels: sortedCpuSingleLabels, | |
| datasets: [{ | |
| label: 'CPU Single-Core Score', | |
| data: sortedCpuSingleData, | |
| backgroundColor: colors[0], | |
| borderColor: colors[0], | |
| borderWidth: 2, | |
| tension: 0.1, | |
| fill: false | |
| }] | |
| }, | |
| options: chartOptions | |
| }); | |
| // Detailed CPU Multi Chart | |
| new Chart(document.getElementById('detailedCpuMultiChart'), { | |
| type: 'line', | |
| data: { | |
| labels: sortedCpuMultiLabels, | |
| datasets: [{ | |
| label: 'CPU Multi-Core Score', | |
| data: sortedCpuMultiData, | |
| backgroundColor: colors[1], | |
| borderColor: colors[1], | |
| borderWidth: 2, | |
| tension: 0.1, | |
| fill: false | |
| }] | |
| }, | |
| options: chartOptions | |
| }); | |
| // Detailed Disk Read Chart | |
| new Chart(document.getElementById('detailedDiskReadChart'), { | |
| type: 'line', | |
| data: { | |
| labels: sortedDiskReadLabels, | |
| datasets: [{ | |
| label: 'Disk Sequential Read (MB/s)', | |
| data: sortedDiskReadData, | |
| backgroundColor: colors[2], | |
| borderColor: colors[2], | |
| borderWidth: 2, | |
| tension: 0.1, | |
| fill: false | |
| }] | |
| }, | |
| options: chartOptions | |
| }); | |
| // Disk Random Read Chart | |
| new Chart(document.getElementById('diskRandReadChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: sortedDiskRandReadLabels, | |
| datasets: [{ | |
| label: 'Disk Random Read (MB/s)', | |
| data: sortedDiskRandReadData, | |
| backgroundColor: colors, | |
| borderColor: colors.map(c => c.replace('0.8', '1')), | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: chartOptions | |
| }); | |
| // Disk Sequential Write Chart | |
| new Chart(document.getElementById('diskSeqWriteChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: sortedDiskSeqWriteLabels, | |
| datasets: [{ | |
| label: 'Disk Sequential Write (MB/s)', | |
| data: sortedDiskSeqWriteData, | |
| backgroundColor: colors, | |
| borderColor: colors.map(c => c.replace('0.8', '1')), | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: chartOptions | |
| }); | |
| } | |
| // Export to CSV functionality | |
| document.getElementById('exportDataBtn').addEventListener('click', () => { | |
| const performanceData = [ | |
| { | |
| "Model": "X1 Gen12, 2024", | |
| "Overall": 4139, | |
| "CPU Single": 6385, | |
| "CPU Multi": 46056, | |
| "Disk SeqRead": 21382, | |
| "Disk RandRead": 410, | |
| "Disk SeqWrite": 11150, | |
| "Disk RandWrite": 310, | |
| "2D Text": 5039, | |
| "2D Square": 7334 | |
| }, | |
| { | |
| "Model": "X1 Gen8, 2020", | |
| "Overall": 5618, | |
| "CPU Single": 7011, | |
| "CPU Multi": 34021, | |
| "Disk SeqRead": 25647, | |
| "Disk RandRead": 638, | |
| "Disk SeqWrite": 25421, | |
| "Disk RandWrite": 1394, | |
| "2D Text": 8111, | |
| "2D Square": 9930 | |
| }, | |
| { | |
| "Model": "T14 Gen4, 2023", | |
| "Overall": 5295, | |
| "CPU Single": 8563, | |
| "CPU Multi": 40329, | |
| "Disk SeqRead": 33039, | |
| "Disk RandRead": 268, | |
| "Disk SeqWrite": 13761, | |
| "Disk RandWrite": 442, | |
| "2D Text": 6022, | |
| "2D Square": 7939 | |
| }, | |
| { | |
| "Model": "T14 Gen4, 2023", | |
| "Overall": 3331, | |
| "CPU Single": 5790, | |
| "CPU Multi": 36316, | |
| "Disk SeqRead": 758, | |
| "Disk RandRead": 167, | |
| "Disk SeqWrite": 9109, | |
| "Disk RandWrite": 180, | |
| "2D Text": 5021, | |
| "2D Square": 6969 | |
| }, | |
| { | |
| "Model": "T14 Gen1, 2020", | |
| "Overall": 4595, | |
| "CPU Single": 6053, | |
| "CPU Multi": 47433, | |
| "Disk SeqRead": 13522, | |
| "Disk RandRead": 220, | |
| "Disk SeqWrite": 12761, | |
| "Disk RandWrite": 210, | |
| "2D Text": 4021, | |
| "2D Square": 5969 | |
| } | |
| ]; | |
| const csv = Papa.unparse(performanceData); | |
| downloadCSV(csv, 'laptop_performance_data.csv'); | |
| }); | |
| document.getElementById('exportSpecsBtn').addEventListener('click', () => { | |
| const specsData = [ | |
| { | |
| "Model": "X1 Gen12, 2024", | |
| "Processor": "Intel Core i7-1365U", | |
| "Base Speed": "1.8 GHz", | |
| "Turbo Speed": "4.9 GHz", | |
| "Cores": 10, | |
| "Threads": 12, | |
| "RAM": "16 GB", | |
| "RAM Type": "LPDDR5", | |
| "Storage": "512 GB NVMe", | |
| "GPU": "Iris Xe" | |
| }, | |
| { | |
| "Model": "X1 Gen8, 2020", | |
| "Processor": "Intel Core i7-10610U", | |
| "Base Speed": "1.8 GHz", | |
| "Turbo Speed": "4.9 GHz", | |
| "Cores": 4, | |
| "Threads": 8, | |
| "RAM": "16 GB", | |
| "RAM Type": "DDR4", | |
| "Storage": "1 TB NVMe", | |
| "GPU": "UHD Graphics" | |
| }, | |
| { | |
| "Model": "T14 Gen4, 2023", | |
| "Processor": "Intel Core i7-1260P", | |
| "Base Speed": "2.1 GHz", | |
| "Turbo Speed": "4.7 GHz", | |
| "Cores": 12, | |
| "Threads": 16, | |
| "RAM": "32 GB", | |
| "RAM Type": "LPDDR5", | |
| "Storage": "1 TB NVMe", | |
| "GPU": "Iris Xe" | |
| }, | |
| { | |
| "Model": "T14 Gen4, 2023", | |
| "Processor": "Intel Core i5-1240P", | |
| "Base Speed": "1.7 GHz", | |
| "Turbo Speed": "4.4 GHz", | |
| "Cores": 12, | |
| "Threads": 16, | |
| "RAM": "16 GB", | |
| "RAM Type": "LPDDR5", | |
| "Storage": "256 GB NVMe", | |
| "GPU": "Iris Xe" | |
| }, | |
| { | |
| "Model": "T14 Gen1, 2020", | |
| "Processor": "Intel Core i7-10510U", | |
| "Base Speed": "1.8 GHz", | |
| "Turbo Speed": "4.9 GHz", | |
| "Cores": 4, | |
| "Threads": 8, | |
| "RAM": "16 GB", | |
| "RAM Type": "DDR4", | |
| "Storage": "512 GB NVMe", | |
| "GPU": "UHD Graphics" | |
| } | |
| ]; | |
| const csv = Papa.unparse(specsData); | |
| downloadCSV(csv, 'laptop_specifications.csv'); | |
| }); | |
| function downloadCSV(csv, filename) { | |
| const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); | |
| const link = document.createElement('a'); | |
| const url = URL.createObjectURL(blob); | |
| link.setAttribute('href', url); | |
| link.setAttribute('download', filename); | |
| link.style.visibility = 'hidden'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| // Initialize charts when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', createCharts); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wrpadmn/thinkpad-comparison" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |