Site Builder

Editing: indexhmmm.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 Specifications</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;
        }
        .specs-container {
            padding: 20px;
        }
        .specs-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .specs-table th, .specs-table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        .specs-table th {
            background-color: #000;
            color: #fff;
            font-weight: bold;
        }
        .spec-group-title {
            background-color: #0073aa;
            color: white;
            padding: 10px;
            text-align: left;
            font-size: 18px;
        }
        .review-summary {
            display: none;
        }
        .review-summary p {
            display: inline;
        }
        .review-summary a {
            color: #0056b3;
            cursor: pointer;
            text-decoration: underline;
        }
    </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="specs-container">
    <h1 id="phone-title">Phone Specifications</h1>
    <table class="specs-table" id="specs-table">
        <tbody>
        </tbody>
    </table>
</div>

// Extract the brand and model from the URL path
    const pathArray = window.location.pathname.split('/');
    const phoneSlug = pathArray[pathArray.length - 2]; // Get the second last segment which is the phone folder name

// Construct the JSON file path
    const jsonFilePath = `${phoneSlug}_cache.json`;

// Fetch and display phone specs
    fetch(jsonFilePath)
        .then(response => response.json())
        .then(data => {
            // Set the phone title
            const phoneName = phoneSlug.replace(/-/g, ' ').toUpperCase();
            phoneTitle.textContent = phoneName + ' Specifications';

// Populate the table with specs
            for (const group in data) {
                // Add group title row
                const groupRow = document.createElement('tr');
                const groupCell = document.createElement('td');
                groupCell.setAttribute('colspan', 2);
                groupCell.className = 'spec-group-title';
                groupCell.innerHTML = `<h2>${group}</h2>`;
                groupRow.appendChild(groupCell);
                specsTableBody.appendChild(groupRow);

// Add individual specs
                for (const spec in data[group]) {
                    // Add spec label row
                    const specLabelRow = document.createElement('tr');
                    const specLabelCell = document.createElement('th');
                    specLabelCell.setAttribute('colspan', 2);
                    specLabelCell.textContent = spec;
                    specLabelRow.appendChild(specLabelCell);
                    specsTableBody.appendChild(specLabelRow);

// Add spec value row
                    const specValueRow = document.createElement('tr');
                    const specValueCell = document.createElement('td');
                    specValueCell.setAttribute('colspan', 2);

let value = data[group][spec];

if (value.length > 500) {
                        const shortValue = value.substring(0, 500) + '... ';
                        const fullValue = value;
                        const summary = document.createElement('div');
                        summary.className = 'review-summary';
                        summary.style.display = 'block';
                        summary.innerHTML = `<p>${shortValue.replace(/<br\s*\/?>/gi, '\n').replace(/\n/g, '<br>')}<a onclick="toggleReview(this)">Continue reading</a></p>`;
                        const fullReview = document.createElement('div');
                        fullReview.className = 'review-summary';
                        fullReview.style.display = 'none';
                        fullReview.innerHTML = `<p>${fullValue.replace(/<br\s*\/?>/gi, '\n').replace(/\n/g, '<br>')}<a onclick="toggleReview(this)"> Show less</a></p>`;
                        specValueCell.appendChild(summary);
                        specValueCell.appendChild(fullReview);
                    } else {
                        specValueCell.innerHTML = value.replace(/<br\s*\/?>/gi, '\n').replace(/\n/g, '<br>');
                    }

specValueRow.appendChild(specValueCell);
                    specsTableBody.appendChild(specValueRow);
                }
            }
        })
        .catch(error => {
            specsTableBody.innerHTML = '<tr><td colspan="2">Error loading specifications. Please try again later.</td></tr>';
        });
});

function toggleReview(link) {
    const summary = link.parentElement.parentElement;
    const fullReview = summary.nextElementSibling;

if (summary.style.display === 'block') {
        summary.style.display = 'none';
        fullReview.style.display = 'block';
    } else {
        summary.style.display = 'block';
        fullReview.style.display = 'none';
    }
}
</script>

</body>
</html>

Site Builder

Editing: indexhmmm.html

Site Builder