Site Builder

Editing: compare-sar-rank2.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>
    html, body {
        margin:0; padding:0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
        height:100%;
    }

body {
        background: linear-gradient(45deg, #8EC5FC, #E0C3FC, #FFDDC1, #FEC9D7);
        background-size: 400% 400%;
        animation: gradientBG 20s ease infinite;
    }

@keyframes gradientBG {
        0% { background-position:0% 50%; }
        50% { background-position:100% 50%; }
        100% { background-position:0% 50%; }
    }

.wrapper {
        max-width:1200px;
        margin:0 auto;
        padding:20px;
    }

/* Header */
    .header {
        background: none;
        padding:10px 20px;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

.header img {
        height:90px;
    }

.nav {
        display:flex;
        gap:20px;
        align-items:center;
    }

.nav a {
        text-decoration:none;
        color:#fff;
        font-weight:bold;
        padding:8px 10px;
        border-radius:5px;
        transition:background 0.3s;
    }

.nav a:hover {
        background:rgba(255,255,255,0.2);
    }

/* Hamburger menu for mobile */
    .hamburger {
        display:none;
        flex-direction:column;
        cursor:pointer;
        position:relative;
        z-index:3; 
    }
    .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);
    }

/* Overlay navigation */
    .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;
        text-decoration:none;
    }
    .nav-overlay a:hover {
        color:yellow;
    }

@media (max-width:768px) {
        .nav {
            display:none;
        }
        .hamburger {
            display:flex;
        }
    }

/* News Flash */
    .news-flash {
        background-color:red;
        color:white;
        text-align:center;
        padding:10px 0;
        border-radius:10px;
        box-shadow:0 4px 14px rgba(0,0,0,0.1);
        margin:20px 0;
    }

.compare-sar-container {
        background:rgba(255,255,255,0.9);
        border-radius:10px;
        box-shadow:0 4px 14px rgba(0,0,0,0.1);
        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;
        border-radius:5px;
        font-weight:bold;
        transition:background-color 0.3s;
    }

.navigation-buttons button:hover {
        background-color:#218838;
    }

.current-test-position {
        background-color: red;
        color: yellow;
        padding: 10px;
        border-radius: 5px;
        font-size: 18px;
        font-weight:bold;
    }

.brand-dropdown,
    .release-year-dropdown,
    .test-position-dropdown {
        margin:10px 0;
    }

label {
        font-weight:bold;
        margin-right:10px;
    }

select {
        padding:10px;
        font-size:16px;
        border-radius:5px;
        border:1px solid #ccc;
    }

table {
        width:100%;
        margin-top:20px;
        border-collapse:collapse;
    }

th, td {
        border:1px solid #ccc;
        padding:10px;
        text-align:center;
        font-size:0.9rem;
    }

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;
        border-radius:5px;
        box-shadow:0 2px 5px rgba(0,0,0,0.1);
    }

.compare-button {
        background-color:blue;
        color:white;
        border:none;
        padding:5px 10px;
        cursor:pointer;
        margin-top:5px;
        border-radius:5px;
        font-size:0.9rem;
    }

.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;
        font-size:1.4rem;
        color:#222;
    }

/* Adjust for mobile */
    @media (max-width:600px) {
        td, th {
            font-size:0.8rem;
            padding:8px;
        }
        .phone-name-image-container img {
            width:50px;
        }
        .navigation-buttons button {
            padding:8px 15px;
            font-size:0.8rem;
        }
        .current-test-position {
            font-size:16px;
        }
        label {
            font-size:0.9rem;
        }
    }
</style>
</head>
<body>
<div class="wrapper">
    <header class="header">

<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>
    </header>

<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>
</div>

linksToUpdate.forEach(link => {
        const element = document.getElementById(link.id);
        if (firstPid) {
            element.href = `${link.url}?pid=${firstPid}`;
        } else {
            element.href = link.url;
        }
    });

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

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 => {
            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<br>
                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;

if (urlPid) {
                const targetElement = document.getElementById(urlPid);
                if (targetElement) {
                    setTimeout(() => {
                        window.scrollTo({
                            top: targetElement.getBoundingClientRect().top + window.pageYOffset - 100,
                            behavior: 'smooth'
                        });
                    }, 100);
                }
            }
        } else {
            sarRankingTable.innerHTML = '<p>No data available for the selected filters.</p>';
        }
    }
});
</script>
</body>
</html>

Site Builder

Editing: compare-sar-rank2.html

Site Builder