{"id":81,"date":"2025-07-16T18:22:18","date_gmt":"2025-07-16T18:22:18","guid":{"rendered":"https:\/\/drkleenbootay.com\/?page_id=81"},"modified":"2025-07-16T18:22:33","modified_gmt":"2025-07-16T18:22:33","slug":"ai-learning-tool","status":"publish","type":"page","link":"https:\/\/drkleenbootay.com\/?page_id=81","title":{"rendered":"AI Learning Tool"},"content":{"rendered":"        <style>\n        \/* Enhanced Inline CSS as fallback *\/\n        #ai-learning-container {\n            max-width: 700px;\n            margin: 30px auto;\n            padding: 40px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            border-radius: 20px;\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        #ai-learning-container::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"\/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"\/><\/pattern><\/defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"\/><\/svg>');\n            pointer-events: none;\n        }\n        \n        .form-container {\n            background: rgba(255, 255, 255, 0.95);\n            backdrop-filter: blur(10px);\n            border-radius: 15px;\n            padding: 30px;\n            position: relative;\n            z-index: 1;\n        }\n        \n        .form-group {\n            margin-bottom: 25px;\n        }\n        \n        .form-group label {\n            display: block;\n            margin-bottom: 12px;\n            font-weight: 600;\n            color: #2d3748;\n            font-size: 16px;\n            position: relative;\n        }\n        \n        .form-group label::after {\n            content: '\u2728';\n            margin-left: 8px;\n            opacity: 0.6;\n        }\n        \n        .form-group select, .form-group input[type=\"text\"] {\n            width: 100%;\n            padding: 16px 20px;\n            border: 2px solid #e2e8f0;\n            border-radius: 12px;\n            font-size: 16px;\n            transition: all 0.3s ease;\n            box-sizing: border-box;\n            background: #fff;\n            font-family: inherit;\n        }\n        \n        .form-group select:focus, .form-group input[type=\"text\"]:focus {\n            outline: none;\n            border-color: #667eea;\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n            transform: translateY(-2px);\n        }\n        \n        #submit-btn {\n            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);\n            color: white;\n            padding: 18px 35px;\n            border: none;\n            border-radius: 12px;\n            font-size: 18px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            width: 100%;\n            margin-top: 15px;\n            text-transform: none;\n            letter-spacing: 0.5px;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        #submit-btn::before {\n            content: '\ud83e\udde0';\n            margin-right: 10px;\n        }\n        \n        #submit-btn:hover {\n            background: linear-gradient(135deg, #ee5a6f 0%, #ff6b6b 100%);\n            transform: translateY(-3px);\n            box-shadow: 0 10px 25px rgba(238, 90, 111, 0.4);\n        }\n        \n        #loading {\n            text-align: center;\n            padding: 40px;\n            background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);\n            color: white;\n            border-radius: 15px;\n            margin-top: 25px;\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n            position: relative;\n            z-index: 1;\n        }\n        \n        #ai-response {\n            margin-top: 30px;\n            background: rgba(255, 255, 255, 0.95);\n            backdrop-filter: blur(10px);\n            border-radius: 15px;\n            padding: 30px;\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n            position: relative;\n            z-index: 1;\n        }\n        \n        #ai-response h3 {\n            color: #2d3748;\n            margin-top: 0;\n            margin-bottom: 25px;\n            font-size: 24px;\n            text-align: center;\n            font-weight: 700;\n        }\n        \n        #ai-response h3::before {\n            content: '\ud83c\udf93 ';\n        }\n        <\/style>\n        \n        <div id=\"ai-learning-container\">\n            <div class=\"form-container\">\n                <form id=\"ai-learning-form\" method=\"post\">\n                    <div class=\"form-group\">\n                        <label for=\"grade\">Select Your Grade:<\/label>\n                        <select id=\"grade\" name=\"grade\" required>\n                            <option value=\"\">Choose Grade<\/option>\n                            <option value=\"K\">Kindergarten<\/option>\n                            <option value=\"1\">1st Grade<\/option>\n                            <option value=\"2\">2nd Grade<\/option>\n                            <option value=\"3\">3rd Grade<\/option>\n                            <option value=\"4\">4th Grade<\/option>\n                            <option value=\"5\">5th Grade<\/option>\n                            <option value=\"6\">6th Grade<\/option>\n                            <option value=\"7\">7th Grade<\/option>\n                            <option value=\"8\">8th Grade<\/option>\n                            <option value=\"9\">9th Grade<\/option>\n                            <option value=\"10\">10th Grade<\/option>\n                            <option value=\"11\">11th Grade<\/option>\n                            <option value=\"12\">12th Grade<\/option>\n                            <option value=\"college\">College<\/option>\n                        <\/select>\n                    <\/div>\n                    \n                    <div class=\"form-group\">\n                        <label for=\"subject\">Select Subject:<\/label>\n                        <select id=\"subject\" name=\"subject\" required>\n                            <option value=\"\">Choose Subject<\/option>\n                            <option value=\"Mathematics\">Mathematics<\/option>\n                            <option value=\"Science\">Science<\/option>\n                            <option value=\"English\">English<\/option>\n                            <option value=\"History\">History<\/option>\n                            <option value=\"Geography\">Geography<\/option>\n                            <option value=\"Physics\">Physics<\/option>\n                            <option value=\"Chemistry\">Chemistry<\/option>\n                            <option value=\"Biology\">Biology<\/option>\n                            <option value=\"Business\">Business<\/option>\n                            <option value=\"Art\">Art<\/option>\n                            <option value=\"Music\">Music<\/option>\n                        <\/select>\n                    <\/div>\n                    \n                    <div class=\"form-group\">\n                        <label for=\"concept\">Word, Concept, or Theory:<\/label>\n                        <input type=\"text\" id=\"concept\" name=\"concept\" placeholder=\"What do you want to understand?\" required>\n                    <\/div>\n                    \n                    <button type=\"submit\" id=\"submit-btn\">Get Smart Explanation<\/button>\n                <\/form>\n            <\/div>\n            \n            <div id=\"loading\" style=\"display: none;\">\n                <p>\ud83e\udde0 Cooking up something awesome for you...<\/p>\n            <\/div>\n            \n            <div id=\"ai-response\" style=\"display: none;\">\n                <h3>Your Learning Buddy Explains<\/h3>\n                <div id=\"response-content\"><\/div>\n            <\/div>\n        <\/div>\n        \n        <script>\n        jQuery(document).ready(function($) {\n            $('#ai-learning-form').on('submit', function(e) {\n                e.preventDefault();\n                \n                var grade = $('#grade').val();\n                var subject = $('#subject').val();\n                var concept = $('#concept').val();\n                \n                if (!grade || !subject || !concept) {\n                    alert('Hey! Fill in all the fields first \ud83d\ude0a');\n                    return false;\n                }\n                \n                $('#loading').show();\n                $('#ai-response').hide();\n                $('#submit-btn').prop('disabled', true).text('\ud83e\udd14 Thinking...');\n                \n                $.post(\n                    'https:\/\/drkleenbootay.com\/wp-admin\/admin-ajax.php',\n                    {\n                        action: 'get_ai_explanation',\n                        nonce: 'd152d6c1bd',\n                        grade: grade,\n                        subject: subject,\n                        concept: concept\n                    },\n                    function(response) {\n                        $('#loading').hide();\n                        $('#submit-btn').prop('disabled', false).html('\ud83e\udde0 Get Smart Explanation');\n                        \n                        if (response.success) {\n                            $('#response-content').html('<div class=\"ai-wisdom\">' + response.data.replace(\/\\n\/g, '<br>') + '<\/div>');\n                            $('#ai-response').show();\n                        } else {\n                            alert('Oops! ' + response.data);\n                        }\n                    }\n                ).fail(function() {\n                    $('#loading').hide();\n                    $('#submit-btn').prop('disabled', false).html('\ud83e\udde0 Get Smart Explanation');\n                    alert('Connection hiccup! Try again? \ud83e\udd37\u200d\u2642\ufe0f');\n                });\n                \n                return false;\n            });\n        });\n        <\/script>\n        \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-81","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=81"}],"version-history":[{"count":2,"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/pages\/81\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}