Oliver/my-biz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

utm

Browse Source
This commit is contained in:
oliver
2026-04-25 06:29:26 -03:00
parent a1890ffb4c
commit 1ff384a952
1 changed files with 186 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+186 -19
View File
@@ -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")