Workshop Earnings Calculator<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n min-height: 100vh;\r\n padding: 48px 16px 64px 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0;\r\n }\r\n\r\n .calculator {\r\n \r\n width: 100%;\r\n background: white;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.15);\r\n overflow: hidden;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .header {\r\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\r\n padding: 40px 32px;\r\n text-align: center;\r\n color: white;\r\n }\r\n\r\n .header h1 {\r\n font-size: 36px;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .header p {\r\n opacity: 0.9;\r\n font-size: 18px;\r\n }\r\n\r\n .content {\r\n padding: 40px;\r\n }\r\n\r\n .input-section {\r\n margin-bottom: 24px;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: #444;\r\n margin-bottom: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .price-input-wrapper {\r\n position: relative;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .currency {\r\n position: absolute;\r\n left: 20px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 24px;\r\n color: #999;\r\n font-weight: 300;\r\n }\r\n\r\n input[type=\"number\"] {\r\n width: 100%;\r\n padding: 20px 24px 20px 56px;\r\n border: 2px solid #e0e0e0;\r\n border-radius: 12px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n outline: none;\r\n transition: all 0.3s ease;\r\n background: #fafafa;\r\n }\r\n\r\n input[type=\"number\"]:focus {\r\n border-color: #f25f34;\r\n background: white;\r\n box-shadow: 0 0 0 4px rgba(242, 95, 52, 0.1);\r\n }\r\n\r\n input[type=\"number\"]::placeholder {\r\n color: #ccc;\r\n font-weight: 400;\r\n }\r\n\r\n .vat-section {\r\n background: #f8f9fa;\r\n border-radius: 12px;\r\n padding: 20px;\r\n }\r\n\r\n .vat-section label {\r\n margin-bottom: 12px;\r\n }\r\n\r\n .vat-toggle {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n background: #e9ecef;\r\n border-radius: 10px;\r\n padding: 4px;\r\n gap: 4px;\r\n }\r\n\r\n .vat-btn {\r\n padding: 16px;\r\n border: none;\r\n background: transparent;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 18px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n color: #666;\r\n }\r\n\r\n .vat-btn.active {\r\n background: white;\r\n color: #f25f34;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\r\n }\r\n\r\n \/* Empty State *\/\r\n .empty-state {\r\n text-align: center;\r\n padding: 48px 16px;\r\n color: #999;\r\n }\r\n\r\n .empty-state-icon {\r\n font-size: 48px;\r\n margin-bottom: 16px;\r\n opacity: 0.5;\r\n }\r\n\r\n .empty-state p {\r\n font-size: 18px;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Results Section *\/\r\n .results {\r\n display: none;\r\n animation: slideUp 0.4s ease-out;\r\n }\r\n\r\n .results.show {\r\n display: block;\r\n }\r\n\r\n @keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .hero-earning {\r\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\r\n border-radius: 16px;\r\n padding: 32px;\r\n text-align: center;\r\n color: white;\r\n margin-bottom: 24px;\r\n box-shadow: 0 8px 24px rgba(242, 95, 52, 0.3);\r\n }\r\n\r\n .hero-earning-label {\r\n font-size: 16px;\r\n opacity: 0.9;\r\n margin-bottom: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n }\r\n\r\n .hero-earning-amount {\r\n font-size: 56px;\r\n font-weight: 700;\r\n line-height: 1;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .hero-earning-subtitle {\r\n font-size: 16px;\r\n opacity: 0.8;\r\n }\r\n\r\n .billing-card {\r\n background: #f8f9fa;\r\n border-radius: 12px;\r\n padding: 20px;\r\n margin-bottom: 16px;\r\n border-left: 4px solid #f25f34;\r\n }\r\n\r\n .billing-card-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: #f25f34;\r\n margin-bottom: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .billing-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 8px 0;\r\n font-size: 16px;\r\n color: #555;\r\n }\r\n\r\n .billing-row span:last-child {\r\n font-weight: 600;\r\n color: #1c1c1c;\r\n }\r\n\r\n .details-toggle {\r\n background: white;\r\n border: 2px solid #e0e0e0;\r\n border-radius: 12px;\r\n padding: 16px;\r\n margin-top: 16px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .details-toggle:hover {\r\n border-color: #f25f34;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\r\n }\r\n\r\n .details-toggle-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-weight: 600;\r\n color: #333;\r\n font-size: 17px;\r\n }\r\n\r\n .toggle-icon {\r\n font-size: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .details-toggle.open .toggle-icon {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .details-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease;\r\n }\r\n\r\n .details-toggle.open .details-content {\r\n max-height: 500px;\r\n margin-top: 16px;\r\n padding-top: 16px;\r\n border-top: 1px solid #e0e0e0;\r\n }\r\n\r\n .breakdown-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 8px 0;\r\n font-size: 16px;\r\n color: #666;\r\n }\r\n\r\n .breakdown-row.negative {\r\n color: #dc2626;\r\n }\r\n\r\n .breakdown-row span:last-child {\r\n font-weight: 600;\r\n }\r\n\r\n .breakdown-row.total {\r\n border-top: 2px solid #e0e0e0;\r\n margin-top: 8px;\r\n padding-top: 12px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: #f25f34;\r\n }\r\n\r\n .commission-details {\r\n background: #f0f7ff;\r\n border-radius: 8px;\r\n padding: 12px;\r\n margin-top: 8px;\r\n font-size: 15px;\r\n color: #555;\r\n }\r\n\r\n .commission-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 4px 0;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n body {\r\n padding: 32px 8px 48px 8px;\r\n }\r\n\r\n .header {\r\n padding: 32px 24px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 28px;\r\n }\r\n\r\n .header p {\r\n font-size: 16px;\r\n }\r\n\r\n .content {\r\n padding: 24px;\r\n }\r\n\r\n .hero-earning-amount {\r\n font-size: 44px;\r\n }\r\n\r\n input[type=\"number\"] {\r\n font-size: 28px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"calculator\">\r\n <div class=\"header\">\r\n <h1>\ud83d\udcb0 Workshop Calculator<\/h1>\r\n <p>See what you'll earn in seconds<\/p>\r\n <\/div>\r\n\r\n <div class=\"content\">\r\n <div class=\"input-section\">\r\n <label>Workshop Price<\/label>\r\n <div class=\"price-input-wrapper\">\r\n <span class=\"currency\">\u20ac<\/span>\r\n <input type=\"number\" id=\"priceInput\" placeholder=\"100\" step=\"0.01\" min=\"0\" autofocus>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"vat-section\">\r\n <label>How You Invoice<\/label>\r\n <div class=\"vat-toggle\">\r\n <button class=\"vat-btn\" data-vat=\"0\">0% VAT<\/button>\r\n <button class=\"vat-btn active\" data-vat=\"23\">23% VAT<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"empty-state\" id=\"emptyState\">\r\n <div class=\"empty-state-icon\">\ud83c\udfa8<\/div>\r\n <p>Enter your workshop price above to see what you'll earn<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"results\" id=\"results\">\r\n <div class=\"hero-earning\">\r\n <div class=\"hero-earning-label\">You'll Earn<\/div>\r\n <div class=\"hero-earning-amount\" id=\"heroAmount\">\u20ac0.00<\/div>\r\n <div class=\"hero-earning-subtitle\">from <span id=\"heroFrom\">\u20ac0.00<\/span> workshop<\/div>\r\n <\/div>\r\n\r\n <div class=\"billing-card\" id=\"billingCard\">\r\n <div class=\"billing-card-title\">\r\n <span>\ud83d\udccb<\/span>\r\n <span>How Billing Works<\/span>\r\n <\/div>\r\n <div id=\"billingDetails\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"details-toggle\" id=\"detailsToggle\">\r\n <div class=\"details-toggle-header\">\r\n <span>See breakdown<\/span>\r\n <span class=\"toggle-icon\">\u25bc<\/span>\r\n <\/div>\r\n <div class=\"details-content\">\r\n <div class=\"breakdown-row\">\r\n <span>Workshop Price<\/span>\r\n <span id=\"breakdownPrice\">\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"breakdown-row negative\">\r\n <span>Hands On Commission (15%)<\/span>\r\n <span id=\"breakdownCommission\">-\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"breakdown-row negative\">\r\n <span>Service Fee Tax (23%)<\/span>\r\n <span id=\"breakdownTax\">-\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"breakdown-row total\">\r\n <span>Your Earnings<\/span>\r\n <span id=\"breakdownTotal\">\u20ac0.00<\/span>\r\n <\/div>\r\n \r\n <div class=\"commission-details\">\r\n <strong>About the commission:<\/strong>\r\n <div class=\"commission-row\">\r\n <span>Base fee (15%)<\/span>\r\n <span id=\"commissionBase\">\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"commission-row\">\r\n <span>Tax on fee (23%)<\/span>\r\n <span id=\"commissionVAT\">\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"commission-row\" style=\"border-top: 1px solid #ddd; margin-top: 4px; padding-top: 4px;\">\r\n <span><strong>Total deducted<\/strong><\/span>\r\n <span id=\"commissionTotal\"><strong>\u20ac0.00<\/strong><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const COMMISSION_RATE = 0.15;\r\n const COMMISSION_VAT_RATE = 0.23;\r\n \r\n let selectedVAT = 23;\r\n \r\n const priceInput = document.getElementById('priceInput');\r\n const emptyState = document.getElementById('emptyState');\r\n const results = document.getElementById('results');\r\n const detailsToggle = document.getElementById('detailsToggle');\r\n const vatButtons = document.querySelectorAll('.vat-btn');\r\n\r\n \/\/ Format currency\r\n function formatEuro(amount) {\r\n return new Intl.NumberFormat('pt-PT', {\r\n style: 'currency',\r\n currency: 'EUR'\r\n }).format(amount);\r\n }\r\n\r\n \/\/ VAT toggle\r\n vatButtons.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n vatButtons.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n selectedVAT = parseInt(btn.dataset.vat);\r\n calculate();\r\n });\r\n });\r\n\r\n \/\/ Details toggle\r\n detailsToggle.addEventListener('click', () => {\r\n detailsToggle.classList.toggle('open');\r\n });\r\n\r\n \/\/ Calculate on input\r\n priceInput.addEventListener('input', calculate);\r\n\r\n function calculate() {\r\n const price = parseFloat(priceInput.value);\r\n\r\n \/\/ Show empty state if no valid input\r\n if (!price || price <= 0) {\r\n emptyState.style.display = 'block';\r\n results.classList.remove('show');\r\n return;\r\n }\r\n\r\n \/\/ Hide empty state, show results\r\n emptyState.style.display = 'none';\r\n results.classList.add('show');\r\n\r\n \/\/ Calculate earnings\r\n const commissionBase = price * COMMISSION_RATE;\r\n const commissionVAT = commissionBase * COMMISSION_VAT_RATE;\r\n const commissionTotal = commissionBase + commissionVAT;\r\n const earnings = price - commissionTotal;\r\n\r\n \/\/ Update hero section\r\n document.getElementById('heroAmount').textContent = formatEuro(earnings);\r\n document.getElementById('heroFrom').textContent = formatEuro(price);\r\n\r\n \/\/ Update breakdown\r\n document.getElementById('breakdownPrice').textContent = formatEuro(price);\r\n document.getElementById('breakdownCommission').textContent = '-' + formatEuro(commissionBase);\r\n document.getElementById('breakdownTax').textContent = '-' + formatEuro(commissionVAT);\r\n document.getElementById('breakdownTotal').textContent = formatEuro(earnings);\r\n\r\n \/\/ Update commission details\r\n document.getElementById('commissionBase').textContent = formatEuro(commissionBase);\r\n document.getElementById('commissionVAT').textContent = formatEuro(commissionVAT);\r\n document.getElementById('commissionTotal').textContent = formatEuro(commissionTotal);\r\n\r\n \/\/ Update billing based on VAT regime\r\n const billingDetails = document.getElementById('billingDetails');\r\n \r\n if (selectedVAT === 23) {\r\n billingDetails.innerHTML = `\r\n <div class=\"billing-row\">\r\n <span>\u2192 Hands On invoices client<\/span>\r\n <span>${formatEuro(price)}<\/span>\r\n <\/div>\r\n <div class=\"billing-row\">\r\n <span>\u2192 You invoice Hands On<\/span>\r\n <span>${formatEuro(earnings)}<\/span>\r\n <\/div>\r\n `;\r\n } else {\r\n billingDetails.innerHTML = `\r\n <div class=\"billing-row\">\r\n <span>\u2192 You invoice client (0% VAT)<\/span>\r\n <span>${formatEuro(price)}<\/span>\r\n <\/div>\r\n <div class=\"billing-row\">\r\n <span>\u2192 Hands On invoices you<\/span>\r\n <span>${formatEuro(commissionTotal)}<\/span>\r\n <\/div>\r\n `;\r\n }\r\n }\r\n\r\n \/\/ Initial state\r\n calculate();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Workshop Earnings Calculator \ud83d\udcb0 Workshop Calculator See what you\u2019ll earn in seconds Workshop Price \u20ac How You Invoice 0% VAT 23% VAT \ud83c\udfa8 Enter your workshop price above to see what you\u2019ll earn You\u2019ll Earn \u20ac0.00 from \u20ac0.00 workshop \ud83d\udccb How Billing Works See breakdown \u25bc Workshop Price \u20ac0.00 Hands On Commission (15%) -\u20ac0.00 Service […]<\/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-11742","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/11742","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=11742"}],"version-history":[{"count":31,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/11742\/revisions"}],"predecessor-version":[{"id":23138,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/11742\/revisions\/23138"}],"wp:attachment":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/media?parent=11742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Workshop Earnings Calculator<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n min-height: 100vh;\r\n padding: 48px 16px 64px 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0;\r\n }\r\n\r\n .calculator {\r\n \r\n width: 100%;\r\n background: white;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.15);\r\n overflow: hidden;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .header {\r\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\r\n padding: 40px 32px;\r\n text-align: center;\r\n color: white;\r\n }\r\n\r\n .header h1 {\r\n font-size: 36px;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .header p {\r\n opacity: 0.9;\r\n font-size: 18px;\r\n }\r\n\r\n .content {\r\n padding: 40px;\r\n }\r\n\r\n .input-section {\r\n margin-bottom: 24px;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: #444;\r\n margin-bottom: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .price-input-wrapper {\r\n position: relative;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .currency {\r\n position: absolute;\r\n left: 20px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 24px;\r\n color: #999;\r\n font-weight: 300;\r\n }\r\n\r\n input[type=\"number\"] {\r\n width: 100%;\r\n padding: 20px 24px 20px 56px;\r\n border: 2px solid #e0e0e0;\r\n border-radius: 12px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n outline: none;\r\n transition: all 0.3s ease;\r\n background: #fafafa;\r\n }\r\n\r\n input[type=\"number\"]:focus {\r\n border-color: #f25f34;\r\n background: white;\r\n box-shadow: 0 0 0 4px rgba(242, 95, 52, 0.1);\r\n }\r\n\r\n input[type=\"number\"]::placeholder {\r\n color: #ccc;\r\n font-weight: 400;\r\n }\r\n\r\n .vat-section {\r\n background: #f8f9fa;\r\n border-radius: 12px;\r\n padding: 20px;\r\n }\r\n\r\n .vat-section label {\r\n margin-bottom: 12px;\r\n }\r\n\r\n .vat-toggle {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n background: #e9ecef;\r\n border-radius: 10px;\r\n padding: 4px;\r\n gap: 4px;\r\n }\r\n\r\n .vat-btn {\r\n padding: 16px;\r\n border: none;\r\n background: transparent;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 18px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n color: #666;\r\n }\r\n\r\n .vat-btn.active {\r\n background: white;\r\n color: #f25f34;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\r\n }\r\n\r\n \/* Empty State *\/\r\n .empty-state {\r\n text-align: center;\r\n padding: 48px 16px;\r\n color: #999;\r\n }\r\n\r\n .empty-state-icon {\r\n font-size: 48px;\r\n margin-bottom: 16px;\r\n opacity: 0.5;\r\n }\r\n\r\n .empty-state p {\r\n font-size: 18px;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Results Section *\/\r\n .results {\r\n display: none;\r\n animation: slideUp 0.4s ease-out;\r\n }\r\n\r\n .results.show {\r\n display: block;\r\n }\r\n\r\n @keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .hero-earning {\r\n background: linear-gradient(135deg, #f25f34 0%, #ff8a5b 100%);\r\n border-radius: 16px;\r\n padding: 32px;\r\n text-align: center;\r\n color: white;\r\n margin-bottom: 24px;\r\n box-shadow: 0 8px 24px rgba(242, 95, 52, 0.3);\r\n }\r\n\r\n .hero-earning-label {\r\n font-size: 16px;\r\n opacity: 0.9;\r\n margin-bottom: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n }\r\n\r\n .hero-earning-amount {\r\n font-size: 56px;\r\n font-weight: 700;\r\n line-height: 1;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .hero-earning-subtitle {\r\n font-size: 16px;\r\n opacity: 0.8;\r\n }\r\n\r\n .billing-card {\r\n background: #f8f9fa;\r\n border-radius: 12px;\r\n padding: 20px;\r\n margin-bottom: 16px;\r\n border-left: 4px solid #f25f34;\r\n }\r\n\r\n .billing-card-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: #f25f34;\r\n margin-bottom: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .billing-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 8px 0;\r\n font-size: 16px;\r\n color: #555;\r\n }\r\n\r\n .billing-row span:last-child {\r\n font-weight: 600;\r\n color: #1c1c1c;\r\n }\r\n\r\n .details-toggle {\r\n background: white;\r\n border: 2px solid #e0e0e0;\r\n border-radius: 12px;\r\n padding: 16px;\r\n margin-top: 16px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .details-toggle:hover {\r\n border-color: #f25f34;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\r\n }\r\n\r\n .details-toggle-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-weight: 600;\r\n color: #333;\r\n font-size: 17px;\r\n }\r\n\r\n .toggle-icon {\r\n font-size: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .details-toggle.open .toggle-icon {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .details-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease;\r\n }\r\n\r\n .details-toggle.open .details-content {\r\n max-height: 500px;\r\n margin-top: 16px;\r\n padding-top: 16px;\r\n border-top: 1px solid #e0e0e0;\r\n }\r\n\r\n .breakdown-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 8px 0;\r\n font-size: 16px;\r\n color: #666;\r\n }\r\n\r\n .breakdown-row.negative {\r\n color: #dc2626;\r\n }\r\n\r\n .breakdown-row span:last-child {\r\n font-weight: 600;\r\n }\r\n\r\n .breakdown-row.total {\r\n border-top: 2px solid #e0e0e0;\r\n margin-top: 8px;\r\n padding-top: 12px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: #f25f34;\r\n }\r\n\r\n .commission-details {\r\n background: #f0f7ff;\r\n border-radius: 8px;\r\n padding: 12px;\r\n margin-top: 8px;\r\n font-size: 15px;\r\n color: #555;\r\n }\r\n\r\n .commission-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 4px 0;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n body {\r\n padding: 32px 8px 48px 8px;\r\n }\r\n\r\n .header {\r\n padding: 32px 24px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 28px;\r\n }\r\n\r\n .header p {\r\n font-size: 16px;\r\n }\r\n\r\n .content {\r\n padding: 24px;\r\n }\r\n\r\n .hero-earning-amount {\r\n font-size: 44px;\r\n }\r\n\r\n input[type=\"number\"] {\r\n font-size: 28px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"calculator\">\r\n <div class=\"header\">\r\n <h1>\ud83d\udcb0 Workshop Calculator<\/h1>\r\n <p>See what you'll earn in seconds<\/p>\r\n <\/div>\r\n\r\n <div class=\"content\">\r\n <div class=\"input-section\">\r\n <label>Workshop Price<\/label>\r\n <div class=\"price-input-wrapper\">\r\n <span class=\"currency\">\u20ac<\/span>\r\n <input type=\"number\" id=\"priceInput\" placeholder=\"100\" step=\"0.01\" min=\"0\" autofocus>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"vat-section\">\r\n <label>How You Invoice<\/label>\r\n <div class=\"vat-toggle\">\r\n <button class=\"vat-btn\" data-vat=\"0\">0% VAT<\/button>\r\n <button class=\"vat-btn active\" data-vat=\"23\">23% VAT<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"empty-state\" id=\"emptyState\">\r\n <div class=\"empty-state-icon\">\ud83c\udfa8<\/div>\r\n <p>Enter your workshop price above to see what you'll earn<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"results\" id=\"results\">\r\n <div class=\"hero-earning\">\r\n <div class=\"hero-earning-label\">You'll Earn<\/div>\r\n <div class=\"hero-earning-amount\" id=\"heroAmount\">\u20ac0.00<\/div>\r\n <div class=\"hero-earning-subtitle\">from <span id=\"heroFrom\">\u20ac0.00<\/span> workshop<\/div>\r\n <\/div>\r\n\r\n <div class=\"billing-card\" id=\"billingCard\">\r\n <div class=\"billing-card-title\">\r\n <span>\ud83d\udccb<\/span>\r\n <span>How Billing Works<\/span>\r\n <\/div>\r\n <div id=\"billingDetails\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"details-toggle\" id=\"detailsToggle\">\r\n <div class=\"details-toggle-header\">\r\n <span>See breakdown<\/span>\r\n <span class=\"toggle-icon\">\u25bc<\/span>\r\n <\/div>\r\n <div class=\"details-content\">\r\n <div class=\"breakdown-row\">\r\n <span>Workshop Price<\/span>\r\n <span id=\"breakdownPrice\">\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"breakdown-row negative\">\r\n <span>Hands On Commission (15%)<\/span>\r\n <span id=\"breakdownCommission\">-\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"breakdown-row negative\">\r\n <span>Service Fee Tax (23%)<\/span>\r\n <span id=\"breakdownTax\">-\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"breakdown-row total\">\r\n <span>Your Earnings<\/span>\r\n <span id=\"breakdownTotal\">\u20ac0.00<\/span>\r\n <\/div>\r\n \r\n <div class=\"commission-details\">\r\n <strong>About the commission:<\/strong>\r\n <div class=\"commission-row\">\r\n <span>Base fee (15%)<\/span>\r\n <span id=\"commissionBase\">\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"commission-row\">\r\n <span>Tax on fee (23%)<\/span>\r\n <span id=\"commissionVAT\">\u20ac0.00<\/span>\r\n <\/div>\r\n <div class=\"commission-row\" style=\"border-top: 1px solid #ddd; margin-top: 4px; padding-top: 4px;\">\r\n <span><strong>Total deducted<\/strong><\/span>\r\n <span id=\"commissionTotal\"><strong>\u20ac0.00<\/strong><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const COMMISSION_RATE = 0.15;\r\n const COMMISSION_VAT_RATE = 0.23;\r\n \r\n let selectedVAT = 23;\r\n \r\n const priceInput = document.getElementById('priceInput');\r\n const emptyState = document.getElementById('emptyState');\r\n const results = document.getElementById('results');\r\n const detailsToggle = document.getElementById('detailsToggle');\r\n const vatButtons = document.querySelectorAll('.vat-btn');\r\n\r\n \/\/ Format currency\r\n function formatEuro(amount) {\r\n return new Intl.NumberFormat('pt-PT', {\r\n style: 'currency',\r\n currency: 'EUR'\r\n }).format(amount);\r\n }\r\n\r\n \/\/ VAT toggle\r\n vatButtons.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n vatButtons.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n selectedVAT = parseInt(btn.dataset.vat);\r\n calculate();\r\n });\r\n });\r\n\r\n \/\/ Details toggle\r\n detailsToggle.addEventListener('click', () => {\r\n detailsToggle.classList.toggle('open');\r\n });\r\n\r\n \/\/ Calculate on input\r\n priceInput.addEventListener('input', calculate);\r\n\r\n function calculate() {\r\n const price = parseFloat(priceInput.value);\r\n\r\n \/\/ Show empty state if no valid input\r\n if (!price || price <= 0) {\r\n emptyState.style.display = 'block';\r\n results.classList.remove('show');\r\n return;\r\n }\r\n\r\n \/\/ Hide empty state, show results\r\n emptyState.style.display = 'none';\r\n results.classList.add('show');\r\n\r\n \/\/ Calculate earnings\r\n const commissionBase = price * COMMISSION_RATE;\r\n const commissionVAT = commissionBase * COMMISSION_VAT_RATE;\r\n const commissionTotal = commissionBase + commissionVAT;\r\n const earnings = price - commissionTotal;\r\n\r\n \/\/ Update hero section\r\n document.getElementById('heroAmount').textContent = formatEuro(earnings);\r\n document.getElementById('heroFrom').textContent = formatEuro(price);\r\n\r\n \/\/ Update breakdown\r\n document.getElementById('breakdownPrice').textContent = formatEuro(price);\r\n document.getElementById('breakdownCommission').textContent = '-' + formatEuro(commissionBase);\r\n document.getElementById('breakdownTax').textContent = '-' + formatEuro(commissionVAT);\r\n document.getElementById('breakdownTotal').textContent = formatEuro(earnings);\r\n\r\n \/\/ Update commission details\r\n document.getElementById('commissionBase').textContent = formatEuro(commissionBase);\r\n document.getElementById('commissionVAT').textContent = formatEuro(commissionVAT);\r\n document.getElementById('commissionTotal').textContent = formatEuro(commissionTotal);\r\n\r\n \/\/ Update billing based on VAT regime\r\n const billingDetails = document.getElementById('billingDetails');\r\n \r\n if (selectedVAT === 23) {\r\n billingDetails.innerHTML = `\r\n <div class=\"billing-row\">\r\n <span>\u2192 Hands On invoices client<\/span>\r\n <span>${formatEuro(price)}<\/span>\r\n <\/div>\r\n <div class=\"billing-row\">\r\n <span>\u2192 You invoice Hands On<\/span>\r\n <span>${formatEuro(earnings)}<\/span>\r\n <\/div>\r\n `;\r\n } else {\r\n billingDetails.innerHTML = `\r\n <div class=\"billing-row\">\r\n <span>\u2192 You invoice client (0% VAT)<\/span>\r\n <span>${formatEuro(price)}<\/span>\r\n <\/div>\r\n <div class=\"billing-row\">\r\n <span>\u2192 Hands On invoices you<\/span>\r\n <span>${formatEuro(commissionTotal)}<\/span>\r\n <\/div>\r\n `;\r\n }\r\n }\r\n\r\n \/\/ Initial state\r\n calculate();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Workshop Earnings Calculator \ud83d\udcb0 Workshop Calculator See what you\u2019ll earn in seconds Workshop Price \u20ac How You Invoice 0% VAT 23% VAT \ud83c\udfa8 Enter your workshop price above to see what you\u2019ll earn You\u2019ll Earn \u20ac0.00 from \u20ac0.00 workshop \ud83d\udccb How Billing Works See breakdown \u25bc Workshop Price \u20ac0.00 Hands On Commission (15%) -\u20ac0.00 Service […]<\/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-11742","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/11742","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=11742"}],"version-history":[{"count":31,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/11742\/revisions"}],"predecessor-version":[{"id":23138,"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/pages\/11742\/revisions\/23138"}],"wp:attachment":[{"href":"https:\/\/handson.pt\/pt\/wp-json\/wp\/v2\/media?parent=11742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}