{"id":216,"date":"2025-06-18T20:18:32","date_gmt":"2025-06-18T18:18:32","guid":{"rendered":"https:\/\/www.ortodossia.eu\/?page_id=216"},"modified":"2025-06-18T20:27:29","modified_gmt":"2025-06-18T18:27:29","slug":"biblia","status":"publish","type":"page","link":"https:\/\/www.ortodossia.eu\/index.php\/biblia\/","title":{"rendered":"Biblia"},"content":{"rendered":"<p>    <!-- Google Fonts - Signika -->\n    <link\n      href=\"https:\/\/fonts.googleapis.com\/css2?family=Signika:wght@300;400;500;600;700&#038;display=swap\"\n      rel=\"stylesheet\"\n    \/><br \/>\n    <!-- Add Supabase client library --><br \/>\n    <script src=\"https:\/\/unpkg.com\/@supabase\/supabase-js@2\"><\/script><\/p>\n<style>\n      \/* --- Basic Styling for the Widget --- *\/\n      #bible-widget-container {\n        font-family: \"Signika\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n          Roboto, Helvetica, Arial, sans-serif;\n        max-width: 800px;\n        margin: 2rem auto;\n        padding: 1.5rem;\n        border: 1px solid #e0e0e0;\n        border-radius: 8px;\n        background-color: #ffffff;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n        min-height: 400px;\n        position: relative;\n      }<\/p>\n<p>      \/* --- Loader --- *\/\n      .widget-loader {\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: rgba(255, 255, 255, 0.95);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 1.2rem;\n        color: #555;\n        z-index: 10;\n        padding: 12px;\n        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n        border-top: 1px solid #eee;\n      }\n      .widget-loader .loader {\n        width: 20px;\n        height: 20px;\n        border: 2px solid #f3f3f3;\n        border-top: 2px solid #007bff;\n        border-radius: 50%;\n        margin-right: 10px;\n        animation: spin 1s linear infinite;\n      }\n      @keyframes spin {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }<\/p>\n<p>      \/* --- Views --- *\/\n      .widget-view {\n        display: none;\n      }\n      .widget-view.active {\n        display: block;\n      }<\/p>\n<p>      \/* --- Header & Navigation --- *\/\n      .widget-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding-bottom: 1rem;\n        border-bottom: 1px solid #eee;\n        margin-bottom: 1rem;\n        flex-wrap: wrap;\n        gap: 8px;\n      }\n      .widget-header h2 {\n        margin: 0;\n        font-size: 1.5rem;\n        color: #333;\n        font-weight: 600;\n        flex: 1;\n        min-width: 200px;\n      }\n      .widget-nav-link {\n        font-size: 0.9rem;\n        color: #007bff;\n        text-decoration: none;\n        cursor: pointer;\n        font-weight: 500;\n        display: flex;\n        align-items: center;\n      }\n      .widget-nav-link:hover {\n        text-decoration: underline;\n      }\n      .header-navigation {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n      .header-navigation .nav-button {\n        padding: 6px 12px;\n      }\n      .header-navigation .nav-icon {\n        width: 20px;\n        height: 20px;\n      }<\/p>\n<p>      \/* --- Book Lists --- *\/\n      .testament-section {\n        margin-bottom: 2rem;\n      }\n      .testament-section h3 {\n        font-weight: 600;\n        color: #555;\n        border-bottom: 1px solid #eee;\n        padding-bottom: 0.5rem;\n        font-size: 1.2rem;\n        margin-bottom: 1rem;\n      }\n      .books-container {\n        display: flex;\n        gap: 2rem;\n        margin-bottom: 1.5rem;\n      }\n      .testament-column {\n        flex: 1;\n        min-width: 0; \/* Prevents flex items from overflowing *\/\n      }\n      .book-grid {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        margin-bottom: 1.5rem;\n      }\n      .book-item {\n        padding: 8px 12px;\n        background: #f9f9f9;\n        border: 1px solid #eee;\n        border-radius: 6px;\n        text-align: left;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        font-size: 1rem;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-weight: normal;\n      }\n      .book-item:hover {\n        background-color: #007bff;\n        color: white;\n        transform: translateY(-1px);\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      }<\/p>\n<p>      \/* Responsive layout *\/\n      @media (max-width: 768px) {\n        .books-container {\n          flex-direction: column;\n          gap: 1rem;\n        }\n        .testament-column {\n          width: 100%;\n        }\n      }<\/p>\n<p>      \/* --- Chapter Grid --- *\/\n      .chapter-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));\n        gap: 8px;\n        padding: 1rem;\n        background: #f8f9fa;\n        border-radius: 8px;\n        border: 1px solid #eee;\n      }\n      .chapter-item {\n        padding: 8px;\n        background: white;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        text-align: center;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        font-weight: 500;\n      }\n      .chapter-item:hover {\n        background-color: #007bff;\n        color: white;\n        border-color: #007bff;\n      }<\/p>\n<p>      \/* --- Reading View --- *\/\n      .verse-text p {\n        margin-bottom: 1.5em;\n        line-height: 1.8;\n        color: #333;\n      }\n      .verse-text .verse {\n        display: block;\n        margin-bottom: 1.2em;\n        padding-left: 1em;\n        text-indent: -1em;\n        line-height: 1.6;\n        color: #333;\n      }\n      .verses-container {\n        font-size: 1.1rem;\n      }\n      #verse-text-container .verse .verse-number,\n      .verse-text .verse .verse-number {\n        color: #007bff !important;\n        font-weight: bold;\n        margin-right: 0.4em;\n        display: inline-block;\n      }\n      .verse-text sup {\n        font-weight: bold;\n        color: #007bff;\n        margin-right: 0.4em;\n        font-size: 0.8rem;\n        top: -0.5em;\n      }\n      .chapter-navigation {\n        display: flex;\n        justify-content: space-between;\n        margin: 1rem 0;\n        padding: 1rem 0;\n        border-top: 1px solid #eee;\n      }\n      .chapter-navigation.top {\n        border-top: none;\n        border-bottom: 1px solid #eee;\n        margin-top: 0;\n      }\n      .nav-button {\n        padding: 8px 16px;\n        background-color: #f0f0f0;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        cursor: pointer;\n        font-family: \"Signika\", sans-serif;\n        font-weight: 500;\n        transition: all 0.2s ease;\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n      }\n      .nav-button:hover {\n        background-color: #007bff;\n        color: white;\n        border-color: #007bff;\n      }\n      .nav-button:disabled {\n        background-color: #f9f9f9;\n        cursor: not-allowed;\n        color: #ccc;\n      }\n      .nav-button:disabled .nav-icon svg {\n        fill: #ccc;\n      }\n      .book-navigation {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 1rem 0;\n        border-bottom: 1px solid #eee;\n        margin-bottom: 1rem;\n      }\n      .book-navigation .nav-button {\n        background-color: #e9ecef;\n      }\n      .book-navigation .nav-button:hover {\n        background-color: #007bff;\n      }<\/p>\n<p>      \/* --- Search Functionality --- *\/\n      .search-container {\n        margin-bottom: 1.5rem;\n        position: relative;\n        max-width: 600px;\n        margin-left: auto;\n        margin-right: auto;\n      }\n      .search-input {\n        width: 100%;\n        padding: 10px 16px;\n        font-size: 0.95rem;\n        border: 2px solid #eee;\n        border-radius: 8px;\n        transition: all 0.3s ease;\n        font-family: \"Signika\", sans-serif;\n        padding-right: 50px;\n      }\n      .search-input:focus {\n        outline: none;\n        border-color: #007bff;\n        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);\n      }\n      .search-toggle {\n        position: absolute;\n        right: 12px;\n        top: 50%;\n        transform: translateY(-50%);\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 4px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #666;\n        transition: all 0.2s ease;\n      }\n      .search-toggle:hover {\n        color: #007bff;\n      }\n      .search-toggle .nav-icon {\n        width: 20px;\n        height: 20px;\n      }\n      .search-toggle .nav-icon svg {\n        transition: transform 0.3s ease;\n      }\n      .search-toggle.active .nav-icon svg {\n        transform: rotate(180deg);\n      }\n      .search-results {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        background: white;\n        border: 1px solid #eee;\n        border-radius: 8px;\n        margin-top: 4px;\n        max-height: 400px;\n        overflow-y: auto;\n        z-index: 1000;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n        display: none;\n      }\n      .search-results.active {\n        display: block;\n      }\n      .search-result {\n        padding: 12px 15px;\n        border-bottom: 1px solid #eee;\n        cursor: pointer;\n      }\n      .search-result:last-child {\n        border-bottom: none;\n      }\n      .search-result:hover {\n        background-color: #f8f9fa;\n      }\n      .result-reference {\n        font-weight: 600;\n        color: #007bff;\n        margin-bottom: 4px;\n      }\n      .result-text {\n        color: #333;\n        font-size: 0.95rem;\n        line-height: 1.4;\n      }\n      .highlight {\n        background-color: #fff3cd;\n        padding: 0 2px;\n        border-radius: 2px;\n      }\n      .search-navigation {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 8px 15px;\n        background-color: #f8f9fa;\n        border-top: 1px solid #eee;\n      }\n      .search-navigation-info {\n        font-size: 0.9rem;\n        color: #666;\n      }\n      .search-nav-button {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 4px;\n        color: #666;\n        transition: all 0.2s ease;\n      }\n      .search-nav-button:hover {\n        color: #007bff;\n      }\n      .search-nav-button:disabled {\n        color: #ccc;\n        cursor: not-allowed;\n      }<\/p>\n<p>      \/* --- Chapter Navigation --- *\/\n      .chapter-navigation-top {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n        margin-bottom: 1.5rem;\n        padding: 1rem;\n        background: #f8f9fa;\n        border-radius: 8px;\n        border: 1px solid #eee;\n      }\n      .chapter-nav-item {\n        padding: 6px 12px;\n        border-radius: 4px;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        font-size: 0.9rem;\n        border: 1px solid #ddd;\n        font-weight: 500;\n      }\n      .chapter-nav-item:hover {\n        background-color: #007bff;\n        color: white;\n        border-color: #007bff;\n      }\n      .chapter-nav-item.active {\n        background-color: #dc3545;\n        color: white;\n        border-color: #dc3545;\n      }<\/p>\n<p>      \/* Navigation Icons *\/\n      .nav-icon {\n        width: 24px;\n        height: 24px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .nav-icon svg {\n        width: 100%;\n        height: 100%;\n      }<\/p>\n<p>      \/* Text size controls *\/\n      .text-size-controls {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        margin-left: 8px;\n        padding-left: 8px;\n        border-left: 1px solid #eee;\n      }\n      .text-size-controls button {\n        padding: 4px 8px;\n        background: white;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: #666;\n        transition: all 0.2s ease;\n      }\n      .text-size-controls button:hover {\n        background: #007bff;\n        color: white;\n        border-color: #007bff;\n      }\n      .text-size-controls button:disabled {\n        background: #f9f9f9;\n        color: #ccc;\n        cursor: not-allowed;\n      }\n    <\/style>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-216","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ortodossia.eu\/index.php\/wp-json\/wp\/v2\/pages\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ortodossia.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ortodossia.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ortodossia.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ortodossia.eu\/index.php\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":3,"href":"https:\/\/www.ortodossia.eu\/index.php\/wp-json\/wp\/v2\/pages\/216\/revisions"}],"predecessor-version":[{"id":219,"href":"https:\/\/www.ortodossia.eu\/index.php\/wp-json\/wp\/v2\/pages\/216\/revisions\/219"}],"wp:attachment":[{"href":"https:\/\/www.ortodossia.eu\/index.php\/wp-json\/wp\/v2\/media?parent=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}