make it so you enter a link first and then type 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;
            background-color: #f4f4f4;
        }
        h1, h2 {
            color: #333;
        }
        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        input[type="text"], textarea, input[type="time"] {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        label {
            font-weight: bold;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        #videoList {
            list-style-type: none;
            padding: 0;
        }
        #videoList li {
            padding: 10px;
            background-color: #fff;
            margin-bottom: 5px;
            cursor: pointer;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #videoList li:hover {
            background-color: #ececec;
        }
        #videoDisplay {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        #videoContainer, #notesContainer {
            flex: 1 1 45%;
            background-color: #fff;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        iframe {
            width: 100%;
            height: 100%;
            min-height: 300px;
            border: none;
            border-radius: 4px;
        }
        .notes-section {
            margin-top: 15px;
        }
        .note-item {
            background-color: #f9f9f9;
            padding: 10px;
            margin-bottom: 10px;
            border-left: 4px solid #4CAF50;
            border-radius: 3px;
            position: relative;
        }
        .note-timestamp {
            font-weight: bold;
            color: #555;
        }
        .note-content {
            margin-top: 5px;
        }
        .note-actions {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .note-actions button {
            background-color: transparent;
            border: none;
            color: #888;
            cursor: pointer;
            margin-left: 5px;
            font-size: 14px;
        }
        .note-actions button:hover {
            color: #333;
        }
        @media (max-width: 768px) {
            #videoContainer, #notesContainer {
                flex: 1 1 100%;
            }
        }
    </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>

        <label for="timestamp">Timestamp (optional):</label>
        <input type="time" id="timestamp" name="timestamp" step="1" placeholder="00:00:00">

        <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 id="videoContainer" style="display:none;">
            <h2>Video</h2>
            <iframe id="videoPlayer" src="" allowfullscreen></iframe>
        </div>
        <div id="notesContainer" style="display:none;">
            <h2>Notes</h2>
            <div class="notes-section" id="notesSection">
                <!-- Notes will be populated here -->
            </div>
        </div>
    </div>

    <script>
        // Function to extract YouTube Video ID from URL
        function getYouTubeID(url) {
            const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.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, timestamp) {
            const videoID = getYouTubeID(url);
            if (!videoID) {
                alert('Please enter a valid YouTube URL.');
                return;
            }
            const videos = getVideos();
            // Check for duplicates
            let video = videos.find(video => video.id === videoID);
            if (!video) {
                video = { id: videoID, url: url, notes: [] };
                videos.push(video);
            }
            if (notes.trim() !== "") {
                video.notes.push({ content: notes.trim(), timestamp: timestamp });
            }
            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.innerHTML = `
                    <span>${video.url}</span>
                    <button data-id="${video.id}">Delete</button>
                `;
                // Click on video URL to display
                li.querySelector('span').addEventListener('click', () => displayVideo(video.id));
                // Click on delete button to remove video
                li.querySelector('button').addEventListener('click', (e) => {
                    e.stopPropagation();
                    deleteVideo(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 videoContainer = document.getElementById('videoContainer');
            const videoPlayer = document.getElementById('videoPlayer');
            videoPlayer.src = `https://www.youtube.com/embed/${video.id}?enablejsapi=1&version=3&playerapiid=ytplayer`;

            const notesContainer = document.getElementById('notesContainer');
            const notesSection = document.getElementById('notesSection');
            notesSection.innerHTML = '';

            video.notes.forEach((note, index) => {
                const noteDiv = document.createElement('div');
                noteDiv.className = 'note-item';

                const timestampLink = note.timestamp ? `<span class="note-timestamp"><a href="#" data-id="${id}" data-time="${convertTimeToSeconds(note.timestamp)}">${note.timestamp}</a></span>` : `<span class="note-timestamp">N/A</span>`;
                noteDiv.innerHTML = `
                    <div class="note-content">${sanitizeHTML(note.content)}</div>
                    ${timestampLink}
                    <div class="note-actions">
                        <button onclick="editNote('${id}', ${index})">✏️</button>
                        <button onclick="deleteNote('${id}', ${index})">🗑️</button>
                    </div>
                `;
                // Clicking timestamp links to that time in video
                if (note.timestamp) {
                    noteDiv.querySelector('a').addEventListener('click', (e) => {
                        e.preventDefault();
                        seekVideo(note.time);
                    });
                }
                notesSection.appendChild(noteDiv);
            });

            videoContainer.style.display = 'block';
            notesContainer.style.display = 'block';
            // Scroll to video display
            videoContainer.scrollIntoView({ behavior: 'smooth' });
        }

        // Seek the video to specified time
        function seekVideo(seconds) {
            const iframe = document.getElementById('videoPlayer');
            const player = new YT.Player(iframe);
            if (player && player.seekTo) {
                player.seekTo(seconds, true);
                player.playVideo();
            }
        }

        // Delete a video
        function deleteVideo(id) {
            let videos = getVideos();
            videos = videos.filter(video => video.id !== id);
            saveVideos(videos);
            renderVideoList();
            // Clear video display if deleted video was displayed
            const displayedVideo = document.getElementById('videoPlayer').src.includes(id);
            if (displayedVideo) {
                document.getElementById('videoPlayer').src = "";
                document.getElementById('videoContainer').style.display = 'none';
                document.getElementById('notesContainer').style.display = 'none';
            }
        }

        // Edit a note
        function editNote(videoId, noteIndex) {
            const videos = getVideos();
            const video = videos.find(v => v.id === videoId);
            if (!video) return;
            const note = video.notes[noteIndex];
            const newContent = prompt("Edit your note:", note.content);
            if (newContent !== null) {
                const newTimestamp = prompt("Edit timestamp (hh:mm:ss):", note.timestamp);
                video.notes[noteIndex] = { content: newContent.trim(), timestamp: newTimestamp ? newTimestamp.trim() : "" };
                saveVideos(videos);
                displayVideo(videoId);
            }
        }

        // Delete a note
        function deleteNote(videoId, noteIndex) {
            const videos = getVideos();
            const video = videos.find(v => v.id === videoId);
            if (!video) return;
            if (confirm("Are you sure you want to delete this note?")) {
                video.notes.splice(noteIndex, 1);
                saveVideos(videos);
                displayVideo(videoId);
            }
        }

        // 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();
            const timestamp = document.getElementById('timestamp').value.trim();
            addVideo(url, notes, timestamp);
        });

        // Initial render
        renderVideoList();

        // YouTube IFrame API for controlling video playback
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('videoPlayer', {
                events: {
                    'onReady': onPlayerReady
                }
            });
        }

        function onPlayerReady(event) {
            // Player is ready
        }

        // Convert hh:mm:ss to seconds
        function convertTimeToSeconds(time) {
            const parts = time.split(':').map(part => parseInt(part, 10));
            let seconds = 0;
            if (parts.length === 3) {
                seconds = parts[0] * 3600 + parts[1] * 60 + parts[2];
            } else if (parts.length === 2) {
                seconds = parts[0] * 60 + parts[1];
            } else if (parts.length === 1) {
                seconds = parts[0];
            }
            return seconds;
        }
    </script>

</body>
</html>