Site Builder

Editing: index-phones-list.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;
        }
        .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;
        }
        .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;
            }
        }
    </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>
    <button class="menu-button" onclick="toggleMenu()">
        <div></div>
        <div></div>
        <div></div>
    </button>
    <div class="nav-overlay" id="nav-overlay">
        <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>
        <button onclick="toggleMenu()">Close</button>
    </div>
</div>

<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 phonesDir = '/phones/';
    const cacheFile = 'https://www.rfsafe.com/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 = phonesDir + selectedOption + '/index.html';
                }
            });

// 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="${phonesDir + brand + '-' + model}/index.html">${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: index-phones-list.html

Site Builder