From 5544e5b858e62ddcbd2632699fb004b5f4de0672 Mon Sep 17 00:00:00 2001
From: Anjaliavv51 <154777864+Anjaliavv51@users.noreply.github.com>
Date: Wed, 24 Jul 2024 16:25:35 +0530
Subject: [PATCH 1/2] refresher

#2619
---
 assets/css/refresher.css | 143 +++++++++++++++++++++++++++++++++++++++
 assets/js/refresher.js   |   7 ++
 assets/svg/refresher.svg |   7 ++
 index.html               |   8 ++-
 4 files changed, 162 insertions(+), 3 deletions(-)
 create mode 100644 assets/css/refresher.css
 create mode 100644 assets/js/refresher.js
 create mode 100644 assets/svg/refresher.svg

diff --git a/assets/css/refresher.css b/assets/css/refresher.css
new file mode 100644
index 00000000..23347b29
--- /dev/null
+++ b/assets/css/refresher.css
@@ -0,0 +1,143 @@
+#caduceus-container {
+    position: fixed;
+    top: 130px; 
+    right: 30px;
+    z-index: 1000;
+    transform-origin: top center;
+    animation: swing 3s ease-in-out infinite;
+  }
+  #caduceus {
+    width: 50px; 
+    height: auto;
+    display: block;
+    margin: 0 auto;
+  }
+  
+  @keyframes swing {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(5deg); }
+    50% { transform: rotate(0deg); }
+    75% { transform: rotate(-5deg); }
+    100% { transform: rotate(0deg); }
+  }
+
+
+  /* Responsive styles */
+@media screen and (max-width: 768px) {
+    #caduceus-container {
+      top: 120px;
+      right: 30px;
+    }
+  }
+  
+  @media screen and (max-width: 320px) {
+    #caduceus-container {
+      top: 120px;
+      right: 60px;
+    }
+  }
+  
+  /* Tablet-specific styles *//*COrrect*/
+  @media screen and (min-width: 768px) and (max-width: 1024px) {
+    #caduceus-container {
+        top: 120px;
+        right: 30px;
+      }
+.rope {
+    height: 100px;
+  }
+  
+  #caduceus {
+    width: 100px;
+  }
+  }
+
+ /*Correect*/ /* iPhone SE, 5, 5S, 5C, iPod Touch 5g and up */
+@media only screen 
+and (min-device-width: 320px) 
+and (max-device-width: 568px)
+and (-webkit-min-device-pixel-ratio: 2) {
+#caduceus-container {
+  top: 120px;
+  right: 60px;
+}
+
+.rope {
+  height: 100px;
+}
+
+#caduceus {
+  width: 100px;
+}
+}
+
+/* iPhone 6, 6S, 7, 8 */
+@media only screen 
+and (min-device-width: 375px) 
+and (max-device-width: 667px) 
+and (-webkit-min-device-pixel-ratio: 2) {
+#caduceus-container {
+  right: 8px;
+}
+
+.rope {
+  height: 100px;
+}
+
+#caduceus {
+  width: 100px;
+}
+}
+
+/* iPhone 6+, 7+, 8+ */
+@media only screen 
+and (min-device-width: 414px) 
+and (max-device-width: 736px) 
+and (-webkit-min-device-pixel-ratio: 3) {
+#caduceus-container {
+  top: 35px;
+  right: 10px;
+}
+
+.rope {
+  height: 70px;
+}
+
+#caduceus {
+  width: 35px;
+}
+}
+
+/* iPhone X, XS, 11 Pro */
+@media only screen 
+and (min-device-width: 375px) 
+and (max-device-width: 812px) 
+and (-webkit-min-device-pixel-ratio: 3) {
+#caduceus-container {
+  top: 40px;
+  right: 12px;
+}
+
+.rope {
+  height: 75px;
+}
+
+#caduceus {
+  width: 38px;
+}
+}
+
+/* iPhone XR, XS Max, 11, 11 Pro Max */
+@media only screen 
+and (min-device-width: 414px) 
+and (max-device-width: 896px) 
+and (-webkit-min-device-pixel-ratio: 2) {
+
+.rope {
+  height: 100px;
+}
+
+#caduceus {
+  width: 100px;
+}
+}
\ No newline at end of file
diff --git a/assets/js/refresher.js b/assets/js/refresher.js
new file mode 100644
index 00000000..bb3e18d2
--- /dev/null
+++ b/assets/js/refresher.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const caduceus = document.getElementById('caduceus');
+    
+    caduceus.addEventListener('mouseover', function() {
+      location.reload();
+    });
+  });
\ No newline at end of file
diff --git a/assets/svg/refresher.svg b/assets/svg/refresher.svg
new file mode 100644
index 00000000..26b53ba7
--- /dev/null
+++ b/assets/svg/refresher.svg
@@ -0,0 +1,7 @@
+
+
+          <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff74" viewBox="0 0 65 75" class="book-page">
+            <path stroke-linecap="round" stroke-width="4" stroke="#c18949" d="M40 20H15"></path>
+            <path stroke-linecap="round" stroke-width="4" stroke="#c18949" d="M49 30L15 30"></path>
+            <path stroke-width="5" stroke="#e05452" d="M2.5 2.5H55C59.1421 2.5 62.5 5.85786 62.5 10V65C62.5 69.1421 59.1421 72.5 55 72.5H2.5V2.5Z"></path>
+          </svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 287fb751..adbec864 100644
--- a/index.html
+++ b/index.html
@@ -1052,9 +1052,11 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
 
     </div>
   </header>
-
-
-
+  <link rel="stylesheet" href="assets/css/refresher.css">
+  <div id="caduceus-container">
+    <img id="caduceus" src="assets/svg/refresher.svg" alt="Caduceus" title="refresher">
+  </div>
+  <script src="assets/js/refresher.js"></script>
 
 
   <main>

From 262c0d1b856f697413a7808c4158ecbaa593a45c Mon Sep 17 00:00:00 2001
From: Anjaliavv51 <154777864+Anjaliavv51@users.noreply.github.com>
Date: Wed, 24 Jul 2024 16:55:11 +0530
Subject: [PATCH 2/2] responsive

#2619
---
 assets/css/refresher.css | 47 ++++++++++------------------------------
 1 file changed, 12 insertions(+), 35 deletions(-)

diff --git a/assets/css/refresher.css b/assets/css/refresher.css
index 23347b29..43a822ed 100644
--- a/assets/css/refresher.css
+++ b/assets/css/refresher.css
@@ -21,7 +21,6 @@
     100% { transform: rotate(0deg); }
   }
 
-
   /* Responsive styles */
 @media screen and (max-width: 768px) {
     #caduceus-container {
@@ -43,12 +42,9 @@
         top: 120px;
         right: 30px;
       }
-.rope {
-    height: 100px;
-  }
-  
   #caduceus {
-    width: 100px;
+    width: 50px;
+    height: 50px;
   }
   }
 
@@ -61,13 +57,9 @@ and (-webkit-min-device-pixel-ratio: 2) {
   top: 120px;
   right: 60px;
 }
-
-.rope {
-  height: 100px;
-}
-
 #caduceus {
-  width: 100px;
+  width: 50px;
+  height: 50px;
 }
 }
 
@@ -79,13 +71,9 @@ and (-webkit-min-device-pixel-ratio: 2) {
 #caduceus-container {
   right: 8px;
 }
-
-.rope {
-  height: 100px;
-}
-
 #caduceus {
-  width: 100px;
+  width: 50px;
+  height: 50px;
 }
 }
 
@@ -98,13 +86,9 @@ and (-webkit-min-device-pixel-ratio: 3) {
   top: 35px;
   right: 10px;
 }
-
-.rope {
-  height: 70px;
-}
-
 #caduceus {
-  width: 35px;
+  width: 50px;
+  height: 50px;
 }
 }
 
@@ -117,13 +101,9 @@ and (-webkit-min-device-pixel-ratio: 3) {
   top: 40px;
   right: 12px;
 }
-
-.rope {
-  height: 75px;
-}
-
 #caduceus {
-  width: 38px;
+  width: 50px;
+  height: 50px;
 }
 }
 
@@ -133,11 +113,8 @@ and (min-device-width: 414px)
 and (max-device-width: 896px) 
 and (-webkit-min-device-pixel-ratio: 2) {
 
-.rope {
-  height: 100px;
-}
-
 #caduceus {
-  width: 100px;
+  width: 50px;
+  height: 50px;
 }
 }
\ No newline at end of file