Skip to content

Commit

Permalink
Create iphone-compare.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@kai9987kai
kai9987kai authored Nov 20, 2024
1 parent 7bf9ecb commit 76655e6
Showing 1 changed file with 302 additions and 0 deletions.
302 changes: 302 additions & 0 deletions iphone-compare.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,302 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>All iPhone Models Comparison</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* Modern CSS Styling */
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 0;
color: #333;
}

.container {
padding: 20px;
max-width: 1200px;
margin: auto;
}

h1 {
text-align: center;
margin-bottom: 40px;
color: #1a1a1a;
}

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 40px;
font-size: 14px;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

table thead {
background-color: #007BFF;
color: #fff;
}

table th, table td {
padding: 12px 15px;
text-align: center;
}

table tbody tr {
border-bottom: 1px solid #ddd;
transition: background-color 0.2s ease;
}

table tbody tr:hover {
background-color: #f1f1f1;
}

.chart-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 40px;
}

.chart-box {
flex: 1 1 calc(50% - 40px);
background: #fff;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 8px;
}

.chart-box h2 {
text-align: center;
margin-bottom: 20px;
color: #1a1a1a;
}

canvas {
max-width: 100%;
height: auto !important;
}

@media (max-width: 768px) {
.chart-box {
flex: 1 1 100%;
}
}

/* Scrollable Table */
.table-responsive {
overflow-x: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>All iPhone Models Comparison</h1>
<div class="table-responsive">
<table id="iphoneTable">
<thead>
<tr>
<th>Model</th>
<th>Release Year</th>
<th>Display</th>
<th>Processor</th>
<th>RAM (GB)</th>
<th>Storage Options</th>
<th>Camera</th>
<th>Weight (g)</th>
</tr>
</thead>
<tbody>
<!-- Rows will be dynamically populated -->
</tbody>
</table>
</div>

<div class="chart-container">
<div class="chart-box">
<h2>RAM Evolution Over Time</h2>
<canvas id="ramChart"></canvas>
</div>
<div class="chart-box">
<h2>Camera Evolution</h2>
<canvas id="cameraChart"></canvas>
</div>
<div class="chart-box">
<h2>Release Years</h2>
<canvas id="yearChart"></canvas>
</div>
</div>
</div>

<script>
// All iPhone data up to iPhone 13 series
const iphoneData = [
{ model: "iPhone (1st Gen)", year: 2007, display: "3.5\" LCD", processor: "ARM 11", ram: 0.128, storage: "4GB, 8GB, 16GB", camera: "2", weight: 135 },
{ model: "iPhone 3G", year: 2008, display: "3.5\" LCD", processor: "ARM 11", ram: 0.128, storage: "8GB, 16GB", camera: "2", weight: 133 },
{ model: "iPhone 3GS", year: 2009, display: "3.5\" LCD", processor: "ARM Cortex-A8", ram: 0.256, storage: "8GB, 16GB, 32GB", camera: "3", weight: 135 },
{ model: "iPhone 4", year: 2010, display: "3.5\" Retina LCD", processor: "Apple A4", ram: 0.512, storage: "8GB, 16GB, 32GB", camera: "5", weight: 137 },
{ model: "iPhone 4S", year: 2011, display: "3.5\" Retina LCD", processor: "Apple A5", ram: 0.512, storage: "8GB, 16GB, 32GB, 64GB", camera: "8", weight: 140 },
{ model: "iPhone 5", year: 2012, display: "4.0\" Retina LCD", processor: "Apple A6", ram: 1, storage: "16GB, 32GB, 64GB", camera: "8", weight: 112 },
{ model: "iPhone 5c", year: 2013, display: "4.0\" Retina LCD", processor: "Apple A6", ram: 1, storage: "8GB, 16GB, 32GB", camera: "8", weight: 132 },
{ model: "iPhone 5s", year: 2013, display: "4.0\" Retina LCD", processor: "Apple A7", ram: 1, storage: "16GB, 32GB, 64GB", camera: "8", weight: 112 },
{ model: "iPhone 6", year: 2014, display: "4.7\" Retina HD LCD", processor: "Apple A8", ram: 1, storage: "16GB, 64GB, 128GB", camera: "8", weight: 129 },
{ model: "iPhone 6 Plus", year: 2014, display: "5.5\" Retina HD LCD", processor: "Apple A8", ram: 1, storage: "16GB, 64GB, 128GB", camera: "8", weight: 172 },
{ model: "iPhone 6s", year: 2015, display: "4.7\" Retina HD LCD", processor: "Apple A9", ram: 2, storage: "16GB, 32GB, 64GB, 128GB", camera: "12", weight: 143 },
{ model: "iPhone 6s Plus", year: 2015, display: "5.5\" Retina HD LCD", processor: "Apple A9", ram: 2, storage: "16GB, 32GB, 64GB, 128GB", camera: "12", weight: 192 },
{ model: "iPhone SE (1st Gen)", year: 2016, display: "4.0\" Retina LCD", processor: "Apple A9", ram: 2, storage: "16GB, 32GB, 64GB, 128GB", camera: "12", weight: 113 },
{ model: "iPhone 7", year: 2016, display: "4.7\" Retina HD LCD", processor: "Apple A10 Fusion", ram: 2, storage: "32GB, 128GB, 256GB", camera: "12", weight: 138 },
{ model: "iPhone 7 Plus", year: 2016, display: "5.5\" Retina HD LCD", processor: "Apple A10 Fusion", ram: 3, storage: "32GB, 128GB, 256GB", camera: "Dual 12", weight: 188 },
{ model: "iPhone 8", year: 2017, display: "4.7\" Retina HD LCD", processor: "Apple A11 Bionic", ram: 2, storage: "64GB, 256GB", camera: "12", weight: 148 },
{ model: "iPhone 8 Plus", year: 2017, display: "5.5\" Retina HD LCD", processor: "Apple A11 Bionic", ram: 3, storage: "64GB, 256GB", camera: "Dual 12", weight: 202 },
{ model: "iPhone X", year: 2017, display: "5.8\" Super Retina OLED", processor: "Apple A11 Bionic", ram: 3, storage: "64GB, 256GB", camera: "Dual 12", weight: 174 },
{ model: "iPhone XS", year: 2018, display: "5.8\" Super Retina OLED", processor: "Apple A12 Bionic", ram: 4, storage: "64GB, 256GB, 512GB", camera: "Dual 12", weight: 177 },
{ model: "iPhone XS Max", year: 2018, display: "6.5\" Super Retina OLED", processor: "Apple A12 Bionic", ram: 4, storage: "64GB, 256GB, 512GB", camera: "Dual 12", weight: 208 },
{ model: "iPhone XR", year: 2018, display: "6.1\" Liquid Retina LCD", processor: "Apple A12 Bionic", ram: 3, storage: "64GB, 128GB, 256GB", camera: "12", weight: 194 },
{ model: "iPhone 11", year: 2019, display: "6.1\" Liquid Retina LCD", processor: "Apple A13 Bionic", ram: 4, storage: "64GB, 128GB, 256GB", camera: "Dual 12", weight: 194 },
{ model: "iPhone 11 Pro", year: 2019, display: "5.8\" Super Retina XDR OLED", processor: "Apple A13 Bionic", ram: 4, storage: "64GB, 256GB, 512GB", camera: "Triple 12", weight: 188 },
{ model: "iPhone 11 Pro Max", year: 2019, display: "6.5\" Super Retina XDR OLED", processor: "Apple A13 Bionic", ram: 4, storage: "64GB, 256GB, 512GB", camera: "Triple 12", weight: 226 },
{ model: "iPhone SE (2nd Gen)", year: 2020, display: "4.7\" Retina HD LCD", processor: "Apple A13 Bionic", ram: 3, storage: "64GB, 128GB, 256GB", camera: "12", weight: 148 },
{ model: "iPhone 12 mini", year: 2020, display: "5.4\" Super Retina XDR OLED", processor: "Apple A14 Bionic", ram: 4, storage: "64GB, 128GB, 256GB", camera: "Dual 12", weight: 135 },
{ model: "iPhone 12", year: 2020, display: "6.1\" Super Retina XDR OLED", processor: "Apple A14 Bionic", ram: 4, storage: "64GB, 128GB, 256GB", camera: "Dual 12", weight: 164 },
{ model: "iPhone 12 Pro", year: 2020, display: "6.1\" Super Retina XDR OLED", processor: "Apple A14 Bionic", ram: 6, storage: "128GB, 256GB, 512GB", camera: "Triple 12", weight: 189 },
{ model: "iPhone 12 Pro Max", year: 2020, display: "6.7\" Super Retina XDR OLED", processor: "Apple A14 Bionic", ram: 6, storage: "128GB, 256GB, 512GB", camera: "Triple 12", weight: 228 },
{ model: "iPhone 13 mini", year: 2021, display: "5.4\" Super Retina XDR OLED", processor: "Apple A15 Bionic", ram: 4, storage: "128GB, 256GB, 512GB", camera: "Dual 12", weight: 141 },
{ model: "iPhone 13", year: 2021, display: "6.1\" Super Retina XDR OLED", processor: "Apple A15 Bionic", ram: 4, storage: "128GB, 256GB, 512GB", camera: "Dual 12", weight: 174 },
{ model: "iPhone 13 Pro", year: 2021, display: "6.1\" Super Retina XDR OLED", processor: "Apple A15 Bionic", ram: 6, storage: "128GB, 256GB, 512GB, 1TB", camera: "Triple 12", weight: 204 },
{ model: "iPhone 13 Pro Max", year: 2021, display: "6.7\" Super Retina XDR OLED", processor: "Apple A15 Bionic", ram: 6, storage: "128GB, 256GB, 512GB, 1TB", camera: "Triple 12", weight: 240 },
];

// Populate table
const tableBody = document.getElementById("iphoneTable").querySelector("tbody");
iphoneData.forEach(phone => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${phone.model}</td>
<td>${phone.year}</td>
<td>${phone.display}</td>
<td>${phone.processor}</td>
<td>${phone.ram}</td>
<td>${phone.storage}</td>
<td>${phone.camera} MP</td>
<td>${phone.weight}</td>
`;
tableBody.appendChild(row);
});

// Data for charts
const ramData = iphoneData.map(phone => phone.ram);
const yearData = iphoneData.map(phone => phone.year);
const cameraData = iphoneData.map(phone => parseInt(phone.camera));
const modelLabels = iphoneData.map(phone => phone.model);

// RAM Chart
new Chart(document.getElementById("ramChart"), {
type: 'line',
data: {
labels: modelLabels,
datasets: [{
label: 'RAM (GB)',
data: ramData,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: '#007BFF',
borderWidth: 2,
pointRadius: 3,
pointBackgroundColor: '#007BFF',
fill: true,
tension: 0.3,
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
ticks: { stepSize: 1 },
title: { display: true, text: 'RAM (GB)' }
},
x: {
ticks: { autoSkip: true, maxTicksLimit: 10 },
}
},
plugins: {
legend: { display: false }
}
}
});

// Camera Chart
new Chart(document.getElementById("cameraChart"), {
type: 'bar',
data: {
labels: modelLabels,
datasets: [{
label: 'Camera (MP)',
data: cameraData,
backgroundColor: '#28A745',
borderColor: '#28A745',
borderWidth: 1,
borderRadius: 5,
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'Camera Megapixels (MP)' }
},
x: {
ticks: { autoSkip: true, maxTicksLimit: 10 },
}
},
plugins: {
legend: { display: false }
}
}
});

// Release Year Chart
const yearCounts = {};
yearData.forEach(year => {
yearCounts[year] = (yearCounts[year] || 0) + 1;
});

new Chart(document.getElementById("yearChart"), {
type: 'doughnut',
data: {
labels: Object.keys(yearCounts),
datasets: [{
data: Object.values(yearCounts),
backgroundColor: [
'#FF6384', '#36A2EB', '#FFCE56',
'#4BC0C0', '#9966FF', '#FF9F40',
'#E7E9ED', '#71B37C', '#FFCD56',
'#C9CBCF', '#36A2EB', '#FF6384',
'#4BC0C0', '#9966FF', '#FF9F40',
],
}]
},
options: {
responsive: true,
plugins: {
legend: { position: 'right' },
tooltip: {
callbacks: {
label: function(context) {
const year = context.label;
const count = context.parsed;
return `${year}: ${count} model(s)`;
}
}
}
}
}
});
</script>
</body>
</html>

0 comments on commit 76655e6

Please sign in to comment.