Site Builder

Editing: sar-levels.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>SAR Level 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;
        }
        #sar-comparison {
            max-width: 800px;
            margin: auto;
            text-align: center;
        }
        select, input[type="range"] {
            margin: 10px;
            padding: 5px;
            font-size: 1em;
        }
        .sar-info {
            display: flex;
            align-items: center;
            margin: 10px 0;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            position: relative;
        }
        .sar-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-sar-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="sar-comparison">
    <h1>SAR Level Comparison</h1>
    <div id="selected-sar-info" class="hidden"></div>
    <div>
        <label for="unit-select">Select Unit:</label>
        <label for="test-position-select" style="margin-left: 20px;">Select Test Position:</label>
        <br>
        <select id="unit-select">
            <option value="W/kg">W/kg</option>
            <option value="%">%</option>
        </select>
        <select id="test-position-select">
            <option value="ushead">Head SAR (Cellular Only)</option>
            <option value="usbody">Body SAR (Cellular Only)</option>
            <option value="productspecific">Hot Spot SAR (Cellular Only)</option>
            <option value="simulheadus">Head SAR (Wi-Fi + Cellular)</option>
            <option value="simulbodyus">Body SAR (Wi-Fi + Cellular)</option>
            <option value="hotspot">Hot Spot SAR (Wi-Fi + Cellular)</option>
        </select>
    </div>
    <div id="slider-container" class="hidden">
        <button id="decrement">-</button>
        <input type="range" id="sar-slider" min="0" max="100" step="1">
        <button id="increment">+</button>
        <p>Selected SAR: <span id="selected-sar"></span> <span id="show-all-link">Show All</span></p>
    </div>
    <div id="sar-info"></div>
</div>

fetch('/cache/sar2_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('sar-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('sar-comparison').innerHTML += '<p>No matching phone model found in the directory name.</p>';
                return;
            }
        }

let unit = 'W/kg';
        let testPosition = 'ushead';
        let value = parseFloat(selectedPhone[testPosition]);
        if (urlParams.has('u')) {
            unit = urlParams.get('u');
        }
        if (urlParams.has('t')) {
            testPosition = urlParams.get('t');
            value = parseFloat(urlParams.get('v'));
        }

unitSelect.value = unit;
        testPositionSelect.value = testPosition;
        updateSliderValues(testPosition, unit, value, selectedPhone.post_id);
        updateSarInfo(selectedPhone);
    }

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

const sarValues = {
            ushead: phone.ushead,
            usbody: phone.usbody,
            productspecific: phone.productspecific,
            simulheadus: phone.simulheadus,
            simulbodyus: phone.simulbodyus,
            hotspot: phone.hotspot
        };

selectedSarInfoDiv.innerHTML = `
            <div class="sar-info">
                <img src="${phone.thumbnail_url}" alt="${phone.model}">
                <div>
                    <h3><a href="${constructPhoneUrl(phone)}">${phone.brand} ${phone.model}</a></h3>
                    <div class="details">
                        ${sarInfoHtml}
                    </div>
                </div>
            </div>
        `;
        selectedSarInfoDiv.classList.remove('hidden');
    }

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

const pid = selectedPhone ? selectedPhone.post_id : null;
            const value = selectedPhone ? parseFloat(selectedPhone[testPosition]) : sars[0];
            const valueIndex = sars.indexOf(value.toFixed(2));

sarSlider.min = 0;
            sarSlider.max = sars.length - 1;
            sarSlider.value = valueIndex;

selectedSarSpan.textContent = `${value.toFixed(2)} ${selectedUnit}`;
            sliderContainer.classList.remove('hidden');
            updatePhoneList(value.toFixed(2), selectedUnit, testPosition, pid);
        } else {
            sliderContainer.classList.add('hidden');
            sarInfoDiv.innerHTML = '';
        }
    });

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

sarSlider.min = 0;
            sarSlider.max = sars.length - 1;
            sarSlider.value = valueIndex;

selectedSarSpan.textContent = `${value.toFixed(2)} ${selectedUnit}`;
            sliderContainer.classList.remove('hidden');
            updatePhoneList(value.toFixed(2), selectedUnit, testPosition, pid);
            updateSarInfo(selectedPhone);
        }
    });

sarSlider.addEventListener('input', function() {
        if (showAllMode) {
            showAllMode = false;
            showAllLink.style.display = 'inline';
        }
        const selectedUnit = unitSelect.value;
        const testPosition = testPositionSelect.value;
        const selectedIndex = this.value;
        const selectedSar = sars[selectedIndex];

selectedSarSpan.textContent = `${selectedSar} ${selectedUnit}`;
        updatePhoneList(selectedSar, selectedUnit, testPosition);
    });

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

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

showAllLink.addEventListener('click', function() {
        const selectedUnit = unitSelect.value;
        const testPosition = testPositionSelect.value;
        const pid = selectedPhone ? selectedPhone.post_id : null;

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

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

if (valueIndex !== -1) {
            sarSlider.min = 0;
            sarSlider.max = sars.length - 1;
            sarSlider.value = valueIndex;
            selectedSarSpan.textContent = `${value.toFixed(2)} ${unit}`;
            sliderContainer.classList.remove('hidden');
            updatePhoneList(value.toFixed(2), unit, testPosition, pid);
        }
    }

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

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

sarInfoDiv.innerHTML = filteredPhones.map(phone => {
            const sarValue = parseFloat(phone[testPosition]);
            const percentOfLimit = (sarValue / sarlimit) * 100;
            const selectedPhoneSar = selectedPhone ? parseFloat(selectedPhone[testPosition]) : null;
            const difference = selectedPhoneSar !== null ? (sarValue - selectedPhoneSar) : null;
            const differenceText = difference !== null ? ` (Diff ${difference > 0 ? '+' : ''}${difference.toFixed(2)} ${unit})` : '';

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

const phoneUrl = constructPhoneUrl(phone);

return `
                <div class="sar-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>${testPositionSelect.querySelector(`option[value="${testPosition}"]`).innerText}: 
                        ${unit === 'W/kg' ? sarValue : percentOfLimit.toFixed(2)} ${unit}${differenceText}</p>
                        <a href="${pinUrl}" class="pin-link">Pin</a>
                    </div>
                </div>
            `;
        }).join('');

if (filteredPhones.length === 0) {
            sarInfoDiv.innerHTML = `<p>No phones found for ${testPositionSelect.querySelector(`option[value="${testPosition}"]`).innerText}: ${sar} ${unit}</p>`;
        }
    }
});

</body>
</html>

Site Builder

Editing: sar-levels.php

Site Builder