Fastidious · September 16, 2024 15:12
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer Page</title>
    <style>
        body {
            background-color: black;
            color: white;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        #timer {
            font-family: Georgia, 'Times New Roman', Times, monospace;
            font-size: 48px;
            color: white;
        }
    </style>
 </head>
 <body>
    <div>
        <img width="30" height="30" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IndoaXRlIi8+CiAgPGNpcmNsZSBjeD0iMTAwIiBjeT0iMTAwIiByPSI4MCIgZmlsbD0iYmxhY2siLz4KPC9zdmc+" alt="Black rectangle with white circle">
        <p style="color: gray;">
        Greetings, Wanderer.
        </p>
        <p>
        Calm your thoughts.<br/>
        Sink into silence.<br/>
        And simply do nothing.
        </p>
        <p style="color: gray;">
        You&#x27;ve been idle for <span id="timer" >000</span> seconds.
        </p>
    </div>

    <script>
        let start = new Date();

        function updateTimer() {
            const now = new Date();
            const elapsed = now - start;
            const seconds = String(Math.floor(elapsed / 1000)).padStart(3, '0');
            document.getElementById('timer').textContent = `${seconds}`;
        }

        function resetTimer() {
            start = new Date();
        }

        updateTimer();
        setInterval(updateTimer, 1000);

        document.addEventListener('mousemove', resetTimer);
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Timer Page</title>
	<style>
	body {
	background-color: black;
	color: white;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	}
	#timer {
	font-family: Georgia, 'Times New Roman', Times, monospace;
	font-size: 48px;
	color: white;
	}
	</style>
	</head>
	<body>
	<div>
	<img width="30" height="30" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IndoaXRlIi8+CiAgPGNpcmNsZSBjeD0iMTAwIiBjeT0iMTAwIiByPSI4MCIgZmlsbD0iYmxhY2siLz4KPC9zdmc+" alt="Black rectangle with white circle">
	<p style="color: gray;">
	Greetings, Wanderer.
	</p>
	<p>
	Calm your thoughts.<br/>
	Sink into silence.<br/>
	And simply do nothing.
	</p>
	<p style="color: gray;">
	You've been idle for <span id="timer" >000</span> seconds.
	</p>
	</div>

	<script>
	let start = new Date();

	function updateTimer() {
	const now = new Date();
	const elapsed = now - start;
	const seconds = String(Math.floor(elapsed / 1000)).padStart(3, '0');
	document.getElementById('timer').textContent = `${seconds}`;
	}

	function resetTimer() {
	start = new Date();
	}

	updateTimer();
	setInterval(updateTimer, 1000);

	document.addEventListener('mousemove', resetTimer);
	</script>
	</body>
	</html>