Site Builder

Editing: compare-vvvvvvvvvvvkids.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;
        }
        .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;
        }
        .sar-table {
            font-size: 16px !important;
            font-weight: bold !important;
            border-collapse: collapse !important;
            width: 100% !important;
        }
        .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;
        }
        .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: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }
        .sar-image-container img {
            max-width: 100%;
            height: auto;
        }
        .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;
        }
        .background-fill {
            position: absolute;
            width: 100%;
            height: 100%;
            background: red;
            opacity: 0.5;
        }
    </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>
</div>

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

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

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 headBgHeight = (ushead / 1.6) * 100;
                    const simulHeadBgHeight = (simulheadus / 1.6) * 100;
                    const bodyBgHeight = (usbody / 1.6) * 100;
                    const simulBodyBgHeight = (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 capitalize(string) {
                    return string.charAt(0).toUpperCase() + string.slice(1);
                }
            });
    });
</script>

</body>
</html>

Site Builder

Editing: compare-vvvvvvvvvvvkids.php

Site Builder