<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Pink Sticker Calendar 🌷</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, #ffeef8 0%, #ffc2e0 100%);
font-family:'Inter',sans-serif;
color:#4d0033;
}
#card{
background:rgba(255,255,255,.45);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.6);
border-radius:20px;
padding:2rem 2.5rem 1.8rem;
box-shadow:0 8px 32px rgba(255,130,190,.35);
text-align:center;
user-select:none;
}
#top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:.8rem;
}
button{
background:rgba(255,255,255,.7);
border:0;
border-radius:50%;
width:34px;
height:34px;
cursor:pointer;
font-size:18px;
color:#d63384;
box-shadow:0 2px 6px rgba(0,0,0,.08);
transition:all .25s ease;
}
button:hover{
background:#fff;
box-shadow:0 4px 14px rgba(255,130,190,.5);
transform:translateY(-2px) scale(1.08);
}
#month{
font-weight:600;
font-size:1.35rem;
letter-spacing:.5px;
}
pre{
margin:.6rem 0 0;
font-family:'Courier New',monospace;
font-size:1.15rem;
line-height:1.35;
color:#4d0033;
}
.day{
display:inline-block;
width:2ch;
text-align:right;
cursor:pointer;
transition:transform .15s;
}
.day:hover{
transform:scale(1.3);
filter:drop-shadow(0 0 3px #ffafd1);
}
#picker{
position:fixed;
background:#fff;
border:1px solid #ffc2e0;
border-radius:12px;
padding:.5rem .7rem;
box-shadow:0 4px 20px rgba(0,0,0,.15);
display:none;
gap:.4rem;
flex-wrap:wrap;
width:11rem;
}
#picker span{
cursor:pointer;
font-size:1.4rem;
padding:.2rem;
border-radius:6px;
transition:background .2s;
}
#picker span:hover{background:#ffeef8;}
</style>
</head>
<body>
<div id="card">
<div id="top">
<button onclick="move(-1)" aria-label="last month">‹</button>
<span id="month"></span>
<button onclick="move(1)" aria-label="next month">›</button>
</div>
<pre id="grid"></pre>
</div>
<div id="picker"></div>
<script>
const EMOJI=['🌸','💖','🎀','🧁','✨','🌙','🦋','🍓','💅','🎂','☁️','🌷','🍰','💗'];
let date=new Date();
let stickers=JSON.parse(localStorage.getItem('stickers')||'{}');
let pickTarget='';
function buildPicker(){
const p=document.getElementById('picker');
EMOJI.forEach(e=>{
const s=document.createElement('span');
s.textContent=e;
s.onclick=()=>assignSticker(e);
p.appendChild(s);
});
const clr=document.createElement('span');
clr.textContent='❌'; clr.title='remove';
clr.onclick=()=>assignSticker('');
p.appendChild(clr);
}
function assignSticker(em){
if(pickTarget){
if(em){ stickers[pickTarget]=em; }
else { delete stickers[pickTarget]; }
localStorage.setItem('stickers',JSON.stringify(stickers));
}
document.getElementById('picker').style.display='none';
render();
}
function render(){
const y=date.getFullYear(), m=date.getMonth();
document.getElementById('month').textContent=
date.toLocaleString('en-US',{month:'long', year:'numeric'})+' 🌷';
const first=new Date(y,m,1).getDay();
const days=new Date(y,m+1,0).getDate();
let out=['Mo Tu We Th Fr Sa Su'];
let row='', pad=(first+6)%7;
for(let i=0;i<pad;i++) row+=' ';
for(let d=1;d<=days;d++){
const key=`${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
const sticker=stickers[key]||'';
const dayLabel=String(d).padStart(2,' ');
row+=`<span class="day" data-day="${key}">${dayLabel}${sticker?sticker:' '}</span>`+' ';
if((pad+d)%7===0){ out.push(row.trimEnd()); row=''; }
}
if(row) out.push(row.trimEnd());
document.getElementById('grid').innerHTML=out.join('\n');
document.querySelectorAll('.day').forEach(el=>{
el.onclick=e=>{
pickTarget=el.dataset.day;
const p=document.getElementById('picker');
p.style.display='flex';
p.style.left=e.pageX+'px';
p.style.top=e.pageY+'px';
};
});
}
function move(n){ date.setMonth(date.getMonth()+n); render(); }
document.addEventListener('keydown',e=>{
if(e.key==='ArrowLeft') move(-1);
if(e.key==='ArrowRight') move(1);
});
document.addEventListener('click',e=>{
if(!e.target.closest('#picker')&&!e.target.closest('.day'))
document.getElementById('picker').style.display='none';
});
buildPicker();
render();
</script>
</body>
</html>