{"id":9,"date":"2025-09-21T12:08:43","date_gmt":"2025-09-21T12:08:43","guid":{"rendered":"https:\/\/lucasvantol.nl\/?page_id=9"},"modified":"2025-09-27T20:14:44","modified_gmt":"2025-09-27T18:14:44","slug":"family","status":"publish","type":"page","link":"https:\/\/lucasvantol.nl\/index.php\/family\/","title":{"rendered":"family dashboard"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\n<div id=\"fd-dashboard-app\" class=\"fd-dashboard\">\n            <!-- Login scherm -->\n        <div class=\"fd-login-container\">\n            <div class=\"fd-login-box\">\n                <div class=\"fd-login-header\">\n                    <h1>Family Dashboard<\/h1>\n                    <p>Voer de toegangscode in<\/p>\n                <\/div>\n                \n                <form id=\"fd-login-form\" class=\"fd-login-form\">\n                    <div class=\"fd-form-group\">\n                        <input type=\"text\" \n                               id=\"fd-access-code\" \n                               name=\"access_code\" \n                               class=\"fd-input\" \n                               placeholder=\"Toegangscode\"\n                               autocomplete=\"off\"\n                               required>\n                    <\/div>\n                    \n                    <div class=\"fd-form-group\">\n                        <label class=\"fd-checkbox\">\n                            <input type=\"checkbox\" name=\"remember_me\" value=\"true\" checked>\n                            <span>Dit apparaat onthouden<\/span>\n                        <\/label>\n                    <\/div>\n                    \n                    <button type=\"submit\" class=\"fd-btn fd-btn-primary\">\n                        Inloggen\n                    <\/button>\n                    \n                    <div id=\"fd-login-error\" class=\"fd-error-message\" style=\"display: none;\"><\/div>\n                <\/form>\n            <\/div>\n        <\/div>\n    <\/div>\n\n<style>\n\/* Swipeable Container Styles *\/\n.fd-swipeable-container {\n    position: relative;\n    height: calc(100vh - 100px); \/* Account for header *\/\n    overflow: hidden;\n}\n\n.fd-page-indicators {\n    display: flex;\n    justify-content: center;\n    padding: 16px 24px;\n    background: white;\n    border-bottom: 1px solid #f0f0f0;\n    gap: 8px;\n}\n\n.fd-page-indicator {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 20px;\n    background: #f5f5f5;\n    border: none;\n    border-radius: 12px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    font-weight: 600;\n    color: #666;\n}\n\n.fd-page-indicator.fd-page-active {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    transform: scale(1.05);\n}\n\n.fd-page-indicator:hover:not(.fd-page-active) {\n    background: #e0e0e0;\n    color: #333;\n}\n\n.fd-indicator-icon {\n    font-size: 20px;\n}\n\n.fd-indicator-label {\n    font-size: 16px;\n}\n\n.fd-pages-wrapper {\n    position: relative;\n    height: 100%;\n    display: flex;\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.fd-page {\n    min-width: 100%;\n    height: 100%;\n    overflow-y: auto;\n    flex-shrink: 0;\n}\n\n.fd-page.fd-page-active {\n    \/* Active page styling handled by transform *\/\n}\n\n\/* Tasks Grid Layout *\/\n.fd-tasks-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 24px;\n    padding: 24px;\n    height: 100%;\n}\n\n.fd-shopping-widget,\n.fd-tasks-widget {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.fd-shopping-widget .fd-widget-body,\n.fd-tasks-widget .fd-widget-body {\n    flex: 1;\n    overflow-y: auto;\n}\n\n\/* List Placeholder Styles *\/\n.fd-list-placeholder {\n    text-align: center;\n    padding: 40px 20px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n}\n\n.fd-list-placeholder .fd-placeholder-icon {\n    font-size: 64px;\n    margin-bottom: 20px;\n    opacity: 0.7;\n}\n\n.fd-list-placeholder h3 {\n    margin: 0 0 15px 0;\n    color: #1d2327;\n    font-size: 24px;\n}\n\n.fd-list-placeholder p {\n    color: #646970;\n    font-size: 16px;\n    margin: 0 0 30px 0;\n    line-height: 1.5;\n}\n\n.fd-feature-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    text-align: left;\n    max-width: 300px;\n}\n\n.fd-feature-item {\n    color: #646970;\n    font-size: 14px;\n    padding: 8px 0;\n    border-bottom: 1px solid #f0f0f0;\n}\n\n.fd-feature-item:last-child {\n    border-bottom: none;\n}\n\n\/* Add Item Button *\/\n.fd-add-item-btn {\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    color: white;\n    border: none;\n    border-radius: 50%;\n    width: 44px;\n    height: 44px;\n    font-size: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.2s;\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);\n}\n\n.fd-add-item-btn:hover {\n    transform: scale(1.1);\n    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);\n}\n\n\/* Responsive adjustments *\/\n@media (max-width: 1024px) {\n    .fd-tasks-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n        padding: 16px;\n    }\n    \n    .fd-page-indicators {\n        padding: 12px 16px;\n    }\n    \n    .fd-page-indicator {\n        padding: 10px 16px;\n        font-size: 14px;\n    }\n    \n    .fd-indicator-icon {\n        font-size: 18px;\n    }\n    \n    .fd-indicator-label {\n        font-size: 14px;\n    }\n}\n\n@media (max-width: 768px) {\n    .fd-page-indicator .fd-indicator-label {\n        display: none;\n    }\n    \n    .fd-page-indicator {\n        padding: 12px;\n        border-radius: 50%;\n        width: 48px;\n        height: 48px;\n    }\n    \n    .fd-tasks-grid {\n        padding: 12px;\n        gap: 12px;\n    }\n}\n\n\/* Touch gestures for swiping *\/\n.fd-pages-wrapper.fd-swiping {\n    transition: none;\n}\n\n\/* Setup widget styles (from original) *\/\n.fd-setup-widget {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    border: none;\n    margin-bottom: 30px;\n}\n\n.fd-setup-widget .fd-widget-header {\n    border-bottom-color: rgba(255,255,255,0.2);\n}\n\n.fd-setup-widget .fd-widget-header h2 {\n    color: white;\n}\n\n.fd-setup-checklist {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n.fd-setup-item {\n    display: flex;\n    gap: 15px;\n    padding: 20px;\n    border-radius: 12px;\n    background: rgba(255,255,255,0.1);\n    backdrop-filter: blur(10px);\n}\n\n.fd-setup-item.fd-setup-complete {\n    background: rgba(16, 185, 129, 0.2);\n}\n\n.fd-setup-item.fd-setup-incomplete {\n    background: rgba(245, 158, 11, 0.2);\n}\n\n.fd-setup-icon {\n    font-size: 32px;\n    flex-shrink: 0;\n}\n\n.fd-setup-content h3 {\n    margin: 0 0 8px 0;\n    color: white;\n    font-size: 18px;\n}\n\n.fd-setup-content p {\n    margin: 0 0 8px 0;\n    color: rgba(255,255,255,0.9);\n    line-height: 1.5;\n}\n\n.fd-setup-action {\n    font-weight: 600;\n    color: white !important;\n}\n\n.fd-setup-complete-notice {\n    text-align: center;\n    padding: 30px 20px;\n    background: rgba(16, 185, 129, 0.2);\n    border-radius: 12px;\n    margin-top: 20px;\n}\n\n.fd-setup-complete-notice h3 {\n    margin: 0 0 10px 0;\n    color: white;\n    font-size: 24px;\n}\n\n.fd-setup-complete-notice p {\n    margin: 0;\n    color: rgba(255,255,255,0.9);\n    font-size: 16px;\n}\n\n\/* Calendar placeholder styles *\/\n.fd-calendar-placeholder {\n    text-align: center;\n    padding: 60px 20px;\n}\n\n.fd-calendar-placeholder .fd-placeholder-icon {\n    font-size: 64px;\n    margin-bottom: 20px;\n}\n\n.fd-calendar-placeholder h3 {\n    margin: 0 0 10px 0;\n    color: #1d2327;\n    font-size: 24px;\n}\n\n.fd-calendar-placeholder p {\n    color: #646970;\n    font-size: 16px;\n    margin: 0;\n}\n<\/style>\n\n<script>\n\/\/ Swipe functionality\njQuery(document).ready(function($) {\n    let currentPage = 0;\n    let startX = null;\n    let currentX = null;\n    let isDragging = false;\n    \n    const pagesWrapper = $('.fd-pages-wrapper');\n    const totalPages = $('.fd-page').length;\n    \n    \/\/ Page indicator clicks\n    $('.fd-page-indicator').on('click', function() {\n        const targetPage = parseInt($(this).data('page'));\n        switchToPage(targetPage);\n    });\n    \n    \/\/ Touch events for swiping\n    pagesWrapper.on('touchstart', function(e) {\n        startX = e.originalEvent.touches[0].clientX;\n        currentX = startX;\n        isDragging = true;\n        pagesWrapper.addClass('fd-swiping');\n    });\n    \n    pagesWrapper.on('touchmove', function(e) {\n        if (!isDragging) return;\n        \n        currentX = e.originalEvent.touches[0].clientX;\n        const deltaX = currentX - startX;\n        const translateX = -(currentPage * 100) + (deltaX \/ window.innerWidth * 100);\n        \n        \/\/ Limit overscroll\n        const maxTranslate = 0;\n        const minTranslate = -(totalPages - 1) * 100;\n        const clampedTranslate = Math.max(minTranslate, Math.min(maxTranslate, translateX));\n        \n        pagesWrapper.css('transform', `translateX(${clampedTranslate}%)`);\n    });\n    \n    pagesWrapper.on('touchend', function(e) {\n        if (!isDragging) return;\n        \n        isDragging = false;\n        pagesWrapper.removeClass('fd-swiping');\n        \n        const deltaX = currentX - startX;\n        const threshold = 50; \/\/ Minimum swipe distance\n        \n        if (Math.abs(deltaX) > threshold) {\n            if (deltaX > 0 && currentPage > 0) {\n                \/\/ Swipe right - go to previous page\n                switchToPage(currentPage - 1);\n            } else if (deltaX < 0 && currentPage < totalPages - 1) {\n                \/\/ Swipe left - go to next page\n                switchToPage(currentPage + 1);\n            } else {\n                \/\/ Snap back to current page\n                switchToPage(currentPage);\n            }\n        } else {\n            \/\/ Snap back to current page\n            switchToPage(currentPage);\n        }\n    });\n    \n    \/\/ Mouse events for desktop testing\n    pagesWrapper.on('mousedown', function(e) {\n        startX = e.clientX;\n        currentX = startX;\n        isDragging = true;\n        pagesWrapper.addClass('fd-swiping');\n        e.preventDefault();\n    });\n    \n    $(document).on('mousemove', function(e) {\n        if (!isDragging) return;\n        \n        currentX = e.clientX;\n        const deltaX = currentX - startX;\n        const translateX = -(currentPage * 100) + (deltaX \/ window.innerWidth * 100);\n        \n        const maxTranslate = 0;\n        const minTranslate = -(totalPages - 1) * 100;\n        const clampedTranslate = Math.max(minTranslate, Math.min(maxTranslate, translateX));\n        \n        pagesWrapper.css('transform', `translateX(${clampedTranslate}%)`);\n    });\n    \n    $(document).on('mouseup', function(e) {\n        if (!isDragging) return;\n        \n        isDragging = false;\n        pagesWrapper.removeClass('fd-swiping');\n        \n        const deltaX = currentX - startX;\n        const threshold = 50;\n        \n        if (Math.abs(deltaX) > threshold) {\n            if (deltaX > 0 && currentPage > 0) {\n                switchToPage(currentPage - 1);\n            } else if (deltaX < 0 && currentPage < totalPages - 1) {\n                switchToPage(currentPage + 1);\n            } else {\n                switchToPage(currentPage);\n            }\n        } else {\n            switchToPage(currentPage);\n        }\n    });\n    \n    function switchToPage(pageIndex) {\n        currentPage = Math.max(0, Math.min(totalPages - 1, pageIndex));\n        \n        \/\/ Update transform\n        pagesWrapper.css('transform', `translateX(-${currentPage * 100}%)`);\n        \n        \/\/ Update indicators\n        $('.fd-page-indicator').removeClass('fd-page-active');\n        $(`.fd-page-indicator[data-page=\"${currentPage}\"]`).addClass('fd-page-active');\n        \n        \/\/ Update page active states\n        $('.fd-page').removeClass('fd-page-active');\n        $(`.fd-page[data-page=\"${currentPage}\"]`).addClass('fd-page-active');\n    }\n    \n    \/\/ Add item button handlers (placeholder)\n    $('.fd-add-item-btn').on('click', function() {\n        const type = $(this).data('type');\n        \/\/ TODO: Implement add item functionality\n        alert(`${type === 'shopping' ? 'Boodschap' : 'Taak'} toevoegen - nog niet ge\u00efmplementeerd`);\n    });\n});\n<\/script>\n\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lucasvantol.nl\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lucasvantol.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lucasvantol.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lucasvantol.nl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lucasvantol.nl\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":7,"href":"https:\/\/lucasvantol.nl\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/lucasvantol.nl\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/lucasvantol.nl\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}