From e30bdc5f1afe1f981102c32d936a62dd44f9ee27 Mon Sep 17 00:00:00 2001 From: HikeMap User Date: Wed, 7 Jan 2026 22:39:41 -0600 Subject: [PATCH] Add animated monsters background to login screen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Random monsters appear behind the login card - Monsters cycle through random animations (idle, attack, skill, flip, etc.) - Loads actual monster types from API for variety - Animations stop when user logs in for performance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- index.html | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 111 insertions(+) diff --git a/index.html b/index.html index 03947d6..1802c0b 100644 --- a/index.html +++ b/index.html @@ -1242,6 +1242,8 @@ width: 90%; max-width: 420px; padding: 20px; + position: relative; + z-index: 1; } .login-screen-logo { text-align: center; @@ -1275,6 +1277,29 @@ background: #4CAF50; color: white; } + /* Login screen monster background */ + .login-monsters-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + pointer-events: none; + opacity: 0.6; + } + .login-monster { + position: absolute; + width: 80px; + height: 80px; + transition: transform 0.3s ease; + } + .login-monster img { + width: 100%; + height: 100%; + object-fit: contain; + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); + } .login-version { text-align: center; margin-top: 20px; @@ -3235,6 +3260,7 @@
+