moveable battery charge display HUD

(() => {
if (window.__batteryHUD) return; window.__batteryHUD = true;

// Create HUD container
const hud = document.createElement('div');
hud.id = 'batteryHUD';
Object.assign(hud.style,{
  position:'fixed', top:'30px', left:'30px', width:'120px', height:'120px',
  background:'rgba(0,0,0,0.4)', borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center',
  cursor:'move', zIndex:'999999', userSelect:'none', boxShadow:'0 0 20px rgba(0,0,0,0.5)'
});
document.body.appendChild(hud);

// Create SVG for circular progress
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS,'svg');
svg.setAttribute('width','100');
svg.setAttribute('height','100');
svg.setAttribute('viewBox','0 0 100 100');
hud.appendChild(svg);

// Background circle
const bgCircle = document.createElementNS(svgNS,'circle');
bgCircle.setAttribute('cx','50'); bgCircle.setAttribute('cy','50'); bgCircle.setAttribute('r','45');
bgCircle.setAttribute('stroke','#555'); bgCircle.setAttribute('stroke-width','10'); bgCircle.setAttribute('fill','none');
svg.appendChild(bgCircle);

// Progress circle
const progCircle = document.createElementNS(svgNS,'circle');
progCircle.setAttribute('cx','50'); progCircle.setAttribute('cy','50'); progCircle.setAttribute('r','45');
progCircle.setAttribute('stroke','limegreen'); progCircle.setAttribute('stroke-width','10'); progCircle.setAttribute('fill','none');
progCircle.setAttribute('stroke-linecap','round');
progCircle.setAttribute('transform','rotate(-90 50 50)');
progCircle.style.transition = 'stroke-dashoffset 0.5s, stroke 0.5s';
svg.appendChild(progCircle);

const circumference = 2 * Math.PI * 45;
progCircle.style.strokeDasharray = circumference;
progCircle.style.strokeDashoffset = circumference;

// Text
const batteryText = document.createElement('div');
batteryText.style.position='absolute';
batteryText.style.color='white';
batteryText.style.fontWeight='bold';
batteryText.style.fontSize='18px';
batteryText.style.textAlign='center';
batteryText.style.pointerEvents='none';
hud.appendChild(batteryText);

// Charging bolt
const bolt = document.createElement('div');
bolt.innerText='⚡';
Object.assign(bolt.style,{
  position:'absolute', top:'10px', right:'10px', fontSize:'24px', color:'yellow', textShadow:'0 0 8px yellow', display:'none'
});
hud.appendChild(bolt);

// Drag
let dragging=false,offsetX=0,offsetY=0;
hud.addEventListener('mousedown', e=>{dragging=true; offsetX=e.clientX-hud.offsetLeft; offsetY=e.clientY-hud.offsetTop;});
document.addEventListener('mousemove', e=>{if(dragging){hud.style.left=(e.clientX-offsetX)+'px'; hud.style.top=(e.clientY-offsetY)+'px';}});
document.addEventListener('mouseup', ()=>dragging=false);

// Battery update
(async()=>{
if(!navigator.getBattery){batteryText.innerText='N/A'; return;}
const b = await navigator.getBattery();

function updateBattery(){
  let level = b.level;
  batteryText.innerText = Math.round(level*100)+'%';
  bolt.style.display = b.charging?'block':'none';

  // Update circular progress
  let offset = circumference * (1 - level);
  progCircle.style.strokeDashoffset = offset;

  // Color: green normal, yellow charging, red low
  if(b.charging) progCircle.setAttribute('stroke','limegreen');
  else if(level<0.2) progCircle.setAttribute('stroke','red');
  else progCircle.setAttribute('stroke','green');
}

updateBattery();
b.addEventListener('chargingchange',updateBattery);
b.addEventListener('levelchange',updateBattery);
b.addEventListener('chargingtimechange',updateBattery);
b.addEventListener('dischargingtimechange',updateBattery);
})();
})();