<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Break Time Tracker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
    <h2>BREAKTIME TRACKER</h2>
    <div class="main">
        <table id="breakTable">
            <thead>
                <tr>
                    <th>OUT</th>
                    <th>IN</th>
                    <th>BREAK TIME</th>
                    <th>NOTES</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table rows will be dynamically generated here -->
            </tbody>
        </table>
        
        <div class="summary">
            <div><span>Total Break Time:</span> <span id="totalBreakTime">00:00</span></div>
            <div><span>Allowed Break Time:</span> <span>01:20</span></div>
            <div><span>Over Break Time:</span> <span id="overBreakTime">00:00</span></div>
        </div>
    </div>

    <div class="timestamp">
        <button id="outButton" onclick="addTimestamp('out')">Add Out Timestamp</button>
        <button id="inButton" onclick="addTimestamp('in')" disabled>Add In Timestamp</button>
        <button id="saveButton" onclick="saveToFile()">Save</button>
        <button id="clearButton" onclick="clearContent()">Clear All</button>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to right, #575757, #000000);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #000000;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.main {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

table {
    width: 80%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-right: 15px;
}

th, td {
    padding: 10px;
    text-align: center;
}

th {
    background-color: #575757;
    color: white;
}

td {
    background-color: #ffffff;
}

tbody tr:nth-child(even) td {
    background-color: #ffffff;
}

.summary {
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 30px;
}

.summary div {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    background-color: #575757;
    color: #ffffff;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary div span {
    font-weight: bold;
}

.timestamp {
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.timestamp button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #575757;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.timestamp button:disabled {
    background-color: #999;
    cursor: not-allowed;
}

.timestamp button:hover:not(:disabled) {
    background-color: #878787;
}

.dropdown {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #FFFFFF;
    cursor: pointer;
}

let currentRow = -1;

    function addTimestamp(type) {
        const table = document.getElementById('breakTable').getElementsByTagName('tbody')[0];
        const now = new Date();
        const formattedTime = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true });
        const formattedDate = now.toLocaleDateString();
        const displayTime = `${formattedDate} ${formattedTime}`;

        if (type === 'out') {
            currentRow++;
            const row = table.insertRow(currentRow);
            row.insertCell(0).innerText = displayTime;
            row.insertCell(1).innerText = '---';
            row.insertCell(2).innerText = '00:00';
            const notesCell = row.insertCell(3);
            notesCell.appendChild(createDropdown());
            document.getElementById('inButton').disabled = false; // Enable 'In' button
        } else if (type === 'in' && currentRow >= 0) {
            const row = table.rows[currentRow];
            row.cells[1].innerText = displayTime;

            const outDateTime = new Date(row.cells[0].innerText);
            const inDateTime = new Date(displayTime);
			const outTime = new Date(outDateTime[0] + ' ' + outDateTime[1] + ' ' + outDateTime[2]);
            const inTime = new Date(inDateTime[0] + ' ' + inDateTime[1] + ' ' + inDateTime[2]);

            const breakTime = calculateBreakTime(outDateTime, inDateTime);
            row.cells[2].innerText = breakTime;
            updateTotalBreakTime();
            document.getElementById('inButton').disabled = true; // Disable 'In' button until next 'Out'
        }
    }

    function createDropdown() {
        const select = document.createElement('select');
        select.className = 'dropdown';
        select.innerHTML = `
            <option value="">Select...</option>
            <option value="Away">Away</option>
            <option value="Mobile Usage">Mobile Usage</option>
            <option value="Sleeping">Sleeping</option>
        `;
        return select;
    }

    function calculateBreakTime(outTime, inTime) {
        const diffMs = inTime - outTime;
        const diffHrs = Math.floor(diffMs / 3600000);
        const diffMins = Math.floor((diffMs % 3600000) / 60000);
        return `${pad(diffHrs)}:${pad(diffMins)}`;
    }

    function pad(number) {
        return number < 10 ? `0${number}` : number;
    }

    function updateTotalBreakTime() {
        const table = document.getElementById('breakTable').getElementsByTagName('tbody')[0];
        let totalMs = 0;

        for (let i = 0; i < table.rows.length; i++) {
            const cells = table.rows[i].cells;
            const [hrs, mins] = cells[2].innerText.split(':').map(Number);
            totalMs += ((hrs * 60 + mins) * 60) * 1000;
        }

        const totalHrs = Math.floor(totalMs / 3600000);
        const totalMins = Math.floor((totalMs % 3600000) / 60000);

        document.getElementById('totalBreakTime').innerText = `${pad(totalHrs)}:${pad(totalMins)}`;
        
          const allowableBreakMs = (1 * 3600 + 20 * 60) * 1000;
        const overBreakMs = Math.max(totalMs - allowableBreakMs, 0);

        const overHrs = Math.floor(overBreakMs / 3600000);
        const overMins = Math.floor((overBreakMs % 3600000) / 60000);

        document.getElementById('overBreakTime').innerText = `${pad(overHrs)}:${pad(overMins)}`;
    }
	function saveToFile() {
    const table = document.getElementById('breakTable').getElementsByTagName('tbody')[0];
    const summary = document.querySelectorAll('.summary div span');
	const today = new Date();
    const formattedDate = `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`;

    let content = '';

    // Loop through table rows to collect data
    for (let i = 0; i < table.rows.length; i++) {
        const cells = table.rows[i].cells;
        const outTime = cells[0].innerText.trim();
        const inTime = cells[1].innerText.trim();
        const breakTime = cells[2].innerText.trim();
        const notes = cells[3].querySelector('select').value;

        content += `${outTime} - ${inTime} - ${breakTime} - ${notes}\n`;
    }

        // Add summary data
        content += `\nTotal Break Time: ${document.getElementById('totalBreakTime').innerText}`;

        // Create a Blob with the content
        const blob = new Blob([content], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);

        // Create a link element, simulate click and clean up
        const a = document.createElement('a');
        a.href = url;
        a.download = `${formattedDate}.txt`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }

    function clearContent() {
        const table = document.getElementById('breakTable').getElementsByTagName('tbody')[0];
        table.innerHTML = ''; // Clear table rows

        // Reset total break time
        document.getElementById('totalBreakTime').innerText = '00:00';
        document.getElementById('overBreakTime').innerText = '00:00';

        // Reset currentRow variable
        currentRow = -1;

        // Disable 'In' button
        document.getElementById('inButton').disabled = true;
    }

    function initializePage() {
        loadDataFromStorage();
    }

    function loadDataFromStorage() {
        const data = localStorage.getItem('breakTimeData');
        if (data) {
            const parsedData = JSON.parse(data);

            // Load total break time and over break time
            document.getElementById('totalBreakTime').innerText = parsedData.totalBreakTime;
            document.getElementById('overBreakTime').innerText = parsedData.overBreakTime;

            // Load table rows
            const table = document.getElementById('breakTable').getElementsByTagName('tbody')[0];
            table.innerHTML = ''; // Clear existing rows

            parsedData.rows.forEach(rowData => {
                const row = table.insertRow();
                row.insertCell().innerText = rowData.outTime;
                row.insertCell().innerText = rowData.inTime;
                row.insertCell().innerText = rowData.breakTime;

                const notesCell = row.insertCell();
                notesCell.appendChild(createDropdown());
                const dropdown = notesCell.querySelector('select');
                dropdown.value = rowData.notes;
            });

            // Update currentRow variable
            currentRow = parsedData.rows.length - 1;
        }
    }

    // Function to save data to localStorage
    function saveDataToStorage() {
        const data = {
            rows: [],
            totalBreakTime: document.getElementById('totalBreakTime').innerText,
            overBreakTime: document.getElementById('overBreakTime').innerText
        };

        const table = document.getElementById('breakTable').getElementsByTagName('tbody')[0];

        // Loop through table rows to save data
        for (let i = 0; i < table.rows.length; i++) {
            const cells = table.rows[i].cells;
            const row = {
                outTime: cells[0].innerText.trim(),
                inTime: cells[1].innerText.trim(),
                breakTime: cells[2].innerText.trim(),
                notes: cells[3].querySelector('select').value
            };
            data.rows.push(row);
        }

        // Store data in localStorage
        localStorage.setItem('breakTimeData', JSON.stringify(data));
    }

    // Add event listener to save data when leaving the page or refreshing
    window.addEventListener('beforeunload', function() {
        saveDataToStorage();
    });

    // Initialize the page
    initializePage();

make this a single html file