Site Builder

Editing: compare-slide.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;
            padding: 5px;
            font-size: 1em;
        }
        .phone-info {
            display: flex;
            align-items: center;
            margin: 10px 0;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            position: relative;
        }
        .phone-info img {
            max-width: 100px;
            margin-right: 20px;
        }
        .hidden {
            display: none;
        }
        #slider-container {
            margin: 20px 0;
            display: flex;
            align-items: center;
        }
        #slider-container button {
            margin: 0 10px;
            padding: 5px 10px;
            font-size: 1.5em;
            cursor: pointer;
        }
        .highlight {
            background-color: yellow;
        }
        #show-all-link {
            cursor: pointer;
            color: blue;
            text-decoration: underline;
            margin-left: 10px;
        }
        #selected-phone-info {
            margin-bottom: 20px;
        }
        .pin-link {
            position: absolute;
            right: 10px;
            bottom: 10px;
            font-size: 0.8em;
            color: blue;
            cursor: pointer;
            text-decoration: underline;
        }
        @media (max-width: 600px) {
            select, input[type="range"] {
                font-size: 0.9em;
                padding: 4px;
            }
            #slider-container button {
                font-size: 1.2em;
                padding: 4px 8px;
            }
        }
    </style>
</head>
<body>
    <div id="phone-comparison">
        <h1>Phone Size Comparison</h1>
        <div id="selected-phone-info" class="hidden"></div>
        <div>
            <label for="unit-select">Select Unit:</label>
            <label for="dimension-select" style="margin-left: 20px;">Select Dimension:</label>
            <br>
            <select id="unit-select">
                <option value="metric">mm</option>
                <option value="standard">in</option>
            </select>
            <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">
            <button id="decrement">-</button>
            <input type="range" id="dimension-slider" min="0" max="100" step="1">
            <button id="increment">+</button>
            <p>Selected Size: <span id="selected-size"></span> <span id="show-all-link">Show All</span></p>
        </div>
        <div id="phone-info"></div>
    </div>

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

unitSelect.value = unit;
                    dimensionSelect.value = dimension;
                    updateSliderValues(dimension, unit, value, pid);
                    updatePhoneInfo(selectedPhone);
                }
            }

function updatePhoneInfo(phone) {
                const selectedUnit = unitSelect.value;

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;

selectedPhoneInfoDiv.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.toFixed(selectedUnit === 'metric' ? 1 : 2)} ${selectedUnit === 'metric' ? 'mm' : 'in'} - that is wider than ${narrowerPhones} phones and there are ${widerPhones} wider phones.</div>
                                <div data-dimension="length">Length: ${length.toFixed(selectedUnit === 'metric' ? 1 : 2)} ${selectedUnit === 'metric' ? 'mm' : 'in'} - that is longer than ${shorterPhones} phones and there are ${longerPhones} longer phones.</div>
                                <div data-dimension="depth">Thickness: ${depth.toFixed(selectedUnit === 'metric' ? 1 : 2)} ${selectedUnit === 'metric' ? 'mm' : 'in'} - that is thicker than ${thinnerPhones} phones and there are ${thickerPhones} thicker phones.</div>
                            </div>
                        </div>
                    </div>
                `;
                selectedPhoneInfoDiv.classList.remove('hidden');
            }

dimensionSelect.addEventListener('change', function() {
                showAllMode = false;
                if (this.value) {
                    const selectedUnit = unitSelect.value;
                    const dimension = this.value;
                    sizes = [...new Set(phones.map(phone => parseFloat(phone.parsed_dimensions[selectedUnit][dimension]).toFixed(2)))];
                    sizes.sort((a, b) => a - b);

const pid = urlParams.get('pid');
                    const phone = phones.find(phone => phone.post_id === pid);
                    const value = phone ? parseFloat(phone.parsed_dimensions[selectedUnit][dimension]) : sizes[0];
                    const valueIndex = sizes.indexOf(value.toFixed(2));

dimensionSlider.min = 0;
                    dimensionSlider.max = sizes.length - 1;
                    dimensionSlider.value = valueIndex;

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

unitSelect.addEventListener('change', function() {
                showAllMode = false;
                const selectedUnit = unitSelect.value;
                const dimension = dimensionSelect.value;
                if (dimension) {
                    sizes = [...new Set(phones.map(phone => parseFloat(phone.parsed_dimensions[selectedUnit][dimension]).toFixed(2)))];
                    sizes.sort((a, b) => a - b);

dimensionSlider.min = 0;
                    dimensionSlider.max = sizes.length - 1;
                    dimensionSlider.value = valueIndex;

selectedSizeSpan.textContent = `${value.toFixed(selectedUnit === 'metric' ? 1 : 2)} ${selectedUnit === 'metric' ? 'mm' : 'in'}`;
                    sliderContainer.classList.remove('hidden');
                    updatePhoneList(value.toFixed(2), selectedUnit, dimension, pid);
                    updatePhoneInfo(selectedPhone);
                }
            });

dimensionSlider.addEventListener('input', function() {
                if (showAllMode) {
                    showAllMode = false;
                    showAllLink.style.display = 'inline';
                }
                const selectedUnit = unitSelect.value;
                const dimension = dimensionSelect.value;
                const selectedIndex = this.value;
                const selectedSize = sizes[selectedIndex];

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

decrementButton.addEventListener('click', function() {
                if (dimensionSlider.value > dimensionSlider.min) {
                    dimensionSlider.value--;
                    const event = new Event('input');
                    dimensionSlider.dispatchEvent(event);
                }
            });

incrementButton.addEventListener('click', function() {
                if (dimensionSlider.value < dimensionSlider.max) {
                    dimensionSlider.value++;
                    const event = new Event('input');
                    dimensionSlider.dispatchEvent(event);
                }
            });

showAllLink.addEventListener('click', function() {
                const selectedUnit = unitSelect.value;
                const dimension = dimensionSelect.value;
                const pid = urlParams.get('pid');

showAllMode = true;
                showAllLink.style.display = 'none';
                updatePhoneList(null, selectedUnit, dimension, pid);
            });

function updateSliderValues(dimension, unit, value, pid) {
                sizes = [...new Set(phones.map(phone => parseFloat(phone.parsed_dimensions[unit][dimension]).toFixed(2)))];
                sizes.sort((a, b) => a - b);
                const valueIndex = sizes.indexOf(value.toFixed(2));

if (valueIndex !== -1) {
                    dimensionSlider.min = 0;
                    dimensionSlider.max = sizes.length - 1;
                    dimensionSlider.value = valueIndex;
                    selectedSizeSpan.textContent = `${value.toFixed(unit === 'metric' ? 1 : 2)} ${unit === 'metric' ? 'mm' : 'in'}`;
                    sliderContainer.classList.remove('hidden');
                    updatePhoneList(value.toFixed(2), unit, dimension, pid);
                }
            }

function updatePhoneList(size, unit, dimension, highlightPid = null) {
                let filteredPhones;
                if (showAllMode) {
                    filteredPhones = phones.filter(phone => phone.parsed_dimensions[unit][dimension]);
                    filteredPhones.sort((a, b) => parseFloat(b.parsed_dimensions[unit][dimension]) - parseFloat(a.parsed_dimensions[unit][dimension]));
                } else {
                    filteredPhones = phones.filter(phone => parseFloat(phone.parsed_dimensions[unit][dimension]).toFixed(2) == size);
                }

const currentUrl = new URL(window.location);
                const urlParams = new URLSearchParams(currentUrl.search);

phoneInfoDiv.innerHTML = filteredPhones.map(phone => {
                    const phoneDimension = parseFloat(phone.parsed_dimensions[unit][dimension]);
                    const selectedPhoneDimension = selectedPhone ? parseFloat(selectedPhone.parsed_dimensions[unit][dimension]) : null;
                    const difference = selectedPhoneDimension !== null ? (phoneDimension - selectedPhoneDimension) : null;
                    const differenceText = difference !== null ? ` (Diff ${difference > 0 ? '+' : ''}${difference.toFixed(unit === 'metric' ? 1 : 2)} ${unit === 'metric' ? 'mm' : 'in'})` : '';

urlParams.set('pid', phone.post_id);
                    const pinUrl = `${currentUrl.pathname}?${urlParams.toString()}`;

return `
                        <div class="phone-info ${highlightPid && phone.post_id == highlightPid ? 'highlight' : ''}">
                            <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'}${differenceText}</p>
                                <a href="${pinUrl}" class="pin-link">Pin</a>
                            </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-slide.php

Site Builder