{"id":277,"date":"2026-07-10T12:17:01","date_gmt":"2026-07-10T12:17:01","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=277"},"modified":"2026-07-10T13:44:10","modified_gmt":"2026-07-10T13:44:10","slug":"advance-bill-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/advance-bill-generator\/","title":{"rendered":"Advance Bill Generator"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n:root {\n    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    --glass-bg: rgba(255, 255, 255, 0.1);\n    --glass-border: rgba(255, 255, 255, 0.2);\n    --text-main: #ffffff;\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Segoe UI', Roboto, sans-serif;\n}\n\nbody {\n    background: var(--bg-gradient);\n    color: var(--text-main);\n    min-height: 100vh;\n    display: flex;\n    justify-content: center;\n    padding: 20px;\n}\n\n.app-container {\n    width: 100%;\n    max-width: 900px;\n}\n\n.app-header {\n    margin-bottom: 2rem;\n    text-align: center;\n}\n\n\/* Glassmorphism Effect *\/\n.glass-card {\n    background: var(--glass-bg);\n    backdrop-filter: blur(15px);\n    -webkit-backdrop-filter: blur(15px);\n    border: 1px solid var(--glass-border);\n    border-radius: 20px;\n    padding: 2rem;\n    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);\n}\n\n\/* Mobile First Adjustments *\/\n@media (min-width: 768px) {\n    .glass-card {\n        padding: 3rem;\n    }\n}\n\n:root {\n    \/* ... previous variables ... *\/\n    --sidebar-width: 250px;\n}\n\n\/* Dashboard Layout *\/\n.dashboard-wrapper { display: flex; min-height: 100vh; }\n\n.sidebar {\n    width: var(--sidebar-width);\n    background: rgba(0,0,0,0.2);\n    padding: 20px;\n    transition: 0.3s ease;\n}\n\n.main-content { flex: 1; display: flex; flex-direction: column; padding: 20px; }\n\n.dashboard-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    margin-top: 20px;\n}\n\n\/* Dark Mode support *\/\nbody.dark-mode { --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }\n\n\/* Responsive adjustments *\/\n@media (max-width: 900px) {\n    .dashboard-grid { grid-template-columns: 1fr; }\n    .sidebar { position: absolute; left: -250px; z-index: 100; }\n    .sidebar.active { left: 0; }\n}\n\n.form-module { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }\n.grid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }\n.input-group { display: flex; flex-direction: column; gap: 5px; }\n.input-group input[type=\"text\"], .input-group input[type=\"email\"] {\n    padding: 10px; border-radius: 8px; border: 1px solid var(--glass-border);\n    background: rgba(255,255,255,0.05); color: white;\n}\n.hidden { display: none !important; }\n\n\/* Responsive adjustments *\/\n@media (max-width: 600px) { .grid-fields { grid-template-columns: 1fr; } }\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/**\n * Invoice Generator - Foundation\n * Version: 1.0.0\n *\/\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    console.log('Invoice Generator Initialized.');\n    \n    \/\/ Initialize application state or UI modules here\n    initApp();\n});\n\nfunction initApp() {\n    const workspace = document.getElementById('invoice-workspace');\n    \n    \/\/ Logic for loading UI components will go here\n    renderUI();\n}\n\nfunction renderUI() {\n    \/\/ Example hook for adding interactive elements\n    console.log('Building interactive UI components...');\n}\n\n\/**\n * Dashboard Controller\n *\/\nconst UI = {\n    sidebar: document.getElementById('sidebar'),\n    menuToggle: document.getElementById('menu-toggle'),\n    themeToggle: document.getElementById('theme-toggle'),\n    body: document.body\n};\n\n\/\/ Toggle Sidebar for Mobile\nUI.menuToggle.addEventListener('click', () => {\n    UI.sidebar.classList.toggle('active');\n});\n\n\/\/ Theme Switcher Logic\nUI.themeToggle.addEventListener('click', () => {\n    UI.body.classList.toggle('dark-mode');\n    UI.themeToggle.innerText = UI.body.classList.contains('dark-mode') ? '\u2600\ufe0f' : '\ud83c\udf19';\n});\n\n\/\/ Initialize Dashboard Components\nfunction initDashboard() {\n    console.log('Dashboard UI ready.');\n    \/\/ Logic for loading editor tools will be injected here\n}\n\ndocument.addEventListener('DOMContentLoaded', initDashboard);\n\n\/**\n * Business Info Controller\n *\/\n\n\/\/ Updates the Live Preview area text dynamically\nfunction updatePreview(id, value) {\n    const previewElement = document.getElementById(`preview-${id}`);\n    if (previewElement) {\n        previewElement.innerText = value;\n    }\n}\n\n\/\/ Toggle field visibility in both editor and preview\nfunction toggleField(id, isVisible) {\n    const editor = document.getElementById(`${id}-input`);\n    const preview = document.getElementById(`preview-${id}`);\n    \n    if (isVisible) {\n        editor.classList.remove('hidden');\n        preview.classList.remove('hidden');\n    } else {\n        editor.classList.add('hidden');\n        preview.classList.add('hidden');\n    }\n}\n\n\/\/ Handle file uploads for assets\nfunction handleFileUpload(input, targetId) {\n    if (input.files && input.files[0]) {\n        const reader = new FileReader();\n        reader.onload = (e) => {\n            const target = document.getElementById(targetId);\n            target.src = e.target.result;\n            target.style.display = 'block';\n        };\n        reader.readAsDataURL(input.files[0]);\n    }\n}\n\n\/\/ Validation logic for business fields\nfunction validateBusinessInfo() {\n    const email = document.getElementById('email-input').value;\n    const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n    \n    if (email && !emailRegex.test(email)) {\n        alert('Please enter a valid email address');\n        return false;\n    }\n    return true;\n}\n<\/script>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Premium Invoice Generator<\/title>\n    <link rel=\"stylesheet\" href=\"css\/style.css\">\n<\/head>\n<body>\n\n    <main class=\"app-container\">\n        <header class=\"app-header\">\n            <h1>Invoice Generator<\/h1>\n            <p>Create professional invoices in seconds.<\/p>\n        <\/header>\n\n        <section class=\"generator-workspace\">\n            <div class=\"glass-card\">\n                <h2>Invoice Details<\/h2>\n                <div id=\"invoice-workspace\">\n                    <p>Workspace initialized. Ready for components.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <script src=\"js\/script.js\"><\/script>\n<div class=\"dashboard-wrapper\">\n        <nav class=\"sidebar\" id=\"sidebar\">\n            <div class=\"logo\">InvoiceGen<\/div>\n            <ul>\n                <li>Dashboard<\/li>\n                <li>Invoices<\/li>\n                <li>Settings<\/li>\n            <\/ul>\n        <\/nav>\n\n        <main class=\"main-content\">\n            <header class=\"top-navbar\">\n                <button id=\"menu-toggle\">\u2630<\/button>\n                <div class=\"actions\">\n                    <button id=\"theme-toggle\">\ud83c\udf19<\/button>\n                <\/div>\n            <\/header>\n\n            <section class=\"dashboard-grid\">\n                <div class=\"glass-card main-area\">\n                    <h3>Invoice Editor<\/h3>\n                    <div id=\"invoice-editor\"><\/div>\n                <\/div>\n                <div class=\"glass-card preview-area\">\n                    <h3>Live Preview<\/h3>\n                    <div id=\"invoice-preview\"><\/div>\n                <\/div>\n            <\/section>\n        <\/main>\n    <\/div>\n    <script src=\"js\/script.js\"><\/script>\n\n<!-- Business Info Section -->\n<section id=\"business-info-module\" class=\"form-module\">\n    <h3>Business Information<\/h3>\n    <div class=\"grid-fields\">\n        <!-- Example of Field Structure with Toggle -->\n        <div class=\"input-group\">\n            <label>\n                Shop Name \n                <input type=\"checkbox\" checked onchange=\"toggleField('shop-name', this.checked)\">\n            <\/label>\n            <input type=\"text\" id=\"shop-name-input\" placeholder=\"Enter Business Name\" oninput=\"updatePreview('shop-name', this.value)\">\n        <\/div>\n        \n        <div class=\"input-group\">\n            <label>Logo\/Stamp\/Signature<\/label>\n            <input type=\"file\" accept=\"image\/*\" onchange=\"handleFileUpload(this, 'preview-logo')\">\n        <\/div>\n        <!-- Add remaining fields: Address, Phone, Email, Website, GST, PAN following the same pattern -->\n    <\/div>\n<\/section>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Premium Invoice Generator Invoice Generator Create professional invoices in seconds. Invoice Details Workspace initialized. Ready for components. InvoiceGen Dashboard Invoices Settings \u2630 \ud83c\udf19 Invoice Editor Live Preview Business Information Shop Name Logo\/Stamp\/Signature<\/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-277","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/277","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=277"}],"version-history":[{"count":6,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/277\/revisions"}],"predecessor-version":[{"id":288,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/277\/revisions\/288"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}