<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HUD with Killstreak and Kill Feed</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="https://yourlink.com" target="_blank">
        <div class="logo" style="background-image: url('https://i.ibb.co/WF4tSD5/KILLSTREAK-LT-LOGO2.png');"></div>
    </a>    
    <div class="logo-info">
        <span>
            <i class="icon fas fa-clock"></i>
            <span id="time">--:--</span>
        </span>
        <span>
            <i class="icon fas fa-users"></i>
            <span id="playerCount">0</span>
        </span>
        <span>
            <i class="icon fas fa-user"></i>
            <span id="playerID">N/A</span>
        </span>
    </div>
    
    <div class="hud-container">
        <div class="avatar-container">
          <img id="player-avatar" src="" alt="Player Avatar" />
        </div>
        <div class="combat-mode" id="combat-mode" style="display: none;">
          KOVOS REŽIMAS
        </div>
        

        <div class="bars-container">
            <div class="bar-container">
                <div class="icon"><i class="fa-solid fa-square-plus"></i></div>
                <div class="bar">
                    <div class="bar-inner bar-health" id="health-bar" style="width: 100%;"></div>
                </div>
            </div>

            <div class="bar-container">
                <div class="icon"><i class="fas fa-shield-alt"></i></div>
                <div class="bar">
                    <div class="bar-inner bar-armor" id="armor-bar" style="width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="kill-feed" id="kill-feed"></div>

    <script src="script.js"></script>
</body>
</html>

<div id="rankContainer">
    <div id="rankUI">
        <h1 id="rankName">Krauna</h1>
        <p id="xpDisplay">0 / 1000 XP</p>
        <div class="progress-bar">
            <div id="progress"></div>
            <div id="xpGainProgress"></div>
            <div id="xpGain"></div>
        </div>
    </div>
</div>
</body>
</html>
