<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/nes.css/css/nes.min.css">
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
img {
max-width: 100%;
height: auto;
}
.legend-icon {
max-width: 20%;
height: auto;
}
.legend-container {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:auto;
}
.legend-container img{
max-width:40%;
height:auto;
margin-right:auto;
margin-left:auto;
}
/* Add this CSS to center the progress bar */
progress {
margin-left: auto;
margin-right: auto;
display:block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="nes-container is-dark with-title">
<h1 class="title">ApexApi tool</h1>
<script>
function createTable() {
var url = "https://api.mozambiquehe.re/bridge?auth=";
var auth = document.getElementById("auth").value;
url += auth + "&platform=PC&uid=";
var uid = document.getElementById("uid").value;
url += uid;
$.getJSON(url, function(data) {
var rankDiv = data.global.rank.rankDiv;
var rankName = data.global.rank.rankName;
if (rankName != "Master" && rankName != "Apex Predator" && rankName != "Unranked") {
rankName += " " + rankDiv;
}
var ALStopIntGlobal = data.global.rank.ALStopIntGlobal;
var rankImg = data.global.rank.rankImg;
var icon = data.legends.selected.ImgAssets.icon;
var level = data.global.level;
var toNextLevelPercent = data.global.toNextLevelPercent;
var table = "<table><tr><th>Rank</th><th>Global</th><th>RankImg</th><th>Legend</th></tr>";
table += "<tr><td>" + rankName + "</td><td>" + ALStopIntGlobal + "</td><td><img src='" + rankImg + "'></td><td><div class='legend-container'><img class='legend-icon' src='" + icon + "'></div></td></tr>";
table += "</table>";
$("#table").html(table);
// Add this line to define the variable
var progressValue = toNextLevelPercent;
// Use the variable in the progress bar
$('progress').attr('value', progressValue);
//text
$('progress').before('<span>level ' + level + '</span>');
});
}
</script>
<label for="auth">APIKEY:</label>
<input type="text" id="auth" name="auth">
<label for="uid">UID:</label>
<input type="text" id="uid" name="uid">
<button type="button" class="nes-btn is-primary" onclick="createTable()">Search</button>
<div id="table"></div>
<progress class="nes-progress is-primary" value=100 max="100"></progress>
</body>
</html>