<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Perception</title></head>
<body style="margin:0;background:black;display:flex;align-items:center;justify-content:center;height:100vh;">
<div id="square" style="width:100px;height:100px;background:white;transition:all 0.3s ease;"></div>
<script>
const sq = document.getElementById('square');
let glow = false, rotated = false, cloned = false;
sq.addEventListener('click', () => {
rotated = !rotated;
sq.style.transform = rotated ? 'rotate(45deg)' : 'rotate(0deg)';
});
sq.addEventListener('dragstart', e => e.preventDefault());
sq.addEventListener('mousedown', () => {
if (!cloned) {
const clone = sq.cloneNode(true);
clone.style.marginLeft = '20px';
document.body.appendChild(clone);
cloned = true;
}
});
setTimeout(() => {
if (!rotated && !cloned) {
glow = true;
sq.style.boxShadow = '0 0 30px cyan';
}
}, 3000);
</script>
</body>
</html>