Merge pull request #2620 from Anjaliavv51/main

Added refresher

assets/css/refresher.css

@@ -0,0 +1,120 @@
+#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;
+ }
+ #caduceus {
+ width: 50px;
+ height: 50px;
+ }
+ }
+
+ /*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;
+}
+#caduceus {
+ width: 50px;
+ height: 50px;
+}
+}
+
+/* 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;
+}
+#caduceus {
+ width: 50px;
+ height: 50px;
+}
+}
+
+/* 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;
+}
+#caduceus {
+ width: 50px;
+ height: 50px;
+}
+}
+
+/* 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;
+}
+#caduceus {
+ width: 50px;
+ height: 50px;
+}
+}
+
+/* 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) {
+
+#caduceus {
+ width: 50px;
+ height: 50px;
+}
+}

assets/js/refresher.js

@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const caduceus = document.getElementById('caduceus');
+
+ caduceus.addEventListener('mouseover', function() {
+ location.reload();
+ });
+ });

index.html

@@ -1110,6 +1110,12 @@ <h1>Logout Account</h1>
  </div>
  </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>
 
  <!-- Rate Us Modal Pop up