From 1ff384a952a1fd6da90ed4ce896f8c77f4926b84 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Sat, 25 Apr 2026 06:29:26 -0300
Subject: [PATCH] utm

---
 index.html | 205 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 186 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 4266356..455786b 100644
--- a/index.html
+++ b/index.html
@@ -1634,18 +1634,96 @@
                 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 {
@@ -2642,30 +2720,60 @@
                                 required
                             />
                         </div>
-                        <div class="modal-field-group">
+                        <div class="modal-field-group modal-select" id="modal-location-select">
                             <label class="field-label" for="modal-location"
                                 >Server Location</label
                             >
-                            <select
+                            <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, US">
+                                    🇺🇸 Boston
+                                </button>
+                                <button
+                                    type="button"
+                                    class="modal-select-option"
+                                    data-value="Manchester, UK"
+                                >
+                                    🇬🇧 Manchester
+                                </button>
+                                <button type="button" class="modal-select-option" data-value="Mumbai, IN">
+                                    🇮🇳 Mumbai
+                                </button>
+                                <button
+                                    type="button"
+                                    class="modal-select-option"
+                                    data-value="Sao Paulo, BR"
+                                >
+                                    🇧🇷 S&atilde;o Paulo
+                                </button>
+                                <button type="button" class="modal-select-option" data-value="Meppel, NL">
+                                    🇳🇱 Meppel
+                                </button>
+                                <button type="button" class="modal-select-option" data-value="Sydney, AU">
+                                    🇦🇺 Sydney
+                                </button>
+                            </div>
+                            <input
+                                type="hidden"
                                 id="modal-location"
                                 name="server_location"
-                                class="modal-field"
+                                value=""
                                 required
-                            >
-                                <option value="">
-                                    Select your server location
-                                </option>
-                                <option value="Boston, US">🇺🇸 Boston</option>
-                                <option value="Manchester, UK">
-                                    🇬🇧 Manchester
-                                </option>
-                                <option value="Mumbai, IN">🇮🇳 Mumbai</option>
-                                <option value="Sao Paulo, BR">
-                                    🇧🇷 S&atilde;o Paulo
-                                </option>
-                                <option value="Meppel, NL">🇳🇱 Meppel</option>
-                                <option value="Sydney, AU">🇦🇺 Sydney</option>
-                            </select>
+                            />
                         </div>
                     </div>
                     <input
@@ -3430,13 +3538,49 @@
                 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";
                 }
@@ -3450,14 +3594,28 @@
                         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) {
@@ -3480,7 +3638,16 @@
                         closeModal();
                 });
                 document.addEventListener("keydown", function (e) {
-                    if (e.key === "Escape") closeModal();
+                    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")