Diam vel quam elementum

At varius vel pharetra vel turpis

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tyre Pricing Tool</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f2f2f2;
}

.tyre-tool {
max-width: 960px;
margin: 2rem auto;
padding: 1.5rem;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.tyre-tool h1 {
margin-top: 0;
font-size: 1.6rem;
}

.tyre-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}

.tyre-row label {
flex: 1 1 120px;
display: flex;
flex-direction: column;
font-size: 0.9rem;
}

.tyre-row input {
padding: 0.45rem 0.5rem;
margin-top: 0.3rem;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 0.95rem;
}

.tyre-submit {
display: inline-block;
padding: 0.6rem 1.2rem;
border-radius: 4px;
border: none;
background: #d40000; /* Bailey red */
color: #fff;
font-size: 0.95rem;
cursor: pointer;
}

.tyre-submit:hover {
opacity: 0.9;
}

.tyre-empty {
margin-top: 1rem;
font-style: italic;
font-size: 0.9rem;
color: #555;
}

.tyre-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
font-size: 0.9rem;
}

.tyre-table th,
.tyre-table td {
border: 1px solid #e1e1e1;
padding: 0.6rem;
text-align: left;
}

.tyre-table th {
background: #fafafa;
font-weight: 600;
}

.tyre-price {
white-space: nowrap;
}

@media (max-width: 640px) {
.tyre-row {
flex-direction: column;
}
}
</style>

<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
</head>
<body>

<div class="tyre-tool">
<h1>Tyre Price Finder</h1>
<p>Enter your tyre size to see live prices from our stock list.</p>

<form id="tyre-form">
<div class="tyre-row">
<label>
Width
<input type="number" name="width" placeholder="e.g. 205" required>
</label>
<label>
Profile
<input type="number" name="aspect" placeholder="e.g. 55" required>
</label>
<label>
Rim
<input type="number" name="rim" step="0.5" placeholder="e.g. 16" required>
</label>
</div>

<button type="submit" class="tyre-submit">Search tyres</button>
</form>

<p class="tyre-empty" id="tyre-empty">Enter a size and click search.</p>

<table class="tyre-table" id="tyre-table" style="display:none;">
<thead>
<tr>
<th>Brand</th>
<th>Model</th>
<th>Size / Spec</th>
<th>Runflat / XL</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

// Load CSV once and cache
function loadTyreCSV() {
return new Promise((resolve, reject) => {
if (tyreData) return resolve(tyreData);

Papa.parse('Eden_Tyres_Stock.csv', {
download: true,
header: true,
dynamicTyping: true, // convert numbers automatically where possible
complete: function(results) {
// Filter out any completely empty rows
tyreData = (results.data || []).filter(row => row['Width']);
resolve(tyreData);
},
error: function(err) {
reject(err);
}
});
});
}

const form = document.getElementById('tyre-form');
const table = document.getElementById('tyre-table');
const tbody = table.querySelector('tbody');
const emptyText = document.getElementById('tyre-empty');

form.addEventListener('submit', function(e) {
e.preventDefault();

const width = parseInt(form.width.value, 10);
const aspect = parseInt(form.aspect.value, 10);
const rim = parseFloat(form.rim.value);

if (!width || !aspect || !rim) {
emptyText.textContent = 'Please enter a valid tyre size.';
table.style.display = 'none';
return;
}

emptyText.textContent = 'Loading stock and searching…';
table.style.display = 'none';
tbody.innerHTML = '';

loadTyreCSV()
.then(data => {
// Filter for matching size and available stock
const matches = data.filter(row => {
const w = Number(row['Width'] || 0);
const ar = Number(

LOREM IPSUM