<!DOCTYPE html>
<html>
<head>
<title>Drink Up Baddies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { background: #ffe4e1; font-family: 'Helvetica Neue', sans-serif; margin: 0; display: flex; justify-content: center; padding: 20px; }
h1 { color: #ff1493; text-align: center; font-size: 2rem; text-shadow: 2px 2px white; margin-bottom: 30px; width: 100%; }
.app-container { max-width: 500px; width: 100%; text-align: center; }
.friends-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.friend-space { background: rgba(255, 255, 255, 0.8); padding: 15px 5px; border-radius: 20px; text-align: center; box-shadow: 0 8px 20px rgba(255, 182, 193, 0.3); }
.name { font-weight: bold; color: #333; margin: 8px 0 2px 0; font-size: 0.9rem; }
.count { font-size: 0.8rem; font-weight: bold; color: #666; margin: 0; }
.streak-badge { font-size: 0.7rem; background: white; border-radius: 12px; padding: 2px 5px; display: inline-block; }
.bottle-container { position: relative; width: 60px; height: 120px; margin: 25px auto 10px; cursor: pointer; }
.bottle { width: 100%; height: 100%; border-radius: 12px 12px 20px 20px; position: relative; overflow: hidden; background: white; z-index: 2; }
.v-bottle { border: 4px solid #ff69b4 !important; }
.m-bottle { border: 4px solid #9370db !important; }
.a-bottle { border: 4px solid #20b2aa !important; }
.cap { width: 30px; height: 10px; margin: -135px auto 125px; border-radius: 4px 4px 0 0; position: relative; z-index: 1; }
.v-cap { background: #ff69b4; }
.m-cap { background: #9370db; }
.a-cap { background: #20b2aa; }
.water { position: absolute; bottom: 0; width: 100%; height: 0%; background: #4fc3f7; transition: height 0.6s ease; }
.wave { position: absolute; top: -10px; width: 200%; height: 10px; background: url('https://svgshare.com/i/ydP.svg'); background-size: 50% 100%; animation: waveAnim 2s infinite linear; }
@keyframes waveAnim { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reset-btn { margin-top: 40px; background: white; border: 1px solid #ffb6c1; color: #ff69b4; padding: 10px; border-radius: 15px; width: 100%; cursor: pointer; }
</style>
</head>
<body>
<div class="app-container">
<h1>Drink Up Baddies 💧</h1>
<div class="friends-grid">
<div class="friend-space" onclick="drink(0)">
<div class="streak-badge">🔥 <span id="streak0">0</span></div>
<div class="bottle-container">
<div class="bottle v-bottle"><div class="water" id="water0"><div class="wave"></div></div></div>
<div class="cap v-cap"></div>
</div>
<p class="name">Vanessa</p>
<p class="count"><span id="count0">0</span>/8</p>
</div>
<div class="friend-space" onclick="drink(1)">
<div class="streak-badge">🔥 <span id="streak1">0</span></div>
<div class="bottle-container">
<div class="bottle m-bottle"><div class="water" id="water1"><div class="wave"></div></div></div>
<div class="cap m-cap"></div>
</div>
<p class="name">Melissa</p>
<p class="count"><span id="count1">0</span>/8</p>
</div>
<div class="friend-space" onclick="drink(2)">
<div class="streak-badge">🔥 <span id="streak2">0</span></div>
<div class="bottle-container">
<div class="bottle a-bottle"><div class="water" id="water2"><div class="wave"></div></div></div>
<div class="cap a-cap"></div>
</div>
<p class="name">Alexis</p>
<p class="count"><span id="count2">0</span>/8</p>
</div>
</div>
<button class="reset-btn" onclick="resetAll()">New Day Reset</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/confetti.browser.min.js"></script>
<script>
let friendsData = JSON.parse(localStorage.getItem('baddieHydration')) || [
{ count: 0, streak: 0 }, { count: 0, streak: 0 }, { count: 0, streak: 0 }
];
function updateUI() {
friendsData.forEach((data, i) => {
const percent = (data.count / 8) * 100;
document.getElementById(`water${i}`).style.height = `${Math.min(percent, 100)}%`;
document.getElementById(`count${i}`).innerText = data.count;
document.getElementById(`streak${i}`).innerText = data.streak;
});
localStorage.setItem('baddieHydration', JSON.stringify(friendsData));
}
function drink(index) {
if (friendsData[index].count < 8) {
friendsData[index].count++;
if (friendsData[index].count === 8) {
friendsData[index].streak++;
confetti({ particleCount: 100, colors: ['#ff69b4', '#9370db', '#20b2aa'] });
}
updateUI();
}
}
function resetAll() {
if(confirm("New day? Resetting water counts!")) {
friendsData.forEach(f => f.count = 0);
updateUI();
}
}
updateUI();
</script>
</body>
</html>