{"id":364,"date":"2026-07-12T05:30:30","date_gmt":"2026-07-12T05:30:30","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=364"},"modified":"2026-07-27T16:48:07","modified_gmt":"2026-07-27T16:48:07","slug":"364-2","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/364-2\/","title":{"rendered":"Lesson Plan with Excel"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Academic Lesson Plan Generator Tool<\/title>\n    <!-- Stable CDN for Lucide Icons -->\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n    <!-- SheetJS for real Excel (.xlsx) export -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/xlsx@0.18.5\/dist\/xlsx.full.min.js\"><\/script>\n    <!-- html2canvas for High Resolution DOM Capturing to PNG Image -->\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n    <style>\n        \/* ==========================================================================\n           COMPREHENSIVE UI THEME & ISOLATED WORDPRESS SCOPED STYLES\n           ========================================================================== *\/\n        :root {\n            --lpg-bg-primary: #f8fafc;\n            --lpg-bg-sidebar: #ffffff;\n            --lpg-bg-card: #ffffff;\n            --lpg-border-color: #e2e8f0;\n            --lpg-text-main: #0f172a;\n            --lpg-text-muted: #64748b;\n            --lpg-primary-action: #2563eb;\n            --lpg-primary-action-hover: #1d4ed8;\n            --lpg-success-action: #16a34a;\n            --lpg-danger-action: #dc2626;\n            --lpg-accent-light: #f1f5f9;\n            --lpg-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);\n            --lpg-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);\n            --lpg-transition-speed: 0.2s;\n            --lpg-radius-ui: 12px;\n            \n            \/* Academic Print Properties *\/\n            --lpg-print-font-size: 10.5px;\n            --lpg-print-font-family: 'Times New Roman', Times, serif;\n            --lpg-print-header-bg: #f4f4f5;\n            --lpg-print-highlight-bg: #fef08a;\n            --lpg-print-border-thickness: 1px;\n            --lpg-print-row-padding: 3px;\n        }\n\n        .lpg-dark-theme {\n            --lpg-bg-primary: #0f172a;\n            --lpg-bg-sidebar: #1e293b;\n            --lpg-bg-card: #1e293b;\n            --lpg-border-color: #334155;\n            --lpg-text-main: #f8fafc;\n            --lpg-text-muted: #94a3b8;\n            --lpg-primary-action: #3b82f6;\n            --lpg-primary-action-hover: #60a5fa;\n            --lpg-accent-light: #334155;\n        }\n\n        #lpg-app-root {\n            all: unset;\n            box-sizing: border-box;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            background-color: var(--lpg-bg-primary);\n            color: var(--lpg-text-main);\n            display: flex;\n            width: 100%;\n            height: 90vh;\n            min-height: 650px;\n            border-radius: var(--lpg-radius-ui);\n            overflow: hidden;\n            border: 1px solid var(--lpg-border-color);\n            position: relative;\n        }\n\n        #lpg-app-root * {\n            box-sizing: border-box;\n        }\n\n        \/* Sidebar Mechanics *\/\n        .lpg-sidebar {\n            width: 400px;\n            background-color: var(--lpg-bg-sidebar);\n            border-right: 1px solid var(--lpg-border-color);\n            display: flex;\n            flex-direction: column;\n            flex-shrink: 0;\n            z-index: 10;\n        }\n\n        .lpg-sidebar-header {\n            padding: 1.25rem;\n            border-bottom: 1px solid var(--lpg-border-color);\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .lpg-sidebar-header h2 {\n            margin: 0;\n            font-size: 1.25rem;\n            font-weight: 700;\n            color: var(--lpg-primary-action);\n        }\n\n        .lpg-tabs-nav {\n            display: flex;\n            background-color: var(--lpg-bg-primary);\n            padding: 0.25rem;\n            margin: 0.75rem 1.25rem;\n            border-radius: var(--lpg-radius-ui);\n        }\n\n        .lpg-tab-btn {\n            flex: 1;\n            padding: 0.5rem;\n            border: none;\n            background: transparent;\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: var(--lpg-text-muted);\n            cursor: pointer;\n            border-radius: calc(var(--lpg-radius-ui) - 4px);\n            transition: all var(--lpg-transition-speed);\n        }\n\n        .lpg-tab-btn.lpg-active {\n            background-color: var(--lpg-bg-sidebar);\n            color: var(--lpg-text-main);\n            box-shadow: var(--lpg-shadow-sm);\n        }\n\n        .lpg-tab-content-wrapper {\n            flex: 1;\n            overflow-y: auto;\n            padding: 0 1.25rem 1.25rem 1.25rem;\n        }\n\n        .lpg-tab-pane {\n            display: none;\n        }\n\n        .lpg-tab-pane.lpg-active {\n            display: block;\n        }\n\n        \/* Form Controls *\/\n        .lpg-form-group {\n            border: none;\n            margin: 0 0 1.25rem 0;\n            padding: 0;\n        }\n\n        .lpg-form-group legend {\n            font-size: 0.85rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n            color: var(--lpg-text-muted);\n            margin-bottom: 0.75rem;\n            width: 100%;\n            border-bottom: 1px solid var(--lpg-border-color);\n            padding-bottom: 0.25rem;\n        }\n\n        .lpg-form-row {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 0.75rem;\n        }\n\n        .lpg-control-label {\n            display: block;\n            font-size: 0.8rem;\n            font-weight: 600;\n            margin-bottom: 0.35rem;\n            color: var(--lpg-text-main);\n        }\n\n        .lpg-input-field, .lpg-select-field, .lpg-textarea-field {\n            width: 100%;\n            padding: 0.6rem 0.75rem;\n            border: 1px solid var(--lpg-border-color);\n            border-radius: 8px;\n            background-color: var(--lpg-bg-primary);\n            color: var(--lpg-text-main);\n            font-size: 0.9rem;\n            margin-bottom: 0.85rem;\n            transition: border-color var(--lpg-transition-speed);\n        }\n\n        .lpg-input-field:focus, .lpg-select-field:focus, .lpg-textarea-field:focus {\n            outline: none;\n            border-color: var(--lpg-primary-action);\n        }\n\n        \/* Interactive Action Buttons *\/\n        .lpg-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 0.5rem;\n            padding: 0.6rem 1rem;\n            font-size: 0.85rem;\n            font-weight: 600;\n            border-radius: 8px;\n            border: 1px solid transparent;\n            cursor: pointer;\n            transition: transform 0.1s, background-color var(--lpg-transition-speed);\n        }\n\n        .lpg-btn:active { transform: scale(0.98); }\n        .lpg-btn-block { display: flex; width: 100%; }\n        .lpg-btn-sm { padding: 0.35rem 0.75rem; font-size: 0.75rem; border-radius: 6px; }\n        .lpg-btn-primary { background-color: var(--lpg-primary-action); color: #ffffff; }\n        .lpg-btn-primary:hover { background-color: var(--lpg-primary-action-hover); }\n        .lpg-btn-secondary { background-color: var(--lpg-accent-light); color: var(--lpg-text-main); border-color: var(--lpg-border-color); }\n        .lpg-btn-secondary:hover { background-color: var(--lpg-border-color); }\n        .lpg-btn-success { background-color: var(--lpg-success-action); color: #ffffff; }\n        .lpg-btn-danger { background-color: var(--lpg-danger-action); color: #ffffff; }\n\n        .lpg-input-mode-selector {\n            display: flex;\n            border-radius: 8px;\n            overflow: hidden;\n            border: 1px solid var(--lpg-border-color);\n            margin-bottom: 1.25rem;\n        }\n\n        .lpg-input-mode-selector .lpg-btn-toggle {\n            flex: 1;\n            border-radius: 0;\n            background-color: var(--lpg-bg-primary);\n            color: var(--lpg-text-muted);\n            border: none;\n            padding: 0.5rem;\n            font-weight: 600;\n            cursor: pointer;\n        }\n\n        .lpg-input-mode-selector .lpg-btn-toggle.lpg-active {\n            background-color: var(--lpg-primary-action);\n            color: #ffffff;\n        }\n\n        .lpg-mode-container { display: none; }\n        .lpg-mode-container.lpg-active { display: block; }\n\n        \/* Module Tree Elements Node UI *\/\n        .lpg-module-node {\n            background-color: var(--lpg-bg-primary);\n            border: 1px solid var(--lpg-border-color);\n            border-radius: 8px;\n            padding: 0.85rem;\n            margin-bottom: 1rem;\n        }\n\n        .lpg-module-node-header {\n            display: flex;\n            align-items: center;\n            gap: 0.35rem;\n            margin-bottom: 0.75rem;\n        }\n\n        .lpg-module-node-header input {\n            margin-bottom: 0;\n            font-weight: 700;\n            flex: 1;\n        }\n\n        .lpg-topics-list-container {\n            margin-left: 0.25rem;\n            border-left: 2px dashed var(--lpg-border-color);\n            padding-left: 0.5rem;\n        }\n\n        .lpg-topic-node-item {\n            display: flex;\n            align-items: center;\n            gap: 0.35rem;\n            margin-bottom: 0.4rem;\n        }\n\n        .lpg-topic-node-item input { margin-bottom: 0; flex: 1; }\n\n        .lpg-node-action-btn {\n            background: transparent;\n            border: none;\n            cursor: pointer;\n            padding: 0.2rem;\n            color: var(--lpg-text-muted);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 4px;\n        }\n        .lpg-node-action-btn:hover { background-color: var(--lpg-border-color); color: var(--lpg-text-main); }\n\n        .lpg-search-replace-box {\n            display: grid;\n            grid-template-columns: 1fr 1fr auto;\n            gap: 0.4rem;\n            margin-bottom: 1rem;\n        }\n        .lpg-search-replace-box input { margin-bottom: 0; font-size: 0.8rem; }\n\n        .lpg-sidebar-footer-actions {\n            padding: 1rem;\n            border-top: 1px solid var(--lpg-border-color);\n            background-color: var(--lpg-bg-sidebar);\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 0.5rem;\n        }\n\n        \/* Workspace and Frame Presentation Area *\/\n        .lpg-main-workspace {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n\n        .lpg-action-ribbon {\n            height: 60px;\n            background-color: var(--lpg-bg-sidebar);\n            border-bottom: 1px solid var(--lpg-border-color);\n            padding: 0 1.5rem;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            flex-shrink: 0;\n        }\n\n        .lpg-stats-counter-badge {\n            background-color: var(--lpg-accent-light);\n            color: var(--lpg-text-main);\n            padding: 0.35rem 0.75rem;\n            border-radius: 50px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            border: 1px solid var(--lpg-border-color);\n        }\n\n        .lpg-ribbon-right-controls {\n            display: flex;\n            gap: 0.5rem;\n            align-items: center;\n        }\n\n        .lpg-dropdown-wrapper {\n            position: relative;\n            display: inline-block;\n        }\n\n        .lpg-dropdown-menu-list {\n            display: none;\n            position: absolute;\n            right: 0;\n            top: 100%;\n            background-color: var(--lpg-bg-sidebar);\n            border: 1px solid var(--lpg-border-color);\n            border-radius: 8px;\n            box-shadow: var(--lpg-shadow-md);\n            z-index: 100;\n            min-width: 200px;\n            padding: 0.4rem 0;\n        }\n\n        .lpg-dropdown-wrapper:hover .lpg-dropdown-menu-list {\n            display: block;\n        }\n\n        .lpg-dropdown-menu-list button {\n            width: 100%;\n            padding: 0.5rem 1rem;\n            text-align: left;\n            background: transparent;\n            border: none;\n            color: var(--lpg-text-main);\n            font-size: 0.85rem;\n            cursor: pointer;\n        }\n        .lpg-dropdown-menu-list button:hover { background-color: var(--lpg-accent-light); }\n\n        .lpg-file-input-wrapper input[type=\"file\"] { display: none; }\n\n        .lpg-preview-scroll-container {\n            flex: 1;\n            overflow: auto;\n            padding: 2rem;\n            background-color: #475569;\n            display: flex;\n            justify-content: center;\n        }\n\n        .lpg-dark-theme .lpg-preview-scroll-container { background-color: #0f172a; }\n\n        \/* ==========================================================================\n           ACADEMIC RENDER FRAME SHEET SPECIFICATIONS\n           ========================================================================== *\/\n        .lpg-academic-sheet-output {\n            background-color: #ffffff;\n            color: #000000 !important;\n            box-shadow: 0 10px 25px rgba(0,0,0,0.25);\n            font-family: var(--lpg-print-font-family);\n            font-size: var(--lpg-print-font-size);\n            position: relative;\n            box-sizing: border-box;\n            display: flex;\n            flex-direction: column;\n        }\n\n        \/* Dynamic Media Size Matrix definitions *\/\n        .lpg-academic-sheet-output.lpg-size-a4-portrait { width: 210mm; min-height: 297mm; }\n        .lpg-academic-sheet-output.lpg-size-a4-landscape { width: 297mm; min-height: 210mm; }\n        .lpg-academic-sheet-output.lpg-size-letter-portrait { width: 216mm; min-height: 279mm; }\n        .lpg-academic-sheet-output.lpg-size-legal-portrait { width: 216mm; min-height: 356mm; }\n\n        \/* Structural Page Padding Margins *\/\n        .lpg-academic-sheet-output.lpg-margin-normal { padding: 6mm 15mm 10mm 15mm; }\n        .lpg-academic-sheet-output.lpg-margin-narrow { padding: 4mm 10mm 8mm 10mm; }\n        .lpg-academic-sheet-output.lpg-margin-wide { padding: 10mm 25mm 15mm 25mm; }\n\n        .lpg-sheet-header-container {\n            display: flex;\n            align-items: center;\n            border-bottom: calc(var(--lpg-print-border-thickness) + 1px) solid #000000;\n            padding-bottom: 0.3rem;\n            margin-bottom: 0.5rem;\n            gap: 1.5rem;\n        }\n\n        .lpg-sheet-logo-placeholder {\n            width: 50px;\n            height: 50px;\n            flex-shrink: 0;\n            border: 1px dashed #cbd5e1;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        .lpg-sheet-logo-placeholder img { width: 100%; height: 100%; object-fit: contain; }\n\n        .lpg-sheet-title-layout {\n            flex: 1;\n            text-align: center;\n        }\n\n        .lpg-sheet-title-layout h1 { font-size: 1.2rem; font-weight: 800; margin: 0; text-transform: uppercase; line-height: 1.1; }\n        .lpg-sheet-title-layout h3 { font-size: 0.85rem; font-weight: 600; margin: 0.1rem 0 0 0; }\n\n        .lpg-metadata-grid-table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-bottom: 0.5rem;\n        }\n\n        .lpg-metadata-grid-table td {\n            border: var(--lpg-print-border-thickness) solid #000000;\n            padding: 3px 5px;\n            font-size: calc(var(--lpg-print-font-size) - 0.5px);\n            vertical-align: middle;\n            color: #000000 !important;\n            background-color: #ffffff;\n        }\n\n        .lpg-metadata-grid-table td.lpg-lbl {\n            font-weight: 700;\n            background-color: var(--lpg-print-header-bg);\n            width: 18%;\n        }\n        .lpg-metadata-grid-table td.lpg-val {\n            width: 32%;\n        }\n\n        \/* Central Analytical Grid Data Matrix *\/\n        .lpg-lesson-matrix-table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-bottom: 0.75rem;\n            table-layout: fixed;\n        }\n\n        .lpg-lesson-matrix-table th, \n        .lpg-lesson-matrix-table td {\n            border: var(--lpg-print-border-thickness) solid #000000;\n            padding: var(--lpg-print-row-padding) 4px;\n            text-align: left;\n            vertical-align: middle;\n            word-wrap: break-word;\n            overflow-wrap: break-word;\n            color: #000000 !important;\n            background-color: #ffffff;\n        }\n\n        .lpg-lesson-matrix-table th {\n            background-color: var(--lpg-print-header-bg);\n            font-weight: 700;\n            text-align: center;\n            font-size: calc(var(--lpg-print-font-size) - 0.5px);\n            text-transform: uppercase;\n        }\n\n        .lpg-lesson-matrix-table tr.lpg-module-heading-row td {\n            background-color: var(--lpg-print-highlight-bg) !important;\n            font-weight: 700;\n            font-size: calc(var(--lpg-print-font-size) + 0.5px);\n            padding: calc(var(--lpg-print-row-padding) + 1px) 4px;\n        }\n\n        .lpg-text-center { text-align: center !important; }\n\n        \/* Attestation Signatures Panel Frame Block *\/\n        .lpg-signature-attestation-panel {\n            display: flex;\n            justify-content: space-between;\n            margin-top: 0.5rem;\n            padding-top: 2rem;\n            page-break-inside: avoid;\n        }\n\n        .lpg-sig-block-element {\n            width: 220px;\n            text-align: center;\n        }\n        .lpg-sig-line-rule {\n            border-bottom: 1.5px solid #000000;\n            margin-bottom: 0.4rem;\n            width: 100%;\n            height: 1px;\n        }\n        .lpg-sig-label-title { font-weight: 700; font-size: calc(var(--lpg-print-font-size) - 0.5px); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }\n        .lpg-sig-sub-name { font-size: calc(var(--lpg-print-font-size) - 1.5px); margin: 0.15rem 0 0 0; color: #000000; font-weight: 500; }\n\n        .lpg-sheet-institutional-footer {\n            text-align: center;\n            font-size: 8px;\n            color: #64748b;\n            border-top: 1px solid #cbd5e1;\n            padding-top: 0.2rem;\n            margin-top: 0.75rem;\n        }\n\n        \/* ==========================================================================\n           RESPONSIVE RE-MECHANIZATION OVERRIDES (BREAKPOINTS)\n           ========================================================================== *\/\n        @media (max-width: 1024px) {\n            #lpg-app-root { flex-direction: column; height: auto; }\n            .lpg-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--lpg-border-color); }\n            .lpg-preview-scroll-container { padding: 1rem; overflow-x: auto; }\n            .lpg-academic-sheet-output { transform: scale(0.9); transform-origin: top center; }\n        }\n\n        @media (max-width: 768px) {\n            .lpg-form-row { grid-template-columns: 1fr; gap: 0; }\n            .lpg-action-ribbon { flex-direction: column; height: auto; padding: 1rem; gap: 0.75rem; }\n            .lpg-ribbon-right-controls { flex-wrap: wrap; justify-content: center; }\n            .lpg-academic-sheet-output { transform: scale(0.7); }\n        }\n\n        \/* ==========================================================================\n           DISABLE NATIVE PRINT LAYOUT MECHANICS ENTIRELY\n           ========================================================================== *\/\n        @media print {\n            html, body, #lpg-app-root {\n                display: none !important;\n                visibility: hidden !important;\n                opacity: 0 !important;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div id=\"lpg-app-root\" class=\"lpg-light-theme\">\n        <!-- Control Dashboard Configurator Panel -->\n        <aside class=\"lpg-sidebar no-print\">\n            <div class=\"lpg-sidebar-header\">\n                <h2>PlanCraft Canvas<\/h2>\n                <button id=\"lpg-themeToggleBtn\" class=\"lpg-btn lpg-btn-secondary lpg-btn-sm\" title=\"Toggle Theme Layout\">\ud83c\udf13 Theme<\/button>\n            <\/div>\n            \n            <nav class=\"lpg-tabs-nav\">\n                <button class=\"lpg-tab-btn lpg-active\" data-lpg-target=\"lpg-metaTab\">Metadata<\/button>\n                <button class=\"lpg-tab-btn\" data-lpg-target=\"lpg-syllabusTab\">Syllabus<\/button>\n                <button class=\"lpg-tab-btn\" data-lpg-target=\"lpg-styleTab\">Styles<\/button>\n            <\/nav>\n\n            <div class=\"lpg-tab-content-wrapper\">\n                <!-- Configurator Tab 1: Institution Meta Strings Matrix -->\n                <div id=\"lpg-metaTab\" class=\"lpg-tab-pane lpg-active\">\n                    <fieldset class=\"lpg-form-group\">\n                        <legend>Institution Headers<\/legend>\n                        <label class=\"lpg-control-label\" for=\"lpg-instName\">Institute Name<\/label>\n                        <input type=\"text\" id=\"lpg-instName\" class=\"lpg-input-field\" value=\"Bihar Engineering University, Patna\">\n                        \n                        <label class=\"lpg-control-label\" for=\"lpg-deptName\">Department Name<\/label>\n                        <input type=\"text\" id=\"lpg-deptName\" class=\"lpg-input-field\" value=\"Department of Computer Science &amp; Engineering\">\n                        \n                        <label class=\"lpg-control-label\" for=\"lpg-univName\">University Name<\/label>\n                        <input type=\"text\" id=\"lpg-univName\" class=\"lpg-input-field\" value=\"BEU, Patna\">\n                        \n                        <label class=\"lpg-control-label\" for=\"lpg-logoUpload\">Institute Logo Image<\/label>\n                        <input type=\"file\" id=\"lpg-logoUpload\" class=\"lpg-input-field\" accept=\"image\/*\">\n                    <\/fieldset>\n\n                    <fieldset class=\"lpg-form-group\">\n                        <legend>Course Definition Params<\/legend>\n                        <div class=\"lpg-form-row\">\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-courseName\">Course Title<\/label>\n                                <input type=\"text\" id=\"lpg-courseName\" class=\"lpg-input-field\" value=\"Theory of Computation\">\n                            <\/div>\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-courseCode\">Course Code<\/label>\n                                <input type=\"text\" id=\"lpg-courseCode\" class=\"lpg-input-field\" value=\"CS-1503\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"lpg-form-row\">\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-semester\">Semester<\/label>\n                                <input type=\"text\" id=\"lpg-semester\" class=\"lpg-input-field\" value=\"V Semester\">\n                            <\/div>\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-branch\">Branch<\/label>\n                                <input type=\"text\" id=\"lpg-branch\" class=\"lpg-input-field\" value=\"CSE\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"lpg-form-row\">\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-facultyName\">Faculty Name<\/label>\n                                <input type=\"text\" id=\"lpg-facultyName\" class=\"lpg-input-field\" value=\"Prof. R. K. Singh\">\n                            <\/div>\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-acadSession\">Academic Session<\/label>\n                                <input type=\"text\" id=\"lpg-acadSession\" class=\"lpg-input-field\" value=\"2026-2027\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"lpg-form-row\">\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-classStrength\">Class Strength<\/label>\n                                <input type=\"number\" id=\"lpg-classStrength\" class=\"lpg-input-field\" value=\"60\">\n                            <\/div>\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-credits\">Credits<\/label>\n                                <input type=\"number\" id=\"lpg-credits\" class=\"lpg-input-field\" value=\"4\">\n                            <\/div>\n                        <\/div>\n                    <\/fieldset>\n\n                    <fieldset class=\"lpg-form-group\">\n                        <legend>Workflow Attestation Authorities<\/legend>\n                        <label class=\"lpg-control-label\" for=\"lpg-coordName\">Course Coordinator<\/label>\n                        <input type=\"text\" id=\"lpg-coordName\" class=\"lpg-input-field\" value=\"Prof. R. K. Singh\">\n                        \n                        <label class=\"lpg-control-label\" for=\"lpg-hodName\">HOD Name<\/label>\n                        <input type=\"text\" id=\"lpg-hodName\" class=\"lpg-input-field\" value=\"Dr. A. B. Verma\">\n                        \n                        <label class=\"lpg-control-label\" for=\"lpg-footerText\">Custom Document Footer<\/label>\n                        <input type=\"text\" id=\"lpg-footerText\" class=\"lpg-input-field\" value=\"Document Ref: BEU\/CSE\/2026\/LP - Internal Academic Audit Document.\">\n                    <\/fieldset>\n                <\/div>\n\n                <!-- Configurator Tab 2: Curricular Struct Parser Engine -->\n                <div id=\"lpg-syllabusTab\" class=\"lpg-tab-pane\">\n                    <div class=\"lpg-input-mode-selector\">\n                        <button id=\"lpg-modeManualBtn\" class=\"lpg-btn-toggle lpg-active\">Manual Layout<\/button>\n                        <button id=\"lpg-modePasteBtn\" class=\"lpg-btn-toggle\">Paste Text<\/button>\n                    <\/div>\n\n                    <!-- Layout Submode 1: Interactive CRUD Tree Node Mechanics -->\n                    <div id=\"lpg-manualModeContainer\" class=\"lpg-mode-container lpg-active\">\n                        <div class=\"lpg-search-replace-box\">\n                            <input type=\"text\" id=\"lpg-searchTopicInput\" class=\"lpg-input-field\" placeholder=\"Search string...\">\n                            <input type=\"text\" id=\"lpg-replaceTopicInput\" class=\"lpg-input-field\" placeholder=\"Replace string...\">\n                            <button id=\"lpg-execReplaceBtn\" class=\"lpg-btn lpg-btn-secondary lpg-btn-sm\">Swap<\/button>\n                        <\/div>\n                        <div id=\"lpg-modulesTreeRootContainer\"><\/div>\n                        <button id=\"lpg-addModuleBtn\" class=\"lpg-btn lpg-btn-primary lpg-btn-block\" style=\"margin-top: 1rem;\">+ Add New Module<\/button>\n                    <\/div>\n\n                    <!-- Layout Submode 2: Text Processor Engine Sandbox -->\n                    <div id=\"lpg-pasteModeContainer\" class=\"lpg-mode-container\">\n                        <label class=\"lpg-control-label\" for=\"lpg-rawSyllabusInput\">Raw Structural Syllabus Block<\/label>\n                        <textarea id=\"lpg-rawSyllabusInput\" class=\"lpg-textarea-field\" rows=\"12\" placeholder=\"Module 1\nAlphabet Languages\nGrammar Productions\nFinite Automata\n\nModule 2\nRegular Expressions\nDFA and NFA Mechanics\"><\/textarea>\n                        <button id=\"lpg-parseSyllabusBtn\" class=\"lpg-btn lpg-btn-success lpg-btn-block\">Parse Content and Overwrite Canvas<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Configurator Tab 3: Design Adjuster Parameters Sheet -->\n                <div id=\"lpg-styleTab\" class=\"lpg-tab-pane\">\n                    <fieldset class=\"lpg-form-group\">\n                        <legend>Grid Metric Canvas Sizes<\/legend>\n                        <label class=\"lpg-control-label\" for=\"lpg-pageSizeSelect\">Layout Dimension Profiles<\/label>\n                        <select id=\"lpg-pageSizeSelect\" class=\"lpg-select-field\">\n                            <option value=\"lpg-size-a4-portrait\">A4 Portrait Standard<\/option>\n                            <option value=\"lpg-size-a4-landscape\">A4 Landscape Canvas<\/option>\n                            <option value=\"lpg-size-letter-portrait\">Letter Dimensions<\/option>\n                            <option value=\"lpg-size-legal-portrait\">Legal Format Sheet<\/option>\n                        <\/select>\n\n                        <label class=\"lpg-control-label\" for=\"lpg-pageMarginSelect\">Document Margins Boundary<\/label>\n                        <select id=\"lpg-pageMarginSelect\" class=\"lpg-select-field\">\n                            <option value=\"lpg-margin-normal\">Normal Matrix Margins<\/option>\n                            <option value=\"lpg-margin-narrow\">Dense Space Narrow<\/option>\n                            <option value=\"lpg-margin-wide\">Extended Safe Wide<\/option>\n                        <\/select>\n                    <\/fieldset>\n\n                    <fieldset class=\"lpg-form-group\">\n                        <legend>Academic Grid Typography &amp; Colors<\/legend>\n                        <label class=\"lpg-control-label\" for=\"lpg-fontFamilySelect\">Primary Grid Text Typeface<\/label>\n                        <select id=\"lpg-fontFamilySelect\" class=\"lpg-select-field\">\n                            <option value=\"'Times New Roman', Times, serif\">Times New Roman (Traditional Academic)<\/option>\n                            <option value=\"Arial, sans-serif\">Arial MT Functional<\/option>\n                            <option value=\"Georgia, serif\">Georgia High Contrast<\/option>\n                            <option value=\"'Courier New', Courier, monospace\">Technical Courier Matrix<\/option>\n                        <\/select>\n\n                        <label class=\"lpg-control-label\" for=\"lpg-fontSizeSelect\">Base Typography Output Sizing<\/label>\n                        <select id=\"lpg-fontSizeSelect\" class=\"lpg-select-field\">\n                            <option value=\"10px\">10px Ultra Dense Matrix<\/option>\n                            <option value=\"10.5px\" selected>10.5px Optimal Compact Matrix<\/option>\n                            <option value=\"12px\">12px Standard Board Sheet<\/option>\n                            <option value=\"13px\">13px Expanded Type Matrix<\/option>\n                        <\/select>\n\n                        <div class=\"lpg-form-row\">\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-headerColorInput\">Labels Background<\/label>\n                                <input type=\"color\" id=\"lpg-headerColorInput\" class=\"lpg-input-field\" style=\"height:38px; padding:2px;\" value=\"#f4f4f5\">\n                            <\/div>\n                            <div>\n                                <label class=\"lpg-control-label\" for=\"lpg-highlightColorInput\">Highlight Color<\/label>\n                                <input type=\"color\" id=\"lpg-highlightColorInput\" class=\"lpg-input-field\" style=\"height:38px; padding:2px;\" value=\"#fef08a\">\n                            <\/div>\n                        <\/div>\n\n                        <label class=\"lpg-control-label\" for=\"lpg-borderThicknessSelect\">Grid Table Borders Weight<\/label>\n                        <select id=\"lpg-borderThicknessSelect\" class=\"lpg-select-field\">\n                            <option value=\"1px\" selected>1px Elegant Hairline Border<\/option>\n                            <option value=\"2px\">2px Traditional Dense Weight<\/option>\n                            <option value=\"3px\">3px Bold Structured Border<\/option>\n                        <\/select>\n\n                        <label class=\"lpg-control-label\" for=\"lpg-rowHeightInput\">Table Padding Metric Range<\/label>\n                        <input type=\"range\" id=\"lpg-rowHeightInput\" min=\"2\" max=\"15\" value=\"3\" style=\"width:100%;\">\n                    <\/fieldset>\n                <\/div>\n            <\/div>\n\n            <div class=\"lpg-sidebar-footer-actions\">\n                <button id=\"lpg-resetDefaultBtn\" class=\"lpg-btn lpg-btn-secondary lpg-btn-sm\">Reset Defaults<\/button>\n                <button id=\"lpg-loadSampleBtn\" class=\"lpg-btn lpg-btn-primary lpg-btn-sm\">Load Sample Data<\/button>\n            <\/div>\n        <\/aside>\n\n        <!-- Main Workspace Presentation Area -->\n        <main class=\"lpg-main-workspace\">\n            <header class=\"lpg-action-ribbon no-print\">\n                <div class=\"lpg-stats-counter-badge\" id=\"lpg-statsCounterBadge\">Modules: 0 | Topics: 0<\/div>\n                <div class=\"lpg-ribbon-right-controls\">\n                    <button id=\"lpg-smartAiFillBtn\" class=\"lpg-btn lpg-btn-secondary lpg-btn-sm\">\u2728 Smart Auto-Fill<\/button>\n                    \n                    <div class=\"lpg-dropdown-wrapper\">\n                        <button class=\"lpg-btn lpg-btn-primary lpg-btn-sm\">\ud83d\udce5 Export Document \u25be<\/button>\n                        <div class=\"lpg-dropdown-menu-list\">\n                            <button id=\"lpg-exportPrintPdfBtn\">\ud83d\udda8\ufe0f Print \/ Save PDF<\/button>\n                            <button id=\"lpg-exportPngBtn\">\ud83d\uddbc\ufe0f Export High-Res PNG<\/button>\n                            <button id=\"lpg-exportExcelBtn\">\ud83d\udcca Export Excel Workbook<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/header>\n\n            <div class=\"lpg-preview-scroll-container\" id=\"lpg-previewScrollContainer\">\n                <!-- Academic Lesson Plan Sheet Render Root -->\n                <div id=\"lpg-academicSheetOutput\" class=\"lpg-academic-sheet-output lpg-size-a4-portrait lpg-margin-normal\">\n                    \n                    <!-- Header Block -->\n                    <div class=\"lpg-sheet-header-container\">\n                        <div class=\"lpg-sheet-logo-placeholder\" id=\"lpg-renderLogoWrapper\">\n                            <span style=\"font-size: 8px; color: #94a3b8; text-align:center;\">LOGO<\/span>\n                        <\/div>\n                        <div class=\"lpg-sheet-title-layout\">\n                            <h3 id=\"lpg-renderInstName\">Bihar Engineering University, Patna<\/h3>\n                            <h1 id=\"lpg-renderDocTitle\">Comprehensive Academic Lesson Plan<\/h1>\n                            <h3 id=\"lpg-renderDeptName\">Department of Computer Science &amp; Engineering<\/h3>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Metadata Grid Table -->\n                    <table class=\"lpg-metadata-grid-table\">\n                        <tr>\n                            <td class=\"lpg-lbl\">Course Name:<\/td>\n                            <td class=\"lpg-val\" id=\"lpg-renderCourseName\">Theory of Computation<\/td>\n                            <td class=\"lpg-lbl\">Course Code:<\/td>\n                            <td class=\"lpg-val\" id=\"lpg-renderCourseCode\">CS-1503<\/td>\n                        <\/tr>\n                        <tr>\n                            <td class=\"lpg-lbl\">Semester \/ Branch:<\/td>\n                            <td class=\"lpg-val\"><span id=\"lpg-renderSemester\">V Semester<\/span> &#8211; <span id=\"lpg-renderBranch\">CSE<\/span><\/td>\n                            <td class=\"lpg-lbl\">Academic Session:<\/td>\n                            <td class=\"lpg-val\" id=\"lpg-renderAcadSession\">2026-2027<\/td>\n                        <\/tr>\n                        <tr>\n                            <td class=\"lpg-lbl\">Faculty Name:<\/td>\n                            <td class=\"lpg-val\" id=\"lpg-renderFacultyName\">Prof. R. K. Singh<\/td>\n                            <td class=\"lpg-lbl\">Class Strength \/ Cr:<\/td>\n                            <td class=\"lpg-val\"><span id=\"lpg-renderClassStrength\">60<\/span> Students (<span id=\"lpg-renderCredits\">4<\/span> Credits)<\/td>\n                        <\/tr>\n                    <\/table>\n\n                    <!-- Analytical Lesson Matrix Grid -->\n                    <table class=\"lpg-lesson-matrix-table\" id=\"lpg-lessonMatrixTable\">\n                        <thead>\n                            <tr>\n                                <th style=\"width: 8%;\">Lecture<\/th>\n                                <th style=\"width: 14%;\">Module<\/th>\n                                <th style=\"width: 32%;\">Topic Description<\/th>\n                                <th style=\"width: 18%;\">Pedagogy \/ Methodology<\/th>\n                                <th style=\"width: 14%;\">Assessment \/ Outcome<\/th>\n                                <th style=\"width: 14%;\">Date \/ Status<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody id=\"lpg-matrixTableBody\">\n                            <!-- Dynamic rows injected via script -->\n                        <\/tbody>\n                    <\/table>\n\n                    <!-- Attestation Signatures Panel -->\n                    <div class=\"lpg-signature-attestation-panel\">\n                        <div class=\"lpg-sig-block-element\">\n                            <div class=\"lpg-sig-line-rule\"><\/div>\n                            <p class=\"lpg-sig-label-title\">Course Coordinator<\/p>\n                            <p class=\"lpg-sig-sub-name\" id=\"lpg-renderCoordName\">Prof. R. K. Singh<\/p>\n                        <\/div>\n                        <div class=\"lpg-sig-block-element\">\n                            <div class=\"lpg-sig-line-rule\"><\/div>\n                            <p class=\"lpg-sig-label-title\">Head of Department<\/p>\n                            <p class=\"lpg-sig-sub-name\" id=\"lpg-renderHodName\">Dr. A. B. Verma<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Institutional Document Footer -->\n                    <div class=\"lpg-sheet-institutional-footer\" id=\"lpg-renderFooterText\">\n                        Document Ref: BEU\/CSE\/2026\/LP &#8211; Internal Academic Audit Document.\n                    <\/div>\n\n                <\/div>\n            <\/div>\n        <\/main>\n    <\/div>\n\n    <!-- Core Application Logic Script -->\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            \/\/ Initialize Lucide Icons if available\n            if (typeof lucide !== 'undefined') {\n                lucide.createIcons();\n            }\n\n            \/\/ Default State Model\n            let lessonData = [\n                {\n                    moduleTitle: \"Module 1: Introduction to Automata Theory\",\n                    topics: [\n                        \"Alphabets, Strings, and Languages\",\n                        \"Deterministic Finite Automata (DFA) Definition & Construction\",\n                        \"Non-Deterministic Finite Automata (NFA)\",\n                        \"Equivalence of DFA and NFA\",\n                        \"Finite Automata with Epsilon Transitions\"\n                    ]\n                },\n                {\n                    moduleTitle: \"Module 2: Regular Expressions and Languages\",\n                    topics: [\n                        \"Regular Expressions and Identities\",\n                        \"Algebraic Laws for Regular Expressions\",\n                        \"Kleene's Theorem: FA to RE and RE to FA\",\n                        \"Pumping Lemma for Regular Languages\",\n                        \"Closure Properties of Regular Languages\"\n                    ]\n                },\n                {\n                    moduleTitle: \"Module 3: Context-Free Grammars (CFG)\",\n                    topics: [\n                        \"Context-Free Grammars Definition & Derivations\",\n                        \"Parse Trees and Ambiguity in Grammars\",\n                        \"Simplification of CFGs (Null, Unit, Useless eliminations)\",\n                        \"Chomsky Normal Form (CNF) & Greibach Normal Form (GNF)\",\n                        \"Pumping Lemma for Context-Free Languages\"\n                    ]\n                }\n            ];\n\n            \/\/ DOM Element References\n            const appRoot = document.getElementById('lpg-app-root');\n            const themeToggleBtn = document.getElementById('lpg-themeToggleBtn');\n            const tabBtns = document.querySelectorAll('.lpg-tab-btn');\n            const tabPanes = document.querySelectorAll('.lpg-tab-pane');\n            \n            \/\/ Mode Selectors\n            const modeManualBtn = document.getElementById('lpg-modeManualBtn');\n            const modePasteBtn = document.getElementById('lpg-modePasteBtn');\n            const manualModeContainer = document.getElementById('lpg-manualModeContainer');\n            const pasteModeContainer = document.getElementById('lpg-pasteModeContainer');\n            \n            \/\/ Inputs Metadata\n            const instNameInput = document.getElementById('lpg-instName');\n            const deptNameInput = document.getElementById('lpg-deptName');\n            const univNameInput = document.getElementById('lpg-univName');\n            const logoUploadInput = document.getElementById('lpg-logoUpload');\n            const courseNameInput = document.getElementById('lpg-courseName');\n            const courseCodeInput = document.getElementById('lpg-courseCode');\n            const semesterInput = document.getElementById('lpg-semester');\n            const branchInput = document.getElementById('lpg-branch');\n            const facultyNameInput = document.getElementById('lpg-facultyName');\n            const acadSessionInput = document.getElementById('lpg-acadSession');\n            const classStrengthInput = document.getElementById('lpg-classStrength');\n            const creditsInput = document.getElementById('lpg-credits');\n            const coordNameInput = document.getElementById('lpg-coordName');\n            const hodNameInput = document.getElementById('lpg-hodName');\n            const footerTextInput = document.getElementById('lpg-footerText');\n\n            \/\/ Render Output Elements\n            const renderInstName = document.getElementById('lpg-renderInstName');\n            const renderDeptName = document.getElementById('lpg-renderDeptName');\n            const renderCourseName = document.getElementById('lpg-renderCourseName');\n            const renderCourseCode = document.getElementById('lpg-renderCourseCode');\n            const renderSemester = document.getElementById('lpg-renderSemester');\n            const renderBranch = document.getElementById('lpg-renderBranch');\n            const renderAcadSession = document.getElementById('lpg-renderAcadSession');\n            const renderFacultyName = document.getElementById('lpg-renderFacultyName');\n            const renderClassStrength = document.getElementById('lpg-renderClassStrength');\n            const renderCredits = document.getElementById('lpg-renderCredits');\n            const renderCoordName = document.getElementById('lpg-renderCoordName');\n            const renderHodName = document.getElementById('lpg-renderHodName');\n            const renderFooterText = document.getElementById('lpg-renderFooterText');\n            const renderLogoWrapper = document.getElementById('lpg-renderLogoWrapper');\n\n            \/\/ Style Selectors\n            const pageSizeSelect = document.getElementById('lpg-pageSizeSelect');\n            const pageMarginSelect = document.getElementById('lpg-pageMarginSelect');\n            const fontFamilySelect = document.getElementById('lpg-fontFamilySelect');\n            const fontSizeSelect = document.getElementById('lpg-fontSizeSelect');\n            const headerColorInput = document.getElementById('lpg-headerColorInput');\n            const highlightColorInput = document.getElementById('lpg-highlightColorInput');\n            const borderThicknessSelect = document.getElementById('lpg-borderThicknessSelect');\n            const rowHeightInput = document.getElementById('lpg-rowHeightInput');\n            const academicSheetOutput = document.getElementById('lpg-academicSheetOutput');\n\n            \/\/ Tree & Syllabus Container\n            const modulesTreeRootContainer = document.getElementById('lpg-modulesTreeRootContainer');\n            const addModuleBtn = document.getElementById('lpg-addModuleBtn');\n            const rawSyllabusInput = document.getElementById('lpg-rawSyllabusInput');\n            const parseSyllabusBtn = document.getElementById('lpg-parseSyllabusBtn');\n            const statsCounterBadge = document.getElementById('lpg-statsCounterBadge');\n\n            \/\/ Search & Replace\n            const searchTopicInput = document.getElementById('lpg-searchTopicInput');\n            const replaceTopicInput = document.getElementById('lpg-replaceTopicInput');\n            const execReplaceBtn = document.getElementById('lpg-execReplaceBtn');\n\n            \/\/ Action Buttons\n            const resetDefaultBtn = document.getElementById('lpg-resetDefaultBtn');\n            const loadSampleBtn = document.getElementById('lpg-loadSampleBtn');\n            const smartAiFillBtn = document.getElementById('lpg-smartAiFillBtn');\n            const exportPrintPdfBtn = document.getElementById('lpg-exportPrintPdfBtn');\n            const exportPngBtn = document.getElementById('lpg-exportPngBtn');\n            const exportExcelBtn = document.getElementById('lpg-exportExcelBtn');\n\n            let customLogoBase64 = null;\n\n            \/\/ --- Theme Toggle ---\n            themeToggleBtn.addEventListener('click', () => {\n                if (appRoot.classList.contains('lpg-light-theme')) {\n                    appRoot.classList.remove('lpg-light-theme');\n                    appRoot.classList.add('lpg-dark-theme');\n                } else {\n                    appRoot.classList.remove('lpg-dark-theme');\n                    appRoot.classList.add('lpg-light-theme');\n                }\n            });\n\n            \/\/ --- Tab Navigation ---\n            tabBtns.forEach(btn => {\n                btn.addEventListener('click', () => {\n                    tabBtns.forEach(b => b.classList.remove('lpg-active'));\n                    tabPanes.forEach(p => p.classList.remove('lpg-active'));\n                    btn.classList.add('lpg-active');\n                    const targetId = btn.getAttribute('data-lpg-target');\n                    document.getElementById(targetId).classList.add('lpg-active');\n                });\n            });\n\n            \/\/ --- Syllabus Input Mode Switching ---\n            modeManualBtn.addEventListener('click', () => {\n                modeManualBtn.classList.add('lpg-active');\n                modePasteBtn.classList.remove('lpg-active');\n                manualModeContainer.classList.add('lpg-active');\n                pasteModeContainer.classList.remove('lpg-active');\n            });\n            modePasteBtn.addEventListener('click', () => {\n                modePasteBtn.classList.add('lpg-active');\n                modeManualBtn.classList.remove('lpg-active');\n                pasteModeContainer.classList.add('lpg-active');\n                manualModeContainer.classList.remove('lpg-active');\n            });\n\n            \/\/ --- Logo Handler ---\n            logoUploadInput.addEventListener('change', (e) => {\n                const file = e.target.files[0];\n                if (file) {\n                    const reader = new FileReader();\n                    reader.onload = (event) => {\n                        customLogoBase64 = event.target.result;\n                        renderLogoWrapper.innerHTML = `<img decoding=\"async\" src=\"${customLogoBase64}\" alt=\"Logo\">`;\n                    };\n                    reader.readAsDataURL(file);\n                }\n            });\n\n            \/\/ --- Sync Metadata & Styles to Preview ---\n            function updateMetadataPreview() {\n                renderInstName.textContent = instNameInput.value;\n                renderDeptName.textContent = deptNameInput.value;\n                renderCourseName.textContent = courseNameInput.value;\n                renderCourseCode.textContent = courseCodeInput.value;\n                renderSemester.textContent = semesterInput.value;\n                renderBranch.textContent = branchInput.value;\n                renderAcadSession.textContent = acadSessionInput.value;\n                renderFacultyName.textContent = facultyNameInput.value;\n                renderClassStrength.textContent = classStrengthInput.value;\n                renderCredits.textContent = creditsInput.value;\n                renderCoordName.textContent = coordNameInput.value;\n                renderHodName.textContent = hodNameInput.value;\n                renderFooterText.textContent = footerTextInput.value;\n            }\n\n            const metadataInputs = [\n                instNameInput, deptNameInput, univNameInput, courseNameInput, courseCodeInput,\n                semesterInput, branchInput, facultyNameInput, acadSessionInput, classStrengthInput,\n                creditsInput, coordNameInput, hodNameInput, footerTextInput\n            ];\n            metadataInputs.forEach(input => {\n                input.addEventListener('input', updateMetadataPreview);\n            });\n\n            \/\/ --- Style & Layout Controls ---\n            pageSizeSelect.addEventListener('change', () => {\n                academicSheetOutput.className = academicSheetOutput.className\n                    .replace(\/lpg-size-\\S+\/g, '') + ' ' + pageSizeSelect.value;\n            });\n            pageMarginSelect.addEventListener('change', () => {\n                academicSheetOutput.className = academicSheetOutput.className\n                    .replace(\/lpg-margin-\\S+\/g, '') + ' ' + pageMarginSelect.value;\n            });\n            fontFamilySelect.addEventListener('change', () => {\n                document.documentElement.style.setProperty('--lpg-print-font-family', fontFamilySelect.value);\n            });\n            fontSizeSelect.addEventListener('change', () => {\n                document.documentElement.style.setProperty('--lpg-print-font-size', fontSizeSelect.value);\n            });\n            headerColorInput.addEventListener('input', () => {\n                document.documentElement.style.setProperty('--lpg-print-header-bg', headerColorInput.value);\n            });\n            highlightColorInput.addEventListener('input', () => {\n                document.documentElement.style.setProperty('--lpg-print-highlight-bg', highlightColorInput.value);\n            });\n            borderThicknessSelect.addEventListener('change', () => {\n                document.documentElement.style.setProperty('--lpg-print-border-thickness', borderThicknessSelect.value);\n            });\n            rowHeightInput.addEventListener('input', () => {\n                document.documentElement.style.setProperty('--lpg-print-row-padding', rowHeightInput.value + 'px');\n            });\n\n            \/\/ --- Render Interactive Module Tree (Sidebar CRUD) ---\n            function renderModuleTree() {\n                modulesTreeRootContainer.innerHTML = '';\n                let totalTopicsCount = 0;\n\n                lessonData.forEach((mod, modIdx) => {\n                    totalTopicsCount += mod.topics.length;\n                    const modNode = document.createElement('div');\n                    modNode.className = 'lpg-module-node';\n\n                    let topicsHtml = '';\n                    mod.topics.forEach((topic, topIdx) => {\n                        topicsHtml++; \/\/ Just a tracker\n                        topicsHtml += `\n                            <div class=\"lpg-topic-node-item\">\n                                <input type=\"text\" class=\"lpg-input-field lpg-topic-input\" data-mod=\"${modIdx}\" data-top=\"${topIdx}\" value=\"${topic}\">\n                                <button class=\"lpg-node-action-btn lpg-del-topic\" data-mod=\"${modIdx}\" data-top=\"${topIdx}\" title=\"Delete Topic\">\u274c<\/button>\n                            <\/div>\n                        `;\n                    });\n\n                    modNode.innerHTML = `\n                        <div class=\"lpg-module-node-header\">\n                            <input type=\"text\" class=\"lpg-input-field lpg-module-input\" data-mod=\"${modIdx}\" value=\"${mod.moduleTitle}\">\n                            <button class=\"lpg-node-action-btn lpg-add-topic\" data-mod=\"${modIdx}\" title=\"Add Topic\">\u2795<\/button>\n                            <button class=\"lpg-node-action-btn lpg-del-module\" data-mod=\"${modIdx}\" title=\"Delete Module\">\ud83d\uddd1\ufe0f<\/button>\n                        <\/div>\n                        <div class=\"lpg-topics-list-container\">\n                            ${topicsHtml}\n                        <\/div>\n                    `;\n                    modulesTreeRootContainer.appendChild(modNode);\n                });\n\n                statsCounterBadge.textContent = `Modules: ${lessonData.length} | Topics: ${totalTopicsCount}`;\n                renderLessonMatrixTable();\n                attachTreeListeners();\n            }\n\n            function attachTreeListeners() {\n                \/\/ Module title change\n                document.querySelectorAll('.lpg-module-input').forEach(input => {\n                    input.addEventListener('input', (e) => {\n                        const mIdx = e.target.getAttribute('data-mod');\n                        lessonData[mIdx].moduleTitle = e.target.value;\n                        renderLessonMatrixTable();\n                    });\n                });\n                \/\/ Topic title change\n                document.querySelectorAll('.lpg-topic-input').forEach(input => {\n                    input.addEventListener('input', (e) => {\n                        const mIdx = e.target.getAttribute('data-mod');\n                        const tIdx = e.target.getAttribute('data-top');\n                        lessonData[mIdx].topics[tIdx] = e.target.value;\n                        renderLessonMatrixTable();\n                    });\n                });\n                \/\/ Add topic\n                document.querySelectorAll('.lpg-add-topic').forEach(btn => {\n                    btn.addEventListener('click', (e) => {\n                        const mIdx = e.currentTarget.getAttribute('data-mod');\n                        lessonData[mIdx].topics.push(\"New Curricular Topic\");\n                        renderModuleTree();\n                    });\n                });\n                \/\/ Delete topic\n                document.querySelectorAll('.lpg-del-topic').forEach(btn => {\n                    btn.addEventListener('click', (e) => {\n                        const mIdx = e.currentTarget.getAttribute('data-mod');\n                        const tIdx = e.currentTarget.getAttribute('data-top');\n                        lessonData[mIdx].topics.splice(tIdx, 1);\n                        renderModuleTree();\n                    });\n                });\n                \/\/ Delete module\n                document.querySelectorAll('.lpg-del-module').forEach(btn => {\n                    btn.addEventListener('click', (e) => {\n                        const mIdx = e.currentTarget.getAttribute('data-mod');\n                        lessonData.splice(mIdx, 1);\n                        renderModuleTree();\n                    });\n                });\n            }\n\n            addModuleBtn.addEventListener('click', () => {\n                lessonData.push({\n                    moduleTitle: `Module ${lessonData.length + 1}: New Curriculum Module`,\n                    topics: [\"Core Concept & Introduction\"]\n                });\n                renderModuleTree();\n            });\n\n            \/\/ --- Render Central Sheet Matrix Table ---\n            function renderLessonMatrixTable() {\n                const tbody = document.getElementById('lpg-matrixTableBody');\n                tbody.innerHTML = '';\n                let lectureCounter = 1;\n\n                lessonData.forEach((mod) => {\n                    \/\/ Module Section Header Row\n                    const modRow = document.createElement('tr');\n                    modRow.className = 'lpg-module-heading-row';\n                    modRow.innerHTML = `\n                        <td colspan=\"6\" class=\"lpg-text-center\">${mod.moduleTitle}<\/td>\n                    `;\n                    tbody.appendChild(modRow);\n\n                    if (mod.topics.length === 0) {\n                        const emptyRow = document.createElement('tr');\n                        emptyRow.innerHTML = `<td colspan=\"6\" style=\"text-align:center; color:#94a3b8; font-style:italic;\">No topics specified under this module.<\/td>`;\n                        tbody.appendChild(emptyRow);\n                    } else {\n                        mod.topics.forEach((topic) => {\n                            const topicRow = document.createElement('tr');\n                            topicRow.innerHTML = `\n                                <td class=\"lpg-text-center\">L-${lectureCounter < 10 ? '0' + lectureCounter : lectureCounter}<\/td>\n                                <td class=\"lpg-text-center\">${mod.moduleTitle.split(':')[0] || 'Mod'}<\/td>\n                                <td>${topic}<\/td>\n                                <td>Interactive Lecture &amp; Board Presentation<\/td>\n                                <td class=\"lpg-text-center\">Assignment \/ Quiz<\/td>\n                                <td class=\"lpg-text-center\">Week ${Math.ceil(lectureCounter \/ 3)}<\/td>\n                            `;\n                            tbody.appendChild(topicRow);\n                            lectureCounter++;\n                        });\n                    }\n                });\n            }\n\n            \/\/ --- Search & Replace Execution ---\n            execReplaceBtn.addEventListener('click', () => {\n                const searchStr = searchTopicInput.value;\n                const replaceStr = replaceTopicInput.value;\n                if (!searchStr) return;\n\n                lessonData.forEach(mod => {\n                    if (mod.moduleTitle.includes(searchStr)) {\n                        mod.moduleTitle = mod.moduleTitle.replaceAll(searchStr, replaceStr);\n                    }\n                    mod.topics = mod.topics.map(t => t.replaceAll(searchStr, replaceStr));\n                });\n                renderModuleTree();\n            });\n\n            \/\/ --- Parse Raw Syllabus Text Box ---\n            parseSyllabusBtn.addEventListener('click', () => {\n                const rawText = rawSyllabusInput.value.trim();\n                if (!rawText) return;\n\n                const lines = rawText.split('\\n');\n                let newModules = [];\n                let currentMod = null;\n\n                lines.forEach(line => {\n                    const cleanLine = line.trim();\n                    if (!cleanLine) return;\n\n                    if (cleanLine.toLowerCase().startsWith('module') || cleanLine.toLowerCase().startsWith('unit')) {\n                        if (currentMod) newModules.push(currentMod);\n                        currentMod = { moduleTitle: cleanLine, topics: [] };\n                    } else {\n                        if (!currentMod) {\n                            currentMod = { moduleTitle: \"Module 1: General Curricular\", topics: [] };\n                        }\n                        currentMod.topics.push(cleanLine);\n                    }\n                });\n                if (currentMod) newModules.push(currentMod);\n\n                if (newModules.length > 0) {\n                    lessonData = newModules;\n                    renderModuleTree();\n                    modeManualBtn.click(); \/\/ Switch back to manual view\n                }\n            });\n\n            \/\/ --- Smart AI Auto-Fill \/ Sample Data ---\n            loadSampleBtn.addEventListener('click', () => {\n                lessonData = [\n                    {\n                        moduleTitle: \"Module 1: Introduction & Basic Concepts\",\n                        topics: [\"Overview of Course Objectives\", \"Fundamental Architecture & Principles\", \"System Requirements & Specifications\"]\n                    },\n                    {\n                        moduleTitle: \"Module 2: Advanced Design Methodologies\",\n                        topics: [\"Structural Decomposition Analysis\", \"Algorithmic Efficiency Evaluation\", \"Optimization Frameworks & Case Studies\"]\n                    }\n                ];\n                renderModuleTree();\n            });\n\n            smartAiFillBtn.addEventListener('click', () => {\n                lessonData.push({\n                    moduleTitle: `Module ${lessonData.length + 1}: Emerging Technology Trends`,\n                    topics: [\"Industry Standard Benchmarks\", \"Next-Gen Practical Implementations\", \"Comprehensive Summative Review\"]\n                });\n                renderModuleTree();\n            });\n\n            resetDefaultBtn.addEventListener('click', () => {\n                instNameInput.value = \"Bihar Engineering University, Patna\";\n                deptNameInput.value = \"Department of Computer Science & Engineering\";\n                courseNameInput.value = \"Theory of Computation\";\n                courseCodeInput.value = \"CS-1503\";\n                updateMetadataPreview();\n                renderModuleTree();\n            });\n\n            \/\/ --- Export Actions ---\n            exportPrintPdfBtn.addEventListener('click', () => {\n                window.print();\n            });\n\n            exportPngBtn.addEventListener('click', () => {\n                if (typeof html2canvas !== 'undefined') {\n                    html2canvas(academicSheetOutput, { scale: 2 }).then(canvas => {\n                        const link = document.createElement('a');\n                        link.download = `${courseCodeInput.value || 'Lesson_Plan'}_Output.png`;\n                        link.href = canvas.toDataURL('image\/png');\n                        link.click();\n                    });\n                } else {\n                    alert('html2canvas library not loaded.');\n                }\n            });\n\n            exportExcelBtn.addEventListener('click', () => {\n                if (typeof XLSX !== 'undefined') {\n                    const wb = XLSX.utils.book_new();\n                    let wsData = [\n                        [instNameInput.value],\n                        [document.getElementById('lpg-renderDocTitle').textContent],\n                        [`Course: ${courseNameInput.value} (${courseCodeInput.value})`],\n                        [],\n                        [\"Lecture\", \"Module\", \"Topic Description\", \"Pedagogy\", \"Assessment\", \"Timeline\"]\n                    ];\n\n                    let lecCount = 1;\n                    lessonData.forEach(mod => {\n                        wsData.push([mod.moduleTitle, \"\", \"\", \"\", \"\", \"\"]);\n                        mod.topics.forEach(t => {\n                            wsData.push([`L-${lecCount}`, mod.moduleTitle, t, \"Interactive Lecture\", \"Assignment\", \"Week\"]);\n                            lecCount++;\n                        });\n                    });\n\n                    const ws = XLSX.utils.aoa_to_sheet(wsData);\n                    XLSX.utils.book_append_sheet(wb, ws, \"Lesson Plan\");\n                    XLSX.writeFile(wb, `${courseCodeInput.value || 'Lesson_Plan'}_Workbook.xlsx`);\n                } else {\n                    alert('SheetJS library not loaded.');\n                }\n            });\n\n            \/\/ Initial Bootstrap Execution\n            updateMetadataPreview();\n            renderModuleTree();\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Academic Lesson Plan Generator Tool PlanCraft Canvas \ud83c\udf13 Theme Metadata Syllabus Styles Institution Headers Institute Name Department Name University Name Institute Logo Image Course Definition Params Course Title Course Code Semester Branch Faculty Name Academic Session Class Strength Credits Workflow Attestation Authorities Course Coordinator HOD Name Custom Document Footer Manual Layout Paste Text Swap + [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-364","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=364"}],"version-history":[{"count":7,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/364\/revisions"}],"predecessor-version":[{"id":748,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/364\/revisions\/748"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}