Teacher Payout Guide<\/title>\n <style>\n :root {\n --primary-color: #f25f34;\n --secondary-color: #555;\n --light-bg: #f8f9fa;\n --border-color: #e2e2e2;\n --success-color: #28a745;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n min-height: 100vh;\n padding: 48px 16px 64px 16px;\n color: #333;\n line-height: 1.6;\n }\n \n .payout-guide-container {\n max-width: 1000px;\n margin: 0 auto;\n background: white;\n border-radius: 20px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.15);\n overflow: hidden;\n }\n \n .header {\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\n padding: 40px 32px;\n text-align: center;\n color: white;\n }\n \n .header h1 {\n font-size: 36px;\n font-weight: 600;\n margin-bottom: 8px;\n }\n \n .header p {\n opacity: 0.9;\n font-size: 18px;\n }\n\n .content-wrapper {\n padding: 40px;\n }\n \n .congratulations {\n background-color: #fff5f0;\n border-left: 4px solid var(--primary-color);\n padding: 1.5rem;\n margin-bottom: 2rem;\n border-radius: 0.5rem;\n }\n \n .congratulations h2 {\n color: #333;\n margin-top: 0;\n margin-bottom: 1rem;\n font-weight: 600;\n }\n \n .section {\n margin-bottom: 2.5rem;\n }\n \n .section h2 {\n border-bottom: 2px solid var(--primary-color);\n padding-bottom: 0.5rem;\n margin-bottom: 1.5rem;\n color: #333;\n font-weight: 600;\n }\n\n .section p {\n color: #333;\n margin-bottom: 1rem;\n }\n \n \/* Calculator Styles *\/\n .calculator-section {\n background: white;\n border-radius: 16px;\n border: 2px solid #e0e0e0;\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .calculator-header {\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\n padding: 24px 32px;\n color: white;\n }\n\n .calculator-header h3 {\n font-size: 24px;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .calculator-header p {\n opacity: 0.9;\n font-size: 16px;\n }\n\n .calculator-content {\n padding: 32px;\n }\n\n .input-section {\n margin-bottom: 24px;\n }\n\n label {\n display: block;\n font-size: 16px;\n font-weight: 600;\n color: #444;\n margin-bottom: 8px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .price-input-wrapper {\n position: relative;\n margin-bottom: 16px;\n }\n\n .currency {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 24px;\n color: #999;\n font-weight: 300;\n }\n\n input[type=\"number\"] {\n width: 100%;\n padding: 20px 24px 20px 56px;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n font-size: 32px;\n font-weight: 600;\n outline: none;\n transition: all 0.3s ease;\n background: #fafafa;\n }\n\n input[type=\"number\"]:focus {\n border-color: #f25f34;\n background: white;\n box-shadow: 0 0 0 4px rgba(242, 95, 52, 0.1);\n }\n\n input[type=\"number\"]::placeholder {\n color: #ccc;\n font-weight: 400;\n }\n\n .vat-section {\n background: #f8f9fa;\n border-radius: 12px;\n padding: 20px;\n }\n\n .vat-section label {\n margin-bottom: 12px;\n }\n\n .vat-toggle {\n display: grid;\n grid-template-columns: 1fr 1fr;\n background: #e9ecef;\n border-radius: 10px;\n padding: 4px;\n gap: 4px;\n }\n\n .vat-btn {\n padding: 16px;\n border: none;\n background: transparent;\n border-radius: 8px;\n cursor: pointer;\n font-size: 18px;\n font-weight: 600;\n transition: all 0.3s ease;\n color: #666;\n }\n\n .vat-btn.active {\n background: white;\n color: #f25f34;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n\n .empty-state {\n text-align: center;\n padding: 48px 16px;\n color: #999;\n }\n\n .empty-state-icon {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n }\n\n .empty-state p {\n font-size: 18px;\n line-height: 1.6;\n }\n\n .results {\n display: none;\n animation: slideUp 0.4s ease-out;\n }\n\n .results.show {\n display: block;\n }\n\n @keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .hero-earning {\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\n border-radius: 16px;\n padding: 32px;\n text-align: center;\n color: white;\n margin-bottom: 24px;\n box-shadow: 0 8px 24px rgba(242, 95, 52, 0.3);\n }\n\n .hero-earning-label {\n font-size: 16px;\n opacity: 0.9;\n margin-bottom: 8px;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-weight: 600;\n }\n\n .hero-earning-amount {\n font-size: 56px;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 8px;\n }\n\n .hero-earning-subtitle {\n font-size: 16px;\n opacity: 0.8;\n }\n\n .billing-card {\n background: #f8f9fa;\n border-radius: 12px;\n padding: 20px;\n margin-bottom: 16px;\n border-left: 4px solid #f25f34;\n }\n\n .billing-card-title {\n font-size: 16px;\n font-weight: 600;\n color: #f25f34;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .billing-row {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n font-size: 16px;\n color: #555;\n }\n\n .billing-row span:last-child {\n font-weight: 600;\n color: #1c1c1c;\n }\n\n .details-toggle {\n background: white;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n padding: 16px;\n margin-top: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .details-toggle:hover {\n border-color: #f25f34;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n }\n\n .details-toggle-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 600;\n color: #333;\n font-size: 17px;\n }\n\n .toggle-icon {\n font-size: 20px;\n transition: transform 0.3s ease;\n }\n\n .details-toggle.open .toggle-icon {\n transform: rotate(180deg);\n }\n\n .details-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n }\n\n .details-toggle.open .details-content {\n max-height: 500px;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e0e0e0;\n }\n\n .breakdown-row {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n font-size: 16px;\n color: #666;\n }\n\n .breakdown-row.negative {\n color: #dc2626;\n }\n\n .breakdown-row span:last-child {\n font-weight: 600;\n }\n\n .breakdown-row.total {\n border-top: 2px solid #e0e0e0;\n margin-top: 8px;\n padding-top: 12px;\n font-size: 18px;\n font-weight: 600;\n color: #f25f34;\n }\n\n .commission-details {\n background: #f0f7ff;\n border-radius: 8px;\n padding: 12px;\n margin-top: 8px;\n font-size: 15px;\n color: #555;\n }\n\n .commission-row {\n display: flex;\n justify-content: space-between;\n padding: 4px 0;\n }\n \n \/* VAT Regimes Section *\/\n .vat-regimes {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-bottom: 2rem;\n }\n \n .vat-box {\n flex: 1;\n min-width: 250px;\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--border-color);\n margin-bottom: 1rem;\n }\n \n .vat-box h3 {\n margin-top: 0;\n color: #333;\n font-weight: 600;\n display: flex;\n align-items: center;\n }\n \n .vat-box h3 i {\n margin-right: 0.5rem;\n }\n \n .steps {\n counter-reset: step;\n }\n \n .step {\n position: relative;\n padding-left: 3rem;\n margin-bottom: 1.5rem;\n }\n \n .step:before {\n counter-increment: step;\n content: counter(step);\n position: absolute;\n left: 0;\n top: 0;\n width: 2rem;\n height: 2rem;\n background-color: var(--primary-color);\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n }\n\n .step h3 {\n color: #333;\n }\n\n .step h4 {\n color: var(--primary-color);\n font-weight: 600;\n }\n \n .step h3 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n }\n \n .documents {\n background-color: var(--light-bg);\n padding: 1.5rem;\n border-radius: 0.5rem;\n margin-top: 1rem;\n }\n \n .documents h4 {\n margin-top: 0;\n margin-bottom: 0.75rem;\n color: #333;\n font-weight: 600;\n }\n \n .timeline {\n position: relative;\n padding-left: 2rem;\n margin: 2rem 0;\n }\n \n .timeline:before {\n content: '';\n position: absolute;\n left: 0.5rem;\n top: 0;\n height: 100%;\n width: 2px;\n background-color: #e0e0e0;\n }\n \n .timeline-item {\n position: relative;\n margin-bottom: 1.5rem;\n }\n \n .timeline-item:before {\n content: '';\n position: absolute;\n left: -2rem;\n top: 0.5rem;\n width: 1rem;\n height: 1rem;\n border-radius: 50%;\n background-color: #d0d0d0;\n }\n\n .timeline-item strong {\n color: #333;\n }\n \n .timeline-item:last-child:after {\n content: '\u2713';\n position: absolute;\n left: -2.25rem;\n bottom: -2rem;\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 50%;\n background-color: var(--success-color);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n }\n \n .note {\n background-color: #e7f5ff;\n border-left: 4px solid #4dabf7;\n padding: 1rem;\n margin: 1.5rem 0;\n border-radius: 0.5rem;\n }\n \n .note p {\n margin: 0;\n }\n \n .btn {\n display: inline-block;\n background-color: var(--primary-color);\n color: white;\n padding: 1.25rem 2.5rem;\n border-radius: 0.75rem;\n text-decoration: none;\n font-weight: bold;\n transition: background-color 0.2s;\n min-width: 280px;\n }\n \n .btn:hover {\n background-color: #e04e23;\n }\n \n .cta {\n text-align: center;\n margin: 2rem 0;\n }\n \n @media (max-width: 768px) {\n body {\n padding: 32px 8px 48px 8px;\n }\n\n .header {\n padding: 32px 24px;\n }\n\n .header h1 {\n font-size: 28px;\n }\n\n .header p {\n font-size: 16px;\n }\n\n .content-wrapper {\n padding: 24px;\n }\n\n .calculator-content {\n padding: 24px;\n }\n\n .hero-earning-amount {\n font-size: 44px;\n }\n\n input[type=\"number\"] {\n font-size: 28px;\n }\n \n .vat-regimes {\n flex-direction: column;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"payout-guide-container\">\n <div class=\"header\">\n <h1>\ud83d\udcb0 Teacher Payout Guide<\/h1>\n <p>Everything you need to know about receiving your earnings<\/p>\n <\/div>\n\n <div class=\"content-wrapper\">\n <div class=\"congratulations\">\n <h2>\ud83c\udf89 Congratulations on Your Workshops!<\/h2>\n <p>First and foremost, thank you for being part of the Hands On family. Your expertise, passion, and dedication to teaching have made Hands On possible. The knowledge you've shared with your students makes a real difference, and we're incredibly grateful for your partnership.<\/p>\n <p>Now, let's get you paid for your amazing work!<\/p>\n <\/div>\n \n <div class=\"section\">\n <h2>Understanding Your Earnings<\/h2>\n \n <p>We've designed a straightforward system to help you understand how your workshop earnings are calculated. Here's a quick breakdown:<\/p>\n \n <div class=\"calculator-section\">\n <div class=\"calculator-header\">\n <h3>Workshop Calculator<\/h3>\n <p>See what you'll earn in seconds<\/p>\n <\/div>\n\n <div class=\"calculator-content\">\n <div class=\"input-section\">\n <label>Workshop Price<\/label>\n <div class=\"price-input-wrapper\">\n <span class=\"currency\">\u20ac<\/span>\n <input type=\"number\" id=\"priceInput\" placeholder=\"100\" step=\"0.01\" min=\"0\" autofocus>\n <\/div>\n <\/div>\n\n <div class=\"vat-section\">\n <label>How You Invoice<\/label>\n <div class=\"vat-toggle\">\n <button class=\"vat-btn\" data-vat=\"0\">0% VAT<\/button>\n <button class=\"vat-btn active\" data-vat=\"23\">23% VAT<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"empty-state\" id=\"emptyState\">\n <div class=\"empty-state-icon\">\ud83c\udfa8<\/div>\n <p>Enter your workshop price above to see what you'll earn<\/p>\n <\/div>\n\n \n <div class=\"results\" id=\"results\">\n <div class=\"hero-earning\">\n <div class=\"hero-earning-label\">You'll Earn<\/div>\n <div class=\"hero-earning-amount\" id=\"heroAmount\">\u20ac0.00<\/div>\n <div class=\"hero-earning-subtitle\">from <span id=\"heroFrom\">\u20ac0.00<\/span> workshop<\/div>\n <\/div>\n\n <div class=\"billing-card\" id=\"billingCard\">\n <div class=\"billing-card-title\">\n <span>\ud83d\udccb<\/span>\n <span>How Billing Works<\/span>\n <\/div>\n <div id=\"billingDetails\"><\/div>\n <\/div>\n\n <div class=\"details-toggle\" id=\"detailsToggle\">\n <div class=\"details-toggle-header\">\n <span>See breakdown<\/span>\n <span class=\"toggle-icon\">\u25bc<\/span>\n <\/div>\n <div class=\"details-content\">\n <div class=\"breakdown-row\">\n <span>Workshop Price<\/span>\n <span id=\"breakdownPrice\">\u20ac0.00<\/span>\n <\/div>\n <div class=\"breakdown-row negative\">\n <span>Hands On Commission (15%)<\/span>\n <span id=\"breakdownCommission\">-\u20ac0.00<\/span>\n <\/div>\n <div class=\"breakdown-row negative\">\n <span>Service Fee Tax (23%)<\/span>\n <span id=\"breakdownTax\">-\u20ac0.00<\/span>\n <\/div>\n <div class=\"breakdown-row total\">\n <span>Your Earnings<\/span>\n <span id=\"breakdownTotal\">\u20ac0.00<\/span>\n <\/div>\n \n <div class=\"commission-details\">\n <strong>About the commission:<\/strong>\n <div class=\"commission-row\">\n <span>Base fee (15%)<\/span>\n <span id=\"commissionBase\">\u20ac0.00<\/span>\n <\/div>\n <div class=\"commission-row\">\n <span>Tax on fee (23%)<\/span>\n <span id=\"commissionVAT\">\u20ac0.00<\/span>\n <\/div>\n <div class=\"commission-row\" style=\"border-top: 1px solid #ddd; margin-top: 4px; padding-top: 4px;\">\n <span><strong>Total deducted<\/strong><\/span>\n <span id=\"commissionTotal\"><strong>\u20ac0.00<\/strong><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"section\">\n <h2>VAT Regimes and Invoicing Process<\/h2>\n \n <p>The invoicing process differs depending on your VAT regime. We've outlined the two main scenarios below:<\/p>\n \n <div class=\"vat-regimes\">\n <div class=\"vat-box\">\n <h3>23% VAT Regime<\/h3>\n <p><strong>Invoicing Flow:<\/strong><\/p>\n <ul>\n <li>Hands On will handle invoicing the client directly<\/li>\n <li>You'll only need to invoice Hands On for your commission amount (visible in your Wallet)<\/li>\n <li>This simplifies the process for both you and the client<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"vat-box\">\n <h3>0% or 6% VAT Regime<\/h3>\n <p><strong>Invoicing Flow:<\/strong><\/p>\n <ul>\n <li>You'll need to issue invoices directly to clients<\/li>\n <li>Use the client's name exactly as it appears in the Bookings system<\/li>\n <li>Share copies of these client invoices with us through the payment request form<\/li>\n <li>Hands On will invoice you for our commission<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"note\">\n <p><strong>Important:<\/strong> Regardless of your VAT regime, the calculator ensures you receive the same net earnings. The only difference is in the invoicing process.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"section\">\n <h2>Requesting Your Payment<\/h2>\n \n <div class=\"steps\">\n <div class=\"step\">\n <h3>Check Your Eligibility<\/h3>\n <p>Before requesting payment, ensure:<\/p>\n <ul>\n <li>The workshop date has already passed<\/li>\n <li>The client has paid for the workshop<\/li>\n <li>Payment gateways have processed the transaction (typically 2-3 business days)<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"step\">\n <h3>Prepare Your Documents<\/h3>\n <div class=\"documents\">\n <h4>For 23% VAT Regime:<\/h4>\n <ul>\n <li>Your invoice to Hands On for your commission amount<\/li>\n <\/ul>\n \n <h4>For 0% or 6% VAT Regime:<\/h4>\n <ul>\n <li>Copies of all invoices you issued to clients related to this payout<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"step\">\n <h3>Submit Your Payment Request<\/h3>\n <p>Use our online form to submit your payment request, attaching all required documents.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"section\">\n <h2>Payment Timeline<\/h2>\n \n <div class=\"timeline\">\n <div class=\"timeline-item\">\n <p><strong>Workshop Completion<\/strong> - You've successfully delivered your workshop<\/p>\n <\/div>\n \n <div class=\"timeline-item\">\n <p><strong>Client Payment Processing<\/strong> - Payment gateways process the client's payment (2-3 business days)<\/p>\n <\/div>\n \n <div class=\"timeline-item\">\n <p><strong>Your Payment Request<\/strong> - You submit your payment request with all required documents<\/p>\n <\/div>\n \n <div class=\"timeline-item\">\n <p><strong>Hands On Review<\/strong> - We review your request and process the payment<\/p>\n <\/div>\n \n <div class=\"timeline-item\">\n <p><strong>Payment Issued<\/strong> - You receive your earnings!<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"cta\" style=\"display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;\">\n <a href=\"https:\/\/handson.pt\/payment-request-0-vat-regime\/\" class=\"btn\" style=\"background-color: var(--primary-color); display: flex; flex-direction: column; align-items: center; gap: 0.5rem;\">\n <span style=\"font-size: 1.5rem; font-weight: 700;\">0% VAT Regime<\/span>\n <span style=\"font-size: 1rem; font-weight: 500; opacity: 0.9;\">Submit payout request<\/span>\n <\/a>\n <a href=\"https:\/\/handson.pt\/payment-request-23-vat-regime\/\" class=\"btn\" style=\"background-color: var(--primary-color); display: flex; flex-direction: column; align-items: center; gap: 0.5rem;\">\n <span style=\"font-size: 1.5rem; font-weight: 700;\">23% VAT Regime<\/span>\n <span style=\"font-size: 1rem; font-weight: 500; opacity: 0.9;\">Submit payout request<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const COMMISSION_RATE = 0.15;\n const COMMISSION_VAT_RATE = 0.23;\n \n let selectedVAT = 23;\n \n const priceInput = document.getElementById('priceInput');\n const emptyState = document.getElementById('emptyState');\n const results = document.getElementById('results');\n const detailsToggle = document.getElementById('detailsToggle');\n const vatButtons = document.querySelectorAll('.vat-btn');\n\n \/\/ Format currency\n function formatEuro(amount) {\n return new Intl.NumberFormat('pt-PT', {\n style: 'currency',\n currency: 'EUR'\n }).format(amount);\n }\n\n \/\/ VAT toggle\n vatButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n vatButtons.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n selectedVAT = parseInt(btn.dataset.vat);\n calculate();\n });\n });\n\n \/\/ Details toggle\n detailsToggle.addEventListener('click', () => {\n detailsToggle.classList.toggle('open');\n });\n\n \/\/ Calculate on input\n priceInput.addEventListener('input', calculate);\n\n function calculate() {\n const price = parseFloat(priceInput.value);\n\n \/\/ Show empty state if no valid input\n if (!price || price <= 0) {\n emptyState.style.display = 'block';\n results.classList.remove('show');\n return;\n }\n\n \/\/ Hide empty state, show results\n emptyState.style.display = 'none';\n results.classList.add('show');\n\n \/\/ Calculate earnings\n const commissionBase = price * COMMISSION_RATE;\n const commissionVAT = commissionBase * COMMISSION_VAT_RATE;\n const commissionTotal = commissionBase + commissionVAT;\n const earnings = price - commissionTotal;\n\n \/\/ Update hero section\n document.getElementById('heroAmount').textContent = formatEuro(earnings);\n document.getElementById('heroFrom').textContent = formatEuro(price);\n\n \/\/ Update breakdown\n document.getElementById('breakdownPrice').textContent = formatEuro(price);\n document.getElementById('breakdownCommission').textContent = '-' + formatEuro(commissionBase);\n document.getElementById('breakdownTax').textContent = '-' + formatEuro(commissionVAT);\n document.getElementById('breakdownTotal').textContent = formatEuro(earnings);\n\n \/\/ Update commission details\n document.getElementById('commissionBase').textContent = formatEuro(commissionBase);\n document.getElementById('commissionVAT').textContent = formatEuro(commissionVAT);\n document.getElementById('commissionTotal').textContent = formatEuro(commissionTotal);\n\n \/\/ Update billing based on VAT regime\n const billingDetails = document.getElementById('billingDetails');\n \n if (selectedVAT === 23) {\n billingDetails.innerHTML = `\n <div class=\"billing-row\">\n <span>\u2192 Hands On invoices client<\/span>\n <span>${formatEuro(price)}<\/span>\n <\/div>\n <div class=\"billing-row\">\n <span>\u2192 You invoice Hands On<\/span>\n <span>${formatEuro(earnings)}<\/span>\n <\/div>\n `;\n } else {\n billingDetails.innerHTML = `\n <div class=\"billing-row\">\n <span>\u2192 You invoice client (0% VAT)<\/span>\n <span>${formatEuro(price)}<\/span>\n <\/div>\n <div class=\"billing-row\">\n <span>\u2192 Hands On invoices you<\/span>\n <span>${formatEuro(commissionTotal)}<\/span>\n <\/div>\n `;\n }\n }\n\n \/\/ Initial state\n calculate();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\nUpdate HTML page with new calculator code - Claude\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Teacher Payout Guide \ud83d\udcb0 Teacher Payout Guide Everything you need to know about receiving your earnings \ud83c\udf89 Congratulations on Your Workshops! First and foremost, thank you for being part of the Hands On family. Your expertise, passion, and dedication to teaching have made Hands On possible. The knowledge you’ve shared with your students makes a […]<\/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-12407","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/12407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/comments?post=12407"}],"version-history":[{"count":30,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/12407\/revisions"}],"predecessor-version":[{"id":22678,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/12407\/revisions\/22678"}],"wp:attachment":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/media?parent=12407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Teacher Payout Guide<\/title>\n <style>\n :root {\n --primary-color: #f25f34;\n --secondary-color: #555;\n --light-bg: #f8f9fa;\n --border-color: #e2e2e2;\n --success-color: #28a745;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n min-height: 100vh;\n padding: 48px 16px 64px 16px;\n color: #333;\n line-height: 1.6;\n }\n \n .payout-guide-container {\n max-width: 1000px;\n margin: 0 auto;\n background: white;\n border-radius: 20px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.15);\n overflow: hidden;\n }\n \n .header {\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\n padding: 40px 32px;\n text-align: center;\n color: white;\n }\n \n .header h1 {\n font-size: 36px;\n font-weight: 600;\n margin-bottom: 8px;\n }\n \n .header p {\n opacity: 0.9;\n font-size: 18px;\n }\n\n .content-wrapper {\n padding: 40px;\n }\n \n .congratulations {\n background-color: #fff5f0;\n border-left: 4px solid var(--primary-color);\n padding: 1.5rem;\n margin-bottom: 2rem;\n border-radius: 0.5rem;\n }\n \n .congratulations h2 {\n color: #333;\n margin-top: 0;\n margin-bottom: 1rem;\n font-weight: 600;\n }\n \n .section {\n margin-bottom: 2.5rem;\n }\n \n .section h2 {\n border-bottom: 2px solid var(--primary-color);\n padding-bottom: 0.5rem;\n margin-bottom: 1.5rem;\n color: #333;\n font-weight: 600;\n }\n\n .section p {\n color: #333;\n margin-bottom: 1rem;\n }\n \n \/* Calculator Styles *\/\n .calculator-section {\n background: white;\n border-radius: 16px;\n border: 2px solid #e0e0e0;\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .calculator-header {\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\n padding: 24px 32px;\n color: white;\n }\n\n .calculator-header h3 {\n font-size: 24px;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .calculator-header p {\n opacity: 0.9;\n font-size: 16px;\n }\n\n .calculator-content {\n padding: 32px;\n }\n\n .input-section {\n margin-bottom: 24px;\n }\n\n label {\n display: block;\n font-size: 16px;\n font-weight: 600;\n color: #444;\n margin-bottom: 8px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .price-input-wrapper {\n position: relative;\n margin-bottom: 16px;\n }\n\n .currency {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 24px;\n color: #999;\n font-weight: 300;\n }\n\n input[type=\"number\"] {\n width: 100%;\n padding: 20px 24px 20px 56px;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n font-size: 32px;\n font-weight: 600;\n outline: none;\n transition: all 0.3s ease;\n background: #fafafa;\n }\n\n input[type=\"number\"]:focus {\n border-color: #f25f34;\n background: white;\n box-shadow: 0 0 0 4px rgba(242, 95, 52, 0.1);\n }\n\n input[type=\"number\"]::placeholder {\n color: #ccc;\n font-weight: 400;\n }\n\n .vat-section {\n background: #f8f9fa;\n border-radius: 12px;\n padding: 20px;\n }\n\n .vat-section label {\n margin-bottom: 12px;\n }\n\n .vat-toggle {\n display: grid;\n grid-template-columns: 1fr 1fr;\n background: #e9ecef;\n border-radius: 10px;\n padding: 4px;\n gap: 4px;\n }\n\n .vat-btn {\n padding: 16px;\n border: none;\n background: transparent;\n border-radius: 8px;\n cursor: pointer;\n font-size: 18px;\n font-weight: 600;\n transition: all 0.3s ease;\n color: #666;\n }\n\n .vat-btn.active {\n background: white;\n color: #f25f34;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n\n .empty-state {\n text-align: center;\n padding: 48px 16px;\n color: #999;\n }\n\n .empty-state-icon {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n }\n\n .empty-state p {\n font-size: 18px;\n line-height: 1.6;\n }\n\n .results {\n display: none;\n animation: slideUp 0.4s ease-out;\n }\n\n .results.show {\n display: block;\n }\n\n @keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .hero-earning {\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\n border-radius: 16px;\n padding: 32px;\n text-align: center;\n color: white;\n margin-bottom: 24px;\n box-shadow: 0 8px 24px rgba(242, 95, 52, 0.3);\n }\n\n .hero-earning-label {\n font-size: 16px;\n opacity: 0.9;\n margin-bottom: 8px;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-weight: 600;\n }\n\n .hero-earning-amount {\n font-size: 56px;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 8px;\n }\n\n .hero-earning-subtitle {\n font-size: 16px;\n opacity: 0.8;\n }\n\n .billing-card {\n background: #f8f9fa;\n border-radius: 12px;\n padding: 20px;\n margin-bottom: 16px;\n border-left: 4px solid #f25f34;\n }\n\n .billing-card-title {\n font-size: 16px;\n font-weight: 600;\n color: #f25f34;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .billing-row {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n font-size: 16px;\n color: #555;\n }\n\n .billing-row span:last-child {\n font-weight: 600;\n color: #1c1c1c;\n }\n\n .details-toggle {\n background: white;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n padding: 16px;\n margin-top: 16px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .details-toggle:hover {\n border-color: #f25f34;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n }\n\n .details-toggle-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 600;\n color: #333;\n font-size: 17px;\n }\n\n .toggle-icon {\n font-size: 20px;\n transition: transform 0.3s ease;\n }\n\n .details-toggle.open .toggle-icon {\n transform: rotate(180deg);\n }\n\n .details-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n }\n\n .details-toggle.open .details-content {\n max-height: 500px;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e0e0e0;\n }\n\n .breakdown-row {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n font-size: 16px;\n color: #666;\n }\n\n .breakdown-row.negative {\n color: #dc2626;\n }\n\n .breakdown-row span:last-child {\n font-weight: 600;\n }\n\n .breakdown-row.total {\n border-top: 2px solid #e0e0e0;\n margin-top: 8px;\n padding-top: 12px;\n font-size: 18px;\n font-weight: 600;\n color: #f25f34;\n }\n\n .commission-details {\n background: #f0f7ff;\n border-radius: 8px;\n padding: 12px;\n margin-top: 8px;\n font-size: 15px;\n color: #555;\n }\n\n .commission-row {\n display: flex;\n justify-content: space-between;\n padding: 4px 0;\n }\n \n \/* VAT Regimes Section *\/\n .vat-regimes {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-bottom: 2rem;\n }\n \n .vat-box {\n flex: 1;\n min-width: 250px;\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--border-color);\n margin-bottom: 1rem;\n }\n \n .vat-box h3 {\n margin-top: 0;\n color: #333;\n font-weight: 600;\n display: flex;\n align-items: center;\n }\n \n .vat-box h3 i {\n margin-right: 0.5rem;\n }\n \n .steps {\n counter-reset: step;\n }\n \n .step {\n position: relative;\n padding-left: 3rem;\n margin-bottom: 1.5rem;\n }\n \n .step:before {\n counter-increment: step;\n content: counter(step);\n position: absolute;\n left: 0;\n top: 0;\n width: 2rem;\n height: 2rem;\n background-color: var(--primary-color);\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n }\n\n .step h3 {\n color: #333;\n }\n\n .step h4 {\n color: var(--primary-color);\n font-weight: 600;\n }\n \n .step h3 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n }\n \n .documents {\n background-color: var(--light-bg);\n padding: 1.5rem;\n border-radius: 0.5rem;\n margin-top: 1rem;\n }\n \n .documents h4 {\n margin-top: 0;\n margin-bottom: 0.75rem;\n color: #333;\n font-weight: 600;\n }\n \n .timeline {\n position: relative;\n padding-left: 2rem;\n margin: 2rem 0;\n }\n \n .timeline:before {\n content: '';\n position: absolute;\n left: 0.5rem;\n top: 0;\n height: 100%;\n width: 2px;\n background-color: #e0e0e0;\n }\n \n .timeline-item {\n position: relative;\n margin-bottom: 1.5rem;\n }\n \n .timeline-item:before {\n content: '';\n position: absolute;\n left: -2rem;\n top: 0.5rem;\n width: 1rem;\n height: 1rem;\n border-radius: 50%;\n background-color: #d0d0d0;\n }\n\n .timeline-item strong {\n color: #333;\n }\n \n .timeline-item:last-child:after {\n content: '\u2713';\n position: absolute;\n left: -2.25rem;\n bottom: -2rem;\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 50%;\n background-color: var(--success-color);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n }\n \n .note {\n background-color: #e7f5ff;\n border-left: 4px solid #4dabf7;\n padding: 1rem;\n margin: 1.5rem 0;\n border-radius: 0.5rem;\n }\n \n .note p {\n margin: 0;\n }\n \n .btn {\n display: inline-block;\n background-color: var(--primary-color);\n color: white;\n padding: 1.25rem 2.5rem;\n border-radius: 0.75rem;\n text-decoration: none;\n font-weight: bold;\n transition: background-color 0.2s;\n min-width: 280px;\n }\n \n .btn:hover {\n background-color: #e04e23;\n }\n \n .cta {\n text-align: center;\n margin: 2rem 0;\n }\n \n @media (max-width: 768px) {\n body {\n padding: 32px 8px 48px 8px;\n }\n\n .header {\n padding: 32px 24px;\n }\n\n .header h1 {\n font-size: 28px;\n }\n\n .header p {\n font-size: 16px;\n }\n\n .content-wrapper {\n padding: 24px;\n }\n\n .calculator-content {\n padding: 24px;\n }\n\n .hero-earning-amount {\n font-size: 44px;\n }\n\n input[type=\"number\"] {\n font-size: 28px;\n }\n \n .vat-regimes {\n flex-direction: column;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"payout-guide-container\">\n <div class=\"header\">\n <h1>\ud83d\udcb0 Teacher Payout Guide<\/h1>\n <p>Everything you need to know about receiving your earnings<\/p>\n <\/div>\n\n <div class=\"content-wrapper\">\n <div class=\"congratulations\">\n <h2>\ud83c\udf89 Congratulations on Your Workshops!<\/h2>\n <p>First and foremost, thank you for being part of the Hands On family. Your expertise, passion, and dedication to teaching have made Hands On possible. The knowledge you've shared with your students makes a real difference, and we're incredibly grateful for your partnership.<\/p>\n <p>Now, let's get you paid for your amazing work!<\/p>\n <\/div>\n \n <div class=\"section\">\n <h2>Understanding Your Earnings<\/h2>\n \n <p>We've designed a straightforward system to help you understand how your workshop earnings are calculated. Here's a quick breakdown:<\/p>\n \n <div class=\"calculator-section\">\n <div class=\"calculator-header\">\n <h3>Workshop Calculator<\/h3>\n <p>See what you'll earn in seconds<\/p>\n <\/div>\n\n <div class=\"calculator-content\">\n <div class=\"input-section\">\n <label>Workshop Price<\/label>\n <div class=\"price-input-wrapper\">\n <span class=\"currency\">\u20ac<\/span>\n <input type=\"number\" id=\"priceInput\" placeholder=\"100\" step=\"0.01\" min=\"0\" autofocus>\n <\/div>\n <\/div>\n\n <div class=\"vat-section\">\n <label>How You Invoice<\/label>\n <div class=\"vat-toggle\">\n <button class=\"vat-btn\" data-vat=\"0\">0% VAT<\/button>\n <button class=\"vat-btn active\" data-vat=\"23\">23% VAT<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"empty-state\" id=\"emptyState\">\n <div class=\"empty-state-icon\">\ud83c\udfa8<\/div>\n <p>Enter your workshop price above to see what you'll earn<\/p>\n <\/div>\n\n \n <div class=\"results\" id=\"results\">\n <div class=\"hero-earning\">\n <div class=\"hero-earning-label\">You'll Earn<\/div>\n <div class=\"hero-earning-amount\" id=\"heroAmount\">\u20ac0.00<\/div>\n <div class=\"hero-earning-subtitle\">from <span id=\"heroFrom\">\u20ac0.00<\/span> workshop<\/div>\n <\/div>\n\n <div class=\"billing-card\" id=\"billingCard\">\n <div class=\"billing-card-title\">\n <span>\ud83d\udccb<\/span>\n <span>How Billing Works<\/span>\n <\/div>\n <div id=\"billingDetails\"><\/div>\n <\/div>\n\n <div class=\"details-toggle\" id=\"detailsToggle\">\n <div class=\"details-toggle-header\">\n <span>See breakdown<\/span>\n <span class=\"toggle-icon\">\u25bc<\/span>\n <\/div>\n <div class=\"details-content\">\n <div class=\"breakdown-row\">\n <span>Workshop Price<\/span>\n <span id=\"breakdownPrice\">\u20ac0.00<\/span>\n <\/div>\n <div class=\"breakdown-row negative\">\n <span>Hands On Commission (15%)<\/span>\n <span id=\"breakdownCommission\">-\u20ac0.00<\/span>\n <\/div>\n <div class=\"breakdown-row negative\">\n <span>Service Fee Tax (23%)<\/span>\n <span id=\"breakdownTax\">-\u20ac0.00<\/span>\n <\/div>\n <div class=\"breakdown-row total\">\n <span>Your Earnings<\/span>\n <span id=\"breakdownTotal\">\u20ac0.00<\/span>\n <\/div>\n \n <div class=\"commission-details\">\n <strong>About the commission:<\/strong>\n <div class=\"commission-row\">\n <span>Base fee (15%)<\/span>\n <span id=\"commissionBase\">\u20ac0.00<\/span>\n <\/div>\n <div class=\"commission-row\">\n <span>Tax on fee (23%)<\/span>\n <span id=\"commissionVAT\">\u20ac0.00<\/span>\n <\/div>\n <div class=\"commission-row\" style=\"border-top: 1px solid #ddd; margin-top: 4px; padding-top: 4px;\">\n <span><strong>Total deducted<\/strong><\/span>\n <span id=\"commissionTotal\"><strong>\u20ac0.00<\/strong><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"section\">\n <h2>VAT Regimes and Invoicing Process<\/h2>\n \n <p>The invoicing process differs depending on your VAT regime. We've outlined the two main scenarios below:<\/p>\n \n <div class=\"vat-regimes\">\n <div class=\"vat-box\">\n <h3>23% VAT Regime<\/h3>\n <p><strong>Invoicing Flow:<\/strong><\/p>\n <ul>\n <li>Hands On will handle invoicing the client directly<\/li>\n <li>You'll only need to invoice Hands On for your commission amount (visible in your Wallet)<\/li>\n <li>This simplifies the process for both you and the client<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"vat-box\">\n <h3>0% or 6% VAT Regime<\/h3>\n <p><strong>Invoicing Flow:<\/strong><\/p>\n <ul>\n <li>You'll need to issue invoices directly to clients<\/li>\n <li>Use the client's name exactly as it appears in the Bookings system<\/li>\n <li>Share copies of these client invoices with us through the payment request form<\/li>\n <li>Hands On will invoice you for our commission<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"note\">\n <p><strong>Important:<\/strong> Regardless of your VAT regime, the calculator ensures you receive the same net earnings. The only difference is in the invoicing process.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"section\">\n <h2>Requesting Your Payment<\/h2>\n \n <div class=\"steps\">\n <div class=\"step\">\n <h3>Check Your Eligibility<\/h3>\n <p>Before requesting payment, ensure:<\/p>\n <ul>\n <li>The workshop date has already passed<\/li>\n <li>The client has paid for the workshop<\/li>\n <li>Payment gateways have processed the transaction (typically 2-3 business days)<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"step\">\n <h3>Prepare Your Documents<\/h3>\n <div class=\"documents\">\n <h4>For 23% VAT Regime:<\/h4>\n <ul>\n <li>Your invoice to Hands On for your commission amount<\/li>\n <\/ul>\n \n <h4>For 0% or 6% VAT Regime:<\/h4>\n <ul>\n <li>Copies of all invoices you issued to clients related to this payout<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"step\">\n <h3>Submit Your Payment Request<\/h3>\n <p>Use our online form to submit your payment request, attaching all required documents.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"section\">\n <h2>Payment Timeline<\/h2>\n \n <div class=\"timeline\">\n <div class=\"timeline-item\">\n <p><strong>Workshop Completion<\/strong> - You've successfully delivered your workshop<\/p>\n <\/div>\n \n <div class=\"timeline-item\">\n <p><strong>Client Payment Processing<\/strong> - Payment gateways process the client's payment (2-3 business days)<\/p>\n <\/div>\n \n <div class=\"timeline-item\">\n <p><strong>Your Payment Request<\/strong> - You submit your payment request with all required documents<\/p>\n <\/div>\n \n <div class=\"timeline-item\">\n <p><strong>Hands On Review<\/strong> - We review your request and process the payment<\/p>\n <\/div>\n \n <div class=\"timeline-item\">\n <p><strong>Payment Issued<\/strong> - You receive your earnings!<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"cta\" style=\"display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;\">\n <a href=\"https:\/\/handson.pt\/payment-request-0-vat-regime\/\" class=\"btn\" style=\"background-color: var(--primary-color); display: flex; flex-direction: column; align-items: center; gap: 0.5rem;\">\n <span style=\"font-size: 1.5rem; font-weight: 700;\">0% VAT Regime<\/span>\n <span style=\"font-size: 1rem; font-weight: 500; opacity: 0.9;\">Submit payout request<\/span>\n <\/a>\n <a href=\"https:\/\/handson.pt\/payment-request-23-vat-regime\/\" class=\"btn\" style=\"background-color: var(--primary-color); display: flex; flex-direction: column; align-items: center; gap: 0.5rem;\">\n <span style=\"font-size: 1.5rem; font-weight: 700;\">23% VAT Regime<\/span>\n <span style=\"font-size: 1rem; font-weight: 500; opacity: 0.9;\">Submit payout request<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const COMMISSION_RATE = 0.15;\n const COMMISSION_VAT_RATE = 0.23;\n \n let selectedVAT = 23;\n \n const priceInput = document.getElementById('priceInput');\n const emptyState = document.getElementById('emptyState');\n const results = document.getElementById('results');\n const detailsToggle = document.getElementById('detailsToggle');\n const vatButtons = document.querySelectorAll('.vat-btn');\n\n \/\/ Format currency\n function formatEuro(amount) {\n return new Intl.NumberFormat('pt-PT', {\n style: 'currency',\n currency: 'EUR'\n }).format(amount);\n }\n\n \/\/ VAT toggle\n vatButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n vatButtons.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n selectedVAT = parseInt(btn.dataset.vat);\n calculate();\n });\n });\n\n \/\/ Details toggle\n detailsToggle.addEventListener('click', () => {\n detailsToggle.classList.toggle('open');\n });\n\n \/\/ Calculate on input\n priceInput.addEventListener('input', calculate);\n\n function calculate() {\n const price = parseFloat(priceInput.value);\n\n \/\/ Show empty state if no valid input\n if (!price || price <= 0) {\n emptyState.style.display = 'block';\n results.classList.remove('show');\n return;\n }\n\n \/\/ Hide empty state, show results\n emptyState.style.display = 'none';\n results.classList.add('show');\n\n \/\/ Calculate earnings\n const commissionBase = price * COMMISSION_RATE;\n const commissionVAT = commissionBase * COMMISSION_VAT_RATE;\n const commissionTotal = commissionBase + commissionVAT;\n const earnings = price - commissionTotal;\n\n \/\/ Update hero section\n document.getElementById('heroAmount').textContent = formatEuro(earnings);\n document.getElementById('heroFrom').textContent = formatEuro(price);\n\n \/\/ Update breakdown\n document.getElementById('breakdownPrice').textContent = formatEuro(price);\n document.getElementById('breakdownCommission').textContent = '-' + formatEuro(commissionBase);\n document.getElementById('breakdownTax').textContent = '-' + formatEuro(commissionVAT);\n document.getElementById('breakdownTotal').textContent = formatEuro(earnings);\n\n \/\/ Update commission details\n document.getElementById('commissionBase').textContent = formatEuro(commissionBase);\n document.getElementById('commissionVAT').textContent = formatEuro(commissionVAT);\n document.getElementById('commissionTotal').textContent = formatEuro(commissionTotal);\n\n \/\/ Update billing based on VAT regime\n const billingDetails = document.getElementById('billingDetails');\n \n if (selectedVAT === 23) {\n billingDetails.innerHTML = `\n <div class=\"billing-row\">\n <span>\u2192 Hands On invoices client<\/span>\n <span>${formatEuro(price)}<\/span>\n <\/div>\n <div class=\"billing-row\">\n <span>\u2192 You invoice Hands On<\/span>\n <span>${formatEuro(earnings)}<\/span>\n <\/div>\n `;\n } else {\n billingDetails.innerHTML = `\n <div class=\"billing-row\">\n <span>\u2192 You invoice client (0% VAT)<\/span>\n <span>${formatEuro(price)}<\/span>\n <\/div>\n <div class=\"billing-row\">\n <span>\u2192 Hands On invoices you<\/span>\n <span>${formatEuro(commissionTotal)}<\/span>\n <\/div>\n `;\n }\n }\n\n \/\/ Initial state\n calculate();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\nUpdate HTML page with new calculator code - Claude\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Teacher Payout Guide \ud83d\udcb0 Teacher Payout Guide Everything you need to know about receiving your earnings \ud83c\udf89 Congratulations on Your Workshops! First and foremost, thank you for being part of the Hands On family. Your expertise, passion, and dedication to teaching have made Hands On possible. The knowledge you’ve shared with your students makes a […]<\/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-12407","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/12407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/comments?post=12407"}],"version-history":[{"count":30,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/12407\/revisions"}],"predecessor-version":[{"id":22678,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/12407\/revisions\/22678"}],"wp:attachment":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/media?parent=12407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}