This commit is contained in:
Nordi98 2025-08-04 20:32:58 +02:00
parent f57a27b8df
commit 4b4bb3b0ab
76 changed files with 6389 additions and 0 deletions

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jg-textui-web</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="text-ui">This is some text</div>

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

View file

@ -0,0 +1,38 @@
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

* {
margin: 0;
padding: 0;
}

body {
font-family: "Plus Jakarta Sans", sans-serif;
background: none;
}

.text-ui {
background: #212529;
border: 1px solid #42484e;
padding: 8px 10px;
border-radius: 7px;
color: white;
position: absolute;
left: -100%;
top: 50%;
transform: translateY(-50%);
transition: 0.5s ease-in-out;
user-select: none;
}

.text-ui kbd {
padding: 1px 8px;
background: #ccc;
color: #212529;
font-weight: bold;
border-radius: 5px;
border-bottom: 3px solid #777;
display: inline-block;
vertical-align: middle;
margin-right: 3px;
font-size: 17px;
}

View file

@ -0,0 +1,19 @@
(function () {
const textUI = document.querySelector(".text-ui");

window.addEventListener("message", (evt) => {
const { data } = evt;

if (!data) return false;

if (data.type === "show") {
// If the string contains a key in square brackets (like [E]), then style it differently!
let str = data.text.replaceAll(/\[(.*?)\]/g, "<kbd>$1</kbd>");

textUI.style.left = "20px";
textUI.innerHTML = str;
} else if (data.type === "hide") {
textUI.style.left = "-100%";
}
});
})();