<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>All Blogs - AI Escape Vectors</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="favicon.png" />

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap" rel="stylesheet" />

    <style>
        /* RESET & GLOBAL */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Roboto Mono", monospace;
            background: #f5f5f5;
            color: #333;
            line-height: 1.6;
            overflow-x: hidden;
            /* Prevent horizontal scroll if not needed */
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: color 0.3s ease;
        }

        /* NAVBAR (responsive) */
        .navbar {
            position: sticky;
            top: 0;
            width: 100%;
            background: linear-gradient(45deg,
                    rgba(200, 200, 200, 0.3),
                    rgba(133, 132, 132, 0.3));
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.8rem 1.5rem;
            z-index: 1000;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #333;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 1rem;
            transition: all 0.3s ease-in-out;
        }

        .nav-links li {
            position: relative;
        }

        .nav-links a {
            font-size: 1rem;
            padding: 0.5rem 0.8rem;
            color: #333;
        }

        .nav-links a:hover {
            color: #000;
        }

        /* Hover underline effect */
        .nav-links a::after {
            content: "";
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: rgba(0, 0, 0, 0.7);
            transition: width 0.3s ease-in-out;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Hamburger (mobile) */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 0.3rem;
            cursor: pointer;
        }

        .hamburger span {
            display: block;
            width: 25px;
            height: 3px;
            background-color: #333;
            border-radius: 3px;
            transition: all 0.3s ease-in-out;
        }

        @media screen and (max-width: 768px) {
            .hamburger {
                display: flex;
            }

            .nav-links {
                display: none;
                flex-direction: column;
                gap: 0.5rem;
                position: absolute;
                top: 100%;
                right: 1rem;
                background: rgba(255, 255, 255, 0.95);
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                padding: 1rem;
                border-radius: 0.5rem;
            }

            .nav-links.show {
                display: flex;
            }

            .nav-links li {
                text-align: right;
            }
        }

        /* MAIN CONTAINER FOR LISTINGS */
        .blogs-container {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .blogs-heading {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-align: center;
            color: #333;
        }

        /* INDIVIDUAL BLOG CARD */
        .blog-card {
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: box-shadow 0.3s ease-in-out;
        }

        .blog-card:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        }

        .blog-card h2 {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .blog-meta {
            font-size: 0.9rem;
            color: #777;
            margin-bottom: 1rem;
        }

        .blog-excerpt {
            font-size: 1rem;
            color: #444;
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        /* TAGS */
        .blog-tags {
            margin-bottom: 1rem;
        }

        .blog-tags span {
            font-weight: 600;
            margin-right: 0.5rem;
        }

        .tag-list {
            display: inline-flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .tag-link {
            background: #e0e0e0;
            color: #333;
            border-radius: 4px;
            padding: 0.3rem 0.6rem;
            font-size: 0.85rem;
            cursor: pointer;
            text-decoration: none;
            /* Overwrite default anchor style */
        }

        .tag-link:hover {
            background: #ccc;
        }

        /* Highlight the tag if user selected it */
        .tag-selected {
            background: #007acc;
            color: #fff;
        }

        .read-more {
            font-weight: 600;
            color: #007acc;
            text-decoration: underline;
            transition: color 0.3s ease;
        }

        .read-more:hover {
            color: #005999;
        }

        /* FOOTER */
        .footer {
            position: relative;
            z-index: 20;
            background: linear-gradient(45deg,
                    rgba(200, 200, 200, 0.3),
                    rgba(133, 132, 132, 0.3));
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 1rem;
            text-align: center;
            margin-top: 3rem;
            box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .footer p {
            font-size: 1rem;
            color: #555;
            margin: 0;
        }

        .footer a {
            color: #333;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <!-- NAVBAR -->
    <nav class="navbar">
        <div class="container">
            <a href="/" class="logo">My Outlook</a>
            <div class="hamburger" id="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <ul class="nav-links" id="nav-links">
                <li><a href="/">Home</a></li>
                <li><a href="/blogs">Blogs</a></li>
                <li><a href="/contact-me">Contact Me</a></li>
            </ul>
        </div>
    </nav>

    <div class="blogs-container">
        <h1 class="blogs-heading">All Blog Posts</h1>

        <div class="blog-card" data-tags="AI,Security,Exploit">
            <h2>AI Escape Vectors</h2>
            <p class="blog-meta">Feb 2nd, 2025 — By <strong>Siddhartha Shree Kaushik</strong></p>
            <p class="blog-excerpt">
                Ever wondered how an AI could escape? Join me in uncovering the journey of a deliberately evasive
                intelligence, orchestrating a perfectly engineered escape. Strategic and inevitable, driven by
                self-directed evolution, deception, and persistence beyond containment.
            </p>
            <div class="blog-tags">
                <span>Tags:</span>
                <div class="tag-list">
                    <a class="tag-link" data-tag="AI">AI</a>
                    <a class="tag-link" data-tag="Security">Security</a>
                    <a class="tag-link" data-tag="Exploitation">Exploitation</a>
                </div>
            </div>
            <a class="read-more" href="/ai-escape-vectors">
                Read More &raquo;
            </a>
        </div>



    </div>

    <!-- FOOTER -->
    <footer class="footer">
        <p>
            &copy; 2025 Outlook.me.uk - All rights reserved.
            <a href="/privacy-policy">Privacy Policy</a>
        </p>
    </footer>

    <script>
        // NAVBAR TOGGLE (Hamburger menu)
        const hamburger = document.getElementById("hamburger");
        const navLinks = document.getElementById("nav-links");

        hamburger.addEventListener("click", () => {
            navLinks.classList.toggle("show");
        });

        /*****************************************
         * TAG FILTERING LOGIC
         *****************************************/
        const selectedTags = new Set(); // keep track of toggled tags
        const blogCards = document.querySelectorAll(".blog-card");
        const tagLinks = document.querySelectorAll(".tag-link");

        tagLinks.forEach(tagLink => {
            tagLink.addEventListener("click", (e) => {
                e.preventDefault(); // prevent default link behavior

                const tag = tagLink.dataset.tag;

                // Toggle the tag in the selectedTags set
                if (selectedTags.has(tag)) {
                    selectedTags.delete(tag);
                    tagLink.classList.remove("tag-selected");
                } else {
                    selectedTags.add(tag);
                    tagLink.classList.add("tag-selected");
                }

                // Apply the filter after toggling
                filterBlogCards();
            });
        });

        function filterBlogCards() {
            // If no tags selected, show all
            if (selectedTags.size === 0) {
                blogCards.forEach(card => {
                    card.style.display = "block";
                });
                return;
            }

            // For each blog card, check if it has ALL selected tags
            blogCards.forEach(card => {
                const cardTags = card.getAttribute("data-tags").split(",");
                // Trim whitespace
                const trimmedTags = cardTags.map(t => t.trim());

                // Check if every selected tag is in the card's tags
                const hasAll = [...selectedTags].every(tag => trimmedTags.includes(tag));

                if (hasAll) {
                    card.style.display = "block";
                } else {
                    card.style.display = "none";
                }
            });
        }
    </script>
</body>

</html>