Update pomodoro_forest.py

pomodoro_forest.py

@@ -93,18 +93,34 @@ HTML_TEMPLATE = """
 
             // Current growing tree (center)
             if (mode === 'focus') {
+                const isIdle = elapsed === 0 && !value?.running;
                 let treeHTML = '<div class="growing-tree">';
-                if (treeStage >= 1) treeHTML += '<div class="trunk t' + Math.min(treeStage, 4) + '"></div>';
-                if (treeStage >= 1) treeHTML += '<div class="branch-l b' + Math.min(treeStage, 4) + '"></div>';
-                if (treeStage >= 2) treeHTML += '<div class="branch-r b' + Math.min(treeStage, 4) + '"></div>';
-                if (treeStage >= 2) treeHTML += '<div class="crown c' + Math.min(treeStage, 4) + '"></div>';
-                if (treeStage >= 3) treeHTML += '<div class="crown-top c' + Math.min(treeStage, 4) + '"></div>';
-                if (treeStage >= 4) {
+                
+                if (isIdle) {
+                    // Show a full preview tree when idle so theme is visible
+                    treeHTML += '<div class="trunk t4"></div>';
+                    treeHTML += '<div class="branch-l b4"></div>';
+                    treeHTML += '<div class="branch-r b4"></div>';
+                    treeHTML += '<div class="crown c4"></div>';
+                    treeHTML += '<div class="crown-top c4"></div>';
                     treeHTML += '<div class="fruit" style="left:-15px;top:-55px"></div>';
                     treeHTML += '<div class="fruit" style="left:18px;top:-45px"></div>';
                     treeHTML += '<div class="fruit" style="left:0px;top:-65px"></div>';
+                    treeHTML += '<div class="preview-label">Press Start to grow!</div>';
+                } else {
+                    // Show growing tree based on progress
+                    if (treeStage >= 1) treeHTML += '<div class="trunk t' + Math.min(treeStage, 4) + '"></div>';
+                    if (treeStage >= 1) treeHTML += '<div class="branch-l b' + Math.min(treeStage, 4) + '"></div>';
+                    if (treeStage >= 2) treeHTML += '<div class="branch-r b' + Math.min(treeStage, 4) + '"></div>';
+                    if (treeStage >= 2) treeHTML += '<div class="crown c' + Math.min(treeStage, 4) + '"></div>';
+                    if (treeStage >= 3) treeHTML += '<div class="crown-top c' + Math.min(treeStage, 4) + '"></div>';
+                    if (treeStage >= 4) {
+                        treeHTML += '<div class="fruit" style="left:-15px;top:-55px"></div>';
+                        treeHTML += '<div class="fruit" style="left:18px;top:-45px"></div>';
+                        treeHTML += '<div class="fruit" style="left:0px;top:-65px"></div>';
+                    }
+                    if (treeStage === 0) treeHTML += '<div class="seed">🌱</div>';
                 }
-                if (treeStage === 0) treeHTML += '<div class="seed">🌱</div>';
                 treeHTML += '</div>';
                 trees.push(treeHTML);
             } else {
@@ -347,6 +363,18 @@ CSS_TEMPLATE = """
         font-size: 40px;
         animation: float 3s ease-in-out infinite;
     }
+    .preview-label {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 10px;
+        color: #8899aa;
+        white-space: nowrap;
+        background: rgba(0,0,0,0.5);
+        padding: 2px 8px;
+        border-radius: 8px;
+    }
     @keyframes float {
         0%, 100% { transform: translateX(-50%) translateY(0); }
         50% { transform: translateX(-50%) translateY(-10px); }
@@ -695,4 +723,4 @@ with gr.Blocks(title="🍅 Pomodoro Forest") as demo:
 
 
 if __name__ == "__main__":
-    demo.launch(theme=gr.themes.Soft(primary_hue="red"))
+    demo.launch(theme=gr.themes.Citrus(primary_hue="red"))