Site Builder

Editing: screen-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>Screen-to-Body Ratio Comparison</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .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;
        }
        #comparison {
            max-width: 800px;
            margin: auto;
            text-align: center;
        }
        select, input[type="range"] {
            margin: 10px;
            padding: 5px;
            font-size: 1em;
        }
        .info {
            display: flex;
            align-items: center;
            margin: 10px 0;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            position: relative;
        }
        .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-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;
            }
        }
        .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</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="./spot-fake-anti-radiation-emf-blocking-phone-cases.html">Fake Protection</a>
        <a id="real-protection-link" href="./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</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="./spot-fake-anti-radiation-emf-blocking-phone-cases.html">Fake Protection</a>
        <a id="overlay-real-protection-link" href="./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="comparison">
    <h1>Screen-to-Body Ratio Comparison</h1>
    <div id="selected-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="inches">inches</option>
            <option value="cm">cm</option>
        </select>
        <select id="dimension-select">
            <option value="">--Select Dimension--</option>
            <option value="screen-to-body">Screen-to-Body Ratio</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="info"></div>
</div>

const pathArray = window.location.pathname.split('/');
    const phoneSlug = pathArray[pathArray.length - 2];
    const jsonFilePath = `${phoneSlug}_cache.json`;

fetch(jsonFilePath)
        .then(response => response.json())
        .then(data => {
            phones = Object.values(data);
            initializeFromUrlParams();
        });

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

if (pid) {
            selectedPhone = phones.find(phone => phone.General["Phone"].replace(/ /g, '-').toLowerCase() === pid);
            if (!selectedPhone) {
                document.getElementById('comparison').innerHTML += '<p>Invalid phone ID.</p>';
                return;
            }
        } else {
            selectedPhone = phones[0];
        }

let unit = 'inches';
        let dimension = 'screen-to-body';
        let value = parseFloat(selectedPhone.Display.Size.split(',')[1].replace(' cm2', ''));
        if (urlParams.has('u')) {
            unit = urlParams.get('u');
        }
        if (urlParams.has('d')) {
            dimension = urlParams.get('d');
            value = parseFloat(urlParams.get('v'));
        }

unitSelect.value = unit;
        dimensionSelect.value = dimension;
        updateSliderValues(dimension, unit, value, selectedPhone.General["Phone"].replace(/ /g, '-').toLowerCase());
        updateInfo(selectedPhone);
    }

function constructPhoneUrl(phone) {
        const brandSlug = phone.General["Phone"].toLowerCase().replace(/ /g, '-');
        return `/${brandSlug}/`;
    }

function updateInfo(phone) {
        const selectedUnit = unitSelect.value;
        const sizeInCm = parseFloat(phone.Display.Size.split(',')[1].replace(' cm2', ''));
        const sizeInInches = parseFloat(phone.Display.Size.split(' ')[0]);

selectedInfoDiv.innerHTML = `
            <div class="info">
                <img src="${phone.thumbnail_url}" alt="${phone.General["Phone"]}">
                <div>
                    <h3><a href="${constructPhoneUrl(phone)}">${phone.General["Phone"]}</a></h3>
                    <div class="details">
                        Screen-to-Body Ratio: ${phone.Display.Size.split('~')[1]}
                    </div>
                </div>
            </div>
        `;
        selectedInfoDiv.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.Display.Size.split(',')[1].replace(' cm2', ''))))];
            sizes.sort((a, b) => a - b);

const pid = selectedPhone ? selectedPhone.General["Phone"].replace(/ /g, '-').toLowerCase() : null;
            const value = selectedPhone ? parseFloat(selectedPhone.Display.Size.split(',')[1].replace(' cm2', '')) : sizes[0];
            const valueIndex = sizes.indexOf(value);

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

selectedSizeSpan.textContent = `${value} ${selectedUnit === 'cm' ? 'cm2' : 'inches'}`;
            sliderContainer.classList.remove('hidden');
            updatePhoneList(value, selectedUnit, dimension, pid);
        } else {
            sliderContainer.classList.add('hidden');
            infoDiv.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.Display.Size.split(',')[1].replace(' cm2', ''))))];
            sizes.sort((a, b) => a - b);

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

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 === 'cm' ? 'cm2' : 'inches'}`;
        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.General["Phone"].replace(/ /g, '-').toLowerCase() : 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.Display.Size.split(',')[1].replace(' cm2', ''))))];
        sizes.sort((a, b) => a - b);
        const valueIndex = sizes.indexOf(value);

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

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

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

infoDiv.innerHTML = filteredPhones.map(phone => {
            const sizeValue = parseFloat(phone.Display.Size.split(',')[1].replace(' cm2', ''));
            const sizeInInches = parseFloat(phone.Display.Size.split(' ')[0]);

urlParams.set('pid', phone.General["Phone"].replace(/ /g, '-').toLowerCase());
            const pinUrl = `${currentUrl.pathname}?${urlParams.toString()}`;

const phoneUrl = constructPhoneUrl(phone);

return `
                <div class="info ${highlightPid && phone.General["Phone"].replace(/ /g, '-').toLowerCase() == highlightPid ? 'highlight' : ''}">
                    <img src="${phone.thumbnail_url}" alt="${phone.General["Phone"]}">
                    <div>
                        <h3><a href="${phoneUrl}">${phone.General["Phone"]}</a></h3>
                        <p>Screen-to-Body Ratio: ${phone.Display.Size.split('~')[1]}</p>
                        <p>${dimension.charAt(0).toUpperCase() + dimension.slice(1)}: ${unit === 'cm' ? sizeValue : sizeInInches} ${unit === 'cm' ? 'cm2' : 'inches'}</p>
                        <a href="${pinUrl}" class="pin-link">Pin</a>
                    </div>
                </div>
            `;
        }).join('');

if (filteredPhones.length === 0) {
            infoDiv.innerHTML = `<p>No phones found for ${dimension.charAt(0).toUpperCase() + dimension.slice(1)}: ${size} ${unit === 'cm' ? 'cm2' : 'inches'}</p>`;
        }
    }
});

</body>
</html>

Site Builder

Editing: screen-size.php

Site Builder