update colors

.gitignore

@@ -43,6 +43,10 @@ uv.lock
 *~
 .DS_Store
 
+# node
+node_modules/
+package-lock.json
+
 # Project specific - Input/Output files
 *.mp4
 *.mov

_colors.json

@@ -1,8 +1,7 @@
 {
-  "Malabar": "#FFD700",
+  "Malabar": "#000000",
-  "Song": "#87CEEB",
+  "Song": "#4682B4",
-  "Star": "#FFFFFF",
+  "Moon": "#A9A9A9",
-  "Moon": "#C0C0C0",
   "Jupiter": "#D2691E",
   "Volcanoes": "#8B0000",
   "Earth": "#228B22"

step5_assign_colors.py

@@ -37,7 +37,7 @@ OUTPUT_FILE = Path("_colors.json")
 
 # Fixed color assignments
 FIXED_COLORS = {
-    "Malabar": "#FFD700"  # Gold
+    "Malabar": "#000000"  # Black
 }
 
 # Default configurations for different providers
@@ -119,17 +119,19 @@ Speakers to assign colors:
 Color assignment guidelines (use hex codes like #FF0000):
 - Mars → #CD5C5C (red planet) or #FF4500
 - Earth → #228B22 (forest green) or #4169E1 (royal blue)
-- Moon → #C0C0C0 (silver) or #A9A9A9 (dark gray)
+- Moon → #A9A9A9 (dark gray) - avoid light colors
-- Sun → #FFD700 (gold) or #FFA500 (orange)
+- Sun → #FFA500 (orange) - avoid light colors
 - Jupiter → #D2691E (chocolate/orange)
 - Galaxy → #9370DB (medium purple) or #FF69B4 (hot pink)
-- Star → #FFFFFF (white) or #FFFACD (lemon chiffon)
+- Star → #DAA520 (goldenrod) or #B8860B (dark goldenrod) - avoid white/light colors
 - Volcano → #8B0000 (dark red) or #FF4500 (orange red)
-- Kangaroo/Giraffe → #D2B48C (tan) or #F4A460 (sandy brown)
+- Kangaroo/Giraffe → #D2691E (chocolate) or #8B4513 (saddle brown)
-- Song → #87CEEB (sky blue) or #DDA0DD (plum)
+- Song → #4682B4 (steel blue) or #9370DB (medium purple) - avoid light colors
+
+IMPORTANT: Do NOT use light colors like #FFFFFF (white), #FFFACD, #87CEEB, #C0C0C0. All colors must be dark enough to read on white backgrounds.
 
 Fixed assignment:
-- Malabar → #FFD700 (gold, already set)
+- Malabar → #000000 (black, already set)
 
 Reply with ONLY a JSON object mapping speaker names to hex color codes:
 {{"SpeakerName": "#RRGGBB", ...}}
@@ -175,19 +177,19 @@ JSON:"""
                 elif 'earth' in name_lower:
                     color_mapping[speaker] = "#228B22"  # Forest green
                 elif 'moon' in name_lower:
-                    color_mapping[speaker] = "#C0C0C0"  # Silver
+                    color_mapping[speaker] = "#A9A9A9"  # Dark gray
                 elif 'sun' in name_lower:
-                    color_mapping[speaker] = "#FFD700"  # Gold
+                    color_mapping[speaker] = "#FFA500"  # Orange
                 elif 'jupiter' in name_lower:
                     color_mapping[speaker] = "#D2691E"  # Chocolate/orange
                 elif 'star' in name_lower:
-                    color_mapping[speaker] = "#FFFFFF"  # White
+                    color_mapping[speaker] = "#DAA520"  # Goldenrod
                 elif 'galaxy' in name_lower:
                     color_mapping[speaker] = "#9370DB"  # Medium purple
                 elif 'volcano' in name_lower:
                     color_mapping[speaker] = "#8B0000"  # Dark red
                 elif 'song' in name_lower:
-                    color_mapping[speaker] = "#87CEEB"  # Sky blue
+                    color_mapping[speaker] = "#4682B4"  # Steel blue
                 else:
                     color_mapping[speaker] = "#808080"  # Gray
         

webapp/templates/episode.html

@@ -9,7 +9,7 @@
          data-chinese="{{ line.chinese | escape }}"
          data-timestamp="{{ line.timestamp }}"
          data-speaker="{{ line.speaker }}">
-        <div class="english" {% if line.speaker in colors %}style="color: {{ colors[line.speaker] }}"{% endif %}>
+        <div class="english" style="color: {{ colors.get(line.speaker, '#777777') }}">
             {{ line.english }}
         </div>
     </div>

webnode/views/episode.ejs

@@ -34,7 +34,7 @@
                      data-chinese="<%= escapeHtml(line.chinese) %>"
                      data-timestamp="<%= escapeHtml(line.timestamp) %>"
                      data-speaker="<%= escapeHtml(line.speaker) %>">
-                    <div class="english" style="<%= colors[line.speaker] ? `color: ${colors[line.speaker]}` : '' %>">
+                    <div class="english" style="color: <%= colors[line.speaker] || '#777777' %>">
                         <%= line.english %>
                     </div>
                 </div>