Site Builder

Editing: compare-size.php

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phone Size Comparison</title>
    <style>
        #phone-comparison {
            max-width: 800px;
            margin: auto;
            text-align: center;
        }
        select, button {
            margin: 10px;
        }
        .phone-info {
            display: flex;
            align-items: center;
            margin: 10px 0;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }
        .phone-info img {
            max-width: 100px;
            margin-right: 20px;
        }
        .hidden {
            display: none;
        }
        .details {
            margin: 10px 0;
        }
        .details div {
            cursor: pointer;
            color: blue;
            text-decoration: underline;
        }
        .details ul {
            list-style-type: none;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="phone-comparison">
        <h1>Phone Size Comparison</h1>
        <div>
            <label for="unit-select">Select Unit:</label>
            <select id="unit-select">
                <option value="metric">mm</option>
                <option value="standard">in</option>
            </select>
        </div>
        <div>
            <label for="brand-select">Select Brand:</label>
            <select id="brand-select">
                <option value="">--Select Brand--</option>
            </select>
        </div>
        <div class="hidden" id="model-container">
            <label for="model-select">Select Model:</label>
            <select id="model-select">
                <option value="">--Select Model--</option>
            </select>
        </div>
        <div id="phone-info" class="hidden"></div>
    </div>

fetch('/cache/size_cache.json')
                .then(response => response.json())
                .then(data => {
                    phones = data;

// Populate brand dropdown
                    const brands = [...new Set(phones.map(phone => phone.brand))];
                    brands.forEach(brand => {
                        const option = document.createElement('option');
                        option.value = brand;
                        option.textContent = brand;
                        brandSelect.appendChild(option);
                    });
                });

brandSelect.addEventListener('change', function() {
                const selectedBrand = this.value;
                modelSelect.innerHTML = '<option value="">--Select Model--</option>';
                modelContainer.classList.add('hidden');
                phoneInfoDiv.classList.add('hidden');

if (selectedBrand) {
                    const models = phones.filter(phone => phone.brand === selectedBrand).map(phone => phone.model);
                    models.forEach(model => {
                        const option = document.createElement('option');
                        option.value = model;
                        option.textContent = model;
                        modelSelect.appendChild(option);
                    });
                    modelContainer.classList.remove('hidden');
                }
            });

modelSelect.addEventListener('change', function() {
                const selectedModel = this.value;
                if (selectedModel) {
                    updatePhoneInfo(selectedModel);
                } else {
                    phoneInfoDiv.classList.add('hidden');
                }
            });

unitSelect.addEventListener('change', function() {
                if (modelSelect.value) {
                    updatePhoneInfo(modelSelect.value);
                }
            });

function updatePhoneInfo(selectedModel) {
                const selectedUnit = unitSelect.value;
                const phone = phones.find(phone => phone.model === selectedModel);

const width = phone.parsed_dimensions[selectedUnit].width;
                const length = phone.parsed_dimensions[selectedUnit].length;
                const depth = phone.parsed_dimensions[selectedUnit].depth;

const widerPhones = phones.filter(p => p.parsed_dimensions[selectedUnit].width > width).length;
                const narrowerPhones = phones.filter(p => p.parsed_dimensions[selectedUnit].width < width).length;

const longerPhones = phones.filter(p => p.parsed_dimensions[selectedUnit].length > length).length;
                const shorterPhones = phones.filter(p => p.parsed_dimensions[selectedUnit].length < length).length;

const thickerPhones = phones.filter(p => p.parsed_dimensions[selectedUnit].depth > depth).length;
                const thinnerPhones = phones.filter(p => p.parsed_dimensions[selectedUnit].depth < depth).length;

phoneInfoDiv.innerHTML = `
                    <div class="phone-info">
                        <img src="${phone.thumbnail_url}" alt="${phone.model}">
                        <div>
                            <h3>${phone.brand} ${phone.model}</h3>
                            <div class="details">
                                <div data-dimension="width">Width: ${width} ${selectedUnit} - that is wider than ${narrowerPhones} phones and there are ${widerPhones} wider phones.</div>
                                <ul class="hidden" id="width-list"></ul>
                                <div data-dimension="length">Length: ${length} ${selectedUnit} - that is longer than ${shorterPhones} phones and there are ${longerPhones} longer phones.</div>
                                <ul class="hidden" id="length-list"></ul>
                                <div data-dimension="depth">Thickness: ${depth} ${selectedUnit} - that is thicker than ${thinnerPhones} phones and there are ${thickerPhones} thicker phones.</div>
                                <ul class="hidden" id="depth-list"></ul>
                            </div>
                        </div>
                    </div>
                `;
                phoneInfoDiv.classList.remove('hidden');

document.querySelectorAll('.details div').forEach(detail => {
                    detail.addEventListener('click', function() {
                        const dimension = this.getAttribute('data-dimension');
                        const listId = `${dimension}-list`;
                        const list = document.getElementById(listId);

if (list.classList.contains('hidden')) {
                            const phonesToShow = phones.filter(p => {
                                if (dimension === 'width') {
                                    return selectedUnit === 'metric' 
                                        ? (this.textContent.includes('wider') ? p.parsed_dimensions[selectedUnit].width > width : p.parsed_dimensions[selectedUnit].width < width)
                                        : (this.textContent.includes('wider') ? p.parsed_dimensions[selectedUnit].width > width : p.parsed_dimensions[selectedUnit].width < width);
                                } else if (dimension === 'length') {
                                    return selectedUnit === 'metric' 
                                        ? (this.textContent.includes('longer') ? p.parsed_dimensions[selectedUnit].length > length : p.parsed_dimensions[selectedUnit].length < length)
                                        : (this.textContent.includes('longer') ? p.parsed_dimensions[selectedUnit].length > length : p.parsed_dimensions[selectedUnit].length < length);
                                } else {
                                    return selectedUnit === 'metric' 
                                        ? (this.textContent.includes('thicker') ? p.parsed_dimensions[selectedUnit].depth > depth : p.parsed_dimensions[selectedUnit].depth < depth)
                                        : (this.textContent.includes('thicker') ? p.parsed_dimensions[selectedUnit].depth > depth : p.parsed_dimensions[selectedUnit].depth < depth);
                                }
                            });

list.innerHTML = phonesToShow.map(p => `
                                <li>${p.brand} ${p.model} - ${p.parsed_dimensions[selectedUnit][dimension]} ${selectedUnit}</li>
                            `).join('');
                            list.classList.remove('hidden');
                        } else {
                            list.classList.add('hidden');
                        }
                    });
                });
            }
        });
    </script>
</body>
</html>

Site Builder

Editing: compare-size.php

Site Builder