Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Login + Puzzle</title>

<style>
body{
  font-family:Arial;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:#f5f5f5;
}

.box{
  background:#fff;
  padding:20px;
  border-radius:12px;
  text-align:center;
  width:320px;
}

input{
  width:100%;
  padding:10px;
  margin:6px 0;
  border:none;
  border-bottom:1px solid #aaa;
}

#puzzle{
  width:300px;
  height:300px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  margin:15px auto;
}

.tile{
  width:100px;
  height:100px;
  background-image:url('image.jpg');
  background-size:300px 300px;
  cursor:grab;
}

button{
  width:100%;
  padding:10px;
  margin-top:10px;
  background:orange;
  border:none;
  color:#fff;
  border-radius:8px;
}

#msg{margin-top:10px;}
</style>
</head>
<body>

<div class="box">
<h3>Вход</h3>

<input placeholder="Логин">
<input type="password" placeholder="Пароль">

<p>Собери картинку</p>
<div id="puzzle"></div>

<button onclick="login()">Войти</button>
<p id="msg"></p>
</div>

<script>
let puzzle=document.getElementById("puzzle");
let pieces=[];

// создаём куски
for(let y=0;y<3;y++){
  for(let x=0;x<3;x++){
    let i=y*3+x;

    let d=document.createElement("div");
    d.className="tile";
    d.style.backgroundPosition=`-${x*100}px -${y*100}px`;
    d.dataset.i=i;
    d.draggable=true;

    pieces.push(d);
  }
}

// перемешка
pieces.sort(()=>Math.random()-0.5);
pieces.forEach(p=>puzzle.appendChild(p));

// drag
let dragged;

document.addEventListener("dragstart",e=>{
  if(e.target.classList.contains("tile")){
    dragged=e.target;
  }
});

document.addEventListener("dragover",e=>e.preventDefault());

document.addEventListener("drop",e=>{
  if(e.target.classList.contains("tile")){
    let temp=document.createElement("div");

    puzzle.replaceChild(temp,dragged);
    puzzle.replaceChild(dragged,e.target);
    puzzle.replaceChild(e.target,temp);
  }
});

// проверка
function login(){
  let arr=[...puzzle.children];
  let ok=arr.every((el,i)=>el.dataset.i==i);

  document.getElementById("msg").innerText =
    ok ? "✔ Вход выполнен" : "❌ Сначала собери картинку";
}
</script>

</body>
</html>