Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Winning Ways Annual Report 2025</title>
    <script src="https://unpkg.com/page-flip@latest/dist/page-flip.umd.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: linear-gradient(135deg, #0f1a2e 0%, #1a2744 50%, #0f1a2e 100%); overflow: hidden; }
        .embed-container { display: flex; height: 100vh; overflow: hidden; }
        .sidebar { display: none; flex-direction: column; width: 320px; background-color: #1a2744; border-right: 1px solid #2a3a5c; padding: 24px; overflow-y: auto; }
        @media (min-width: 1024px) { .sidebar { display: flex; } }
        .sidebar-header { margin-bottom: 24px; }
        .sidebar-header-content { display: flex; align-items: center; gap: 12px; }
        .sidebar-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #f4c430 0%, #e6b800 100%); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #1a2744; }
        .sidebar-title h1 { font-size: 18px; font-weight: bold; color: white; }
        .sidebar-title p { color: #f4c430; font-size: 11px; font-weight: 500; }
        .sidebar-content { display: flex; flex-direction: column; gap: 16px; flex: 1; }
        .page-summary { background-color: #243356; border-radius: 8px; padding: 16px; border: 1px solid #2a3a5c; }
        .summary-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
        .summary-icon { font-size: 16px; color: #f4c430; }
        .summary-title h3 { color: white; font-weight: 600; font-size: 14px; }
        .summary-text { color: rgba(255, 255, 255, 0.7); font-size: 12px; line-height: 1.5; }
        .impact-highlights { background-color: rgba(36, 51, 86, 0.5); border-radius: 8px; padding: 16px; border: 1px solid rgba(42, 58, 92, 0.5); }
        .impact-label { color: #f4c430; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
        .impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .impact-item { text-align: center; }
        .impact-number { font-size: 24px; font-weight: bold; color: white; }
        .impact-label-small { color: rgba(255, 255, 255, 0.5); font-size: 12px; }
        .core-programs { background-color: rgba(36, 51, 86, 0.5); border-radius: 8px; padding: 16px; border: 1px solid rgba(42, 58, 92, 0.5); }
        .programs-list { color: rgba(255, 255, 255, 0.6); font-size: 12px; display: flex; flex-direction: column; gap: 12px; }
        .program-item { display: flex; align-items: center; gap: 8px; }
        .program-dot { width: 6px; height: 6px; background-color: #f4c430; border-radius: 50%; flex-shrink: 0; }
        .download-btn { width: 100%; margin-top: 16px; padding: 10px; background-color: #f4c430; color: #1a2744; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background-color 0.2s; }
        .download-btn:hover { background-color: #e6b800; }
        .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        .mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; background-color: #1a2744; border-bottom: 1px solid #2a3a5c; }
        @media (min-width: 1024px) { .mobile-header { display: none; } }
        .mobile-title { font-size: 14px; font-weight: 600; color: white; }
        .icon-btn { background: none; border: none; color: #f4c430; cursor: pointer; font-size: 18px; padding: 4px; }
        .icon-btn:hover { color: #e6b800; }
        .viewer-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; position: relative; }
        .book-container { display: flex; align-items: center; justify-content: center; position: relative; }
        #book { width: 100%; height: 100%; max-width: 800px; max-height: 700px; }
        .nav-button { background: rgba(71, 85, 105, 0.5); border: none; color: rgba(255, 255, 255, 0.7); width: 40px; height: 40px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 0.2s; flex-shrink: 0; }
        .nav-button:hover:not(:disabled) { color: white; background: rgba(71, 85, 105, 0.7); }
        .nav-button:disabled { opacity: 0.3; cursor: not-allowed; }
        .footer { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 16px; background-color: rgba(26, 39, 68, 0.8); border-top: 1px solid rgba(42, 58, 92, 0.5); }
        .page-counter { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
        .footer-text { font-size: 12px; color: rgba(244, 196, 48, 0.8); font-weight: 500; }
        .loading { display: flex; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg, #0f1a2e 0%, #1a2744 50%, #0f1a2e 100%); }
        .loading-content { text-align: center; max-width: 500px; padding: 24px; }
        .spinner { width: 64px; height: 64px; border: 4px solid #f4c430; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 24px; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .loading-title { font-size: 20px; font-weight: 600; color: white; margin-bottom: 8px; }
        .loading-text { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
        .loading-subtitle { color: rgba(244, 196, 48, 0.8); font-size: 12px; margin-top: 16px; }
        .error { display: flex; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg, #0f1a2e 0%, #1a2744 50%, #0f1a2e 100%); }
        .error-content { text-align: center; max-width: 500px; padding: 24px; }
        .error-title { font-size: 20px; font-weight: 600; color: white; margin-bottom: 8px; }
        .error-text { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        const pageSummaries = {
            0: { title: "Cover", description: "Winning Ways Annual Report 2025 - A year of transformation and impact.", icon: "📖" },
            1: { title: "Table of Contents", description: "Navigate through our programs, impact stories, and achievements.", icon: "📖" },
            2: { title: "Letter from Co-Founders", description: "A message of gratitude and vision from our leadership.", icon: "❤️" },
            3: { title: "Our Mission & Approach", description: "Using lived experience and family-based curriculum to foster success.", icon: "👥" },
            4: { title: "The Changemakers", description: "Meet our dedicated staff and board members driving positive change.", icon: "👥" },
            5: { title: "Dedication", description: "In loving memory of those who inspired us.", icon: "❤️" },
            6: { title: "Our Programming", description: "The Winning Circle Series - serving 1,790 participants.", icon: "🏆" },
            7: { title: "Financial Literacy", description: "5-week course empowering participants to make thoughtful decisions.", icon: "🏆" },
            8: { title: "Financial Literacy Impact", description: "62 participants served across multiple regions.", icon: "👥" },
            9: { title: "Participant Stories", description: "Real voices sharing their transformation journey.", icon: "❤️" },
        };

        let currentPage = 0, totalPages = 0, pdfPages = [], pageFlip = null;
        const pdfUrl = 'https://charaf-nadifi-portfolio.replit.app/api/private/504cf639d700e4e22debfd33aae86590/ww-annual-report';

        function loadPDFLibrary() {
            return new Promise((resolve, reject) => {
                if (typeof pdfjsLib !== 'undefined') {
                    resolve();
                    return;
                }
                const script = document.createElement('script');
                script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
                script.onload = () => {
                    setTimeout(() => {
                        if (typeof pdfjsLib !== 'undefined') {
                            resolve();
                        } else {
                            reject(new Error('PDF.js library failed to initialize'));
                        }
                    }, 100);
                };
                script.onerror = () => reject(new Error('Failed to load PDF.js library'));
                document.head.appendChild(script);
            });
        }

        async function loadPDF() {
            try {
                document.getElementById('app').innerHTML = '<div class="loading"><div class="loading-content"><div class="spinner"></div><h2 class="loading-title">Winning Ways Annual Report 2025</h2><p class="loading-text">Preparing your reading experience...</p><p class="loading-subtitle">Over 1,000 lives transformed through hope, healing, and empowerment.</p></div></div>';
                await loadPDFLibrary();
                pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
                const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
                totalPages = pdf.numPages;
                pdfPages = [];
                for (let i = 1; i <= totalPages; i++) {
                    const page = await pdf.getPage(i);
                    const viewport = page.getViewport({ scale: 1.5 });
                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');
                    canvas.width = viewport.width;
                    canvas.height = viewport.height;
                    await page.render({ canvasContext: context, viewport, canvas }).promise;
                    pdfPages.push(canvas.toDataURL('image/jpeg', 0.85));
                }
                renderApp();
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('app').innerHTML = `<div class="error"><div class="error-content"><h2 class="error-title">Error Loading PDF</h2><p class="error-text">${error.message}</p></div></div>`;
            }
        }

        function renderApp() {
            document.getElementById('app').innerHTML = `<div class="embed-container"><aside class="sidebar"><div class="sidebar-header"><div class="sidebar-header-content"><div class="sidebar-icon">📖</div><div class="sidebar-title"><h1>Winning Ways</h1><p>Annual Report 2025</p></div></div></div><div class="sidebar-content"><div class="page-summary"><div class="summary-title"><span class="summary-icon" id="pageIcon">📖</span><h3 id="pageTitle">Cover</h3></div><p class="summary-text" id="pageSummary">Winning Ways Annual Report 2025 - A year of transformation and impact.</p></div><div class="impact-highlights"><div class="impact-label">Impact Highlights</div><div class="impact-grid"><div class="impact-item"><div class="impact-number">1,790</div><div class="impact-label-small">Participants</div></div><div class="impact-item"><div class="impact-number">5+</div><div class="impact-label-small">Programs</div></div></div></div><div class="core-programs"><div class="impact-label">Core Programs</div><div class="programs-list"><div class="program-item"><span class="program-dot"></span><span>Financial Literacy</span></div><div class="program-item"><span class="program-dot"></span><span>Spit & Paint</span></div><div class="program-item"><span class="program-dot"></span><span>Money Talk</span></div><div class="program-item"><span class="program-dot"></span><span>Recovery Finance</span></div></div></div></div><button class="download-btn" onclick="downloadPdf()">📥 Download PDF</button></aside><div class="main-content"><header class="mobile-header"><h1 class="mobile-title">Winning Ways Annual Report 2025</h1><button class="icon-btn" onclick="downloadPdf()">📥</button></header><div class="viewer-main"><button class="nav-button" id="prevBtn" onclick="flipPrev()">❮</button><div class="book-container"><div id="book"></div></div><button class="nav-button" id="nextBtn" onclick="flipNext()">❯</button></div><footer class="footer"><span class="page-counter">Page <span id="currentPage">1</span> of <span id="totalPages">${totalPages}</span></span><span class="footer-text">Together, We Win!</span></footer></div></div>`;
            initPageFlip();
            updatePageSummary();
        }

        function initPageFlip() {
            const bookElement = document.getElementById('book');
            pageFlip = new PageFlip(bookElement, { width: 500, height: 700, size: 'stretch', minWidth: 350, maxWidth: 800, minHeight: 500, maxHeight: 1000, showCover: true, maxShadowOpacity: 0.5, mobileScrollSupport: true, useMouseEvents: true, swipeDistance: 30, clickEventForward: true, usePortrait: true, startZIndex: 0, autoSize: true, drawShadow: true, flippingTime: 800, startPage: 0 });
            const pagesContainer = document.createElement('div');
            pdfPages.forEach(src => {
                const pageDiv = document.createElement('div');
                pageDiv.className = 'page';
                pageDiv.style.background = '#fff';
                const img = document.createElement('img');
                img.src = src;
                img.style.cssText = 'width:100%;height:100%;object-fit:contain;';
                pageDiv.appendChild(img);
                pagesContainer.appendChild(pageDiv);
            });
            bookElement.innerHTML = '';
            Array.from(pagesContainer.children).forEach(child => bookElement.appendChild(child));
            pageFlip.loadFromHTML(bookElement.querySelectorAll('.page'));
            pageFlip.on('flip', (e) => { currentPage = e.data; updatePageInfo(); updatePageSummary(); });
            updatePageInfo();
        }

        function flipPrev() { pageFlip?.flipPrev(); }
        function flipNext() { pageFlip?.flipNext(); }
        function updatePageInfo() {
            if (document.getElementById('prevBtn')) document.getElementById('prevBtn').disabled = currentPage === 0;
            if (document.getElementById('nextBtn')) document.getElementById('nextBtn').disabled = currentPage >= totalPages - 1;
            if (document.getElementById('currentPage')) document.getElementById('currentPage').textContent = currentPage + 1;
        }
        function updatePageSummary() {
            const summary = pageSummaries[currentPage] || { title: `Page ${currentPage + 1}`, description: 'Explore our programs, impact, and stories of transformation.', icon: '📖' };
            if (document.getElementById('pageTitle')) document.getElementById('pageTitle').textContent = summary.title;
            if (document.getElementById('pageSummary')) document.getElementById('pageSummary').textContent = summary.description;
            if (document.getElementById('pageIcon')) document.getElementById('pageIcon').textContent = summary.icon;
        }
        function downloadPdf() { window.open(pdfUrl, '_blank'); }
        loadPDF();
    </script>
</body>
</html>

Winning Ways Inc