Site Builder

Editing: compare-slde.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, input[type="range"] {
            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;
        }
        #slider-container {
            margin: 20px 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="dimension-select">Select Dimension:</label>
            <select id="dimension-select">
                <option value="">--Select Dimension--</option>
                <option value="length">Length</option>
                <option value="width">Width</option>
                <option value="depth">Thickness</option>
            </select>
        </div>
        <div id="slider-container" class="hidden">
            <input type="range" id="dimension-slider" min="0" max="100" step="0.01">
            <p>Selected Size: <span id="selected-size"></span></p>
        </div>
        <div id="phone-info"></div>
    </div>

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

dimensionSelect.addEventListener('change', function() {
                if (this.value) {
                    const selectedUnit = unitSelect.value;
                    const dimension = this.value;
                    const sizes = phones.map(phone => phone.parsed_dimensions[selectedUnit][dimension]);
                    const minSize = Math.min(...sizes);
                    const maxSize = Math.max(...sizes);

dimensionSlider.min = minSize;
                    dimensionSlider.max = maxSize;
                    dimensionSlider.value = minSize;

selectedSizeSpan.textContent = `${minSize} ${selectedUnit === 'metric' ? 'mm' : 'in'}`;
                    sliderContainer.classList.remove('hidden');
                    updatePhoneList(minSize, selectedUnit, dimension);
                } else {
                    sliderContainer.classList.add('hidden');
                    phoneInfoDiv.innerHTML = '';
                }
            });

dimensionSlider.addEventListener('input', function() {
                const selectedUnit = unitSelect.value;
                const dimension = dimensionSelect.value;
                const selectedSize = this.value;

selectedSizeSpan.textContent = `${selectedSize} ${selectedUnit === 'metric' ? 'mm' : 'in'}`;
                updatePhoneList(selectedSize, selectedUnit, dimension);
            });

function updatePhoneList(size, unit, dimension) {
                const padding = unit === 'metric' ? 0.1 : 0.01; // Define a small padding around the selected size
                const filteredPhones = phones.filter(phone => {
                    const phoneSize = parseFloat(phone.parsed_dimensions[unit][dimension]);
                    return phoneSize >= size - padding && phoneSize <= size + padding;
                });

phoneInfoDiv.innerHTML = filteredPhones.map(phone => `
                    <div class="phone-info">
                        <img src="${phone.thumbnail_url}" alt="${phone.model}">
                        <div>
                            <h3>${phone.brand} ${phone.model}</h3>
                            <p>${dimension.charAt(0).toUpperCase() + dimension.slice(1)}: ${phone.parsed_dimensions[unit][dimension]} ${unit === 'metric' ? 'mm' : 'in'}</p>
                        </div>
                    </div>
                `).join('');

if (filteredPhones.length === 0) {
                    phoneInfoDiv.innerHTML = `<p>No phones found for ${dimension.charAt(0).toUpperCase() + dimension.slice(1)}: ${size} ${unit === 'metric' ? 'mm' : 'in'}</p>`;
                }
            }
        });
    </script>
</body>
</html>

Site Builder

Editing: compare-slde.php

Site Builder