Skip to content

Slot 102 Ultimate – Hội Anh Em Sợ Vợ Giữ bí mật, sợ có tổ chức, vợ không biết đâu 😎 #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
phonglam-cyber wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Slot 102 Ultimate – Hội Anh Em Sợ Vợ Giữ bí mật, sợ có tổ chức, vợ không biết đâu 😎 #68

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8ff2acc
Slot 102 Ultimate: thêm tên, tuyên thệ, giữ bí mật với vợ 🤫
phonglam-cyber Oct 14, 2025
e77ff4a
Merge branch 'openchaosweb:main' into main
phonglam-cyber Oct 14, 2025
53da76b
Slot 102 bản nịnh vợ: Yêu vợ có kỷ luật, tránh chiến tranh thế giới
phonglam-cyber Oct 14, 2025
6a2e808
Merge branch 'openchaosweb:main' into main
phonglam-cyber Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 196 additions & 37 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7112,72 +7112,231 @@ <h3 class="ocw99-card-title">Tạo mã QR từ liên kết</h3>
setupChambers();
})();</script></div>

<!-- SLOT 102: Hội Anh Em Sợ Vợ -->
<div id="slot-069">
<!-- SLOT 102: Hội Những Người Yêu Vợ Có Kỷ Luật 💐 -->
<div id="slot-102">
<style>
#slot-069 {
#slot-102 {
font-family: "Comic Sans MS", cursive;
text-align: center;
background: radial-gradient(circle at top, #fff3e0, #ffe0b2);
background: radial-gradient(circle at top, #fff3e0, #fff0f5);
border-radius: 20px;
padding: 20px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
animation: slot69-shake 3s infinite;
box-shadow: 0 0 15px rgba(255,182,193,0.3);
animation: slot102-bounce 3s infinite;
margin: 10px;
position: relative;
}
#slot-069 h2 {
color: #e65100;
#slot-102 h2 {
color: #d81b60;
font-size: 1.8em;
margin-bottom: 0.5em;
}
#slot-069 p {
color: #4e342e;
#slot-102 p {
color: #6a1b9a;
font-size: 1.1em;
margin: 0.5em 0;
}
#slot-069 button {
background: #ff9800;
#slot-102 input {
border: 2px solid #f8bbd0;
border-radius: 10px;
padding: 8px;
width: 80%;
font-size: 1em;
margin-top: 10px;
outline: none;
}
#slot-102 button {
background: #ec407a;
border: none;
color: white;
padding: 10px 20px;
border-radius: 12px;
cursor: pointer;
transition: 0.3s;
font-size: 1em;
margin-top: 10px;
}
#slot-069 button:hover {
background: #f57c00;
#slot-102 button:hover {
background: #d81b60;
transform: scale(1.05);
}
@keyframes slot69-shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
50% { transform: rotate(-1deg); }
75% { transform: rotate(1deg); }
#slot102-board {
margin-top: 20px;
text-align: left;
max-height: 350px;
overflow-y: auto;
background: #fce4ec;
padding: 10px;
border-radius: 12px;
border: 2px solid #f8bbd0;
position: relative;
}
.slot102-entry {
background: #f8bbd0;
margin: 5px 0;
padding: 10px 12px;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
animation: slot102-fadein 0.6s ease-in-out;
position: relative;
}
.slot102-entry strong { color: #c2185b; }
.slot102-reactions {
margin-top: 5px;
display: flex;
gap: 10px;
align-items: center;
}
.slot102-reactions button {
border: none;
background: none;
cursor: pointer;
font-size: 1.3em;
transition: 0.2s;
}
.slot102-reactions button:hover { transform: scale(1.3); }
.slot102-count {
font-size: 0.9em;
color: #6a1b9a;
}
.floating {
position: absolute;
animation: float-random 1.3s ease-out forwards;
opacity: 0.9;
pointer-events: none;
}
@keyframes float-random {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
50% { transform: translate(var(--x), -40px) scale(1.2); opacity: 0.9; }
100% { transform: translate(calc(var(--x)*1.5), -80px) scale(0.8); opacity: 0; }
}
@keyframes slot102-bounce {
0%,100%{transform:translateY(0);}
50%{transform:translateY(-2px);}
}
@keyframes slot102-fadein {
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}
#slot102-message {
margin-top: 15px;
color: #ad1457;
font-weight: bold;
font-size: 1.1em;
animation: slot102-fadein 0.8s ease-in-out;
}
</style>

<h2>👨‍🦱 Hội Anh Em Sợ Vợ 😱</h2>
<p>“Thà để vợ càm ràm còn hơn bị vợ im lặng...”</p>
<p><em>- Triết lý sống của hội -</em></p>
<button id="slot69-btn">Tuyên thệ gia nhập</button>
<p id="slot69-status"></p>
<h2>💞 Hội Những Người Yêu Vợ Có Kỷ Luật 💐</h2>
<p>“Không sợ vợ, chỉ là tôn trọng ý kiến cấp trên.”</p>
<p><em>- Tuyên ngôn sống còn của anh em văn minh -</em></p>

<input id="slot102-name" type="text" placeholder="Tên bạn là gì? 👇">
<br>
<input id="slot102-input" type="text" placeholder="Điều khiến bạn tự hào về vợ là gì? 💬">
<br>
<button id="slot102-btn">Tuyên thệ yêu vợ</button>

<p id="slot102-message"></p>

<div id="slot102-board">
<h4>🌸 Lời ngợi ca của các anh hùng gia đình:</h4>
<div id="slot102-list"></div>
</div>

<script>
const btn69 = document.getElementById("slot69-btn");
const status69 = document.getElementById("slot69-status");

btn69.addEventListener("click", () => {
const quotes = [
"Em ơi anh sai rồi 😭",
"Lỗi tại anh tất cả 😔",
"Anh chỉ nghe lời em thôi 🫡",
"Hội trưởng phê duyệt: Sợ vợ là đỉnh cao!",
"Đàn ông không sợ vợ thì sợ ai? 😎"
];
const btn102 = document.getElementById("slot102-btn");
const name102 = document.getElementById("slot102-name");
const input102 = document.getElementById("slot102-input");
const list102 = document.getElementById("slot102-list");
const msg102 = document.getElementById("slot102-message");

const quotes = [
"Phía sau người đàn ông thành công là người vợ dậy sớm nấu ăn 💪",
"Anh không sợ vợ, anh sợ mất vợ ❤️",
"Mỗi khi cô ấy nói 'Tùy anh', là anh biết anh sắp sai 😭",
"Yêu vợ là kỹ năng sinh tồn cấp cao 😎",
"Cô ấy không giận đâu... chỉ đang thu thập bằng chứng thôi 📸",
"Hạnh phúc là khi vợ không đọc commit log 💍"
];

window.addEventListener("load", () => {
const saved = JSON.parse(localStorage.getItem("slot102Entries") || "[]");
saved.forEach((entry) => addEntryToBoard(entry));
});

btn102.addEventListener("click", () => {
const name = name102.value.trim();
const text = input102.value.trim();
if (!name || !text)
return alert("Anh điền đầy đủ đi, vợ mà thấy là mệt à nha 😆");
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
status69.textContent = randomQuote;
status69.style.fontWeight = "bold";
const entry = { name, text, quote: randomQuote, likes: 0, haha: 0, hearts: 0 };
addEntryToBoard(entry);
const saved = JSON.parse(localStorage.getItem("slot102Entries") || "[]");
saved.push(entry);
localStorage.setItem("slot102Entries", JSON.stringify(saved));
msg102.textContent = `💐 ${name} vừa tuyên thệ: “Yêu vợ đến cuối commit!”
Chúng tôi hứa giữ bí mật và sẽ nịnh thay nếu cần 🤫`;
name102.value = "";
input102.value = "";
});

function addEntryToBoard(entry) {
const div = document.createElement("div");
div.className = "slot102-entry";
div.innerHTML = `
<strong>💬 ${entry.name} chia sẻ:</strong><br>
“${entry.text}”<br>
👉 ${entry.quote}
<div class="slot102-reactions">
<button class="like">👍</button>
<span class="slot102-count">${entry.likes}</span>
<button class="haha">😆</button>
<span class="slot102-count">${entry.haha}</span>
<button class="heart">❤️</button>
<span class="slot102-count">${entry.hearts}</span>
</div>
`;
const [likeBtn, likeCount, hahaBtn, hahaCount, heartBtn, heartCount] =
div.querySelectorAll("button, .slot102-count");
likeBtn.addEventListener("click", () =>
updateReaction(entry, "likes", likeCount, "👍")
);
hahaBtn.addEventListener("click", () =>
updateReaction(entry, "haha", hahaCount, "😆")
);
heartBtn.addEventListener("click", () =>
updateReaction(entry, "hearts", heartCount, "❤️")
);
list102.appendChild(div);
}

function updateReaction(entry, type, countEl, emoji) {
const saved = JSON.parse(localStorage.getItem("slot102Entries") || "[]");
const index = saved.findIndex(
(e) => e.text === entry.text && e.name === entry.name
);
if (index >= 0) {
saved[index][type]++;
localStorage.setItem("slot102Entries", JSON.stringify(saved));
countEl.textContent = saved[index][type];
}
createFloatingEmoji(countEl, emoji);
}

function createFloatingEmoji(target, emoji) {
const rect = target.getBoundingClientRect();
const el = document.createElement("div");
el.className = "floating";
el.textContent = emoji;
el.style.left = rect.left + window.scrollX + "px";
el.style.top = rect.top + window.scrollY - 10 + "px";
const randX = (Math.random() - 0.5) * 100;
el.style.setProperty("--x", randX + "px");
document.body.appendChild(el);
setTimeout(() => el.remove(), 1300);
}
</script>
</div>
<!-- END SLOT 102 -->
Expand Down