Site Builder

Editing: comparclosee-kids.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>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;
        }
        .news-flash {
            background-color: red;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
        .compare-sar-container {
            padding: 20px;
        }
        .sar-table {
            font-size: 16px !important;
            font-weight: bold !important;
            border-collapse: collapse !important;
            width: 100% !important;
            table-layout: fixed;
        }
        .sar-table th,
        .sar-table td {
            text-align: center !important;
            border: 1px solid #ddd !important;
            padding: 15px !important;
            font-weight: bold !important;
        }
        .sar-table tr:nth-child(even) {
            background-color: #f2f2f2 !important;
            font-weight: bold !important;
        }
        .sar-value-higher {
            background-color: red !important;
            color: white !important;
            font-weight: bold !important;
        }
        .sar-value-lower {
            background-color: green !important;
            color: white !important;
            font-weight: bold !important;
        }
        th {
            background-color: black !important;
            color: white !important;
            font-weight: bold !important;
            text-align: center !important;
        }
        .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;
            }
        }
        .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-image-container {
            position: relative;
            display: inline-block;
            margin: 0 auto;
            width: 100px; /* Adjust the width for the images */
            height: 150px; /* Adjust the height for the images */
        }
        .sar-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .background-fill {
            position: absolute;
            width: 100%;
            bottom: 0;
            background-color: red;
            opacity: 0.3; /* Make the background fill semi-transparent */
        }
        .thermometer {
            position: relative;
            width: 50px;
            height: 200px;
            margin: 20px auto;
            border: 2px solid #ccc;
            border-radius: 25px;
            background: linear-gradient(to top, red, yellow);
        }
        .thermometer .fill {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 0;
            background: red;
            border-radius: 25px;
        }
        .thermometer .percent {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            font-weight: bold;
            color: white;
        }
    </style>
</head>
<body>

<div class="compare-sar-container">
    <div class="blurb">
        <p><strong>W/WO WiFi SAR Comparison Tool!</strong></p>
        <p>This tool allows you to see how turning off Wi-Fi and Bluetooth on your phone can significantly reduce your exposure to radiation. Select your phone’s brand and model from the dropdown menus to compare the Specific Absorption Rate (SAR) levels when your phone is used in cellular-only mode versus simultaneous use with Wi-Fi and Bluetooth. Discover how you can lower RF radiation exposure by optimizing your phone’s settings. Try it now to make your phone usage safer!</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"></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>

document.addEventListener("DOMContentLoaded", function() {
        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);
                        }
                    });

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);
                    document.getElementById('copy-link-container').style.display = 'block';
                }

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

const percentHead = calcPercentDifference(ushead, simulheadus);
                    const percentBody = calcPercentDifference(usbody, simulbodyus);

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

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

function calcPercentDifference(value1, value2) {
                    if (value1 && value2) {
                        return Math.abs(((value1 - value2) / value2) * 100).toFixed(1);
                    }
                    return 'N/A';
                }

function capitalize(string) {
                    return string.charAt(0).toUpperCase() + string.slice(1);
                }
            });
    });
</script>

</body>
</html>

Site Builder

Editing: comparclosee-kids.php

Site Builder