<!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;
}
.big-box {
width: 100%;
height: 200px;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
position: relative;
}
.big-box img {
max-height: 100%;
max-width: 100%;
}
#small-boxes {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.box {
width: 180px;
background: white;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.box img {
width: 100%;
height: 100px;
object-fit: cover;
border: 1px solid #aaa;
}
.stopwatch {
margin-top: 10px;
}
.controls button {
margin: 3px;
}
</style>
</head>
<body>
<h2>Interactive Stopwatch Boxes</h2>
<div class="big-box" id="bigBox">
<input type="file" accept="image/*" onchange="loadBigImage(event)">
<img id="bigImage" style="display:none; position: absolute;">
</div>
<button onclick="addBox()">Add Box</button>
<div id="small-boxes"></div>
<script>
let boxCount = 0;
function loadBigImage(event) {
const img = document.getElementById('bigImage');
img.src = URL.createObjectURL(event.target.files[0]);
img.style.display = 'block';
}
function addBox() {
if (boxCount >= 10) return alert("Max 10 boxes allowed.");
boxCount++;
const container = document.getElementById('small-boxes');
const box = document.createElement('div');
box.className = 'box';
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</span>
<div class="controls">
<button onclick="startTimer(${boxCount})">Start</button>
<button onclick="stopTimer(${boxCount})">Stop</button>
<button onclick="resetTimer(${boxCount})">Reset</button>
</div>
</div>
`;
container.appendChild(box);
}
const timers = {};
function loadBoxImage(event, id) {
const img = document.getElementById(`boxImage${id}`);
img.src = URL.createObjectURL(event.target.files[0]);
}
function startTimer(id) {
if (!timers[id]) timers[id] = {seconds: 0, interval: null};
if (timers[id].interval) return;
timers[id].interval = setInterval(() => {
timers[id].seconds++;
document.getElementById(`time${id}`).innerText = formatTime(timers[id].seconds);
}, 1000);
}
function stopTimer(id) {
clearInterval(timers[id]?.interval);
timers[id].interval = null;
}
function resetTimer(id) {
stopTimer(id);
timers[id].seconds = 0;
document.getElementById(`time${id}`).innerText = "00:00:00";
}
function formatTime(totalSeconds) {
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');
return `${h}:${m}:${s}`;
}
</script>
</body>
</html>