Logis Mâ-yaa

Brazzaville Brazzaville CG

function getDeviceId() {
const key = "kt_device_id";
let value = localStorage.getItem(key);

if (!value) {
value = "device_" + Math.random().toString(36).slice(2) + Date.now();
localStorage.setItem(key, value);
}

return value;
}

const DEVICE_ID = getDeviceId();
const API_GET =
API_BASE +
"?slug=" + encodeURIComponent(SLUG) +
"&device_id=" + encodeURIComponent(DEVICE_ID);

function renderStars(rating) {
const rounded = Math.round(Number(rating || 0));
return "★".repeat(rounded) + "☆".repeat(5 - rounded);
}

function buildModule(data) {
return `
<div style="
margin:24px 0 28px 0;
padding:16px;
background:#ffffff;
border-radius:18px;
box-shadow:0 8px 24px rgba(16,40,65,0.08);
border:1px solid rgba(0,0,0,0.04);
font-family:Arial, sans-serif;
">
<div style="
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
">
<div style="
display:flex;
align-items:center;
gap:14px;
flex:1;
min-width:180px;
">
<div style="display:flex;flex-direction:column;gap:2px;">
<span style="font-size:11px;color:#7a7a7a;">Vues</span>
<span style="font-size:18px;font-weight:700;color:#102841;">
👁️ ${Number(data.views ?? 0)}
</span>
</div>

<div style="display:flex;flex-direction:column;gap:2px;">
<span style="font-size:11px;color:#7a7a7a;">Note</span>
<span style="font-size:16px;font-weight:700;color:#ff8b00;line-height:1;">
${renderStars(data.averageRating)}
</span>
<span style="font-size:12px;color:#4b4b4b;">
${Number(data.averageRating || 0).toFixed(1)} / 5${data.reviewCount ? " • " + data.reviewCount : ""}
</span>
</div>
</div>

<button id="kt-toggle-btn" type="button"
style="
padding:10px 16px;
background:#102841;
color:#ffffff;
border:none;
border-radius:999px;
font-size:13px;
font-weight:700;
white-space:nowrap;
">
Noter
</button>
</div>

<select id="kt-rating"
style="
width:100%;
padding:11px 12px;
border:1px solid #dedede;
border-radius:10px;
box-sizing:border-box;
font-size:16px;
outline:none;
background:#fff;
color:#222;
-webkit-appearance:none;
">
<option value="">Choisissez une note</option>
<option value="5">★★★★★ - 5</option>
<option value="4">★★★★☆ - 4</option>
<option value="3">★★★☆☆ - 3</option>
<option value="2">★★☆☆☆ - 2</option>
<option value="1">★☆☆☆☆ - 1</option>
</select>

<button id="kt-send-btn" type="button"
style="
width:100%;
padding:12px;
background:#102841;
color:#ffffff;
border:none;
border-radius:10px;
font-size:14px;
font-weight:700;
">
Envoyer ma note
</button>

<div id="kt-message" style="font-size:13px;"></div>
</div>
</div>
</div>
`;
}

async function loadData() {
const root = document.getElementById("kt-app");

root.innerHTML = `
<div style="
margin:24px 0 28px 0;
padding:16px;
background:#ffffff;
border-radius:18px;
box-shadow:0 8px 24px rgba(16,40,65,0.08);
border:1px solid rgba(0,0,0,0.04);
font-family:Arial, sans-serif;
">
Chargement...
</div>
`;

try {
const res = await fetch(API_GET);
const data = await res.json();

if (!res.ok || !data.ok) {
throw new Error(data.error || "Erreur de chargement");
}

root.innerHTML = buildModule(data);

const toggleBtn = document.getElementById("kt-toggle-btn");
const form = document.getElementById("kt-rating-form");
const nameInput = document.getElementById("kt-name");
const sendBtn = document.getElementById("kt-send-btn");

toggleBtn.addEventListener("click", function () {
const isHidden = form.style.display === "none";
form.style.display = isHidden ? "block" : "none";

if (isHidden) {
setTimeout(() => {
if (nameInput) {
nameInput.focus();
nameInput.click();
}
}, 250);
}
});

sendBtn.addEventListener("click", sendRating);
} catch (err) {
root.innerHTML = `
<div style="
margin:24px 0 28px 0;
padding:16px;
background:#fff5f5;
border:1px solid #f3c6c6;
border-radius:18px;
color:#b3261e;
font-family:Arial, sans-serif;
">
${err.message || "Erreur de chargement"}
</div>
`;
}
}

async function sendRating() {
const nameEl = document.getElementById("kt-name");
const ratingEl = document.getElementById("kt-rating");
const messageEl = document.getElementById("kt-message");
const sendBtn = document.getElementById("kt-send-btn");

if (!ratingEl || !messageEl || !sendBtn) return;

const name = nameEl ? nameEl.value.trim() : "";
const rating = ratingEl.value;

if (!rating) {
messageEl.innerHTML = "<span style='color:#c62828;'>Veuillez choisir une note.</span>";
return;
}

sendBtn.disabled = true;
sendBtn.style.opacity = "0.7";
messageEl.innerHTML = "<span style='color:#666;'>Envoi en cours...</span>";

try {
const res = await fetch(API_BASE, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
slug: SLUG,
name: name || "Anonyme",
rating: Number(rating)
})
});

const data = await res.json();

if (!res.ok || !data.ok) {
throw new Error(data.error || "Erreur lors de l'envoi.");
}

messageEl.innerHTML = "<span style='color:#2e7d32;'>Merci pour votre note.</span>";

setTimeout(() => {
loadData();
}, 700);
} catch (err) {
messageEl.innerHTML = "<span style='color:#c62828;'>" + (err.message || "Erreur lors de l'envoi.") + "</span>";
sendBtn.disabled = false;
sendBtn.style.opacity = "1";
}
}

loadData();
</script>

🏠✨ Résidence Logis mâ‑yaa
📍 Quartier Moungali – Brazzaville

🌿 La Résidence Logis mâ-yaa propose des appartements locatifs saisonniers, pensés pour offrir confort, autonomie et tranquillité au cœur du quartier Moungali.

🏡 Idéale pour les séjours de courte durée, les déplacements professionnels ou les visiteurs de passage, la résidence met à disposition des appartements bien aménagés, permettant de se sentir comme chez soi tout en profitant d’un cadre calme et sécurisé.

✨ Logis mâ-yaa allie praticité, intimité et accessibilité, pour un séjour agréable à Brazzaville, que ce soit pour quelques jours ou plusieurs semaines.