Site Builder

Editing: dimensions.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;
            }
        }
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: white;
            padding: 10px 20px;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header img {
            height: 50px;
        }
        .nav {
            display: flex;
            gap: 20px;
        }
        .nav a {
            text-decoration: none;
            color: #0056b3;
            font-weight: bold;
        }
        .news-flash {
            background-color: red;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
        .compare-sar-container {
            padding: 20px;
        }
        .compare-sar-dropdown-container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .compare-sar-dropdown-container .dropdown-wrapper {
            width: 48%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .compare-sar-dropdown-container select {
            width: 100%;
            background-color: #f7f7f7;
            text-transform: capitalize;
            font-size: 16px;
            padding: 10px;
        }
        .copy-link-container {
            text-align: center;
            margin-top: 20px;
            display: none;
        }
        .copy-link-container input {
            width: 300px;
            padding: 10px;
            font-size: 16px;
        }
        .copy-link-container button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
        }
        .sar-summary-container {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
        }
        .sar-group {
            position: relative;
            width: 48%;
            margin-bottom: 20px;
        }
        .sar-image-container {
            position: relative;
            width: 100%;
            height: auto;
        }
        .sar-image-container img {
            max-width: 100%;
            height: auto;
        }
        .background-fill {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: red;
            opacity: 1;
            z-index: -1;
        }
        .sar-group h3 {
            text-align: center;
        }
        .sar-group p {
            text-align: center;
        }
        @media screen and (max-width: 768px) {
            .sar-summary-container {
                flex-direction: column;
            }
            .sar-group {
                width: 100%;
            }
        }
        .footer {
            text-align: center;
            padding: 20px;
            font-size: 14px;
            background-color: #f1f1f1;
            margin-top: 20px;
        }
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            position: relative;
            z-index: 3; /* Ensure hamburger icon is above the overlay */
        }
        .bar {
            width: 25px;
            height: 3px;
            background-color: #333;
            margin: 4px 0;
            transition: all 0.3s;
        }
        .hamburger.open .bar {
            background-color: red;
        }
        .hamburger.open .bar1 {
            transform: rotate(-45deg) translate(-5px, 6px);
        }
        .hamburger.open .bar2 {
            opacity: 0;
        }
        .hamburger.open .bar3 {
            transform: rotate(45deg) translate(-5px, -6px);
        }
        .nav-overlay {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            top: 0;
            left: 0;
            z-index: 2;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
        }
        .nav-overlay a {
            color: white;
            font-size: 24px;
            margin: 10px 0;
        }
        @media (max-width: 768px) {
            .nav {
                display: none;
                flex-direction: column;
                width: 100%;
            }
            .nav a {
                padding: 10px;
                text-align: center;
                background-color: #f1f1f1;
                border-bottom: 1px solid #ddd;
            }
            .hamburger {
                display: flex;
            }
        }
    </style>
</head>
<body>

<div class="header">
      <a href="/"><img src="/cache/logo.jpg" alt="Logo"></a> 
    <div class="nav">
        <a href="/phones/">Phones</a>
        <a id="kid-safety-link" href="./cell-phone-radiation-kids.html">Kid Safety</a>
        <a id="sar-safety-link" href="./phone-radiation-safety-information.html">SAR Safety</a>
        <a id="sar-ranks-link" href="#">SAR Ranks</a>
        <a id="compare-phones-link" href="#">Compare Phones</a>
        <a href="/phones/spot-fake-anti-radiation-emf-blocking-phone-cases.html">Fake Protection</a>
        <a id="real-protection-link" href="/phones/quantacase-emf-blocking-anti-radiation-phone-case-rfid-protection.html">Real Protection</a>
    </div>
    <div class="hamburger" onclick="toggleMenu()">
        <div class="bar bar1"></div>
        <div class="bar bar2"></div>
        <div class="bar bar3"></div>
    </div>
    <div class="nav-overlay" id="nav-overlay">
        <a href="/phones/">Phones</a>
        <a id="overlay-kid-safety-link" href="./cell-phone-radiation-kids.html">Kid Safety</a>
        <a id="overlay-sar-safety-link" href="./phone-radiation-safety-information.html">SAR Safety</a>
        <a id="overlay-sar-ranks-link" href="#">SAR Ranks</a>
        <a id="overlay-compare-phones-link" href="#">Compare Phones</a>
        <a href="/phones/spot-fake-anti-radiation-emf-blocking-phone-cases.html">Fake Protection</a>
        <a id="overlay-real-protection-link" href="/phones/quantacase-emf-blocking-anti-radiation-phone-case-rfid-protection.html">Real Protection</a>
    </div>
</div>

linksToUpdate.forEach(link => {
        const element = document.getElementById(link.id);
        if (firstPid) {
            element.href = `${link.url}?pid=${firstPid}`;
        } else {
            element.href = link.url;
        }
    });
</script>

<div class="news-flash">
    News Flash ⚡ Spot Fake Anti Radiation Phone Cases
</div>

<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();
                });

function initializeFromUrlParams() {
                const pid = urlParams.get('pid');

if (pid) {
                    selectedPhone = phones.find(phone => phone.post_id === pid);
                    if (!selectedPhone) {
                        document.getElementById('phone-comparison').innerHTML += '<p>Invalid phone ID.</p>';
                        return;
                    }
                } else {
                    const currentPath = window.location.pathname.split('/');
                    const slug = currentPath[currentPath.length - 2];
                    selectedPhone = phones.find(p => (p.brand + ' ' + p.model).toLowerCase().replace(/ /g, '-') === slug);
                    if (!selectedPhone) {
                        document.getElementById('phone-comparison').innerHTML += '<p>No matching phone model found in the directory name.</p>';
                        return;
                    }
                }

unitSelect.value = unit;
                dimensionSelect.value = dimension;
                updateSliderValues(dimension, unit, value, selectedPhone.post_id);
                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 = selectedPhone ? selectedPhone.post_id : null;
                    const value = selectedPhone ? parseFloat(selectedPhone.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 = selectedPhone ? selectedPhone.post_id : null;

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: dimensions.php

Site Builder