<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>آزمایشگاه هرچی دلت می‌خواد 🌸</title>

<style>
*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Tahoma,Arial,sans-serif;
    background:linear-gradient(135deg,#ffddea,#fffdfd,#f8c8dc);
    color:#7b4560;
}

header{
    text-align:center;
    padding:25px 15px;
    background:#fffdfd;
    border-bottom:3px solid #f3bfd3;
}

h1{
    margin:0;
    color:#b05b7e;
}

.subtitle{
    margin-top:8px;
}

.container{
    max-width:1000px;
    margin:auto;
    padding:20px;
}

.categories{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:15px;
}

.category{
    border:0;
    background:#ffeaf2;
    color:#914e6d;
    padding:10px 15px;
    border-radius:20px;
    cursor:pointer;
}

.category.active{
    background:#efa9c6;
    color:white;
}

.items{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
    gap:10px;
}

.item{
    border:2px solid #f3cada;
    background:#fffafd;
    border-radius:20px;
    padding:12px;
    cursor:pointer;
    color:#75445a;
}

.item:hover{
    transform:scale(1.04);
    background:#fff0f6;
}

.emoji{
    display:block;
    font-size:35px;
    margin-bottom:5px;
}

.lab{
    margin-top:20px;
    min-height:330px;
    background:#fffdfd;
    border:3px dashed #efb4cc;
    border-radius:30px;
    position:relative;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}

.bowl{
    width:220px;
    height:110px;
    background:#e990b2;
    border:6px solid #b95f82;
    border-radius:0 0 120px 120px;
    position:relative;
}

.bowl:before{
    content:"";
    position:absolute;
    width:235px;
    height:38px;
    left:-14px;
    top:-20px;
    background:#fff2f7;
    border:6px solid #b95f82;
    border-radius:50%;
}

.floating{
    position:absolute;
    font-size:35px;
    animation:pop .3s;
}

@keyframes pop{
    from{
        transform:scale(0);
    }
    to{
        transform:scale(1);
    }
}

.result{
    margin-top:15px;
    padding:18px;
    background:#fff1f7;
    border:2px solid #f1c5d7;
    border-radius:22px;
}

input{
    width:70%;
    padding:12px;
    border:2px solid #efc2d5;
    border-radius:15px;
}

button{
    font-family:inherit;
}

.action{
    margin-top:12px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.action button{
    padding:11px 16px;
    border:0;
    border-radius:15px;
    cursor:pointer;
}

.save{
    background:#d77fa5;
    color:white;
}

.random{
    background:#f6c1d6;
    color:#75445a;
}

.clear{
    background:#fff;
    border:1px solid #e8bfd0 !important;
}

.saved{
    margin-top:20px;
}

.cards{
    display:flex;
    gap:10px;
    overflow:auto;
    padding:10px 0;
}

.card{
    min-width:130px;
    background:#fff;
    border:2px solid #f1cada;
    border-radius:18px;
    padding:12px;
    text-align:center;
}

.warning{
    margin-top:15px;
    font-size:12px;
    background:#fff8fb;
    padding:10px;
    border-radius:15px;
}
</style>
</head>

<body>

<header>

<h1>🌸 آزمایشگاه هرچی دلت می‌خواد 🧪</h1>

<div class="subtitle">
🍓 هرچی دوست داری ترکیب کن و اسم خودت رو روش بذار! 💖
</div>

</header>

<div class="container">

<div class="categories" id="categories"></div>

<div class="items" id="items"></div>

<div class="lab" id="lab">

<div class="bowl"></div>

<div id="floating"></div>

</div>

<div class="result">

<strong>✨ ترکیب فعلی:</strong>

<div id="chosen">
هنوز چیزی انتخاب نکردی 🥹🌸
</div>

<br>

<input
id="foodName"
placeholder="مثلاً: دم‌پختک صابونی صورتی 😂"
>

<div class="action">

<button class="save" onclick="saveMix()">
💾 ذخیره
</button>

<button class="random" onclick="randomMix()">
🎲 ترکیب شانسی
</button>

<button class="clear" onclick="clearMix()">
🧹 پاک کردن
</button>

</div>

</div>

<div class="saved">

<h3>📖 ترکیب‌های من</h3>

<div class="cards" id="savedCards"></div>

</div>

<div class="warning">
⚠️ این سایت یک بازی و شبیه‌ساز است. صابون، کرم و مواد غیرخوراکی را در دنیای واقعی با غذا مخلوط یا مصرف نکن.
</div>

</div>

<script>

const materials = {

"🍓 خوراکی‌ها":[
["🍚","دم‌پختک"],
["🥣","خمیر"],
["🍓","توت‌فرنگی"],
["🍕","پیتزا"],
["🍰","کیک"],
["🍜","نودل"],
["🍦","بستنی"],
["🍫","شکلات"],
["🍎","سیب"],
["🥛","شیر"]
],

"🧼 بهداشتی":[
["🧼","صابون"],
["🧴","کرم"],
["🫧","فوم"],
["🧽","اسفنج"]
],

"🧸 چیزها":[
["🧸","عروسک"],
["🎀","روبان"],
["🧢","کلاه"],
["🧱","آجر"],
["🪄","چوب جادویی"]
],

"🧪 عجیب و فانتزی":[
["🌈","رنگین‌کمان"],
["⭐","ستاره"],
["☁️","ابر"],
["💎","کریستال"],
["🔥","آتش جادویی"]
]

};

let currentCategory="🍓 خوراکی‌ها";

let selected=[];

function showCategories(){

    const box=document.getElementById("categories");

    box.innerHTML="";

    Object.keys(materials).forEach(category=>{

        const button=document.createElement("button");

        button.className="category";

        if(category===currentCategory){
            button.classList.add("active");
        }

        button.textContent=category;

        button.onclick=()=>{

            currentCategory=category;

            showCategories();
            showItems();

        };

        box.appendChild(button);

    });

}

function showItems(){

    const box=document.getElementById("items");

    box.innerHTML="";

    materials[currentCategory].forEach(item=>{

        const button=document.createElement("button");

        button.className="item";

        button.innerHTML=
        `<span class="emoji">${item[0]}</span>${item[1]}`;

        button.onclick=()=>addItem(item[0],item[1]);

        box.appendChild(button);

    });

}

function addItem(emoji,name){

    selected.push({
        emoji:emoji,
        name:name
    });

    const floating=document.getElementById("floating");

    const item=document.createElement("span");

    item.className="floating";

    item.textContent=emoji;

    item.style.left=(20+Math.random()*60)+"%";
    item.style.top=(15+Math.random()*65)+"%";

    floating.appendChild(item);

    update();

}

function update(){

    const box=document.getElementById("chosen");

    if(selected.length===0){

        box.textContent="هنوز چیزی انتخاب نکردی 🥹🌸";

        return;

    }

    box.textContent=
    selected.map(x=>x.emoji+" "+x.name).join(" + ");

}

function clearMix(){

    selected=[];

    document.getElementById("floating").innerHTML="";

    update();

}

function randomMix(){

    clearMix();

    const all=Object.values(materials).flat();

    const amount=3+Math.floor(Math.random()*3);

    for(let i=0;i<amount;i++){

        const item=
        all[Math.floor(Math.random()*all.length)];

        addItem(item[0],item[1]);

    }

}

function saveMix(){

    if(selected.length===0){

        alert("اول چندتا چیز داخل دیگ بریز! 🥹🍲");

        return;

    }

    let name=
    document.getElementById("foodName").value.trim();

    if(name===""){
        name="ترکیب عجیب من 🤪";
    }

    let saved=
    JSON.parse(localStorage.getItem("myMixes")||"[]");

    saved.unshift({

        name:name,

        emojis:selected.map(x=>x.emoji).join(""),

        items:selected.map(x=>x.name)

    });

    localStorage.setItem(
        "myMixes",
        JSON.stringify(saved.slice(0,20))
    );

    document.getElementById("foodName").value="";

    showSaved();

}

function showSaved(){

    const box=document.getElementById("savedCards");

    const saved=
    JSON.parse(localStorage.getItem("myMixes")||"[]");

    box.innerHTML="";

    if(saved.length===0){

        box.innerHTML=
        `<div class="card">هنوز ترکیبی ذخیره نکردی 🥹</div>`;

        return;

    }

    saved.forEach(mix=>{

        const card=document.createElement("div");

        card.className="card";

        card.innerHTML=`
        <div style="font-size:30px">${mix.emojis}</div>
        <strong>${mix.name}</strong>
        `;

        box.appendChild(card);

    });

}

showCategories();
showItems();
showSaved();

</script>

</body>
</html>