diff --git a/assets/css/refresher.css b/assets/css/refresher.css new file mode 100644 index 000000000..43a822ed9 --- /dev/null +++ b/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; +} +} \ No newline at end of file diff --git a/assets/js/refresher.js b/assets/js/refresher.js new file mode 100644 index 000000000..bb3e18d28 --- /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 000000000..26b53ba7e --- /dev/null +++ b/assets/svg/refresher.svg @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/index.html b/index.html index eeb70978b..f3e0784d6 100644 --- a/index.html +++ b/index.html @@ -1110,6 +1110,12 @@