incidents.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SnapSafe - Privacy Incidents</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="technical.css">
    <link rel="stylesheet" href="news-card.css">
    <script defer src="https://umami.grendelsdomain.com/script.js" data-website-id="f3ed202d-4c07-4fd6-8bb8-1336094e1402"></script>
</head>
<body>
    <header>
        <div class="container header-nav">
            <a href="index.html" class="home-link"><img src="images/icon.png" alt="" class="home-link-icon">SnapSafe</a>
        </div>
        <div class="hero">
            <h1>Privacy Incidents</h1>
            <p>Real-world examples of why your photos need protection</p>
        </div>
    </header>

    <div class="container">
        <section class="news-stories">
            <h2>Digital Privacy Incidents</h2>
            <p>These recent headlines demonstrate the importance of protecting your personal photos and visual privacy in today's digital world:</p>

            <div id="incidents-grid" class="news-grid">
                <!-- News cards will be dynamically generated by JavaScript -->
            </div>
        </section>

        <div class="tech-highlight" style="text-align: center; margin-top: 3rem;">
            <h3>Your Photos, Your Privacy, Your Control</h3>
            <p>SnapSafe was built with one mission: to give you complete control over your visual privacy. In a world where photos are increasingly <strong>valuable</strong>, they are also increasingly <strong><em>vulnerable</em></strong>. We believe everyone deserves a truly secure solution.</p>
            <a href="index.html" class="cta-button">Return to Home</a>
        </div>
    </div>

    <footer>
        <div class="footer-links">
            <a href="index.html">Home</a>
            <a href="security.html">Security Details</a>
            <a href="technical.html">Technical Details</a>
            <a href="privacy.html">Privacy Policy</a>
            <a href="https://github.com/SecureCamera">GitHub</a>
            <a href="mailto:darkrockstudios@gmail.com">Contact</a>
        </div>
        <p>&copy; 2025 SnapSafe. All rights reserved.</p>
    </footer>

    <!-- Script to display all news incidents -->
    <script src="news_data.js"></script>
    <script>
        // Custom function to create a static news card without fade effects
        function createStaticNewsCard(news) {
            const card = document.createElement('a');
            card.href = news.link;
            card.className = 'news-card';
            // No opacity setting - cards will be visible immediately

            // Create header
            const header = document.createElement('div');
            header.className = 'news-header';

            // Set background image or color
            if (news.header_image) {
                header.style.backgroundImage = `url('${news.header_image}')`;
            } else {
                header.style.backgroundColor = '#f5f5f5'; // Default background for cards without header image
            }

            // Create logo
            const logo = document.createElement('div');
            logo.className = 'news-logo';

            const logoImg = document.createElement('img');
            logoImg.src = news.logo_image;
            logoImg.alt = `${news.title} Logo`;

            logo.appendChild(logoImg);
            header.appendChild(logo);

            // Create content
            const content = document.createElement('div');
            content.className = 'news-content';

            const title = document.createElement('h3');
            title.textContent = news.title;

            const description = document.createElement('p');
            description.textContent = news.description;

            content.appendChild(title);
            content.appendChild(description);

            // Assemble card
            card.appendChild(header);
            card.appendChild(content);

            return card;
        }

        document.addEventListener('DOMContentLoaded', () => {
            const incidentsGrid = document.getElementById('incidents-grid');

            // Clear any existing content
            incidentsGrid.innerHTML = '';

            // Generate a static card for each news item in the newsData array
            newsData.forEach(news => {
                const card = createStaticNewsCard(news);
                incidentsGrid.appendChild(card);
            });
        });
    </script>
</body>
</html>