Advanced Digital Handwriting & Paper Studio<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@400..700&family=Coming+Soon&family=Indie+Flower&family=Kalam:wght@300;400;700&family=Pacifico&family=Reenie+Beanie&family=Architects+Daughter&family=Sacramento&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n fontFamily: {\n caveat: ['Caveat', 'cursive'],\n kalam: ['Kalam', 'cursive'],\n indie: ['Indie Flower', 'cursive'],\n coming: ['Coming Soon', 'cursive'],\n reenie: ['Reenie Beanie', 'cursive'],\n architects: ['Architects Daughter', 'cursive'],\n pacifico: ['Pacifico', 'cursive'],\n sacramento: ['Sacramento', 'cursive'],\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Scoped WordPress \/ Container Compatibility & Custom Styles *\/\n .hws-app-wrapper {\n all: initial;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n color: #1e293b;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100vh;\n min-height: 600px;\n box-sizing: border-box;\n position: relative;\n overflow: hidden;\n background-color: #f1f5f9;\n }\n .hws-app-wrapper.dark {\n color: #f8fafc;\n background-color: #0f172a;\n }\n\n \/* Custom Paper Background Patterns *\/\n .hws-paper-lined {\n background-image: linear-gradient(#93c5fd 1px, transparent 1px);\n background-size: 100% 2rem;\n }\n .hws-paper-grid {\n background-image: linear-gradient(to right, #cbd5e1 1px, transparent 1px), linear-gradient(to bottom, #cbd5e1 1px, transparent 1px);\n background-size: 1.5rem 1.5rem;\n }\n .hws-paper-dotted {\n background-image: radial-gradient(#94a3b8 1.5px, transparent 1.5px);\n background-size: 1.5rem 1.5rem;\n }\n .hws-paper-blank {\n background-image: none;\n }\n \n \/* Custom Scrollbar *\/\n .hws-app-wrapper ::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .hws-app-wrapper ::-webkit-scrollbar-track {\n background: rgba(0,0,0,0.05);\n }\n .hws-app-wrapper ::-webkit-scrollbar-thumb {\n background: rgba(0,0,0,0.2);\n border-radius: 4px;\n }\n .hws-app-wrapper ::-webkit-scrollbar-thumb:hover {\n background: rgba(0,0,0,0.4);\n }\n\n \/* Print Styles for A4 *\/\n @media print {\n body * {\n visibility: hidden !important;\n }\n .hws-printable-area, .hws-printable-area * {\n visibility: visible !important;\n }\n .hws-printable-area {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n width: 210mm !important;\n min-height: 297mm !important;\n margin: 0 !important;\n box-shadow: none !important;\n border: none !important;\n transform: none !important;\n }\n @page {\n size: A4 portrait;\n margin: 10mm;\n }\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-100 dark:bg-slate-900 m-0 p-0\">\n\n <div id=\"hws-root\" class=\"hws-app-wrapper\">\n \n <header class=\"bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-3 md:px-4 py-2.5 flex items-center justify-between shrink-0 shadow-sm z-30\">\n <div class=\"flex items-center space-x-2 md:space-x-3\">\n <div class=\"bg-indigo-600 text-white p-2 rounded-xl shadow-md flex items-center justify-center\">\n <i class=\"fa-solid fa-pen-nib text-base md:text-lg\"><\/i>\n <\/div>\n <div>\n <h1 class=\"font-bold text-sm md:text-lg tracking-tight leading-tight flex items-center text-slate-800 dark:text-slate-100 m-0\">\n HandwriteStudio \n <span class=\"text-[10px] md:text-xs px-2 py-0.5 bg-indigo-100 dark:bg-indigo-900\/60 text-indigo-600 dark:text-indigo-300 rounded-full font-semibold ml-1.5\">Pro<\/span>\n <\/h1>\n <p class=\"text-[11px] text-slate-500 dark:text-slate-400 hidden sm:block m-0\">Advanced Text-to-Handwriting & Paper Studio<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"flex items-center space-x-1.5 md:space-x-2\">\n <button id=\"hws-btn-toggle-sidebar\" title=\"Toggle Controls\" class=\"lg:hidden px-3 py-1.5 text-xs font-medium bg-indigo-600 text-white rounded-lg transition flex items-center space-x-1.5 shadow-sm cursor-pointer border-0\">\n <i class=\"fa-solid fa-sliders\"><\/i>\n <span>Controls<\/span>\n <\/button>\n\n <button id=\"hws-btn-save-local\" title=\"Save to LocalStorage\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0 text-slate-700 dark:text-slate-200\">\n <i class=\"fa-solid fa-floppy-disk text-indigo-500\"><\/i>\n <span class=\"hidden md:inline\">Save<\/span>\n <\/button>\n\n <button id=\"hws-btn-load-local\" title=\"Load from LocalStorage\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0 text-slate-700 dark:text-slate-200\">\n <i class=\"fa-solid fa-folder-open text-amber-500\"><\/i>\n <span class=\"hidden md:inline\">Load<\/span>\n <\/button>\n\n <div class=\"h-5 w-px bg-slate-200 dark:bg-slate-700 mx-0.5 md:mx-1\"><\/div>\n\n <button id=\"hws-btn-print\" title=\"Print Document (A4)\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0 text-slate-700 dark:text-slate-200\">\n <i class=\"fa-solid fa-print text-blue-500\"><\/i>\n <span class=\"hidden md:inline\">Print<\/span>\n <\/button>\n\n <button id=\"hws-btn-export-pdf\" title=\"Export as PDF\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-indigo-50 dark:bg-indigo-900\/40 text-indigo-600 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900\/60 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0\">\n <i class=\"fa-solid fa-file-pdf\"><\/i>\n <span class=\"hidden md:inline\">PDF<\/span>\n <\/button>\n\n <button id=\"hws-btn-export-png\" title=\"Export as PNG Image\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-emerald-50 dark:bg-emerald-900\/40 text-emerald-600 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-900\/60 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0\">\n <i class=\"fa-solid fa-file-image\"><\/i>\n <span class=\"hidden md:inline\">PNG<\/span>\n <\/button>\n\n <div class=\"h-5 w-px bg-slate-200 dark:bg-slate-700 mx-0.5 md:mx-1\"><\/div>\n\n <button id=\"hws-btn-theme-toggle\" title=\"Toggle Dark\/Light Mode\" class=\"p-2 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition cursor-pointer border-0 bg-transparent\">\n <i class=\"fa-solid fa-moon dark:hidden\"><\/i>\n <i class=\"fa-solid fa-sun hidden dark:block text-amber-400\"><\/i>\n <\/button>\n <\/div>\n <\/header>\n\n \n <div class=\"flex-1 flex flex-col lg:flex-row overflow-hidden relative\">\n\n \n <aside class=\"absolute lg:relative inset-y-0 left-0 w-80 md:w-96 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col shrink-0 z-20 shadow-2xl lg:shadow-none transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto\" id=\"hws-sidebar-controls\">\n \n <div class=\"p-4 space-y-5\">\n\n \n <div class=\"space-y-2\">\n <div class=\"flex items-center justify-between\">\n <label for=\"hws-text-input\" class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-keyboard text-indigo-500\"><\/i> Your Content\n <\/label>\n <span id=\"hws-char-count\" class=\"text-[10px] text-slate-400\">0 chars<\/span>\n <\/div>\n <textarea id=\"hws-text-input\" rows=\"5\" class=\"w-full p-3 text-sm rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-y transition\" placeholder=\"Type or paste your text here to convert into natural handwriting...\">Dear Reader,\n\nWelcome to the Advanced Digital Handwriting & Paper Studio. This tool lets you convert standard computer text into realistic, organic handwriting across various paper templates, custom ink colors, and typography styles.\n\nFeel free to edit this text or type your own notes on the left control panel. You can export your final document as a clean PDF, generate a high-resolution PNG image, print it directly to physical paper in standard A4 format, or save your progress locally in your browser storage.\n\nEnjoy crafting your digital handwritten notes!<\/textarea>\n <\/div>\n\n \n <div class=\"space-y-4\">\n <div class=\"space-y-2\">\n <label for=\"hws-font-select\" class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-font text-indigo-500\"><\/i> Handwriting Style\n <\/label>\n <select id=\"hws-font-select\" class=\"w-full p-2.5 text-sm rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition\">\n <option value=\"font-caveat\">Caveat (Clean Cursive)<\/option>\n <option value=\"font-kalam\" selected>Kalam (Casual Script)<\/option>\n <option value=\"font-indie\">Indie Flower (Quirky)<\/option>\n <option value=\"font-coming\">Coming Soon (Neat Print)<\/option>\n <option value=\"font-reenie\">Reenie Beanie (Quick Notes)<\/option>\n <option value=\"font-architects\">Architects Daughter (Drafting)<\/option>\n <option value=\"font-pacifico\">Pacifico (Bold Script)<\/option>\n <option value=\"font-sacramento\">Sacramento (Elegant)<\/option>\n <\/select>\n <\/div>\n\n <div class=\"space-y-2\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-pen text-indigo-500\"><\/i> Writing Tool\n <\/label>\n <div class=\"grid grid-cols-3 gap-2\">\n <button type=\"button\" data-tool=\"ballpoint\" class=\"hws-tool-btn px-2 py-2 text-xs font-medium rounded-xl border border-indigo-500 bg-indigo-50 dark:bg-indigo-900\/40 text-indigo-600 dark:text-indigo-300 flex flex-col items-center gap-1 transition cursor-pointer\">\n <i class=\"fa-solid fa-pen-clip\"><\/i> Ballpoint\n <\/button>\n <button type=\"button\" data-tool=\"gel\" class=\"hws-tool-btn px-2 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex flex-col items-center gap-1 transition cursor-pointer\">\n <i class=\"fa-solid fa-marker\"><\/i> Gel Pen\n <\/button>\n <button type=\"button\" data-tool=\"fountain\" class=\"hws-tool-btn px-2 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex flex-col items-center gap-1 transition cursor-pointer\">\n <i class=\"fa-solid fa-feather\"><\/i> Fountain\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"space-y-2\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-droplet text-indigo-500\"><\/i> Ink Color\n <\/label>\n <div class=\"flex items-center space-x-2 pt-1\">\n <button type=\"button\" data-color=\"#1e3a8a\" class=\"hws-color-btn w-6 h-6 rounded-full bg-blue-900 ring-2 ring-offset-2 ring-indigo-500 transition cursor-pointer border-0\"><\/button>\n <button type=\"button\" data-color=\"#0f172a\" class=\"hws-color-btn w-6 h-6 rounded-full bg-slate-900 ring-1 ring-slate-300 transition cursor-pointer border-0\"><\/button>\n <button type=\"button\" data-color=\"#991b1b\" class=\"hws-color-btn w-6 h-6 rounded-full bg-red-800 ring-1 ring-slate-300 transition cursor-pointer border-0\"><\/button>\n <button type=\"button\" data-color=\"#166534\" class=\"hws-color-btn w-6 h-6 rounded-full bg-green-800 ring-1 ring-slate-300 transition cursor-pointer border-0\"><\/button>\n <input type=\"color\" id=\"hws-custom-color-picker\" value=\"#1e3a8a\" title=\"Custom Color\" class=\"w-6 h-6 rounded-full overflow-hidden cursor-pointer border-0 p-0 bg-transparent\">\n <\/div>\n <\/div>\n\n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center\">\n <label for=\"hws-font-size-range\" class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-text-height text-indigo-500\"><\/i> Size\n <\/label>\n <span id=\"hws-font-size-val\" class=\"text-xs font-medium text-slate-600 dark:text-slate-300\">24px<\/span>\n <\/div>\n <input type=\"range\" id=\"hws-font-size-range\" min=\"16\" max=\"36\" value=\"24\" class=\"w-full accent-indigo-600 cursor-pointer pt-2\">\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-3 pt-2 border-t border-slate-200 dark:border-slate-700\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-note-sticky text-indigo-500\"><\/i> Paper & Background\n <\/label>\n <div class=\"grid grid-cols-2 gap-2\">\n <button type=\"button\" data-paper=\"lined\" class=\"hws-paper-btn px-3 py-2 text-xs font-medium rounded-xl border border-indigo-500 bg-indigo-50 dark:bg-indigo-900\/40 text-indigo-600 dark:text-indigo-300 flex items-center justify-center gap-1.5 transition cursor-pointer\">\n <i class=\"fa-solid fa-bars\"><\/i> Lined\n <\/button>\n <button type=\"button\" data-paper=\"grid\" class=\"hws-paper-btn px-3 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center gap-1.5 transition cursor-pointer\">\n <i class=\"fa-solid fa-border-all\"><\/i> Grid\n <\/button>\n <button type=\"button\" data-paper=\"dotted\" class=\"hws-paper-btn px-3 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center gap-1.5 transition cursor-pointer\">\n <i class=\"fa-solid fa-ellipsis\"><\/i> Dotted\n <\/button>\n <button type=\"button\" data-paper=\"blank\" class=\"hws-paper-btn px-3 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center gap-1.5 transition cursor-pointer\">\n <i class=\"fa-solid fa-square\"><\/i> Blank\n <\/button>\n <\/div>\n\n <div class=\"pt-2\">\n <label class=\"text-[11px] text-slate-400 mb-1.5 block\">Paper Tint<\/label>\n <div class=\"flex items-center space-x-2\">\n <button type=\"button\" data-bg=\"#ffffff\" class=\"hws-bg-btn w-6 h-6 rounded-md bg-white ring-2 ring-indigo-500 shadow-sm border border-slate-200 transition cursor-pointer\" title=\"Pure White\"><\/button>\n <button type=\"button\" data-bg=\"#fefce8\" class=\"hws-bg-btn w-6 h-6 rounded-md bg-yellow-50 ring-1 ring-slate-300 shadow-sm border border-yellow-100 transition cursor-pointer\" title=\"Warm Ivory\"><\/button>\n <button type=\"button\" data-bg=\"#fdf4ff\" class=\"hws-bg-btn w-6 h-6 rounded-md bg-fuchsia-50 ring-1 ring-slate-300 shadow-sm border border-fuchsia-100 transition cursor-pointer\" title=\"Soft Pastel\"><\/button>\n <button type=\"button\" data-bg=\"#f0fdf4\" class=\"hws-bg-btn w-6 h-6 rounded-md bg-emerald-50 ring-1 ring-slate-300 shadow-sm border border-emerald-100 transition cursor-pointer\" title=\"Mint Tint\"><\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-3 pt-2 border-t border-slate-200 dark:border-slate-700\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-magnifying-glass text-indigo-500\"><\/i> Zoom Mode\n <\/label>\n <select id=\"hws-zoom-select\" class=\"w-full p-2.5 text-sm rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition\">\n <option value=\"fit\" selected>Fit To Screen<\/option>\n <option value=\"width\">Fit To Width<\/option>\n <option value=\"height\">Fit To Height<\/option>\n <option value=\"1\">100%<\/option>\n <option value=\"1.25\">125%<\/option>\n <option value=\"1.5\">150%<\/option>\n <option value=\"1.75\">175%<\/option>\n <option value=\"2\">200%<\/option>\n <\/select>\n <\/div>\n\n \n <div class=\"space-y-3 pt-2 border-t border-slate-200 dark:border-slate-700 pb-10 lg:pb-2\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-sliders text-indigo-500\"><\/i> Human Variation\n <\/label>\n \n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center text-xs text-slate-600 dark:text-slate-300\">\n <span>Line Slant \/ Rotation<\/span>\n <span id=\"hws-slant-val\" class=\"font-medium\">0\u00b0<\/span>\n <\/div>\n <input type=\"range\" id=\"hws-slant-range\" min=\"-3\" max=\"3\" step=\"0.5\" value=\"0\" class=\"w-full accent-indigo-600 cursor-pointer\">\n <\/div>\n\n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center text-xs text-slate-600 dark:text-slate-300\">\n <span>Vertical Spacing<\/span>\n <span id=\"hws-spacing-val\" class=\"font-medium\">2rem<\/span>\n <\/div>\n <input type=\"range\" id=\"hws-spacing-range\" min=\"1.5\" max=\"3.5\" step=\"0.25\" value=\"2\" class=\"w-full accent-indigo-600 cursor-pointer\">\n <\/div>\n <\/div>\n\n <\/div>\n <\/aside>\n\n \n <main class=\"flex-1 bg-slate-200 dark:bg-slate-950 relative overflow-auto flex box-border\" id=\"hws-preview-container\" style=\"display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100%; position: relative; box-sizing: border-box; padding: 24px;\">\n \n \n <div id=\"hws-scaler-wrapper\" style=\"position: relative; display: flex; justify-content: center; align-items: center; margin: auto; transition: transform 0.1s ease-out; transform-origin: center center;\">\n <div id=\"hws-printable-area\" class=\"hws-printable-area hws-paper-lined\" style=\"width: 210mm; min-height: 297mm; background-color: #ffffff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; display: flex; flex-direction: column; box-sizing: border-box; padding: 48px;\">\n \n \n <div style=\"position: absolute; left: 48px; top: 0; bottom: 0; width: 1px; background-color: rgba(252, 165, 165, 0.6); pointer-events: none;\"><\/div>\n\n \n <div id=\"hws-handwriting-output\" class=\"font-kalam\" style=\"font-size: 24px; color: #1e3a8a; white-space: pre-wrap; word-break: break-word; line-height: 2rem; outline: none; user-select: text; position: relative; z-index: 10; flex: 1;\">Dear Reader,\n\nWelcome to the Advanced Digital Handwriting & Paper Studio. This tool lets you convert standard computer text into realistic, organic handwriting across various paper templates, custom ink colors, and typography styles.\n\nFeel free to edit this text or type your own notes on the left control panel. You can export your final document as a clean PDF, generate a high-resolution PNG image, print it directly to physical paper in standard A4 format, or save your progress locally in your browser storage.\n\nEnjoy crafting your digital handwritten notes!<\/div>\n\n \n <div style=\"margin-top: auto; padding-top: 32px; text-align: center; font-size: 12px; color: #94a3b8; font-family: sans-serif; user-select: none;\">\n Page 1 of 1 \u2022 Generated with HandwriteStudio Pro\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n <\/div>\n\n \n <div id=\"hws-toast-container\" style=\"position: fixed; bottom: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none;\"><\/div>\n <\/div>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n \n <script>\n (function() {\n document.addEventListener('DOMContentLoaded', () => {\n const rootEl = document.getElementById('hws-root');\n const textInput = document.getElementById('hws-text-input');\n const handwritingOutput = document.getElementById('hws-handwriting-output');\n const charCount = document.getElementById('hws-char-count');\n const fontSelect = document.getElementById('hws-font-select');\n const fontSizeRange = document.getElementById('hws-font-size-range');\n const fontSizeVal = document.getElementById('hws-font-size-val');\n const slantRange = document.getElementById('hws-slant-range');\n const slantVal = document.getElementById('hws-slant-val');\n const spacingRange = document.getElementById('hws-spacing-range');\n const spacingVal = document.getElementById('hws-spacing-val');\n const printableArea = document.getElementById('hws-printable-area');\n const scalerWrapper = document.getElementById('hws-scaler-wrapper');\n const previewContainer = document.getElementById('hws-preview-container');\n const customColorPicker = document.getElementById('hws-custom-color-picker');\n const zoomSelect = document.getElementById('hws-zoom-select');\n\n const btnSaveLocal = document.getElementById('hws-btn-save-local');\n const btnLoadLocal = document.getElementById('hws-btn-load-local');\n const btnPrint = document.getElementById('hws-btn-print');\n const btnExportPdf = document.getElementById('hws-btn-export-pdf');\n const btnExportPng = document.getElementById('hws-btn-export-png');\n const btnThemeToggle = document.getElementById('hws-btn-theme-toggle');\n const btnToggleSidebar = document.getElementById('hws-btn-toggle-sidebar');\n const sidebarControls = document.getElementById('hws-sidebar-controls');\n\n const toolBtns = document.querySelectorAll('.hws-tool-btn');\n const colorBtns = document.querySelectorAll('.hws-color-btn');\n const paperBtns = document.querySelectorAll('.hws-paper-btn');\n const bgBtns = document.querySelectorAll('.hws-bg-btn');\n\n const state = {\n text: textInput.value,\n font: 'font-kalam',\n tool: 'ballpoint',\n color: '#1e3a8a',\n fontSize: 24,\n paper: 'lined',\n paperBg: '#ffffff',\n slant: 0,\n spacing: 2.0,\n zoomMode: 'fit'\n };\n\n updateCharCount(textInput.value);\n\n function showToast(message, type = 'success') {\n const container = document.getElementById('hws-toast-container');\n const toast = document.createElement('div');\n toast.style.pointerEvents = 'auto';\n toast.style.padding = '12px 16px';\n toast.style.borderRadius = '12px';\n toast.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1)';\n toast.style.color = '#ffffff';\n toast.style.fontSize = '12px';\n toast.style.fontWeight = '500';\n toast.style.display = 'flex';\n toast.style.alignItems = 'center';\n toast.style.gap = '8px';\n toast.style.transition = 'all 0.3s ease';\n toast.style.transform = 'translateY(8px)';\n toast.style.opacity = '0';\n \n if (type === 'success') {\n toast.style.backgroundColor = '#16a34a';\n toast.innerHTML = `<i class=\"fa-solid fa-circle-check\"><\/i><span>${message}<\/span>`;\n } else if (type === 'error') {\n toast.style.backgroundColor = '#dc2626';\n toast.innerHTML = `<i class=\"fa-solid fa-circle-exclamation\"><\/i><span>${message}<\/span>`;\n } else {\n toast.style.backgroundColor = '#4f46e5';\n toast.innerHTML = `<i class=\"fa-solid fa-circle-info\"><\/i><span>${message}<\/span>`;\n }\n\n container.appendChild(toast);\n setTimeout(() => {\n toast.style.transform = 'translateY(0)';\n toast.style.opacity = '1';\n }, 10);\n\n setTimeout(() => {\n toast.style.transform = 'translateY(8px)';\n toast.style.opacity = '0';\n setTimeout(() => toast.remove(), 300);\n }, 3000);\n }\n\n function updateCharCount(str) {\n charCount.textContent = `${str.length} chars`;\n }\n\n \/\/ PROFESSIONAL RESPONSIVE SCALING ENGINE\n function updateResponsiveScaling() {\n if (!previewContainer || !scalerWrapper || !printableArea) return;\n\n const containerWidth = previewContainer.clientWidth;\n const containerHeight = previewContainer.clientHeight;\n \n const paddingX = 48; \/\/ 24px padding on each side\n const paddingY = 48;\n\n const availableWidth = Math.max(100, containerWidth - paddingX);\n const availableHeight = Math.max(100, containerHeight - paddingY);\n\n \/\/ A4 dimensions in px at 96 DPI: 210mm = 793.7px, 297mm = 1122.5px\n const paperWidth = printableArea.offsetWidth || 794;\n const paperHeight = printableArea.offsetHeight || 1123;\n\n let scale = 1;\n\n if (state.zoomMode === 'fit') {\n const scaleX = availableWidth \/ paperWidth;\n const scaleY = availableHeight \/ paperHeight;\n scale = Math.min(scaleX, scaleY, 1);\n } else if (state.zoomMode === 'width') {\n scale = availableWidth \/ paperWidth;\n } else if (state.zoomMode === 'height') {\n scale = availableHeight \/ paperHeight;\n } else {\n scale = parseFloat(state.zoomMode);\n }\n\n scalerWrapper.style.transform = `scale(${scale})`;\n }\n\n \/\/ Debounced resize & observer\n let resizeTimer;\n window.addEventListener('resize', () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n requestAnimationFrame(updateResponsiveScaling);\n }, 50);\n });\n\n if (window.ResizeObserver) {\n const ro = new ResizeObserver(() => {\n requestAnimationFrame(updateResponsiveScaling);\n });\n ro.observe(previewContainer);\n }\n\n \/\/ Initial scale calculation\n setTimeout(updateResponsiveScaling, 50);\n\n zoomSelect.addEventListener('change', (e) => {\n state.zoomMode = e.target.value;\n updateResponsiveScaling();\n });\n\n \/\/ Mobile sidebar toggle behavior\n btnToggleSidebar.addEventListener('click', () => {\n sidebarControls.classList.toggle('-translate-x-full');\n setTimeout(updateResponsiveScaling, 300);\n });\n\n textInput.addEventListener('input', (e) => {\n state.text = e.target.value;\n handwritingOutput.textContent = state.text;\n updateCharCount(state.text);\n requestAnimationFrame(updateResponsiveScaling);\n });\n\n fontSelect.addEventListener('change', (e) => {\n fontSelect.querySelectorAll('option').forEach(opt => {\n handwritingOutput.classList.remove(opt.value);\n });\n state.font = e.target.value;\n handwritingOutput.classList.add(state.font);\n });\n\n toolBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n toolBtns.forEach(b => {\n b.classList.remove('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900\/40', 'text-indigo-600', 'dark:text-indigo-300');\n b.classList.add('border-slate-200', 'dark:border-slate-700', 'bg-slate-50', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300');\n });\n btn.classList.add('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900\/40', 'text-indigo-600', 'dark:text-indigo-300');\n btn.classList.remove('border-slate-200', 'dark:border-slate-700', 'bg-slate-50', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300');\n state.tool = btn.getAttribute('data-tool');\n \n if (state.tool === 'gel') {\n handwritingOutput.style.filter = 'drop-shadow(0.2px 0.2px 0.4px rgba(0,0,0,0.2))';\n } else if (state.tool === 'fountain') {\n handwritingOutput.style.filter = 'drop-shadow(0.5px 0.5px 0.8px rgba(0,0,0,0.15))';\n } else {\n handwritingOutput.style.filter = 'none';\n }\n });\n });\n\n function applyColor(hex) {\n state.color = hex;\n handwritingOutput.style.color = hex;\n customColorPicker.value = hex;\n }\n\n colorBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n colorBtns.forEach(b => b.classList.remove('ring-2', 'ring-offset-2', 'ring-indigo-500'));\n btn.classList.add('ring-2', 'ring-offset-2', 'ring-indigo-500');\n applyColor(btn.getAttribute('data-color'));\n });\n });\n\n customColorPicker.addEventListener('input', (e) => {\n applyColor(e.target.value);\n });\n\n fontSizeRange.addEventListener('input', (e) => {\n state.fontSize = parseInt(e.target.value);\n fontSizeVal.textContent = `${state.fontSize}px`;\n handwritingOutput.style.fontSize = `${state.fontSize}px`;\n requestAnimationFrame(updateResponsiveScaling);\n });\n\n paperBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n paperBtns.forEach(b => {\n b.classList.remove('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900\/40', 'text-indigo-600', 'dark:text-indigo-300');\n b.classList.add('border-slate-200', 'dark:border-slate-700', 'bg-slate-50', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300');\n });\n btn.classList.add('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900\/40', 'text-indigo-600', 'dark:text-indigo-300');\n btn.classList.remove('border-slate-200', 'dark:border-slate-700', 'bg-slate-50', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300');\n \n state.paper = btn.getAttribute('data-paper');\n printableArea.classList.remove('hws-paper-lined', 'hws-paper-grid', 'hws-paper-dotted', 'hws-paper-blank');\n printableArea.classList.add(`hws-paper-${state.paper}`);\n });\n });\n\n bgBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n bgBtns.forEach(b => b.classList.remove('ring-2', 'ring-offset-2', 'ring-indigo-500'));\n btn.classList.add('ring-2', 'ring-offset-2', 'ring-indigo-500');\n state.paperBg = btn.getAttribute('data-bg');\n printableArea.style.backgroundColor = state.paperBg;\n });\n });\n\n slantRange.addEventListener('input', (e) => {\n state.slant = parseFloat(e.target.value);\n slantVal.textContent = `${state.slant}\u00b0`;\n handwritingOutput.style.transform = `rotate(${state.slant}deg)`;\n });\n\n spacingRange.addEventListener('input', (e) => {\n state.spacing = parseFloat(e.target.value);\n spacingVal.textContent = `${state.spacing}rem`;\n handwritingOutput.style.lineHeight = `${state.spacing}rem`;\n requestAnimationFrame(updateResponsiveScaling);\n });\n\n btnSaveLocal.addEventListener('click', () => {\n try {\n localStorage.setItem('hws_document_state', JSON.stringify(state));\n showToast('Document successfully saved to browser storage!');\n } catch (err) {\n showToast('Failed to save document.', 'error');\n }\n });\n\n btnLoadLocal.addEventListener('click', () => {\n try {\n const saved = localStorage.getItem('hws_document_state');\n if (!saved) {\n showToast('No saved document found in storage.', 'info');\n return;\n }\n const parsed = JSON.parse(saved);\n Object.assign(state, parsed);\n\n textInput.value = state.text;\n handwritingOutput.textContent = state.text;\n updateCharCount(state.text);\n\n fontSelect.value = state.font;\n fontSelect.querySelectorAll('option').forEach(opt => handwritingOutput.classList.remove(opt.value));\n handwritingOutput.classList.add(state.font);\n\n applyColor(state.color);\n\n fontSizeRange.value = state.fontSize;\n fontSizeVal.textContent = `${state.fontSize}px`;\n handwritingOutput.style.fontSize = `${state.fontSize}px`;\n\n slantRange.value = state.slant;\n slantVal.textContent = `${state.slant}\u00b0`;\n handwritingOutput.style.transform = `rotate(${state.slant}deg)`;\n\n spacingRange.value = state.spacing;\n spacingVal.textContent = `${state.spacing}rem`;\n handwritingOutput.style.lineHeight = `${state.spacing}rem`;\n\n printableArea.style.backgroundColor = state.paperBg;\n printableArea.classList.remove('hws-paper-lined', 'hws-paper-grid', 'hws-paper-dotted', 'hws-paper-blank');\n printableArea.classList.add(`hws-paper-${state.paper}`);\n \n zoomSelect.value = state.zoomMode;\n updateResponsiveScaling();\n showToast('Document successfully loaded!');\n } catch (err) {\n showToast('Failed to load document.', 'error');\n }\n });\n\n btnPrint.addEventListener('click', () => {\n window.print();\n });\n\n btnExportPng.addEventListener('click', () => {\n showToast('Generating PNG image...');\n const previousTransform = scalerWrapper.style.transform;\n scalerWrapper.style.transform = 'none';\n \n html2canvas(printableArea, { scale: 2, useCORS: true }).then(canvas => {\n scalerWrapper.style.transform = previousTransform;\n const link = document.createElement('a');\n link.download = 'handwriting-document.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n showToast('PNG image downloaded successfully!');\n }).catch(() => {\n scalerWrapper.style.transform = previousTransform;\n showToast('Failed to export PNG.', 'error');\n });\n });\n\n btnExportPdf.addEventListener('click', () => {\n showToast('Generating PDF document...');\n const { jsPDF } = window.jspdf;\n const previousTransform = scalerWrapper.style.transform;\n scalerWrapper.style.transform = 'none';\n\n html2canvas(printableArea, { scale: 2, useCORS: true }).then(canvas => {\n scalerWrapper.style.transform = previousTransform;\n const imgData = canvas.toDataURL('image\/png');\n const pdf = new jsPDF('p', 'mm', 'a4');\n const pdfWidth = pdf.internal.pageSize.getWidth();\n const pdfHeight = (canvas.height * pdfWidth) \/ canvas.width;\n pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);\n pdf.save('handwriting-document.pdf');\n showToast('PDF document downloaded successfully!');\n }).catch(() => {\n scalerWrapper.style.transform = previousTransform;\n showToast('Failed to export PDF.', 'error');\n });\n });\n\n btnThemeToggle.addEventListener('click', () => {\n rootEl.classList.toggle('dark');\n });\n });\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Advanced Digital Handwriting & Paper Studio HandwriteStudio Pro Advanced Text-to-Handwriting & Paper Studio Controls Save Load Print PDF PNG Your Content 0 chars Dear Reader, Welcome to the Advanced Digital Handwriting & Paper Studio. This tool lets you convert standard computer text into realistic, organic handwriting across various paper templates, custom ink colors, and typography […]<\/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-826","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/826","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=826"}],"version-history":[{"count":7,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/826\/revisions"}],"predecessor-version":[{"id":835,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/826\/revisions\/835"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":826,"date":"2026-08-01T16:32:24","date_gmt":"2026-08-01T16:32:24","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=826"},"modified":"2026-08-01T16:55:06","modified_gmt":"2026-08-01T16:55:06","slug":"realistic-handwriting-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/realistic-handwriting-generator\/","title":{"rendered":"Realistic Handwriting Generator"},"content":{"rendered":"\n\n\n\n \n \n Advanced Digital Handwriting & Paper Studio<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@400..700&family=Coming+Soon&family=Indie+Flower&family=Kalam:wght@300;400;700&family=Pacifico&family=Reenie+Beanie&family=Architects+Daughter&family=Sacramento&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n fontFamily: {\n caveat: ['Caveat', 'cursive'],\n kalam: ['Kalam', 'cursive'],\n indie: ['Indie Flower', 'cursive'],\n coming: ['Coming Soon', 'cursive'],\n reenie: ['Reenie Beanie', 'cursive'],\n architects: ['Architects Daughter', 'cursive'],\n pacifico: ['Pacifico', 'cursive'],\n sacramento: ['Sacramento', 'cursive'],\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Scoped WordPress \/ Container Compatibility & Custom Styles *\/\n .hws-app-wrapper {\n all: initial;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n color: #1e293b;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100vh;\n min-height: 600px;\n box-sizing: border-box;\n position: relative;\n overflow: hidden;\n background-color: #f1f5f9;\n }\n .hws-app-wrapper.dark {\n color: #f8fafc;\n background-color: #0f172a;\n }\n\n \/* Custom Paper Background Patterns *\/\n .hws-paper-lined {\n background-image: linear-gradient(#93c5fd 1px, transparent 1px);\n background-size: 100% 2rem;\n }\n .hws-paper-grid {\n background-image: linear-gradient(to right, #cbd5e1 1px, transparent 1px), linear-gradient(to bottom, #cbd5e1 1px, transparent 1px);\n background-size: 1.5rem 1.5rem;\n }\n .hws-paper-dotted {\n background-image: radial-gradient(#94a3b8 1.5px, transparent 1.5px);\n background-size: 1.5rem 1.5rem;\n }\n .hws-paper-blank {\n background-image: none;\n }\n \n \/* Custom Scrollbar *\/\n .hws-app-wrapper ::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .hws-app-wrapper ::-webkit-scrollbar-track {\n background: rgba(0,0,0,0.05);\n }\n .hws-app-wrapper ::-webkit-scrollbar-thumb {\n background: rgba(0,0,0,0.2);\n border-radius: 4px;\n }\n .hws-app-wrapper ::-webkit-scrollbar-thumb:hover {\n background: rgba(0,0,0,0.4);\n }\n\n \/* Print Styles for A4 *\/\n @media print {\n body * {\n visibility: hidden !important;\n }\n .hws-printable-area, .hws-printable-area * {\n visibility: visible !important;\n }\n .hws-printable-area {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n width: 210mm !important;\n min-height: 297mm !important;\n margin: 0 !important;\n box-shadow: none !important;\n border: none !important;\n transform: none !important;\n }\n @page {\n size: A4 portrait;\n margin: 10mm;\n }\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-100 dark:bg-slate-900 m-0 p-0\">\n\n <div id=\"hws-root\" class=\"hws-app-wrapper\">\n \n <header class=\"bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-3 md:px-4 py-2.5 flex items-center justify-between shrink-0 shadow-sm z-30\">\n <div class=\"flex items-center space-x-2 md:space-x-3\">\n <div class=\"bg-indigo-600 text-white p-2 rounded-xl shadow-md flex items-center justify-center\">\n <i class=\"fa-solid fa-pen-nib text-base md:text-lg\"><\/i>\n <\/div>\n <div>\n <h1 class=\"font-bold text-sm md:text-lg tracking-tight leading-tight flex items-center text-slate-800 dark:text-slate-100 m-0\">\n HandwriteStudio \n <span class=\"text-[10px] md:text-xs px-2 py-0.5 bg-indigo-100 dark:bg-indigo-900\/60 text-indigo-600 dark:text-indigo-300 rounded-full font-semibold ml-1.5\">Pro<\/span>\n <\/h1>\n <p class=\"text-[11px] text-slate-500 dark:text-slate-400 hidden sm:block m-0\">Advanced Text-to-Handwriting & Paper Studio<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"flex items-center space-x-1.5 md:space-x-2\">\n <button id=\"hws-btn-toggle-sidebar\" title=\"Toggle Controls\" class=\"lg:hidden px-3 py-1.5 text-xs font-medium bg-indigo-600 text-white rounded-lg transition flex items-center space-x-1.5 shadow-sm cursor-pointer border-0\">\n <i class=\"fa-solid fa-sliders\"><\/i>\n <span>Controls<\/span>\n <\/button>\n\n <button id=\"hws-btn-save-local\" title=\"Save to LocalStorage\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0 text-slate-700 dark:text-slate-200\">\n <i class=\"fa-solid fa-floppy-disk text-indigo-500\"><\/i>\n <span class=\"hidden md:inline\">Save<\/span>\n <\/button>\n\n <button id=\"hws-btn-load-local\" title=\"Load from LocalStorage\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0 text-slate-700 dark:text-slate-200\">\n <i class=\"fa-solid fa-folder-open text-amber-500\"><\/i>\n <span class=\"hidden md:inline\">Load<\/span>\n <\/button>\n\n <div class=\"h-5 w-px bg-slate-200 dark:bg-slate-700 mx-0.5 md:mx-1\"><\/div>\n\n <button id=\"hws-btn-print\" title=\"Print Document (A4)\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0 text-slate-700 dark:text-slate-200\">\n <i class=\"fa-solid fa-print text-blue-500\"><\/i>\n <span class=\"hidden md:inline\">Print<\/span>\n <\/button>\n\n <button id=\"hws-btn-export-pdf\" title=\"Export as PDF\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-indigo-50 dark:bg-indigo-900\/40 text-indigo-600 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900\/60 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0\">\n <i class=\"fa-solid fa-file-pdf\"><\/i>\n <span class=\"hidden md:inline\">PDF<\/span>\n <\/button>\n\n <button id=\"hws-btn-export-png\" title=\"Export as PNG Image\" class=\"p-2 md:px-3 md:py-1.5 text-xs font-medium bg-emerald-50 dark:bg-emerald-900\/40 text-emerald-600 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-900\/60 rounded-lg transition flex items-center space-x-1.5 cursor-pointer border-0\">\n <i class=\"fa-solid fa-file-image\"><\/i>\n <span class=\"hidden md:inline\">PNG<\/span>\n <\/button>\n\n <div class=\"h-5 w-px bg-slate-200 dark:bg-slate-700 mx-0.5 md:mx-1\"><\/div>\n\n <button id=\"hws-btn-theme-toggle\" title=\"Toggle Dark\/Light Mode\" class=\"p-2 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition cursor-pointer border-0 bg-transparent\">\n <i class=\"fa-solid fa-moon dark:hidden\"><\/i>\n <i class=\"fa-solid fa-sun hidden dark:block text-amber-400\"><\/i>\n <\/button>\n <\/div>\n <\/header>\n\n \n <div class=\"flex-1 flex flex-col lg:flex-row overflow-hidden relative\">\n\n \n <aside class=\"absolute lg:relative inset-y-0 left-0 w-80 md:w-96 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col shrink-0 z-20 shadow-2xl lg:shadow-none transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto\" id=\"hws-sidebar-controls\">\n \n <div class=\"p-4 space-y-5\">\n\n \n <div class=\"space-y-2\">\n <div class=\"flex items-center justify-between\">\n <label for=\"hws-text-input\" class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-keyboard text-indigo-500\"><\/i> Your Content\n <\/label>\n <span id=\"hws-char-count\" class=\"text-[10px] text-slate-400\">0 chars<\/span>\n <\/div>\n <textarea id=\"hws-text-input\" rows=\"5\" class=\"w-full p-3 text-sm rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-y transition\" placeholder=\"Type or paste your text here to convert into natural handwriting...\">Dear Reader,\n\nWelcome to the Advanced Digital Handwriting & Paper Studio. This tool lets you convert standard computer text into realistic, organic handwriting across various paper templates, custom ink colors, and typography styles.\n\nFeel free to edit this text or type your own notes on the left control panel. You can export your final document as a clean PDF, generate a high-resolution PNG image, print it directly to physical paper in standard A4 format, or save your progress locally in your browser storage.\n\nEnjoy crafting your digital handwritten notes!<\/textarea>\n <\/div>\n\n \n <div class=\"space-y-4\">\n <div class=\"space-y-2\">\n <label for=\"hws-font-select\" class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-font text-indigo-500\"><\/i> Handwriting Style\n <\/label>\n <select id=\"hws-font-select\" class=\"w-full p-2.5 text-sm rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition\">\n <option value=\"font-caveat\">Caveat (Clean Cursive)<\/option>\n <option value=\"font-kalam\" selected>Kalam (Casual Script)<\/option>\n <option value=\"font-indie\">Indie Flower (Quirky)<\/option>\n <option value=\"font-coming\">Coming Soon (Neat Print)<\/option>\n <option value=\"font-reenie\">Reenie Beanie (Quick Notes)<\/option>\n <option value=\"font-architects\">Architects Daughter (Drafting)<\/option>\n <option value=\"font-pacifico\">Pacifico (Bold Script)<\/option>\n <option value=\"font-sacramento\">Sacramento (Elegant)<\/option>\n <\/select>\n <\/div>\n\n <div class=\"space-y-2\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-pen text-indigo-500\"><\/i> Writing Tool\n <\/label>\n <div class=\"grid grid-cols-3 gap-2\">\n <button type=\"button\" data-tool=\"ballpoint\" class=\"hws-tool-btn px-2 py-2 text-xs font-medium rounded-xl border border-indigo-500 bg-indigo-50 dark:bg-indigo-900\/40 text-indigo-600 dark:text-indigo-300 flex flex-col items-center gap-1 transition cursor-pointer\">\n <i class=\"fa-solid fa-pen-clip\"><\/i> Ballpoint\n <\/button>\n <button type=\"button\" data-tool=\"gel\" class=\"hws-tool-btn px-2 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex flex-col items-center gap-1 transition cursor-pointer\">\n <i class=\"fa-solid fa-marker\"><\/i> Gel Pen\n <\/button>\n <button type=\"button\" data-tool=\"fountain\" class=\"hws-tool-btn px-2 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex flex-col items-center gap-1 transition cursor-pointer\">\n <i class=\"fa-solid fa-feather\"><\/i> Fountain\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"space-y-2\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-droplet text-indigo-500\"><\/i> Ink Color\n <\/label>\n <div class=\"flex items-center space-x-2 pt-1\">\n <button type=\"button\" data-color=\"#1e3a8a\" class=\"hws-color-btn w-6 h-6 rounded-full bg-blue-900 ring-2 ring-offset-2 ring-indigo-500 transition cursor-pointer border-0\"><\/button>\n <button type=\"button\" data-color=\"#0f172a\" class=\"hws-color-btn w-6 h-6 rounded-full bg-slate-900 ring-1 ring-slate-300 transition cursor-pointer border-0\"><\/button>\n <button type=\"button\" data-color=\"#991b1b\" class=\"hws-color-btn w-6 h-6 rounded-full bg-red-800 ring-1 ring-slate-300 transition cursor-pointer border-0\"><\/button>\n <button type=\"button\" data-color=\"#166534\" class=\"hws-color-btn w-6 h-6 rounded-full bg-green-800 ring-1 ring-slate-300 transition cursor-pointer border-0\"><\/button>\n <input type=\"color\" id=\"hws-custom-color-picker\" value=\"#1e3a8a\" title=\"Custom Color\" class=\"w-6 h-6 rounded-full overflow-hidden cursor-pointer border-0 p-0 bg-transparent\">\n <\/div>\n <\/div>\n\n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center\">\n <label for=\"hws-font-size-range\" class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-text-height text-indigo-500\"><\/i> Size\n <\/label>\n <span id=\"hws-font-size-val\" class=\"text-xs font-medium text-slate-600 dark:text-slate-300\">24px<\/span>\n <\/div>\n <input type=\"range\" id=\"hws-font-size-range\" min=\"16\" max=\"36\" value=\"24\" class=\"w-full accent-indigo-600 cursor-pointer pt-2\">\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-3 pt-2 border-t border-slate-200 dark:border-slate-700\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-note-sticky text-indigo-500\"><\/i> Paper & Background\n <\/label>\n <div class=\"grid grid-cols-2 gap-2\">\n <button type=\"button\" data-paper=\"lined\" class=\"hws-paper-btn px-3 py-2 text-xs font-medium rounded-xl border border-indigo-500 bg-indigo-50 dark:bg-indigo-900\/40 text-indigo-600 dark:text-indigo-300 flex items-center justify-center gap-1.5 transition cursor-pointer\">\n <i class=\"fa-solid fa-bars\"><\/i> Lined\n <\/button>\n <button type=\"button\" data-paper=\"grid\" class=\"hws-paper-btn px-3 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center gap-1.5 transition cursor-pointer\">\n <i class=\"fa-solid fa-border-all\"><\/i> Grid\n <\/button>\n <button type=\"button\" data-paper=\"dotted\" class=\"hws-paper-btn px-3 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center gap-1.5 transition cursor-pointer\">\n <i class=\"fa-solid fa-ellipsis\"><\/i> Dotted\n <\/button>\n <button type=\"button\" data-paper=\"blank\" class=\"hws-paper-btn px-3 py-2 text-xs font-medium rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center gap-1.5 transition cursor-pointer\">\n <i class=\"fa-solid fa-square\"><\/i> Blank\n <\/button>\n <\/div>\n\n <div class=\"pt-2\">\n <label class=\"text-[11px] text-slate-400 mb-1.5 block\">Paper Tint<\/label>\n <div class=\"flex items-center space-x-2\">\n <button type=\"button\" data-bg=\"#ffffff\" class=\"hws-bg-btn w-6 h-6 rounded-md bg-white ring-2 ring-indigo-500 shadow-sm border border-slate-200 transition cursor-pointer\" title=\"Pure White\"><\/button>\n <button type=\"button\" data-bg=\"#fefce8\" class=\"hws-bg-btn w-6 h-6 rounded-md bg-yellow-50 ring-1 ring-slate-300 shadow-sm border border-yellow-100 transition cursor-pointer\" title=\"Warm Ivory\"><\/button>\n <button type=\"button\" data-bg=\"#fdf4ff\" class=\"hws-bg-btn w-6 h-6 rounded-md bg-fuchsia-50 ring-1 ring-slate-300 shadow-sm border border-fuchsia-100 transition cursor-pointer\" title=\"Soft Pastel\"><\/button>\n <button type=\"button\" data-bg=\"#f0fdf4\" class=\"hws-bg-btn w-6 h-6 rounded-md bg-emerald-50 ring-1 ring-slate-300 shadow-sm border border-emerald-100 transition cursor-pointer\" title=\"Mint Tint\"><\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-3 pt-2 border-t border-slate-200 dark:border-slate-700\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-magnifying-glass text-indigo-500\"><\/i> Zoom Mode\n <\/label>\n <select id=\"hws-zoom-select\" class=\"w-full p-2.5 text-sm rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition\">\n <option value=\"fit\" selected>Fit To Screen<\/option>\n <option value=\"width\">Fit To Width<\/option>\n <option value=\"height\">Fit To Height<\/option>\n <option value=\"1\">100%<\/option>\n <option value=\"1.25\">125%<\/option>\n <option value=\"1.5\">150%<\/option>\n <option value=\"1.75\">175%<\/option>\n <option value=\"2\">200%<\/option>\n <\/select>\n <\/div>\n\n \n <div class=\"space-y-3 pt-2 border-t border-slate-200 dark:border-slate-700 pb-10 lg:pb-2\">\n <label class=\"text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-sliders text-indigo-500\"><\/i> Human Variation\n <\/label>\n \n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center text-xs text-slate-600 dark:text-slate-300\">\n <span>Line Slant \/ Rotation<\/span>\n <span id=\"hws-slant-val\" class=\"font-medium\">0\u00b0<\/span>\n <\/div>\n <input type=\"range\" id=\"hws-slant-range\" min=\"-3\" max=\"3\" step=\"0.5\" value=\"0\" class=\"w-full accent-indigo-600 cursor-pointer\">\n <\/div>\n\n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center text-xs text-slate-600 dark:text-slate-300\">\n <span>Vertical Spacing<\/span>\n <span id=\"hws-spacing-val\" class=\"font-medium\">2rem<\/span>\n <\/div>\n <input type=\"range\" id=\"hws-spacing-range\" min=\"1.5\" max=\"3.5\" step=\"0.25\" value=\"2\" class=\"w-full accent-indigo-600 cursor-pointer\">\n <\/div>\n <\/div>\n\n <\/div>\n <\/aside>\n\n \n <main class=\"flex-1 bg-slate-200 dark:bg-slate-950 relative overflow-auto flex box-border\" id=\"hws-preview-container\" style=\"display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100%; position: relative; box-sizing: border-box; padding: 24px;\">\n \n \n <div id=\"hws-scaler-wrapper\" style=\"position: relative; display: flex; justify-content: center; align-items: center; margin: auto; transition: transform 0.1s ease-out; transform-origin: center center;\">\n <div id=\"hws-printable-area\" class=\"hws-printable-area hws-paper-lined\" style=\"width: 210mm; min-height: 297mm; background-color: #ffffff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; display: flex; flex-direction: column; box-sizing: border-box; padding: 48px;\">\n \n \n <div style=\"position: absolute; left: 48px; top: 0; bottom: 0; width: 1px; background-color: rgba(252, 165, 165, 0.6); pointer-events: none;\"><\/div>\n\n \n <div id=\"hws-handwriting-output\" class=\"font-kalam\" style=\"font-size: 24px; color: #1e3a8a; white-space: pre-wrap; word-break: break-word; line-height: 2rem; outline: none; user-select: text; position: relative; z-index: 10; flex: 1;\">Dear Reader,\n\nWelcome to the Advanced Digital Handwriting & Paper Studio. This tool lets you convert standard computer text into realistic, organic handwriting across various paper templates, custom ink colors, and typography styles.\n\nFeel free to edit this text or type your own notes on the left control panel. You can export your final document as a clean PDF, generate a high-resolution PNG image, print it directly to physical paper in standard A4 format, or save your progress locally in your browser storage.\n\nEnjoy crafting your digital handwritten notes!<\/div>\n\n \n <div style=\"margin-top: auto; padding-top: 32px; text-align: center; font-size: 12px; color: #94a3b8; font-family: sans-serif; user-select: none;\">\n Page 1 of 1 \u2022 Generated with HandwriteStudio Pro\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n <\/div>\n\n \n <div id=\"hws-toast-container\" style=\"position: fixed; bottom: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none;\"><\/div>\n <\/div>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n \n <script>\n (function() {\n document.addEventListener('DOMContentLoaded', () => {\n const rootEl = document.getElementById('hws-root');\n const textInput = document.getElementById('hws-text-input');\n const handwritingOutput = document.getElementById('hws-handwriting-output');\n const charCount = document.getElementById('hws-char-count');\n const fontSelect = document.getElementById('hws-font-select');\n const fontSizeRange = document.getElementById('hws-font-size-range');\n const fontSizeVal = document.getElementById('hws-font-size-val');\n const slantRange = document.getElementById('hws-slant-range');\n const slantVal = document.getElementById('hws-slant-val');\n const spacingRange = document.getElementById('hws-spacing-range');\n const spacingVal = document.getElementById('hws-spacing-val');\n const printableArea = document.getElementById('hws-printable-area');\n const scalerWrapper = document.getElementById('hws-scaler-wrapper');\n const previewContainer = document.getElementById('hws-preview-container');\n const customColorPicker = document.getElementById('hws-custom-color-picker');\n const zoomSelect = document.getElementById('hws-zoom-select');\n\n const btnSaveLocal = document.getElementById('hws-btn-save-local');\n const btnLoadLocal = document.getElementById('hws-btn-load-local');\n const btnPrint = document.getElementById('hws-btn-print');\n const btnExportPdf = document.getElementById('hws-btn-export-pdf');\n const btnExportPng = document.getElementById('hws-btn-export-png');\n const btnThemeToggle = document.getElementById('hws-btn-theme-toggle');\n const btnToggleSidebar = document.getElementById('hws-btn-toggle-sidebar');\n const sidebarControls = document.getElementById('hws-sidebar-controls');\n\n const toolBtns = document.querySelectorAll('.hws-tool-btn');\n const colorBtns = document.querySelectorAll('.hws-color-btn');\n const paperBtns = document.querySelectorAll('.hws-paper-btn');\n const bgBtns = document.querySelectorAll('.hws-bg-btn');\n\n const state = {\n text: textInput.value,\n font: 'font-kalam',\n tool: 'ballpoint',\n color: '#1e3a8a',\n fontSize: 24,\n paper: 'lined',\n paperBg: '#ffffff',\n slant: 0,\n spacing: 2.0,\n zoomMode: 'fit'\n };\n\n updateCharCount(textInput.value);\n\n function showToast(message, type = 'success') {\n const container = document.getElementById('hws-toast-container');\n const toast = document.createElement('div');\n toast.style.pointerEvents = 'auto';\n toast.style.padding = '12px 16px';\n toast.style.borderRadius = '12px';\n toast.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1)';\n toast.style.color = '#ffffff';\n toast.style.fontSize = '12px';\n toast.style.fontWeight = '500';\n toast.style.display = 'flex';\n toast.style.alignItems = 'center';\n toast.style.gap = '8px';\n toast.style.transition = 'all 0.3s ease';\n toast.style.transform = 'translateY(8px)';\n toast.style.opacity = '0';\n \n if (type === 'success') {\n toast.style.backgroundColor = '#16a34a';\n toast.innerHTML = `<i class=\"fa-solid fa-circle-check\"><\/i><span>${message}<\/span>`;\n } else if (type === 'error') {\n toast.style.backgroundColor = '#dc2626';\n toast.innerHTML = `<i class=\"fa-solid fa-circle-exclamation\"><\/i><span>${message}<\/span>`;\n } else {\n toast.style.backgroundColor = '#4f46e5';\n toast.innerHTML = `<i class=\"fa-solid fa-circle-info\"><\/i><span>${message}<\/span>`;\n }\n\n container.appendChild(toast);\n setTimeout(() => {\n toast.style.transform = 'translateY(0)';\n toast.style.opacity = '1';\n }, 10);\n\n setTimeout(() => {\n toast.style.transform = 'translateY(8px)';\n toast.style.opacity = '0';\n setTimeout(() => toast.remove(), 300);\n }, 3000);\n }\n\n function updateCharCount(str) {\n charCount.textContent = `${str.length} chars`;\n }\n\n \/\/ PROFESSIONAL RESPONSIVE SCALING ENGINE\n function updateResponsiveScaling() {\n if (!previewContainer || !scalerWrapper || !printableArea) return;\n\n const containerWidth = previewContainer.clientWidth;\n const containerHeight = previewContainer.clientHeight;\n \n const paddingX = 48; \/\/ 24px padding on each side\n const paddingY = 48;\n\n const availableWidth = Math.max(100, containerWidth - paddingX);\n const availableHeight = Math.max(100, containerHeight - paddingY);\n\n \/\/ A4 dimensions in px at 96 DPI: 210mm = 793.7px, 297mm = 1122.5px\n const paperWidth = printableArea.offsetWidth || 794;\n const paperHeight = printableArea.offsetHeight || 1123;\n\n let scale = 1;\n\n if (state.zoomMode === 'fit') {\n const scaleX = availableWidth \/ paperWidth;\n const scaleY = availableHeight \/ paperHeight;\n scale = Math.min(scaleX, scaleY, 1);\n } else if (state.zoomMode === 'width') {\n scale = availableWidth \/ paperWidth;\n } else if (state.zoomMode === 'height') {\n scale = availableHeight \/ paperHeight;\n } else {\n scale = parseFloat(state.zoomMode);\n }\n\n scalerWrapper.style.transform = `scale(${scale})`;\n }\n\n \/\/ Debounced resize & observer\n let resizeTimer;\n window.addEventListener('resize', () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n requestAnimationFrame(updateResponsiveScaling);\n }, 50);\n });\n\n if (window.ResizeObserver) {\n const ro = new ResizeObserver(() => {\n requestAnimationFrame(updateResponsiveScaling);\n });\n ro.observe(previewContainer);\n }\n\n \/\/ Initial scale calculation\n setTimeout(updateResponsiveScaling, 50);\n\n zoomSelect.addEventListener('change', (e) => {\n state.zoomMode = e.target.value;\n updateResponsiveScaling();\n });\n\n \/\/ Mobile sidebar toggle behavior\n btnToggleSidebar.addEventListener('click', () => {\n sidebarControls.classList.toggle('-translate-x-full');\n setTimeout(updateResponsiveScaling, 300);\n });\n\n textInput.addEventListener('input', (e) => {\n state.text = e.target.value;\n handwritingOutput.textContent = state.text;\n updateCharCount(state.text);\n requestAnimationFrame(updateResponsiveScaling);\n });\n\n fontSelect.addEventListener('change', (e) => {\n fontSelect.querySelectorAll('option').forEach(opt => {\n handwritingOutput.classList.remove(opt.value);\n });\n state.font = e.target.value;\n handwritingOutput.classList.add(state.font);\n });\n\n toolBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n toolBtns.forEach(b => {\n b.classList.remove('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900\/40', 'text-indigo-600', 'dark:text-indigo-300');\n b.classList.add('border-slate-200', 'dark:border-slate-700', 'bg-slate-50', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300');\n });\n btn.classList.add('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900\/40', 'text-indigo-600', 'dark:text-indigo-300');\n btn.classList.remove('border-slate-200', 'dark:border-slate-700', 'bg-slate-50', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300');\n state.tool = btn.getAttribute('data-tool');\n \n if (state.tool === 'gel') {\n handwritingOutput.style.filter = 'drop-shadow(0.2px 0.2px 0.4px rgba(0,0,0,0.2))';\n } else if (state.tool === 'fountain') {\n handwritingOutput.style.filter = 'drop-shadow(0.5px 0.5px 0.8px rgba(0,0,0,0.15))';\n } else {\n handwritingOutput.style.filter = 'none';\n }\n });\n });\n\n function applyColor(hex) {\n state.color = hex;\n handwritingOutput.style.color = hex;\n customColorPicker.value = hex;\n }\n\n colorBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n colorBtns.forEach(b => b.classList.remove('ring-2', 'ring-offset-2', 'ring-indigo-500'));\n btn.classList.add('ring-2', 'ring-offset-2', 'ring-indigo-500');\n applyColor(btn.getAttribute('data-color'));\n });\n });\n\n customColorPicker.addEventListener('input', (e) => {\n applyColor(e.target.value);\n });\n\n fontSizeRange.addEventListener('input', (e) => {\n state.fontSize = parseInt(e.target.value);\n fontSizeVal.textContent = `${state.fontSize}px`;\n handwritingOutput.style.fontSize = `${state.fontSize}px`;\n requestAnimationFrame(updateResponsiveScaling);\n });\n\n paperBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n paperBtns.forEach(b => {\n b.classList.remove('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900\/40', 'text-indigo-600', 'dark:text-indigo-300');\n b.classList.add('border-slate-200', 'dark:border-slate-700', 'bg-slate-50', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300');\n });\n btn.classList.add('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900\/40', 'text-indigo-600', 'dark:text-indigo-300');\n btn.classList.remove('border-slate-200', 'dark:border-slate-700', 'bg-slate-50', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300');\n \n state.paper = btn.getAttribute('data-paper');\n printableArea.classList.remove('hws-paper-lined', 'hws-paper-grid', 'hws-paper-dotted', 'hws-paper-blank');\n printableArea.classList.add(`hws-paper-${state.paper}`);\n });\n });\n\n bgBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n bgBtns.forEach(b => b.classList.remove('ring-2', 'ring-offset-2', 'ring-indigo-500'));\n btn.classList.add('ring-2', 'ring-offset-2', 'ring-indigo-500');\n state.paperBg = btn.getAttribute('data-bg');\n printableArea.style.backgroundColor = state.paperBg;\n });\n });\n\n slantRange.addEventListener('input', (e) => {\n state.slant = parseFloat(e.target.value);\n slantVal.textContent = `${state.slant}\u00b0`;\n handwritingOutput.style.transform = `rotate(${state.slant}deg)`;\n });\n\n spacingRange.addEventListener('input', (e) => {\n state.spacing = parseFloat(e.target.value);\n spacingVal.textContent = `${state.spacing}rem`;\n handwritingOutput.style.lineHeight = `${state.spacing}rem`;\n requestAnimationFrame(updateResponsiveScaling);\n });\n\n btnSaveLocal.addEventListener('click', () => {\n try {\n localStorage.setItem('hws_document_state', JSON.stringify(state));\n showToast('Document successfully saved to browser storage!');\n } catch (err) {\n showToast('Failed to save document.', 'error');\n }\n });\n\n btnLoadLocal.addEventListener('click', () => {\n try {\n const saved = localStorage.getItem('hws_document_state');\n if (!saved) {\n showToast('No saved document found in storage.', 'info');\n return;\n }\n const parsed = JSON.parse(saved);\n Object.assign(state, parsed);\n\n textInput.value = state.text;\n handwritingOutput.textContent = state.text;\n updateCharCount(state.text);\n\n fontSelect.value = state.font;\n fontSelect.querySelectorAll('option').forEach(opt => handwritingOutput.classList.remove(opt.value));\n handwritingOutput.classList.add(state.font);\n\n applyColor(state.color);\n\n fontSizeRange.value = state.fontSize;\n fontSizeVal.textContent = `${state.fontSize}px`;\n handwritingOutput.style.fontSize = `${state.fontSize}px`;\n\n slantRange.value = state.slant;\n slantVal.textContent = `${state.slant}\u00b0`;\n handwritingOutput.style.transform = `rotate(${state.slant}deg)`;\n\n spacingRange.value = state.spacing;\n spacingVal.textContent = `${state.spacing}rem`;\n handwritingOutput.style.lineHeight = `${state.spacing}rem`;\n\n printableArea.style.backgroundColor = state.paperBg;\n printableArea.classList.remove('hws-paper-lined', 'hws-paper-grid', 'hws-paper-dotted', 'hws-paper-blank');\n printableArea.classList.add(`hws-paper-${state.paper}`);\n \n zoomSelect.value = state.zoomMode;\n updateResponsiveScaling();\n showToast('Document successfully loaded!');\n } catch (err) {\n showToast('Failed to load document.', 'error');\n }\n });\n\n btnPrint.addEventListener('click', () => {\n window.print();\n });\n\n btnExportPng.addEventListener('click', () => {\n showToast('Generating PNG image...');\n const previousTransform = scalerWrapper.style.transform;\n scalerWrapper.style.transform = 'none';\n \n html2canvas(printableArea, { scale: 2, useCORS: true }).then(canvas => {\n scalerWrapper.style.transform = previousTransform;\n const link = document.createElement('a');\n link.download = 'handwriting-document.png';\n link.href = canvas.toDataURL('image\/png');\n link.click();\n showToast('PNG image downloaded successfully!');\n }).catch(() => {\n scalerWrapper.style.transform = previousTransform;\n showToast('Failed to export PNG.', 'error');\n });\n });\n\n btnExportPdf.addEventListener('click', () => {\n showToast('Generating PDF document...');\n const { jsPDF } = window.jspdf;\n const previousTransform = scalerWrapper.style.transform;\n scalerWrapper.style.transform = 'none';\n\n html2canvas(printableArea, { scale: 2, useCORS: true }).then(canvas => {\n scalerWrapper.style.transform = previousTransform;\n const imgData = canvas.toDataURL('image\/png');\n const pdf = new jsPDF('p', 'mm', 'a4');\n const pdfWidth = pdf.internal.pageSize.getWidth();\n const pdfHeight = (canvas.height * pdfWidth) \/ canvas.width;\n pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);\n pdf.save('handwriting-document.pdf');\n showToast('PDF document downloaded successfully!');\n }).catch(() => {\n scalerWrapper.style.transform = previousTransform;\n showToast('Failed to export PDF.', 'error');\n });\n });\n\n btnThemeToggle.addEventListener('click', () => {\n rootEl.classList.toggle('dark');\n });\n });\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Advanced Digital Handwriting & Paper Studio HandwriteStudio Pro Advanced Text-to-Handwriting & Paper Studio Controls Save Load Print PDF PNG Your Content 0 chars Dear Reader, Welcome to the Advanced Digital Handwriting & Paper Studio. This tool lets you convert standard computer text into realistic, organic handwriting across various paper templates, custom ink colors, and typography […]<\/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-826","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/826","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=826"}],"version-history":[{"count":7,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/826\/revisions"}],"predecessor-version":[{"id":835,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/826\/revisions\/835"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}