<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EMF Detector</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#reading-container {
margin-bottom: 20px;
}
#start-btn, #stop-btn {
width: 100px;
height: 30px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
}
#stop-btn {
background-color: #ccc;
opacity: 0.5;
}
#stop-btn:enabled {
background-color: #4CAF50;
color: #fff;
}
</style>
</head>
<body>
<h1>EMF Detector</h1>
<div id="reading-container">
<p id="magnetic-x">X-axis: <span id="x-value">0</span> μT</p>
<p id="magnetic-y">Y-axis: <span id="y-value">0</span> μT</p>
<p id="magnetic-z">Z-axis: <span id="z-value">0</span> μT</p>
</div>
<button id="start-btn">Start</button>
<button id="stop-btn" disabled>Stop</button>
<script>
let magneticX = document.getElementById('x-value');
let magneticY = document.getElementById('y-value');
let magneticZ = document.getElementById('z-value');
let startBtn = document.getElementById('start-btn');
let stopBtn = document.getElementById('stop-btn');
let sensorData = null;
let intervalId = null;
startBtn.addEventListener('click', startReading);
stopBtn.addEventListener('click', stopReading);
function startReading() {
if ('DeviceMotionEvent' in window) {
window.addEventListener('devicemotion', handleMotionEvent);
intervalId = setInterval(updateReadings, 100);
startBtn.disabled = true;
stopBtn.disabled = false;
} else {
alert('DeviceMotion API not supported');
}
}
function stopReading() {
window.removeEventListener('devicemotion', handleMotionEvent);
clearInterval(intervalId);
startBtn.disabled = false;
stopBtn.disabled = true;
}
function handleMotionEvent(event) {
sensorData = event;
}
function updateReadings() {
if (sensorData && sensorData.magnetism) {
magneticX.innerText = sensorData.magnetism.x.toFixed(2);
magneticY.innerText = sensorData.magnetism.y.toFixed(2);
magneticZ.innerText = sensorData.magnetism.z.toFixed(2);
} else {
console.log("Magnetism data unavailable");
magneticX.innerText = "N/A";
magneticY.innerText = "N/A";
magneticZ.innerText = "N/A";
}
}
</script>
</body>
</html>
