Welcome to CODEBOX! (Branch 1613)

✨ นายพิสิฐพงศ์ ปาละวิสุทธิ์

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <style>
    body {
      background: #E69A8DFF;
      margin: 2em;
      font-family: sans-serif;
    }

.container {
      margin: 20px;
      position: relative;
      height: 480px;
      width: 480px;
      border: 2px solid #fff;
      z-index: -1;
    }

.square {
      --h: 120px;
      height: var(--h);
      width: var(--h);
      position: absolute;
      transition: left 0.5s, top 0.5s;
      box-sizing: border-box;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      cursor: pointer;
      margin: auto;
    }

.square-back1 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543839531368448/1.jpg");
      background-size: contain;
    }

.square-back2 {
      background: url("https://media.discordapp.net/attachments/755789590240952371/806543843096920064/2.jpg");
      background-size: contain;
    }

.square-back3 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543850867916870/3.jpg");
      background-size: contain;

}

.square-back4 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543853887946782/4.jpg");
      background-size: contain;
    }

.square-back5 {
      background: url("https://media.discordapp.net/attachments/755789590240952371/806543858598019102/5.jpg");
      background-size: contain;
    }

.square-back6 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543863502078044/6.jpg");
      background-size: contain;
    }

.square-back7 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543872263847966/7.jpg");
      background-size: contain;
    }

.square-back8 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543876583718912/8.jpg");
      background-size: contain;
    }

.square-back9 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543876588044289/9.jpg");
      background-size: contain;
    }

.square-back10 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543892585119785/10.jpg");
      background-size: contain;
    }

.square-back11 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543896829624370/11.jpg");
      background-size: contain;
    }

.square-back12 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543892412628992/12.jpg");
      background-size: contain;
    }

.square-back13 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543905997979668/13.jpg");
      background-size: contain;
    }

.square-back14 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543914709286912/14.jpg");
      background-size: contain;
    }

.square-back15 {
      background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543914386849842/15.jpg");
      background-size: contain;
    }

.empty {
      z-index: 1;
    }

[data-pos="0"] {
      left: 0;
      top: 0;
    }

[data-pos="1"] {
      left: calc(1*var(--h));
      top: 0;
    }

[data-pos="2"] {
      left: calc(2*var(--h));
      top: 0;
    }

[data-pos="3"] {
      left: calc(3*var(--h));
      top: 0;
    }

[data-pos="4"] {
      left: 0;
      top: calc(1*var(--h));
    }

[data-pos="5"] {
      left: calc(1*var(--h));
      top: calc(1*var(--h));
    }

[data-pos="6"] {
      left: calc(2*var(--h));
      top: calc(1*var(--h));
    }

[data-pos="7"] {
      left: calc(3*var(--h));
      top: calc(1*var(--h));
    }

[data-pos="8"] {
      left: 0;
      top: calc(2*var(--h));
    }

[data-pos="9"] {
      left: calc(1*var(--h));
      top: calc(2*var(--h));
    }

[data-pos="10"] {
      left: calc(2*var(--h));
      top: calc(2*var(--h));
    }

[data-pos="11"] {
      left: calc(3*var(--h));
      top: calc(2*var(--h));
    }

[data-pos="12"] {
      left: 0;
      top: calc(3*var(--h));
    }

[data-pos="13"] {
      left: calc(1*var(--h));
      top: calc(3*var(--h));
    }

[data-pos="14"] {
      left: calc(2*var(--h));
      top: calc(3*var(--h));
    }

[data-pos="15"] {
      left: calc(3*var(--h));
      top: calc(3*var(--h));
    }

.header {
      background-color: rgb(110, 95, 143);
      display: grid;
      grid-template-columns: 30% 1fr;
      border-radius: 20px;
    }

#logo {
      color: hsl(0, 100%, 100%);
      text-align: center;
      align-self: center;
      font-size: 1.9em;
      position: relative;
      display: inline-block;
    }

.credit {
      text-align: right;
      align-self: center;
      margin-right: 20px;
    }

.credit a {
      text-decoration: none;
      color: #fff;
      font-size: 1.3em;
      padding: 10px;
    }

.credit a:hover {
      background-color: #6b8e23;
      border-radius: 10px;
    }

.all-content {
      display: grid;
      box-sizing: border-box;
      grid-template-rows: 10% 1fr;
    }

.bubble,
    .bubbles {
      width: 400px;
      height: 400px;
      background: hsl(60, 90%, 70%);
      border-radius: 100%;
      position: fixed;
      bottom: -100px;
      left: -200px;
      opacity: .3;
      z-index: -1;
    }

.bubbles {
      background: hsl(90, 100%, 90%);
      bottom: -250px;
      left: -50px;
    }

.dropdown {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: #fff;
      border: 2px solid #fff;
    }

.dropdown-content {
      display: none;
      position: fixed;
      background-color: #fff;
      border: 2px solid #fff;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

.dropdown:hover .dropdown-content {
      display: block;
      bottom: 190px;
      right: 20px;
    }
  </style>
</head>

<body>
  <div class="dropdown">
    <img src="https://cdn.discordapp.com/attachments/798205933716635681/798857969986830336/image0.jpg" width="100"
      ;height="100">
    <div class="dropdown-content">
      <img src="https://cdn.discordapp.com/attachments/798205933716635681/798857969986830336/image0.jpg" width="480"
        ;height="480">
    </div>
  </div>
  <div class="bubble"></div>
  <div class="bubbles"></div>
  <div class="all-content">
    <div class="header">
      <div id="logo"><b>Arin Puzzle</b></div>
      <div class="credit"><a href="https://codepen.io/ngirard/pen/MJELze">Reference</a></div>
    </div>
    <center>
      <div class="container">
        <div class="square square-back1" data-pos="0"></div>
        <div class="square square-back14" data-pos="1"></div>
        <div class="square square-back9" data-pos="2"></div>
        <div class="square square-back3" data-pos="3"></div>
        <div class="square square-back12" data-pos="4"></div>
        <div class="square empty" data-pos="5"></div>
        <div class="square square-back2" data-pos="6"></div>
        <div class="square square-back6" data-pos="7"></div>
        <div class="square square-back7" data-pos="8"></div>
        <div class="square square-back10" data-pos="9"></div>
        <div class="square square-back11" data-pos="10"></div>
        <div class="square square-back4" data-pos="11"></div>
        <div class="square square-back15" data-pos="12"></div>
        <div class="square square-back5" data-pos="13"></div>
        <div class="square square-back13" data-pos="14"></div>
        <div class="square square-back8" data-pos="15"></div>
      </div>
    </center>
  </div>

var top = secondPos - 4;
        var bottom = secondPos + 4;
        var left = secondPos - 1;
        var right = secondPos + 1;

if (secondPos % 4 - left % 4 < 1) {
          left = -1;
        }
        if (right % 4 - secondPos % 4 < 1) {
          right = -1;
        }
        var posibilities = [left, right, top, bottom];

if (posibilities.includes(firstPos)) {
          empty.dataset.pos = firstPos;
          e.target.dataset.pos = secondPos;
        }
      })
    });
  </script>
</body>

</html>