Update (ui)

resources/css/app-front.css

@@ -1,3 +1,15 @@
+.bg-gradient-rainbow {
+  background: linear-gradient(
+    270deg,
+    #ffa63d,
+    #ff3d77,
+    #338aff,
+    #3cf0c5,
+    #ffa63d
+  );
+  background-size: 400% 400%;
+}
+
 .bg-hero {
   background: transparent;
   background: linear-gradient(
@@ -70,7 +82,7 @@ .illuminated {
   position: relative;
   overflow: hidden;
   z-index: 1;
-  animation: shimmer 2s infinite linear; /* Apply the animation to the button */
+  animation: shimmer 3s infinite linear; /* Apply the animation to the button */
 }
 
 /* Shimmer gradient */
@@ -92,6 +104,33 @@ .illuminated::before {
   animation: shimmer 3s infinite; /* Apply the animation to the gradient */
 }
 
+/* Custom illuminated button style */
+.illuminated-slow {
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  animation: shimmer 10s infinite linear; /* Apply the animation to the button */
+}
+
+/* Shimmer gradient */
+.illuminated-slow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0) 25%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(255, 255, 255, 0) 75%
+  );
+  background-size: 400% 400%;
+  z-index: -1;
+  animation: shimmer 10s infinite; /* Apply the animation to the gradient */
+}
+
 /* Define the shimmer effect using keyframes */
 @keyframes shimmer {
   0% {
@@ -106,3 +145,18 @@ .word-wrap-break-word {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
+
+.hover-opacity:hover {
+  opacity: 0.7 !important;
+}
+
+.hover-grow {
+  transition: 0.3s;
+  transform: scale(1);
+}
+
+.hover-grow:hover,
+.d-grow {
+  transform: scale(1.03);
+  transition: 0.3s;
+}

resources/js/vue/front/ShareToFriends.vue

@@ -1,21 +1,23 @@
 <template>
   <div>
-    <button
-      v-if="isMobileDevice"
-      type="button"
-      class="align-self-center btn btn-link text-white ms-2"
-      @click="handleShareButton"
-    >
-      <i class="bi bi-share-fill"></i>
-    </button>
-    <button
-      v-else
-      type="button"
-      class="align-self-center btn btn-light ms-2"
-      @click="handleShareButton"
-    >
-      <i class="bi bi-share-fill"></i> Share
-    </button>
+    <div class="d-flex" style="height: 100%">
+      <button
+        v-if="isMobileDevice"
+        type="button"
+        class="align-self-center btn btn-link text-white ms-1 btn-lg px-1 hover-opacity"
+        @click="handleShareButton"
+      >
+        <i class="bi bi-share-fill"></i>
+      </button>
+      <button
+        v-else
+        type="button"
+        class="align-self-center btn btn-light ms-2 mb-0"
+        @click="handleShareButton"
+      >
+        <i class="bi bi-share-fill"></i> Share
+      </button>
+    </div>
 
     <!-- Modal -->
     <div

resources/views/front/layouts/partials/nav.blade.php

@@ -30,6 +30,12 @@
                     <div class="d-flex d-justify-content-end">
                         <div class="align-self-center d-none d-md-block">Important news shaping the digital future</div>
 
+                        <button type="button"
+                            class="align-self-center ms-1 btn btn-link text-white btn-lg px-1 hover-opacity"
+                            onclick="window.location.reload()">
+                            <i class="bi bi-arrow-clockwise"></i>
+                        </button>
+
                         <share-to-friends></share-to-friends>
                     </div>
 

resources/views/front/welcome.blade.php

@@ -23,7 +23,7 @@
 
                         @foreach ($top_rss_keywords as $rss_keyword)
                             <a href="{{ get_route_search_result($rss_keyword->value_lowercased) }}"
-                                class="mb-1 pb-1 badge text-bg-light border me-1 fw-bold shadow">
+                                class="mb-1 pb-1 badge text-primary border me-1 fw-bold shadow hover-grow">
                                 <span class="h6">#{{ $rss_keyword->value }}</span>
                             </a>
                         @endforeach
@@ -80,7 +80,7 @@ class="text-secondary">{{ $post->published_at->diffForHumans() }}</small>
                                     🍪 Tech Bites </h2>
                                 <div class="align-self-center">
                                     <span
-                                        class="mb-2 ms-2 badge illuminated text-bg-primary d-inline-flex font-family-roboto-condensed"><i
+                                        class="mb-2 ms-2 badge illuminated-slow bg-gradient-rainbow text-white d-inline-flex font-family-roboto-condensed"><i
                                             class="bi bi-clock-history me-1"></i> UPDATED HOURLY</span>
                                 </div>