Site Builder

Editing: cell-phone-radiation-kids-update.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>Phone SAR Comparison</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .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;
        }
        .compare-sar-dropdown-container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .compare-sar-dropdown-container .dropdown-wrapper {
            width: 48%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .compare-sar-dropdown-container select {
            width: 100%;
            background-color: #f7f7f7;
            text-transform: capitalize;
            font-size: 16px;
            padding: 10px;
        }
        .copy-link-container {
            text-align: center;
            margin-top: 20px;
            display: none;
        }
        .copy-link-container input {
            width: 300px;
            padding: 10px;
            font-size: 16px;
        }
        .copy-link-container button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
        }
        .sar-summary-container {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
        }
        .sar-group {
            position: relative;
            width: 48%;
            margin-bottom: 20px;
        }
        .sar-image-container {
            position: relative;
            width: 100%;
            height: auto;
        }
        .sar-image-container img {
            max-width: 100%;
            height: auto;
        }
        .background-fill {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: red;
            opacity: 1;
            z-index: -1;
        }
        .sar-group h3 {
            text-align: center;
        }
        .sar-group p {
            text-align: center;
        }
        @media screen and (max-width: 768px) {
            .sar-summary-container {
                flex-direction: column;
            }
            .sar-group {
                width: 100%;
            }
        }
        .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 class="compare-sar-container">
    <div class="blurb">
        <p><strong>Kids & Cell Phone Radiation</strong></p>
        <p>Understand <a id="brand-model-link" href="#">$brand $model</a> risks from cell phone radiation with our SAR Exposure Awareness Tools. This essential tool reveals how Specific Absorption Rate (SAR) levels affect different age groups, especially children with thinner skulls and developing brains. Given the FCC's outdated SAR guidelines, it's more important than ever to visualize these impacts. Use this tool to compare SAR levels in various phone models, helping you minimize exposure and protect your family. <a href="phone-radiation-safety-information.html">Explore how turning off Wi-Fi and Bluetooth can significantly reduce radiation risks.</a> Stay informed and be RF Safe to be sure!.</p>
    </div>

<div class="compare-sar-dropdown-container">
        <div class="dropdown-wrapper">
            <label for="sar2-brand-select">Select Brand</label>
            <select id="sar2-brand-select">
                <option value="">Select Brand</option>
            </select>
        </div>
        <div class="dropdown-wrapper">
            <label for="sar2-model-select">Select Model</label>
            <select id="sar2-model-select">
                <option value="">Select Model</option>
            </select>
        </div>
    </div>

<div id="sar-comparison-container" class="sar-summary-container"></div>
    <div class="copy-link-container" id="copy-link-container" style="display:none;">
        <p><a href="#" id="copy-link-url">This phone comparison is saved here:</a></p>
        <input type="text" id="copy-link" readonly>
        <button id="copy-button">Click to Copy Link</button>
    </div>
</div>

<div class="footer">
    RF Safe In loving memory of Angel Leigh Coates and many others. <a href="https://www.rfsafe.com">Learn more</a>
</div>

const urlParams = new URLSearchParams(window.location.search);
        const pid = urlParams.get('pid');

fetch('/cache/sar2_cache.json')
            .then(response => response.json())
            .then(phoneData => {
                initializePage(phoneData);

if (pid) {
                    const phone = phoneData.find(p => p.post_id == pid);
                    if (phone) {
                        autoSelectPhone(phone, phoneData);
                        displayPhoneComparison(phone);
                        updateCopyLink(phone.post_id);
                    } else {
                        document.getElementById('sar-comparison-container').innerHTML += '<p>Invalid phone ID.</p>';
                    }
                } else {
                    const currentPath = window.location.pathname.split('/');
                    const slug = currentPath[currentPath.length - 2];
                    const matchedPhone = phoneData.find(p => (p.brand + ' ' + p.model).toLowerCase().replace(/ /g, '-') === slug);

if (matchedPhone) {
                        autoSelectPhone(matchedPhone, phoneData);
                        displayPhoneComparison(matchedPhone);
                    } else {
                        document.getElementById('sar-comparison-container').innerHTML += '<p>No matching phone model found in the directory name.</p>';
                    }
                }

const brandSelect = document.getElementById('sar2-brand-select');
                    const modelSelect = document.getElementById('sar2-model-select');

for (const brand in brands) {
                        const option = document.createElement('option');
                        option.value = brand;
                        option.text = capitalize(brand);
                        brandSelect.appendChild(option);
                    }

brandSelect.addEventListener('change', (event) => {
                        const selectedBrand = event.target.value;
                        modelSelect.innerHTML = '<option value="">Select Model</option>';

if (selectedBrand) {
                            const models = brands[selectedBrand];
                            models.forEach(phone => {
                                const option = document.createElement('option');
                                option.value = phone.post_id;
                                option.text = phone.model;
                                modelSelect.appendChild(option);
                            });
                        }
                    });

modelSelect.addEventListener('change', (event) => {
                        const selectedModel = event.target.value;
                        if (selectedModel) {
                            const phone = phoneData.find(p => p.post_id == selectedModel);
                            displayPhoneComparison(phone);
                            updateCopyLink(selectedModel);
                            updateBlurbLink(phone.brand, phone.model);
                        }
                    });

document.getElementById('copy-button').addEventListener('click', () => {
                        const copyLinkInput = document.getElementById('copy-link');
                        copyLinkInput.select();
                        document.execCommand('copy');
                    });
                }

function autoSelectPhone(phone, phoneData) {
                    const brandSelect = document.getElementById('sar2-brand-select');
                    const modelSelect = document.getElementById('sar2-model-select');

brandSelect.value = phone.brand;
                    modelSelect.innerHTML = '<option value="">Select Model</option>';

const models = phoneData.filter(p => p.brand === phone.brand);
                    models.forEach(p => {
                        const option = document.createElement('option');
                        option.value = p.post_id;
                        option.text = p.model;
                        modelSelect.appendChild(option);
                    });

modelSelect.value = phone.post_id;
                    displayPhoneComparison(phone);
                    updateCopyLink(phone.post_id);
                    updateBlurbLink(phone.brand, phone.model);
                    document.getElementById('copy-link-container').style.display = 'block';
                }

function displayPhoneComparison(phone) {
                    const {
                        brand,
                        model,
                        ushead,
                        usbody,
                        simulheadus,
                        simulbodyus
                    } = phone;

const headBgHeight = adjustHeight((ushead / 1.6) * 100);
                    const simulHeadBgHeight = adjustHeight((simulheadus / 1.6) * 100);
                    const bodyBgHeight = adjustHeight((usbody / 1.6) * 100);
                    const simulBodyBgHeight = adjustHeight((simulbodyus / 1.6) * 100);

const headRank = parseInt(phone.ushead_rank);
                    const simulHeadRank = parseInt(phone.simulheadus_rank);
                    const bodyRank = parseInt(phone.usbody_rank);
                    const simulBodyRank = parseInt(phone.simulbodyus_rank);

const sarComparisonContainer = document.getElementById('sar-comparison-container');
                    sarComparisonContainer.innerHTML = content;

document.getElementById('copy-link-container').style.display = 'block';
                }

function adjustHeight(height) {
                    if (height > adjustmentStartPercent) {
                        height -= adjustmentValue;
                    }
                    return height;
                }

Site Builder

Editing: cell-phone-radiation-kids-update.html

Site Builder