ibrahimlasfar commited on
Commit
58b8f48
·
1 Parent(s): df3d078

first commit

Browse files
Files changed (2) hide show
  1. templates/index.html +363 -131
  2. utils/web_search.py +1 -1
templates/index.html CHANGED
@@ -1,142 +1,374 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>MGZon Chatbot - Powered by AI</title>
7
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css" rel="stylesheet">
9
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
10
- <style>
11
- @keyframes slideIn {
12
- from { transform: translateX(-100%); }
13
- to { transform: translateX(0); }
14
- }
15
- .sidebar.active { transform: translateX(0); }
16
- @media (max-width: 768px) {
17
- .sidebar { transform: translateX(-100%); }
18
- .sidebar.active { transform: translateX(0); animation: slideIn 0.3s ease; }
19
- }
20
- .loading::after {
21
- content: '';
22
- display: inline-block;
23
- width: 16px;
24
- height: 16px;
25
- border: 2px solid #fff;
26
- border-top-color: transparent;
27
- border-radius: 50%;
28
- animation: spin 1s linear infinite;
29
- margin-left: 8px;
30
- }
31
- @keyframes spin {
32
- to { transform: rotate(360deg); }
33
- }
34
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  </head>
36
- <body class="bg-gray-900 text-white min-h-screen flex flex-col">
37
- <button class="md:hidden fixed top-4 left-4 z-50 text-white text-2xl sidebar-toggle">☰</button>
38
- <div class="sidebar fixed top-0 left-0 h-full w-64 bg-gradient-to-b from-blue-800 to-orange-500 text-white p-6 flex flex-col md:translate-x-0 transition-transform duration-300">
39
- <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-20 h-20 mb-6 animate-pulse">
40
- <nav class="flex flex-col gap-4">
41
- <a href="/" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition active:bg-orange-600">Home</a>
42
- <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">API Documentation</a>
43
- <a href="https://hager-zon.vercel.app/about" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">About MGZon</a>
44
- <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">Community</a>
45
- <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-orange-600 transition">Mark Al-Asfar</a>
46
- </nav>
47
- </div>
48
- <div class="flex-1 md:ml-64 p-6">
49
- <div class="container max-w-6xl mx-auto">
50
- <div class="text-center py-12">
51
- <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
52
- <h1 class="text-5xl font-bold mb-4 animate-fade-in">Welcome to MGZon Chatbot 🚀</h1>
53
- <p class="text-lg mb-8">
54
- MGZon Chatbot is your AI-powered assistant for code generation, analysis, and MGZon-specific queries. Built with Gradio and FastAPI, it supports multiple frameworks and languages. Ready to explore?
55
- </p>
56
- <a href="/gradio" id="chatbot-link" class="inline-block bg-gradient-to-r from-orange-500 to-red-500 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition transform">Launch Chatbot <span class="loading hidden"></span></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  </div>
58
- <div class="features my-12">
59
- <h2 class="text-3xl font-bold text-center mb-8">Features</h2>
60
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
61
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
62
- <i class="bx bx-code-alt text-4xl text-orange-500 mb-4"></i>
63
- <h3 class="text-xl font-semibold mb-2">Code Generation</h3>
64
- <p>Generate code for React, Django, Flask, and more.</p>
65
- </div>
66
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
67
- <i class="bx bx-search text-4xl text-orange-500 mb-4"></i>
68
- <h3 class="text-xl font-semibold mb-2">Web Search</h3>
69
- <p>Integrated web search for MGZon-related queries.</p>
70
- </div>
71
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
72
- <i class="bx bx-analyse text-4xl text-orange-500 mb-4"></i>
73
- <h3 class="text-xl font-semibold mb-2">Analysis & Review</h3>
74
- <p>Detailed code and data analysis with insights.</p>
75
- </div>
76
- </div>
77
  </div>
78
- <div class="news my-12">
79
- <h2 class="text-3xl font-bold text-center mb-8">Latest MGZon News</h2>
80
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
81
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
82
- <h3 class="text-xl font-semibold mb-2">New API Features</h3>
83
- <p>Explore our updated API with OAuth 2.0 support.</p>
84
- <a href="https://hager-zon.vercel.app/blog" target="_blank" class="text-orange-500 hover:underline">Read More</a>
85
- </div>
86
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:scale-105 transition transform">
87
- <h3 class="text-xl font-semibold mb-2">Community Meetup</h3>
88
- <p>Join our next virtual meetup on e-commerce trends.</p>
89
- <a href="https://hager-zon.vercel.app/community" target="_blank" class="text-orange-500 hover:underline">Join Now</a>
90
- </div>
91
- </div>
 
92
  </div>
 
93
  </div>
94
- </div>
95
- <footer class="bg-gradient-to-r from-blue-900 to-gray-900 py-12 mt-auto">
96
- <div class="container max-w-6xl mx-auto text-center">
97
- <img src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
98
- <p class="mb-4">Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-orange-500 hover:underline">Mark Al-Asfar</a> | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-orange-500 hover:underline">MGZon AI</a></p>
99
- <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
100
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
101
- <i class="bx bx-mail-send text-3xl text-orange-500 mb-4"></i>
102
- <h3 class="text-lg font-semibold mb-2">Email Us</h3>
103
- <p>Contact: <a href="mailto:support@mgzon.com" class="text-orange-500 hover:underline">[email protected]</a></p>
104
- </div>
105
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
106
- <i class="bx bx-phone text-3xl text-orange-500 mb-4"></i>
107
- <h3 class="text-lg font-semibold mb-2">Phone Support</h3>
108
- <p>Call: +1-800-123-4567</p>
109
- </div>
110
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
111
- <i class="bx bx-group text-3xl text-orange-500 mb-4"></i>
112
- <h3 class="text-lg font-semibold mb-2">Community</h3>
113
- <p>Join: <a href="https://hager-zon.vercel.app/community" class="text-orange-500 hover:underline">mgzon.com/community</a></p>
114
- </div>
115
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
116
- <i class="bx bx-code-alt text-3xl text-orange-500 mb-4"></i>
117
- <h3 class="text-lg font-semibold mb-2">API Docs</h3>
118
- <p>Explore: <a href="/docs" class="text-orange-500 hover:underline">mgzon.com/docs</a></p>
119
- </div>
120
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
121
- <i class="bx bx-help-circle text-3xl text-orange-500 mb-4"></i>
122
- <h3 class="text-lg font-semibold mb-2">FAQ</h3>
123
- <p>Read: <a href="https://hager-zon.vercel.app/faq" class="text-orange-500 hover:underline">mgzon.com/faq</a></p>
124
- </div>
125
- <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
126
- <i class="bx bx-book text-3xl text-orange-500 mb-4"></i>
127
- <h3 class="text-lg font-semibold mb-2">Documentation</h3>
128
- <p>Learn: <a href="/docs" class="text-orange-500 hover:underline">mgzon.com/docs</a></p>
129
- </div>
130
- </div>
131
- <div class="flex justify-center gap-6 mt-6">
132
- <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-github"></i></a>
133
- <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-twitter"></i></a>
134
- <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-orange-500 transition"><i class="bx bxl-facebook"></i></a>
135
- </div>
136
- <p class="mt-6" 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
 
 
 
 
 
 
 
 
 
 
 
 
137
  </div>
138
- </footer>
139
- <script src="/static/js/scripts.js"></script>
140
- <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  </body>
142
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>MGZon Chatbot Powered by AI</title>
7
+
8
+ <!-- Tailwind (v3) -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Boxicons -->
12
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet" />
13
+
14
+ <!-- Prism (for code highlighting) -->
15
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css" rel="stylesheet" />
16
+ <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
17
+
18
+ <style>
19
+ /* Animated gradient background */
20
+ @keyframes gradientShift {
21
+ 0% { background-position: 0% 50%; }
22
+ 50% { background-position: 100% 50%; }
23
+ 100% { background-position: 0% 50%; }
24
+ }
25
+ body {
26
+ background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
27
+ background-size: 400% 400%;
28
+ animation: gradientShift 15s ease infinite;
29
+ font-family: system-ui, sans-serif;
30
+ }
31
+
32
+ /* Glass-morphism helpers */
33
+ .glass {
34
+ background: rgba(255, 255, 255, 0.07);
35
+ border-radius: 1rem;
36
+ border: 1px solid rgba(255, 255, 255, 0.12);
37
+ backdrop-filter: blur(12px);
38
+ -webkit-backdrop-filter: blur(12px);
39
+ }
40
+
41
+ /* Sidebar transition */
42
+ .sidebar {
43
+ transition: transform 0.3s ease-in-out;
44
+ }
45
+
46
+ /* Hide logo when sidebar is collapsed */
47
+ .sidebar.collapsed .logo {
48
+ opacity: 0;
49
+ transition: opacity 0.2s ease;
50
+ }
51
+
52
+ /* Prevent sidebar from covering the footer */
53
+ .main-content {
54
+ min-height: calc(100vh - 4rem); /* footer height approx. */
55
+ }
56
+
57
+ /* Loading spinner for button */
58
+ .loading {
59
+ display: inline-block;
60
+ width: 1rem;
61
+ height: 1rem;
62
+ border: 2px solid currentColor;
63
+ border-top-color: transparent;
64
+ border-radius: 50%;
65
+ animation: spin 0.8s linear infinite;
66
+ margin-left: 0.5rem;
67
+ }
68
+ @keyframes spin {
69
+ to { transform: rotate(360deg); }
70
+ }
71
+
72
+ /* Card hover and transition effects */
73
+ .glass:hover {
74
+ transform: scale(1.05);
75
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
76
+ background: rgba(255, 255, 255, 0.15);
77
+ }
78
+
79
+ /* Responsive adjustments */
80
+ @media (max-width: 768px) {
81
+ .sidebar {
82
+ transform: translateX(-100%);
83
+ }
84
+ .sidebar.active {
85
+ transform: translateX(0);
86
+ }
87
+ }
88
+ </style>
89
  </head>
90
+
91
+ <body class="text-white flex flex-col min-h-screen">
92
+ <!-- Mobile toggle button -->
93
+ <button
94
+ id="sidebarToggle"
95
+ class="md:hidden fixed top-4 left-4 z-50 p-2 text-2xl text-white rounded bg-gray-800/60 hover:bg-gray-700/80 transition"
96
+ aria-label="Toggle navigation"
97
+ >
98
+ <i class="bx bx-menu"></i>
99
+ </button>
100
+
101
+ <!-- Sidebar -->
102
+ <aside
103
+ id="sidebar"
104
+ class="sidebar fixed inset-y-0 left-0 w-64 bg-gradient-to-b from-teal-800 to-emerald-900 p-6 flex flex-col overflow-y-auto z-40"
105
+ >
106
+ <!-- Close button for mobile -->
107
+ <button
108
+ id="closeSidebar"
109
+ class="md:hidden text-white text-2xl absolute top-4 right-4"
110
+ aria-label="Close sidebar"
111
+ >
112
+
113
+ </button>
114
+ <!-- Logo (optional: hidden in homepage) -->
115
+ <img
116
+ src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg"
117
+ alt="MGZon Logo"
118
+ class="logo w-20 h-20 mx-auto mb-8 animate-pulse"
119
+ />
120
+ <nav class="flex flex-col gap-3">
121
+ <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition active:bg-emerald-600">Home</a>
122
+ <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
123
+ <a href="https://hager-zon.vercel.app/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
124
+ <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
125
+ <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
126
+ </nav>
127
+ </aside>
128
+
129
+ <!-- Main content -->
130
+ <main class="flex-1 md:ml-64 p-6 main-content">
131
+ <section class="container max-w-6xl mx-auto">
132
+ <!-- Hero -->
133
+ <div class="text-center py-12">
134
+ <img
135
+ src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg"
136
+ alt="MGZon Logo"
137
+ class="w-32 h-32 mx-auto mb-6 animate-bounce"
138
+ />
139
+ <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
140
+ Welcome to MGZon Chatbot 🚀
141
+ </h1>
142
+ <p class="text-lg max-w-2xl mx-auto mb-8">
143
+ MGZon Chatbot is an AI-powered assistant for code generation, analysis, and MGZon-specific queries. Built with Gradio and FastAPI, it supports multiple frameworks and languages. Ready to explore?
144
+ </p>
145
+ <a
146
+ href="/gradio"
147
+ id="launchBtn"
148
+ class="inline-flex items-center bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl"
149
+ >
150
+ Launch Chatbot <i class="bx bx-rocket ml-2"></i>
151
+ <span id="spinner" class="loading hidden"></span>
152
+ </a>
153
+ </div>
154
+
155
+ <!-- Features -->
156
+ <section class="my-12">
157
+ <h2 class="text-3xl font-bold text-center mb-8">Features</h2>
158
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
159
+ <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('code-generation')">
160
+ <button
161
+ class="absolute top-2 right-2 text-gray-300 hover:text-white transition"
162
+ onclick="event.stopPropagation(); closeCardDetails('code-generation')"
163
+ aria-label="Close card"
164
+ >
165
+ &times;
166
+ </button>
167
+ <i class="bx bx-code-alt text-4xl text-emerald-300 mb-4"></i>
168
+ <h3 class="text-xl font-semibold mb-2">Code Generation</h3>
169
+ <p>Generate code for React, Django, Flask, and more.</p>
170
+ <div id="code-generation-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
171
+ <p>Supports multiple frameworks including React, Django, Flask, and Node.js. Generate clean, well-commented code with examples.</p>
172
+ <button onclick="closeCardDetails('code-generation')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
173
  </div>
174
+ </div>
175
+ <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('web-search')">
176
+ <button
177
+ class="absolute top-2 right-2 text-gray-300 hover:text-white transition"
178
+ onclick="event.stopPropagation(); closeCardDetails('web-search')"
179
+ aria-label="Close card"
180
+ >
181
+ &times;
182
+ </button>
183
+ <i class="bx bx-search text-4xl text-emerald-300 mb-4"></i>
184
+ <h3 class="text-xl font-semibold mb-2">Web Search</h3>
185
+ <p>Integrated web search for MGZon-related queries.</p>
186
+ <div id="web-search-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
187
+ <p>Search the web for up-to-date information and MGZon-specific answers.</p>
188
+ <button onclick="closeCardDetails('web-search')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
 
 
 
 
189
  </div>
190
+ </div>
191
+ <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('analysis')">
192
+ <button
193
+ class="absolute top-2 right-2 text-gray-300 hover:text-white transition"
194
+ onclick="event.stopPropagation(); closeCardDetails('analysis')"
195
+ aria-label="Close card"
196
+ >
197
+ &times;
198
+ </button>
199
+ <i class="bx bx-analyse text-4xl text-emerald-300 mb-4"></i>
200
+ <h3 class="text-xl font-semibold mb-2">Analysis & Review</h3>
201
+ <p>Detailed code and data analysis with insights.</p>
202
+ <div id="analysis-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
203
+ <p>Provides in-depth code reviews and data analysis with actionable insights.</p>
204
+ <button onclick="closeCardDetails('analysis')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
205
  </div>
206
+ </div>
207
  </div>
208
+ </section>
209
+
210
+ <!-- News -->
211
+ <section class="my-12">
212
+ <h2 class="text-3xl font-bold text-center mb-8">Latest MGZon News</h2>
213
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
214
+ <div class="glass p-6">
215
+ <h3 class="text-xl font-semibold mb-2">New API Features</h3>
216
+ <p>Explore our updated API with OAuth 2.0 support.</p>
217
+ <a href="https://hager-zon.vercel.app/blog" target="_blank" class="text-emerald-300 hover:underline">Read More →</a>
218
+ </div>
219
+ <div class="glass p-6">
220
+ <h3 class="text-xl font-semibold mb-2">Community Meetup</h3>
221
+ <p>Join our next virtual meetup on e-commerce trends.</p>
222
+ <a href="https://hager-zon.vercel.app/community" target="_blank" class="text-emerald-300 hover:underline">Join Now →</a>
223
+ </div>
224
+ </div>
225
+ </section>
226
+ </section>
227
+ </main>
228
+
229
+ <!-- Footer -->
230
+ <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
231
+ <div class="container max-w-6xl mx-auto text-center">
232
+ <img
233
+ src="https://raw.githubusercontent.com/Mark-Lasfar/MGZon/main/public/icons/mg.svg"
234
+ alt="MGZon Logo"
235
+ class="w-24 h-24 mx-auto mb-6 animate-pulse"
236
+ />
237
+ <p class="mb-4">
238
+ Developed by
239
+ <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
240
+ | Powered by
241
+ <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
242
+ </p>
243
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
244
+ <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
245
+ <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
246
+ <h4 class="font-semibold mb-1">Email Us</h4>
247
+ <p>
248
+ <a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">[email protected]</a>
249
+ </p>
250
+ <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
251
+ <p>Reach out to our support team for any inquiries or assistance.</p>
252
+ <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
253
+ </div>
254
+ </div>
255
+ <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
256
+ <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
257
+ <h4 class="font-semibold mb-1">Phone Support</h4>
258
+ <p>+1-800-123-4567</p>
259
+ <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
260
+ <p>Contact our support team via phone for immediate assistance.</p>
261
+ <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
262
+ </div>
263
  </div>
264
+ <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
265
+ <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
266
+ <h4 class="font-semibold mb-1">Community</h4>
267
+ <p>
268
+ <a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a>
269
+ </p>
270
+ <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
271
+ <p>Join our vibrant community to share ideas and collaborate.</p>
272
+ <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
273
+ </div>
274
+ </div>
275
+ <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
276
+ <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
277
+ <h4 class="font-semibold mb-1">API Docs</h4>
278
+ <p>
279
+ <a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a>
280
+ </p>
281
+ <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
282
+ <p>Explore our API documentation for seamless integration.</p>
283
+ <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
284
+ </div>
285
+ </div>
286
+ <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
287
+ <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
288
+ <h4 class="font-semibold mb-1">FAQ</h4>
289
+ <p>
290
+ <a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a>
291
+ </p>
292
+ <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
293
+ <p>Find answers to common questions in our FAQ section.</p>
294
+ <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
295
+ </div>
296
+ </div>
297
+ <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
298
+ <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
299
+ <h4 class="font-semibold mb-1">Documentation</h4>
300
+ <p>
301
+ <a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a>
302
+ </p>
303
+ <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
304
+ <p>Access comprehensive documentation for MGZon Chatbot.</p>
305
+ <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ <!-- Social icons -->
310
+ <div class="flex justify-center gap-6 mt-6">
311
+ <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition">
312
+ <i class="bx bxl-github"></i>
313
+ </a>
314
+ <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition">
315
+ <i class="bx bxl-twitter"></i>
316
+ </a>
317
+ <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition">
318
+ <i class="bx bxl-facebook"></i>
319
+ </a>
320
+ </div>
321
+ <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
322
+ </div>
323
+ </footer>
324
+
325
+ <!-- Scripts -->
326
+ <script>
327
+ // Sidebar toggle for mobile
328
+ const sidebar = document.getElementById('sidebar');
329
+ const toggleBtn = document.getElementById('sidebarToggle');
330
+ const closeSidebarBtn = document.getElementById('closeSidebar');
331
+
332
+ toggleBtn.addEventListener('click', () => {
333
+ sidebar.classList.toggle('active');
334
+ sidebar.classList.toggle('-translate-x-full');
335
+ sidebar.classList.toggle('translate-x-0');
336
+ });
337
+
338
+ closeSidebarBtn.addEventListener('click', () => {
339
+ sidebar.classList.remove('active');
340
+ sidebar.classList.add('-translate-x-full');
341
+ sidebar.classList.remove('translate-x-0');
342
+ });
343
+
344
+ // Close sidebar when clicking outside
345
+ document.addEventListener('click', (e) => {
346
+ if (
347
+ !sidebar.contains(e.target) &&
348
+ !toggleBtn.contains(e.target) &&
349
+ window.innerWidth < 768
350
+ ) {
351
+ sidebar.classList.remove('active');
352
+ sidebar.classList.add('-translate-x-full');
353
+ sidebar.classList.remove('translate-x-0');
354
+ }
355
+ });
356
+
357
+ // Launch button spinner
358
+ const launchBtn = document.getElementById('launchBtn');
359
+ const spinner = document.getElementById('spinner');
360
+ launchBtn.addEventListener('click', (e) => {
361
+ spinner.classList.remove('hidden');
362
+ setTimeout(() => spinner.classList.add('hidden'), 2000); // Simulate loading
363
+ });
364
+
365
+ // Card details toggle
366
+ function showCardDetails(cardId) {
367
+ document.getElementById(`${cardId}-details`).classList.remove('hidden');
368
+ }
369
+ function closeCardDetails(cardId) {
370
+ document.getElementById(`${cardId}-details`).classList.add('hidden');
371
+ }
372
+ </script>
373
  </body>
374
  </html>
utils/web_search.py CHANGED
@@ -11,7 +11,7 @@ def web_search(query: str) -> str:
11
  google_cse_id = os.getenv("GOOGLE_CSE_ID")
12
  if not google_api_key or not google_cse_id:
13
  return "Web search requires GOOGLE_API_KEY and GOOGLE_CSE_ID to be set."
14
- url = f"https://www.googleapis.com/customsearch/v1?key={google_api_key}&cx={google_cse_id}&q={query}+site:mgzon.com"
15
  response = requests.get(url, timeout=10)
16
  response.raise_for_status()
17
  results = response.json().get("items", [])
 
11
  google_cse_id = os.getenv("GOOGLE_CSE_ID")
12
  if not google_api_key or not google_cse_id:
13
  return "Web search requires GOOGLE_API_KEY and GOOGLE_CSE_ID to be set."
14
+ url = f"https://www.googleapis.com/customsearch/v1?key={google_api_key}&cx={google_cse_id}&q={query}+site:https://hager-zon.vercel.app/"
15
  response = requests.get(url, timeout=10)
16
  response.raise_for_status()
17
  results = response.json().get("items", [])