make it so the user can watch and take notes
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YouTube Notes App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1, h2 {
            color: #333;
        }
        form {
            margin-bottom: 30px;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #videoList {
            list-style-type: none;
            padding: 0;
        }
        #videoList li {
            padding: 10px;
            background-color: #f9f9f9;
            margin-bottom: 5px;
            cursor: pointer;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        #videoList li:hover {
            background-color: #ececec;
        }
        #videoDisplay {
            margin-top: 30px;
        }
        iframe {
            max-width: 100%;
            height: 400px;
        }
        .notes {
            margin-top: 15px;
            padding: 10px;
            background-color: #f1f1f1;
            border-left: 4px solid #4CAF50;
        }
    </style>
</head>
<body>

    <h1>YouTube Notes App</h1>

    <form id="videoForm">
        <label for="videoURL">YouTube Video URL:</label>
        <input type="text" id="videoURL" name="videoURL" placeholder="Enter YouTube URL" required>

        <label for="notes">Notes:</label>
        <textarea id="notes" name="notes" rows="4" placeholder="Enter your notes here..." required></textarea>

        <button type="submit">Save Video</button>
    </form>

    <h2>Saved Videos</h2>
    <ul id="videoList">
        <!-- Video items will be populated here -->
    </ul>

    <div id="videoDisplay">
        <!-- Embedded video and notes will appear here -->
    </div>

    <script>
        // Function to extract YouTube Video ID from URL
        function getYouTubeID(url) {
            const regex = /(?:https?:\/\/)?(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([^\s&]+)/;
            const match = url.match(regex);
            return match ? match[1] : null;
        }

        // Retrieve videos from localStorage or initialize empty array
        function getVideos() {
            const videos = localStorage.getItem('videos');
            return videos ? JSON.parse(videos) : [];
        }

        // Save videos array to localStorage
        function saveVideos(videos) {
            localStorage.setItem('videos', JSON.stringify(videos));
        }

        // Add a new video
        function addVideo(url, notes) {
            const videoID = getYouTubeID(url);
            if (!videoID) {
                alert('Please enter a valid YouTube URL.');
                return;
            }
            const videos = getVideos();
            // Check for duplicates
            if (videos.some(video => video.id === videoID)) {
                alert('This video is already saved.');
                return;
            }
            videos.push({ id: videoID, url: url, notes: notes });
            saveVideos(videos);
            renderVideoList();
            document.getElementById('videoForm').reset();
        }

        // Render the list of saved videos
        function renderVideoList() {
            const videos = getVideos();
            const videoList = document.getElementById('videoList');
            videoList.innerHTML = '';
            videos.forEach(video => {
                const li = document.createElement('li');
                li.textContent = video.url;
                li.dataset.id = video.id;
                li.addEventListener('click', () => displayVideo(video.id));
                videoList.appendChild(li);
            });
        }

        // Display the selected video and its notes
        function displayVideo(id) {
            const videos = getVideos();
            const video = videos.find(v => v.id === id);
            if (!video) return;

            const videoDisplay = document.getElementById('videoDisplay');
            videoDisplay.innerHTML = `
                <h2>Video</h2>
                <iframe src="https://www.youtube.com/embed/${video.id}" frameborder="0" allowfullscreen></iframe>
                <div class="notes">
                    <h3>Notes:</h3>
                    <p>${sanitizeHTML(video.notes)}</p>
                </div>
            `;
            // Scroll to video display
            videoDisplay.scrollIntoView({ behavior: 'smooth' });
        }

        // Simple sanitization to prevent XSS
        function sanitizeHTML(str) {
            const temp = document.createElement('div');
            temp.textContent = str;
            return temp.innerHTML;
        }

        // Handle form submission
        document.getElementById('videoForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const url = document.getElementById('videoURL').value.trim();
            const notes = document.getElementById('notes').value.trim();
            addVideo(url, notes);
        });

        // Initial render
        renderVideoList();
    </script>

</body>
</html>