Brazzil Lounge Bar
26 Rue MALELA BOMBE Brazzaville
<div id="kt-app"></div>
<script>
const SLUG = "brazzil-lounge-bar";
const API_BASE = "https://xikbejbptuxmeainfyac.supabase.co/functions/v1/kt-stats";
const API_GET = API_BASE + "?slug=" + encodeURIComponent(SLUG);
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:10px;
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="width:1px;height:28px;background:#e8e8e8;"></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>
<div id="kt-rating-form" style="
display:none;
margin-top:12px;
padding-top:12px;
border-top:1px solid #f0f0f0;
">
<div style="display:grid;grid-template-columns:1fr;gap:8px;">
<input
id="kt-name"
type="text"
inputmode="text"
autocomplete="name"
autocapitalize="words"
placeholder="Votre nom"
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;
"
/>
<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:12px 0;
padding:12px;
background:#ffffff;
border:1px solid #ececec;
border-radius:16px;
box-shadow:0 4px 14px rgba(0,0,0,0.05);
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:12px 0;
padding:12px;
background:#fff5f5;
border:1px solid #f3c6c6;
border-radius:16px;
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>
🍸🎶 Brazzil Lounge Bar
📍 Brazzaville
✨ Brazzil Lounge Bar est un lieu convivial dédié à la détente et aux moments de partage, dans une ambiance lounge et chaleureuse.
🍹 On y vient pour savourer des boissons variées, profiter d’une ambiance musicale agréable et passer un bon moment entre amis, après le travail ou en soirée.
🎶 Le cadre est pensé pour se poser, discuter et se relaxer, dans un esprit simple et accessible.
