<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Notes Alarm</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }
        .container {
            text-align: center;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            width: 100%;
        }
        h1 {
            color: #333;
        }
        input, textarea {
            font-size: 16px;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 100%;
        }
        button {
            font-size: 16px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #45a049;
        }
        .note {
            text-align: left;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Notes Alarm</h1>
        <p>Create a note and set a time for it to be read aloud:</p>
        <textarea id="noteText" placeholder="Enter your note"></textarea>
        <input type="time" id="noteTime">
        <button onclick="addNote()">Add Note</button>
        <div id="notes"></div>
        <p id="status" style="color: #333; margin-top: 20px;"></p>
    </div>

    <script>
        let notes = [];
        let alarmTimeouts = [];
        let speechLoops = {};

        function addNote() {
            const noteText = document.getElementById('noteText').value;
            const noteTime = document.getElementById('noteTime').value;

            if (!noteText || !noteTime) {
                document.getElementById('status').textContent = "Please enter a note and select a time.";
                return;
            }

            const note = { text: noteText, time: noteTime };
            notes.push(note);

            renderNotes();
            scheduleNote(note);

            document.getElementById('noteText').value = '';
            document.getElementById('noteTime').value = '';
            document.getElementById('status').textContent = "Note added and scheduled.";
        }

        function renderNotes() {
            const notesContainer = document.getElementById('notes');
            notesContainer.innerHTML = '';

            notes.forEach((note, index) => {
                const noteDiv = document.createElement('div');
                noteDiv.className = 'note';
                noteDiv.innerHTML = `<strong>Time:</strong> ${note.time}<br><strong>Note:</strong> ${note.text}<br><button onclick="removeNote(${index})">Remove</button>`;
                notesContainer.appendChild(noteDiv);
            });
        }

        function scheduleNote(note) {
            const now = new Date();
            const [hours, minutes] = note.time.split(':').map(Number);
            const noteTime = new Date();
            noteTime.setHours(hours, minutes, 0, 0);

            let delay = noteTime - now;
            if (delay < 0) delay += 86400000; // Handle next day

            const timeoutId = setTimeout(() => {
                startTextToSpeechLoop(note.text, note.time);
            }, delay);

            alarmTimeouts.push(timeoutId);
        }

        function startTextToSpeechLoop(text, noteTime) {
            if (speechLoops[noteTime]) return; // Prevent multiple loops for the same note

            function loop() {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.onend = () => {
                    if (speechLoops[noteTime]) {
                        loop();
                    }
                };
                speechSynthesis.speak(utterance);
            }

            speechLoops[noteTime] = true;
            loop();
            document.getElementById('status').textContent = `Reading note: ${text}`;
        }

        function stopTextToSpeechLoop(noteTime) {
            if (speechLoops[noteTime]) {
                speechLoops[noteTime] = false;
                speechSynthesis.cancel();
            }
        }

        function removeNote(index) {
            const note = notes[index];
            if (note) {
                stopTextToSpeechLoop(note.time);
            }

            notes.splice(index, 1);
            resetAlarms();
            notes.forEach(scheduleNote);
            renderNotes();
            document.getElementById('status').textContent = "Note removed.";
        }

        function resetAlarms() {
            alarmTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
            alarmTimeouts = [];
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('status').textContent = "No notes yet. Add a note to get started.";
        });
    </script>
</body>
</html>
