Update app.py

app.py

@@ -589,8 +589,8 @@ css = css + f"""
     left: 0;
     width: 0;
     color: #BE002A;
-    -webkit-animation: text-red {opt.run_time + opt.prep_time:.1f}s ease infinite;
-            animation: text-red {opt.run_time + opt.prep_time:.1f}s ease infinite;
+    // -webkit-animation: text-red {opt.run_time + opt.prep_time:.1f}s ease infinite;
+    //         animation: text-red {opt.run_time + opt.prep_time:.1f}s ease infinite;
     z-index: 2;
     background: transparent;
 }}
@@ -602,22 +602,22 @@ css = css + f"""
 
 #red-flame {{
     opacity: 0;
-    -webkit-animation: show-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, red-flame 120ms ease infinite;
-            animation: show-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, red-flame 120ms ease infinite;
+    -webkit-animation: idle-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, red-flame 120ms ease infinite;
+            animation: idle-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, red-flame 120ms ease infinite;
     transform-origin: center bottom;
 }}
 
 #yellow-flame {{
     opacity: 0;
-    -webkit-animation: show-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, yellow-flame 120ms ease infinite;
-            animation: show-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, yellow-flame 120ms ease infinite;
+    -webkit-animation: idle-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, yellow-flame 120ms ease infinite;
+            animation: idle-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, yellow-flame 120ms ease infinite;
     transform-origin: center bottom;
 }}
 
 #white-flame {{
     opacity: 0;
-    -webkit-animation: show-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, red-flame 100ms ease infinite;
-            animation: show-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, red-flame 100ms ease infinite;
+    -webkit-animation: idle-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, red-flame 100ms ease infinite;
+            animation: idle-flames {opt.run_time + opt.prep_time:.1f}s ease infinite, red-flame 100ms ease infinite;
     transform-origin: center bottom;
 }}
 """
@@ -1104,7 +1104,8 @@ async () => {{
     var deadlineText = function (remainingTime) {{
         var el = gradioEl.querySelector('.deadline-timer');
         var htmlBase = 'Remaining <span class="day">' + remainingTime + '</span> <span class="days">s</span>';
-        var html = '<div class="mask-red"><div class="inner">' + htmlBase + '</div></div><div class="mask-white"><div class="inner">' + htmlBase + '</div></div>';
+        // var html = '<div class="mask-red"><div class="inner">' + htmlBase + '</div></div><div class="mask-white"><div class="inner">' + htmlBase + '</div></div>';
+        var html = '<div class="mask-white"><div class="inner">' + htmlBase + '</div></div>';
         el.innerHTML = html;
     }};
 
@@ -1126,10 +1127,28 @@ async () => {{
                 gradioEl.querySelector('#progress-time-fill').style['animation-name'] = 'progress-fill';
                 gradioEl.querySelector('#death-group').style['animation-duration'] = animationTime + 's';
                 gradioEl.querySelector('#death-group').style['-webkit-animation-name'] = 'walk';
-                gradioEl.querySelector('#death-group').style['animation-name'] = 'walk';
+                gradioEl.querySelector('#death-group').style['animation-name'] = 'show-flames';
+                gradioEl.querySelector('#red-flame').style['-webkit-animation-name'] = 'show-flames';
+                gradioEl.querySelector('#red-flame').style['animation-name'] = 'show-flames';
+                gradioEl.querySelector('#yellow-flame').style['-webkit-animation-name'] = 'show-flames';
+                gradioEl.querySelector('#yellow-flame').style['animation-name'] = 'show-flames';
+                gradioEl.querySelector('#white-flame').style['-webkit-animation-name'] = 'show-flames';
+                gradioEl.querySelector('#white-flame').style['animation-name'] = 'show-flames';
             }} else {{
                 clearInterval(timer);
                 deadlineTextFinished();
+                gradioEl.querySelector('#progress-time-fill').style['animation-duration'] = 1000000 + 's';
+                gradioEl.querySelector('#progress-time-fill').style['-webkit-animation-name'] = 'finished-fill';
+                gradioEl.querySelector('#progress-time-fill').style['animation-name'] = 'finished-fill';
+                gradioEl.querySelector('#death-group').style['animation-duration'] = 1000000 + 's';
+                gradioEl.querySelector('#death-group').style['-webkit-animation-name'] = 'finished';
+                gradioEl.querySelector('#death-group').style['animation-name'] = 'finished';
+                gradioEl.querySelector('#red-flame').style['-webkit-animation-name'] = 'finished-flames';
+                gradioEl.querySelector('#red-flame').style['animation-name'] = 'finished-flames';
+                gradioEl.querySelector('#yellow-flame').style['-webkit-animation-name'] = 'finished-flames';
+                gradioEl.querySelector('#yellow-flame').style['animation-name'] = 'finished-flames';
+                gradioEl.querySelector('#white-flame').style['-webkit-animation-name'] = 'finished-flames';
+                gradioEl.querySelector('#white-flame').style['animation-name'] = 'finished-flames';
             }}
         }}
     }}
@@ -1156,6 +1175,12 @@ async () => {{
                     gradioEl.querySelector('#death-group').style['animation-duration'] = 1000000 + 's';
                     gradioEl.querySelector('#death-group').style['-webkit-animation-name'] = 'idle';
                     gradioEl.querySelector('#death-group').style['animation-name'] = 'idle';
+                    gradioEl.querySelector('#red-flame').style['-webkit-animation-name'] = 'idle-flames';
+                    gradioEl.querySelector('#red-flame').style['animation-name'] = 'idle-flames';
+                    gradioEl.querySelector('#yellow-flame').style['-webkit-animation-name'] = 'idle-flames';
+                    gradioEl.querySelector('#yellow-flame').style['animation-name'] = 'idle-flames';
+                    gradioEl.querySelector('#white-flame').style['-webkit-animation-name'] = 'idle-flames';
+                    gradioEl.querySelector('#white-flame').style['animation-name'] = 'idle-flames';
                 }} else {{
                     // Running = True
                     state = true;