{"id":100,"date":"2025-06-21T15:52:35","date_gmt":"2025-06-21T15:52:35","guid":{"rendered":"https:\/\/wp.smvhost.in\/wordpress\/?page_id=100"},"modified":"2025-06-22T15:55:05","modified_gmt":"2025-06-22T15:55:05","slug":"book-creator","status":"publish","type":"page","link":"https:\/\/wp.smvhost.in\/wordpress\/book-creator\/","title":{"rendered":""},"content":{"rendered":"        <div class=\"wrap ibc-wizard-wrapper\">\r\n            <h1 class=\"wp-heading-inline\">Create Your Book<\/h1>\r\n            <div id=\"ibc-wizard-container\" class=\"ibc-wizard-container\">\r\n                <div class=\"ibc-progress-bar\">\r\n                    <div class=\"ibc-progress-bar-fill\" style=\"width: 0%;\"><\/div>\r\n                <\/div>\r\n                <div id=\"ibc-wizard-content\" class=\"ibc-wizard-content\">\r\n                    <style>\r\n    \/* General container styling *\/\r\n    body {\r\n        background-color: #e5e5e5;\r\n        \/* Light grey background for the whole page *\/\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        min-height: 100vh;\r\n        \/* Full viewport height *\/\r\n        margin: 0;\r\n        font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n        \/* Modern, clean font *\/\r\n    }\r\n\r\n    .ibc-wizard-container {\r\n        max-width: 500px;\r\n        \/* Slightly narrower to match image *\/\r\n        width: 100%;\r\n        \/* Ensure it's responsive *\/\r\n        background-color: #fff;\r\n        border-radius: 16px;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n        \/* Softer shadow *\/\r\n        overflow: hidden;\r\n        padding: 30px 40px;\r\n        \/* Adjust padding as needed *\/\r\n        box-sizing: border-box;\r\n        position: relative;\r\n        \/* For absolute positioning of top bar *\/\r\n    }\r\n\r\n    \/* Top Bar for Back Arrow and Progress Bar *\/\r\n    .ibc-top-bar {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n        \/* Space between arrow and progress bar *\/\r\n        margin-bottom: 30px;\r\n        \/* Space before heading *\/\r\n        position: relative;\r\n        \/* For progress bar fill *\/\r\n    }\r\n\r\n    .ibc-back-arrow {\r\n        background: none;\r\n        border: none;\r\n        cursor: pointer;\r\n        padding: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 32px;\r\n        \/* Make clickable area larger *\/\r\n        height: 32px;\r\n        border-radius: 50%;\r\n        \/* Rounded back button *\/\r\n        transition: background-color 0.2s ease;\r\n    }\r\n\r\n    .ibc-back-arrow:hover {\r\n        background-color: #f0f0f0;\r\n    }\r\n\r\n    .ibc-back-arrow svg {\r\n        fill: #A8A8A8;\r\n        \/* Grey color for the arrow *\/\r\n        width: 24px;\r\n        height: 24px;\r\n    }\r\n\r\n    \/* Progress bar *\/\r\n    .ibc-progress-bar {\r\n        flex-grow: 1;\r\n        \/* Takes remaining space *\/\r\n        height: 8px;\r\n        background-color: #e0e0e0;\r\n        \/* Light grey background *\/\r\n        border-radius: 4px;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .ibc-progress-bar-fill {\r\n        height: 100%;\r\n        background-color: #58cc02;\r\n        \/* Duolingo green *\/\r\n        border-radius: 4px;\r\n        transition: width 0.3s ease-in-out;\r\n    }\r\n\r\n    \/* Wizard content styling *\/\r\n    .ibc-wizard-content {\r\n        padding: 0;\r\n    }\r\n\r\n    .ibc-step-wrapper {\r\n        text-align: center;\r\n        \/* Center the heading and content *\/\r\n    }\r\n\r\n    .ibc-step-wrapper h3 {\r\n        font-size: 26px;\r\n        \/* Slightly larger heading *\/\r\n        color: #3C3C3C;\r\n        \/* Darker text *\/\r\n        margin-bottom: 30px;\r\n        \/* Space below heading *\/\r\n        font-weight: 700;\r\n    }\r\n\r\n    \/* Form group for radio cards *\/\r\n    .ibc-form-group {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n        \/* Space between radio cards *\/\r\n        margin-bottom: 30px;\r\n        \/* Space before buttons *\/\r\n    }\r\n\r\n    \/* Radio card styling *\/\r\n    .ibc-radio-card {\r\n        display: block;\r\n        \/* Make the label itself block-level *\/\r\n        background-color: #fff;\r\n        \/* White background for unselected *\/\r\n        border: 2px solid #e5e5e5;\r\n        \/* Light grey border *\/\r\n        border-radius: 12px;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease-in-out;\r\n        position: relative;\r\n        \/* For input positioning *\/\r\n        height: 60px;\r\n        padding: 5px;\r\n    }\r\n\r\n\r\n    .ibc-radio-card:hover {\r\n        background-color: #fafafa;\r\n        border-color: #d0d0d0;\r\n    }\r\n\r\n    \/* Hide the actual radio input *\/\r\n    .ibc-radio-card input[type=\"radio\"] {\r\n        position: absolute;\r\n        opacity: 0;\r\n        width: 0;\r\n        height: 0;\r\n        pointer-events: none;\r\n        \/* Ensure it doesn't interfere with click *\/\r\n    }\r\n\r\n    \/* Style for the content inside the radio card *\/\r\n    .ibc-radio-card .ibc-card-content {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 18px 25px;\r\n        \/* Generous padding *\/\r\n    }\r\n\r\n    \/* Selected state for radio card *\/\r\n    .ibc-radio-card.selected {\r\n        background-color: #fff;\r\n        \/* Stays white for selected state *\/\r\n        border-color: #ff6e2b;\r\n        \/* Duolingo orange border *\/\r\n        box-shadow: 0 0 0 3px rgba(255, 110, 43, 0.2);\r\n        \/* Subtle orange glow *\/\r\n    }\r\n\r\n    \/* Icon styling *\/\r\n    .ibc-card-icon {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-right: 18px;\r\n        \/* Space between icon and text *\/\r\n        width: 32px;\r\n        \/* Icon container size *\/\r\n        height: 32px;\r\n    }\r\n\r\n    .ibc-card-icon svg {\r\n        width: 24px;\r\n        \/* SVG icon size *\/\r\n        height: 24px;\r\n        fill: #A8A8A8;\r\n        \/* Default grey icon color *\/\r\n        transition: fill 0.2s ease-in-out;\r\n    }\r\n\r\n    \/* Icon color when parent card is selected *\/\r\n    .ibc-radio-card.selected .ibc-card-icon svg {\r\n        fill: #ff6e2b;\r\n        \/* Orange icon color when selected *\/\r\n    }\r\n\r\n    \/* Text content within the radio card *\/\r\n    .ibc-radio-card strong {\r\n        font-size: 18px;\r\n        color: #3C3C3C;\r\n        display: block;\r\n        margin-bottom: 3px;\r\n        font-weight: 600;\r\n        \/* Semi-bold *\/\r\n    }\r\n\r\n    .ibc-radio-card p {\r\n        font-size: 14px;\r\n        color: #777;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* Buttons styling *\/\r\n    .ibc-buttons {\r\n        text-align: center;\r\n        \/* Center the buttons *\/\r\n    }\r\n\r\n    .ibc-action-button {\r\n        width: 100%;\r\n        \/* Full width button *\/\r\n        padding: 15px 20px;\r\n        border: none;\r\n        border-radius: 12px;\r\n        \/* More rounded button *\/\r\n        font-size: 18px;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        transition: background-color 0.2s ease, box-shadow 0.2s ease;\r\n        box-sizing: border-box;\r\n        \/* Include padding in button width *\/\r\n    }\r\n\r\n    .ibc-continue-button {\r\n        background-color: #ff6e2b;\r\n        \/* Duolingo orange *\/\r\n        color: #fff;\r\n        box-shadow: 0 4px 0 #e05e21;\r\n        \/* Darker orange shadow for depth *\/\r\n    }\r\n\r\n    .ibc-continue-button:hover {\r\n        background-color: #ff854d;\r\n        \/* Lighter orange on hover *\/\r\n        box-shadow: 0 2px 0 #e05e21;\r\n        \/* Smaller shadow on hover *\/\r\n    }\r\n\r\n    .ibc-continue-button:active {\r\n        background-color: #e05e21;\r\n        \/* Even darker orange on active *\/\r\n        box-shadow: none;\r\n        \/* No shadow on active *\/\r\n        transform: translateY(2px);\r\n        \/* Press in effect *\/\r\n    }\r\n\r\n    .ibc-back-button {\r\n        background-color: #e0e0e0;\r\n        \/* Grey background for back button *\/\r\n        color: #555;\r\n        margin-right: 10px;\r\n        \/* Space between back and continue *\/\r\n        box-shadow: 0 4px 0 #c0c0c0;\r\n    }\r\n\r\n    .ibc-back-button:hover {\r\n        background-color: #d0d0d0;\r\n        box-shadow: 0 2px 0 #c0c0c0;\r\n    }\r\n\r\n    .ibc-back-button:active {\r\n        background-color: #c0c0c0;\r\n        box-shadow: none;\r\n        transform: translateY(2px);\r\n    }\r\n\r\n    \/* Responsive adjustments *\/\r\n    @media (max-width: 600px) {\r\n        .ibc-wizard-container {\r\n\r\n            border-radius: 8px;\r\n            \/* Slightly less rounded on small screens *\/\r\n        }\r\n\r\n        .ibc-step-wrapper h3 {\r\n            font-size: 22px;\r\n        }\r\n\r\n        .ibc-radio-card .ibc-card-content {\r\n            padding: 15px 20px;\r\n        }\r\n\r\n        .ibc-radio-card strong {\r\n            font-size: 16px;\r\n        }\r\n\r\n        .ibc-radio-card p {\r\n            font-size: 13px;\r\n        }\r\n\r\n        .ibc-action-button {\r\n            font-size: 16px;\r\n            padding: 12px 15px;\r\n        }\r\n    }\r\n\r\n\r\n    .ibc-buttons {\r\n        display: flex;\r\n        \/* Makes the buttons arrange horizontally *\/\r\n        gap: 15px;\r\n        \/* Adds space between the buttons *\/\r\n        justify-content: center;\r\n        \/* Centers the button group *\/\r\n        width: 100%;\r\n        \/* Ensures the button container takes full width *\/\r\n    }\r\n\r\n    .ibc-action-button {\r\n        flex: 1;\r\n        \/* Makes both back and continue buttons take equal width *\/\r\n        padding: 15px 20px;\r\n        border: none;\r\n        border-radius: 12px;\r\n        font-size: 18px;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        transition: background-color 0.2s ease, box-shadow 0.2s ease;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .ibc-back-button {\r\n        background-color: #e0e0e0;\r\n        \/* Grey background *\/\r\n        color: #555;\r\n        \/* Darker text color *\/\r\n        box-shadow: 0 4px 0 #c0c0c0;\r\n        \/* Darker grey shadow for depth *\/\r\n    }\r\n\r\n    .ibc-back-button:hover {\r\n        background-color: #d0d0d0;\r\n        \/* Lighter grey on hover *\/\r\n        box-shadow: 0 2px 0 #c0c0c0;\r\n        \/* Smaller shadow on hover *\/\r\n    }\r\n\r\n    .ibc-back-button:active {\r\n        background-color: #c0c0c0;\r\n        \/* Even darker grey on active *\/\r\n        box-shadow: none;\r\n        \/* No shadow on active *\/\r\n        transform: translateY(2px);\r\n        \/* Press in effect *\/\r\n    }\r\n\r\n    \/* Radio card styling adjustments *\/\r\n    .ibc-radio-card .ibc-card-content {\r\n        display: flex;\r\n        \/* Keep flexbox for vertical alignment if needed, but for left align, it's the default *\/\r\n        align-items: center;\r\n        \/* Keep content vertically centered *\/\r\n        padding: 22px 25px;\r\n        \/* Increase top\/bottom padding to make the box slightly taller *\/\r\n        text-align: left;\r\n        \/* Ensure text is left-aligned within the card content *\/\r\n        \/* If you had a fixed height, remove it, and let padding control height *\/\r\n    }\r\n\r\n    \/* Text content within the radio card *\/\r\n    .ibc-radio-card strong {\r\n        font-size: 18px;\r\n        color: #3C3C3C;\r\n        display: block;\r\n        margin-bottom: 3px;\r\n        font-weight: 600;\r\n        text-align: left;\r\n        \/* Explicitly ensure this is left-aligned *\/\r\n    }\r\n\r\n    .ibc-radio-card p {\r\n        font-size: 14px;\r\n        color: #777;\r\n        margin: 0;\r\n        text-align: left;\r\n        \/* Explicitly ensure this is left-aligned *\/\r\n    }\r\n<\/style>\r\n\r\n<div class=\"ibc-step-wrapper\" data-step-slug=\"step-1-book-type\">\r\n    <h3>What kind of book would you like to create?<\/h3>\r\n    <div class=\"ibc-form-group\">\r\n        <label\r\n            class=\"ibc-radio-card \">\r\n            <input type=\"radio\" name=\"book_type\" value=\"Funny & Fantasy\" >\r\n            <div>\r\n                <strong>Funny &amp; Fantasy<\/strong>\r\n                <p>Think flip-flops, dragons, and heroic snack-saving missions.                <\/p>\r\n            <\/div>\r\n        <\/label>\r\n        <label\r\n            class=\"ibc-radio-card \">\r\n            <input type=\"radio\" name=\"book_type\" value=\"Emotional & Heartfelt Letter\" >\r\n            <div>\r\n                <strong>Emotional &amp; Heartfelt Letter<\/strong>\r\n                <p>A touching love letter turned into a beautiful book.                <\/p>\r\n            <\/div>\r\n        <\/label>\r\n    <\/div>\r\n    <div class=\"ibc-buttons\">\r\n        <button class=\"ibc-action-button ibc-back-button\"\r\n            disabled>Back<\/button>\r\n        <button\r\n            class=\"ibc-action-button ibc-continue-button\">Continue<\/button>\r\n    <\/div>\r\n<\/div>\r\n<script>\r\n    \/\/ Live update selected class for radio cards\r\n    jQuery(document).ready(function ($) {\r\n        $('.ibc-radio-card input[type=\"radio\"]').on('change', function () {\r\n            $('.ibc-radio-card').removeClass('selected');\r\n            if ($(this).is(':checked')) {\r\n                $(this).closest('.ibc-radio-card').addClass('selected');\r\n            }\r\n        });\r\n    });\r\n<\/script>                <\/div>\r\n            <\/div>\r\n            <div id=\"ibc-modal-container\" class=\"ibc-modal-container\"><\/div>\r\n        <\/div>\r\n        \n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\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":{"footnotes":""},"class_list":["post-100","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp.smvhost.in\/wordpress\/wp-json\/wp\/v2\/pages\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.smvhost.in\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.smvhost.in\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.smvhost.in\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.smvhost.in\/wordpress\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":6,"href":"https:\/\/wp.smvhost.in\/wordpress\/wp-json\/wp\/v2\/pages\/100\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/wp.smvhost.in\/wordpress\/wp-json\/wp\/v2\/pages\/100\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/wp.smvhost.in\/wordpress\/wp-json\/wp\/v2\/media?parent=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}