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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relógio de Ponteiro</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .clock {
      position: relative;
      width: 200px;
      height: 200px;
      border: 10px solid rgb(55, 55, 55);
      border-radius: 50%;
      overflow: hidden;
      background-position: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .background-image {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      background-position: center;
      z-index: -1;
    }

    .hour-hand,
    .minute-hand,
    .second-hand,
    .center-circle {
      position: absolute;
      transform-origin: 50% 100%;
    }

    .hour-hand {
      width: 6px;
      height: 50px;
      background-color: white;
      top: calc(50% - 50px);
      left: calc(50% - 3px);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .minute-hand {
      width: 4px;
      height: 70px;
      background-color: white;
      top: calc(50% - 70px);
      left: calc(50% - 2px);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .second-hand {
      width: 2px;
      height: 80px;
      background-color: #f44336;
      top: calc(50% - 80px);
      left: calc(50% - 1px);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .center-circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: rgb(55, 55, 55);
      top: calc(50% - 6px);
      left: calc(50% - 6px);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="background-image">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 25 25">
        <image href="/content/cf8230f4ccf1f74c6121a529d259a08f7292dfcc79bc5064cc706e62c18f56b1i0" width="100%" height="100%" style="image-rendering: pixelated;" />
      </svg>
    </div>
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
    <div class="center-circle"></div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    function updateClock() {
      const now = new Date();
      const seconds = now.getSeconds();
      const minutes = now.getMinutes();
      const hours = now.getHours();

      const secondHand = document.querySelector('.second-hand');
      const minuteHand = document.querySelector('.minute-hand');
      const hourHand = document.querySelector('.hour-hand');

      const secondDeg = (seconds / 60) * 360;
      const minuteDeg = ((minutes * 60 + seconds) / 3600) * 360;
      const hourDeg = ((hours % 12 + minutes / 60) / 12) * 360;

      secondHand.style.transform = `rotate(${secondDeg}deg)`;
      minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
      hourHand.style.transform = `rotate(${hourDeg}deg)`;
    }

    updateClock();
    setInterval(updateClock, 1000);
  </script>
</body>

</html>


Action	Price	Marketplace	From	To	Time
TRANSFER	- -		g8d7	89wq	12 months
INSCRIBED	- -		-	g8d7	12 months

Inscription #19040049