Site Builder

Editing: compare-sar.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 Spec 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 {
            display: flex;
            flex-direction: column;
            align-items: center;
            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;
        }
        .selected-phones {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
        }
        .selected-phone {
            background-color: #f1f1f1;
            padding: 10px;
            margin: 5px;
            border-radius: 5px;
            display: flex;
            align-items: center;
        }
        .selected-phone span {
            margin-left: 10px;
            cursor: pointer;
        }
        #limit-message {
            color: red;
            font-weight: bold;
            margin-top: 10px;
            display: none;
        }
        .button-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
            display: none; /* Initially hidden */
        }
        .button {
            padding: 10px 20px;
            background-color: #0073aa;
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .unique-sar-green {
            background-color: #90EE90 !important; /* Light green */
        }
        .unique-sar-light-red {
            background-color: #FFB6C1 !important; /* Light pink */
        }
        .unique-sar-lighter-red {
            background-color: #FF7F7F !important; /* Lighter red */
        }
        .unique-sar-dark-red {
            background-color: #FF6347 !important; /* Dark red */
        }
        .unique-sar-gray {
            background-color: #d3d3d3 !important; /* Light gray */
            font-weight: bold;
        }
        .unique-sar-tie {
            background-color: #ffa07a !important; /* Light salmon */
        }
        .unique-compare-column {
            display: flex;
            justify-content: space-around;
            flex-wrap: nowrap;
            overflow-x: auto;
            padding: 20px;
        }
        .unique-product {
            text-align: center;
            margin: 10px;
            min-width: 200px;
        }
        .unique-comp-title {
            font-size: 16px;
            font-weight: bold;
        }
        .unique-comp-thumb {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }
        .unique-product p {
            font-size: 14px;
            color: #333;
        }
        .unique-product-title {
            font-size: 14px;
            color: #333;
            margin-top: 10px;
        }
        .unique-product-size {
            font-size: 14px; /* Increased font size */
            font-weight: bold; /* Bold font */
            color: #555;
            margin-top: 10px;
        }
        .unique-product-price {
            color: #FF0000;
            font-weight: bold;
            margin-top: 5px;
        }
        .unique-sar-table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        .unique-sar-table th,
        .unique-sar-table td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
            width: calc(100% / var(--num-phones)); /* Set cell width based on the number of phones */
        }
        .unique-sar-table th {
            background-color: #f0f0f0;
        }
        h3.unique-compare-heading {
            text-align: center;
            margin-top: 20px;
        }
        .unique-compare-sar-label {
            font-weight: bold;
            text-align: center;
            background-color: #f9f9f9;
        }
        .unique-compare-sar-value-higher {
            background-color: #ffcccc; /* Light red */
        }
        .unique-compare-sar-value-lower {
            background-color: #ccffcc; /* Light green */
        }
        .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;
        }
        .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;
            }
        }

.full-specs-container {
            padding: 20px;
        }

.full-specs-table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
            padding: 20px; /* Add padding to the table itself */
        }

.full-specs-table th,
        .full-specs-table td { 
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
            width: calc(100% / var(--num-phones)); /* Set cell width based on the number of phones */
        }

.full-specs-label {
            background-color: #0073aa;
            color: white;
            text-align: left;
            padding: 10px;
            font-size: 18px;
        }
        .phone-header-row th {
            background-color: #000;
            color: white;
        }
        .error-message {
            color: red;
            text-align: center;
            font-size: 18px;
            margin-bottom: 20px;
        }
        h2.main-group-label {
            color: white;
            background-color: #0073aa;
            padding: 10px;
            margin: 0;
        }
        .rf-safe-logo {
            font-family: 'Arial', sans-serif;
            font-weight: bold;
            font-size: 24px; /* Smaller font size */
            color: #0056b3;
            text-transform: uppercase;
            letter-spacing: 1px; /* Adjusted letter spacing */
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Smaller shadow */
            background: linear-gradient(to right, #0056b3, #00bfff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            padding: 5px 10px; /* Smaller padding */
            border: 1px solid #0056b3; /* Smaller border */
            border-radius: 3px; /* Smaller border radius */
        }

.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/">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="/phones/spot-fake-anti-radiation-emf-blocking-phone-cases.html">Fake Protection</a>
        <a id="real-protection-link" href="/phones/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/">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="/phones/spot-fake-anti-radiation-emf-blocking-phone-cases.html">Fake Protection</a>
        <a id="overlay-real-protection-link" href="/phones/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">
    <h3 class="unique-compare-heading" id="compare-heading">Select Phones to Compare</h3>
    <div id="limit-message">You have reached the maximum number of phones for comparison.</div>
    <div class="selected-phones" id="sar2-selected-phones"></div>
    <div class="compare-sar-dropdown-container">
        <div class="dropdown-wrapper">
            <label for="sar2-brand-select">Compare Phones</label>
            <select id="sar2-brand-select">
                <option value="">Select Brand</option>
            </select>
        </div>
        <div class="dropdown-wrapper" id="model-dropdown-wrapper" style="display: none;">
            <label for="sar2-model-select">Select Model</label>
            <select id="sar2-model-select">
                <option value="">Select Model</option>
            </select>
        </div>
    </div>
    <div id="sar2-shortcode-display" style="margin-top: 20px; font-weight: bold;"></div>
    <div class="button-container" id="button-container">
        <button id="clear-cookie-button" class="button">Clear Selection</button>
        <button id="compare-more-specs-button" class="button">Compare 49 More Specs</button>
    </div>
    <div id="full-specs-container" style="display:none;"></div>
    <div class="copy-link-container" id="copy-link-container">
        <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 currentPath = window.location.pathname;
    const basePath = currentPath.substring(0, currentPath.lastIndexOf('/'));

// Load the JSON data
    fetch('/cache/sar2_cache.json')
        .then(response => response.json())
        .then(phoneData => {
            initializePage(phoneData);
            handleUrlParams(phoneData);  // Move this call after function definition
        });

const brandSelect = document.getElementById('sar2-brand-select');
        const modelSelect = document.getElementById('sar2-model-select');
        const selectedPhonesDiv = document.getElementById('sar2-selected-phones');
        const shortcodeDisplay = document.getElementById('sar2-shortcode-display');
        const limitMessage = document.getElementById('limit-message');
        const clearButton = document.getElementById('clear-cookie-button');
        const copyLinkInput = document.getElementById('copy-link');
        const copyLinkContainer = document.getElementById('copy-link-container');
        const copyLinkUrl = document.getElementById('copy-link-url');
        const copyButton = document.getElementById('copy-button');
        const compareMoreSpecsButton = document.getElementById('compare-more-specs-button');
        const fullSpecsContainer = document.getElementById('full-specs-container');
        const errorMessageDiv = document.getElementById('error-message');
        const compareHeading = document.getElementById('compare-heading');
        const buttonContainer = document.getElementById('button-container');

let selectedPhones = [];
        const phoneLimit = window.innerWidth <= 768 ? 2 : 4;

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

brandSelect.addEventListener('change', updateModels);
        modelSelect.addEventListener('change', function() {
            addPhone(modelSelect.value);
        });
        clearButton.addEventListener('click', clearSelection);
        copyButton.addEventListener('click', copyLink);
        compareMoreSpecsButton.addEventListener('click', toggleFullSpecs);

function isPhoneSelected(postId) {
            return selectedPhones.some(phone => phone.post_id == postId);
        }

function removePhone(index) {
            selectedPhones.splice(index, 1);
            updateSelectedPhonesDisplay();
            updateShortcode();
            updateModels();
            updateHeading();
            updateButtons();
            limitMessage.textContent = '';
            limitMessage.style.display = 'none';
            if (fullSpecsContainer.style.display === 'block') {
                loadFullSpecs(); // Update full specs table if visible
            }
        }

function updateHeading() {
            const titles = selectedPhones.map(phone => phone.brand + ' ' + phone.model);
            compareHeading.textContent = titles.length ? titles.join(' vs ') : 'Select Phones to Compare';
        }

function updateButtons() {
            buttonContainer.style.display = selectedPhones.length ? 'flex' : 'none';
        }

function renderShortcode(pids) {
            const pidArray = pids.split('-');
            const compList = pidArray.map(pid => phoneData.find(phone => phone.post_id == pid));
            const phoneTitles = compList.map(phone => `${phone.brand} ${phone.model}`);
            const ptitle = phoneTitles.join(' vs ');

const numPhones = compList.length; // Number of phones being compared

shortcodeDisplay.innerHTML = comparisonHtml;
            applyColorCoding(compList.length);
        }

function getSarLabel(type) {
            const labels = {
                '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)'
            };
            return labels[type] || type;
        }

function applyColorCoding(compCount) {
            const rows = document.querySelectorAll('.unique-sar-table tbody tr:nth-child(2n)');
            rows.forEach(row => {
                const cells = Array.from(row.querySelectorAll('td[data-value]'));
                const values = cells.map(cell => parseFloat(cell.dataset.value));
                const minValue = Math.min(...values);
                const maxValue = Math.max(...values);

cells.forEach(cell => {
                    const value = parseFloat(cell.dataset.value);
                    if (compCount === 1) {
                        cell.classList.add('unique-sar-gray');
                    } else if (value === minValue && values.filter(v => v === minValue).length === 1) {
                        cell.classList.add('unique-sar-green');
                    } else if (value === maxValue && values.filter(v => v === maxValue).length === 1) {
                        cell.classList.add('unique-sar-dark-red');
                    } else if (value === minValue && values.filter(v => v === minValue).length > 1) {
                        cell.classList.add('unique-sar-tie');
                    } else if (value === maxValue && values.filter(v => v === maxValue).length > 1) {
                        cell.classList.add('unique-sar-tie');
                    } else {
                        const rank = values.sort((a, b) => a - b).indexOf(value);
                        if (rank === 1) {
                            cell.classList.add('unique-sar-light-red');
                        } else {
                            cell.classList.add('unique-sar-lighter-red');
                        }
                    }
                });
            });
        }

function clearSelection() {
            selectedPhones = [];
            updateSelectedPhonesDisplay();
            shortcodeDisplay.textContent = 'No phones selected for comparison.';
            compareHeading.textContent = 'Select Phones to Compare';
            buttonContainer.style.display = 'none'; // Hide the buttons
            limitMessage.textContent = '';
            limitMessage.style.display = 'none';
            copyLinkInput.value = '';
            copyLinkContainer.style.display = 'none';
            fullSpecsContainer.style.display = 'none'; // Hide the full specs table
        }

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

function handleUrlParams(phoneData) {
            const urlParams = new URLSearchParams(window.location.search);
            const pid = urlParams.get('pid');
            const pos = urlParams.get('pos');
            const initialPhones = pid ? pid.split('-') : pos ? pos.split('-') : [];

console.log('URL Params:', { pid, pos, initialPhones }); // Debugging line

if (initialPhones.length > 0) {
                initialPhones.forEach(postId => {
                    const phone = phoneData.find(p => p.post_id == postId);
                    if (phone) {
                        console.log('Adding phone:', phone); // Debugging line
                        selectedPhones.push(phone);
                    } else {
                        const missingPhone = phoneData.find(p => p.post_id == postId);
                        if (!missingPhone) {
                            errorMessageDiv.textContent = `Missing Data For Phone with Post ID: ${postId}`;
                            errorMessageDiv.style.display = 'block';
                        }
                    }
                });
                updateSelectedPhonesDisplay();
                updateShortcode();
                updateHeading();
                updateButtons();
            }
        }

function copyLink() {
            copyLinkInput.select();
            document.execCommand('copy');
        }

function loadFullSpecs() {
            fullSpecsContainer.innerHTML = '<p>Loading full specs...</p>';

Promise.all(selectedPhones.map(phone => {
                const slug = `${phone.brand.toLowerCase().replace(/\s+/g, '-')}-${phone.model.toLowerCase().replace(/\s+/g, '-')}`;
                const jsonFilePath = `${basePath}/${slug}/${slug}_cache.json`;
                return fetch(jsonFilePath)
                    .then(response => response.json())
                    .catch(error => {
                        console.error('Error fetching JSON:', error);
                        return null; // Return null if fetch fails
                    });
            })).then(specsData => {
                const combinedSpecs = combineSpecs(specsData);
                renderFullSpecsTable(combinedSpecs);
            }).catch(error => {
                fullSpecsContainer.innerHTML = '<p>Failed to load full specs.</p>';
            });
        }

function renderFullSpecsTable(combinedSpecs) {
            let html = '<table class="full-specs-table"><thead>';
            html += '<tr>' + selectedPhones.map(phone => `<th>${phone.brand} ${phone.model}</th>`).join('') + '</tr>';
            html += '</thead><tbody>';

for (const group in combinedSpecs) {
                html += `<tr><td colspan="${selectedPhones.length}" class="full-specs-label"><h2 class="main-group-label">${group}</h2></td></tr>`;
                html += '<tr class="phone-header-row">' + selectedPhones.map(phone => `<th>${phone.brand} ${phone.model}</th>`).join('') + '</tr>';
                for (const spec in combinedSpecs[group]) {
                    if (spec.endsWith('Review')) continue;
                    html += `<tr><td colspan="${selectedPhones.length}" class="full-specs-label">${group} ${spec}</td></tr>`;
                    html += '<tr>' + combinedSpecs[group][spec].map(value => `<td>${value}</td>`).join('') + '</tr>';
                }
            }

html += '</tbody></table>';
            fullSpecsContainer.innerHTML = html;
        }

handleUrlParams(phoneData);  // Ensure this is called after the function definition

// Initial check to set the heading and button display
        updateHeading();
        updateButtons();
    }
});
</script>

</body>
</html>

Site Builder

Editing: compare-sar.html

Site Builder