Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A Chaplain's Tribute to Peaceful Passing</title>
    <style>
        body {
            font-family: 'Georgia', serif;
            margin: 0;
            background: #F8F9FA;
            color: #2D3748;
        }
        header {
            background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80') no-repeat center/cover;
            height: 50vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
        }
        header h1 {
            font-size: 2.5rem;
            margin: 0;
        }
        main {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        .reflection {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }
        .reflection h2 {
            font-size: 1.8rem;
            color: #4A5568;
        }
        .reflection p {
            line-height: 1.6;
            margin: 1rem 0;
        }
        .form-section {
            text-align: center;
        }
        textarea {
            width: 100%;
            max-width: 600px;
            padding: 1rem;
            border: 1px solid #E2E8F0;
            border-radius: 5px;
            margin-bottom: 1rem;
            font-family: inherit;
        }
        button {
            background: #4A5568;
            color: white;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }
        button:hover {
            background: #2D3748;
        }
        .prayer-gallery {
            margin-top: 2rem;
        }
        .prayer-gallery h2 {
            font-size: 1.6rem;
            color: #4A5568;
            text-align: center;
        }
        .prayer-card {
            background: #F7FAFC;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 5px;
            border-left: 4px solid #4A5568;
            position: relative;
        }
        .prayer-card p {
            margin: 0;
            line-height: 1.6;
        }
        .prayer-card .timestamp {
            font-size: 0.8rem;
            color: #718096;
            margin-top: 0.5rem;
        }
        .clear-btn {
            background: #E53E3E;
            margin: 1rem auto;
            display: block;
        }
        .clear-btn:hover {
            background: #C53030;
        }
    </style>
</head>
<body>
    <header>
        <h1>A Chaplain's Tribute</h1>
    </header>
    <main>
        <section class="reflection">
            <h2>Peaceful Passing</h2>
            <p>As a Chaplain, I have sat with many who are preparing to pass or who have already crossed that threshold. In those sacred moments, I offer a simple truth: death is like falling asleep, just as you would any other night. The difference is that you will wake up in another place. Not knowing how much time has passed and it won't matter. I do not speak of heaven or hell, for that judgment belongs to One alone. My role is to hold space for peace, to honor the journey, and to walk alongside those in their final moments with grace and presence.</p>
            <p><em>“In the quiet of transition, there is a sacred stillness that carries us forward.”</em></p>
        </section>
        <section class="form-section">
            <h2>Share a Reflection or Prayer</h2>
            <p>Offer a thought, memory, or prayer to honor those who have passed or to support those in transition.</p>
            <textarea id="userReflection" rows="5" placeholder="Write your reflection or prayer..."></textarea>
            <button onclick="addReflection()">Submit</button>
        </section>
        <section class="prayer-gallery">
            <h2>Prayer Gallery</h2>
            <div id="contributions"></div>
            <button class="clear-btn" onclick="clearReflections()">Clear All Reflections</button>
        </section>
    </main>
    <script>
        function addReflection() {
            const textarea = document.getElementById('userReflection');
            const contributions = document.getElementById('contributions');
            const text = textarea.value.trim();
            if (text) {
                const reflections = JSON.parse(localStorage.getItem('reflections') || '[]');
                const newReflection = {
                    text: text,
                    timestamp: new Date().toLocaleString()
                };
                reflections.push(newReflection);
                localStorage.setItem('reflections', JSON.stringify(reflections));
                renderReflections();
                textarea.value = '';
            }
        }

        function renderReflections() {
            const contributions = document.getElementById('contributions');
            const reflections = JSON.parse(localStorage.getItem('reflections') || '[]');
            contributions.innerHTML = '';
            reflections.forEach(reflection => {
                const div = document.createElement('div');
                div.className = 'prayer-card';
                div.innerHTML = `<p>${reflection.text}</p><div class="timestamp">${reflection.timestamp}</div>`;
                contributions.appendChild(div);
            });
        }

        function clearReflections() {
            if (confirm('Are you sure you want to clear all reflections?')) {
                localStorage.removeItem('reflections');
                renderReflections();
            }
        }

        // Load reflections on page load
        document.addEventListener('DOMContentLoaded', renderReflections);
    </script>
</body>
</html>