<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rust-ticker Web Example</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.demo-box {
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
background-color: #f9f9f9;
}
.timer-display, .stopwatch-display {
font-size: 2em;
font-family: monospace;
margin: 10px 0;
text-align: center;
}
button {
padding: 8px 16px;
margin: 5px;
border-radius: 4px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.buttons {
display: flex;
justify-content: center;
gap: 10px;
}
code {
background-color: #f1f1f1;
padding: 2px 4px;
border-radius: 3px;
font-family: monospace;
}
</style>
</head>
<body>
<h1>rust-ticker Web Example</h1>
<p>This example demonstrates how to use the <code>rust-ticker</code> library in a web browser.</p>
<div class="container">
<div class="demo-box">
<h2>Timer Example</h2>
<p>A 5-second countdown timer:</p>
<div class="timer-display" id="timerDisplay">00:00:05</div>
<div class="buttons">
<button id="startTimer">Start Timer</button>
<button id="resetTimer">Reset</button>
</div>
</div>
<div class="demo-box">
<h2>Stopwatch Example</h2>
<p>A simple stopwatch:</p>
<div class="stopwatch-display" id="stopwatchDisplay">00:00:00</div>
<div class="buttons">
<button id="startStopwatch">Start</button>
<button id="stopStopwatch">Stop</button>
<button id="resetStopwatch">Reset</button>
</div>
</div>
</div>
<div class="demo-box">
<h2>Code Example</h2>
<pre><code>
// Import the Timer and Stopwatch classes
import { Timer, Stopwatch } from 'rust-ticker';
// Create a timer for 5 seconds
const timer = new Timer(0, 0, 5);
// Start the timer
timer.start().then(() => {
console.log('Timer completed!');
});
// Create a stopwatch
const stopwatch = new Stopwatch();
// Start the stopwatch
stopwatch.start();
// Stop the stopwatch after some time
setTimeout(() => {
const elapsed = stopwatch.stop();
console.log(`Elapsed time: ${elapsed} seconds`);
// Reset the stopwatch
stopwatch.reset();
}, 3000);
</code></pre>
</div>
<script type="module">
import { Timer, Stopwatch } from '../dist/web/clockjs.js';
const timerDisplay = document.getElementById('timerDisplay');
const startTimerBtn = document.getElementById('startTimer');
const resetTimerBtn = document.getElementById('resetTimer');
let timer = new Timer(0, 0, 5);
let timerInterval;
function formatTime(hours, minutes, seconds) {
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
function updateTimerDisplay() {
const totalSeconds = timer.duration;
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
timerDisplay.textContent = formatTime(hours, minutes, seconds);
}
startTimerBtn.addEventListener('click', async () => {
clearInterval(timerInterval);
timer = new Timer(0, 0, 5);
updateTimerDisplay();
startTimerBtn.disabled = true;
timerInterval = setInterval(() => {
const remaining = timer.duration - 1;
const hours = Math.floor(remaining / 3600);
const minutes = Math.floor((remaining % 3600) / 60);
const seconds = remaining % 60;
if (remaining >= 0) {
timerDisplay.textContent = formatTime(hours, minutes, seconds);
} else {
clearInterval(timerInterval);
}
}, 1000);
await timer.start();
clearInterval(timerInterval);
timerDisplay.textContent = "Completed!";
startTimerBtn.disabled = false;
setTimeout(() => {
timerDisplay.textContent = "00:00:05";
}, 2000);
});
resetTimerBtn.addEventListener('click', () => {
clearInterval(timerInterval);
timer = new Timer(0, 0, 5);
timerDisplay.textContent = "00:00:05";
startTimerBtn.disabled = false;
});
const stopwatchDisplay = document.getElementById('stopwatchDisplay');
const startStopwatchBtn = document.getElementById('startStopwatch');
const stopStopwatchBtn = document.getElementById('stopStopwatch');
const resetStopwatchBtn = document.getElementById('resetStopwatch');
let stopwatch = new Stopwatch();
let stopwatchInterval;
startStopwatchBtn.addEventListener('click', async () => {
if (!stopwatch.is_running) {
await stopwatch.start();
stopwatchInterval = setInterval(() => {
const totalSeconds = stopwatch.current_time;
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
stopwatchDisplay.textContent = formatTime(hours, minutes, seconds);
}, 100);
startStopwatchBtn.textContent = "Running...";
startStopwatchBtn.disabled = true;
}
});
stopStopwatchBtn.addEventListener('click', async () => {
if (stopwatch.is_running) {
const elapsed = await stopwatch.stop();
clearInterval(stopwatchInterval);
startStopwatchBtn.textContent = "Start";
startStopwatchBtn.disabled = false;
}
});
resetStopwatchBtn.addEventListener('click', async () => {
await stopwatch.reset();
clearInterval(stopwatchInterval);
stopwatchDisplay.textContent = "00:00:00";
startStopwatchBtn.textContent = "Start";
startStopwatchBtn.disabled = false;
});
</script>
</body>
</html>