Site Builder

Editing: indexok.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 Index</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: white;
            padding: 10px 20px;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        .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;
        }
        .category-list {
            margin: 20px;
        }
        .brand-category {
            margin-bottom: 20px;
        }
        .brand-category h2 {
            color: #0056b3;
        }
        .brand-category ul {
            list-style-type: none;
            padding: 0;
        }
        .brand-category ul li {
            margin: 5px 0;
        }
        .brand-category ul li a {
            text-decoration: none;
            color: #000;
        }
        .menu-button {
            display: none;
            background-color: #0056b3;
            color: white;
            padding: 5px;
            border: none;
            cursor: pointer;
            position: relative;
            z-index: 2;
        }
        .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;
            }
        }
        .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="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" 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="category-list"></div>
</div>

document.addEventListener("DOMContentLoaded", function() {
    const urlPathArray = window.location.pathname.split('/');
    const folderPath = urlPathArray.slice(1, urlPathArray.length - 1).join('/');
    const basePath = `${window.location.origin}/${folderPath}/`;
    const cacheFile = '/cache/sar2_cache.json';  // Update with your actual path

fetch(cacheFile)
        .then(response => response.json())
        .then(phoneData => {
            const brands = {};

// Create brand and model structure
            phoneData.forEach(phone => {
                const brand = phone.brand.toLowerCase().replace(/\s+/g, '-');
                const model = phone.model.toLowerCase().replace(/\s+/g, '-');
                if (!brands[brand]) {
                    brands[brand] = [];
                }
                brands[brand].push(model);
            });

const brandSelect = document.getElementById('sar2-brand-select');
            const modelSelect = document.getElementById('sar2-model-select');
            const modelDropdownWrapper = document.getElementById('model-dropdown-wrapper');
            const categoryList = document.getElementById('category-list');

// Populate brand dropdown and ensure Apple is first
            const sortedBrands = Object.keys(brands).sort((a, b) => a === 'apple' ? -1 : b === 'apple' ? 1 : a.localeCompare(b));
            sortedBrands.forEach(brand => {
                const option = document.createElement('option');
                option.value = brand;
                option.text = capitalize(brand.replace(/-/g, ' '));
                brandSelect.appendChild(option);
            });

// Update models when brand changes
            brandSelect.addEventListener('change', function() {
                const selectedBrand = brandSelect.value;
                modelSelect.innerHTML = '<option value="">Select Model</option>';
                if (selectedBrand && brands[selectedBrand]) {
                    naturalSort(brands[selectedBrand]).forEach(function(model) {
                        const option = document.createElement('option');
                        option.value = `${selectedBrand}-${model}`;
                        option.textContent = model.replace(/-/g, ' ');
                        modelSelect.appendChild(option);
                    });
                    modelDropdownWrapper.style.display = 'block';
                } else {
                    modelDropdownWrapper.style.display = 'none';
                }
            });

// Redirect to the selected model's page when model changes
            modelSelect.addEventListener('change', function() {
                const selectedOption = modelSelect.value;
                if (selectedOption) {
                    window.location.href = basePath + selectedOption + '/';
                }
            });

// Generate category list
            let htmlContent = '';
            sortedBrands.forEach(brand => {
                htmlContent += `<div class="brand-category">
                    <h2>${capitalize(brand.replace(/-/g, ' '))}</h2>
                    <ul>`;
                naturalSort(brands[brand]).forEach(model => {
                    htmlContent += `<li><a href="${basePath + brand + '-' + model}/">${capitalize(model.replace(/-/g, ' '))} Phone Specs</a></li>`;
                });
                htmlContent += '</ul></div>';
            });
            categoryList.innerHTML = htmlContent;

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

</body>
</html>

Site Builder

Editing: indexok.html

Site Builder