Add 2 files

index.html

@@ -158,6 +158,11 @@
             width: 180px;
         }
         .color-palette.show {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .color-options-grid {
             display: grid;
             grid-template-columns: repeat(6, 1fr);
             gap: 4px;
@@ -172,12 +177,14 @@
         .color-option:hover {
             transform: scale(1.1);
         }
+        .custom-color-section {
+            border-top: 1px solid #e5e7eb;
+            padding-top: 8px;
+        }
         .custom-color-input {
-            grid-column: span 6;
             display: flex;
             align-items: center;
             gap: 4px;
-            margin-top: 4px;
         }
         .custom-color-input input {
             flex: 1;
@@ -193,6 +200,13 @@
             border-radius: 4px;
             cursor: pointer;
         }
+        .custom-color-indicator {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 4px;
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -316,34 +330,38 @@
                                 <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 class="color-options-grid">
+                                    <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: #de4319;" data-color="#de4319"></div>
+                                </div>
+                                <div class="custom-color-section">
+                                    <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>
                         </div>
@@ -434,6 +452,15 @@
             "Lost Contact/Gaslight", "Preapproval/Purchase", "Power Play","Funny", "Appointment"
         ];
 
+        // Predefined colors that match the color palette options
+        const predefinedColors = [
+            '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00',
+            '#ff00ff', '#00ffff', '#800000', '#008000', '#000080', '#808000',
+            '#800080', '#008080', '#c0c0c0', '#808080', '#ffa500', '#ff6347',
+            '#ff69b4', '#9370db', '#7fffd4', '#ffd700', '#cd5c5c', '#4b0082',
+            '#f08080'
+        ];
+
         // DOM Elements
         const scriptForm = document.getElementById('scriptForm');
         const scriptModal = document.getElementById('scriptModal');
@@ -564,7 +591,13 @@
                     cursorOffset = 4;
                     break;
                 case 'color':
-                    formattedText = `<span style="color: ${color}">${selectedText}</span>`;
+                    // Check if the color is predefined or custom
+                    const isPredefined = predefinedColors.includes(color.toLowerCase());
+                    if (isPredefined) {
+                        formattedText = `<span class="text-color-${color.replace('#', '')}">${selectedText}</span>`;
+                    } else {
+                        formattedText = `<span style="color: ${color}">${selectedText}</span>`;
+                    }
                     cursorOffset = 0;
                     break;
             }
@@ -597,7 +630,8 @@
                 .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(/<span class="text-color-(.*?)">(.*?)<\/span>/g, '<span style="color: #$1">$2</span>') // predefined colors
+                .replace(/<span style="color: (.*?)">(.*?)<\/span>/g, '<span style="color: $1">$2</span>') // custom colors
                 .replace(/\n/g, '<br>')                             // line breaks
                 .replace(/\[(.*?)\]/g, '<span class="bg-blue-100 text-blue-800 px-1 rounded">[$1]</span>'); // placeholders
             
@@ -763,7 +797,8 @@
                 .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(/<span class="text-color-(.*?)">(.*?)<\/span>/g, '<span style="color: #$1">$2</span>') // predefined colors
+                .replace(/<span style="color: (.*?)">(.*?)<\/span>/g, '<span style="color: $1">$2</span>') // custom colors
                 .replace(/\n/g, '<br>')                             // line breaks
                 .replace(/\[(.*?)\]/g, '<span class="bg-blue-100 text-blue-800 px-1 rounded">[$1]</span>'); // placeholders
         }
@@ -869,6 +904,7 @@
                     .replace(/_/g, '')
                     .replace(/<u>/g, '')
                     .replace(/<\/u>/g, '')
+                    .replace(/<span class="text-color-(.*?)">/g, '')
                     .replace(/<span style="color: (.*?)">/g, '')
                     .replace(/<\/span>/g, '');
                 

prompts.txt

@@ -1,8 +1,2 @@
-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
-allow me to change font colors and save custom font colors
+seperate the custom font colors from the other font colors when saved
+better separate the custom colors in the color palette