diff --git a/platform/chromium/pub/index.html b/platform/chromium/pub/index.html index 900d656..1ec9404 100644 --- a/platform/chromium/pub/index.html +++ b/platform/chromium/pub/index.html @@ -19,15 +19,108 @@ color: #848a94; margin: 0; padding: 10px; - min-width: 250px; /* Minimum width to ensure content fits */ - max-width: 100%; /* Maximum width so it doesn't overflow */ - word-wrap: break-word; /* Ensures long words break to the next line */ - box-sizing: border-box; /* Includes padding in the width calculation */ + max-width: 320px; + overflow: hidden; + } + + /* Floating Halloween Icons */ + .floating-icon { + position: absolute; + width: 30px; + height: 30px; + opacity: 0.1; /* Lower opacity for a subtle effect */ + pointer-events: none; /* Makes them unclickable */ + filter: grayscale(100%) brightness(0.7); /* Black and white filter */ + animation: float 8s ease-in-out infinite, rotate 5s linear infinite; + } + + /* Add random rotations */ + .icon1 { + top: 10%; + left: 20%; + animation-delay: 0s; + transform: rotate(10deg); + } + .icon2 { + top: 30%; + left: 70%; + animation-delay: 1s; + transform: rotate(-15deg); + } + .icon3 { + top: 50%; + left: 40%; + animation-delay: 2s; + transform: rotate(25deg); + } + .icon4 { + top: 70%; + left: 10%; + animation-delay: 3s; + transform: rotate(-30deg); + } + .icon5 { + top: 80%; + left: 80%; + animation-delay: 4s; + transform: rotate(15deg); + } + .icon6 { + top: 15%; + left: 50%; + animation-delay: 5s; + transform: rotate(-10deg); + } + .icon7 { + top: 60%; + left: 20%; + animation-delay: 6s; + transform: rotate(5deg); + } + .icon8 { + top: 40%; + left: 90%; + animation-delay: 7s; + transform: rotate(-20deg); + } + .icon9 { + top: 75%; + left: 60%; + animation-delay: 8s; + transform: rotate(30deg); + } + .icon10 { + top: 25%; + left: 30%; + animation-delay: 9s; + transform: rotate(-5deg); + } + + /* Hovering effect */ + @keyframes float { + 0%, + 100% { + transform: translateY(0) translateX(0); + } + 50% { + transform: translateY(-10px) translateX(10px); + } + } + + /* Continuous rotation effect */ + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } .title h1 { font-size: 24px; - background: -webkit-linear-gradient(120deg, #c4b5fd 30%, #7bc5e4); + /* Updated Halloween gradient */ + background: -webkit-linear-gradient(120deg, #6a0dad 30%, #ff7518); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; @@ -43,13 +136,13 @@ } .status-image { - width: 60px; /* Reduced icon size */ + width: 60px; height: 60px; transition: transform 0.3s ease; } #status-message { - font-size: 14px; /* Smaller text for compact design */ + font-size: 14px; margin-top: 10px; color: #e8e8e8; line-height: 1.3; @@ -65,77 +158,110 @@ margin-top: 10px; } - #footer { - font-size: 11px; /* Smaller footer text */ - margin-top: 10px; - color: #848a94; - } - - #footer a { - color: #78b3e2; + /* Halloween-colored links */ + #footer a, + #feedback a { + color: #ff7518; text-decoration: none; } - #footer a:hover { + #footer a:hover, + #feedback a:hover { text-decoration: underline; } - #feedback { - font-size: 12px; + #footer { + font-size: 11px; margin-top: 10px; color: #848a94; } - #feedback a { - color: #78b3e2; - text-decoration: none; - } - - #feedback a:hover { - text-decoration: underline; + #feedback { + font-size: 12px; + margin-top: 10px; + color: #848a94; } /* Animation for status change */ .status-image.active { transform: scale(1.1); } - - #status-message, - #footer, - #feedback { - max-width: 100%; /* Ensures text blocks don't overflow */ - word-wrap: break-word; /* Breaks long words that may cause overflow */ - word-break: break-word; /* Optional: break long words for better display */ - }
+ + + + + + + + + + + + +Checking site status...
Think this is a mistake? - Let us know.