From f55ecae8f3bc9ffcad6587b5f0864c753456e08b Mon Sep 17 00:00:00 2001
From: Aetherinox <aetherinox@proton.me>
Date: Thu, 10 Apr 2025 02:56:39 -0700
Subject: [PATCH] feat: add heartbeat animation to header health icon

---
 tvapp2/www/css/tvapp2.min.css | 82 +++++++++++++++++++++++++++++++++++
 tvapp2/www/index.html         | 24 +++++++++-
 2 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/tvapp2/www/css/tvapp2.min.css b/tvapp2/www/css/tvapp2.min.css
index 7084ec8f..07f7217d 100644
--- a/tvapp2/www/css/tvapp2.min.css
+++ b/tvapp2/www/css/tvapp2.min.css
@@ -239,6 +239,12 @@ p
     padding-left:               7px;
 }
 
+.header .health
+{
+    color:                      #ff7575;
+    text-decoration:            none;
+}
+
 #breadcrumbs::before
 {
     margin-top:                 4px;
@@ -620,6 +626,82 @@ code
     position:                   relative;
 }
 
+@keyframes heartbeat
+{
+    0%
+    {
+            transform: scale( .75);
+    }
+    20%
+    {
+            transform: scale( 1);
+    }
+    40%
+    {
+            transform: scale( .75);
+    }
+    60%
+    {
+            transform: scale( 1);
+    }
+    80%
+    {
+            transform: scale( .75);
+    }
+    100%
+    {
+            transform: scale( .75);
+    }
+}
+
+#heart
+{
+    position: relative;
+    width: 100px;
+    height: 90px;
+    animation: heartbeat 1s infinite;
+}
+
+#heart:before,
+#heart:after
+{
+    position: absolute;
+    content: "";
+    left: 50px;
+    top: 0;
+    width: 50px;
+    height: 80px;
+    background: red;
+    -moz-border-radius: 50px 50px 0 0;
+    border-radius: 50px 50px 0 0;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    -webkit-transform-origin: 0 100%;
+    -moz-transform-origin: 0 100%;
+    -ms-transform-origin: 0 100%;
+    -o-transform-origin: 0 100%;
+    transform-origin: 0 100%;
+}
+
+#heart:after
+{
+    left: 0;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+    -webkit-transform-origin: 100% 100%;
+    -moz-transform-origin: 100% 100%;
+    -ms-transform-origin: 100% 100%;
+    -o-transform-origin: 100% 100%;
+    transform-origin: 100% 100%;
+}
+
+
 @-webkit-keyframes fadeOut {
     0% {
         opacity: 1;
diff --git a/tvapp2/www/index.html b/tvapp2/www/index.html
index e2eae8d8..a30cdd0f 100644
--- a/tvapp2/www/index.html
+++ b/tvapp2/www/index.html
@@ -22,6 +22,7 @@
                 </div>
                 <div class="navbar-social">
                     <a href="javascript:runResync();"><i id="action-resync" data-bs-toggle="tooltip" title="Resync" class="restart fa-solid fa-rotate" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
+                    <a href=""><i id="action-health" data-bs-toggle="tooltip" title="Health" class="logo health fa-duotone fa-solid fa-heart" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
                     <a href="<%= appUrlDocs %>"><i data-bs-toggle="tooltip" title="Documentation" class="logo fa-duotone fa-solid fa-book-open-cover" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
                     <a href="<%= appUrlGithub %>"><i data-bs-toggle="tooltip" title="Github" class="logo fa-logos fa-github" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
                     <a href="<%= appUrlDiscord %>"><i data-bs-toggle="tooltip" title="Discord" class="logo fa-logos fa-discord" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
@@ -458,13 +459,32 @@
                     jQuery(function($)
                     {
                         $(document.body).tooltip({ selector: "[title]" });
-                        $('#action-resync')
+                        $('#action-health')
                             .attr('data-original-title', timeLeft)
                             .attr('aria-label', timeLeft)
                             .attr('data-bs-original-title', timeLeft)
                     }); 
 
-                    setTimeout( updateTooltipCountdown, timerRemainsLS.getUTCMilliseconds() + 500 );
+                    const Heart = document.getElementsByClassName('fa-heart');
+                    Heart[0].style.color = '#FFF';
+
+                    setTimeout( function()
+                    {
+                        const Heart = document.getElementsByClassName('fa-heart');
+                        Heart[0].style.color = '#FFF';
+
+                        setTimeout( function()
+                        {
+                            Heart[0].style.color = '#ff7575';
+                        }, timerRemainsLS.getUTCMilliseconds() + 200 );
+
+                    }, timerRemainsLS.getUTCMilliseconds() + 500 );
+
+
+                    setTimeout( function()
+                    {
+                        updateTooltipCountdown();
+                    }, timerRemainsLS.getUTCMilliseconds() + 500 );
                 }
                 
                 updateTooltipCountdown();