refresher

Anishkagupta04#983
TaeMochi12 · Jul 24, 2024 · 64e5ad6 · 64e5ad6
1 parent eb78a52
commit 64e5ad6
Show file tree

Hide file tree

Showing 5 changed files with 212 additions and 1 deletion.
diff --git a/Css-Files/caduceus.css b/Css-Files/caduceus.css
@@ -0,0 +1,184 @@
+#caduceus-container {
+    position: fixed;
+    top: 85px; 
+    right: 30px;
+    z-index: 1000;
+    transform-origin: top center;
+    animation: swing 3s ease-in-out infinite;
+  }
+
+  .rope {
+    width: 2px;
+    height: 100px; 
+    margin: 0 auto;
+    background: linear-gradient(
+      45deg,
+      #3bfcc0 0%,
+      #ffffff 50%,
+      #000000 100%
+    );
+    background-size: 400% 400%;
+    animation: 
+      gradientBackground 15s ease infinite,
+      waveMotion 3s ease-in-out infinite;
+    position: relative;
+  }
+
+  .rope::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: inherit;
+    filter: blur(1px);
+  }
+
+  @keyframes gradientBackground {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+  }
+
+  @keyframes waveMotion {
+    0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
+    25% { clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); }
+    50% { clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); }
+    75% { clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); }
+  }
+  #caduceus {
+    width: 100px; 
+    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;
+}
+}
diff --git a/img/2jghCPWR6g8S6w5Nv6bF6WCSHzJ.svg b/img/2jghCPWR6g8S6w5Nv6bF6WCSHzJ.svg
diff --git a/img/Caduceus.svg.png b/img/Caduceus.svg.png
diff --git a/index.html b/index.html
@@ -73,9 +73,11 @@
           flex-direction: row;
         }
   </style>
+  <link rel="stylesheet" href="Css-Files/caduceus.css">
 </head>
 
 <body>
+  <script src="js/caduceus.js"></script>
   <div class="pre">
     <div class="loader"></div>
   </div>
@@ -105,7 +107,10 @@
       </div>
     </nav>
   </header>
-
+  <div id="caduceus-container">
+    <div class="rope"></div>
+    <img id="caduceus" src="img/2jghCPWR6g8S6w5Nv6bF6WCSHzJ.svg" alt="Caduceus">
+  </div>
   <!-- ############# Header ############# -->
 
   <header id="header" class="fixed-top">

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