{"id":823,"date":"2026-08-01T16:11:18","date_gmt":"2026-08-01T16:11:18","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=823"},"modified":"2026-08-01T16:11:18","modified_gmt":"2026-08-01T16:11:18","slug":"notebook-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/notebook-generator\/","title":{"rendered":"Notebook Generator"},"content":{"rendered":"\n<!-- START: Ultimate Masterpiece Academic Notebook & Handwriting Studio -->\n<div id=\"uamas-app-wrapper\" class=\"uamas-scope\" data-theme=\"light\">\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@400..700&family=Architects+Daughter&family=Indie+Flower&family=Patrick+Hand&family=Kalam:wght@300;400;700&family=Gloria+Hallelujah&family=Sacramento&family=Great+Vibes&display=swap');\n\n        .uamas-scope {\n            --uamas-bg: #f8fafc;\n            --uamas-surface: #ffffff;\n            --uamas-surface-glass: rgba(255, 255, 255, 0.92);\n            --uamas-text: #0f172a;\n            --uamas-text-muted: #64748b;\n            --uamas-primary: #2563eb;\n            --uamas-primary-hover: #1d4ed8;\n            --uamas-primary-light: #eff6ff;\n            --uamas-border: #cbd5e1;\n            --uamas-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);\n            --uamas-radius-sm: 8px;\n            --uamas-radius-md: 14px;\n            --uamas-radius-lg: 20px;\n\n            font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            color: var(--uamas-text);\n            background-color: var(--uamas-bg);\n            padding: 24px;\n            border-radius: var(--uamas-radius-lg);\n            box-sizing: border-box;\n            border: 1px solid var(--uamas-border);\n            margin: 20px auto;\n            max-width: 1550px;\n        }\n\n        .uamas-scope[data-theme=\"dark\"] {\n            --uamas-bg: #0b0f19;\n            --uamas-surface: #111827;\n            --uamas-surface-glass: rgba(17, 24, 39, 0.92);\n            --uamas-text: #f8fafc;\n            --uamas-text-muted: #94a3b8;\n            --uamas-primary: #3b82f6;\n            --uamas-primary-hover: #2563eb;\n            --uamas-primary-light: rgba(59, 130, 246, 0.15);\n            --uamas-border: #1f2937;\n        }\n\n        .uamas-scope *, .uamas-scope *::before, .uamas-scope *::after { box-sizing: inherit; }\n\n        .uamas-toolbar {\n            position: sticky; top: 0; z-index: 100;\n            background: var(--uamas-surface-glass); backdrop-filter: blur(12px);\n            border: 1px solid var(--uamas-border); padding: 14px 20px;\n            border-radius: var(--uamas-radius-md); display: flex;\n            justify-content: space-between; align-items: center; margin-bottom: 24px;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.03);\n        }\n\n        .uamas-brand { display: flex; align-items: center; gap: 12px; }\n        .uamas-logo-icon {\n            width: 38px; height: 38px; background: var(--uamas-primary-light);\n            color: var(--uamas-primary); border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n        }\n        .uamas-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--uamas-text); }\n        .uamas-subtitle { font-size: 0.75rem; color: var(--uamas-text-muted); margin: 0; }\n\n        .uamas-workspace {\n            display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start;\n        }\n        @media (max-width: 1100px) { .uamas-workspace { grid-template-columns: 1fr; } }\n\n        .uamas-card {\n            background: var(--uamas-surface); border: 1px solid var(--uamas-border);\n            border-radius: var(--uamas-radius-lg); padding: 24px; box-shadow: var(--uamas-shadow);\n        }\n        .uamas-card-header {\n            display: flex; justify-content: space-between; align-items: center;\n            margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--uamas-border);\n        }\n        .uamas-card-title { font-size: 1rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }\n\n        .uamas-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--uamas-border); padding-bottom: 10px; overflow-x: auto; }\n        .uamas-tab-btn {\n            background: var(--uamas-bg); border: 1px solid var(--uamas-border); color: var(--uamas-text-muted);\n            padding: 6px 12px; font-size: 0.78rem; font-weight: 600; border-radius: var(--uamas-radius-sm);\n            cursor: pointer; white-space: nowrap; transition: all 0.2s;\n        }\n        .uamas-tab-btn:hover { color: var(--uamas-text); border-color: var(--uamas-primary); }\n        .uamas-tab-btn.active { background: var(--uamas-primary); color: #fff; border-color: var(--uamas-primary); }\n\n        .uamas-tab-pane { display: none; }\n        .uamas-tab-pane.active { display: block; }\n\n        .uamas-form-group { margin-bottom: 14px; }\n        .uamas-label {\n            display: block; font-size: 0.78rem; font-weight: 600; color: var(--uamas-text-muted);\n            margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em;\n        }\n        .uamas-input, .uamas-select, .uamas-textarea {\n            width: 100%; padding: 9px 12px; border: 1px solid var(--uamas-border);\n            border-radius: var(--uamas-radius-sm); background: var(--uamas-bg); color: var(--uamas-text);\n            font-size: 0.88rem; font-family: inherit;\n        }\n        .uamas-textarea { min-height: 180px; resize: vertical; line-height: 1.5; }\n        .uamas-input:focus, .uamas-select:focus, .uamas-textarea:focus {\n            outline: none; border-color: var(--uamas-primary); box-shadow: 0 0 0 3px var(--uamas-primary-light);\n        }\n\n        .uamas-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n\n        .uamas-tools-grid {\n            display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px;\n        }\n        .uamas-tool-btn {\n            background: var(--uamas-bg); border: 1px solid var(--uamas-border);\n            padding: 8px 6px; font-size: 0.75rem; font-weight: 600; border-radius: var(--uamas-radius-sm);\n            cursor: pointer; text-align: center; color: var(--uamas-text); transition: all 0.2s;\n        }\n        .uamas-tool-btn:hover { border-color: var(--uamas-primary); background: var(--uamas-primary-light); }\n\n        .uamas-preview-box {\n            width: 100%; background: var(--uamas-bg); border: 1px solid var(--uamas-border);\n            border-radius: var(--uamas-radius-md); overflow: hidden; display: flex;\n            justify-content: center; align-items: center; position: relative;\n            min-height: 520px; max-height: 600px; overflow-y: auto; padding: 12px;\n        }\n        .uamas-canvas { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }\n\n        .uamas-btn {\n            background: var(--uamas-primary); color: #ffffff; border: none; padding: 10px 14px;\n            font-size: 0.82rem; font-weight: 600; border-radius: var(--uamas-radius-sm); cursor: pointer;\n            display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.2s;\n        }\n        .uamas-btn:hover { background: var(--uamas-primary-hover); }\n        .uamas-btn-secondary { background: var(--uamas-bg); color: var(--uamas-text); border: 1px solid var(--uamas-border); }\n        .uamas-btn-secondary:hover { background: var(--uamas-border); }\n\n        .uamas-export-grid {\n            display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px;\n        }\n        .uamas-export-grid .uamas-btn { width: 100%; justify-content: center; font-size: 0.76rem; padding: 9px 6px; }\n\n        #uamas-print-container { display: none; }\n        @media print {\n            body * { visibility: hidden; }\n            #uamas-print-container, #uamas-print-container * { visibility: visible; }\n            #uamas-print-container {\n                position: absolute; left: 0; top: 0; width: 100%; display: block !important;\n                background: #ffffff;\n            }\n            .uamas-page-break { page-break-after: always; break-after: page; display: block; width: 100%; }\n        }\n    <\/style>\n\n    <!-- Header Toolbar -->\n    <div class=\"uamas-toolbar\">\n        <div class=\"uamas-brand\">\n            <div class=\"uamas-logo-icon\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"><\/path><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"><\/path><\/svg>\n            <\/div>\n            <div>\n                <h1 class=\"uamas-title\">Ultimate Academic &#038; Notebook Studio<\/h1>\n                <p class=\"uamas-subtitle\">Templates, Rich Objects, Optimized Rendering, Multi-Format Exports &#038; Zero Clipping<\/p>\n            <\/div>\n        <\/div>\n        <button id=\"uamas-theme-toggle\" class=\"uamas-btn uamas-btn-secondary\" style=\"padding: 8px 12px; font-size: 0.8rem;\">\ud83c\udf13 Theme<\/button>\n    <\/div>\n\n    <!-- Workspace Layout -->\n    <div class=\"uamas-workspace\">\n        \n        <!-- Controls & Editor Hub -->\n        <div class=\"uamas-card\">\n            <div class=\"uamas-card-header\">\n                <h2 class=\"uamas-card-title\">\ud83d\udcdd Studio Control Hub<\/h2>\n                <span id=\"uamas-perf-badge\" style=\"font-size: 0.7rem; font-weight: 700; padding: 3px 8px; background: var(--uamas-primary-light); color: var(--uamas-primary); border-radius: 12px;\">\u26a1 0ms Render<\/span>\n            <\/div>\n\n            <!-- Tabs -->\n            <div class=\"uamas-tabs\" id=\"uamas-tabs-nav\">\n                <button type=\"button\" class=\"uamas-tab-btn active\" data-tab=\"preset\">\ud83c\udfaf Templates<\/button>\n                <button type=\"button\" class=\"uamas-tab-btn\" data-tab=\"content\">\u270d\ufe0f Editor<\/button>\n                <button type=\"button\" class=\"uamas-tab-btn\" data-tab=\"insert\">\ud83d\udccc Objects<\/button>\n                <button type=\"button\" class=\"uamas-tab-btn\" data-tab=\"style\">\ud83c\udfa8 Styling<\/button>\n            <\/div>\n\n            <!-- Pane 1: Academic Presets -->\n            <div class=\"uamas-tab-pane active\" id=\"uamas-pane-preset\">\n                <div class=\"uamas-form-group\">\n                    <label class=\"uamas-label\" for=\"uamas-preset-select\">Select Document Template<\/label>\n                    <select id=\"uamas-preset-select\" class=\"uamas-select\">\n                        <option value=\"assignment\">Assignment Page (Header Block)<\/option>\n                        <option value=\"homework\">Homework Sheet<\/option>\n                        <option value=\"class-notes\">Class Notes (Structured)<\/option>\n                        <option value=\"revision\">Revision Notes (Highlighted &#038; Boxed)<\/option>\n                        <option value=\"practical\">Practical Record (Experiment Format)<\/option>\n                        <option value=\"project\">Project Report (Comprehensive)<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"uamas-row\">\n                    <div class=\"uamas-form-group\">\n                        <label class=\"uamas-label\" for=\"uamas-doc-subject\">Subject Name<\/label>\n                        <input type=\"text\" id=\"uamas-doc-subject\" class=\"uamas-input\" value=\"Physics &#038; Electronics\" \/>\n                    <\/div>\n                    <div class=\"uamas-form-group\">\n                        <label class=\"uamas-label\" for=\"uamas-doc-title\">Document Title \/ Topic<\/label>\n                        <input type=\"text\" id=\"uamas-doc-title\" class=\"uamas-input\" value=\"Semiconductor Physics &#038; Diode Circuits\" \/>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Pane 2: Editor -->\n            <div class=\"uamas-tab-pane\" id=\"uamas-pane-content\" style=\"display: none;\">\n                <div class=\"uamas-form-group\">\n                    <label class=\"uamas-label\" for=\"uamas-text-input\">Notes Content (Auto-Saved via LocalStorage)<\/label>\n                    <textarea id=\"uamas-text-input\" class=\"uamas-textarea\"><\/textarea>\n                <\/div>\n            <\/div>\n\n            <!-- Pane 3: Insert Objects Toolbar -->\n            <div class=\"uamas-tab-pane\" id=\"uamas-pane-insert\" style=\"display: none;\">\n                <label class=\"uamas-label\">Quick Format &#038; Object Insertion<\/label>\n                <div class=\"uamas-tools-grid\">\n                    <button type=\"button\" class=\"uamas-tool-btn\" id=\"uamas-ins-bullet\">\u2795 Bullet<\/button>\n                    <button type=\"button\" class=\"uamas-tool-btn\" id=\"uamas-ins-num\">1\ufe0f\u20e3 Number<\/button>\n                    <button type=\"button\" class=\"uamas-tool-btn\" id=\"uamas-ins-highlight\">\ud83d\udd8d\ufe0f Highlight<\/button>\n                    <button type=\"button\" class=\"uamas-tool-btn\" id=\"uamas-ins-underline\">underline<\/button>\n                    <button type=\"button\" class=\"uamas-tool-btn\" id=\"uamas-ins-box\">\ud83d\udce6 Box Note<\/button>\n                    <button type=\"button\" class=\"uamas-tool-btn\" id=\"uamas-ins-table\">\ud83d\udcca Table<\/button>\n                    <button type=\"button\" class=\"uamas-tool-btn\" id=\"uamas-ins-diagram\">\ud83d\udcc8 Diagram<\/button>\n                    <button type=\"button\" class=\"uamas-tool-btn\" id=\"uamas-ins-img\">\ud83d\uddbc\ufe0f Image<\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Pane 4: Styling Options -->\n            <div class=\"uamas-tab-pane\" id=\"uamas-pane-style\" style=\"display: none;\">\n                <div class=\"uamas-row\">\n                    <div class=\"uamas-form-group\">\n                        <label class=\"uamas-label\" for=\"uamas-pen-color\">Ink Color<\/label>\n                        <select id=\"uamas-pen-color\" class=\"uamas-select\">\n                            <option value=\"#1e3a8a\">Royal Blue Ink<\/option>\n                            <option value=\"#090d16\">Pitch Black Ink<\/option>\n                            <option value=\"#1d4ed8\">Classic Blue Ballpoint<\/option>\n                            <option value=\"#991b1b\">Crimson Red<\/option>\n                        <\/select>\n                    <\/div>\n                    <div class=\"uamas-form-group\">\n                        <label class=\"uamas-label\" for=\"uamas-paper-tone\">Paper Tone<\/label>\n                        <select id=\"uamas-paper-tone\" class=\"uamas-select\">\n                            <option value=\"#ffffff\">Pure White A4<\/option>\n                            <option value=\"#fef9c3\">Vintage Cream<\/option>\n                            <option value=\"#eff6ff\">Cool Ice Blue<\/option>\n                        <\/select>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"uamas-card-header\" style=\"margin-top: 18px; margin-bottom: 10px;\">\n                <h3 class=\"uamas-card-title\" style=\"font-size: 0.88rem;\">\ud83d\ude80 Master Export Suite<\/h3>\n            <\/div>\n\n            <div class=\"uamas-export-grid\">\n                <button type=\"button\" id=\"uamas-btn-print\" class=\"uamas-btn\">\ud83d\udda8\ufe0f Print<\/button>\n                <button type=\"button\" id=\"uamas-btn-pdf\" class=\"uamas-btn\">\ud83d\udcc4 Save PDF<\/button>\n                <button type=\"button\" id=\"uamas-btn-png\" class=\"uamas-btn\">\ud83d\uddbc\ufe0f PNG<\/button>\n                <button type=\"button\" id=\"uamas-btn-jpg\" class=\"uamas-btn\">\ud83d\udcf8 JPG<\/button>\n                <button type=\"button\" id=\"uamas-btn-svg\" class=\"uamas-btn\">\u26a1 SVG<\/button>\n                <button type=\"button\" id=\"uamas-btn-html\" class=\"uamas-btn\">\ud83c\udf10 HTML<\/button>\n                <button type=\"button\" id=\"uamas-btn-txt\" class=\"uamas-btn\">\ud83d\udcdd TXT<\/button>\n                <button type=\"button\" id=\"uamas-btn-copyimg\" class=\"uamas-btn uamas-btn-secondary\">\ud83d\udccb Copy Img<\/button>\n                <button type=\"button\" id=\"uamas-btn-copytxt\" class=\"uamas-btn uamas-btn-secondary\">\ud83d\udccb Copy Txt<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Live Preview Panel -->\n        <div class=\"uamas-card\">\n            <div class=\"uamas-card-header\">\n                <h2 class=\"uamas-card-title\">\ud83d\udc41\ufe0f A4 Zero-Clipping Preview<\/h2>\n                <span id=\"uamas-page-indicator\" style=\"font-size: 0.75rem; font-weight: 600; padding: 4px 10px; background: var(--uamas-primary-light); color: var(--uamas-primary); border-radius: 20px;\">Page 1 of 1<\/span>\n            <\/div>\n\n            <div class=\"uamas-preview-box\">\n                <canvas id=\"uamas-canvas\" class=\"uamas-canvas\"><\/canvas>\n            <\/div>\n\n            <div style=\"display: flex; justify-content: space-between; align-items: center; margin-top: 12px;\">\n                <button type=\"button\" id=\"uamas-prev-page\" class=\"uamas-btn uamas-btn-secondary\" style=\"padding: 6px 14px; font-size: 0.8rem;\">\u25c0 Prev Page<\/button>\n                <span id=\"uamas-page-label\" style=\"font-size: 0.825rem; font-weight: 600; color: var(--uamas-text-muted);\">Page 1<\/span>\n                <button type=\"button\" id=\"uamas-next-page\" class=\"uamas-btn uamas-btn-secondary\" style=\"padding: 6px 14px; font-size: 0.8rem;\">Next Page \u25b6<\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- Hidden Multi-page A4 Container for Printing & PDF Generation -->\n    <div id=\"uamas-print-container\"><\/div>\n\n    <!-- Script Engine -->\n    <script>\n        (function() {\n            'use strict';\n\n            const wrapper = document.getElementById('uamas-app-wrapper');\n            const themeToggle = document.getElementById('uamas-theme-toggle');\n            \n            \/\/ Tabs\n            const tabsNav = document.getElementById('uamas-tabs-nav');\n            const tabPanes = wrapper.querySelectorAll('.uamas-tab-pane');\n\n            \/\/ Inputs\n            const presetSelect = document.getElementById('uamas-preset-select');\n            const docSubject = document.getElementById('uamas-doc-subject');\n            const docTitle = document.getElementById('uamas-doc-title');\n            const textInput = document.getElementById('uamas-text-input');\n            const penColorSelect = document.getElementById('uamas-pen-color');\n            const paperToneSelect = document.getElementById('uamas-paper-tone');\n            const perfBadge = document.getElementById('uamas-perf-badge');\n\n            \/\/ Insert Buttons\n            const btnBullet = document.getElementById('uamas-ins-bullet');\n            const btnNum = document.getElementById('uamas-ins-num');\n            const btnHighlight = document.getElementById('uamas-ins-highlight');\n            const btnUnderline = document.getElementById('uamas-ins-underline');\n            const btnBox = document.getElementById('uamas-ins-box');\n            const btnTable = document.getElementById('uamas-ins-table');\n            const btnDiagram = document.getElementById('uamas-ins-diagram');\n            const btnImg = document.getElementById('uamas-ins-img');\n\n            \/\/ Export Buttons\n            const btnPrint = document.getElementById('uamas-btn-print');\n            const btnPdf = document.getElementById('uamas-btn-pdf');\n            const btnPng = document.getElementById('uamas-btn-png');\n            const btnJpg = document.getElementById('uamas-btn-jpg');\n            const btnSvg = document.getElementById('uamas-btn-svg');\n            const btnHtml = document.getElementById('uamas-btn-html');\n            const btnTxt = document.getElementById('uamas-btn-txt');\n            const btnCopyImg = document.getElementById('uamas-btn-copyimg');\n            const btnCopyTxt = document.getElementById('uamas-btn-copytxt');\n\n            \/\/ Canvas & Pagination\n            const canvas = document.getElementById('uamas-canvas');\n            const ctx = canvas.getContext('2d', { alpha: false });\n            const prevPageBtn = document.getElementById('uamas-prev-page');\n            const nextPageBtn = document.getElementById('uamas-next-page');\n            const pageIndicator = document.getElementById('uamas-page-indicator');\n            const pageLabel = document.getElementById('uamas-page-label');\n            const printContainer = document.getElementById('uamas-print-container');\n\n            let state = { theme: 'light', currentPage: 0 };\n\n            \/\/ LocalStorage Caching & Recovery\n            const STORAGE_KEY = 'uamas_notebook_cache_v2';\n            const savedData = localStorage.getItem(STORAGE_KEY);\n            if (savedData) {\n                try {\n                    const parsed = JSON.parse(savedData);\n                    docSubject.value = parsed.subject || '';\n                    docTitle.value = parsed.title || '';\n                    textInput.value = parsed.text || '';\n                } catch(e) {\n                    console.error('LocalStorage parse error:', e);\n                }\n            } else {\n                textInput.value = \"Semiconductor Physics Notes:\\n1. Intrinsic semiconductors have equal electron and hole concentrations.\\n2. Doping with trivalent or pentavalent impurities creates p-type and n-type materials.\\n3. [HIGHLIGHT: The PN junction diode acts as a one-way valve for electric current.]\\n4. [BOX: Important Formula: V_t = k * T \/ q (Thermal Voltage at room temperature)]\\n* [TABLE]\\n* [DIAGRAM]\";\n            }\n\n            function saveToLocalStorage() {\n                try {\n                    const data = {\n                        subject: docSubject.value,\n                        title: docTitle.value,\n                        text: textInput.value\n                    };\n                    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n                } catch(e) {\n                    console.error('LocalStorage quota exceeded:', e);\n                }\n            }\n\n            \/\/ Tabs Navigation\n            tabsNav.addEventListener('click', (e) => {\n                if (e.target.classList.contains('uamas-tab-btn')) {\n                    tabsNav.querySelectorAll('.uamas-tab-btn').forEach(b => b.classList.remove('active'));\n                    e.target.classList.add('active');\n                    const targetTab = e.target.getAttribute('data-tab');\n                    tabPanes.forEach(pane => {\n                        pane.style.display = 'none';\n                        if (pane.id === `uamas-pane-${targetTab}`) pane.style.display = 'block';\n                    });\n                }\n            });\n\n            themeToggle.addEventListener('click', () => {\n                state.theme = state.theme === 'light' ? 'dark' : 'light';\n                wrapper.setAttribute('data-theme', state.theme);\n            });\n\n            \/\/ Preset template changer\n            presetSelect.addEventListener('change', () => {\n                const val = presetSelect.value;\n                if (val === 'assignment') {\n                    docTitle.value = \"Electromagnetic Induction Tasks\";\n                    textInput.value = \"Assignment Task Overview:\\n1. State the fundamental laws of electromagnetic induction.\\n2. [HIGHLIGHT: Faraday's Law states that an electromotive force is induced in a circuit whenever magnetic flux changes.]\\n3. [BOX: Formula: E = - d(Phi) \/ dt]\";\n                } else if (val === 'homework') {\n                    docTitle.value = \"Calculus & Differential Equations\";\n                    textInput.value = \"Homework Exercises:\\n* Complete problems 4 through 10 on page 214.\\n* Show all step-by-step calculations clearly.\\n* [BOX: Note: Due date is strictly next Monday.]\";\n                } else if (val === 'class-notes') {\n                    docTitle.value = \"Thermodynamics & Entropy\";\n                    textInput.value = \"Class Lecture Notes:\\n- Topic: Thermodynamics & Entropy\\n1. First law dictates conservation of energy in isolated systems.\\n2. Second law establishes that entropy of an isolated system always increases over time.\";\n                } else if (val === 'revision') {\n                    docTitle.value = \"Quantum Physics Summary\";\n                    textInput.value = \"Quick Revision Summary:\\n[HIGHLIGHT: Key Concept: Wave-particle duality of photons.]\\n[BOX: Important Definition: Planck's constant h = 6.626 x 10^-34 J s]\";\n                } else if (val === 'practical') {\n                    docTitle.value = \"Optical Bench Experiment\";\n                    textInput.value = \"EXPERIMENT RECORD:\\nAim: To determine focal length of a convex lens.\\nApparatus: Optical bench, convex lens, candle, screen.\\nObservation Table:\\n[TABLE]\";\n                } else if (val === 'project') {\n                    docTitle.value = \"Smart Grid Systems\";\n                    textInput.value = \"PROJECT REPORT:\\nTitle: AI-Powered Smart Grid Systems\\n1. Abstract & Introduction\\n2. System Architecture & Methodology\\n[DIAGRAM]\";\n                }\n                updatePreview();\n            });\n\n            \/\/ Insertion helpers\n            btnBullet.addEventListener('click', () => { textInput.value += \"\\n* New bullet point item here.\"; updatePreview(); });\n            btnNum.addEventListener('click', () => { textInput.value += \"\\n3. New numbered list item here.\"; updatePreview(); });\n            btnHighlight.addEventListener('click', () => { textInput.value += \"\\n[HIGHLIGHT: Important highlighted statement]\"; updatePreview(); });\n            btnUnderline.addEventListener('click', () => { textInput.value += \"\\n[UNDERLINE: Key underlined term]\"; updatePreview(); });\n            btnBox.addEventListener('click', () => { textInput.value += \"\\n[BOX: Important boxed note or formula]\"; updatePreview(); });\n            btnTable.addEventListener('click', () => { textInput.value += \"\\n[TABLE]\"; updatePreview(); });\n            btnDiagram.addEventListener('click', () => { textInput.value += \"\\n[DIAGRAM]\"; updatePreview(); });\n            btnImg.addEventListener('click', () => { textInput.value += \"\\n[IMAGE]\"; updatePreview(); });\n\n            \/\/ Multi-Page A4 Engine\n            function getPagesData() {\n                const text = textInput.value || '';\n                const fontSize = 21;\n                const lineSpacing = 36;\n                const width = 800, height = 1131;\n                const maxLineWidth = width - 130;\n                const maxLinesPerPage = Math.floor((height - 200) \/ lineSpacing);\n\n                const tempCanvas = document.createElement('canvas');\n                const tCtx = tempCanvas.getContext('2d');\n                tCtx.font = `${fontSize}px 'Architects Daughter', cursive`;\n\n                const paragraphs = text.split('\\n');\n                let pages = [[]];\n                let currentLines = 0;\n\n                for (let p = 0; p < paragraphs.length; p++) {\n                    const para = paragraphs[p];\n                    if (para === '') {\n                        pages[pages.length - 1].push('');\n                        currentLines++;\n                        if (currentLines >= maxLinesPerPage) { pages.push([]); currentLines = 0; }\n                        continue;\n                    }\n\n                    \/\/ Handle special block tags directly\n                    if (para.includes('[TABLE]') || para.includes('[DIAGRAM]') || para.includes('[IMAGE]') || para.includes('[BOX:') || para.includes('[HIGHLIGHT:')) {\n                        pages[pages.length - 1].push(para);\n                        currentLines += para.includes('[TABLE]') || para.includes('[DIAGRAM]') || para.includes('[IMAGE]') ? 4 : 1;\n                        if (currentLines >= maxLinesPerPage) { pages.push([]); currentLines = 0; }\n                        continue;\n                    }\n\n                    const words = para.split(' ');\n                    let currentLine = '';\n\n                    for (let w = 0; w < words.length; w++) {\n                        const word = words[w];\n                        const testLine = currentLine + (currentLine === '' ? '' : ' ') + word;\n                        if (tCtx.measureText(testLine).width > maxLineWidth && currentLine !== '') {\n                            pages[pages.length - 1].push(currentLine);\n                            currentLine = word;\n                            currentLines++;\n                            if (currentLines >= maxLinesPerPage) { pages.push([]); currentLines = 0; }\n                        } else {\n                            currentLine = testLine;\n                        }\n                    }\n                    if (currentLine !== '') {\n                        pages[pages.length - 1].push(currentLine);\n                        currentLines++;\n                        if (currentLines >= maxLinesPerPage) { pages.push([]); currentLines = 0; }\n                    }\n                }\n                if (pages.length > 1 && pages[pages.length - 1].length === 0) pages.pop();\n                return pages;\n            }\n\n            function renderNotes(targetCtx, pageIdx, pagesList) {\n                const width = 800, height = 1131;\n                targetCtx.fillStyle = paperToneSelect.value;\n                targetCtx.fillRect(0, 0, width, height);\n\n                \/\/ Ruled Lines & Red Margin\n                targetCtx.save();\n                targetCtx.strokeStyle = '#bfdbfe'; targetCtx.lineWidth = 1;\n                let ly = 130; while (ly < height - 60) {\n                    targetCtx.beginPath(); targetCtx.moveTo(50, ly); targetCtx.lineTo(width - 50, ly); targetCtx.stroke();\n                    ly += 36;\n                }\n                targetCtx.strokeStyle = '#fca5a5'; targetCtx.lineWidth = 1.5;\n                targetCtx.beginPath(); targetCtx.moveTo(80, 50); targetCtx.lineTo(80, height - 60); targetCtx.stroke();\n                targetCtx.restore();\n\n                \/\/ Header Block on Page 1\n                if (pageIdx === 0) {\n                    targetCtx.save();\n                    targetCtx.strokeStyle = '#334155'; targetCtx.lineWidth = 1.5;\n                    targetCtx.strokeRect(50, 25, width - 100, 80);\n                    targetCtx.font = 'bold 12px sans-serif'; targetCtx.fillStyle = '#0f172a';\n                    targetCtx.fillText(`SUBJECT: ${docSubject.value.toUpperCase()}`, 65, 48);\n                    targetCtx.fillText(`TOPIC: ${docTitle.value}`, 65, 72);\n                    targetCtx.fillText(`DATE: August 01, 2026`, width - 210, 48);\n                    targetCtx.restore();\n                }\n\n                \/\/ Footer Page Number\n                targetCtx.save();\n                targetCtx.font = 'bold 12px sans-serif'; targetCtx.fillStyle = '#64748b'; targetCtx.textAlign = 'center';\n                targetCtx.fillText(`Page ${pageIdx + 1} of ${pagesList.length}`, width \/ 2, height - 30);\n                targetCtx.restore();\n\n                \/\/ Handwriting &#038; Objects\n                targetCtx.save();\n                targetCtx.font = `21px 'Architects Daughter', cursive`;\n                targetCtx.fillStyle = penColorSelect.value;\n                targetCtx.textBaseline = 'alphabetic';\n\n                const lines = pagesList[pageIdx] || [];\n                let currentY = pageIdx === 0 ? 140 : 90;\n\n                for (let i = 0; i < lines.length; i++) {\n                    const lineText = lines[i];\n\n                    if (lineText.includes('[HIGHLIGHT:')) {\n                        const content = lineText.replace('[HIGHLIGHT:', '').replace(']', '').trim();\n                        targetCtx.fillStyle = '#fef08a';\n                        targetCtx.fillRect(95, currentY - 18, targetCtx.measureText(content).width + 10, 24);\n                        targetCtx.fillStyle = penColorSelect.value;\n                        targetCtx.fillText(content, 100, currentY);\n                    } else if (lineText.includes('[BOX:')) {\n                        const content = lineText.replace('[BOX:', '').replace(']', '').trim();\n                        targetCtx.strokeStyle = '#0284c7'; targetCtx.lineWidth = 1.5;\n                        targetCtx.strokeRect(95, currentY - 20, 550, 32);\n                        targetCtx.fillStyle = '#0284c7';\n                        targetCtx.fillText(content, 105, currentY);\n                        targetCtx.fillStyle = penColorSelect.value;\n                    } else if (lineText.includes('[TABLE]')) {\n                        targetCtx.strokeStyle = '#475569'; targetCtx.lineWidth = 1;\n                        targetCtx.strokeRect(95, currentY - 15, 450, 90);\n                        targetCtx.beginPath(); targetCtx.moveTo(95, currentY + 15); targetCtx.lineTo(545, currentY + 15); targetCtx.stroke();\n                        targetCtx.beginPath(); targetCtx.moveTo(245, currentY - 15); targetCtx.lineTo(245, currentY + 75); targetCtx.stroke();\n                        targetCtx.beginPath(); targetCtx.moveTo(395, currentY - 15); targetCtx.lineTo(395, currentY + 75); targetCtx.stroke();\n                        targetCtx.font = '14px sans-serif'; targetCtx.fillStyle = '#334155';\n                        targetCtx.fillText(\"Parameter\", 120, currentY + 5);\n                        targetCtx.fillText(\"Obs 1\", 280, currentY + 5);\n                        targetCtx.fillText(\"Obs 2\", 430, currentY + 5);\n                        targetCtx.font = `21px 'Architects Daughter', cursive`;\n                        currentY += 85;\n                    } else if (lineText.includes('[DIAGRAM]')) {\n                        targetCtx.strokeStyle = '#0f172a'; targetCtx.lineWidth = 1.5;\n                        targetCtx.strokeRect(150, currentY - 10, 200, 100);\n                        targetCtx.beginPath(); targetCtx.arc(250, currentY + 40, 30, 0, Math.PI * 2); targetCtx.stroke();\n                        targetCtx.font = '12px sans-serif'; targetCtx.fillStyle = '#64748b';\n                        targetCtx.fillText(\"Circuit Schematic Diagram\", 155, currentY + 115);\n                        currentY += 125;\n                    } else if (lineText.includes('[IMAGE]')) {\n                        targetCtx.strokeStyle = '#94a3b8'; targetCtx.lineWidth = 1;\n                        targetCtx.strokeRect(150, currentY - 10, 240, 120);\n                        targetCtx.font = '12px sans-serif'; targetCtx.fillStyle = '#64748b';\n                        targetCtx.fillText(\"[ Inserted Illustration \/ Figure ]\", 170, currentY + 55);\n                        currentY += 135;\n                    } else if (lineText !== '') {\n                        targetCtx.fillText(lineText, 100, currentY);\n                    }\n                    currentY += 36;\n                }\n                targetCtx.restore();\n            }\n\n            function updatePreview() {\n                const startTime = performance.now();\n                const width = 800, height = 1131;\n                canvas.width = width;\n                canvas.height = height;\n\n                const pages = getPagesData();\n                if (state.currentPage >= pages.length) state.currentPage = Math.max(0, pages.length - 1);\n                pageIndicator.textContent = `Page ${state.currentPage + 1} of ${pages.length}`;\n                pageLabel.textContent = `Page ${state.currentPage + 1} of ${pages.length}`;\n\n                renderNotes(ctx, state.currentPage, pages);\n                buildPrintContainer(pages);\n                saveToLocalStorage();\n\n                const endTime = performance.now();\n                perfBadge.textContent = `\u26a1 ${(endTime - startTime).toFixed(1)}ms Render`;\n            }\n\n            function buildPrintContainer(pages) {\n                printContainer.innerHTML = '';\n                pages.forEach((pageLines, idx) => {\n                    const pCanvas = document.createElement('canvas');\n                    pCanvas.width = 800; pCanvas.height = 1131;\n                    pCanvas.style.display = 'block';\n                    pCanvas.style.width = '100%';\n                    pCanvas.style.maxWidth = '800px';\n                    pCanvas.style.margin = '0 auto';\n                    const pCtx = pCanvas.getContext('2d');\n                    renderNotes(pCtx, idx, pages);\n\n                    if (idx < pages.length - 1) {\n                        const br = document.createElement('div');\n                        br.className = 'uamas-page-break';\n                        printContainer.appendChild(pCanvas);\n                        printContainer.appendChild(br);\n                    } else {\n                        printContainer.appendChild(pCanvas);\n                    }\n                });\n            }\n\n            prevPageBtn.addEventListener('click', () => { if (state.currentPage > 0) { state.currentPage--; updatePreview(); } });\n            nextPageBtn.addEventListener('click', () => { const pages = getPagesData(); if (state.currentPage < pages.length - 1) { state.currentPage++; updatePreview(); } });\n\n            \/\/ Debounced Input Handling\n            function debounce(func, wait) {\n                let timeout;\n                return function(...args) {\n                    clearTimeout(timeout);\n                    timeout = setTimeout(() => func.apply(this, args), wait);\n                };\n            }\n\n            const debouncedUpdate = debounce(updatePreview, 150);\n\n            [docSubject, docTitle, textInput, penColorSelect, paperToneSelect].forEach(el => {\n                el.addEventListener('input', debouncedUpdate);\n                el.addEventListener('change', updatePreview);\n            });\n\n            \/\/ Master Export Suite Handlers\n            btnPrint.addEventListener('click', () => { updatePreview(); window.print(); });\n            btnPdf.addEventListener('click', () => { updatePreview(); window.print(); });\n\n            btnPng.addEventListener('click', () => {\n                updatePreview();\n                const link = document.createElement('a');\n                link.download = `notebook-page-${state.currentPage + 1}.png`;\n                link.href = canvas.toDataURL('image\/png');\n                link.click();\n            });\n\n            btnJpg.addEventListener('click', () => {\n                updatePreview();\n                const link = document.createElement('a');\n                link.download = `notebook-page-${state.currentPage + 1}.jpg`;\n                link.href = canvas.toDataURL('image\/jpeg', 0.95);\n                link.click();\n            });\n\n            btnSvg.addEventListener('click', () => {\n                const dataUrl = canvas.toDataURL('image\/png');\n                const svgContent = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"800\" height=\"1131\"><image href=\"${dataUrl}\" width=\"800\" height=\"1131\"\/><\/svg>`;\n                const blob = new Blob([svgContent], { type: 'image\/svg+xml' });\n                const link = document.createElement('a');\n                link.download = `notebook-page-${state.currentPage + 1}.svg`;\n                link.href = URL.createObjectURL(blob);\n                link.click();\n            });\n\n            btnHtml.addEventListener('click', () => {\n                const dataUrl = canvas.toDataURL('image\/png');\n                const htmlContent = `<!DOCTYPE html><html><head><title>Notebook Export<\/title><\/head><body style=\"text-align:center;background:#333;\"><img decoding=\"async\" src=\"${dataUrl}\" style=\"max-width:100%;box-shadow:0 0 10px rgba(0,0,0,0.5);\"\/><\/body><\/html>`;\n                const blob = new Blob([htmlContent], { type: 'text\/html' });\n                const link = document.createElement('a');\n                link.download = `notebook-page-${state.currentPage + 1}.html`;\n                link.href = URL.createObjectURL(blob);\n                link.click();\n            });\n\n            btnTxt.addEventListener('click', () => {\n                const blob = new Blob([textInput.value], { type: 'text\/plain' });\n                const link = document.createElement('a');\n                link.download = 'notebook-notes.txt';\n                link.href = URL.createObjectURL(blob);\n                link.click();\n            });\n\n            btnCopyImg.addEventListener('click', async () => {\n                updatePreview();\n                try {\n                    canvas.toBlob(async (blob) => {\n                        await navigator.clipboard.write([new ClipboardItem({ 'image\/png': blob })]);\n                        alert('Current notebook page image copied to clipboard!');\n                    });\n                } catch (err) {\n                    alert('Clipboard image copy not supported in this browser.');\n                }\n            });\n\n            btnCopyTxt.addEventListener('click', async () => {\n                try {\n                    await navigator.clipboard.writeText(textInput.value);\n                    alert('Notes text copied to clipboard!');\n                } catch (err) {\n                    alert('Failed to copy text.');\n                }\n            });\n\n            \/\/ Initial Render\n            updatePreview();\n        })();\n    <\/script>\n<\/div>\n<!-- END: Ultimate Masterpiece Academic Notebook & Handwriting Studio -->\n","protected":false},"excerpt":{"rendered":"<p>Ultimate Academic &#038; Notebook Studio Templates, Rich Objects, Optimized Rendering, Multi-Format Exports &#038; Zero Clipping \ud83c\udf13 Theme \ud83d\udcdd Studio Control Hub \u26a1 0ms Render \ud83c\udfaf Templates \u270d\ufe0f Editor \ud83d\udccc Objects \ud83c\udfa8 Styling Select Document Template Assignment Page (Header Block)Homework SheetClass Notes (Structured)Revision Notes (Highlighted &#038; Boxed)Practical Record (Experiment Format)Project Report (Comprehensive) Subject Name Document Title [&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-823","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/823","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=823"}],"version-history":[{"count":1,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/823\/revisions"}],"predecessor-version":[{"id":824,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/823\/revisions\/824"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}