121 lines
3.7 KiB
HTML
121 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Phone Mouse Controller</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
height: 100dvh;
|
|
}
|
|
|
|
#mouse {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
width: 95%;
|
|
margin-left: 2.5%;
|
|
border: 5px solid black;
|
|
height: 300px;
|
|
border-radius: 25px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
#leftClick {
|
|
position: fixed;
|
|
bottom: 330px;
|
|
width: 45%;
|
|
height: 50px;
|
|
margin-left: 2.5%;
|
|
border: 2px solid black;
|
|
border-radius: 15px;
|
|
font-weight: bold;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
#mouse svg {
|
|
width: 50px
|
|
}
|
|
|
|
#textForm {
|
|
padding: 30px 2.5% 0 2.5%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px
|
|
}
|
|
#textForm textarea {
|
|
padding: 8px;
|
|
height: 200px;
|
|
border: 2px solid black;
|
|
border-radius: 15px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 100%;
|
|
}
|
|
#textForm input {
|
|
width: 45%;
|
|
height: 50px;
|
|
border-radius: 15px;
|
|
border: 2px solid black;
|
|
background: white;
|
|
align-self: end;
|
|
font-weight: bold;
|
|
}
|
|
|
|
</style>
|
|
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<form id="textForm">
|
|
<textarea id="text" type="text" id="sendtext"></textarea>
|
|
<input type="submit" value="Send"/>
|
|
</form>
|
|
|
|
<div id="leftClick">
|
|
Left Click
|
|
</div>
|
|
|
|
<div id="mouse">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 9V7M12 21C8.68629 21 6 18.3137 6 15V9C6 5.68629 8.68629 3 12 3C15.3137 3 18 5.68629 18 9V15C18 18.3137 15.3137 21 12 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
|
</div>
|
|
|
|
<script>
|
|
const socket = io();
|
|
|
|
if (window.DeviceOrientationEvent) {
|
|
window.addEventListener('deviceorientation', (event) => {
|
|
const data = {
|
|
alpha: event.alpha,
|
|
beta: event.beta,
|
|
gamma: event.gamma
|
|
};
|
|
socket.emit('orientation_data', data);
|
|
});
|
|
document.getElementById("leftClick").addEventListener('click', (event) => {
|
|
socket.emit('left');
|
|
})
|
|
document.getElementById("mouse").addEventListener('touchstart', (event) => {
|
|
socket.emit('touchstart');
|
|
})
|
|
document.getElementById("mouse").addEventListener('touchend', (event) => {
|
|
socket.emit('touchend');
|
|
})
|
|
document.getElementById("textForm").addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
socket.emit('text', document.getElementById("text").value);
|
|
})
|
|
} else {
|
|
alert('Device Orientation not supported on your device/browser.');
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |