<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>着せ替えアプリ</title>
<style>
div {
display: inline-block;
border: solid 1px black;
padding: 20px;
margin: 10px;
}
img {
width: 200px;
height: 200px;
object-fit: contain;
}
.part-selected {
border-color: red;
box-shadow: 0 0 15px red;
}
</style>
</head>
<body>
<h1>着せ替えアプリ</h1>
<div>
<h2>輪郭</h2>
<img src="https://dummyimage.com/200x200/000/fff" data-part="face">
</div>
<div>
<h2>瞳</h2>
<img src="https://dummyimage.com/200x200/00f/fff" data-part="eyes">
</div>
<div>
<h2>口</h2>
<img src="https://dummyimage.com/200x200/f00/fff" data-part="mouth">
</div>
<div>
<h2>前髪</h2>
<img src="https://dummyimage.com/200x200/ff0/000" data-part="hair-front">
</div>
<div>
<h2>後ろ髪</h2>
<img src="https://dummyimage.com/200x200/0f0/000" data-part="hair-back">
</div>
<div>
<h2>服</h2>
<img src="https://dummyimage.com/200x200/fc0/000" data-part="clothes">
</div>
<script>
const partImages = document.querySelectorAll('[data-part]');
let selectedParts = {};
partImages.forEach(partImage => {
partImage.addEventListener('click', () => {
// 選択状態のパーツを解除
Object.values(selectedParts).forEach(selectedPart => {
selectedPart.classList.remove('part-selected');
});
// 選択されたパーツを追加
const part = partImage.dataset.part;
if (selectedParts[part] === partImage) {
delete selectedParts[part];
} else {
selectedParts[part] = partImage;
partImage.classList.add('part-selected');
}
});
});
setInterval(() => {
// ときどきジョーク
console.log('What do you call a fake noodle? An impasta!');
}, 5000);
</script>
</body>
</html>
