Add updated files

app.py

@@ -46,87 +46,80 @@ def get_stats_html(water, energy, points):
     """
 
 def get_drip_visuals(water_level):
-    """Generates an animated SVG character whose expression changes with water level."""
-    
-    # The new base path provided by you
-    base_drop_path = 'd="M60 8 C60 8,102 66,102 90 C102 118,83 137,60 137 C37 137,18 118,18 90 C18 66,60 8,60 8Z"'
+    """Generates the advanced SVG Drip character with dynamic expressions."""
     
     if water_level > 70:
-        # Happy, Plump, Bouncing
-        color = "url(#blueGrad)"
+        # Happy, Plump
+        g_start, g_end = "#7dd3fc", "#0369a1"
+        mouth_d = "M43 112 Q60 122 77 112" # Smile
+        cracks_op, sweat_op, tear_op = "0", "0", "0"
+        mood, mood_color = "Hydrated and (barely) coping", "rgb(34, 211, 238)"
         anim = "bounce 2s infinite ease-in-out"
-        glow = "rgba(56,189,248,0.6)"
-        status = "Plump & Hydrated"
-        drop_path = f'<path id="dbody" {base_drop_path} fill="{color}" stroke="rgba(34,211,238,0.35)" stroke-width="1.5" opacity="1"></path>'
-        face = """
-            <circle cx="45" cy="85" r="5" fill="white"/>
-            <circle cx="75" cy="85" r="5" fill="white"/>
-            <path d="M 50,100 Q 60,115 70,100" stroke="white" stroke-width="3.5" fill="transparent" stroke-linecap="round"/>
-            <ellipse cx="35" cy="95" rx="6" ry="4" fill="rgba(255,255,255,0.3)"/>
-            <ellipse cx="85" cy="95" rx="6" ry="4" fill="rgba(255,255,255,0.3)"/>
-        """
     elif 30 <= water_level <= 70:
-        # Tired, Flat, Sweating
-        color = "#0ea5e9"
+        # Tired, Sweaty
+        g_start, g_end = "#38bdf8", "#0284c7"
+        mouth_d = "M43 112 Q60 110 77 112" # Flat / Unamused
+        cracks_op, sweat_op, tear_op = "0", "1", "0" # Show sweat
+        mood, mood_color = "Shrinking & Sweaty", "#0ea5e9"
         anim = "float 4s infinite ease-in-out"
-        glow = "rgba(56,189,248,0.3)"
-        status = "Shrinking & Tired"
-        drop_path = f'<path id="dbody" {base_drop_path} fill="{color}" stroke="rgba(34,211,238,0.35)" stroke-width="1.5" opacity="1"></path>'
-        face = """
-            <path d="M 40,85 Q 45,80 50,85" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
-            <path d="M 70,85 Q 75,80 80,85" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
-            <line x1="55" y1="102" x2="65" y2="102" stroke="white" stroke-width="3" stroke-linecap="round"/>
-            <path d="M 85,60 C 85,60 78,75 78,80 A 7,7 0 1,0 92,80 C 92,75 85,60 85,60 Z" fill="rgba(255,255,255,0.6)"/>
-        """
     elif water_level > 0:
-        # Overheating, Red, Cracked
-        color = "url(#redGrad)"
+        # Overheating, Red, Cracked, Crying
+        g_start, g_end = "#fca5a5", "#b91c1c"
+        mouth_d = "M43 116 Q60 102 77 116" # Frown
+        cracks_op, sweat_op, tear_op = "1", "0", "1" # Show cracks and tear
+        mood, mood_color = "Overheating & Raspy", "#ef4444"
         anim = "shake 0.5s infinite"
-        glow = "rgba(239,68,68,0.5)"
-        status = "Overheating & Raspy"
-        drop_path = f'<path id="dbody" {base_drop_path} fill="{color}" stroke="rgba(239,68,68,0.8)" stroke-width="1.5" opacity="1"></path>'
-        face = """
-            <line x1="40" y1="80" x2="50" y2="90" stroke="white" stroke-width="3" stroke-linecap="round"/>
-            <line x1="50" y1="80" x2="40" y2="90" stroke="white" stroke-width="3" stroke-linecap="round"/>
-            <line x1="70" y1="80" x2="80" y2="90" stroke="white" stroke-width="3" stroke-linecap="round"/>
-            <line x1="80" y1="80" x2="70" y2="90" stroke="white" stroke-width="3" stroke-linecap="round"/>
-            <path d="M 50,105 Q 55,98 60,105 T 70,105" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
-        """
     else:
-        # Ghost / Evaporated
-        color = "rgba(148, 163, 184, 0.4)"
+        # Evaporated
+        g_start, g_end = "#94a3b8", "#334155" # Gray out
+        mouth_d = "M40 112 Q45 105 50 112 T60 112 T70 112 T80 112" # Squiggly mouth
+        cracks_op, sweat_op, tear_op = "0", "0", "0"
+        mood, mood_color = "Evaporated!", "#94a3b8"
         anim = "floatUp 3s forwards"
-        glow = "transparent"
-        status = "Evaporated!"
-        drop_path = f'<path id="dbody" {base_drop_path} fill="{color}" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" opacity="1"></path>'
-        face = """
-            <circle cx="50" cy="80" r="3" fill="white"/>
-            <circle cx="70" cy="80" r="3" fill="white"/>
-            <circle cx="60" cy="95" r="5" fill="transparent" stroke="white" stroke-width="2"/>
-        """
 
-    # ViewBox expanded to 120x150 to accommodate the new path boundaries
-    svg = f"""
-    <svg viewBox="0 0 120 150" style="width: 150px; height: 180px; filter: drop-shadow(0px 0px 15px {glow}); animation: {anim};">
+    return f"""
+    <div class="drip-panel" style="animation: {anim}; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;">
+      <div class="drip-lbl" style="font-weight: 800; color: #94a3b8; letter-spacing: 3px; font-size: 14px; margin-bottom: 5px;">DRIP</div>
+      
+      <svg id="drip-svg" viewBox="0 0 120 148" style="width: 140px; height: 160px; overflow: visible;" xmlns="http://www.w3.org/2000/svg">
         <defs>
-            <linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-                <stop offset="0%" style="stop-color:#7dd3fc;stop-opacity:1" />
-                <stop offset="100%" style="stop-color:#0284c7;stop-opacity:1" />
-            </linearGradient>
-            <linearGradient id="redGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-                <stop offset="0%" style="stop-color:#fca5a5;stop-opacity:1" />
-                <stop offset="100%" style="stop-color:#b91c1c;stop-opacity:1" />
-            </linearGradient>
+          <radialGradient id="dg" cx="38%" cy="32%">
+            <stop id="dg1" offset="0%" stop-color="{g_start}"></stop>
+            <stop id="dg2" offset="100%" stop-color="{g_end}"></stop>
+          </radialGradient>
         </defs>
-        {drop_path}
-        {face}
-    </svg>
-    """
         
-    return f"""
-    <div class="drip-character-container">
-        {svg}
-        <h3 style="margin: 10px 0 0 0; color: #e2e8f0; font-weight: 600; font-size: 1.1rem; text-align: center;">{status}</h3>
+        <path id="dbody" d="M60 8 C60 8,102 66,102 90 C102 118,83 137,60 137 C37 137,18 118,18 90 C18 66,60 8,60 8Z" fill="url(#dg)" stroke="rgba(34,211,238,0.35)" stroke-width="1.5" opacity="1"></path>
+        
+        <ellipse cx="42" cy="70" rx="9" ry="13" fill="rgba(255,255,255,0.22)" transform="rotate(-18,42,70)"></ellipse>
+        
+        <circle cx="44" cy="90" r="10" fill="white"></circle>
+        <circle cx="76" cy="90" r="10" fill="white"></circle>
+        
+        <circle id="pl" cx="45" cy="91" r="6" fill="#0f172a"></circle>
+        <circle id="pr" cx="77" cy="91" r="6" fill="#0f172a"></circle>
+        
+        <circle cx="47" cy="88" r="2.5" fill="white"></circle>
+        <circle cx="79" cy="88" r="2.5" fill="white"></circle>
+        
+        <path id="dm" d="{mouth_d}" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" fill="none"></path>
+        
+        <g id="cracks" opacity="{cracks_op}" style="transition: opacity 0.5s;">
+          <path d="M80 46 L86 58 L79 65 L85 77" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path>
+          <path d="M37 82 L31 93 L39 99" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path>
+        </g>
+        
+        <path id="sweat" d="M108 76 C110 70,116 70,116 78 C116 84,110 88,108 82Z" fill="#7dd3fc" opacity="{sweat_op}" style="transition: opacity 0.5s;"></path>
+        
+        <path id="tear" d="M38 104 C37 108,33 108,33 112 C33 115,36 117,38 114 C40 117,43 115,43 112 C43 108,39 108,38 104Z" fill="#93c5fd" opacity="{tear_op}" style="transition: opacity 0.5s;"></path>
+      </svg>
+      
+      <div class="drip-mood" id="drip-mood" style="color: {mood_color}; font-weight: 500; font-size: 1.1rem; margin-top: 15px;">{mood}</div>
+      
+      <div style="text-align:center; margin-top:10px;">
+        <div style="font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:1px;">Water Left</div>
+        <div style="font-size:26px; font-weight:700; color:{mood_color};" id="d-water">{water_level:.2f}L</div>
+      </div>
     </div>
     """