From 79f2a71d493b01ab50475be64b3d2912cc4d2941 Mon Sep 17 00:00:00 2001 From: ODOO4projects Web Developer Date: Thu, 8 Oct 2026 17:38:54 +0000 Subject: [PATCH] feat: rename Rates & SUITES to Order & Pricing, add Custom Quote modal - Change section header to 'Order & Pricing' - Add 'Get Custom Quote' button that opens modal with name, email, requirements fields - Requirements field has placeholder: 'Describe your requirements (how many users? onsite, cloud? how many workers?)' - Submit to https://n8n.odoo4projects.com/webhook/ODOO4projects/crm with UTM tracking - Empire 'Get Custom Quote' button now opens modal instead of Order Widget - Add CSS for modal overlay, form styling, and mobile responsiveness --- index.html | 46 +++++++++++++++++++++++++++++++--- script.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 111 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 5568659..acc4163 100644 --- a/index.html +++ b/index.html @@ -181,7 +181,16 @@ .oca-icon-link:hover{color:var(--brass-bright);transform:scale(1.2)} .oca-empty{text-align:center;padding:2rem;color:rgba(255,255,255,.4);font-style:italic;display:none} .oca-loading{text-align:center;padding:2rem;color:rgba(255,255,255,.4);font-size:.88rem} - @media(max-width:600px){.oca-table td,.oca-table th{padding:.5rem .65rem;font-size:.8rem}} + /* Custom Quote Modal */ + .ow-sub{font-size:.95rem;color:rgba(255,255,255,.7);margin-bottom:1.5rem} + .ow-panel input[type="text"],.ow-panel textarea{width:100%;padding:.8rem 1rem;border-radius:var(--radius);border:1px solid var(--line-brass);background:rgba(255,255,255,.05);color:#fff;font-family:Inter,sans-serif;font-size:.88rem;outline:none;transition:border-color .2s,background .2s;box-sizing:border-box} + .ow-panel input[type="text"]:focus,.ow-panel textarea:focus{border-color:var(--brass);background:rgba(255,255,255,.08)} + .ow-panel textarea{min-height:100px;resize:vertical} + .ow-panel textarea::placeholder{color:rgba(255,255,255,.3)} + .ow-panel input[type="email"]::placeholder{color:rgba(255,255,255,.3)} + .ow-close{background:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer;line-height:1;position:absolute;right:1rem;top:1rem;transition:color .2s} + .ow-close:hover{color:var(--brass)} + @media(max-width:600px){.oca-table td,.oca-table th{padding:.5rem .65rem;font-size:.8rem}.ow-panel{left:5%;right:5%}.ow-close{top:.5rem;right:.5rem;font-size:1.6rem}} @@ -344,7 +353,7 @@
-

Rates & Suites

+

Order & Pricing

Your Plan, Your Timing: Upgrade Anytime

@@ -426,7 +435,7 @@

"My house! My Horse! My Server!"

- Get Custom Quote + Get Custom Quote
  • Our service on your server
  • All modules & features
    • @@ -475,6 +484,37 @@
+ +
+ +
+
diff --git a/script.js b/script.js index 8230588..e4856a5 100644 --- a/script.js +++ b/script.js @@ -796,10 +796,74 @@ var si = 0, document.querySelectorAll('.btn-empire').forEach(function(btn) { btn.addEventListener('click', function() { - var plan = this.getAttribute('data-plan'); - var price = parseFloat(this.getAttribute('data-price')); - var isEmpire = this.getAttribute('data-is-empire') === 'true'; - if (plan) openOrderWidget(plan, price, isEmpire); + openCustomQuoteModal(); + }); + }); + + /* ---- Custom Quote Modal ---- */ + function openCustomQuoteModal() { + document.getElementById('customQuotePanel').style.display = 'block'; + document.getElementById('customQuoteModal').style.display = 'flex'; + } + function closeCustomQuoteModal() { + document.getElementById('customQuoteModal').style.display = 'none'; + document.getElementById('customQuoteForm').reset(); + document.getElementById('customQuoteSuccess').style.display = 'none'; + } + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape') { + var modal = document.getElementById('customQuoteModal'); + if (modal && modal.style.display === 'flex') { + closeCustomQuoteModal(); + } + } + }); + + /* Submit custom quote form */ + var customQuoteForm = document.getElementById('customQuoteForm'); + if (customQuoteForm) { + customQuoteForm.addEventListener('submit', function(e) { + e.preventDefault(); + var name = document.getElementById('cqName').value.trim(); + var email = document.getElementById('cqEmail').value.trim(); + var requirements = document.getElementById('cqRequirements').value.trim(); + + if (!name || !email || !requirements) return; + + var submitBtn = customQuoteForm.querySelector('.btn-lg'); + submitBtn.textContent = 'Sending...'; + submitBtn.disabled = true; + + fetch('https://n8n.odoo4projects.com/webhook/ODOO4projects/crm', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(UTM.inject({ + name: name, + email: email, + requirements: requirements + })) + }).then(function() { + customQuoteForm.style.display = 'none'; + document.getElementById('customQuoteSuccess').style.display = 'block'; + submitBtn.textContent = 'Submit Request'; + submitBtn.disabled = false; + }).catch(function() { + submitBtn.textContent = 'Submit Request'; + submitBtn.disabled = false; + var errorMsg = document.createElement('div'); + errorMsg.style.marginTop = '1rem'; + errorMsg.style.color = '#dc3545'; + errorMsg.textContent = 'Something went wrong. Please try again.'; + customQuoteForm.appendChild(errorMsg); + setTimeout(function() { if(errorMsg.parentNode) errorMsg.parentNode.removeChild(errorMsg); }, 3000); + }); + }); + } + + /* Attach "Get Custom Quote" click handlers to Empire buttons */ + document.querySelectorAll('.btn-empire').forEach(function(btn) { + btn.addEventListener('click', function() { + openCustomQuoteModal(); }); }); })();