tesses-profileicon/Tesses.ProfileIcon.Browser/index.html

29 lines
1007 B
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tesses.ProfileIcon</title>
</head>
<body>
<h1>Tesses.ProfileIcon</h1>
<img src="./image.png?name=Your+Name" alt="Your Name" id="icon" width="48" height="48">
<br>
<input type="text" placeholder="Your Name" onkeyup="change_image()" id="name">
<br>
<label for="custom">Custom Text: </label>
<input type="checkbox" onchange="change_image()" id="custom">
<script>
const image = document.getElementById('icon');
const text = document.getElementById('name');
const custom =document.getElementById('custom');
function change_image()
{
image.src = `./image.png?name=${encodeURIComponent(text.value)}&custom=${custom.checked ? 'true' : 'false'}`;
image.alt=text.value;
}
</script>
</body>
</html>