121 lines
3.6 KiB
HTML
121 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>MANIFOLD</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background: #1a1a2e;
|
||
|
|
color: #ffffff;
|
||
|
|
font-family: sans-serif;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 14px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 3px;
|
||
|
|
color: #888;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.balance {
|
||
|
|
font-size: 48px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #ffd700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.unit {
|
||
|
|
font-size: 18px;
|
||
|
|
color: #ffd700;
|
||
|
|
margin-top: 4px;
|
||
|
|
margin-bottom: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #555;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-msg {
|
||
|
|
font-size: 16px;
|
||
|
|
color: #888;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0 40px;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<img class="logo" src="manifold-icon.svg">
|
||
|
|
<div class="title">Universal Shape Income</div>
|
||
|
|
<div class="balance" id="balance">...</div>
|
||
|
|
<div class="unit">VERTS</div>
|
||
|
|
<div class="status" id="status">Fetching balance...</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var API_BASE = "https://wizards.cyou/api";
|
||
|
|
|
||
|
|
function fetchBalance(username) {
|
||
|
|
fetch(API_BASE + "/balance/" + username)
|
||
|
|
.then(function(r) { return r.json(); })
|
||
|
|
.then(function(data) {
|
||
|
|
document.getElementById("balance").textContent = data.balance;
|
||
|
|
document.getElementById("status").textContent =
|
||
|
|
"Earning 1 VERT per second while connected";
|
||
|
|
})
|
||
|
|
.catch(function(e) {
|
||
|
|
document.getElementById("status").textContent = "Error fetching balance";
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
if (typeof EventBridge !== "undefined") {
|
||
|
|
EventBridge.scriptEventReceived.connect(function(data) {
|
||
|
|
var msg = JSON.parse(data);
|
||
|
|
if (msg.type === "username") {
|
||
|
|
if (!msg.username) {
|
||
|
|
showLoggedOut();
|
||
|
|
} else {
|
||
|
|
// fetch immediately then every second
|
||
|
|
fetchBalance(msg.username);
|
||
|
|
setInterval(function() {
|
||
|
|
fetchBalance(msg.username);
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: "ready" }));
|
||
|
|
} else {
|
||
|
|
fetchBalance("testuser");
|
||
|
|
setInterval(function() { fetchBalance("testuser"); }, 1000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function showLoggedOut() {
|
||
|
|
document.getElementById("balance").textContent = "—";
|
||
|
|
document.getElementById("status").textContent = "";
|
||
|
|
document.querySelector(".unit").style.display = "none";
|
||
|
|
var msg = document.createElement("div");
|
||
|
|
msg.className = "login-msg";
|
||
|
|
msg.textContent = "Login to your Overte account to receive Universal Shape Income";
|
||
|
|
document.body.appendChild(msg);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = init;
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|