text: const userId = "842059554589245440";
  const userName = "Isra";
  const userColor = "4b578e";
  const backgroundColor = "36393f";
  const description = `I'm a 17 year old software developer from Switzerland ${emoji(
    "waving-hand"
  )}`;
  const apiEndpoint = `https://api.lanyard.rest/v1/users/${userId}`;
  
  function init(className) {
    const box = document.createElement("div");
    box.classList.add("card");
    box.classList.add(className);
    document.body.appendChild(box);
    return box;
  }
  function emoji(emojiName) {
    return `<i class="twa twa-${emojiName}">`;
  }
  function updateTime() {
    const now = new Date();
    const time = new Date(
      now.getTime() + now.getTimezoneOffset() * 60000
    ).toLocaleTimeString();
  document.getElementById("time").innerHTML = time;
  }
  function updatePresence(d){
    const newStatus = d.discord_status;
      document.getElementById("current-status").textContent = `Discord: ${newStatus}`
      document.getElementById("status-chip").className = `status-chip chip-${newStatus}`
      document.getElementById("pfp").className = `pfp pfp-${newStatus}`
  }
  try {
    fetch(apiEndpoint).then(async (data) => {
      const res = await data.json();
      const box = init("cover");
      box.innerHTML = `<img width="235" alt="Profile picture" height="235" src="https://api.lanyard.rest/${userId}.webp" draggable="false" id="pfp" class="pfp pfp-${res.data.discord_status}"><span class="username">${userName}</span><span class="description">${description}</span>`;
      let discordStatus = res.data.discord_status;
      if (discordStatus == "offline") {
        discordStatus = "Offline";
      } else if (discordStatus == "online") {
        discordStatus = "Online";
      } else if (discordStatus == "idle") {
        discordStatus = "Idle";
      } else if (discordStatus == "dnd") {
        discordStatus = "DND";
      }
      const now = new Date();
      const time = new Date(
        now.getTime() + now.getTimezoneOffset() * 60000
      ).toLocaleTimeString();
  
      const status = init("status");
      status.innerHTML = `<span class="title">Current status</span><br /><div class="text-content">Discord: <span id="current-status">${discordStatus}</span> <span id="status-chip" class="status-chip chip-${res.data.discord_status}"></span><br /><span>Time for me: <time id="time">${time}</time> - UTC</span></div>`;
      const hobby = init("hobby");
      hobby.innerHTML = `<span class="title">Hobbies</span><br /><div class="text-content"><ul><li>Coding</li><li>Gaming (especially Valorant and defly.io)</li><li>Jiu-Jitsu</li><li>Graphic Design</li><li>Art </li><li>Robotics</li></ul></div>`;
      const socials = init("socials");
      socials.innerHTML = `<a class="social" href="https://discord.com/users/${userId}" target="_blank"><svg id="discord" role="img" viewBox="0 0 24 24" fill="white" width="50px" height="50px" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><a class="social" href="https://www.youtube.com/channel/UCDDEVEQw5nxv1UjTWlNxymA" target="_blank"><svg id="youtube" role="img" viewBox="0 0 24 24" fill="white" width="50px" height="50px" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a><a class="social" href="https://github.com/zisra" target="_blank"><svg id="github" role="img" viewBox="0 0 24 24" fill="white" width="50px" height="50px" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>`;
      const socket = new WebSocket("wss://api.lanyard.rest/socket");
      setInterval(updateTime, 1000);
      socket.addEventListener("open", () => {
              socket.send(
                  JSON.stringify({
                      op: 2,
                      d: {
                          subscribe_to_ids: [userId],
                      },
                  }),
              );
              setInterval(() => {
                  socket.send(
                      JSON.stringify({
                          op: 3,
                      }),
                  );
              }, 1000 * 30);
          });
          socket.addEventListener("message", ({ data }) => {
            const { t, d } = JSON.parse(data)
  
              if (t === "PRESENCE_UPDATE") {
                  updatePresence(d);
              }
            
          });
          
    }); 
  } catch (err) {
    alert("Something went wrong fetching data. Please try again later");
    window.location.reload();
  }
  