{"id":536,"date":"2026-03-02T07:40:19","date_gmt":"2026-03-02T07:40:19","guid":{"rendered":"https:\/\/dflwf.com\/academy\/?page_id=536"},"modified":"2026-03-02T09:57:01","modified_gmt":"2026-03-02T09:57:01","slug":"ai","status":"publish","type":"page","link":"https:\/\/dflwf.com\/academy\/ai\/","title":{"rendered":"Ai"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"536\" class=\"elementor elementor-536\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2adc013 e-flex e-con-boxed e-con e-parent\" data-id=\"2adc013\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0a0b4e elementor-widget elementor-widget-html\" data-id=\"f0a0b4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* ========================================== *\/\r\n    \/* AI PAGE LIGHT THEME HERO SECTION           *\/\r\n    \/* ========================================== *\/\r\n    .ai-hero-light {\r\n        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);\r\n        padding: 80px 20px 50px 20px;\r\n        text-align: center;\r\n        border-bottom: 1px solid #e2e8f0;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* Subtle background grid pattern *\/\r\n    .ai-hero-light::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background-image: radial-gradient(#cbd5e1 1px, transparent 1px);\r\n        background-size: 30px 30px;\r\n        opacity: 0.3;\r\n        z-index: 0;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .ai-hero-content {\r\n        max-width: 900px;\r\n        margin: 0 auto;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .ai-hero-badge {\r\n        background: #fef9c3;\r\n        color: #b45309;\r\n        border: 1px solid #fde047;\r\n        padding: 8px 20px;\r\n        border-radius: 50px;\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        margin-bottom: 25px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        box-shadow: 0 4px 10px rgba(0,0,0,0.02);\r\n    }\r\n\r\n    .ai-hero-light h1 {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: clamp(2.2rem, 5vw, 4rem);\r\n        color: #1e3a8a; \/* Deep Navy Blue *\/\r\n        margin: 0 0 20px 0;\r\n        font-weight: 900;\r\n        letter-spacing: -1px;\r\n        line-height: 1.15;\r\n    }\r\n\r\n    .ai-hero-light h1 span {\r\n        color: #3b82f6; \/* Bright Blue Accent *\/\r\n    }\r\n\r\n    .ai-hero-light p {\r\n        font-size: 1.2rem;\r\n        color: #475569; \/* Slate Gray *\/\r\n        max-width: 750px;\r\n        margin: 0 auto 35px auto;\r\n        line-height: 1.7;\r\n        font-weight: 500;\r\n    }\r\n\r\n    \/* Floating Feature Pills *\/\r\n    .ai-hero-features {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 15px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .ai-feature-pill {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        color: #0f172a;\r\n        font-weight: 700;\r\n        font-size: 0.95rem;\r\n        background: #ffffff;\r\n        padding: 10px 20px;\r\n        border-radius: 50px;\r\n        box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);\r\n        border: 1px solid #e2e8f0;\r\n        transition: transform 0.2s ease;\r\n    }\r\n\r\n    .ai-feature-pill:hover {\r\n        transform: translateY(-3px);\r\n        border-color: #bae6fd;\r\n    }\r\n\r\n    .ai-feature-pill i {\r\n        color: #3b82f6;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    \/* Mobile Adjustments *\/\r\n    @media (max-width: 768px) {\r\n        .ai-hero-light { padding: 60px 20px 40px 20px; }\r\n        .ai-hero-light p { font-size: 1.05rem; }\r\n        .ai-hero-features { gap: 10px; }\r\n        .ai-feature-pill { padding: 8px 16px; font-size: 0.85rem; }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"ai-hero-light\">\r\n    <div class=\"ai-hero-content\">\r\n        \r\n        <div class=\"ai-hero-badge\">\r\n            <i class=\"fa-solid fa-bolt\"><\/i> DFL Smart Learning\r\n        <\/div>\r\n\r\n        <h1>Meet Prof. DFL: Your <span>24\/7 AI Tutor<\/span><\/h1>\r\n        \r\n        <p>Stuck on a tricky math equation? Need someone to proofread your English essay? Just ask Prof. DFL below for instant, step-by-step guidance tailored to the ICSE & CBSE syllabus.<\/p>\r\n\r\n        <div class=\"ai-hero-features\">\r\n            <div class=\"ai-feature-pill\">\r\n                <i class=\"fa-solid fa-clock\"><\/i> Available 24\/7\r\n            <\/div>\r\n            <div class=\"ai-feature-pill\">\r\n                <i class=\"fa-solid fa-camera\"><\/i> Scan & Solve Homework\r\n            <\/div>\r\n            <div class=\"ai-feature-pill\">\r\n                <i class=\"fa-solid fa-brain\"><\/i> Step-by-Step Logic\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4a808a2 e-flex e-con-boxed e-con e-parent\" data-id=\"4a808a2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-100e33f elementor-widget elementor-widget-html\" data-id=\"100e33f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>DFL Virtual Educator | Study Room<\/title>\r\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n    \r\n    <style>\r\n        \/* ========================================== *\/\r\n        \/* FULL PAGE LAYOUT & MODERN THEME            *\/\r\n        \/* ========================================== *\/\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@500;700;800&family=Montserrat:wght@800;900&display=swap');\r\n\r\n        body {\r\n            margin: 0;\r\n            padding: 0;\r\n            background-color: #f0f4f8; \/* Soft background *\/\r\n            font-family: 'Nunito', sans-serif;\r\n            color: #0f172a;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .page-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 20px;\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* REDESIGNED AI TEACHER (CLEAN & MODERN)     *\/\r\n        \/* ========================================== *\/\r\n        .ai-app-wrapper {\r\n            margin-top: 40px; \/* Space at the very top since header is removed *\/\r\n            margin-bottom: 80px;\r\n        }\r\n\r\n        #dfl-fw-chat { \r\n            width: 100%; \r\n            height: 75vh; \/* Takes up 75% of screen height *\/\r\n            min-height: 600px;\r\n            max-height: 800px;\r\n            display: flex; \r\n            flex-direction: column; \r\n            background: #ffffff; \r\n            border-radius: 20px; \r\n            border: 1px solid #e2e8f0; \r\n            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08); \r\n            overflow: hidden; \r\n        }\r\n\r\n        \/* Header Area *\/\r\n        .dfl-header { \r\n            background: linear-gradient(135deg, #1E3A8A 0%, #312E81 100%);\r\n            padding: 20px 25px; \r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            box-shadow: 0 4px 10px rgba(0,0,0,0.05);\r\n            z-index: 10;\r\n        }\r\n        \r\n        .dfl-header-title { display: flex; align-items: center; gap: 12px; }\r\n        \r\n        .ai-avatar-top {\r\n            width: 45px; height: 45px;\r\n            background: #FFD700;\r\n            border-radius: 50%;\r\n            display: flex; align-items: center; justify-content: center;\r\n            font-size: 1.4rem; color: #1E3A8A;\r\n        }\r\n\r\n        .dfl-header h1 { \r\n            font-family: 'Montserrat', sans-serif; \r\n            font-size: 1.4rem; \r\n            font-weight: 800; \r\n            color: #FFFFFF !important; \r\n            margin: 0; \r\n            letter-spacing: 1px; \r\n        }\r\n\r\n        .dfl-header p { margin: 0; color: #cbd5e1; font-size: 0.85rem; font-weight: 600; }\r\n        \r\n        .dfl-badge { \r\n            background: rgba(255, 255, 255, 0.15); \r\n            color: #FFFFFF; \r\n            padding: 6px 15px; \r\n            border-radius: 20px; \r\n            font-size: 0.85rem; \r\n            font-weight: 700; \r\n            border: 1px solid rgba(255,255,255,0.2);\r\n        }\r\n        .dfl-badge::before { content: ''; display: inline-block; width: 8px; height: 8px; background: #10B981; border-radius: 50%; margin-right: 6px; animation: blink 2s infinite; }\r\n        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }\r\n\r\n        \/* Chat History Background *\/\r\n        .dfl-history { \r\n            flex: 1; \r\n            overflow-y: auto; \r\n            padding: 25px; \r\n            display: flex; \r\n            flex-direction: column; \r\n            gap: 20px; \r\n            background-color: #f8fafc;\r\n            background-image: radial-gradient(#e2e8f0 1px, transparent 1px);\r\n            background-size: 20px 20px;\r\n        }\r\n        .dfl-history::-webkit-scrollbar { width: 6px; }\r\n        .dfl-history::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }\r\n\r\n        \/* Bubble Base *\/\r\n        .chat-bubble { \r\n            max-width: 80%; \r\n            padding: 16px 20px; \r\n            border-radius: 16px; \r\n            font-size: 1.05rem; \r\n            line-height: 1.6; \r\n            word-wrap: break-word; \r\n            box-shadow: 0 4px 6px rgba(0,0,0,0.02);\r\n            position: relative;\r\n        }\r\n\r\n        \/* AI Message (Clean White Card) *\/\r\n        .ai-msg { \r\n            align-self: flex-start; \r\n            background: #FFFFFF; \r\n            color: #334155; \r\n            border: 1px solid #e2e8f0;\r\n            border-bottom-left-radius: 4px; \r\n        }\r\n        \r\n        .ai-msg b, .ai-msg strong { color: #1E3A8A; font-weight: 800; }\r\n        .ai-msg ul, .ai-msg ol { margin-top: 8px; padding-left: 20px; }\r\n        .ai-msg li { margin-bottom: 5px; }\r\n        .ai-msg code { background: #f1f5f9; padding: 2px 6px; color: #dc2626; font-family: monospace; border-radius: 4px; }\r\n\r\n        \/* User Message (Soft Blue Card) *\/\r\n        .user-msg { \r\n            align-self: flex-end; \r\n            background: #E0E7FF; \r\n            color: #1e3a8a; \r\n            border-bottom-right-radius: 4px; \r\n            font-weight: 600;\r\n        }\r\n\r\n        \/* Input Area (Clean Floating Bar) *\/\r\n        .input-container-wrapper {\r\n            padding: 15px 20px;\r\n            background: #ffffff;\r\n            border-top: 1px solid #e2e8f0;\r\n        }\r\n\r\n        .input-container { \r\n            background: #f1f5f9; \r\n            border-radius: 50px; \r\n            display: flex; \r\n            align-items: center; \r\n            padding: 8px 15px; \r\n            border: 1px solid #e2e8f0; \r\n            transition: all 0.3s ease; \r\n        }\r\n        .input-container:focus-within { border-color: #3B82F6; background: #ffffff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }\r\n        \r\n        .input-container input[type=\"text\"] { \r\n            flex: 1; \r\n            background: transparent; \r\n            border: none; \r\n            color: #0f172a !important; \r\n            padding: 10px; \r\n            outline: none; \r\n            font-size: 1.05rem; \r\n            font-family: 'Nunito', sans-serif;\r\n        }\r\n        .input-container input::placeholder { color: #94a3b8 !important; }\r\n        \r\n        .icon-action { color: #64748b; font-size: 1.2rem; padding: 10px; cursor: pointer; transition: 0.2s; }\r\n        .icon-action:hover { color: #3B82F6; transform: scale(1.1); }\r\n        \r\n        .send-action { \r\n            background: #3B82F6; \r\n            color: #FFFFFF; \r\n            border: none; \r\n            width: 42px; \r\n            height: 42px; \r\n            border-radius: 50%; \r\n            cursor: pointer; \r\n            display: flex; align-items: center; justify-content: center; \r\n            font-size: 1.1rem; transition: 0.3s; margin-left: 8px; \r\n        }\r\n        .send-action:hover { background: #2563EB; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); }\r\n\r\n        \/* Image Tag *\/\r\n        #dfl-img-tag { display: none; position: absolute; top: -35px; left: 20px; background: #10B981; color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }\r\n\r\n        \/* ========================================== *\/\r\n        \/* MOBILE OPTIMIZATIONS                       *\/\r\n        \/* ========================================== *\/\r\n        @media (max-width: 768px) {\r\n            .ai-app-wrapper { margin-top: 20px; }\r\n            \/* Fix Chat Area for Mobile *\/\r\n            #dfl-fw-chat { height: 600px; min-height: unset; border-radius: 12px; }\r\n            .dfl-header { padding: 15px; flex-direction: column; gap: 10px; text-align: center; }\r\n            .dfl-header-title { flex-direction: column; gap: 5px; }\r\n            .dfl-badge { font-size: 0.75rem; padding: 4px 10px; }\r\n            \r\n            .dfl-history { padding: 15px 10px; gap: 15px; }\r\n            .chat-bubble { max-width: 90%; padding: 12px 15px; font-size: 0.95rem; }\r\n            \r\n            .input-container-wrapper { padding: 10px; }\r\n            .input-container input[type=\"text\"] { font-size: 0.95rem; padding: 8px; }\r\n            .send-action { width: 38px; height: 38px; font-size: 1rem; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <main class=\"page-container ai-app-wrapper\">\r\n        <div id=\"dfl-fw-chat\">\r\n            \r\n            <div class=\"dfl-header\">\r\n                <div class=\"dfl-header-title\">\r\n                    <div class=\"ai-avatar-top\"><i class=\"fa-solid fa-graduation-cap\"><\/i><\/div>\r\n                    <div>\r\n                        <h1>PROF. DFL<\/h1>\r\n                        <p>Virtual AI Educator<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <span class=\"dfl-badge\">System Online<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"dfl-history\" id=\"dfl-history-box\">\r\n                <div class=\"chat-bubble ai-msg\">\r\n                    <b>Hello there!<\/b> \ud83d\udc4b<br><br>I am Prof. DFL. I can help you solve math problems, explain history, or check your grammar. Type your question below, or use the paperclip icon to upload a picture of your assignment!\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"input-container-wrapper\">\r\n                <div style=\"position: relative;\">\r\n                    <div id=\"dfl-img-tag\"><i class=\"fa-solid fa-check\"><\/i> Image Ready<\/div>\r\n                    \r\n                    <div class=\"input-container\">\r\n                        <input type=\"file\" id=\"dfl-upload\" accept=\"image\/png, image\/jpeg, image\/webp\" style=\"display: none;\">\r\n                        <label for=\"dfl-upload\" class=\"icon-action\" title=\"Attach Assignment\">\r\n                            <i class=\"fa-solid fa-paperclip\"><\/i>\r\n                        <\/label>\r\n                        \r\n                        <input type=\"text\" id=\"dfl-text-input\" placeholder=\"Message Prof. DFL...\" onkeypress=\"dflTriggerEnter(event)\">\r\n                        \r\n                        <button class=\"send-action\" id=\"dfl-submit-btn\" onclick=\"executeDFLQuery()\" title=\"Send\">\r\n                            <i class=\"fa-solid fa-arrow-up\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/main>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DFL Smart Learning Meet Prof. DFL: Your 24\/7 AI Tutor Stuck on a tricky math equation? Need someone to proofread your English essay? Just ask Prof. DFL below for instant, step-by-step guidance tailored to the ICSE &#038; CBSE syllabus. Available 24\/7 Scan &#038; Solve Homework Step-by-Step Logic DFL Virtual Educator | Study Room PROF. DFL&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-536","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PgWxZe-8E","_links":{"self":[{"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/pages\/536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/comments?post=536"}],"version-history":[{"count":25,"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/pages\/536\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/pages\/536\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/dflwf.com\/academy\/wp-json\/wp\/v2\/media?parent=536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}