EncodeTheCode · May 30, 2026 23:37
diff --git a/progress_bar_unique_v1.htm b/progress_bar_unique_v1.htm
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>XP HUD</title>
  <style>
    body {
      margin: 0;
      background: #111;
      font-family: Arial, sans-serif;
      color: #fff;
    }

    .hud {
      position: fixed;
      left: 20px;
      bottom: 20px;
      width: 420px;
      background: rgba(0, 0, 0, 0.55);
      padding: 12px;
      border-radius: 10px;
    }

    .xp-label {
      margin-bottom: 8px;
      font-size: 14px;
    }

    .xp-bar {
      position: relative;
      width: 100%;
      height: 26px;
      border: 1px solid #000000;
      box-sizing: border-box;
      overflow: hidden;
      background: transparent;
    }

    .xp-base {
      position: absolute;
      inset: 0;
      background: #cc2b2b;
    }

    .xp-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: #2ecc71;
      overflow: visible;
      z-index: 2;
    }

    .xp-cap-left,
    .xp-cap-right,
    .xp-cap-full {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 100%;
      width: 24px;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
    }

    .xp-cap-left {
      left: 0;
      display: none;
      z-index: 3;
    }

    .xp-cap-right {
      right: 0;
      display: none;
      z-index: 4;
    }

    .xp-cap-full {
      right: 0;
      display: block;
      z-index: 1;
    }

    .controls {
      margin-top: 12px;
    }

    button {
      margin-right: 8px;
      margin-top: 6px;
      padding: 8px 12px;
      border: 0;
      border-radius: 6px;
      background: #2d8cff;
      color: white;
      cursor: pointer;
    }
  </style>
 </head>
 <body>
  <div class="hud">
    <div class="xp-label" id="xpText">0 / 100 XP (0.0%)</div>

    <div class="xp-bar" id="xpBar">
      <img id="xpCapFull" class="xp-cap-full" src="full-cap.png" alt="">
      <div class="xp-base"></div>
      <div class="xp-fill" id="xpFill">
        <img id="xpCapLeft" class="xp-cap-left" src="left-cap.png" alt="">
        <img id="xpCapRight" class="xp-cap-right" src="right-cap.png" alt="">
      </div>
    </div>

    <div class="controls">
      <button onclick="gainXP(1)">Earn 1 XP</button>
      <button onclick="gainXP(15)">Earn 15 XP</button>
      <button onclick="gainXP(50)">Earn 50 XP</button>
    </div>
  </div>

  <script>
    let currentXP = 0;
    const xpToNextLevel = 100;
    const cornerRadius = 12.5;

    const xpBar = document.getElementById("xpBar");
    const xpFill = document.getElementById("xpFill");
    const xpText = document.getElementById("xpText");
    const xpCapLeft = document.getElementById("xpCapLeft");
    const xpCapRight = document.getElementById("xpCapRight");

    xpBar.style.borderRadius = cornerRadius + "px";
    xpFill.style.borderRadius = cornerRadius + "px";

    function updateXPBar() {
      const percent = Math.min((currentXP / xpToNextLevel) * 100, 100);

      xpFill.style.width = percent + "%";
      xpText.textContent = `${currentXP} / ${xpToNextLevel} XP (${percent.toFixed(1)}%)`;

      xpCapLeft.style.display = percent > 0.1 ? "block" : "none";
      xpCapRight.style.display = percent > 0 ? "block" : "none";
    }

    function gainXP(amount) {
      currentXP = Math.min(currentXP + amount, xpToNextLevel);
      updateXPBar();
    }

    updateXPBar();
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>XP HUD</title>
	<style>
	body {
	margin: 0;
	background: #111;
	font-family: Arial, sans-serif;
	color: #fff;
	}

	.hud {
	position: fixed;
	left: 20px;
	bottom: 20px;
	width: 420px;
	background: rgba(0, 0, 0, 0.55);
	padding: 12px;
	border-radius: 10px;
	}

	.xp-label {
	margin-bottom: 8px;
	font-size: 14px;
	}

	.xp-bar {
	position: relative;
	width: 100%;
	height: 26px;
	border: 1px solid #000000;
	box-sizing: border-box;
	overflow: hidden;
	background: transparent;
	}

	.xp-base {
	position: absolute;
	inset: 0;
	background: #cc2b2b;
	}

	.xp-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0%;
	background: #2ecc71;
	overflow: visible;
	z-index: 2;
	}

	.xp-cap-left,
	.xp-cap-right,
	.xp-cap-full {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 100%;
	width: 24px;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	}

	.xp-cap-left {
	left: 0;
	display: none;
	z-index: 3;
	}

	.xp-cap-right {
	right: 0;
	display: none;
	z-index: 4;
	}

	.xp-cap-full {
	right: 0;
	display: block;
	z-index: 1;
	}

	.controls {
	margin-top: 12px;
	}

	button {
	margin-right: 8px;
	margin-top: 6px;
	padding: 8px 12px;
	border: 0;
	border-radius: 6px;
	background: #2d8cff;
	color: white;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div class="hud">
	<div class="xp-label" id="xpText">0 / 100 XP (0.0%)</div>

	<div class="xp-bar" id="xpBar">
	<img id="xpCapFull" class="xp-cap-full" src="full-cap.png" alt="">
	<div class="xp-base"></div>
	<div class="xp-fill" id="xpFill">
	<img id="xpCapLeft" class="xp-cap-left" src="left-cap.png" alt="">
	<img id="xpCapRight" class="xp-cap-right" src="right-cap.png" alt="">
	</div>
	</div>

	<div class="controls">
	<button onclick="gainXP(1)">Earn 1 XP</button>
	<button onclick="gainXP(15)">Earn 15 XP</button>
	<button onclick="gainXP(50)">Earn 50 XP</button>
	</div>
	</div>

	<script>
	let currentXP = 0;
	const xpToNextLevel = 100;
	const cornerRadius = 12.5;

	const xpBar = document.getElementById("xpBar");
	const xpFill = document.getElementById("xpFill");
	const xpText = document.getElementById("xpText");
	const xpCapLeft = document.getElementById("xpCapLeft");
	const xpCapRight = document.getElementById("xpCapRight");

	xpBar.style.borderRadius = cornerRadius + "px";
	xpFill.style.borderRadius = cornerRadius + "px";

	function updateXPBar() {
	const percent = Math.min((currentXP / xpToNextLevel) * 100, 100);

	xpFill.style.width = percent + "%";
	xpText.textContent = `${currentXP} / ${xpToNextLevel} XP (${percent.toFixed(1)}%)`;

	xpCapLeft.style.display = percent > 0.1 ? "block" : "none";
	xpCapRight.style.display = percent > 0 ? "block" : "none";
	}

	function gainXP(amount) {
	currentXP = Math.min(currentXP + amount, xpToNextLevel);
	updateXPBar();
	}

	updateXPBar();
	</script>
	</body>
	</html>
No results found