tryNow

2025-10-04 18:37:18 -03:00
parent 8849e5035c
commit 12b888a678
1 changed files with 157 additions and 0 deletions
--- a/public/tryNow.js
+++ b/public/tryNow.js
@@ -0,0 +1,157 @@
+const WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f460d0ffc8e3";
+
+function createModal() {
+    const modal = document.createElement("div");
+    modal.id = "buyNowModal";
+    modal.style.position = "fixed";
+    modal.style.top = "0";
+    modal.style.left = "0";
+    modal.style.width = "100%";
+    modal.style.height = "100%";
+    modal.style.backgroundColor = "rgba(0,0,0,0.6)";
+    modal.style.display = "none";
+    modal.style.justifyContent = "center";
+    modal.style.alignItems = "center";
+    modal.style.zIndex = "1000";
+
+    modal.innerHTML = `
+        <div style="
+            background: #ffffff; 
+            padding: 40px 30px; 
+            border-radius: 16px; 
+            max-width: 400px; 
+            width: 90%; 
+            position: relative; 
+            font-family: 'Arial', sans-serif; 
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        ">
+            <span id="closeModal" style="
+                position: absolute; 
+                top: 15px; 
+                right: 20px; 
+                cursor: pointer; 
+                font-weight: bold; 
+                font-size: 24px;
+                color: #555;
+            ">&times;</span>
+            
+            <h2 style="margin-bottom: 20px; font-size: 24px; color: #333;">Order Details</h2>
+
+            <form id="buyForm" style="display: flex; flex-direction: column; gap: 15px;">
+                <input type="email" name="email" placeholder="Email" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+
+                <select name="location" id="locationSelect" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+                    <option value="">Select Location</option>
+                    <option value="Boston">Boston</option>
+                    <option value="Manchester">Manchester</option>
+                </select>
+
+                <select name="product" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+                    <option value="Odoo" selected>ODOO</option>
+                    <option value="N8N">N8N</option>
+                </select>
+
+                <button id="submitBuy" type="submit" style="
+                    padding: 14px; 
+                    background: #007BFF; 
+                    color: #fff; 
+                    border: none; 
+                    border-radius: 8px; 
+                    cursor: pointer; 
+                    font-size: 18px; 
+                    font-weight: bold;
+                    transition: background 0.3s;
+                ">Send Order</button>
+            </form>
+
+            <div id="confirmation" style="
+                display: none;
+                margin-top: 20px;
+                padding: 20px;
+                background-color: #e6ffed;
+                color: #056608;
+                border-radius: 12px;
+                text-align: center;
+                font-weight: 500;
+            ">
+                <p>Thank you for your submission! 🎉</p>
+                <button id="closeConfirmation" style="
+                    margin-top: 10px;
+                    padding: 10px 20px;
+                    background: #007BFF;
+                    color: #fff;
+                    border: none;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    font-size: 16px;
+                    transition: background 0.3s;
+                ">Close</button>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(modal);
+
+    document.getElementById("closeModal").onclick = () => { modal.style.display = "none"; };
+    document.getElementById("closeConfirmation").onclick = () => { 
+        document.getElementById("confirmation").style.display = "none"; 
+        modal.style.display = "none"; 
+    };
+    modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
+
+    return modal;
+}
+
+function openModal() {
+    document.getElementById("buyNowModal").style.display = "flex";
+}
+
+function handleFormSubmit() {
+    const form = document.getElementById("buyForm");
+    const confirmation = document.getElementById("confirmation");
+
+    form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const data = {};
+        new FormData(form).forEach((value, key) => (data[key] = value));
+
+        try {
+            const res = await fetch(WEBHOOK_URL, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(data)
+            });
+
+            if (res.ok) {
+                form.style.display = "none";
+                confirmation.style.display = "block";
+                form.reset();
+            } else {
+                alert("Failed to submit form.");
+            }
+        } catch (err) {
+            console.error(err);
+            alert("Error submitting form.");
+        }
+    });
+}
+
+function attachButtons() {
+    const buttons = Array.from(document.querySelectorAll("button, a"));
+    buttons.forEach(btn => {
+        if (btn.textContent.trim() === "Try Now") {
+            btn.addEventListener("click", (e) => {
+                e.preventDefault();
+                openModal();
+            });
+        }
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    createModal();
+    handleFormSubmit();
+    attachButtons();
+});
+