<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Unsent Project - Share & Read Untold Massages</title>
    <meta name="description" content="Explore the Unsent Project, a space for anonymous unsent messages. Read stories of love, loss, and healing shared worldwide."> <link rel="icon" href="https://files.pi.fyi/cdn-cgi/image/quality=70,format=webp/etc/images/t53g0jb395zrtf2263qvh39j/original.jpg" type="image/x-icon"> <link rel="icon" sizes="192x192" href="https://files.pi.fyi/cdn-cgi/image/quality=70,format=webp/etc/images/t53g0jb395zrtf2263qvh39j/original.jpg"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #e6e6e6;
            min-height: 100vh;
            padding: 20px;
        }
        
        .unsent-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .unsent-header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .unsent-header h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #ff6b6b, #ffa86b);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
        }
        
        .unsent-header p {
            font-size: 1.2rem;
            opacity: 0.8;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .search-box {
            display: flex;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 30px;
            padding: 12px 20px;
            width: 100%;
            max-width: 500px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .search-box input {
            background: transparent;
            border: none;
            width: 100%;
            padding: 8px;
            color: white;
            font-size: 1rem;
            outline: none;
        }
        
        .search-box button {
            background: transparent;
            border: none;
            color: #ff6b6b;
            cursor: pointer;
            font-size: 1.2rem;
        }
        
        .filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .filter-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #e6e6e6;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .filter-btn:hover, .filter-btn.active {
            background: linear-gradient(45deg, #ff6b6b, #ffa86b);
        }
        
        .messages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .message-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.05);
            min-height: 220px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .message-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            background: rgba(255, 255, 255, 0.08);
        }
        
        .message-text {
            font-size: 1.4rem;
            line-height: 1.4;
            margin-bottom: 15px;
            font-weight: 600;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            padding: 10px;
        }
        
        /* Different text colors like the original site */
        .message-card:nth-child(3n+1) .message-text {
            color: #ff6b6b;
        }
        
        .message-card:nth-child(3n+2) .message-text {
            color: #6bff8d;
        }
        
        .message-card:nth-child(3n+3) .message-text {
            color: #6b9fff;
        }
        
        .message-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            opacity: 0.7;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .initials {
            background: linear-gradient(45deg, #ff6b6b, #ffa86b);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .message-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        
        .pagination button {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #e6e6e6;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .pagination button:hover {
            background: linear-gradient(45deg, #ff6b6b, #ffa86b);
        }
        
        .submit-btn {
            display: block;
            margin: 0 auto;
            background: linear-gradient(45deg, #ff6b6b, #ffa86b);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 30px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 40px;
        }
        
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }
        
        .unsent-footer {
            text-align: center;
            padding: 30px 0;
            opacity: 0.7;
            font-size: 0.9rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 20px;
        }
        
        @media (max-width: 768px) {
            .unsent-header h1 {
                font-size: 2.2rem;
            }
            
            .messages-grid {
                grid-template-columns: 1fr;
            }
            
            .message-text {
                font-size: 1.2rem;
            }
        }
    </style>
</head>
<body>
    <section class="unsent-container">
        <div class="unsent-header">
            <h1>The Unsent Project</h1>
            <p>Read anonymous unsent messages. Words left unspoken, feelings left unexpressed.</p>
        </div>
        
        <div class="search-container">
            <div class="search-box">
                <input type="text" placeholder="Search messages..." id="search-input">
                <button><i class="fas fa-search"></i></button>
            </div>
        </div>
        
        <div class="filters">
            <button class="filter-btn active">All</button>
            <button class="filter-btn">Love</button>
            <button class="filter-btn">Apology</button>
            <button class="filter-btn">Regret</button>
            <button class="filter-btn">Friendship</button>
            <button class="filter-btn">Family</button>
        </div>
        
        <div class="messages-grid" id="messages-container">
            <!-- Messages will be loaded here -->
        </div>
        
        <div class="pagination">
            <button><i class="fas fa-chevron-left"></i></button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button><i class="fas fa-chevron-right"></i></button>
        </div>
        
        <button class="submit-btn">Submit Your Unsent Message</button>
        
        <div class="unsent-footer">
            <p>© 2025 The Unsent Project | Anonymously share what you never said</p>
        </div>
    </section>

    <script>
        // Sample messages data
        const messages = [
            { id: 1, text: "I've loved you since the day we met, but I never had the courage to tell you.", initials: "JL", category: "Love", date: "March 15, 2022" },
            { id: 2, text: "I'm sorry for what I said that night. I was angry and I didn't mean it.", initials: "AM", category: "Apology", date: "January 8, 2023" },
            { id: 3, text: "I wish we could go back to how things were before everything changed.", initials: "TS", category: "Regret", date: "November 22, 2022" },
            { id: 4, text: "You were my everything and you didn't even know I existed.", initials: "RC", category: "Love", date: "February 14, 2023" },
            { id: 5, text: "I should have stood up for you when they were talking behind your back.", initials: "DK", category: "Apology", date: "December 30, 2022" },
            { id: 6, text: "I miss our late night conversations and how we could talk about anything.", initials: "MJ", category: "Friendship", date: "October 5, 2022" },
            { id: 7, text: "I'm still angry about what you did, but I miss you every day.", initials: "LP", category: "Regret", date: "April 18, 2023" },
            { id: 8, text: "Thank you for believing in me when no one else did.", initials: "ER", category: "Family", date: "May 3, 2023" },
            { id: 9, text: "I wish I had told you how I felt before it was too late.", initials: "SW", category: "Love", date: "June 21, 2022" }
        ];

        // Function to render messages
        function renderMessages(messagesArray) {
            const container = document.getElementById('messages-container');
            container.innerHTML = '';
            
            messagesArray.forEach(message => {
                const messageEl = document.createElement('div');
                messageEl.className = 'message-card';
                messageEl.innerHTML = `
                    <div class="message-header">
                        <div class="initials">${message.initials}</div>
                        <div>To: ${message.category}</div>
                    </div>
                    <p class="message-text">"${message.text}"</p>
                    <div class="message-meta">
                        <span>${message.category}</span>
                        <span>${message.date}</span>
                    </div>
                `;
                container.appendChild(messageEl);
            });
        }

        // Initial render
        renderMessages(messages);

        // Filter functionality
        const filterButtons = document.querySelectorAll('.filter-btn');
        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button
                button.classList.add('active');
                
                const filter = button.textContent;
                
                if (filter === 'All') {
                    renderMessages(messages);
                } else {
                    const filteredMessages = messages.filter(message => message.category === filter);
                    renderMessages(filteredMessages);
                }
            });
        });

        // Search functionality
        const searchInput = document.getElementById('search-input');
        searchInput.addEventListener('input', () => {
            const searchText = searchInput.value.toLowerCase();
            
            if (searchText.trim() === '') {
                renderMessages(messages);
                return;
            }
            
            const filteredMessages = messages.filter(message => 
                message.text.toLowerCase().includes(searchText) ||
                message.category.toLowerCase().includes(searchText) ||
                message.initials.toLowerCase().includes(searchText)
            );
            
            renderMessages(filteredMessages);
        });

        // Submit button functionality
        const submitBtn = document.querySelector('.submit-btn');
        submitBtn.addEventListener('click', () => {
            alert('This would open a submission form for your unsent message.');
        });
    </script>
</body>
</html>