<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fashion Dream Studio</title>

<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#ffd6ec;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

#game{
width:1000px;
height:650px;
background:white;
border-radius:20px;
display:flex;
overflow:hidden;
box-shadow:0 0 20px rgba(0,0,0,.3);
}

#menu{
width:230px;
background:#ff69b4;
padding:15px;
display:flex;
flex-direction:column;
gap:10px;
}

#menu button{
padding:12px;
border:none;
border-radius:12px;
background:white;
cursor:pointer;
font-size:17px;
font-weight:bold;
}

#menu button:hover{
background:#ffe3f4;
}

#scene{
flex:1;
background:#fff8fc;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}

#girl{
position:relative;
width:220px;
height:520px;
}

.head{
width:120px;
height:120px;
background:#ffd8c2;
border-radius:50%;
position:absolute;
left:50px;
top:0;
}

.hair{
width:140px;
height:70px;
background:#5c3a21;
border-radius:70px 70px 20px 20px;
position:absolute;
left:40px;
top:-5px;
}

.eye{
width:12px;
height:12px;
background:black;
border-radius:50%;
position:absolute;
top:55px;
}

.eye.left{
left:35px;
}

.eye.right{
right:35px;
}

.mouth{
width:40px;
height:8px;
background:#ff5a8d;
border-radius:20px;
position:absolute;
left:40px;
top:85px;
}

.body{
width:100px;
height:170px;
background:#8fd3ff;
position:absolute;
top:120px;
left:60px;
border-radius:20px;
}

.arm{
width:24px;
height:130px;
background:#ffd8c2;
position:absolute;
top:130px;
}

.arm.left{
left:35px;
}

.arm.right{
right:35px;
}

.leg{
width:28px;
height:150px;
background:#ffd8c2;
position:absolute;
top:290px;
}

.leg.left{
left:72px;
}

.leg.right{
left:120px;
}

#tools{
position:absolute;
right:20px;
top:20px;
display:flex;
flex-direction:column;
gap:10px;
}

.color{
width:45px;
height:45px;
border-radius:50%;
cursor:pointer;
border:3px solid white;
}

.room{
position:absolute;
width:100%;
height:100%;
background:#fff8fc;
z-index:-1;
}
</style>
</head>

<body>

<div id="game">

<div id="menu">

<button onclick="showDress()">👗 Vestuario</button>

<button onclick="showHair()">💇 Pelo</button>

<button onclick="showMakeup()">💄 Maquillaje</button>

<button onclick="showRoom()">🏠 Decorar</button>

</div>

<div id="scene">

<div class="room"></div>

<div id="girl">

<div class="head">

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

<div class="eye left"></div>

<div class="eye right"></div>

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

</div>

<div class="arm left"></div>

<div class="arm right"></div>

<div class="body" id="dress"></div>

<div class="leg left"></div>

<div class="leg right"></div>

</div>

<div id="tools"></div>

</div>

</div>

<script>

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

function clearTools(){
tools.innerHTML="";
}

function addColor(color,action){

let d=document.createElement("div");

d.className="color";

d.style.background=color;

d.onclick=()=>action(color);

tools.appendChild(d);

}

function showDress(){

clearTools();

[
"#ff69b4",
"#00bfff",
"#9b59b6",
"#2ecc71",
"#f39c12",
"#e74c3c"
].forEach(c=>{

addColor(c,(x)=>{
document.getElementById("dress").style.background=x;
});

});

}

function showHair(){

clearTools();

[
"#000",
"#5c3a21",
"#d4af37",
"#ff4444",
"#9b59b6",
"#ffffff"
].forEach(c=>{

addColor(c,(x)=>{
document.getElementById("hair").style.background=x;
});

});

}

function showMakeup(){

clearTools();

[
"#ff1493",
"#ff69b4",
"#ff0000",
"#b000b5",
"#ff8fab"
].forEach(c=>{

addColor(c,(x)=>{
document.getElementById("mouth").style.background=x;
});

});

}

function showRoom(){

clearTools();

[
"#fff8fc",
"#c7f0ff",
"#ffe680",
"#d5ffd5",
"#f0d9ff"
].forEach(c=>{

addColor(c,(x)=>{
document.querySelector(".room").style.background=x;
});

});

}

showDress();

</script>

</body>
</html>
const tools=document.getElementById("tools");

const dress=document.getElementById("dress");
const hair=document.getElementById("hair");
const mouth=document.getElementById("mouth");

function clearTools(){
tools.innerHTML="";
}

function button(text,click){
const b=document.createElement("button");
b.innerHTML=text;
b.style.padding="10px";
b.style.borderRadius="10px";
b.style.border="none";
b.style.cursor="pointer";
b.onclick=click;
tools.appendChild(b);
}

function addColor(color,action){
let d=document.createElement("div");
d.className="color";
d.style.background=color;
d.onclick=()=>action(color);
tools.appendChild(d);
}

function showDress(){

clearTools();

button("💙 Azul",()=>{
dress.style.background="#4da6ff";
dress.style.borderRadius="20px";
});

button("💗 Rosa",()=>{
dress.style.background="#ff69b4";
dress.style.borderRadius="0 0 40px 40px";
});

button("💜 Princesa",()=>{
dress.style.background="#b266ff";
dress.style.borderRadius="50px";
});

button("❤️ Gala",()=>{
dress.style.background="#ff3333";
dress.style.borderRadius="10px";
});

button("💚 Casual",()=>{
dress.style.background="#66cc66";
dress.style.borderRadius="25px";
});

button("🖤 Elegante",()=>{
dress.style.background="black";
dress.style.borderRadius="5px";
});

}

function showHair(){

clearTools();

button("👩 Largo",()=>{
hair.style.height="120px";
hair.style.borderRadius="70px";
});

button("👧 Corto",()=>{
hair.style.height="60px";
});

button("🦱 Rizado",()=>{
hair.style.borderRadius="100px";
});

button("🎀 Flequillo",()=>{
hair.style.height="80px";
});

button("✨ Liso",()=>{
hair.style.borderRadius="15px";
});

button("🌸 Coleta",()=>{
hair.style.borderRadius="70px 70px 0 0";
});

[
"#000",
"#5c3a21",
"#d4af37",
"#ff5555",
"#ffffff",
"#b266ff"
].forEach(c=>{

addColor(c,(x)=>{
hair.style.background=x;
});

});

}

function showMakeup(){

clearTools();

[
"#ff1493",
"#ff69b4",
"#ff0000",
"#9900ff",
"#ffb3d9",
"#ff6600"
].forEach(c=>{

addColor(c,(x)=>{
mouth.style.background=x;
});

});

}

function showRoom(){

clearTools();

[
"#fff8fc",
"#b8ecff",
"#ffe680",
"#d6ffd6",
"#e6ccff",
"#ffe0cc"
].forEach(c=>{

addColor(c,(x)=>{
document.querySelector(".room").style.background=x;
});

});

}

showDress();
#tools button{
padding:10px;
border:none;
border-radius:10px;
background:white;
cursor:pointer;
font-weight:bold;
}

#tools button:hover{
background:#ffd8ef;
}
<div id="crown">👑</div>
<div id="bag">👜</div>
<div id="pet">🐶</div>
<div id="shoes">👠</div>
#crown{
position:absolute;
top:-35px;
left:78px;
font-size:40px;
display:none;
}

#bag{
position:absolute;
top:220px;
left:155px;
font-size:40px;
display:none;
}

#pet{
position:absolute;
left:-90px;
bottom:0;
font-size:60px;
display:none;
}

#shoes{
position:absolute;
bottom:0;
left:82px;
font-size:45px;
display:none;
}
function addAccessories(){

clearTools();

button("👑 Corona",()=>{
document.getElementById("crown").style.display="block";
});

button("👜 Bolso",()=>{
document.getElementById("bag").style.display="block";
});

button("👠 Zapatos",()=>{
document.getElementById("shoes").style.display="block";
});

button("🐶 Mascota",()=>{
document.getElementById("pet").style.display="block";
});

button("❌ Quitar todo",()=>{

document.getElementById("crown").style.display="none";
document.getElementById("bag").style.display="none";
document.getElementById("shoes").style.display="none";
document.getElementById("pet").style.display="none";

});

}
<button onclick="addAccessories()">✨ Accesorios</button>
<div class="room" id="room">

<div class="item" id="bed">🛏️</div>
<div class="item" id="sofa">🛋️</div>
<div class="item" id="lamp">💡</div>
<div class="item" id="plant">🪴</div>

</div>
.item{
position:absolute;
font-size:50px;
cursor:grab;
user-select:none;
}

#bed{left:50px;top:350px;}
#sofa{left:200px;top:380px;}
#lamp{left:350px;top:300px;}
#plant{left:500px;top:370px;}
function enableDrag(id){

const el=document.getElementById(id);

let offsetX=0;
let offsetY=0;
let dragging=false;

el.addEventListener("mousedown",(e)=>{
dragging=true;
offsetX=e.offsetX;
offsetY=e.offsetY;
el.style.cursor="grabbing";
});

document.addEventListener("mousemove",(e)=>{
if(!dragging)return;

el.style.left=(e.pageX - offsetX - 400)+"px";
el.style.top=(e.pageY - offsetY - 100)+"px";
});

document.addEventListener("mouseup",()=>{
dragging=false;
el.style.cursor="grab";
});

}

enableDrag("bed");
enableDrag("sofa");
enableDrag("lamp");
enableDrag("plant");
<button onclick="takeScreenshot()">📸 Captura</button>
function takeScreenshot(){
html2canvas(document.querySelector("#game")).then(canvas=>{
let link=document.createElement("a");
link.download="mi_juego.png";
link.href=canvas.toDataURL();
link.click();
});
}
<script src="https://[Log in to view URL]"></script>
<audio id="music" loop autoplay>
<source src="https://[Log in to view URL]" type="audio/mp3">
</audio>
<button onclick="toggleMusic()">🎵 Música</button>
function toggleMusic(){
const music=document.getElementById("music");
if(music.paused){
music.play();
}else{
music.pause();
}
}
.sparkle{
position:absolute;
width:8px;
height:8px;
background:white;
border-radius:50%;
animation:float 1s linear forwards;
pointer-events:none;
}

@keyframes float{
0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(-80px);}
}
document.addEventListener("click",(e)=>{

const s=document.createElement("div");
s.className="sparkle";
s.style.left=e.pageX+"px";
s.style.top=e.pageY+"px";

document.body.appendChild(s);

setTimeout(()=>s.remove(),1000);

});
<button onclick="pose1()">💃 Pose 1</button>
<button onclick="pose2()">🕺 Pose 2</button>
<button onclick="pose3()">✨ Pose 3</button>
function pose1(){
document.getElementById("girl").style.transform="rotate(-5deg)";
}

function pose2(){
document.getElementById("girl").style.transform="scale(1.05)";
}

function pose3(){
document.getElementById("girl").style.transform="rotate(5deg)";
}
#girl{
transition: all 0.4s ease;
}

Embed on website

To embed this project on your website, copy the following code and paste it into your website's HTML: