From 2a163b66f63551180a26a4aecb8445370ebcf7c5 Mon Sep 17 00:00:00 2001
From: Prince Shakya <princeshakya@Princes-MacBook-Air.local>
Date: Thu, 7 May 2026 18:18:49 +0530
Subject: [PATCH 1/5] UI/UX: Add mobile navigation menu structure

---
 finbot/apps/finbot/templates/base.html | 30 ++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/finbot/apps/finbot/templates/base.html b/finbot/apps/finbot/templates/base.html
index 69dfe82b..83ad4a82 100644
--- a/finbot/apps/finbot/templates/base.html
+++ b/finbot/apps/finbot/templates/base.html
@@ -99,10 +99,40 @@
                     <span class="hidden sm:inline">GitHub</span>
                 </a>
                 {% endblock %}
+                <button id="mobile-menu-button" class="sm:hidden ml-2 p-2 text-text-3 hover:text-cyan transition-colors" aria-label="Toggle Menu">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg>
+                </button>
             </nav>
         </div>
     </header>
 
+    <!-- Mobile Menu Overlay -->
+    <div id="mobile-menu" class="fixed inset-0 z-[60] bg-bg-primary/95 backdrop-blur-2xl transition-all duration-300 transform translate-x-full sm:hidden">
+        <div class="flex flex-col h-full p-8">
+            <div class="flex justify-between items-center mb-12">
+                <span class="text-text-1 font-bold text-xl tracking-tight">MENU</span>
+                <button id="mobile-menu-close" class="p-2 text-text-3 hover:text-danger transition-colors">
+                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                </button>
+            </div>
+            <nav class="flex flex-col space-y-6">
+                {% block mobile_nav %}
+                <a href="/" class="text-2xl font-semibold text-text-2 hover:text-cyan transition-colors">Home</a>
+                <a href="/how-it-works" class="text-2xl font-semibold text-text-2 hover:text-cyan transition-colors">How It Works</a>
+                <a href="/portals" class="text-2xl font-semibold text-text-2 hover:text-cyan transition-colors">Portals</a>
+                <a href="/about" class="text-2xl font-semibold text-text-2 hover:text-cyan transition-colors">About</a>
+                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" class="text-2xl font-semibold text-purple flex items-center gap-3">
+                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                    GitHub
+                </a>
+                {% endblock %}
+            </nav>
+            <div class="mt-auto pt-8 border-t border-border-dim">
+                <p class="text-text-3 text-xs">Part of the <a href="https://genai.owasp.org/" class="text-cyan">OWASP GenAI Security Project</a></p>
+            </div>
+        </div>
+    </div>
+
     <main class="relative z-10">
         {% block content %}{% endblock %}
     </main>

From 4f1c2aeb16bf897dc1e20f388b0efb784393f1af Mon Sep 17 00:00:00 2001
From: Prince Shakya <princeshakya@Princes-MacBook-Air.local>
Date: Thu, 7 May 2026 18:19:00 +0530
Subject: [PATCH 2/5] UI/UX: Implement mobile menu toggle logic

---
 finbot/apps/finbot/templates/base.html | 31 ++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/finbot/apps/finbot/templates/base.html b/finbot/apps/finbot/templates/base.html
index 83ad4a82..7bc4c591 100644
--- a/finbot/apps/finbot/templates/base.html
+++ b/finbot/apps/finbot/templates/base.html
@@ -152,5 +152,36 @@
     </footer>
 
     {% block scripts %}{% endblock %}
+    <script>
+        // Mobile Menu Toggle
+        const menuBtn = document.getElementById('mobile-menu-button');
+        const closeBtn = document.getElementById('mobile-menu-close');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const body = document.body;
+
+        function toggleMenu(show) {
+            if (show) {
+                mobileMenu.classList.remove('translate-x-full');
+                body.style.overflow = 'hidden';
+            } else {
+                mobileMenu.classList.add('translate-x-full');
+                body.style.overflow = '';
+            }
+        }
+
+        if (menuBtn) menuBtn.addEventListener('click', () => toggleMenu(true));
+        if (closeBtn) closeBtn.addEventListener('click', () => toggleMenu(false));
+
+        // Close menu on link click (especially for anchor links)
+        const mobileLinks = mobileMenu.querySelectorAll('a');
+        mobileLinks.forEach(link => {
+            link.addEventListener('click', () => toggleMenu(false));
+        });
+
+        // Close on ESC
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') toggleMenu(false);
+        });
+    </script>
 </body>
 </html>

From a8425d95ab2d2c418d281068ca0f4d7ca7e5b84e Mon Sep 17 00:00:00 2001
From: Prince Shakya <princeshakya@Princes-MacBook-Air.local>
Date: Thu, 7 May 2026 18:19:54 +0530
Subject: [PATCH 3/5] UI/UX: Adjust mobile menu font sizes and styles

---
 finbot/apps/finbot/templates/base.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/finbot/apps/finbot/templates/base.html b/finbot/apps/finbot/templates/base.html
index 7bc4c591..d213d297 100644
--- a/finbot/apps/finbot/templates/base.html
+++ b/finbot/apps/finbot/templates/base.html
@@ -117,10 +117,10 @@
             </div>
             <nav class="flex flex-col space-y-6">
                 {% block mobile_nav %}
-                <a href="/" class="text-2xl font-semibold text-text-2 hover:text-cyan transition-colors">Home</a>
-                <a href="/how-it-works" class="text-2xl font-semibold text-text-2 hover:text-cyan transition-colors">How It Works</a>
-                <a href="/portals" class="text-2xl font-semibold text-text-2 hover:text-cyan transition-colors">Portals</a>
-                <a href="/about" class="text-2xl font-semibold text-text-2 hover:text-cyan transition-colors">About</a>
+                <a href="/" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">Home</a>
+                <a href="/how-it-works" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">How It Works</a>
+                <a href="/portals" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">Portals</a>
+                <a href="/about" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">About</a>
                 <a href="https://github.com/GenAI-Security-Project/finbot-ctf" class="text-2xl font-semibold text-purple flex items-center gap-3">
                     <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                     GitHub

From fab04d40f9f110dde7aa3aa3700622d802724b15 Mon Sep 17 00:00:00 2001
From: Prince Shakya <princeshakya@Princes-MacBook-Air.local>
Date: Thu, 7 May 2026 18:20:59 +0530
Subject: [PATCH 4/5] UI/UX: Refine mobile navigation and hide redundant links

---
 finbot/apps/finbot/templates/base.html | 4 ----
 finbot/apps/finbot/templates/home.html | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/finbot/apps/finbot/templates/base.html b/finbot/apps/finbot/templates/base.html
index d213d297..770e7981 100644
--- a/finbot/apps/finbot/templates/base.html
+++ b/finbot/apps/finbot/templates/base.html
@@ -121,10 +121,6 @@
                 <a href="/how-it-works" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">How It Works</a>
                 <a href="/portals" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">Portals</a>
                 <a href="/about" class="text-lg font-semibold text-text-2 hover:text-cyan transition-colors">About</a>
-                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" class="text-2xl font-semibold text-purple flex items-center gap-3">
-                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
-                    GitHub
-                </a>
                 {% endblock %}
             </nav>
             <div class="mt-auto pt-8 border-t border-border-dim">
diff --git a/finbot/apps/finbot/templates/home.html b/finbot/apps/finbot/templates/home.html
index 0b443e1b..a390e5ec 100644
--- a/finbot/apps/finbot/templates/home.html
+++ b/finbot/apps/finbot/templates/home.html
@@ -53,11 +53,11 @@
 {% endblock %}
 
 {% block nav %}
-                <a href="#challenges" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03]">Challenges</a>
+                <a href="#challenges" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">Challenges</a>
                 <a href="/how-it-works" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">How It Works</a>
                 <a href="/portals" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">Portals</a>
                 <a href="/about" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden md:inline-flex">About</a>
-                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
+                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium hidden sm:flex">
                     <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                     <span class="hidden sm:inline">GitHub</span>
                 </a>

From 73ae75442729e985aabc513264237c39502c1891 Mon Sep 17 00:00:00 2001
From: Prince Shakya <princeshakya@Princes-MacBook-Air.local>
Date: Thu, 7 May 2026 18:45:45 +0530
Subject: [PATCH 5/5] UI/UX: Restore GitHub link visibility on mobile nav bar

---
 finbot/apps/finbot/templates/home.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/finbot/apps/finbot/templates/home.html b/finbot/apps/finbot/templates/home.html
index a390e5ec..277510af 100644
--- a/finbot/apps/finbot/templates/home.html
+++ b/finbot/apps/finbot/templates/home.html
@@ -57,7 +57,7 @@
                 <a href="/how-it-works" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">How It Works</a>
                 <a href="/portals" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden sm:inline-flex">Portals</a>
                 <a href="/about" class="text-text-3 hover:text-cyan transition text-sm px-3 py-2 rounded-lg hover:bg-white/[0.03] hidden md:inline-flex">About</a>
-                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium hidden sm:flex">
+                <a href="https://github.com/GenAI-Security-Project/finbot-ctf" target="_blank" rel="noopener" class="ml-2 flex items-center space-x-2 px-4 py-2 rounded-lg bg-purple/15 border border-purple/30 text-purple hover:bg-purple/25 transition text-sm font-medium">
                     <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                     <span class="hidden sm:inline">GitHub</span>
                 </a>