sync/ColorPing
1
0
Fork 0
mirror of https://github.com/Kioubit/ColorPing synced 2024-11-22 07:40:42 +08:00
Code Issues Projects Releases Packages Wiki Activity

html: Support mobile & simplify

Browse source
This commit is contained in:
Kioubit 2024-06-18 15:49:17 +03:00
parent 8f2ff955e9
commit cc9be27ab6
1 changed files with 98 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
template.html
View file

@ -2,46 +2,64 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>IPV6Canvas</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>IPV6 Canvas</title>
<style> <style>
body{ body {
background-color: lightslategrey; background-color: lightslategrey;
} }
#display{
#display {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
margin-top: 1em; margin-top: 2em;
display: block; display: block;
border: black 2px; border: black 2px;
} }
#collapsed-information{
display: none; .information {
& {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 10em;
top: 0;
opacity: 84%;
color: white; color: white;
background-color: rgb(100, 100, 200); background-color: rgb(100, 100, 200);
/* Collapsed */
max-width: 10em;
top: 0;
opacity: 84%;
} }
#information{
position: absolute; & > :first-child {
left: 0; display: none;
right: 0; }
margin-left: auto;
margin-right: auto; & > :nth-child(2) {
width: 30em; display: block;
}
}
.information.active {
& {
max-width: 30em;
top: 1em; top: 1em;
opacity: 80%; opacity: 80%;
padding-left: 0.6em; padding-left: 0.6em;
padding-right: 0.6em; padding-right: 0.6em;
padding-bottom: 0.6em; padding-bottom: 0.6em;
color: white;
background-color: rgb(100, 100, 200);
} }
& > :first-child {
display: block;
}
& > :nth-child(2) {
display: none;
}
}
.dot { .dot {
height: 25px; height: 25px;
width: 25px; width: 25px;
@ -50,42 +68,67 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.center {
align-items: center; .text-center {
display: flex; text-align: center;
justify-content: center; }
.text-underline {
text-decoration: underline;
} }
</style> </style>
</head> </head>
<body> <body>
<div> <div>
<div id="collapsed-information"> <div class="information active" id="information">
<div class="center"><a style="text-decoration: underline" onclick="infoHandler(true)">Show information</a></div> <div>
</div>
<div id="information">
<h2>IPv6 Canvas</h2> <h2>IPv6 Canvas</h2>
<div style="overflow-x: auto">
<b>ping {{.BaseIP}}XXXX:YYYY:11RR:GGBB</b> <b>ping {{.BaseIP}}XXXX:YYYY:11RR:GGBB</b>
<br>Substitute coordinates and color, then ping. Values are hexadecimal.<br> <br>Substitute coordinates and color, then ping. Values are hexadecimal.
</div>
<br>Canvas size: {{.CanvasWidth}}x{{.CanvasHeight}}<br> <br>Canvas size: {{.CanvasWidth}}x{{.CanvasHeight}}<br>
Connection status: <span id="connectionStatus" class="dot"></span> Connection status: <span id="connectionStatus" class="dot"></span>
<span style="float: right"><a style="text-decoration: underline" onclick="infoHandler(false)">Collapse</a></span> <span style="float: right">
<br> <a class="text-underline" onclick="infoHandler()">Collapse</a>
</span>
</div> </div>
<canvas id="display" width="1024" height="1024"></canvas> <div class="text-center">
<a class="text-underline" onclick="infoHandler()">Show information</a>
</div>
</div>
<canvas id="display"></canvas>
</div> </div>
</body> </body>
<script> <script>
const canvas = document.getElementById("display"); const canvas = document.getElementById("display");
const ctx = canvas.getContext("2d") const ctx = canvas.getContext("2d")
const evtSource = new EventSource("/stream");
ctx.imageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false; ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false;
//ctx.scale(1.9, 1.9) canvas.width = 1024;
canvas.height = 1024;
async function resizeCanvas() {
let desiredSize = document.documentElement.clientWidth - 20;
if (desiredSize > 1024) {
desiredSize = 1024
}
canvas.style.width = desiredSize.toString() + "px";
canvas.style.height = desiredSize.toString() + "px";
}
window.onresize = resizeCanvas;
resizeCanvas()
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.font = "30px Arial"; ctx.font = "30px Arial";
ctx.fillText("Please wait...", 0, 200,170); ctx.fillText("Please wait...", 0, 200, 170);
const evtSource = new EventSource("/stream");
evtSource.addEventListener("u", (event) => { evtSource.addEventListener("u", (event) => {
let img = new Image(); let img = new Image();
img.src = "data:image/png;base64," + event.data; img.src = "data:image/png;base64," + event.data;
@ -98,19 +141,15 @@
}); });
evtSource.onerror = (err) => { evtSource.onerror = (err) => {
console.log(err) console.log(err)
document.getElementById("connectionStatus").style.setProperty("background-color","#d20000") document.getElementById("connectionStatus").style.setProperty("background-color", "#d20000")
}; };
evtSource.onopen = () => { evtSource.onopen = () => {
document.getElementById("connectionStatus").style.setProperty("background-color","#00a30e") document.getElementById("connectionStatus").style.setProperty("background-color", "#00a30e")
}; };
function infoHandler(expand) {
if (expand) { function infoHandler() {
document.getElementById("collapsed-information").style.display = "none"; document.getElementById("information").classList.toggle("active");
document.getElementById("information").style.display = "block"; window.scrollTo({top: 0})
} else {
document.getElementById("collapsed-information").style.display = "block";
document.getElementById("information").style.display = "none";
}
} }
</script> </script>
</html> </html>