Site Builder

Editing: dimensions.html

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;

const phoneUrl = constructPhoneUrl(phone);

selectedPhoneInfoDiv.innerHTML = `
            <div class="phone-info">
                <img src="${phone.thumbnail_url}" alt="${phone.model}">
                <div>
                    <h3><a href="${phoneUrl}">${phone.brand} ${phone.model}</a></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()}`;

const phoneUrl = constructPhoneUrl(phone);

return `
                <div class="phone-info ${highlightPid && phone.post_id == highlightPid ? 'highlight' : ''}">
                    <img src="${phone.thumbnail_url}" alt="${phone.model}">
                    <div>
                        <h3><a href="${phoneUrl}">${phone.brand} ${phone.model}</a></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.html

Site Builder