<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Xeno</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom right, #1f2937, #000000);
      font-family: sans-serif;
      color: white;
    }
    .card {
      width: 24rem;
      padding: 2rem;
      border-radius: 0.5rem;
      background: linear-gradient(to bottom right, #1f2937, #000000, #374151);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      text-align: center;
    }
    .title {
      font-size: 3rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }
    .subtitle {
      color: #d1d5db;
      margin-bottom: 1rem;
    }
    .time {
      color: #d1d5db;
      font-size: 0.875rem;
    }
    .links {
      margin-top: 1.5rem;
      display: flex;
      justify-content: center;
      gap: 1rem;
    }
    .icon-link {
      color: #9ca3af;
      transition: color 0.3s ease;
    }
    .icon-link:hover {
      color: white;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1 class="title">Xeno</h1>
    <p class="subtitle">Hey! I'm a fullstack developer</p>
    <p class="time">The time in United States is <span id="time"></span></p>
    <div class="links">
      <a href="https://github.com/xenoimports" target="_blank" class="icon-link">
        <svg height="24" width="24" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
        </svg>
      </a>
      <a href="https://discord.com/users/1249945526531784735" target="_blank" class="icon-link">
        <svg height="24" width="24" viewBox="0 0 71.24 55" fill="currentColor">
          <path d="M60.1,4.9C55.5,2.7,50.7,1.1,45.6,0.1c-0.3-0.1-0.6,0.1-0.7,0.4c-0.2,0.3-0.3,0.7-0.5,1C40.7,1.8,37,2.1,33.3,2.1 c-3.7,0-7.4-0.3-11.1-0.6c-0.2-0.3-0.3-0.7-0.5-1C21.6,0.2,21.3,0,21,0.1c-5.1,1-9.9,2.6-14.5,4.8c-0.1,0-0.2,0.1-0.2,0.2 C1,18.7-0.6,32.1,0.2,45.5c0,0.2,0.1,0.3,0.2,0.4c5.7,4.2,11.2,6.7,16.6,8.4c0.3,0.1,0.6,0,0.8-0.2c2.1-2.9,4-6,5.6-9.2 c0.1-0.2,0-0.5-0.2-0.6c-1.8-0.7-3.5-1.5-5.2-2.5c-0.2-0.1-0.2-0.4,0-0.5c0.4-0.3,0.7-0.6,1.1-0.8c0.1-0.1,0.2-0.1,0.3,0 c13.7,6.2,28.5,6.2,42,0c0.1,0,0.2,0,0.3,0.1c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.2,0.4,0,0.5c-1.7,1-3.4,1.8-5.2,2.5 c-0.2,0.1-0.3,0.3-0.2,0.6c1.6,3.2,3.5,6.3,5.6,9.2c0.2,0.2,0.5,0.3,0.8,0.2c5.4-1.7,10.9-4.2,16.6-8.4c0.1-0.1,0.2-0.2,0.2-0.4 c0.9-15.3-1.5-28.6-6.4-40.4C60.3,5,60.2,4.9,60.1,4.9z M23.7,37.3c-3.3,0-6-3-6-6.7s2.7-6.7,6-6.7c3.3,0,6,3,6,6.7 S27,37.3,23.7,37.3z M47.3,37.3c-3.3,0-6-3-6-6.7s2.7-6.7,6-6.7c3.3,0,6,3,6,6.7S50.6,37.3,47.3,37.3z"/>
        </svg>
      </a>
    </div>
  </div>
  <script>
    function updateTime() {
      const timeElement = document.getElementById('time');
      const now = new Date();
      timeElement.textContent = now.toLocaleTimeString('en-US');
    }
    setInterval(updateTime, 1000);
    updateTime();
  </script>
</body>
</html>