Add 2 files

index.html

@@ -133,6 +133,66 @@
         .formatted-text u {
             text-decoration: underline;
         }
+        /* Color picker styles */
+        .color-picker {
+            position: relative;
+            display: inline-block;
+        }
+        .color-preview {
+            width: 20px;
+            height: 20px;
+            border-radius: 4px;
+            border: 1px solid #d1d5db;
+            cursor: pointer;
+        }
+        .color-palette {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            z-index: 10;
+            display: none;
+            background: white;
+            padding: 8px;
+            border-radius: 4px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            width: 180px;
+        }
+        .color-palette.show {
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            gap: 4px;
+        }
+        .color-option {
+            width: 20px;
+            height: 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            border: 1px solid #d1d5db;
+        }
+        .color-option:hover {
+            transform: scale(1.1);
+        }
+        .custom-color-input {
+            grid-column: span 6;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            margin-top: 4px;
+        }
+        .custom-color-input input {
+            flex: 1;
+            padding: 4px;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+        }
+        .custom-color-input button {
+            padding: 4px 8px;
+            background: #3b82f6;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -251,6 +311,42 @@
                         <button type="button" id="boldBtn" class="rich-text-button"><i class="fas fa-bold"></i></button>
                         <button type="button" id="italicBtn" class="rich-text-button"><i class="fas fa-italic"></i></button>
                         <button type="button" id="underlineBtn" class="rich-text-button"><i class="fas fa-underline"></i></button>
+                        <div class="color-picker">
+                            <div class="rich-text-button" id="colorPickerBtn">
+                                <i class="fas fa-palette"></i>
+                            </div>
+                            <div class="color-palette" id="colorPalette">
+                                <div class="color-option" style="background-color: #000000;" data-color="#000000"></div>
+                                <div class="color-option" style="background-color: #ffffff; border: 1px solid #000;" data-color="#ffffff"></div>
+                                <div class="color-option" style="background-color: #ff0000;" data-color="#ff0000"></div>
+                                <div class="color-option" style="background-color: #00ff00;" data-color="#00ff00"></div>
+                                <div class="color-option" style="background-color: #0000ff;" data-color="#0000ff"></div>
+                                <div class="color-option" style="background-color: #ffff00;" data-color="#ffff00"></div>
+                                <div class="color-option" style="background-color: #ff00ff;" data-color="#ff00ff"></div>
+                                <div class="color-option" style="background-color: #00ffff;" data-color="#00ffff"></div>
+                                <div class="color-option" style="background-color: #800000;" data-color="#800000"></div>
+                                <div class="color-option" style="background-color: #008000;" data-color="#008000"></div>
+                                <div class="color-option" style="background-color: #000080;" data-color="#000080"></div>
+                                <div class="color-option" style="background-color: #808000;" data-color="#808000"></div>
+                                <div class="color-option" style="background-color: #800080;" data-color="#800080"></div>
+                                <div class="color-option" style="background-color: #008080;" data-color="#008080"></div>
+                                <div class="color-option" style="background-color: #c0c0c0;" data-color="#c0c0c0"></div>
+                                <div class="color-option" style="background-color: #808080;" data-color="#808080"></div>
+                                <div class="color-option" style="background-color: #ffa500;" data-color="#ffa500"></div>
+                                <div class="color-option" style="background-color: #ff6347;" data-color="#ff6347"></div>
+                                <div class="color-option" style="background-color: #ff69b4;" data-color="#ff69b4"></div>
+                                <div class="color-option" style="background-color: #9370db;" data-color="#9370db"></div>
+                                <div class="color-option" style="background-color: #7fffd4;" data-color="#7fffd4"></div>
+                                <div class="color-option" style="background-color: #ffd700;" data-color="#ffd700"></div>
+                                <div class="color-option" style="background-color: #cd5c5c;" data-color="#cd5c5c"></div>
+                                <div class="color-option" style="background-color: #4b0082;" data-color="#4b0082"></div>
+                                <div class="color-option" style="background-color: #f08080;" data-color="#f08080"></div>
+                                <div class="custom-color-input">
+                                    <input type="text" id="customColorInput" placeholder="#hex or color name" class="flex-1">
+                                    <button type="button" id="applyCustomColor">Apply</button>
+                                </div>
+                            </div>
+                        </div>
                         <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>
@@ -368,9 +464,14 @@
         const toggleDatesBtn = document.getElementById('toggleDatesBtn');
         const togglePinnedDatesBtn = document.getElementById('togglePinnedDatesBtn');
         const contentPreview = document.getElementById('contentPreview');
+        const colorPickerBtn = document.getElementById('colorPickerBtn');
+        const colorPalette = document.getElementById('colorPalette');
+        const customColorInput = document.getElementById('customColorInput');
+        const applyCustomColor = document.getElementById('applyCustomColor');
 
         // State
         let showDates = true;
+        let currentColor = '#000000';
 
         // Save data to localStorage
         function saveData() {
@@ -403,10 +504,42 @@
             toggleDatesBtn.addEventListener('click', toggleDatesVisibility);
             togglePinnedDatesBtn.addEventListener('click', toggleDatesVisibility);
             scriptContent.addEventListener('input', updateContentPreview);
+            
+            // Color picker events
+            colorPickerBtn.addEventListener('click', toggleColorPalette);
+            document.addEventListener('click', (e) => {
+                if (!colorPalette.contains(e.target) && e.target !== colorPickerBtn) {
+                    colorPalette.classList.remove('show');
+                }
+            });
+            
+            // Color selection
+            document.querySelectorAll('.color-option').forEach(option => {
+                option.addEventListener('click', () => {
+                    currentColor = option.dataset.color;
+                    applyFormatting('color', currentColor);
+                    colorPalette.classList.remove('show');
+                });
+            });
+            
+            // Custom color
+            applyCustomColor.addEventListener('click', () => {
+                const color = customColorInput.value.trim();
+                if (color) {
+                    currentColor = color;
+                    applyFormatting('color', currentColor);
+                    colorPalette.classList.remove('show');
+                }
+            });
+        }
+
+        // Toggle color palette visibility
+        function toggleColorPalette() {
+            colorPalette.classList.toggle('show');
         }
 
         // Apply formatting to selected text
-        function applyFormatting(formatType) {
+        function applyFormatting(formatType, color = null) {
             const textarea = scriptContent;
             const start = textarea.selectionStart;
             const end = textarea.selectionEnd;
@@ -430,6 +563,10 @@
                     formattedText = `<u>${selectedText}</u>`;
                     cursorOffset = 4;
                     break;
+                case 'color':
+                    formattedText = `<span style="color: ${color}">${selectedText}</span>`;
+                    cursorOffset = 0;
+                    break;
             }
             
             if (start !== end) {
@@ -460,6 +597,7 @@
                 .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')  // bold
                 .replace(/\_(.*?)\_/g, '<em>$1</em>')               // italic
                 .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')             // underline
+                .replace(/<span style="color: (.*?)">(.*?)<\/span>/g, '<span style="color: $1">$2</span>') // color
                 .replace(/\n/g, '<br>')                             // line breaks
                 .replace(/\[(.*?)\]/g, '<span class="bg-blue-100 text-blue-800 px-1 rounded">[$1]</span>'); // placeholders
             
@@ -625,6 +763,7 @@
                 .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')  // bold
                 .replace(/\_(.*?)\_/g, '<em>$1</em>')               // italic
                 .replace(/<u>(.*?)<\/u>/g, '<u>$1</u>')             // underline
+                .replace(/<span style="color: (.*?)">(.*?)<\/span>/g, '<span style="color: $1">$2</span>') // color
                 .replace(/\n/g, '<br>')                             // line breaks
                 .replace(/\[(.*?)\]/g, '<span class="bg-blue-100 text-blue-800 px-1 rounded">[$1]</span>'); // placeholders
         }
@@ -729,7 +868,9 @@
                     .replace(/\*\*/g, '')
                     .replace(/_/g, '')
                     .replace(/<u>/g, '')
-                    .replace(/<\/u>/g, '');
+                    .replace(/<\/u>/g, '')
+                    .replace(/<span style="color: (.*?)">/g, '')
+                    .replace(/<\/span>/g, '');
                 
                 const textToCopy = `${script.title}\n\n${cleanContent.replace(/<[^>]*>/g, '')}`;
                 navigator.clipboard.writeText(textToCopy).then(() => {

prompts.txt

@@ -4,4 +4,5 @@ make the bold, italic, and underline buttons functional and make them have the c
 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
+make the bold, italic, and underline buttons work in the script and the content
+allow me to change font colors and save custom font colors