Site Builder

Editing: compare-sar-rank-old.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>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;
            }
        }

.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 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="brand-dropdown">
        <label for="brand-select">Select Brand:</label>
        <select id="brand-select">
            <option value="">All Brands</option>
        </select>
    </div>
    
    <div class="release-year-dropdown">
        <label for="release-year-select">Select Release Year:</label>
        <select id="release-year-select">
            <option value="">All Time</option>
            <option value="3">Last 3 Years</option>
            <option value="5">Last 5 Years</option>
        </select>
    </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>

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 brandSelect = document.getElementById('brand-select');
    const releaseYearSelect = document.getElementById('release-year-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;
    const urlBrand = getUrlParameter('brand') || '';
    const urlYear = getUrlParameter('year') || '';

// 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];
    brandSelect.value = urlBrand;
    releaseYearSelect.value = urlYear;

fetch(cacheFile)
        .then(response => response.json())
        .then(phoneData => {
            // Populate brand dropdown
            const brands = [...new Set(phoneData.map(phone => phone.brand))].sort();
            brands.forEach(brand => {
                const option = document.createElement('option');
                option.value = brand.toLowerCase().replace(/\s+/g, '-');
                option.text = brand;
                brandSelect.appendChild(option);
            });

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

brandSelect.addEventListener('change', () => {
                updatePage(phoneData, testPositions[currentIndex]);
            });

releaseYearSelect.addEventListener('change', () => {
                updatePage(phoneData, testPositions[currentIndex]);
            });
        });

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

const selectedBrand = brandSelect.value;
        const selectedYear = parseInt(releaseYearSelect.value, 10);
        const currentYear = new Date().getFullYear();

let filteredData = phoneData.filter(phone => parseFloat(phone[testpos]) !== 0.00);

if (selectedBrand) {
            filteredData = filteredData.filter(phone => phone.brand.toLowerCase().replace(/\s+/g, '-') === selectedBrand);
        }

if (selectedYear) {
            filteredData = filteredData.filter(phone => {
                const releaseDate = new Date(phone.releasedate);
                return (currentYear - releaseDate.getFullYear()) <= selectedYear;
            });
        }

filteredData.sort((a, b) => parseFloat(a[testpos]) - parseFloat(b[testpos]));

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

if (filteredData.length > 0) {
            const lowestResult = parseFloat(filteredData[0][testpos]);
            const highestResult = parseFloat(filteredData[filteredData.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>';

filteredData.forEach((result, index) => {
                const phoneId = result.post_id;
                const phoneTitle = `${result.brand} ${result.model}`;
                const phoneLink = `${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-important-specs-first.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
                }
            }
        } else {
            sarRankingTable.innerHTML = '<p>No data available for the selected filters.</p>';
        }
    }
});
</script>

</body>
</html>

Site Builder

Editing: compare-sar-rank-old.html

Site Builder