index1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style1.css">
    <title>Pomodoro Clock</title>
</head>
<body>
    <div class="container">
        <div class="countdown">
            <h1 id="timer">25:00</h1>
        </div>
        <div class="controls">
            <div class="session">
                <h2>Session Time</h2>
                <div class="time-control">
                    <button id="session-increment">+</button>
                    <span id="session-length">25</span>
                    <button id="session-decrement">-</button>
                </div>
            </div>
            <div class="break">
                <h2>Break Time</h2>
                <div class="time-control">
                    <button id="break-increment">+</button>
                    <span id="break-length">5</span>
                    <button id="break-decrement">-</button>
                </div>
            </div>
            <div class="timer-controls">
                <button id="start-stop">Start</button>
                <button id="reset">Reset</button>
            </div>
        </div>
    </div>
    <script src="./script1.js"></script>
</body>
</html>