From fc132e850a45b99ee6f941010cae42aa15e9c037 Mon Sep 17 00:00:00 2001
From: Piyush Acharya <acharyapiyush1@outlook.com>
Date: Mon, 24 Feb 2025 10:39:18 -0800
Subject: [PATCH] Update scroll indicator on homepage

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/VerisimilitudeX/DNAnalyzer?shareId=XXXX-XXXX-XXXX-XXXX).
---
 web/index.html |  5 +++--
 web/style.css  | 40 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/web/index.html b/web/index.html
index 3f5ba1a2..abade829 100644
--- a/web/index.html
+++ b/web/index.html
@@ -59,8 +59,9 @@ <h1>DNAnalyzer</h1>
                 </div>
             </div>
             <div class="scroll-indicator">
-                <div class="mouse"></div>
-                <span>Scroll to explore</span>
+                <div class="mouse">
+                    <div class="scroll-wheel"></div>
+                </div>
             </div>
         </section>
 
diff --git a/web/style.css b/web/style.css
index 29038ccc..6a39b0c4 100644
--- a/web/style.css
+++ b/web/style.css
@@ -894,3 +894,43 @@ body {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+
+/* P0f6a */
+.scroll-indicator {
+    position: absolute;
+    bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: bounce 2s infinite;
+}
+
+.mouse {
+    width: 24px;
+    height: 40px;
+    border: 2px solid rgba(255, 255, 255, 0.7);
+    border-radius: 12px;
+    position: relative;
+}
+
+.scroll-wheel {
+    width: 4px;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 2px;
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: scroll 1.5s infinite;
+}
+
+@keyframes scroll {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 1; }
+}
+
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}