.sedi-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
padding: 1rem 0;
}
.sede-card {
border-radius: 12px;
border: 1px solid #e0e0e0;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
}
.sede-map {
height: 130px;
width: 100%;
cursor: pointer;
}
.sede-email a {
color: #008a2e;
text-decoration: none;
}
.sede-email a:hover {
text-decoration: underline;
}
.sede-label {
color: #777;
}
.map-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
}
.map-modal-overlay.active {
display: flex;
}
.map-modal-content {
background: #fff;
width: 90%;
height: 80%;
max-width: 800px;
border-radius: 8px;
position: relative;
display: flex;
flex-direction: column;
}
.map-modal-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
font-weight: bold;
color: #333;
cursor: pointer;
z-index: 10000;
background: #fff;
border: none;
border-radius: 4px;
padding: 4px 8px;
line-height: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#modal-map-container {
flex: 1;
width: 100%;
border-radius: 8px;
}
.sede-body {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sede-country {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #999;
margin-bottom: 2px;
}
.sede-name {
font-size: 14px;
font-weight: 600;
color: #111;
line-height: 1.3;
margin-bottom: 4px;
}
.sede-detail {
font-size: 12px;
color: #555;
line-height: 1.5;
margin: 0;
}
.sede-phone,
.sede-email {
font-size: 12px;
margin-top: 4px;
word-break: break-all;
line-height: 1.6;
}
.sede-phone {
color: #555;
}
.sede-phone-line,
.sede-email-line {
display: block;
}
@media (max-width: 640px) {
.sedi-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
}
.sedi-grid::-webkit-scrollbar {
display: none;
}
.sede-card {
min-width: 85%;
scroll-snap-align: center;
flex-shrink: 0;
}
}
var sedi = [
{
id: "it",
country: "Italia",
name: "KOIMPEX S.r.l.",
address: "Via Nazionale 47/1
34151 Opicina (Trieste)",
phone: "+39 040 2157111, +39 3355746234 - Goran",
email: "info@koimpex.it, goran@koimpex.it - Direktor",
lat: 45.6869,
lng: 13.7883,
zoom: 11,
},
{
id: "si",
country: "Slovenia",
name: "KOIMPEX International",
address: "Partizanska 85
6210 Sežana",
phone: "+39 040 2157111, +386 31284957 - Radenko",
email: " info@koimpex.it, radenko@koimpex.it",
lat: 45.7022,
lng: 13.8483,
zoom: 11,
},
{
id: "hr",
country: "Croazia",
name: "KOIMPEX S.r.l.",
address: "Agente commerciale
Ing. Ivica Juric",
phone: "+385-(0)99 7886678",
email: "koimpexhr@gmail.com",
lat: 45.815,
lng: 15.9819,
zoom: 10,
},
{
id: "mk",
country: "Macedonia",
name: "TEHNODATA D.O.O.",
address: "Ul. Narodni Heroi br.18/1-32
1000 Skopje",
phone: "Darko Trajkovski +389 70 349 568, +389 76 744 800",
email: "tehno_data@yahoo.com, tehnodata@koimpex.it, te_service@yahoo.com",
lat: 42.006,
lng: 21.4073,
zoom: 10,
},
{
id: "rs",
country: "Srbija",
name: "KOIMPEX S.r.l.",
address: "Agente commerciale
Goran Živadinović",
phone: "+381 63364880",
email: "koimpex.srb@gmail.com",
lat: 44.7866,
lng: 20.4489,
zoom: 10,
},
{
id: "ba",
country: "Bosna in Hercegovina",
name: "KOIMPEX S.r.l.",
address: "Agente commerciale",
phone: "+39 040 2157111",
email: "info@koimpex.it, goran@koimpex.it - Direktor",
lat: 43.8563,
lng: 18.4131,
zoom: 10,
},
];
// Splits a comma-separated string into individual entries, each
// optionally followed by " - Label". Returns an array of
// { value, label } objects.
function parseEntries(str) {
if (!str) return [];
return str.split(",").map(function (item) {
item = item.trim();
var value = item;
var label = "";
if (item.includes(" - ")) {
var parts = item.split(" - ");
value = parts[0].trim();
label = parts.slice(1).join(" - ").trim();
}
return { value: value, label: label };
});
}
var grid = document.getElementById("koimpex-sedi");
sedi.forEach(function (s) {
var card = document.createElement("div");
card.className = "sede-card";
var mapDiv = document.createElement("div");
mapDiv.className = "sede-map";
mapDiv.id = "map-" + s.id;
mapDiv.onclick = function () {
openMapModal(s);
};
var body = document.createElement("div");
body.className = "sede-body";
// --- PHONE: one number per line, label stays plain text ---
var phoneHtml = "";
if (s.phone) {
var phoneEntries = parseEntries(s.phone);
var phoneLines = phoneEntries.map(function (e) {
var line = e.value;
if (e.label) {
line += '
- ' + e.label + "";
}
return '
' + line + "";
});
phoneHtml =
'
' + phoneLines.join("") + "
";
}
// --- EMAIL: one address per line, label NOT hyperlinked/green ---
var emailHtml = "";
if (s.email) {
var emailEntries = parseEntries(s.email);
var emailLines = emailEntries.map(function (e) {
var line =
'
' + e.value + "";
if (e.label) {
line += '
- ' + e.label + "";
}
return '
' + line + "";
});
emailHtml =
'
' + emailLines.join("") + "
";
}
body.innerHTML =
'
' +
s.country +
'
' +
s.name +
'
' +
s.address +
"
" +
phoneHtml +
emailHtml;
card.appendChild(mapDiv);
card.appendChild(body);
grid.appendChild(card);
});
setTimeout(function () {
sedi.forEach(function (s) {
var map = L.map("map-" + s.id, {
center: [s.lat, s.lng],
zoom: s.zoom,
zoomControl: false,
scrollWheelZoom: false,
dragging: false,
touchZoom: false,
doubleClickZoom: false,
attributionControl: false,
});
L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
).addTo(map);
L.circleMarker([s.lat, s.lng], {
radius: 7,
fillColor: "#008a2e",
color: "#fff",
weight: 2,
fillOpacity: 1,
}).addTo(map);
});
}, 100);
var modalMap = null;
var modalMarker = null;
function openMapModal(sede) {
document.getElementById("map-modal").classList.add("active");
if (!modalMap) {
modalMap = L.map("modal-map-container").setView(
[sede.lat, sede.lng],
sede.zoom,
);
L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
).addTo(modalMap);
modalMarker = L.circleMarker([sede.lat, sede.lng], {
radius: 7,
fillColor: "#008a2e",
color: "#fff",
weight: 2,
fillOpacity: 1,
}).addTo(modalMap);
} else {
modalMap.setView([sede.lat, sede.lng], sede.zoom);
modalMarker.setLatLng([sede.lat, sede.lng]);
}
setTimeout(function () {
modalMap.invalidateSize();
}, 10);
}
function closeMapModal() {
document.getElementById("map-modal").classList.remove("active");
}