Add 2 files

index.html

@@ -120,6 +120,19 @@
             color: #3b82f6;
             transform: scale(1.1);
         }
+        /* Style for formatted text preview */
+        .formatted-text {
+            white-space: pre-line;
+        }
+        .formatted-text b, .formatted-text strong {
+            font-weight: bold;
+        }
+        .formatted-text i, .formatted-text em {
+            font-style: italic;
+        }
+        .formatted-text u {
+            text-decoration: underline;
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -241,6 +254,8 @@
                         <button type="button" id="placeholderBtn" class="rich-text-button">[Variable]</button>
                     </div>
                     <textarea id="scriptContent" rows="8" class="w-full px-3 py-2 border rounded" required></textarea>
+                    <div class="mt-2 text-sm text-gray-500">Preview:</div>
+                    <div id="contentPreview" class="formatted-text p-2 border rounded bg-gray-50 mt-1"></div>
                 </div>
                 
                 <div class="flex justify-end gap-2 pt-4 border-t">
@@ -352,6 +367,7 @@
         const placeholderBtn = document.getElementById('placeholderBtn');
         const toggleDatesBtn = document.getElementById('toggleDatesBtn');
         const togglePinnedDatesBtn = document.getElementById('togglePinnedDatesBtn');
+        const contentPreview = document.getElementById('contentPreview');
 
         // State
         let showDates = true;
@@ -380,12 +396,74 @@
             searchInput.addEventListener('input', handleSearch);
             closeModalBtn.addEventListener('click', closeModalHandler);
             cancelScriptBtn.addEventListener('click', closeModalHandler);
-            boldBtn.addEventListener('click', () => formatText('bold'));
-            italicBtn.addEventListener('click', () => formatText('italic'));
-            underlineBtn.addEventListener('click', () => formatText('underline'));
+            boldBtn.addEventListener('click', () => applyFormatting('bold'));
+            italicBtn.addEventListener('click', () => applyFormatting('italic'));
+            underlineBtn.addEventListener('click', () => applyFormatting('underline'));
             placeholderBtn.addEventListener('click', insertPlaceholder);
             toggleDatesBtn.addEventListener('click', toggleDatesVisibility);
             togglePinnedDatesBtn.addEventListener('click', toggleDatesVisibility);
+            scriptContent.addEventListener('input', updateContentPreview);
+        }
+
+        // Apply formatting to selected text
+        function applyFormatting(formatType) {
+            const textarea = scriptContent;
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const selectedText = textarea.value.substring(start, end);
+            const beforeText = textarea.value.substring(0, start);
+            const afterText = textarea.value.substring(end);
+            
+            let formattedText = '';
+            let cursorOffset = 0;
+            
+            switch(formatType) {
+                case 'bold':
+                    formattedText = `**${selectedText}**`;
+                    cursorOffset = 2;
+                    break;
+                case 'italic':
+                    formattedText = `_${selectedText}_`;
+                    cursorOffset = 1;
+                    break;
+                case 'underline':
+                    formattedText = `<u>${selectedText}</u>`;
+                    cursorOffset = 4;
+                    break;
+            }
+            
+            if (start !== end) {
+                // Text is selected, wrap it with formatting
+                textarea.value = beforeText + formattedText + afterText;
+                // Set cursor position after the formatted text
+                textarea.setSelectionRange(
+                    start + cursorOffset, 
+                    end + cursorOffset
+                );
+            } else {
+                // No text selected, insert formatting tags and place cursor between them
+                textarea.value = beforeText + formattedText + afterText;
+                textarea.setSelectionRange(
+                    start + cursorOffset, 
+                    start + cursorOffset
+                );
+            }
+            
+            textarea.focus();
+            updateContentPreview();
+        }
+
+        // Update content preview
+        function updateContentPreview() {
+            // Convert markdown-style formatting to HTML
+            let previewText = scriptContent.value
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')  // bold
+                .replace(/\_(.*?)\_/g, '<em>$1</em>')               // italic
+                .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')             // underline
+                .replace(/\n/g, '<br>')                             // line breaks
+                .replace(/\[(.*?)\]/g, '<span class="bg-blue-100 text-blue-800 px-1 rounded">[$1]</span>'); // placeholders
+            
+            contentPreview.innerHTML = previewText;
         }
 
         // Toggle dates visibility
@@ -500,7 +578,7 @@
                 const dateInfo = showDates ? `
                     <div class="mt-3 text-xs text-gray-400">
                         Created: ${formatDate(script.createdAt)}
-                        ${script.updatedAt ? `<br>Updated: ${formatDate(script.updatedAt)}` : ''}
+                        ${script.updatedAt ? `<br>Updated: ${formatDate(script.updatedAt)}</br>` : ''}
                     </div>
                 ` : '';
                 
@@ -525,7 +603,7 @@
                             </button>
                         </div>
                     </div>
-                    <div class="mt-2 whitespace-pre-line text-gray-700">${highlightedContent}</div>
+                    <div class="mt-2 whitespace-pre-line text-gray-700">${formatScriptContent(highlightedContent)}</div>
                     ${dateInfo}
                 `;
                 scriptsContainer.appendChild(scriptElement);
@@ -541,6 +619,16 @@
             }
         }
 
+        // Format script content with HTML tags
+        function formatScriptContent(content) {
+            return content
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')  // bold
+                .replace(/\_(.*?)\_/g, '<em>$1</em>')               // italic
+                .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')             // underline
+                .replace(/\n/g, '<br>')                             // line breaks
+                .replace(/\[(.*?)\]/g, '<span class="bg-blue-100 text-blue-800 px-1 rounded">[$1]</span>'); // placeholders
+        }
+
         // Render pinned scripts
         function renderPinnedScripts() {
             pinnedScriptsContainer.innerHTML = '';
@@ -570,7 +658,7 @@
                 const dateInfo = showDates ? `
                     <div class="mt-3 text-xs text-gray-400">
                         Created: ${formatDate(script.createdAt)}
-                        ${script.updatedAt ? `<br>Updated: ${formatDate(script.updatedAt)}` : ''}
+                        ${script.updatedAt ? `<br>Updated: ${formatDate(script.updatedAt)}</br>` : ''}
                     </div>
                 ` : '';
                 
@@ -595,7 +683,7 @@
                             </button>
                         </div>
                     </div>
-                    <div class="mt-2 whitespace-pre-line text-gray-700">${script.content}</div>
+                    <div class="mt-2 whitespace-pre-line text-gray-700">${formatScriptContent(script.content)}</div>
                     ${dateInfo}
                 `;
                 pinnedScriptsContainer.appendChild(scriptElement);
@@ -636,7 +724,14 @@
         function copyScript(id) {
             const script = scripts.find(s => s.id === id);
             if (script) {
-                const textToCopy = `${script.title}\n\n${script.content}`;
+                // Remove formatting tags when copying to clipboard
+                const cleanContent = script.content
+                    .replace(/\*\*/g, '')
+                    .replace(/_/g, '')
+                    .replace(/<u>/g, '')
+                    .replace(/<\/u>/g, '');
+                
+                const textToCopy = `${script.title}\n\n${cleanContent.replace(/<[^>]*>/g, '')}`;
                 navigator.clipboard.writeText(textToCopy).then(() => {
                     showCopyNotification();
                 }).catch(err => {
@@ -662,6 +757,7 @@
             modalTitle.textContent = 'Add New Script';
             renderCategorySelector();
             scriptModal.classList.remove('hidden');
+            contentPreview.innerHTML = '';
         }
 
         // Edit script
@@ -672,218 +768,198 @@
                 scriptTitle.value = script.title;
                 scriptContent.value = script.content;
                 scriptPinned.checked = script.pinned;
-            modalTitle.textContent = 'Edit Script';
-            renderCategorySelector(script.categories);
-            scriptModal.classList.remove('hidden');
+                modalTitle.textContent = 'Edit Script';
+                renderCategorySelector(script.categories);
+                scriptModal.classList.remove('hidden');
+                updateContentPreview();
+            }
         }
-    }
 
-    // Handle form submission
-    function handleFormSubmit(e) {
-        e.preventDefault();
-        
-        const id = scriptId.value ? parseInt(scriptId.value) : Date.now();
-        const title = scriptTitle.value.trim();
-        const content = scriptContent.value.trim();
-        const categories = getSelectedCategories();
-        const pinned = scriptPinned.checked;
-        
-        if (!title || !content || categories.length === 0) {
-            alert('Please fill in all fields and select at least one category');
-            return;
-        }
-        
-        const now = new Date().toISOString();
-        
-        if (scriptId.value) {
-            // Update existing script
-            const index = scripts.findIndex(s => s.id === id);
-            if (index !== -1) {
-                scripts[index] = {
-                    ...scripts[index],
+        // Handle form submission
+        function handleFormSubmit(e) {
+            e.preventDefault();
+            
+            const id = scriptId.value ? parseInt(scriptId.value) : Date.now();
+            const title = scriptTitle.value.trim();
+            const content = scriptContent.value.trim();
+            const categories = getSelectedCategories();
+            const pinned = scriptPinned.checked;
+            
+            if (!title || !content || categories.length === 0) {
+                alert('Please fill in all fields and select at least one category');
+                return;
+            }
+            
+            const now = new Date().toISOString();
+            
+            if (scriptId.value) {
+                // Update existing script
+                const index = scripts.findIndex(s => s.id === id);
+                if (index !== -1) {
+                    scripts[index] = {
+                        ...scripts[index],
+                        title,
+                        content,
+                        categories,
+                        pinned,
+                        updatedAt: now
+                    };
+                }
+            } else {
+                // Add new script
+                scripts.push({
+                    id,
                     title,
                     content,
                     categories,
                     pinned,
-                    updatedAt: now
-                };
+                    createdAt: now,
+                    updatedAt: null
+                });
             }
-        } else {
-            // Add new script
-            scripts.push({
-                id,
-                title,
-                content,
-                categories,
-                pinned,
-                createdAt: now,
-                updatedAt: null
-            });
-        }
-        
-        saveData();
-        renderScripts();
-        renderPinnedScripts();
-        closeModalHandler();
-    }
-
-    // Delete script
-    function deleteScript(id) {
-        if (confirm('Are you sure you want to delete this script?')) {
-            scripts = scripts.filter(script => script.id !== id);
+            
             saveData();
             renderScripts();
             renderPinnedScripts();
+            closeModalHandler();
         }
-    }
 
-    // Toggle pin status
-    function togglePinScript(id) {
-        const script = scripts.find(s => s.id === id);
-        if (script) {
-            script.pinned = !script.pinned;
-            script.updatedAt = new Date().toISOString();
-            saveData();
-            renderScripts();
-            renderPinnedScripts();
+        // Delete script
+        function deleteScript(id) {
+            if (confirm('Are you sure you want to delete this script?')) {
+                scripts = scripts.filter(script => script.id !== id);
+                saveData();
+                renderScripts();
+                renderPinnedScripts();
+            }
         }
-    }
-
-    // Close modal
-    function closeModalHandler() {
-        scriptModal.classList.add('hidden');
-    }
-
-    // Show add label form
-    function showAddLabelForm() {
-        addLabelForm.classList.remove('hidden');
-        newLabelInput.focus();
-    }
-
-    // Hide add label form
-    function hideAddLabelForm() {
-        addLabelForm.classList.add('hidden');
-        newLabelInput.value = '';
-    }
-
-    // Save new label
-    function saveNewLabel() {
-        const newLabel = newLabelInput.value.trim();
-        if (newLabel) {
-            labels.push(newLabel);
-            saveData();
-            renderLabels();
-            hideAddLabelForm();
+
+        // Toggle pin status
+        function togglePinScript(id) {
+            const script = scripts.find(s => s.id === id);
+            if (script) {
+                script.pinned = !script.pinned;
+                script.updatedAt = new Date().toISOString();
+                saveData();
+                renderScripts();
+                renderPinnedScripts();
+            }
         }
-    }
 
-    // Edit label
-    function editLabel(index) {
-        const currentLabel = labels[index];
-        const labelItem = document.querySelectorAll('.label-item')[index];
-        
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.className = 'label-edit-input w-full px-2 py-1 border rounded';
-        input.value = currentLabel;
-        
-        labelItem.innerHTML = '';
-        labelItem.appendChild(input);
-        input.focus();
-        
-        const saveEdit = () => {
-            const newLabel = input.value.trim();
+        // Close modal
+        function closeModalHandler() {
+            scriptModal.classList.add('hidden');
+        }
+
+        // Show add label form
+        function showAddLabelForm() {
+            addLabelForm.classList.remove('hidden');
+            newLabelInput.focus();
+        }
+
+        // Hide add label form
+        function hideAddLabelForm() {
+            addLabelForm.classList.add('hidden');
+            newLabelInput.value = '';
+        }
+
+        // Save new label
+        function saveNewLabel() {
+            const newLabel = newLabelInput.value.trim();
             if (newLabel) {
-                labels[index] = newLabel;
+                labels.push(newLabel);
                 saveData();
                 renderLabels();
+                hideAddLabelForm();
             }
-        };
-        
-        input.addEventListener('blur', saveEdit);
-        input.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                saveEdit();
-            }
-        });
-    }
-
-    // Delete label
-    function deleteLabel(index) {
-        if (confirm('Are you sure you want to delete this label?')) {
-            labels.splice(index, 1);
-            saveData();
-            renderLabels();
         }
-    }
 
-    // Format text in textarea
-    function formatText(command) {
-        const textarea = document.getElementById('scriptContent');
-        const start = textarea.selectionStart;
-        const end = textarea.selectionEnd;
-        const selectedText = textarea.value.substring(start, end);
-        let newText = '';
+        // Edit label
+        function editLabel(index) {
+            const currentLabel = labels[index];
+            const labelItem = document.querySelectorAll('.label-item')[index];
+            
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.className = 'label-edit-input w-full px-2 py-1 border rounded';
+            input.value = currentLabel;
         
-        switch (command) {
-            case 'bold':
-                newText = `**${selectedText}**`;
-                break;
-            case 'italic':
-                newText = `_${selectedText}_`;
-                break;
-            case 'underline':
-                newText = `<u>${selectedText}</u>`;
-                break;
+            labelItem.innerHTML = '';
+            labelItem.appendChild(input);
+            input.focus();
+            
+            const saveEdit = () => {
+                const newLabel = input.value.trim();
+                if (newLabel) {
+                    labels[index] = newLabel;
+                    saveData();
+                    renderLabels();
+                }
+            };
+            
+            input.addEventListener('blur', saveEdit);
+            input.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    saveEdit();
+                }
+            });
         }
-        
-        textarea.value = textarea.value.substring(0, start) + newText + textarea.value.substring(end);
-        textarea.focus();
-        textarea.setSelectionRange(start + newText.length, start + newText.length);
-    }
-
-    // Insert placeholder
-    function insertPlaceholder() {
-        const textarea = document.getElementById('scriptContent');
-        const start = textarea.selectionStart;
-        
-        textarea.value = textarea.value.substring(0, start) + '[Variable]' + textarea.value.substring(start);
-        textarea.focus();
-        textarea.setSelectionRange(start + '[Variable]'.length, start + '[Variable]'.length);
-    }
-
-    // Get category name
-    function getCategoryName(category) {
-        const categories = {
-            'intro': 'Introduction',
-            'General': 'General',
-            'documents_requested': 'Documents Request',
-            'VA IRRRL': 'VA IRRRL',
-            'Lost Contact/Gaslight': 'Lost Contact',
-            'Preapproval/Purchase': 'Preapproval',
-            'Funny': 'Funny',
-            'Appointment': 'Appointment'
-        };
-        return categories[category] || category;
-    }
-
-    // Format date
-    function formatDate(dateString) {
-        if (!dateString) return '';
-        const date = new Date(dateString);
-        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
-    }
-
-    // Make functions available globally
-    window.copyScript = copyScript;
-    window.togglePinScript = togglePinScript;
-    window.editScript = editScript;
-    window.deleteScript = deleteScript;
-    window.editLabel = editLabel;
-    window.deleteLabel = deleteLabel;
-    window.moveLabelUp = moveLabelUp;
-    window.moveLabelDown = moveLabelDown;
-    window.closeModalHandler = closeModalHandler;
+
+        // Delete label
+        function deleteLabel(index) {
+            if (confirm('Are you sure you want to delete this label?')) {
+                labels.splice(index, 1);
+                saveData();
+                renderLabels();
+            }
+        }
+
+        // Insert placeholder
+        function insertPlaceholder() {
+            const textarea = scriptContent;
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const beforeText = textarea.value.substring(0, start);
+            const afterText = textarea.value.substring(end);
+            
+            textarea.value = beforeText + '[Variable]' + afterText;
+            textarea.focus();
+            textarea.setSelectionRange(start + '[Variable]'.length, start + '[Variable]'.length);
+            updateContentPreview();
+        }
+
+        // Get category name
+        function getCategoryName(category) {
+            const categories = {
+                'intro': 'Introduction',
+                'General': 'General',
+                'documents_requested': 'Documents Request',
+                'VA IRRRL': 'VA IRRRL',
+                'Lost Contact/Gaslight': 'Lost Contact',
+                'Preapproval/Purchase': 'Preapproval',
+                'Funny': 'Funny',
+                'Appointment': 'Appointment'
+            };
+            return categories[category] || category;
+        }
+
+        // Format date
+        function formatDate(dateString) {
+            if (!dateString) return '';
+            const date = new Date(dateString);
+            return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+        }
+
+        // Make functions available globally
+        window.copyScript = copyScript;
+        window.togglePinScript = togglePinScript;
+        window.editScript = editScript;
+        window.deleteScript = deleteScript;
+        window.editLabel = editLabel;
+        window.deleteLabel = deleteLabel;
+        window.moveLabelUp = moveLabelUp;
+        window.moveLabelDown = moveLabelDown;
+        window.closeModalHandler = closeModalHandler;
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Honda219/text-scripts" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt

@@ -1,3 +1,7 @@
-can you allow me to move labels up and down throughout the label list?
-just use an up and down arrow to move the labels 
-give me the option to hide the created and updated 
+make the bold, underline, and italic buttons work properly
+the bold, italic, and underline buttons do not work properly. please fix them
+make the bold, italic, and underline buttons functional and make them have the correct functions
+make the bold button actually bold the text, make the italic button actually italicize, and make the underline button actually underline the text
+Don't make the formatting visible in the script editor. Just apply the format to the text
+make the bold, italic, and underline buttons work properly.
+make the bold, italic, and underline buttons work in the script and the content