Site Builder

Editing: compare-sar-rank.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 Ranking</title>
    <style>
        /* Styles remain unchanged */
        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;
        }
        .compare-sar-container {
            padding: 20px;
            text-align: center;
        }
        .navigation-buttons {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .navigation-buttons button {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
        .navigation-buttons button:hover {
            background-color: #218838;
        }
        .current-test-position {
            background-color: red;
            color: yellow;
            padding: 10px;
            border-radius: 5px;
            font-size: 18px;
        }
        table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f0f0f0;
        }
        tr:nth-child(odd) {
            background-color: #EEEEEE;
        }
        tr:nth-child(even) {
            background-color: #FFFFFF;
        }
        tr:hover td {
            background: #c7d4dd !important;
        }
        td:first-child {
            text-align: left;
        }
        .phone-name-image-container {
            display: flex;
            align-items: flex-start;
        }
        .phone-name-image-container img {
            width: 80px;
            height: auto;
            margin-right: 10px;
        }
        .compare-button {
            background-color: blue;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            margin-top: 5px;
        }
        .compare-button:hover {
            background-color: darkblue;
        }
        .sar-limit {
            font-size: 0.8em;
        }
        .overall-rank {
            font-size: 0.8em;
            color: gray;
        }
        h3.unique-compare-heading {
            text-align: center;
            margin-top: 20px;
        }
        .test-position-dropdown {
            display: inline-block;
            margin: 10px;
        }
        .test-position-dropdown select {
            padding: 10px;
            font-size: 16px;
        }
        .menu-button {
            display: none;
            background-color: #0056b3;
            color: white;
            padding: 5px;
            border: none;
            cursor: pointer;
            position: relative;
            z-index: 2;
        }
        .menu-button:hover {
            background-color: #004494;
        }
        .menu-button div {
            width: 25px;
            height: 3px;
            background-color: white;
            margin: 3px 0;
        }
        .nav-overlay {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            top: 0;
            left: 0;
            z-index: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .nav-overlay a {
            color: white;
            font-size: 24px;
            margin: 10px 0;
        }
        @media (max-width: 600px) {
            .nav {
                display: none;
            }
            .menu-button {
                display: flex;
                flex-direction: column;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <img src="https://www.rfsafe.com/wp-content/uploads/2022/03/rfsafe-logo-r.jpg" alt="RF Safe Logo">
    <div class="nav">
        <a href="#">Info</a>
        <a href="#">News</a>
        <a href="#">SAR Database</a>
        <a href="#">QuantaCase</a>
        <a href="#">iPhone</a>
        <a href="#">Samsung</a>
        <a href="#">Google</a>
    </div>
    <button class="menu-button" onclick="toggleMenu()">
        <div></div>
        <div></div>
        <div></div>
    </button>
    <div class="nav-overlay" id="nav-overlay">
        <a href="#">Info</a>
        <a href="#">News</a>
        <a href="#">SAR Database</a>
        <a href="#">QuantaCase</a>
        <a href="#">iPhone</a>
        <a href="#">Samsung</a>
        <a href="#">Google</a>
    </div>
</div>

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

<div class="compare-sar-container" id="sar-ranking-container">
    
    <div class="navigation-buttons">
        <button id="prev-button">&lt;&lt; Previous</button>
        <div id="current-test-position" class="current-test-position"></div>
        <button id="next-button">Next &gt;&gt;</button>
    </div>
    
    <div class="test-position-dropdown">
        <label for="test-position-select">Select Test Position:</label>
        <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="sar-ranking-table"></div>
</div>

document.addEventListener("DOMContentLoaded", function() {
    const testPositions = [
        'ushead',
        'usbody',
        'productspecific',
        'simulheadus',
        'simulbodyus',
        'hotspot'
    ];

const testPositionNames = {
        'ushead': 'Head SAR (Cellular Only)',
        'usbody': 'Body SAR (Cellular Only)',
        'productspecific': 'Hot Spot SAR (Cellular Only)',
        'simulheadus': 'Head SAR (Wi-Fi + Cellular)',
        'simulbodyus': 'Body SAR (Wi-Fi + Cellular)',
        'hotspot': 'Hot Spot SAR (Wi-Fi + Cellular)'
    };

let currentIndex = 0;

const sarRankingContainer = document.getElementById('sar-ranking-container');
    const currentTestPositionDiv = document.getElementById('current-test-position');
    const prevButton = document.getElementById('prev-button');
    const nextButton = document.getElementById('next-button');
    const testPositionSelect = document.getElementById('test-position-select');
    const sarRankingTable = document.getElementById('sar-ranking-table');

// Function to get URL parameters
    function getUrlParameter(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

const urlTest = getUrlParameter('test') || 'ushead';
    const urlPid = getUrlParameter('pid') || null;

// Set the currentIndex and select the correct dropdown option based on URL parameter
    currentIndex = testPositions.indexOf(urlTest);
    if (currentIndex === -1) {
        currentIndex = 0;
    }
    testPositionSelect.value = testPositions[currentIndex];

fetch('cache/sar2_cache.json')
        .then(response => response.json())
        .then(phoneData => {
            updatePage(phoneData, testPositions[currentIndex]);

prevButton.addEventListener('click', () => {
                if (currentIndex > 0) {
                    currentIndex--;
                    testPositionSelect.value = testPositions[currentIndex];
                    updatePage(phoneData, testPositions[currentIndex]);
                }
            });

nextButton.addEventListener('click', () => {
                if (currentIndex < testPositions.length - 1) {
                    currentIndex++;
                    testPositionSelect.value = testPositions[currentIndex];
                    updatePage(phoneData, testPositions[currentIndex]);
                }
            });

testPositionSelect.addEventListener('change', (event) => {
                const selectedTestPosition = event.target.value;
                currentIndex = testPositions.indexOf(selectedTestPosition);
                updatePage(phoneData, selectedTestPosition);
            });
        });

function updatePage(phoneData, testpos) {
        const testposName = testPositionNames[testpos];
        currentTestPositionDiv.textContent = testposName;

let results = phoneData.filter(phone => parseFloat(phone[testpos]) !== 0.00);
        results.sort((a, b) => parseFloat(a[testpos]) - parseFloat(b[testpos]));

const sarlimit = 1.60;
        let rank = 0;
        let previousSar = null;

const lowestResult = parseFloat(results[0][testpos]);
        const highestResult = parseFloat(results[results.length - 1][testpos]);
        const percentageDifference = ((highestResult - lowestResult) / lowestResult) * 100;
        const lowestPercentageOfLimit = (lowestResult / sarlimit) * 100;
        const highestPercentageOfLimit = (highestResult / sarlimit) * 100;

const blurb = `
            ${testposName} SAR Testing
            When considering ${testposName}, the phone with the all-time lowest SAR rating has a value of ${lowestResult} W/kg, 
            amounting to ${lowestPercentageOfLimit.toFixed(2)}% of the 1.6 W/kg limit. 
            In comparison, the phone with the highest SAR rating had a value of ${highestResult} W/kg 
            (${highestPercentageOfLimit.toFixed(2)}% of the limit), leading to a ${percentageDifference.toFixed(2)}% difference between the lowest and highest SAR values.
        `;

let htmlContent = `<br><p>${blurb}</p>`;
        htmlContent += '<table>';
        htmlContent += `<thead><tr><th>Phone Model</th><th>${testposName}<br><span class="sar-limit">(% Limit)</span></th><th>SAR Rank</th></tr></thead>`;
        htmlContent += '<tbody>';

results.forEach((result, index) => {
            const phoneId = result.post_id;
            const phoneTitle = `${result.brand} ${result.model}`;
            const phoneLink = `/phones/${result.brand.toLowerCase().replace(/\s+/g, '-')}-${result.model.toLowerCase().replace(/\s+/g, '-')}/`;
            const phoneImage = `<img src="${result.thumbnail_url}" alt="${phoneTitle}">`;
            const sarValue = parseFloat(result[testpos]);
            const percentOfLimit = (sarValue / sarlimit) * 100;

if (sarValue !== previousSar) {
                rank++;
            }

const rowColor = (phoneId == urlPid) ? 'background-color: yellow;' : '';

htmlContent += `
                <tr id="${phoneId}" style="${rowColor}">
                    <td>
                        <div class="phone-name-image-container">
                            <div><a href="${phoneLink}">${phoneImage}</a></div>
                            <div><a href="${phoneLink}">${phoneTitle}</a></div>
                        </div>
                    </td>
                    <td><strong>${sarValue} W/kg<br><span class="sar-limit">(${percentOfLimit.toFixed(2)}%)</span></strong></td>
                    <td style="padding-right: 20px;">
                        <div style="margin-bottom: 10px;">Ranks ${rank}</div>
                        <a href="/compare-sar.php?pid=${phoneId}" class="compare-button">Compare</a>
                    </td>
                </tr>
            `;

previousSar = sarValue;
        });

htmlContent += '</tbody></table>';
        sarRankingTable.innerHTML = htmlContent;

// Explicitly scroll to the highlighted row if it exists
        if (urlPid) {
            const targetElement = document.getElementById(urlPid);
            if (targetElement) {
                setTimeout(() => {
                    window.scrollTo({
                        top: targetElement.getBoundingClientRect().top + window.pageYOffset - 100,
                        behavior: 'smooth'
                    });
                }, 100); // Adjust the delay if needed
            }
        }
    }
});
</script>

</body>
</html>

Site Builder

Editing: compare-sar-rank.php

Site Builder