From 43dbb143339bee272baa1f6d3c3e75c382dd7e32 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Fri, 15 May 2026 09:32:59 -0300
Subject: [PATCH] refactor: replace inline trial modal with
 components/trial_modal.js

---
 index.html | 534 ++---------------------------------------------------
 1 file changed, 12 insertions(+), 522 deletions(-)

diff --git a/index.html b/index.html
index 54c3a5b..5eb3636 100644
--- a/index.html
+++ b/index.html
@@ -226,8 +226,7 @@
             .nav-chat-toggle,
             .nav-chat-send,
             .chat-panel-close,
-            .chat-input-send,
-            #modal-close {
+            .chat-input-send {
                 background: none;
                 border: none;
                 cursor: pointer;
@@ -253,8 +252,7 @@
             }
 
             .nav-chat-input,
-            .chat-input-field,
-            .modal-field {
+            .chat-input-field {
                 border: none;
                 outline: none;
                 background: transparent;
@@ -270,8 +268,7 @@
             }
 
             .nav-chat-input::placeholder,
-            .chat-input-field::placeholder,
-            .modal-field::placeholder {
+            .chat-input-field::placeholder {
                 color: var(--grey);
             }
 
@@ -283,9 +280,7 @@
             .pricing-cta,
             .custom-link,
             .story-link,
-            .story-cta,
-            .open-modal,
-            .modal-submit {
+            .story-cta {
                 transition:
                     transform 0.2s,
                     opacity 0.2s,
@@ -484,8 +479,7 @@
 
             .hero h1,
             .section-title,
-            .story-title,
-            .modal-title {
+            .story-title {
                 font-family: Georgia, "Times New Roman", serif;
                 color: var(--white);
                 font-weight: 700;
@@ -531,7 +525,6 @@
 
             .btn-primary,
             .pricing-cta,
-            .modal-submit,
             .story-cta {
                 display: inline-flex;
                 align-items: center;
@@ -558,7 +551,6 @@
 
             .btn-primary:hover,
             .pricing-cta:hover,
-            .modal-submit:hover,
             .story-cta:hover {
                 transform: translateY(-1px);
                 opacity: 0.92;
@@ -644,9 +636,7 @@
             .news-teaser,
             .custom-body,
             .pricing-quote,
-            .footer-brand p,
-            .modal-subtitle,
-            #modal-confirm .confirm-sub {
+            .footer-brand p {
                 color: var(--silver);
             }
 
@@ -1190,8 +1180,6 @@
             .pricing-period,
             .pricing-setup,
             .footer-col h4,
-            .field-label,
-            .modal-title + p,
             .footer-bottom span,
             .footer-legal a {
                 font-size: 0.68rem;
@@ -1201,8 +1189,7 @@
 
             .news-area,
             .pricing-setup,
-            .footer-col h4,
-            .field-label {
+            .footer-col h4 {
                 color: var(--gold);
                 font-weight: 700;
             }
@@ -1571,197 +1558,6 @@
                 flex-wrap: wrap;
             }
 
-            #modal-overlay {
-                position: fixed;
-                inset: 0;
-                z-index: 9000;
-                display: none;
-                align-items: center;
-                justify-content: center;
-                padding: 20px;
-                background: rgba(62, 39, 35, 0.84);
-                backdrop-filter: blur(14px);
-                -webkit-backdrop-filter: blur(14px);
-            }
-
-            #modal-box {
-                position: relative;
-                width: 100%;
-                max-width: 640px;
-                padding: 44px;
-                background: var(--card);
-                border-radius: 28px;
-                border: 1px solid rgba(230, 81, 0, 0.24);
-                box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
-            }
-
-            #modal-close {
-                position: absolute;
-                top: 18px;
-                right: 18px;
-                width: 40px;
-                height: 40px;
-                border-radius: 50%;
-                color: var(--grey);
-                background: rgba(93, 64, 55, 0.05);
-                font-size: 1.2rem;
-            }
-
-            .modal-title {
-                font-size: 2.2rem;
-                margin-bottom: 10px;
-            }
-
-            .modal-subtitle {
-                font-size: 0.9rem;
-                margin-bottom: 26px;
-            }
-
-            .modal-field-group {
-                margin-bottom: 18px;
-            }
-
-            .modal-grid {
-                display: grid;
-                grid-template-columns: repeat(2, minmax(0, 1fr));
-                gap: 0 16px;
-            }
-
-            .modal-grid .modal-field-group.full {
-                grid-column: 1 / -1;
-            }
-
-            .field-label {
-                display: block;
-                margin-bottom: 8px;
-            }
-
-            .modal-field {
-                width: 100%;
-                padding: 14px 16px;
-                border-radius: 16px;
-                background: rgba(93, 64, 55, 0.05);
-                border: 1px solid rgba(230, 81, 0, 0.18);
-                color: var(--white);
-            }
-
-            .modal-field option,
-            .modal-field optgroup {
-                background: var(--card);
-                color: var(--white);
-            }
-
-            .modal-field:focus {
-                border-color: var(--gold);
-                box-shadow: 0 0 0 3px var(--gold-glow);
-            }
-
-            .modal-select {
-                position: relative;
-            }
-
-            .modal-select-button {
-                position: relative;
-                text-align: left;
-                cursor: pointer;
-                padding-right: 42px;
-            }
-
-            .modal-select-button::after {
-                content: "";
-                position: absolute;
-                right: 16px;
-                top: 50%;
-                width: 14px;
-                height: 8px;
-                transform: translateY(-50%);
-                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23E65100' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-                background-repeat: no-repeat;
-                background-position: center;
-                pointer-events: none;
-            }
-
-            .modal-select-button.is-placeholder {
-                color: var(--grey);
-            }
-
-            .modal-select-menu {
-                position: absolute;
-                top: calc(100% + 8px);
-                left: 0;
-                right: 0;
-                z-index: 3;
-                max-height: 220px;
-                padding: 8px;
-                background: var(--card);
-                border: 1px solid rgba(230, 81, 0, 0.18);
-                border-radius: 16px;
-                box-shadow: 0 18px 40px rgba(62, 39, 35, 0.16);
-                overflow-y: auto;
-                display: none;
-            }
-
-            .modal-select.open .modal-select-menu {
-                display: block;
-            }
-
-            .modal-select-option {
-                width: 100%;
-                padding: 10px 12px;
-                border: none;
-                border-radius: 12px;
-                background: transparent;
-                color: var(--white);
-                text-align: left;
-                font: inherit;
-                cursor: pointer;
-                transition:
-                    background 0.2s,
-                    color 0.2s;
-            }
-
-            .modal-select-option:hover,
-            .modal-select-option:focus-visible,
-            .modal-select-option.is-selected {
-                outline: none;
-                background: rgba(230, 81, 0, 0.1);
-                color: var(--gold);
-            }
-
-            select.modal-field {
-                appearance: none;
-                -webkit-appearance: none;
-                color: var(--white);
-                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23E65100' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-                background-repeat: no-repeat;
-                background-position: right 16px center;
-                padding-right: 42px;
-                color-scheme: light;
-            }
-
-            .modal-submit {
-                width: 100%;
-                margin-top: 8px;
-            }
-
-            .modal-submit:disabled {
-                opacity: 0.56;
-                cursor: not-allowed;
-            }
-
-            #modal-confirm {
-                display: none;
-                text-align: center;
-                padding-top: 8px;
-            }
-
-            #modal-confirm .confirm-title {
-                font-family: Georgia, "Times New Roman", serif;
-                font-size: 1.6rem;
-                color: var(--gold-hi);
-                margin-bottom: 12px;
-            }
-
             @media (max-width: 1180px) {
                 .story-grid {
                     grid-template-columns: 1fr;
@@ -1834,14 +1630,6 @@
                 .proof-grid {
                     grid-template-columns: 1fr;
                 }
-
-                #modal-box {
-                    padding: 34px 22px;
-                }
-
-                .modal-grid {
-                    grid-template-columns: 1fr;
-                }
             }
 
             @media (max-width: 480px) {
@@ -1849,7 +1637,6 @@
                     font-size: 2.8rem;
                 }
 
-                .modal-title,
                 .section-title,
                 .story-title {
                     font-size: 2rem;
@@ -2646,137 +2433,6 @@
             </div>
         </footer>
 
-        <div id="modal-overlay">
-            <div id="modal-box">
-                <button id="modal-close" aria-label="Close">&times;</button>
-                <h2 class="modal-title">Start Your 4 weeks Free Trial</h2>
-                <p class="modal-subtitle">
-                    Test drive your backoffice in a 4 weeks free trial.
-                </p>
-                <form id="trial-form" novalidate>
-                    <div class="modal-grid">
-                        <div class="modal-field-group full">
-                            <label class="field-label" for="modal-email"
-                                >Work Email</label
-                            >
-                            <input
-                                type="email"
-                                id="modal-email"
-                                name="email"
-                                class="modal-field"
-                                placeholder="you@company.com"
-                                required
-                            />
-                        </div>
-                        <div
-                            class="modal-field-group full modal-select"
-                            id="modal-location-select"
-                        >
-                            <label class="field-label" for="modal-location"
-                                >Server Location</label
-                            >
-                            <button
-                                type="button"
-                                class="modal-field modal-select-button is-placeholder"
-                                id="modal-location-button"
-                                aria-haspopup="listbox"
-                                aria-expanded="false"
-                                aria-controls="modal-location-menu"
-                            >
-                                Select your server location
-                            </button>
-                            <div
-                                class="modal-select-menu"
-                                id="modal-location-menu"
-                                role="listbox"
-                                aria-labelledby="modal-location-button"
-                            >
-                                <button
-                                    type="button"
-                                    class="modal-select-option"
-                                    data-value="boston"
-                                >
-                                    🇺🇸 Boston
-                                </button>
-                                <button
-                                    type="button"
-                                    class="modal-select-option"
-                                    data-value="manchester"
-                                >
-                                    🇬🇧 Manchester
-                                </button>
-                                <button
-                                    type="button"
-                                    class="modal-select-option"
-                                    data-value="mumbai"
-                                >
-                                    🇮🇳 Mumbai
-                                </button>
-                                <button
-                                    type="button"
-                                    class="modal-select-option"
-                                    data-value="saopaulo"
-                                >
-                                    🇧🇷 S&atilde;o Paulo
-                                </button>
-                                <button
-                                    type="button"
-                                    class="modal-select-option"
-                                    data-value="meppel"
-                                >
-                                    🇳🇱 Meppel
-                                </button>
-                                <button
-                                    type="button"
-                                    class="modal-select-option"
-                                    data-value="sydney"
-                                >
-                                    🇦🇺 Sydney
-                                </button>
-                            </div>
-                            <input
-                                type="hidden"
-                                id="modal-location"
-                                name="location"
-                                value=""
-                                required
-                            />
-                        </div>
-                    </div>
-                    <input
-                        type="hidden"
-                        id="modal-product"
-                        name="product"
-                        value="odoo_19"
-                    />
-                    <input
-                        type="hidden"
-                        id="modal-plan"
-                        name="plan"
-                        value="General Free Trial"
-                    />
-                    <input type="hidden" name="utm_source" value="homepage" />
-                    <input type="hidden" name="utm_medium" value="direct" />
-                    <input type="hidden" name="utm_campaign" value="none" />
-                    <input type="hidden" name="utm_term" value="" />
-                    <input type="hidden" name="utm_content" value="" />
-                    <button type="submit" class="modal-submit">
-                        Start Free Trial
-                    </button>
-                </form>
-                <div id="modal-confirm">
-                    <p class="confirm-title">Thank you! &#127881;</p>
-                    <p class="confirm-sub">
-                        We&rsquo;ve received your request and a specialist will
-                        be in touch within one business day.
-                    </p>
-                    <button id="modal-confirm-close" class="modal-submit">
-                        Close
-                    </button>
-                </div>
-            </div>
-        </div>
-
         <script>
             (function () {
                 var params = new URLSearchParams(window.location.search);
@@ -3549,178 +3205,12 @@
         </script>
 
         <script>
-            (function () {
-                var WEBHOOK =
-                    "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a";
-                var overlay = document.getElementById("modal-overlay");
-                var modalBox = document.getElementById("modal-box");
-                var form = document.getElementById("trial-form");
-                var confirmDiv = document.getElementById("modal-confirm");
-                var planField = document.getElementById("modal-plan");
-                var productField = document.getElementById("modal-product");
-                var locationField = document.getElementById("modal-location");
-                var locationSelect = document.getElementById(
-                    "modal-location-select",
-                );
-                var locationButton = document.getElementById(
-                    "modal-location-button",
-                );
-                var locationMenu = document.getElementById(
-                    "modal-location-menu",
-                );
-                var defaultProduct = productField.value;
-
-                function syncLocationLabel() {
-                    var value = locationField.value || "";
-                    var selected = null;
-
-                    locationMenu
-                        .querySelectorAll(".modal-select-option")
-                        .forEach(function (option) {
-                            var isSelected =
-                                option.getAttribute("data-value") === value;
-                            if (isSelected) selected = option;
-                            option.classList.toggle("is-selected", isSelected);
-                            option.setAttribute(
-                                "aria-selected",
-                                isSelected ? "true" : "false",
-                            );
-                        });
-
-                    locationButton.textContent = selected
-                        ? selected.textContent.trim()
-                        : "Select your server location";
-                    locationButton.classList.toggle(
-                        "is-placeholder",
-                        !selected,
-                    );
-                    locationButton.setAttribute(
-                        "aria-expanded",
-                        locationSelect.classList.contains("open")
-                            ? "true"
-                            : "false",
-                    );
-                }
-
-                function closeLocationMenu() {
-                    locationSelect.classList.remove("open");
-                    syncLocationLabel();
-                }
-
-                function openLocationMenu() {
-                    locationSelect.classList.add("open");
-                    syncLocationLabel();
-                }
-
-                function openModal(plan) {
-                    planField.value = plan || "General Free Trial";
-                    productField.value = plan || defaultProduct;
-                    if (window._mbsTracking)
-                        window._mbsTracking.applyToFields(form);
-                    closeLocationMenu();
-                    overlay.style.display = "flex";
-                    document.body.style.overflow = "hidden";
-                }
-
-                function closeModal() {
-                    overlay.style.display = "none";
-                    document.body.style.overflow = "";
-                    setTimeout(function () {
-                        form.style.display = "";
-                        confirmDiv.style.display = "none";
-                        form.reset();
-                        planField.value = "General Free Trial";
-                        productField.value = defaultProduct;
-                        locationField.value = "";
-                        if (window._mbsTracking)
-                            window._mbsTracking.applyToFields(form);
-                        closeLocationMenu();
-                        var btn = form.querySelector(".modal-submit");
-                        btn.textContent = "Start Free Trial";
-                        btn.disabled = false;
-                    }, 200);
-                }
-
-                locationButton.addEventListener("click", function () {
-                    if (locationSelect.classList.contains("open"))
-                        closeLocationMenu();
-                    else openLocationMenu();
-                });
-
-                locationMenu
-                    .querySelectorAll(".modal-select-option")
-                    .forEach(function (option) {
-                        option.addEventListener("click", function () {
-                            locationField.value =
-                                option.getAttribute("data-value") || "";
-                            closeLocationMenu();
-                        });
-                    });
-
-                document
-                    .getElementById("open-modal")
-                    .addEventListener("click", function (e) {
-                        e.preventDefault();
-                        openModal();
-                    });
-
-                document.querySelectorAll(".open-modal").forEach(function (el) {
-                    el.addEventListener("click", function (e) {
-                        e.preventDefault();
-                        openModal(el.getAttribute("data-plan"));
-                    });
-                });
-
-                document
-                    .getElementById("modal-close")
-                    .addEventListener("click", closeModal);
-                overlay.addEventListener("click", function (e) {
-                    if (e.target === overlay || !modalBox.contains(e.target))
-                        closeModal();
-                });
-                document.addEventListener("keydown", function (e) {
-                    if (e.key === "Escape") {
-                        if (locationSelect.classList.contains("open")) {
-                            closeLocationMenu();
-                            return;
-                        }
-                        closeModal();
-                    }
-                });
-                document.addEventListener("click", function (e) {
-                    if (!locationSelect.contains(e.target)) closeLocationMenu();
-                });
-                document
-                    .getElementById("modal-confirm-close")
-                    .addEventListener("click", closeModal);
-
-                form.addEventListener("submit", function (e) {
-                    e.preventDefault();
-                    var btn = form.querySelector(".modal-submit");
-                    var formData = new FormData(form);
-                    if (window._mbsTracking)
-                        formData =
-                            window._mbsTracking.appendToFormData(formData);
-                    if (window._mbsTracking) {
-                        window._mbsTracking.trackEvent("Trial", {
-                            source: planField.value || "General Free Trial",
-                        });
-                    }
-                    btn.textContent = "Sending...";
-                    btn.disabled = true;
-
-                    fetch(WEBHOOK, { method: "POST", body: formData })
-                        .then(function () {
-                            form.style.display = "none";
-                            confirmDiv.style.display = "block";
-                        })
-                        .catch(function () {
-                            form.style.display = "none";
-                            confirmDiv.style.display = "block";
-                        });
-                });
-            })();
+            window.TrialModalConfig = {
+                webhook:
+                    "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a",
+            };
         </script>
+        <script src="components/trial_modal.js"></script>
 
         <script src="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js"></script>
     </body>