<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minecraft MOTD</title>

  
  <style>
    @font-face {
        font-family: 'Minecraft';
        src: url('minecraftia.ttf') format('woff2');
    }
  
    body {
        margin: 0;
        font-family: 'Minecraft', monospace;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        color: #ffffff;
        background-color: #333;
    }
  
    #container {
        display: flex;
        align-items: flex-start;
        background: url('https://motd.gg/assets/css/minecraft-background-dark-160x-K223BAAL.png') repeat;
        background-size: 15%;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 10px 15px;
        border: 1px solid #333;
        box-shadow: 0px 0px 10px 2px #000;
        width: 600px;
        height: 80px;
    }
  
    #favicon {
        height: 100%;
        margin-right: 10px;
    }
  
    #content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
  
    #server-name {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
    }
  
    #motd {
        font-size: 16px;
        line-height: 1.5;
        padding-top: 2px;
        white-space: pre-wrap; /* Preserve line breaks */
        font-family: 'Minecraft', monospace;
    }
  
    /* Minecraft color codes */
    .color-black { color: #000000; }
    .color-dark_blue { color: #0000aa; }
    .color-dark_green { color: #00aa00; }
    .color-dark_aqua { color: #00aaaa; }
    .color-dark_red { color: #aa0000; }
    .color-dark_purple { color: #aa00aa; }
    .color-gold { color: #ffaa00; }
    .color-gray { color: #aaaaaa; }
    .color-dark_gray { color: #555555; }
    .color-blue { color: #5555ff; }
    .color-green { color: #55ff55; }
    .color-aqua { color: #55ffff; }
    .color-red { color: #ff5555; }
    .color-light_purple { color: #ff55ff; }
    .color-yellow { color: #ffff55; }
    .color-white { color: #ffffff; }
  
    /* Formatting codes */
    .bold { font-weight: bold; }
    .italic { font-style: italic; }
    .obfuscated {
        display: inline-block;
        animation: obfuscate 0.3s infinite steps(1, end);
    }
  
    @keyframes obfuscate {
        0% { content: '█'; }
        100% { content: '░'; }
    }
  </style>
  
</head>
<body>
  <div id="container">
    <img id="favicon" src="" alt="Favicon">
    <div id="content">
      <div id="server-name">Minecraft Server</div>
      <div id="motd">Loading...</div>
    </div>
  </div>

  <script>
  function parseMinecraftFormat(text) {
    const formatMap = {
      '0': 'color-black',
      '1': 'color-dark_blue',
      '2': 'color-dark_green',
      '3': 'color-dark_aqua',
      '4': 'color-dark_red',
      '5': 'color-dark_purple',
      '6': 'color-gold',
      '7': 'color-gray',
      '8': 'color-dark_gray',
      '9': 'color-blue',
      'a': 'color-green',
      'b': 'color-aqua',
      'c': 'color-red',
      'd': 'color-light_purple',
      'e': 'color-yellow',
      'f': 'color-white',
      'l': 'bold',
      'o': 'italic',
      'k': 'obfuscated', // Special case for obfuscated text
      'r': '' // Reset formatting
    };

    let result = '';
    let activeClasses = [];

    for (let i = 0; i < text.length; i++) {
      if (text[i] === '§' && i + 1 < text.length) {
        const code = text[i + 1];
        i++; // Skip the formatting character

        if (code === 'r') {
          // Reset all active classes
          activeClasses = [];
        } else if (formatMap[code]) {
          const className = formatMap[code];
          if (className === 'obfuscated') {
            // Apply only obfuscation to current characters
            result += `<span class="${className}">`;
            result += '</span>';
          } else {
            // Add the formatting class to the stack
            activeClasses.push(className);
          }
        }
      } else {
        // Add the current character with active classes
        const classes = activeClasses.join(' ');
        result += `<span class="${classes}">${text[i]}</span>`;
      }
    }

    return result;
  }

  fetch('https://mcapi.us/server/status?ip=evgstoreinc.com')
    .then(response => response.json())
    .then(data => {
      if (data.status === 'success' && data.motd) {
        const motdHtml = parseMinecraftFormat(data.motd);
        document.getElementById('motd').innerHTML = motdHtml;

        if (data.favicon) {
          document.getElementById('favicon').src = data.favicon;
        }
      } else {
        document.getElementById('motd').textContent = 'Server offline or data unavailable.';
      }
    })
    .catch(error => {
      console.error('Error fetching MOTD:', error);
      document.getElementById('motd').textContent = 'Error loading MOTD.';
    });
</script>

  
</body>
</html>
