<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch Boxes</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
#small-boxes {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.box {
width: 200px;
background: white;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.box img {
width: 100%;
height: 140px;
object-fit: cover;
border: 1px solid #aaa;
}
.stopwatch {
margin-top: 10px;
}
.controls button {
margin: 3px;
}
footer {
margin-top: 30px;
text-align: center;
}
.delete-btn {
background-color: red;
color: white;
border: none;
padding: 5px;
cursor: pointer;
margin-top: 5px;
}
.time-inputs input {
width: 40px;
margin: 2px;
}
</style>
</head>
<body>
<h2>Interactive Stopwatch Boxes</h2>
<button onclick="addBox()">Add Box</button>
<div id="small-boxes"></div>
<footer>
<h3>Music Player</h3>
<audio controls>
<source src="your-audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</footer>
<script>
let boxCount = 0;
const timers = {};
function addBox() {
boxCount++;
const container = document.getElementById('small-boxes');
const box = document.createElement('div');
box.className = 'box';
box.dataset.id = boxCount;
box.innerHTML = `
<input type="file" accept="image/*" onchange="loadBoxImage(event, ${boxCount})">
<img id="boxImage${boxCount}" src="">
<div><input type="text" placeholder="Name"></div>
<div class="stopwatch">
<span id="time${boxCount}">00:00:00.000</span>
<div class="time-inputs">
<input type="number" id="h${boxCount}" min="0" placeholder="hh">
<input type="number" id="m${boxCount}" min="0" max="59" placeholder="mm">
<input type="number" id="s${boxCount}" min="0" max="59" placeholder="ss">
</div>
<div class="controls">
<button onclick="toggleTimer(${boxCount}, this)">Start</button>
<button onclick="resetTimer(${boxCount})">Reset</button>
<button onclick="setTimer(${boxCount})">Set Time</button>
</div>
</div>
<button class="delete-btn" onclick="deleteBox(${boxCount})">Delete</button>
`;
container.appendChild(box);
}
function loadBoxImage(event, id) {
const img = document.getElementById(`boxImage${id}`);
img.src = URL.createObjectURL(event.target.files[0]);
}
function toggleTimer(id, button) {
if (!timers[id]) timers[id] = {milliseconds: 0, interval: null, startTime: null};
if (timers[id].interval) {
clearInterval(timers[id].interval);
timers[id].interval = null;
button.innerText = 'Start';
} else {
timers[id].startTime = Date.now() - timers[id].milliseconds;
timers[id].interval = setInterval(() => {
timers[id].milliseconds = Date.now() - timers[id].startTime;
document.getElementById(`time${id}`).innerText = formatTime(timers[id].milliseconds);
}, 10);
button.innerText = 'Stop';
}
}
function resetTimer(id) {
if (timers[id]) {
clearInterval(timers[id].interval);
timers[id].interval = null;
timers[id].milliseconds = 0;
}
document.getElementById(`time${id}`).innerText = "00:00:00.000";
const btn = document.querySelector(`.box[data-id='${id}'] .controls button`);
if (btn) btn.innerText = 'Start';
}
function setTimer(id) {
const h = parseInt(document.getElementById(`h${id}`).value || 0);
const m = parseInt(document.getElementById(`m${id}`).value || 0);
const s = parseInt(document.getElementById(`s${id}`).value || 0);
const ms = ((h * 3600) + (m * 60) + s) * 1000;
if (!timers[id]) timers[id] = {milliseconds: 0, interval: null, startTime: null};
clearInterval(timers[id].interval);
timers[id].interval = null;
timers[id].milliseconds = ms;
timers[id].startTime = Date.now() - ms;
document.getElementById(`time${id}`).innerText = formatTime(ms);
const btn = document.querySelector(`.box[data-id='${id}'] .controls button`);
if (btn) btn.innerText = 'Start';
}
function formatTime(ms) {
const totalSeconds = Math.floor(ms / 1000);
const h = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
const s = String(totalSeconds % 60).padStart(2, '0');
const msStr = String(ms % 1000).padStart(3, '0');
return `${h}:${m}:${s}.${msStr}`;
}
function deleteBox(id) {
const box = document.querySelector(`.box[data-id='${id}']`);
if (box) {
box.remove();
if (timers[id]) {
clearInterval(timers[id].interval);
delete timers[id];
}
}
}
</script>
</body>
</html>