ToonCanvas Studio – Creator Planner & Storyboard<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --primary: #6366f1;\n --primary-hover: #4f46e5;\n --bg-main: #0f172a;\n --bg-card: #1e293b;\n --bg-card-hover: #334155;\n --text-main: #f8fafc;\n --text-muted: #94a3b8;\n --border: #334155;\n --accent: #ec4899;\n --success: #10b981;\n --radius: 12px;\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Inter', sans-serif;\n word-break: normal;\n overflow-wrap: break-word;\n white-space: normal;\n hyphens: auto;\n }\n\n body {\n background-color: var(--bg-main);\n color: var(--text-main);\n display: flex;\n height: 100vh;\n overflow: hidden;\n }\n\n \/* Sidebar *\/\n aside {\n width: 260px;\n min-width: 260px;\n flex-shrink: 0;\n background-color: var(--bg-card);\n border-right: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 24px;\n height: 100%;\n overflow-y: auto;\n z-index: 5;\n }\n\n .logo-area {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 32px;\n }\n\n .logo-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 20px;\n color: white;\n }\n\n .logo-text h1 {\n font-size: 16px;\n font-weight: 600;\n }\n\n .logo-text p {\n font-size: 12px;\n color: var(--text-muted);\n }\n\n .nav-menu {\n display: flex;\n flex-direction: column;\n gap: 8px;\n flex-grow: 1;\n }\n\n .nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: var(--radius);\n color: var(--text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n border: none;\n background: transparent;\n width: 100%;\n text-align: left;\n font-size: 14px;\n font-weight: 500;\n }\n\n .nav-item:hover, .nav-item.active {\n background-color: var(--bg-card-hover);\n color: var(--text-main);\n }\n\n .nav-item.active {\n background-color: var(--primary);\n color: white;\n }\n\n .sidebar-footer {\n font-size: 12px;\n color: var(--text-muted);\n text-align: center;\n padding-top: 16px;\n border-top: 1px solid var(--border);\n }\n\n \/* Main Content Area *\/\n main {\n flex-grow: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n background: radial-gradient(circle at top right, #1e1b4b, var(--bg-main) 60%);\n }\n\n header {\n padding: 24px 32px;\n border-bottom: 1px solid var(--border);\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: rgba(30, 41, 59, 0.7);\n backdrop-filter: blur(10px);\n position: sticky;\n top: 0;\n z-index: 10;\n }\n\n header h2 {\n font-size: 20px;\n font-weight: 650;\n }\n\n .user-badge {\n background: var(--bg-card-hover);\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 500;\n border: 1px solid var(--border);\n }\n\n .view-container {\n padding: 32px;\n display: none;\n }\n\n .view-container.active {\n display: block;\n }\n\n \/* Dashboard Grid *\/\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n gap: 20px;\n margin-bottom: 32px;\n }\n\n .stat-card {\n background-color: var(--bg-card);\n border: 1px solid var(--border);\n padding: 20px;\n border-radius: var(--radius);\n }\n\n .stat-card h3 {\n font-size: 14px;\n color: var(--text-muted);\n margin-bottom: 8px;\n }\n\n .stat-card .value {\n font-size: 28px;\n font-weight: 700;\n }\n\n \/* Shared UI Elements *\/\n .card {\n background-color: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 24px;\n margin-bottom: 24px;\n }\n\n .card h3 {\n margin-bottom: 16px;\n font-size: 18px;\n }\n\n .form-group {\n margin-bottom: 16px;\n }\n\n label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 8px;\n color: var(--text-muted);\n }\n\n input, select, textarea {\n width: 100%;\n max-width: 100%;\n padding: 10px 14px;\n background-color: var(--bg-main);\n border: 1px solid var(--border);\n border-radius: 8px;\n color: var(--text-main);\n font-size: 14px;\n outline: none;\n transition: border-color 0.2s;\n }\n\n input:focus, select:focus, textarea:focus {\n border-color: var(--primary);\n }\n\n button.btn {\n background-color: var(--primary);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 8px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s;\n font-size: 14px;\n }\n\n button.btn:hover {\n background-color: var(--primary-hover);\n }\n\n \/* Storyboard Grid *\/\n .storyboard-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n margin-top: 16px;\n }\n\n .frame-card {\n background-color: var(--bg-main);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .frame-preview {\n width: 100%;\n height: 140px;\n background-color: var(--bg-card-hover);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-muted);\n font-size: 12px;\n text-align: center;\n padding: 10px;\n }\n\n \/* Character Generator Result Box *\/\n .prompt-output {\n background-color: var(--bg-main);\n border: 1px dashed var(--border);\n padding: 16px;\n border-radius: 8px;\n margin-top: 16px;\n font-family: monospace;\n font-size: 13px;\n color: var(--accent);\n word-break: break-all;\n }\n\n @media screen and (max-width: 1024px) {\n body {\n flex-direction: column;\n height: auto;\n overflow: auto;\n }\n aside {\n width: 100%;\n min-width: 100%;\n height: auto;\n max-height: 220px;\n }\n main {\n height: auto;\n overflow: visible;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n \n <aside>\n <div>\n <div class=\"logo-area\">\n <div class=\"logo-icon\">TC<\/div>\n <div class=\"logo-text\">\n <h1>ToonCanvas<\/h1>\n <p>Creator Studio v1.0<\/p>\n <\/div>\n <\/div>\n <div class=\"nav-menu\">\n <button class=\"nav-item active\" onclick=\"switchTab('dashboard', this)\">Dashboard<\/button>\n <button class=\"nav-item\" onclick=\"switchTab('storyboard', this)\">Storyboard Planner<\/button>\n <button class=\"nav-item\" onclick=\"switchTab('characters', this)\">AI Character Lab<\/button>\n <button class=\"nav-item\" onclick=\"switchTab('scripts', this)\">Script Writer<\/button>\n <\/div>\n <\/div>\n <div class=\"sidebar-footer\">\n <p>Status: Ready<\/p>\n <\/div>\n <\/aside>\n\n \n <main>\n <header>\n <h2 id=\"header-title\">Dashboard Overview<\/h2>\n <div class=\"user-badge\">Creator Workspace<\/div>\n <\/header>\n\n \n <div id=\"view-dashboard\" class=\"view-container active\">\n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <h3>Active Storyboards<\/h3>\n <div class=\"value\" id=\"stat-storyboards\">0<\/div>\n <\/div>\n <div class=\"stat-card\">\n <h3>Saved Characters<\/h3>\n <div class=\"value\" id=\"stat-characters\">0<\/div>\n <\/div>\n <div class=\"stat-card\">\n <h3>Draft Scripts<\/h3>\n <div class=\"value\" id=\"stat-scripts\">0<\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h3>Welcome to ToonCanvas Studio<\/h3>\n <p style=\"color: var(--text-muted); line-height: 1.6;\">\n Streamline your transition to animated video creation. Plan scenes, design mascots with AI prompts, and draft quick-fire scripts optimized for modern video platforms. Use the sidebar to navigate between your creative tools.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"view-storyboard\" class=\"view-container\">\n <div class=\"card\">\n <h3>Create Storyboard Scene<\/h3>\n <div class=\"form-group\">\n <label>Scene Title \/ Action<\/label>\n <input type=\"text\" id=\"scene-title\" placeholder=\"e.g., Opening hook with silent chaos-maker mascot\">\n <\/div>\n <div class=\"form-group\">\n <label>Visual Description \/ Prompt Note<\/label>\n <textarea id=\"scene-desc\" rows=\"3\" placeholder=\"Describe background, character reaction, or visual transition...\"><\/textarea>\n <\/div>\n <button class=\"btn\" onclick=\"addStoryboardFrame()\">Add Frame to Board<\/button>\n <\/div>\n\n <div class=\"card\">\n <h3>Current Frames<\/h3>\n <div class=\"storyboard-grid\" id=\"storyboard-grid\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-characters\" class=\"view-container\">\n <div class=\"card\">\n <h3>AI Mascot & Character Concept Lab<\/h3>\n <div class=\"form-group\">\n <label>Character Archetype<\/label>\n <select id=\"char-archetype\">\n <option value=\"Silent Chaos-Maker\">Silent Chaos-Maker Mascot<\/option>\n <option value=\"Overworked Student\">Overworked Study Aesthetic Character<\/option>\n <option value=\"Dynamic Gamer\">Competitive Gaming Avatar<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label>Art Style Reference<\/label>\n <select id=\"char-style\">\n <option value=\"Classic 2D Anime (Doraemon style)\">Classic 2D Anime (Clean lines, vibrant flat colors)<\/option>\n <option value=\"Chibi \/ Kawaii\">Chibi \/ Kawaii (Cute oversized head)<\/option>\n <option value=\"Modern Vector Flat\">Modern Vector Flat Art<\/option>\n <\/select>\n <\/div>\n <button class=\"btn\" onclick=\"generateCharacterPrompt()\">Generate AI Prompt<\/button>\n \n <div class=\"prompt-output\" id=\"prompt-output\">\n Select parameters and click generate to build your AI generator prompt.\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-scripts\" class=\"view-container\">\n <div class=\"card\">\n <h3>Short-Form Script Builder<\/h3>\n <div class=\"form-group\">\n <label>Video Title \/ Hook<\/label>\n <input type=\"text\" id=\"script-title\" placeholder=\"Catchy opening sentence...\">\n <\/div>\n <div class=\"form-group\">\n <label>Script Body<\/label>\n <textarea id=\"script-body\" rows=\"6\" placeholder=\"Write dialogue or voiceover lines here...\"><\/textarea>\n <\/div>\n <button class=\"btn\" onclick=\"saveScript()\">Save Script Draft<\/button>\n <\/div>\n\n <div class=\"card\">\n <h3>Saved Scripts<\/h3>\n <div id=\"scripts-list\" style=\"color: var(--text-muted); font-size: 14px;\">\n No scripts saved yet.\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n\n<script>\n let state = {\n storyboards: [],\n characters: 0,\n scripts: []\n };\n\n function switchTab(tabId, element) {\n document.querySelectorAll('.view-container').forEach(el => {\n el.classList.remove('active');\n });\n document.querySelectorAll('.nav-item').forEach(el => {\n el.classList.remove('active');\n });\n\n document.getElementById('view-' + tabId).classList.add('active');\n element.classList.add('active');\n\n const titles = {\n dashboard: 'Dashboard Overview',\n storyboard: 'Storyboard Frame Planner',\n characters: 'AI Character Concept Lab',\n scripts: 'Short-Form Script Builder'\n };\n document.getElementById('header-title').innerText = titles[tabId];\n }\n\n function addStoryboardFrame() {\n const titleInput = document.getElementById('scene-title');\n const descInput = document.getElementById('scene-desc');\n\n if (!titleInput.value.trim()) return;\n\n state.storyboards.push({\n title: titleInput.value,\n desc: descInput.value,\n id: Date.now()\n });\n\n titleInput.value = '';\n descInput.value = '';\n\n renderStoryboards();\n updateStats();\n }\n\n function renderStoryboards() {\n const grid = document.getElementById('storyboard-grid');\n if (state.storyboards.length === 0) {\n grid.innerHTML = '<p style=\"color: var(--text-muted); font-size: 13px;\">No frames added yet.<\/p>';\n return;\n }\n\n grid.innerHTML = '';\n state.storyboards.forEach((frame, index) => {\n const card = document.createElement('div');\n card.className = 'frame-card';\n card.innerHTML = `\n <div style=\"font-weight: 600; font-size: 14px;\">Frame #${index + 1}: ${escapeHtml(frame.title)}<\/div>\n <div class=\"frame-preview\">${escapeHtml(frame.desc || 'No description provided')}<\/div>\n <button class=\"btn\" style=\"background: #ef4444; padding: 6px; font-size: 12px;\" onclick=\"deleteFrame(${frame.id})\">Delete Frame<\/button>\n `;\n grid.appendChild(card);\n });\n }\n\n function deleteFrame(id) {\n state.storyboards = state.storyboards.filter(f => f.id !== id);\n renderStoryboards();\n updateStats();\n }\n\n function generateCharacterPrompt() {\n const archetype = document.getElementById('char-archetype').value;\n const style = document.getElementById('char-style').value;\n\n const promptText = `A vibrant 2D cartoon character design representing a ${archetype}, rendered in ${style}, clean vector outlines, bold expressive eyes, centered composition, solid color background, high quality animation concept art --ar 16:9`;\n \n document.getElementById('prompt-output').innerText = promptText;\n state.characters++;\n updateStats();\n }\n\n function saveScript() {\n const titleInput = document.getElementById('script-title');\n const bodyInput = document.getElementById('script-body');\n\n if (!titleInput.value.trim()) return;\n\n state.scripts.push({\n title: titleInput.value,\n body: bodyInput.value\n });\n\n titleInput.value = '';\n bodyInput.value = '';\n\n renderScripts();\n updateStats();\n }\n\n function renderScripts() {\n const list = document.getElementById('scripts-list');\n if (state.scripts.length === 0) {\n list.innerHTML = 'No scripts saved yet.';\n return;\n }\n\n list.innerHTML = '';\n state.scripts.forEach((script, idx) => {\n const item = document.createElement('div');\n item.style.padding = '12px';\n item.style.borderBottom = '1px solid var(--border)';\n item.innerHTML = `<strong>#${idx + 1} - ${escapeHtml(script.title)}<\/strong><p style=\"color: var(--text-muted); margin-top: 4px; font-size: 13px;\">${escapeHtml(script.body)}<\/p>`;\n list.appendChild(item);\n });\n }\n\n function updateStats() {\n document.getElementById('stat-storyboards').innerText = state.storyboards.length;\n document.getElementById('stat-characters').innerText = state.characters;\n document.getElementById('stat-scripts').innerText = state.scripts.length;\n }\n\n function escapeHtml(str) {\n return str.replace(\/&\/g, \"&\").replace(\/<\/g, \"<\").replace(\/>\/g, \">\").replace(\/\"\/g, \""\").replace(\/'\/g, \"'\");\n }\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>ToonCanvas Studio – Creator Planner & Storyboard TC ToonCanvas Creator Studio v1.0 Dashboard Storyboard Planner AI Character Lab Script Writer Status: Ready Dashboard Overview Creator Workspace Active Storyboards 0 Saved Characters 0 Draft Scripts 0 Welcome to ToonCanvas Studio Streamline your transition to animated video creation. Plan scenes, design mascots with AI prompts, and draft […]<\/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-896","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/896","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=896"}],"version-history":[{"count":3,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/896\/revisions"}],"predecessor-version":[{"id":899,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/896\/revisions\/899"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":896,"date":"2026-08-03T18:12:37","date_gmt":"2026-08-03T18:12:37","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=896"},"modified":"2026-08-03T18:27:04","modified_gmt":"2026-08-03T18:27:04","slug":"vulneralibility-report-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/vulneralibility-report-generator\/","title":{"rendered":"Vulneralibility Report Generator"},"content":{"rendered":"\n\n\n\n\n\nToonCanvas Studio – Creator Planner & Storyboard<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --primary: #6366f1;\n --primary-hover: #4f46e5;\n --bg-main: #0f172a;\n --bg-card: #1e293b;\n --bg-card-hover: #334155;\n --text-main: #f8fafc;\n --text-muted: #94a3b8;\n --border: #334155;\n --accent: #ec4899;\n --success: #10b981;\n --radius: 12px;\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Inter', sans-serif;\n word-break: normal;\n overflow-wrap: break-word;\n white-space: normal;\n hyphens: auto;\n }\n\n body {\n background-color: var(--bg-main);\n color: var(--text-main);\n display: flex;\n height: 100vh;\n overflow: hidden;\n }\n\n \/* Sidebar *\/\n aside {\n width: 260px;\n min-width: 260px;\n flex-shrink: 0;\n background-color: var(--bg-card);\n border-right: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 24px;\n height: 100%;\n overflow-y: auto;\n z-index: 5;\n }\n\n .logo-area {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 32px;\n }\n\n .logo-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 20px;\n color: white;\n }\n\n .logo-text h1 {\n font-size: 16px;\n font-weight: 600;\n }\n\n .logo-text p {\n font-size: 12px;\n color: var(--text-muted);\n }\n\n .nav-menu {\n display: flex;\n flex-direction: column;\n gap: 8px;\n flex-grow: 1;\n }\n\n .nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: var(--radius);\n color: var(--text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n border: none;\n background: transparent;\n width: 100%;\n text-align: left;\n font-size: 14px;\n font-weight: 500;\n }\n\n .nav-item:hover, .nav-item.active {\n background-color: var(--bg-card-hover);\n color: var(--text-main);\n }\n\n .nav-item.active {\n background-color: var(--primary);\n color: white;\n }\n\n .sidebar-footer {\n font-size: 12px;\n color: var(--text-muted);\n text-align: center;\n padding-top: 16px;\n border-top: 1px solid var(--border);\n }\n\n \/* Main Content Area *\/\n main {\n flex-grow: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n background: radial-gradient(circle at top right, #1e1b4b, var(--bg-main) 60%);\n }\n\n header {\n padding: 24px 32px;\n border-bottom: 1px solid var(--border);\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: rgba(30, 41, 59, 0.7);\n backdrop-filter: blur(10px);\n position: sticky;\n top: 0;\n z-index: 10;\n }\n\n header h2 {\n font-size: 20px;\n font-weight: 650;\n }\n\n .user-badge {\n background: var(--bg-card-hover);\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 500;\n border: 1px solid var(--border);\n }\n\n .view-container {\n padding: 32px;\n display: none;\n }\n\n .view-container.active {\n display: block;\n }\n\n \/* Dashboard Grid *\/\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n gap: 20px;\n margin-bottom: 32px;\n }\n\n .stat-card {\n background-color: var(--bg-card);\n border: 1px solid var(--border);\n padding: 20px;\n border-radius: var(--radius);\n }\n\n .stat-card h3 {\n font-size: 14px;\n color: var(--text-muted);\n margin-bottom: 8px;\n }\n\n .stat-card .value {\n font-size: 28px;\n font-weight: 700;\n }\n\n \/* Shared UI Elements *\/\n .card {\n background-color: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 24px;\n margin-bottom: 24px;\n }\n\n .card h3 {\n margin-bottom: 16px;\n font-size: 18px;\n }\n\n .form-group {\n margin-bottom: 16px;\n }\n\n label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 8px;\n color: var(--text-muted);\n }\n\n input, select, textarea {\n width: 100%;\n max-width: 100%;\n padding: 10px 14px;\n background-color: var(--bg-main);\n border: 1px solid var(--border);\n border-radius: 8px;\n color: var(--text-main);\n font-size: 14px;\n outline: none;\n transition: border-color 0.2s;\n }\n\n input:focus, select:focus, textarea:focus {\n border-color: var(--primary);\n }\n\n button.btn {\n background-color: var(--primary);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 8px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s;\n font-size: 14px;\n }\n\n button.btn:hover {\n background-color: var(--primary-hover);\n }\n\n \/* Storyboard Grid *\/\n .storyboard-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n margin-top: 16px;\n }\n\n .frame-card {\n background-color: var(--bg-main);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .frame-preview {\n width: 100%;\n height: 140px;\n background-color: var(--bg-card-hover);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-muted);\n font-size: 12px;\n text-align: center;\n padding: 10px;\n }\n\n \/* Character Generator Result Box *\/\n .prompt-output {\n background-color: var(--bg-main);\n border: 1px dashed var(--border);\n padding: 16px;\n border-radius: 8px;\n margin-top: 16px;\n font-family: monospace;\n font-size: 13px;\n color: var(--accent);\n word-break: break-all;\n }\n\n @media screen and (max-width: 1024px) {\n body {\n flex-direction: column;\n height: auto;\n overflow: auto;\n }\n aside {\n width: 100%;\n min-width: 100%;\n height: auto;\n max-height: 220px;\n }\n main {\n height: auto;\n overflow: visible;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n \n <aside>\n <div>\n <div class=\"logo-area\">\n <div class=\"logo-icon\">TC<\/div>\n <div class=\"logo-text\">\n <h1>ToonCanvas<\/h1>\n <p>Creator Studio v1.0<\/p>\n <\/div>\n <\/div>\n <div class=\"nav-menu\">\n <button class=\"nav-item active\" onclick=\"switchTab('dashboard', this)\">Dashboard<\/button>\n <button class=\"nav-item\" onclick=\"switchTab('storyboard', this)\">Storyboard Planner<\/button>\n <button class=\"nav-item\" onclick=\"switchTab('characters', this)\">AI Character Lab<\/button>\n <button class=\"nav-item\" onclick=\"switchTab('scripts', this)\">Script Writer<\/button>\n <\/div>\n <\/div>\n <div class=\"sidebar-footer\">\n <p>Status: Ready<\/p>\n <\/div>\n <\/aside>\n\n \n <main>\n <header>\n <h2 id=\"header-title\">Dashboard Overview<\/h2>\n <div class=\"user-badge\">Creator Workspace<\/div>\n <\/header>\n\n \n <div id=\"view-dashboard\" class=\"view-container active\">\n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <h3>Active Storyboards<\/h3>\n <div class=\"value\" id=\"stat-storyboards\">0<\/div>\n <\/div>\n <div class=\"stat-card\">\n <h3>Saved Characters<\/h3>\n <div class=\"value\" id=\"stat-characters\">0<\/div>\n <\/div>\n <div class=\"stat-card\">\n <h3>Draft Scripts<\/h3>\n <div class=\"value\" id=\"stat-scripts\">0<\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h3>Welcome to ToonCanvas Studio<\/h3>\n <p style=\"color: var(--text-muted); line-height: 1.6;\">\n Streamline your transition to animated video creation. Plan scenes, design mascots with AI prompts, and draft quick-fire scripts optimized for modern video platforms. Use the sidebar to navigate between your creative tools.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"view-storyboard\" class=\"view-container\">\n <div class=\"card\">\n <h3>Create Storyboard Scene<\/h3>\n <div class=\"form-group\">\n <label>Scene Title \/ Action<\/label>\n <input type=\"text\" id=\"scene-title\" placeholder=\"e.g., Opening hook with silent chaos-maker mascot\">\n <\/div>\n <div class=\"form-group\">\n <label>Visual Description \/ Prompt Note<\/label>\n <textarea id=\"scene-desc\" rows=\"3\" placeholder=\"Describe background, character reaction, or visual transition...\"><\/textarea>\n <\/div>\n <button class=\"btn\" onclick=\"addStoryboardFrame()\">Add Frame to Board<\/button>\n <\/div>\n\n <div class=\"card\">\n <h3>Current Frames<\/h3>\n <div class=\"storyboard-grid\" id=\"storyboard-grid\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-characters\" class=\"view-container\">\n <div class=\"card\">\n <h3>AI Mascot & Character Concept Lab<\/h3>\n <div class=\"form-group\">\n <label>Character Archetype<\/label>\n <select id=\"char-archetype\">\n <option value=\"Silent Chaos-Maker\">Silent Chaos-Maker Mascot<\/option>\n <option value=\"Overworked Student\">Overworked Study Aesthetic Character<\/option>\n <option value=\"Dynamic Gamer\">Competitive Gaming Avatar<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label>Art Style Reference<\/label>\n <select id=\"char-style\">\n <option value=\"Classic 2D Anime (Doraemon style)\">Classic 2D Anime (Clean lines, vibrant flat colors)<\/option>\n <option value=\"Chibi \/ Kawaii\">Chibi \/ Kawaii (Cute oversized head)<\/option>\n <option value=\"Modern Vector Flat\">Modern Vector Flat Art<\/option>\n <\/select>\n <\/div>\n <button class=\"btn\" onclick=\"generateCharacterPrompt()\">Generate AI Prompt<\/button>\n \n <div class=\"prompt-output\" id=\"prompt-output\">\n Select parameters and click generate to build your AI generator prompt.\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-scripts\" class=\"view-container\">\n <div class=\"card\">\n <h3>Short-Form Script Builder<\/h3>\n <div class=\"form-group\">\n <label>Video Title \/ Hook<\/label>\n <input type=\"text\" id=\"script-title\" placeholder=\"Catchy opening sentence...\">\n <\/div>\n <div class=\"form-group\">\n <label>Script Body<\/label>\n <textarea id=\"script-body\" rows=\"6\" placeholder=\"Write dialogue or voiceover lines here...\"><\/textarea>\n <\/div>\n <button class=\"btn\" onclick=\"saveScript()\">Save Script Draft<\/button>\n <\/div>\n\n <div class=\"card\">\n <h3>Saved Scripts<\/h3>\n <div id=\"scripts-list\" style=\"color: var(--text-muted); font-size: 14px;\">\n No scripts saved yet.\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n\n<script>\n let state = {\n storyboards: [],\n characters: 0,\n scripts: []\n };\n\n function switchTab(tabId, element) {\n document.querySelectorAll('.view-container').forEach(el => {\n el.classList.remove('active');\n });\n document.querySelectorAll('.nav-item').forEach(el => {\n el.classList.remove('active');\n });\n\n document.getElementById('view-' + tabId).classList.add('active');\n element.classList.add('active');\n\n const titles = {\n dashboard: 'Dashboard Overview',\n storyboard: 'Storyboard Frame Planner',\n characters: 'AI Character Concept Lab',\n scripts: 'Short-Form Script Builder'\n };\n document.getElementById('header-title').innerText = titles[tabId];\n }\n\n function addStoryboardFrame() {\n const titleInput = document.getElementById('scene-title');\n const descInput = document.getElementById('scene-desc');\n\n if (!titleInput.value.trim()) return;\n\n state.storyboards.push({\n title: titleInput.value,\n desc: descInput.value,\n id: Date.now()\n });\n\n titleInput.value = '';\n descInput.value = '';\n\n renderStoryboards();\n updateStats();\n }\n\n function renderStoryboards() {\n const grid = document.getElementById('storyboard-grid');\n if (state.storyboards.length === 0) {\n grid.innerHTML = '<p style=\"color: var(--text-muted); font-size: 13px;\">No frames added yet.<\/p>';\n return;\n }\n\n grid.innerHTML = '';\n state.storyboards.forEach((frame, index) => {\n const card = document.createElement('div');\n card.className = 'frame-card';\n card.innerHTML = `\n <div style=\"font-weight: 600; font-size: 14px;\">Frame #${index + 1}: ${escapeHtml(frame.title)}<\/div>\n <div class=\"frame-preview\">${escapeHtml(frame.desc || 'No description provided')}<\/div>\n <button class=\"btn\" style=\"background: #ef4444; padding: 6px; font-size: 12px;\" onclick=\"deleteFrame(${frame.id})\">Delete Frame<\/button>\n `;\n grid.appendChild(card);\n });\n }\n\n function deleteFrame(id) {\n state.storyboards = state.storyboards.filter(f => f.id !== id);\n renderStoryboards();\n updateStats();\n }\n\n function generateCharacterPrompt() {\n const archetype = document.getElementById('char-archetype').value;\n const style = document.getElementById('char-style').value;\n\n const promptText = `A vibrant 2D cartoon character design representing a ${archetype}, rendered in ${style}, clean vector outlines, bold expressive eyes, centered composition, solid color background, high quality animation concept art --ar 16:9`;\n \n document.getElementById('prompt-output').innerText = promptText;\n state.characters++;\n updateStats();\n }\n\n function saveScript() {\n const titleInput = document.getElementById('script-title');\n const bodyInput = document.getElementById('script-body');\n\n if (!titleInput.value.trim()) return;\n\n state.scripts.push({\n title: titleInput.value,\n body: bodyInput.value\n });\n\n titleInput.value = '';\n bodyInput.value = '';\n\n renderScripts();\n updateStats();\n }\n\n function renderScripts() {\n const list = document.getElementById('scripts-list');\n if (state.scripts.length === 0) {\n list.innerHTML = 'No scripts saved yet.';\n return;\n }\n\n list.innerHTML = '';\n state.scripts.forEach((script, idx) => {\n const item = document.createElement('div');\n item.style.padding = '12px';\n item.style.borderBottom = '1px solid var(--border)';\n item.innerHTML = `<strong>#${idx + 1} - ${escapeHtml(script.title)}<\/strong><p style=\"color: var(--text-muted); margin-top: 4px; font-size: 13px;\">${escapeHtml(script.body)}<\/p>`;\n list.appendChild(item);\n });\n }\n\n function updateStats() {\n document.getElementById('stat-storyboards').innerText = state.storyboards.length;\n document.getElementById('stat-characters').innerText = state.characters;\n document.getElementById('stat-scripts').innerText = state.scripts.length;\n }\n\n function escapeHtml(str) {\n return str.replace(\/&\/g, \"&\").replace(\/<\/g, \"<\").replace(\/>\/g, \">\").replace(\/\"\/g, \""\").replace(\/'\/g, \"'\");\n }\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>ToonCanvas Studio – Creator Planner & Storyboard TC ToonCanvas Creator Studio v1.0 Dashboard Storyboard Planner AI Character Lab Script Writer Status: Ready Dashboard Overview Creator Workspace Active Storyboards 0 Saved Characters 0 Draft Scripts 0 Welcome to ToonCanvas Studio Streamline your transition to animated video creation. Plan scenes, design mascots with AI prompts, and draft […]<\/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-896","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/896","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=896"}],"version-history":[{"count":3,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/896\/revisions"}],"predecessor-version":[{"id":899,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/896\/revisions\/899"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}