Update backend and server frontend for OAuth JSON response, client-side navigation, and add .gitignore

.gitignore

@@ -0,0 +1,4 @@
+frontend/
+.env
+generated_image.png
+.vscode/

api/auth.py

@@ -1,6 +1,5 @@
-# api/auth.py
 # SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
-# SPDX-License-License: Apache-2.0
+# SPDX-License-Identifier: Apache-2.0
 
 from fastapi_users import FastAPIUsers
 from fastapi_users.authentication import CookieTransport, JWTStrategy, AuthenticationBackend
@@ -8,15 +7,15 @@ from fastapi_users.router.oauth import get_oauth_router
 from httpx_oauth.clients.google import GoogleOAuth2
 from httpx_oauth.clients.github import GitHubOAuth2
 from fastapi_users.manager import BaseUserManager, IntegerIDMixin
-from fastapi import Depends, Request, FastAPI
+from fastapi import Depends, Request, FastAPI, Response
+from fastapi.responses import RedirectResponse , JSONResponse
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy import select
 from fastapi_users.models import UP
-from typing import Optional, Dict
+from typing import Optional
 import os
 import logging
 import secrets
-from fastapi.responses import RedirectResponse
 
 from api.database import User, OAuthAccount, CustomSQLAlchemyUserDatabase, get_user_db
 from api.models import UserRead, UserCreate, UserUpdate
@@ -145,14 +144,14 @@ class UserManager(IntegerIDMixin, BaseUserManager[User, int]):
 async def get_user_manager(user_db: CustomSQLAlchemyUserDatabase = Depends(get_user_db)):
     yield UserManager(user_db)
 
-# OAuth Routers مع معالجة مخصصة لـ GitHub
+# تعديل الـ OAuth Routers لتضمين redirect مخصص
 google_oauth_router = get_oauth_router(
     google_oauth_client,
     auth_backend,
     get_user_manager,
     state_secret=SECRET,
     associate_by_email=True,
-    redirect_url="https://mgzon-mgzon-app.hf.space/auth/google/callback",  # تعديل الـ redirect_url ليحوّل مباشرة إلى /chat
+    redirect_url=GOOGLE_REDIRECT_URL,
 )
 
 github_oauth_client._access_token_url = "https://github.com/login/oauth/access_token"
@@ -163,7 +162,7 @@ github_oauth_router = get_oauth_router(
     get_user_manager,
     state_secret=SECRET,
     associate_by_email=True,
-    redirect_url="https://mgzon-mgzon-app.hf.space/auth/github/callback",  # تعديل الـ redirect_url ليحوّل مباشرة إلى /chat
+    redirect_url=GITHUB_REDIRECT_URL,
 )
 
 fastapi_users = FastAPIUsers[User, int](
@@ -173,12 +172,93 @@ fastapi_users = FastAPIUsers[User, int](
 
 current_active_user = fastapi_users.current_user(active=True, optional=True)
 
+# إضافة route مخصص للتعامل مع الـ callback
+
+# تعديل الـ OAuth Callback لـ Google
+async def custom_oauth_callback(
+    code: str,
+    user_manager: UserManager = Depends(get_user_manager),
+    oauth_client=Depends(lambda: google_oauth_client),
+    redirect_url: str = GOOGLE_REDIRECT_URL,
+    response: Response = None,
+):
+    # جلب access token من Google
+    token_data = await oauth_client.get_access_token(code, redirect_url)
+    access_token = token_data["access_token"]
+    user_info = await oauth_client.get_user_info(access_token)
+
+    # استدعاء oauth_callback من UserManager
+    user = await user_manager.oauth_callback(
+        oauth_name="google",
+        access_token=access_token,
+        account_id=user_info["sub"],
+        account_email=user_info["email"],
+        expires_at=token_data.get("expires_in"),
+        refresh_token=token_data.get("refresh_token"),
+        associate_by_email=True,
+        is_verified_by_default=True,
+    )
+
+    # إنشاء JWT token
+    jwt_strategy = get_jwt_strategy()
+    token = await jwt_strategy.write(user)
+
+    # تعيين الـ token في الكوكيز
+    cookie_transport.set_cookie(response, token)
+
+    # رجع JSON بدل redirect – الـ frontend هيتحكم في التوجيه
+    return JSONResponse(content={
+        "message": "Google login successful",
+        "access_token": token
+    }, status_code=200)
+
+# تعديل الـ OAuth Callback لـ GitHub
+async def custom_github_oauth_callback(
+    code: str,
+    user_manager: UserManager = Depends(get_user_manager),
+    oauth_client=Depends(lambda: github_oauth_client),
+    redirect_url: str = GITHUB_REDIRECT_URL,
+    response: Response = None,
+):
+    # جلب access token من GitHub
+    token_data = await oauth_client.get_access_token(code, redirect_url)
+    access_token = token_data["access_token"]
+    user_info = await oauth_client.get_user_info(access_token)
+
+    # استدعاء oauth_callback من UserManager
+    user = await user_manager.oauth_callback(
+        oauth_name="github",
+        access_token=access_token,
+        account_id=str(user_info["id"]),
+        account_email=user_info.get("email") or f"{user_info['login']}@github.com",
+        expires_at=token_data.get("expires_in"),
+        refresh_token=token_data.get("refresh_token"),
+        associate_by_email=True,
+        is_verified_by_default=True,
+    )
+
+    # إنشاء JWT token
+    jwt_strategy = get_jwt_strategy()
+    token = await jwt_strategy.write(user)
+
+    # تعيين الـ token في الكوكيز
+    cookie_transport.set_cookie(response, token)
+
+    # رجع JSON بدل redirect – الـ frontend هيتحكم في التوجيه
+    return JSONResponse(content={
+        "message": "GitHub login successful",
+        "access_token": token
+    }, status_code=200)
+
 # تضمين الراوترات داخل التطبيق
 def get_auth_router(app: FastAPI):
-    app.include_router(google_oauth_router, prefix="/auth/google", tags=["auth"])
-    app.include_router(github_oauth_router, prefix="/auth/github", tags=["auth"])
     app.include_router(fastapi_users.get_auth_router(auth_backend), prefix="/auth/jwt", tags=["auth"])
     app.include_router(fastapi_users.get_register_router(UserRead, UserCreate), prefix="/auth", tags=["auth"])
     app.include_router(fastapi_users.get_reset_password_router(), prefix="/auth", tags=["auth"])
     app.include_router(fastapi_users.get_verify_router(UserRead), prefix="/auth", tags=["auth"])
-    app.include_router(fastapi_users.get_users_router(UserRead, UserUpdate), prefix="/users", tags=["users"])
+    app.include_router(fastapi_users.get_users_router(UserRead, UserUpdate), prefix="/users", tags=["users"])
+
+    # إضافة الـ custom callback routes
+    app.get("/auth/google/callback")(custom_oauth_callback)
+    app.get("/auth/github/callback")(custom_github_oauth_callback)
+

api/endpoints.py

@@ -15,6 +15,8 @@ from sqlalchemy import select, delete
 from utils.generation import request_generation, select_model, check_model_availability
 from utils.web_search import web_search
 import io
+import asyncio
+import json
 from openai import OpenAI
 from motor.motor_asyncio import AsyncIOMotorClient
 from datetime import datetime
@@ -22,7 +24,7 @@ import logging
 from typing import List, Optional
 # from utils.constants import MODEL_ALIASES, MODEL_NAME, SECONDARY_MODEL_NAME, TERTIARY_MODEL_NAME, CLIP_BASE_MODEL, CLIP_LARGE_MODEL, ASR_MODEL, TTS_MODEL, IMAGE_GEN_MODEL, SECONDARY_IMAGE_GEN_MODEL
 from utils.constants import MODEL_ALIASES, MODEL_NAME, SECONDARY_MODEL_NAME, TERTIARY_MODEL_NAME, CLIP_BASE_MODEL, CLIP_LARGE_MODEL, ASR_MODEL, TTS_MODEL, IMAGE_GEN_MODEL, SECONDARY_IMAGE_GEN_MODEL, IMAGE_INFERENCE_API
-
+from fastapi import Body
 import psutil
 import time
 router = APIRouter()
@@ -138,6 +140,7 @@ async def performance_stats():
         "uptime": time.time() - psutil.boot_time()  # مدة تشغيل النظام بالثواني
     }
 
+
 @router.post("/api/chat")
 async def chat_endpoint(
     request: Request,
@@ -175,7 +178,6 @@ async def chat_endpoint(
     preferred_model = user.preferred_model if user else None
     model_name, api_endpoint = select_model(req.message, input_type="text", preferred_model=preferred_model)
     
-    # جرب النموذج الأساسي
     is_available, api_key, selected_endpoint = check_model_availability(model_name, HF_TOKEN)
     if not is_available:
         logger.warning(f"Model {model_name} is not available at {api_endpoint}, trying fallback model.")
@@ -219,67 +221,71 @@ async def chat_endpoint(
             logger.error(f"Audio generation failed: {e}")
             raise HTTPException(status_code=502, detail=f"Audio generation failed: {str(e)}")
     
-    response_chunks = []
-    try:
-        for chunk in stream:
-            logger.debug(f"Processing text chunk: {chunk[:100]}...")
-            if isinstance(chunk, str) and chunk.strip() and chunk not in ["analysis", "assistantfinal"]:
-                response_chunks.append(chunk)
-            else:
-                logger.warning(f"Skipping chunk: {chunk}")
-        response = "".join(response_chunks)
-        if not response.strip():
-            logger.warning(f"Empty response from {model_name}. Trying fallback model {SECONDARY_MODEL_NAME}.")
-            model_name = SECONDARY_MODEL_NAME
-            is_available, api_key, selected_endpoint = check_model_availability(model_name, HF_TOKEN)
-            if not is_available:
-                logger.error(f"Fallback model {model_name} is not available at {selected_endpoint}")
-                raise HTTPException(status_code=503, detail=f"No available models. Tried {MODEL_NAME} and {SECONDARY_MODEL_NAME}.")
-            
-            stream = request_generation(
-                api_key=api_key,
-                api_base=selected_endpoint,
-                message=req.message,
-                system_prompt=system_prompt,
-                model_name=model_name,
-                chat_history=req.history,
-                temperature=req.temperature,
-                max_new_tokens=req.max_new_tokens or 2048,
-                deep_search=req.enable_browsing,
-                input_type="text",
-                output_format=req.output_format
-            )
-            response_chunks = []
+    async def stream_response():
+        response_chunks = []
+        try:
             for chunk in stream:
-                logger.debug(f"Processing fallback text chunk: {chunk[:100]}...")
                 if isinstance(chunk, str) and chunk.strip() and chunk not in ["analysis", "assistantfinal"]:
                     response_chunks.append(chunk)
+                    yield chunk.encode('utf-8')  # إرسال الـ chunk مباشرةً
+                    await asyncio.sleep(0.05)  # تأخير بسيط لمحاكاة الكتابة
                 else:
-                    logger.warning(f"Skipping fallback chunk: {chunk}")
+                    logger.warning(f"Skipping chunk: {chunk}")
+            
             response = "".join(response_chunks)
             if not response.strip():
-                logger.error(f"Empty response from fallback model {model_name}.")
-                raise HTTPException(status_code=502, detail=f"Empty response from both {MODEL_NAME} and {SECONDARY_MODEL_NAME}.")
-        logger.info(f"Chat response: {response[:100]}...")
-    except Exception as e:
-        logger.error(f"Chat generation failed: {e}")
-        raise HTTPException(status_code=500, detail=f"Chat generation failed: {str(e)}")
-    
-    if user and conversation:
-        assistant_msg = Message(role="assistant", content=response, conversation_id=conversation.id)
-        db.add(assistant_msg)
-        await db.commit()
-        conversation.updated_at = datetime.utcnow()
-        await db.commit()
-        return {
-            "response": response,
-            "conversation_id": conversation.conversation_id,
-            "conversation_url": f"https://mgzon-mgzon-app.hf.space/chat/{conversation.conversation_id}",
-            "conversation_title": conversation.title
-        }
-    
-    return {"response": response}
+                logger.warning(f"Empty response from {model_name}. Trying fallback model {SECONDARY_MODEL_NAME}.")
+                model_name = SECONDARY_MODEL_NAME
+                is_available, api_key, selected_endpoint = check_model_availability(model_name, HF_TOKEN)
+                if not is_available:
+                    logger.error(f"Fallback model {model_name} is not available at {selected_endpoint}")
+                    yield f"Error: No available models. Tried {MODEL_NAME} and {SECONDARY_MODEL_NAME}.".encode('utf-8')
+                    return
+                
+                stream = request_generation(
+                    api_key=api_key,
+                    api_base=selected_endpoint,
+                    message=req.message,
+                    system_prompt=system_prompt,
+                    model_name=model_name,
+                    chat_history=req.history,
+                    temperature=req.temperature,
+                    max_new_tokens=req.max_new_tokens or 2048,
+                    deep_search=req.enable_browsing,
+                    input_type="text",
+                    output_format=req.output_format
+                )
+                response_chunks = []
+                for chunk in stream:
+                    if isinstance(chunk, str) and chunk.strip() and chunk not in ["analysis", "assistantfinal"]:
+                        response_chunks.append(chunk)
+                        yield chunk.encode('utf-8')
+                        await asyncio.sleep(0.05)
+                    else:
+                        logger.warning(f"Skipping fallback chunk: {chunk}")
+                
+                response = "".join(response_chunks)
+                if not response.strip():
+                    logger.error(f"Empty response from fallback model {model_name}.")
+                    yield f"Error: Empty response from both {MODEL_NAME} and {SECONDARY_MODEL_NAME}.".encode('utf-8')
+                    return
+            
+            if user and conversation:
+                assistant_msg = Message(role="assistant", content=response, conversation_id=conversation.id)
+                db.add(assistant_msg)
+                await db.commit()
+                conversation.updated_at = datetime.utcnow()
+                await db.commit()
+                yield json.dumps({
+                    "conversation_id": conversation.conversation_id,
+                    "conversation_url": f"https://mgzon-mgzon-app.hf.space/chat/{conversation.conversation_id}",
+                    "conversation_title": conversation.title
+                }, ensure_ascii=False).encode('utf-8')
+        except Exception as e:
+            logger.error(f"Chat generation failed: {e}")
+            yield f"Error: Chat generation failed: {str(e)}".encode('utf-8')
 
+    return StreamingResponse(stream_response(), media_type="text/plain")
 
 @router.post("/api/image-generation")
 async def image_generation_endpoint(
@@ -942,3 +948,88 @@ async def update_user_settings(
         "is_active": user.is_active,
         "is_superuser": user.is_superuser
     }}
+    
+
+
+@router.post("/api/conversations/sync", response_model=ConversationOut)
+async def sync_conversation(
+    request: Request,
+    payload: dict = Body(...),
+    user: User = Depends(current_active_user),
+    db: AsyncSession = Depends(get_db)
+):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    
+    messages = payload.get("messages", [])
+    title = payload.get("title", "Untitled Conversation")
+    conversation_id = payload.get("conversation_id")
+    
+    logger.info(f"Syncing conversation for user {user.email}, conversation_id: {conversation_id}")
+
+    try:
+        # Check if conversation exists
+        if conversation_id:
+            result = await db.execute(
+                select(Conversation).filter(
+                    Conversation.conversation_id == conversation_id,
+                    Conversation.user_id == user.id
+                )
+            )
+            conversation = result.scalar_one_or_none()
+            if not conversation:
+                raise HTTPException(status_code=404, detail="Conversation not found")
+            
+            # Update existing conversation
+            conversation.title = title
+            conversation.updated_at = datetime.utcnow()
+            
+            # Delete old messages
+            await db.execute(
+                delete(Message).filter(Message.conversation_id == conversation.id)
+            )
+            
+            # Add new messages
+            for msg in messages:
+                new_message = Message(
+                    conversation_id=conversation.id,
+                    role=msg.get("role", "user"),
+                    content=msg.get("content", ""),
+                    created_at=datetime.utcnow()
+                )
+                db.add(new_message)
+            
+            await db.commit()
+            await db.refresh(conversation)
+            logger.info(f"Updated conversation {conversation_id} for user {user.email}")
+        else:
+            # Create new conversation
+            conversation_id = str(uuid.uuid4())
+            conversation = Conversation(
+                conversation_id=conversation_id,
+                user_id=user.id,
+                title=title,
+                created_at=datetime.utcnow(),
+                updated_at=datetime.utcnow()
+            )
+            db.add(conversation)
+            await db.commit()
+            await db.refresh(conversation)
+            
+            # Add messages
+            for msg in messages:
+                new_message = Message(
+                    conversation_id=conversation.id,
+                    role=msg.get("role", "user"),
+                    content=msg.get("content", ""),
+                    created_at=datetime.utcnow()
+                )
+                db.add(new_message)
+            
+            await db.commit()
+            logger.info(f"Created new conversation {conversation_id} for user {user.email}")
+
+        return ConversationOut.from_orm(conversation)
+    except Exception as e:
+        logger.error(f"Error syncing conversation: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to sync conversation: {str(e)}")

main.py

@@ -120,13 +120,17 @@ app.add_middleware(
         "https://mgzon-mgzon-app.hf.space",
         "http://localhost:7860",
         "http://localhost:8000",
+        "http://localhost",  # إضافة لدعم Capacitor على Android/iOS
+        "https://localhost",  # إضافة لدعم HTTPS المحلي
+        "capacitor://localhost",  # دعم Capacitor native apps
+        "file://",  # دعم الملفات المحلية في offline mode
         "https://hager-zon.vercel.app",
         "https://mgzon-mgzon-app.hf.space/auth/google/callback",
         "https://mgzon-mgzon-app.hf.space/auth/github/callback",
     ],
     allow_credentials=True,
-    allow_methods=["GET", "POST", "OPTIONS", "PUT", "DELETE"],
-    allow_headers=["Accept", "Content-Type", "Authorization", "X-Requested-With", "X-Session-ID"],
+    allow_methods=["*"],  # سمح بكل الـ methods
+    allow_headers=["*"],  # سمح بكل الـ headers
 )
 logger.debug("CORS middleware configured with allowed origins")
 

templates/docs.html

@@ -1,284 +1,888 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.">
-  <meta name="keywords" content="MGZon Chatbot, API documentation, code generation, e-commerce, FastAPI, Mark Al-Asfar">
-  <meta name="author" content="Mark Al-Asfar">
-  <meta name="robots" content="index, follow">
-  <title>API Documentation - MGZon Chatbot</title>
-  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/images/mg.svg">
-  <!-- Open Graph -->
-  <meta property="og:title" content="API Documentation - MGZon Chatbot">
-  <meta property="og:description" content="Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.">
-  <meta property="og:image" content="/static/images/mg.svg">
-  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/docs">
-  <meta property="og:type" content="website">
-  <!-- Twitter Card -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="API Documentation - MGZon Chatbot">
-  <meta name="twitter:description" content="Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.">
-  <meta name="twitter:image" content="/static/images/mg.svg">
-  <!-- JSON-LD -->
-<script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "WebPage",
-  "name": "API Documentation - MGZon Chatbot",
-  "url": "https://mgzon-mgzon-app.hf.space/docs",
-  "description": "Explore MGZon Chatbot API documentation for integrating AI-powered code generation and e-commerce tools.",
-  "keywords": ["MGZon Chatbot", "API documentation", "code generation", "e-commerce", "FastAPI", "Mark Al-Asfar", "MGZon", "MGZon AI", "AI chatbot", "Code generation bot", "Python AI chatbot", "FastAPI integration", "AI for coding", "AI developer tools", "text generation"],
-  "isPartOf": {
-    "@type": "WebSite",
-    "name": "MGZon Chatbot",
-    "url": "https://mgzon-mgzon-app.hf.space/"
-  }
-}
-</script>
-  <!-- Tailwind (v3) -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Boxicons -->
-  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <!-- Prism (for code highlighting) -->
-  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
-  <style>
-    @keyframes gradientShift {
-      0% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-      100% { background-position: 0% 50%; }
-    }
-    body {
-      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
-      background-size: 400% 400%;
-      animation: gradientShift 15s ease infinite;
-      font-family: system-ui, sans-serif;
-    }
-    .glass {
-      background: rgba(255, 255, 255, 0.07);
-      border-radius: 1rem;
-      border: 1px solid rgba(255, 255, 255, 0.12);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-    }
-    .sidebar {
-      transition: transform 0.3s ease-in-out;
-    }
-    .sidebar.collapsed .logo {
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-    .main-content {
-      min-height: calc(100vh - 4rem);
-    }
-    .glass:hover {
-      transform: scale(1.05);
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-      background: rgba(255, 255, 255, 0.15);
-    }
-    @media (max-width: 768px) {
-      .sidebar {
-        transform: translateX(-100%);
-      }
-      .sidebar.active {
-        transform: translateX(0);
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="MGZon Chatbot API Documentation – Detailed guide for integrating AI-powered features like code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
+    <meta name="keywords" content="MGZon API Docs, AI Chatbot Integration, Code Generation API, E-commerce AI, Mark Al-Asfar, FastAPI, Gradio">
+    <meta name="author" content="Mark Al-Asfar">
+    <meta name="robots" content="index, follow">
+    <title>MGZon Chatbot API Documentation</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="manifest" href="/static/manifest.json">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/mg-180.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="MGZon">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="theme-color" content="#00f0ff">
+    <meta property="og:title" content="MGZon Chatbot API Documentation">
+    <meta property="og:description" content="Comprehensive API docs for MGZon Chatbot: Integrate AI for code, search, and e-commerce by Mark Al-Asfar.">
+    <meta property="og:image" content="/static/images/mg.svg">
+    <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/docs">
+    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="MGZon Chatbot API Documentation">
+    <meta name="twitter:description" content="Comprehensive API docs for MGZon Chatbot: Integrate AI for code, search, and e-commerce by Mark Al-Asfar.">
+    <meta name="twitter:image" content="/static/images/mg.svg">
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "name": "MGZon Chatbot API Docs",
+      "url": "https://mgzon-mgzon-app.hf.space/docs",
+      "description": "API Documentation for MGZon Chatbot by Mark Al-Asfar: Integrate AI for code generation, real-time web search, and e-commerce solutions.",
+      "keywords": ["MGZon API", "AI Integration", "Code Generation API", "E-commerce API", "Mark Al-Asfar", "FastAPI Docs", "Hugging Face API", "2025 AI API", "chatgpt api", "grok api", "deepseek api", "text generation api"],
+      "potentialAction": {
+        "@type": "SearchAction",
+        "target": "https://mgzon-mgzon-app.hf.space/?q={search_term_string}",
+        "query-input": "required name=search_term_string"
+      },
+      "publisher": {
+        "@type": "Organization",
+        "name": "MGZon AI",
+        "logo": {
+          "@type": "ImageObject",
+          "url": "/static/images/mg.svg"
+        }
       }
     }
-  </style>
+    </script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
+    <style>
+        :root {
+            --font-sans: 'Poppins', sans-serif;
+            --font-mono: 'Orbitron', monospace;
+            --radius: 1rem;
+        }
+
+        :root.dark {
+            --background: 220 70% 10%;
+            --foreground: 0 0% 95%;
+            --card: 220 70% 15%;
+            --card-foreground: 0 0% 90%;
+            --primary: 180 100% 50%;
+            --primary-foreground: 0 0% 0%;
+            --secondary: 260 80% 30%;
+            --secondary-foreground: 0 0% 95%;
+            --muted: 220 50% 20%;
+            --muted-foreground: 0 0% 70%;
+            --accent: 320 100% 60%;
+            --accent-foreground: 0 0% 95%;
+            --border: 220 50% 25%;
+        }
+
+        :root.light {
+            --background: 0 0% 100%;
+            --foreground: 220 70% 10%;
+            --card: 0 0% 95%;
+            --card-foreground: 220 70% 15%;
+            --primary: 180 100% 50%;
+            --primary-foreground: 0 0% 100%;
+            --secondary: 260 80% 40%;
+            --secondary-foreground: 0 0% 10%;
+            --muted: 0 0% 90%;
+            --muted-foreground: 0 0% 40%;
+            --accent: 320 100% 50%;
+            --accent-foreground: 0 0% 10%;
+            --border: 0 0% 80%;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-sans);
+            background: hsl(var(--background));
+            color: hsl(var(--foreground));
+            line-height: 1.6;
+            min-height: 100vh;
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        #particles-js {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+
+        .container {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+
+        .header {
+            padding: 2rem 0;
+            text-align: center;
+            background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--card)));
+        }
+
+        .logo {
+            width: 200px;
+            height: auto;
+            filter: drop-shadow(0 0 20px hsl(var(--primary) / 0.5));
+            animation: logoSpin 10s linear infinite;
+        }
+
+        @keyframes logoSpin {
+            0% { transform: rotateY(0deg) scale(1); }
+            50% { transform: rotateY(180deg) scale(1.1); }
+            100% { transform: rotateY(360deg) scale(1); }
+        }
+
+        .hero {
+            padding: 3rem 0;
+            text-align: center;
+            position: relative;
+            background: transparent;
+        }
+
+        .hero-tagline {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: fadeIn 1s ease-out;
+        }
+
+        .hero .subtitle {
+            font-size: 1.2rem;
+            color: hsl(var(--muted-foreground));
+            margin-bottom: 2rem;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
+            animation: fadeIn 1s ease-out 0.3s both;
+        }
+
+        .highlight {
+            color: hsl(var(--primary));
+            font-weight: 600;
+        }
+
+        .nav-links {
+            display: flex;
+            justify-content: center;
+            gap: 1.5rem;
+            margin-bottom: 3rem;
+            flex-wrap: wrap;
+            animation: fadeIn 1s ease-out 0.6s both;
+        }
+
+        .nav-link {
+            padding: 1rem 2.5rem;
+            border-radius: var(--radius);
+            text-decoration: none;
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
+            color: hsl(var(--card-foreground));
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 4px 15px hsl(var(--foreground) / 0.2);
+        }
+
+        .nav-link:hover {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            color: hsl(var(--primary-foreground));
+            transform: translateY(-5px) scale(1.05);
+            box-shadow: 0 10px 30px hsl(var(--primary) / 0.5);
+        }
+
+        .nav-link::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            transition: left 0.5s;
+        }
+
+        .nav-link:hover::before {
+            left: 100%;
+        }
+
+        .cta-button {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            color: hsl(var(--primary-foreground));
+            border: none !important;
+            font-size: 1.2rem;
+            padding: 1.2rem 3rem !important;
+            font-weight: 700;
+        }
+
+        .cta-button:hover {
+            box-shadow: 0 15px 40px hsl(var(--primary) / 0.6);
+            transform: translateY(-8px) scale(1.1);
+        }
+
+        .code-snippet {
+            background: hsl(var(--muted));
+            border: 1px solid hsl(var(--border));
+            border-radius: var(--radius);
+            padding: 1.5rem;
+            font-family: var(--font-mono);
+            font-size: 1rem;
+            color: hsl(var(--primary));
+            margin: 0 auto;
+            overflow-x: auto;
+            max-width: 700px;
+            position: relative;
+            animation: fadeIn 1s ease-out 0.8s both;
+            box-shadow: 0 5px 20px hsl(var(--primary) / 0.3);
+        }
+
+        .code-snippet::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
+        }
+
+        .quick-features {
+            padding: 4rem 0;
+            background: transparent;
+        }
+
+        .quick-features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        .quick-feature {
+            text-align: center;
+            padding: 2rem;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
+            border-radius: var(--radius);
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 15px hsl(var(--foreground) / 0.2);
+        }
+
+        .quick-feature:hover {
+            transform: translateY(-10px) scale(1.05);
+            box-shadow: 0 15px 30px hsl(var(--primary) / 0.4);
+        }
+
+        .quick-feature-icon {
+            font-size: 3rem;
+            margin-bottom: 1.5rem;
+            display: block;
+            color: hsl(var(--primary));
+            transition: transform 0.3s ease;
+        }
+
+        .quick-feature:hover .quick-feature-icon {
+            transform: scale(1.2) rotate(5deg);
+        }
+
+        .quick-feature h3 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: hsl(var(--foreground));
+        }
+
+        .quick-feature p {
+            color: hsl(var(--muted-foreground));
+            font-size: 1rem;
+        }
+
+        .wave-divider {
+            height: 120px;
+            background: transparent;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .wave-divider::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 200%;
+            height: 100%;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--background)));
+            border-radius: 50%;
+            animation: wave 10s ease-in-out infinite;
+        }
+
+        @keyframes wave {
+            0%, 100% { transform: translateX(-50%) translateY(70%); }
+            50% { transform: translateX(-50%) translateY(50%); }
+        }
+
+        .features {
+            padding: 5rem 0;
+            background: hsl(var(--card));
+        }
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 2.5rem;
+            margin-top: 3rem;
+        }
+
+        .feature-card {
+            padding: 2.5rem;
+            background: hsl(var(--background));
+            border: 1px solid hsl(var(--border));
+            border-radius: var(--radius);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 5px 20px hsl(var(--foreground) / 0.2);
+        }
+
+        .feature-card::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, hsl(var(--primary) / 0.2), transparent, hsl(var(--accent) / 0.2));
+            border-radius: var(--radius);
+            z-index: -1;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .feature-card:hover::before {
+            opacity: 1;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-10px) scale(1.05);
+            box-shadow: 0 20px 40px hsl(var(--primary) / 0.5);
+        }
+
+        .feature-icon {
+            width: 3.5rem;
+            height: 3.5rem;
+            background: linear-gradient(135deg, hsl(var(--primary) / 0.2), hsl(var(--accent) / 0.2));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
+            color: hsl(var(--primary));
+            transition: transform 0.3s ease;
+        }
+
+        .feature-card:hover .feature-icon {
+            transform: rotate(360deg) scale(1.2);
+        }
+
+        .feature-card h3 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: hsl(var(--card-foreground));
+        }
+
+        .feature-card p {
+            color: hsl(var(--muted-foreground));
+            font-size: 1rem;
+        }
+
+        .section-title {
+            font-family: 'Orbitron', sans-serif;
+            text-align: center;
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: fadeIn 1s ease-out;
+        }
+
+        .section-subtitle {
+            text-align: center;
+            color: hsl(var(--muted-foreground));
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+        }
+
+        .footer {
+            padding: 4rem 0;
+            border-top: 1px solid hsl(var(--border));
+            text-align: center;
+            background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--card)));
+        }
+
+        .disclaimer {
+            background: hsl(var(--muted));
+            color: hsl(var(--muted-foreground));
+            padding: 2rem;
+            border-radius: var(--radius);
+            margin-bottom: 2rem;
+            border-left: 5px solid hsl(var(--primary));
+            box-shadow: 0 5px 20px hsl(var(--primary) / 0.3);
+        }
+
+        .disclaimer h4 {
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: hsl(var(--foreground));
+        }
+
+        .theme-toggle {
+            position: fixed;
+            top: 2rem;
+            right: 2rem;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
+            border: 1px solid hsl(var(--border));
+            color: hsl(var(--card-foreground));
+            padding: 1rem;
+            border-radius: var(--radius);
+            cursor: pointer;
+            font-size: 1.5rem;
+            transition: all 0.3s ease;
+            z-index: 1000;
+        }
+
+        .theme-toggle:hover {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            transform: scale(1.2) rotate(360deg);
+            box-shadow: 0 10px 20px hsl(var(--primary) / 0.5);
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(40px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        @media (max-width: 768px) {
+            .hero-tagline {
+                font-size: 2rem;
+            }
+
+            .nav-links {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .nav-link {
+                width: 250px;
+                text-align: center;
+            }
+
+            .container {
+                padding: 0 1.5rem;
+            }
+
+            .quick-features-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
 </head>
-<body class="text-white flex flex-col min-h-screen">
-  <!-- Mobile toggle button -->
-  <button id="sidebarToggle" 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" aria-label="Toggle navigation">
-    <i class="bx bx-menu"></i>
-  </button>
-  <!-- Sidebar -->
-  <aside id="sidebar" 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">
-    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
-    <img src="/static/images/mg.svg" alt="MGZon Logo" class="logo w-20 h-20 mx-auto mb-8 animate-pulse">
-    <nav class="flex flex-col gap-3">
-      <a href="/" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Home</a>
-      <a href="/docs" class="px-4 py-2 rounded-lg bg-emerald-600">API Documentation</a>
-      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
-      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
-      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
-      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
-      <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>
-    </nav>
-  </aside>
-  <!-- Main content -->
-  <main class="flex-1 md:ml-64 p-6 main-content">
-    <section class="container max-w-6xl mx-auto">
-      <div class="text-center py-12">
-        <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
-<h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">About MGZon AI by Mark Al-Asfar</h1>
-          MGZon Chatbot API Documentation
-        </h1>
-        <p class="text-lg max-w-2xl mx-auto mb-8">
-          Integrate MGZon Chatbot's AI-powered features into your applications. Learn how to use our APIs for code generation, web search, and e-commerce solutions.
-        </p>
-        <p>Explore the MGZon Chatbot API for seamless integration of AI-powered code generation, text generation, and e-commerce automation. Built by Mark Al-Asfar using FastAPI and Hugging Face AI.</p>
-        <a href="https://x.ai/api" target="_blank" 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">
-          Get API Key <i class="bx bx-key ml-2"></i>
-        </a>
-      </div>
-      <!-- API Overview -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">API Overview</h2>
-        <div class="glass p-6">
-          <p class="mb-4">The MGZon Chatbot API provides endpoints for code generation, real-time web search, and e-commerce functionalities. Built with FastAPI, it offers secure and scalable integration.</p>
-          <p>Base URL: <code class="bg-gray-800/60 p-1 rounded">https://mgzon-mgzon-app.hf.space/api</code></p>
-        </div>
-      </section>
-      <!-- Authentication -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Authentication</h2>
-        <div class="glass p-6">
-          <p class="mb-4">Use JWT tokens for authentication. Register or login to obtain a token.</p>
-          <pre><code class="language-bash">
-curl -X POST "https://mgzon-mgzon-app.hf.space/auth/jwt/login" \
-  -H "Content-Type: application/x-www-form-urlencoded" \
-  -d "username=your_email&password=your_password"
-          </code></pre>
+<body>
+    <div id="particles-js"></div>
+
+    <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
+
+    <header class="header">
+        <div class="container">
+            <img src="/static/images/mg.svg" alt="MGZon Logo" class="logo">
         </div>
-      </section>
-      <!-- Endpoints -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Endpoints</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="glass p-6">
-            <h3 class="text-xl font-semibold mb-2">/chat (POST)</h3>
-            <p class="mb-4">Interact with the AI chatbot for code generation or queries.</p>
-            <pre><code class="language-bash">
-curl -X POST "https://mgzon-mgzon-app.hf.space/chat" \
-  -H "Authorization: Bearer your_token" \
-  -H "Content-Type: application/json" \
-  -d '{"message": "Generate a Python function"}'
-            </code></pre>
-          </div>
-          <div class="glass p-6">
-            <h3 class="text-xl font-semibold mb-2">/web_search (POST)</h3>
-            <p class="mb-4">Perform real-time web searches.</p>
-            <pre><code class="language-bash">
-curl -X POST "https://mgzon-mgzon-app.hf.space/web_search" \
-  -H "Authorization: Bearer your_token" \
-  -H "Content-Type: application/json" \
-  -d '{"query": "AI trends 2025"}'
-            </code></pre>
-          </div>
+    </header>
+
+    <section class="hero">
+        <div class="container">
+            <h1 class="hero-tagline">MGZon Chatbot API Documentation</h1>
+            <p class="subtitle">
+                Explore the <span class="highlight">MGZon Chatbot API</span> for seamless integration of AI-powered code generation, text generation, and e-commerce automation. Built by Mark Al-Asfar using FastAPI and Hugging Face AI. Rivals tools like ChatGPT, Grok, and DeepSeek.
+            </p>
+            
+            <div class="nav-links">
+                <a href="/" class="nav-link">Home</a>
+                <a href="/docs" class="nav-link">API Documentation</a>
+                <a href="/about" class="nav-link">About MGZon</a>
+                <a href="https://hager-zon.vercel.app/community" class="nav-link">Community</a>
+                <a href="https://mark-elasfar.web.app/" class="nav-link">Mark Al-Asfar</a>
+                <a href="/chat" class="nav-link cta-button">Launch Chatbot</a>
+            </div>
+
+            <div class="code-snippet">
+                curl -X POST "https://mgzon-mgzon-app.hf.space/api/chat" -H "Content-Type: application/json" -d '{"message": "Hello MGZon!"}'
+            </div>
         </div>
-      </section>
-      <!-- Getting Started -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Getting Started</h2>
-        <div class="glass p-6">
-          <p class="mb-4">1. Register at <a href="/register" class="text-emerald-300 hover:underline">/register</a>.</p>
-          <p class="mb-4">2. Obtain your API key from <a href="https://x.ai/api" target="_blank" class="text-emerald-300 hover:underline">xAI API</a>.</p>
-          <p>3. Use the endpoints above to integrate MGZon Chatbot into your application.</p>
-        </div>
-      </section>
     </section>
-  </main>
-  <!-- Footer -->
-  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
-    <div class="container max-w-6xl mx-auto text-center">
-<img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
-      <p class="mb-4">
-        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
-        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
-      </p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
-          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Email Us</h4>
-          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
-          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Reach out to our support team for any inquiries or assistance.</p>
-            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
-          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Phone Support</h4>
-          <p>+1-800-123-4567</p>
-          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Contact our support team via phone for immediate assistance.</p>
-            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
-          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Community</h4>
-          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
-          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Join our vibrant community to share ideas and collaborate.</p>
-            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
+
+    <section class="quick-features">
+        <div class="container">
+            <div class="quick-features-grid">
+                <div class="quick-feature">
+                    <span class="quick-feature-icon">🔑</span>
+                    <h3>Authentication</h3>
+                    <p>Secure JWT-based auth for all endpoints. Register and login to get started.</p>
+                </div>
+                
+                <div class="quick-feature">
+                    <span class="quick-feature-icon">📡</span>
+                    <h3>Real-Time APIs</h3>
+                    <p>Endpoints for chat, code generation, image analysis, and more.</p>
+                </div>
+                
+                <div class="quick-feature">
+                    <span class="quick-feature-icon">📊</span>
+                    <h3>Performance Stats</h3>
+                    <p>Monitor API performance and model info in real-time.</p>
+                </div>
+                
+                <div class="quick-feature">
+                    <span class="quick-feature-icon">🛡️</span>
+                    <h3>Secure & Scalable</h3>
+                    <p>Built with FastAPI for high performance and security.</p>
+                </div>
+            </div>
         </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
-          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">API Docs</h4>
-          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
-          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Explore our API documentation for seamless integration.</p>
-            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
-          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">FAQ</h4>
-          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
-          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Find answers to common questions in our FAQ section.</p>
-            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
+    </section>
+
+    <div class="wave-divider"></div>
+
+    <section class="features">
+        <div class="container">
+            <h2 class="section-title">API Endpoints Dashboard</h2>
+            <p class="section-subtitle">Browse and explore all available endpoints with examples and schemas.</p>
+            
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">📄</div>
+                    <h3>GET /openapi.json</h3>
+                    <p>Retrieve the full OpenAPI specification in JSON format.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/openapi.json"
+                    </div>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">⚙️</div>
+                    <h3>GET /api/settings</h3>
+                    <p>Get current API settings and configurations.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/api/settings"
+                    </div>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">🤖</div>
+                    <h3>GET /api/model-info</h3>
+                    <p>Fetch information about the AI models in use.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/api/model-info"
+                    </div>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">📈</div>
+                    <h3>GET /api/performance</h3>
+                    <p>View performance statistics for the API.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/api/performance"
+                    </div>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">💬</div>
+                    <h3>POST /api/chat</h3>
+                    <p>Interact with the chatbot for queries and code generation.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X POST "https://mgzon-mgzon-app.hf.space/api/chat" -H "Content-Type: application/json" -d '{"message": "Generate code"}'
+                    </div>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">🖼️</div>
+                    <h3>POST /api/image-generation</h3>
+                    <p>Generate images based on text prompts.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X POST "https://mgzon-mgzon-app.hf.space/api/image-generation" -H "Content-Type: application/json" -d '{"prompt": "A futuristic city"}'
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🎤</div>
+                    <h3>POST /api/audio-transcription</h3>
+                    <p>Transcribe audio files to text.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X POST "https://mgzon-mgzon-app.hf.space/api/audio-transcription" -F "file=@audio.wav"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🔊</div>
+                    <h3>POST /api/text-to-speech</h3>
+                    <p>Convert text to speech audio.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X POST "https://mgzon-mgzon-app.hf.space/api/text-to-speech" -H "Content-Type: application/json" -d '{"text": "Hello world"}'
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">💻</div>
+                    <h3>POST /api/code</h3>
+                    <p>Generate or analyze code snippets.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X POST "https://mgzon-mgzon-app.hf.space/api/code" -H "Content-Type: application/json" -d '{"prompt": "Write a Python function"}'
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🔍</div>
+                    <h3>POST /api/analysis</h3>
+                    <p>Perform text or data analysis.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X POST "https://mgzon-mgzon-app.hf.space/api/analysis" -H "Content-Type: application/json" -d '{"data": "Analyze this text"}'
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🖼️</div>
+                    <h3>POST /api/image-analysis</h3>
+                    <p>Analyze images for content and features.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X POST "https://mgzon-mgzon-app.hf.space/api/image-analysis" -F "file=@image.jpg"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🧪</div>
+                    <h3>GET /api/test-model</h3>
+                    <p>Test the AI model with a sample query.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/api/test-model"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">📜</div>
+                    <h3>GET /api/conversations</h3>
+                    <p>List all user conversations.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/api/conversations"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">➕</div>
+                    <h3>POST /api/conversations</h3>
+                    <p>Create a new conversation.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X POST "https://mgzon-mgzon-app.hf.space/api/conversations" -H "Content-Type: application/json" -d '{}'
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">📖</div>
+                    <h3>GET /api/conversations/{conversation_id}</h3>
+                    <p>Get details of a specific conversation.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/api/conversations/123"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🗑️</div>
+                    <h3>DELETE /api/conversations/{conversation_id}</h3>
+                    <p>Delete a conversation.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X DELETE "https://mgzon-mgzon-app.hf.space/api/conversations/123"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">✏️</div>
+                    <h3>PUT /api/conversations/{conversation_id}/title</h3>
+                    <p>Update conversation title.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X PUT "https://mgzon-mgzon-app.hf.space/api/conversations/123/title" -H "Content-Type: application/json" -d '{"title": "New Title"}'
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">👤</div>
+                    <h3>PUT /users/me</h3>
+                    <p>Update current user settings.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X PUT "https://mgzon-mgzon-app.hf.space/users/me" -H "Content-Type: application/json" -d '{"settings": {}}'
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🔒</div>
+                    <h3>GET /api/verify-token</h3>
+                    <p>Verify authentication token.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/api/verify-token"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🚪</div>
+                    <h3>POST /logout</h3>
+                    <p>Logout the current user.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X POST "https://mgzon-mgzon-app.hf.space/logout"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🐞</div>
+                    <h3>GET /debug/routes</h3>
+                    <p>Debug API routes (dev only).</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/debug/routes"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🏠</div>
+                    <h3>GET /</h3>
+                    <p>Root endpoint for the app.</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/"
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">📋</div>
+                    <h3>GET /docs</h3>
+                    <p>API Documentation page (you're here!).</p>
+                    <div class="code-snippet mt-2 text-sm">
+                        curl -X GET "https://mgzon-mgzon-app.hf.space/docs"
+                    </div>
+                </div>
+
+                <!-- Add more endpoints as needed, following the same pattern -->
+
+            </div>
         </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
-          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Documentation</h4>
-          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
-          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Access comprehensive documentation for MGZon Chatbot.</p>
-            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
+    </section>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="disclaimer">
+                <h4>API Usage Guidelines</h4>
+                <p>
+                    All endpoints require authentication unless specified. Use your JWT token in the Authorization header. 
+                    For full schemas and advanced usage, refer to /openapi.json.
+                </p>
+                <div style="text-align:center; margin-top: 1.5rem;">
+                    <a href="/openapi.json" class="nav-link cta-button">Download OpenAPI JSON</a>
+                </div>
+            </div>
+            <div class="flex justify-center gap-6 mb-4">
+                <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-facebook"></i></a>
+            </div>
+            <p>© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
         </div>
-      </div>
-      <div class="flex justify-center gap-6 mt-6">
-        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
-        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
-        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
-      </div>
-      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
-    </div>
-  </footer>
-  <script>
-    const sidebar = document.getElementById('sidebar');
-    const toggleBtn = document.getElementById('sidebarToggle');
-    const closeSidebarBtn = document.getElementById('closeSidebar');
-    toggleBtn.addEventListener('click', () => {
-      sidebar.classList.toggle('active');
-      sidebar.classList.toggle('-translate-x-full');
-      sidebar.classList.toggle('translate-x-0');
-    });
-    closeSidebarBtn.addEventListener('click', () => {
-      sidebar.classList.remove('active');
-      sidebar.classList.add('-translate-x-full');
-      sidebar.classList.remove('translate-x-0');
-    });
-    document.addEventListener('click', (e) => {
-      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
-        sidebar.classList.remove('active');
-        sidebar.classList.add('-translate-x-full');
-        sidebar.classList.remove('translate-x-0');
-      }
-    });
-    function showCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.remove('hidden');
-    }
-    function closeCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.add('hidden');
-    }
-  </script>
+    </footer>
+
+    <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--accent))] text-white px-6 py-3 rounded-full shadow-lg z-50">
+        📲 Install MG Chat
+    </button>
+
+    <script>
+        // Particles.js initialization
+        particlesJS('particles-js', {
+            particles: {
+                number: { value: 80, density: { enable: true, value_area: 800 } },
+                color: { value: ['#00f0ff', '#ff007a', '#6b21a8'] },
+                shape: { type: 'circle' },
+                opacity: { value: 0.5, random: true },
+                size: { value: 3, random: true },
+                line_linked: { enable: true, distance: 150, color: '#00f0ff', opacity: 0.4, width: 1 },
+                move: { enable: true, speed: 3, direction: 'none', random: true }
+            },
+            interactivity: {
+                detect_on: 'canvas',
+                events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' } },
+                modes: { repulse: { distance: 100 }, push: { particles_nb: 4 } }
+            },
+            retina_detect: true
+        });
+
+        function toggleTheme() {
+            const html = document.documentElement;
+            const button = document.querySelector('.theme-toggle');
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                html.classList.add('light');
+                button.textContent = '☀️';
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.remove('light');
+                html.classList.add('dark');
+                button.textContent = '🌙';
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+
+        // Load saved theme preference or system preference
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            document.documentElement.classList.remove('dark', 'light');
+            document.documentElement.classList.add(savedTheme);
+            document.querySelector('.theme-toggle').textContent = savedTheme === 'dark' ? '🌙' : '☀️';
+        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+            document.documentElement.classList.remove('dark');
+            document.documentElement.classList.add('light');
+            document.querySelector('.theme-toggle').textContent = '☀️';
+            localStorage.setItem('theme', 'light');
+        }
+
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/static/js/sw.js')
+                .then(reg => console.log('✅ Service Worker Registered', reg))
+                .catch(err => console.error('❌ Service Worker registration failed', err));
+        }
+
+        let deferredPrompt;
+        window.addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault();
+            deferredPrompt = e;
+            const installBtn = document.getElementById('installAppBtn');
+            if (installBtn) {
+                installBtn.style.display = 'block';
+                installBtn.addEventListener('click', () => {
+                    deferredPrompt.prompt();
+                    deferredPrompt.userChoice.then(choice => {
+                        console.log(choice.outcome === 'accepted' ? '✅ User accepted the install prompt' : '❌ User dismissed the install prompt');
+                        deferredPrompt = null;
+                    });
+                });
+            }
+        });
+    </script>
 </body>
 </html>

templates/index.html

@@ -1,444 +1,715 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="MGZon Chatbot – AI-powered assistant for code generation, web search, and e-commerce solutions by Mark Al-Asfar from Alexandria, Egypt.">
-  <meta name="keywords" content="MGZon Chatbot, AI assistant, code generation, e-commerce, Mark Al-Asfar, United States, FastAPI, Gradio">
-  <meta name="author" content="Mark Al-Asfar">
-  <meta name="robots" content="index, follow">
-  <title>MGZon Chatbot – Powered by AI</title>
-  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-  <!-- manifest for Android/Chrome -->
-  <link rel="manifest" href="/static/manifest.json">
-  <!-- iOS Web App Support -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/static/images/mg-180.png">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-title" content="MGZon">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <!-- General Theme -->
-  <meta name="theme-color" content="#2d3748">
-  <!-- Open Graph -->
-  <meta property="og:title" content="MGZon Chatbot – AI-Powered Solutions">
-  <meta property="og:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
-  <meta property="og:image" content="/static/images/mg.svg">
-  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/">
-  <meta property="og:type" content="website">
-  <!-- Twitter Card -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="MGZon Chatbot – AI-Powered Solutions">
-  <meta name="twitter:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
-  <meta name="twitter:image" content="/static/images/mg.svg">
-  <!-- JSON-LD -->
-  <script type="application/ld+json">
-  {
-    "@context": "https://schema.org",
-    "@type": "WebSite",
-    "name": "MGZon Chatbot",
-    "url": "https://mgzon-mgzon-app.hf.space/",
-    "description": "MGZon Chatbot by Mark Al-Asfar: Your AI assistant for code generation, real-time web search, and e-commerce solutions.",
-    "keywords": ["MGZon Chatbot", "AI chatbot", "Code generation AI", "E-commerce AI solutions", "Mark Al-Asfar", "AI assistant for developers", "FastAPI chatbot", "Real-time web search AI", "MGZon AI", "Python AI chatbot", "AI for coding", "E-commerce automation", "Hugging Face AI", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
-    "potentialAction": {
-      "@type": "SearchAction",
-      "target": "https://mgzon-mgzon-app.hf.space/?q={search_term_string}",
-      "query-input": "required name=search_term_string"
-    },
-    "publisher": {
-      "@type": "Organization",
-      "name": "MGZon AI",
-      "logo": {
-        "@type": "ImageObject",
-        "url": "/static/images/mg.svg"
-      }
-    }
-  }
-  </script>
-  <!-- Tailwind (v3) -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Boxicons -->
-  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <!-- Prism (for code highlighting) -->
-  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
-  <style>
-    @keyframes gradientShift {
-      0% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-      100% { background-position: 0% 50%; }
-    }
-    body {
-      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
-      background-size: 400% 400%;
-      animation: gradientShift 15s ease infinite;
-      font-family: system-ui, sans-serif;
-    }
-    .glass {
-      background: rgba(255, 255, 255, 0.07);
-      border-radius: 1rem;
-      border: 1px solid rgba(255, 255, 255, 0.12);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-    }
-    .sidebar {
-      transition: transform 0.3s ease-in-out;
-    }
-    .sidebar.collapsed .logo {
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-    .main-content {
-      min-height: calc(100vh - 4rem);
-    }
-    .loading {
-      display: inline-block;
-      width: 1rem;
-      height: 1rem;
-      border: 2px solid currentColor;
-      border-top-color: transparent;
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-      margin-left: 0.5rem;
-    }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-    .glass:hover {
-      transform: scale(1.05);
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-      background: rgba(255, 255, 255, 0.15);
-    }
-    @media (max-width: 768px) {
-      .sidebar {
-        transform: translateX(-100%);
-      }
-      .sidebar.active {
-        transform: translateX(0);
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="MGZon Chatbot – AI-powered assistant for code generation, web search, and e-commerce solutions by Mark Al-Asfar from Alexandria, Egypt.">
+    <meta name="keywords" content="MGZon Chatbot, AI assistant, code generation, e-commerce, Mark Al-Asfar, United States, FastAPI, Gradio">
+    <meta name="author" content="Mark Al-Asfar">
+    <meta name="robots" content="index, follow">
+    <title>MGZon Chatbot – Powered by AI</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="manifest" href="/static/manifest.json">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/mg-180.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="MGZon">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="theme-color" content="#00f0ff">
+    <meta property="og:title" content="MGZon Chatbot – AI-Powered Solutions">
+    <meta property="og:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
+    <meta property="og:image" content="/static/images/mg.svg">
+    <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/">
+    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="MGZon Chatbot – AI-Powered Solutions">
+    <meta name="twitter:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
+    <meta name="twitter:image" content="/static/images/mg.svg">
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "name": "MGZon Chatbot",
+      "url": "https://mgzon-mgzon-app.hf.space/",
+      "description": "MGZon Chatbot by Mark Al-Asfar: Your AI assistant for code generation, real-time web search, and e-commerce solutions.",
+      "keywords": ["MGZon Chatbot", "AI chatbot", "Code generation AI", "E-commerce AI solutions", "Mark Al-Asfar", "AI assistant for developers", "FastAPI chatbot", "Real-time web search AI", "MGZon AI", "Python AI chatbot", "AI for coding", "E-commerce automation", "Hugging Face AI", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
+      "potentialAction": {
+        "@type": "SearchAction",
+        "target": "https://mgzon-mgzon-app.hf.space/?q={search_term_string}",
+        "query-input": "required name=search_term_string"
+      },
+      "publisher": {
+        "@type": "Organization",
+        "name": "MGZon AI",
+        "logo": {
+          "@type": "ImageObject",
+          "url": "/static/images/mg.svg"
+        }
       }
     }
-  </style>
+    </script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
+    <style>
+        :root {
+            --font-sans: 'Poppins', sans-serif;
+            --font-mono: 'Orbitron', monospace;
+            --radius: 1rem;
+        }
+
+        :root.dark {
+            --background: 220 70% 10%;
+            --foreground: 0 0% 95%;
+            --card: 220 70% 15%;
+            --card-foreground: 0 0% 90%;
+            --primary: 180 100% 50%;
+            --primary-foreground: 0 0% 0%;
+            --secondary: 260 80% 30%;
+            --secondary-foreground: 0 0% 95%;
+            --muted: 220 50% 20%;
+            --muted-foreground: 0 0% 70%;
+            --accent: 320 100% 60%;
+            --accent-foreground: 0 0% 95%;
+            --border: 220 50% 25%;
+        }
+
+        :root.light {
+            --background: 0 0% 100%;
+            --foreground: 220 70% 10%;
+            --card: 0 0% 95%;
+            --card-foreground: 220 70% 15%;
+            --primary: 180 100% 50%;
+            --primary-foreground: 0 0% 100%;
+            --secondary: 260 80% 40%;
+            --secondary-foreground: 0 0% 10%;
+            --muted: 0 0% 90%;
+            --muted-foreground: 0 0% 40%;
+            --accent: 320 100% 50%;
+            --accent-foreground: 0 0% 10%;
+            --border: 0 0% 80%;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-sans);
+            background: hsl(var(--background));
+            color: hsl(var(--foreground));
+            line-height: 1.6;
+            min-height: 100vh;
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        #particles-js {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+
+        .container {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+
+        .header {
+            padding: 2rem 0;
+            text-align: center;
+            background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--card)));
+        }
+
+        .logo {
+            width: 200px;
+            height: auto;
+            filter: drop-shadow(0 0 20px hsl(var(--primary) / 0.5));
+            animation: logoSpin 10s linear infinite;
+        }
+
+        @keyframes logoSpin {
+            0% { transform: rotateY(0deg) scale(1); }
+            50% { transform: rotateY(180deg) scale(1.1); }
+            100% { transform: rotateY(360deg) scale(1); }
+        }
+
+        .hero {
+            padding: 3rem 0;
+            text-align: center;
+            position: relative;
+            background: transparent;
+        }
+
+        .hero-tagline {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: fadeIn 1s ease-out;
+        }
+
+        .hero .subtitle {
+            font-size: 1.2rem;
+            color: hsl(var(--muted-foreground));
+            margin-bottom: 2rem;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
+            animation: fadeIn 1s ease-out 0.3s both;
+        }
+
+        .highlight {
+            color: hsl(var(--primary));
+            font-weight: 600;
+        }
+
+        .nav-links {
+            display: flex;
+            justify-content: center;
+            gap: 1.5rem;
+            margin-bottom: 3rem;
+            flex-wrap: wrap;
+            animation: fadeIn 1s ease-out 0.6s both;
+        }
+
+        .nav-link {
+            padding: 1rem 2.5rem;
+            border-radius: var(--radius);
+            text-decoration: none;
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
+            color: hsl(var(--card-foreground));
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 4px 15px hsl(var(--foreground) / 0.2);
+        }
+
+        .nav-link:hover {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            color: hsl(var(--primary-foreground));
+            transform: translateY(-5px) scale(1.05);
+            box-shadow: 0 10px 30px hsl(var(--primary) / 0.5);
+        }
+
+        .nav-link::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            transition: left 0.5s;
+        }
+
+        .nav-link:hover::before {
+            left: 100%;
+        }
+
+        .cta-button {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            color: hsl(var(--primary-foreground));
+            border: none !important;
+            font-size: 1.2rem;
+            padding: 1.2rem 3rem !important;
+            font-weight: 700;
+        }
+
+        .cta-button:hover {
+            box-shadow: 0 15px 40px hsl(var(--primary) / 0.6);
+            transform: translateY(-8px) scale(1.1);
+        }
+
+        .code-snippet {
+            background: hsl(var(--muted));
+            border: 1px solid hsl(var(--border));
+            border-radius: var(--radius);
+            padding: 1.5rem;
+            font-family: var(--font-mono);
+            font-size: 1rem;
+            color: hsl(var(--primary));
+            margin: 0 auto;
+            overflow-x: auto;
+            max-width: 700px;
+            position: relative;
+            animation: fadeIn 1s ease-out 0.8s both;
+            box-shadow: 0 5px 20px hsl(var(--primary) / 0.3);
+        }
+
+        .code-snippet::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
+        }
+
+        .quick-features {
+            padding: 4rem 0;
+            background: transparent;
+        }
+
+        .quick-features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        .quick-feature {
+            text-align: center;
+            padding: 2rem;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
+            border-radius: var(--radius);
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 15px hsl(var(--foreground) / 0.2);
+        }
+
+        .quick-feature:hover {
+            transform: translateY(-10px) scale(1.05);
+            box-shadow: 0 15px 30px hsl(var(--primary) / 0.4);
+        }
+
+        .quick-feature-icon {
+            font-size: 3rem;
+            margin-bottom: 1.5rem;
+            display: block;
+            color: hsl(var(--primary));
+            transition: transform 0.3s ease;
+        }
+
+        .quick-feature:hover .quick-feature-icon {
+            transform: scale(1.2) rotate(5deg);
+        }
+
+        .quick-feature h3 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: hsl(var(--foreground));
+        }
+
+        .quick-feature p {
+            color: hsl(var(--muted-foreground));
+            font-size: 1rem;
+        }
+
+        .wave-divider {
+            height: 120px;
+            background: transparent;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .wave-divider::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 200%;
+            height: 100%;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--background)));
+            border-radius: 50%;
+            animation: wave 10s ease-in-out infinite;
+        }
+
+        @keyframes wave {
+            0%, 100% { transform: translateX(-50%) translateY(70%); }
+            50% { transform: translateX(-50%) translateY(50%); }
+        }
+
+        .features {
+            padding: 5rem 0;
+            background: hsl(var(--card));
+        }
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 2.5rem;
+            margin-top: 3rem;
+        }
+
+        .feature-card {
+            padding: 2.5rem;
+            background: hsl(var(--background));
+            border: 1px solid hsl(var(--border));
+            border-radius: var(--radius);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 5px 20px hsl(var(--foreground) / 0.2);
+        }
+
+        .feature-card::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, hsl(var(--primary) / 0.2), transparent, hsl(var(--accent) / 0.2));
+            border-radius: var(--radius);
+            z-index: -1;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .feature-card:hover::before {
+            opacity: 1;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-10px) scale(1.05);
+            box-shadow: 0 20px 40px hsl(var(--primary) / 0.5);
+        }
+
+        .feature-icon {
+            width: 3.5rem;
+            height: 3.5rem;
+            background: linear-gradient(135deg, hsl(var(--primary) / 0.2), hsl(var(--accent) / 0.2));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
+            color: hsl(var(--primary));
+            transition: transform 0.3s ease;
+        }
+
+        .feature-card:hover .feature-icon {
+            transform: rotate(360deg) scale(1.2);
+        }
+
+        .feature-card h3 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: hsl(var(--card-foreground));
+        }
+
+        .feature-card p {
+            color: hsl(var(--muted-foreground));
+            font-size: 1rem;
+        }
+
+        .section-title {
+            font-family: 'Orbitron', sans-serif;
+            text-align: center;
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: fadeIn 1s ease-out;
+        }
+
+        .section-subtitle {
+            text-align: center;
+            color: hsl(var(--muted-foreground));
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+        }
+
+        .footer {
+            padding: 4rem 0;
+            border-top: 1px solid hsl(var(--border));
+            text-align: center;
+            background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--card)));
+        }
+
+        .disclaimer {
+            background: hsl(var(--muted));
+            color: hsl(var(--muted-foreground));
+            padding: 2rem;
+            border-radius: var(--radius);
+            margin-bottom: 2rem;
+            border-left: 5px solid hsl(var(--primary));
+            box-shadow: 0 5px 20px hsl(var(--primary) / 0.3);
+        }
+
+        .disclaimer h4 {
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: hsl(var(--foreground));
+        }
+
+        .theme-toggle {
+            position: fixed;
+            top: 2rem;
+            right: 2rem;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
+            border: 1px solid hsl(var(--border));
+            color: hsl(var(--card-foreground));
+            padding: 1rem;
+            border-radius: var(--radius);
+            cursor: pointer;
+            font-size: 1.5rem;
+            transition: all 0.3s ease;
+            z-index: 1000;
+        }
+
+        .theme-toggle:hover {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            transform: scale(1.2) rotate(360deg);
+            box-shadow: 0 10px 20px hsl(var(--primary) / 0.5);
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(40px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        @media (max-width: 768px) {
+            .hero-tagline {
+                font-size: 2rem;
+            }
+
+            .nav-links {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .nav-link {
+                width: 250px;
+                text-align: center;
+            }
+
+            .container {
+                padding: 0 1.5rem;
+            }
+
+            .quick-features-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
 </head>
-<body class="text-white flex flex-col min-h-screen">
-  <!-- Mobile toggle button -->
-  <button id="sidebarToggle" 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" aria-label="Toggle navigation">
-    <i class="bx bx-menu"></i>
-  </button>
-  <!-- Sidebar -->
-  <aside id="sidebar" 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">
-    <button id="closeSidebar" class="md:hidden text-white text-2xl absolute top-4 right-4" aria-label="Close sidebar">✕</button>
-    <img src="/static/images/mg.svg" alt="MGZon Logo" class="logo w-20 h-20 mx-auto mb-8 animate-pulse">
-    <nav class="flex flex-col gap-3">
-      <a href="/" class="px-4 py-2 rounded-lg bg-emerald-600">Home</a>
-      <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
-      <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
-      {% if is_authenticated %}
-        <a href="/chat" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Chat</a>
-        <a id="logoutBtn" href="/logout" class="px-4 py-2 rounded-lg hover:bg-red-600 transition">Logout</a>
-      {% else %}
-        <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
-        <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
-      {% endif %}
-      <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
-      <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>
-    </nav>
-  </aside>
-  <!-- Main content -->
-  <main class="flex-1 md:ml-64 p-6 main-content">
-    <section class="container max-w-6xl mx-auto">
-      <!-- Hero -->
-      <div class="text-center py-12">
-        <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
-        <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
-          Welcome to MGZon Chatbot 🚀
-        </h1>
-        <p class="text-lg max-w-2xl mx-auto mb-8">
-          MGZon Chatbot is an AI-powered assistant for code generation, web search, and e-commerce solutions. Built with Gradio and FastAPI by Mark Al-Asfar from United States. Ready to code smarter and shop better? Discover MGZon Chatbot, an AI-powered assistant by Mark Al-Asfar for code generation, real-time web search, and e-commerce automation. Built with FastAPI and Hugging Face AI, MGZon rivals tools like ChatGPT, Grok, and DeepSeek.
-        </p>
-        {% if is_authenticated %}
-          <div class="flex justify-center gap-4">
-            <a href="/chat" id="launchBtn" 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">
-              Launch Chatbot <i class="bx bx-rocket ml-2"></i>
-              <span id="spinner" class="loading hidden"></span>
-            </a>
-            <a id="logoutBtn" href="/logout" class="inline-flex items-center bg-gradient-to-r from-red-500 to-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
-              Logout <i class="bx bx-log-out ml-2"></i>
-            </a>
-          </div>
-        {% else %}
-          <div class="flex justify-center gap-4">
-            <a href="/login" class="inline-flex items-center bg-gradient-to-r from-blue-500 to-cyan-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
-              Login <i class="bx bx-log-in ml-2"></i>
-            </a>
-            <a href="/register" 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">
-              Sign Up <i class="bx bx-user-plus ml-2"></i>
-            </a>
-          </div>
-        {% endif %}
-      </div>
-      <!-- Features -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Why Choose MGZon?</h2>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('code-generation')">
-            <button class="absolute top-2 right-2 text-gray-300 hover:text-white transition" onclick="event.stopPropagation(); closeCardDetails('code-generation')" aria-label="Close card">&times;</button>
-            <i class="bx bx-code-alt text-4xl text-emerald-300 mb-4"></i>
-            <h3 class="text-xl font-semibold mb-2">Code Generation</h3>
-            <p>Generate clean, well-commented code for React, Django, Flask, Node.js, and more.</p>
-            <div id="code-generation-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-              <p>Supports multiple frameworks with examples and best practices for seamless integration.</p>
-              <button onclick="closeCardDetails('code-generation')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-            </div>
-          </div>
-          <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('web-search')">
-            <button class="absolute top-2 right-2 text-gray-300 hover:text-white transition" onclick="event.stopPropagation(); closeCardDetails('web-search')" aria-label="Close card">&times;</button>
-            <i class="bx bx-search text-4xl text-emerald-300 mb-4"></i>
-            <h3 class="text-xl font-semibold mb-2">Web Search</h3>
-            <p>Real-time web search for MGZon queries and industry insights.</p>
-            <div id="web-search-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-              <p>Get up-to-date answers and insights tailored to your needs.</p>
-              <button onclick="closeCardDetails('web-search')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+<body>
+    <div id="particles-js"></div>
+
+    <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
+
+    <header class="header">
+        <div class="container">
+            <img src="/static/images/mg.svg" alt="MGZon Logo" class="logo">
+        </div>
+    </header>
+
+    <section class="hero">
+        <div class="container">
+            <h1 class="hero-tagline">MGZon Chatbot – Powered by AI</h1>
+            <p class="subtitle">
+                MGZon Chatbot is an <span class="highlight">AI-powered assistant</span> for code generation, web search, and e-commerce solutions. Built with Gradio and FastAPI by Mark Al-Asfar from United States. Ready to code smarter and shop better? Discover MGZon Chatbot, an AI-powered assistant by Mark Al-Asfar for code generation, real-time web search, and e-commerce automation. Built with FastAPI and Hugging Face AI, MGZon rivals tools like ChatGPT, Grok, and DeepSeek.
+            </p>
+            
+            <div class="nav-links">
+                <a href="/" class="nav-link">Home</a>
+                <a href="/docs" class="nav-link">API Documentation</a>
+                <a href="/about" class="nav-link">About MGZon</a>
+                <a href="https://hager-zon.vercel.app/community" class="nav-link">Community</a>
+                <a href="https://mark-elasfar.web.app/" class="nav-link">Mark Al-Asfar</a>
+                <a href="/chat" class="nav-link cta-button">Launch Chatbot</a>
             </div>
-          </div>
-          <div class="glass p-6 relative group cursor-pointer" onclick="showCardDetails('ecommerce')">
-            <button class="absolute top-2 right-2 text-gray-300 hover:text-white transition" onclick="event.stopPropagation(); closeCardDetails('ecommerce')" aria-label="Close card">&times;</button>
-            <i class="bx bx-cart text-4xl text-emerald-300 mb-4"></i>
-            <h3 class="text-xl font-semibold mb-2">E-commerce Solutions</h3>
-            <p>AI-driven tools to optimize your online store and boost sales.</p>
-            <div id="ecommerce-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-              <p>From product recommendations to inventory management, MGZon enhances your e-commerce experience.</p>
-              <button onclick="closeCardDetails('ecommerce')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+
+            <div class="code-snippet">
+                uvicorn main:app --reload
             </div>
-          </div>
         </div>
-      </section>
-      <!-- News -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Latest MGZon Updates</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="glass p-6">
-            <h3 class="text-xl font-semibold mb-2">New AI Features</h3>
-            <p>Explore our latest AI updates for smarter code and e-commerce tools.</p>
-            <a href="/blog" target="_blank" class="text-emerald-300 hover:underline">Read More →</a>
-          </div>
-          <div class="glass p-6">
-            <h3 class="text-xl font-semibold mb-2">Global Expansion</h3>
-            <p>New warehouses in the USA, Canada, and China to serve you better.</p>
-            <a href="https://hager-zon.vercel.app/community" target="_blank" class="text-emerald-300 hover:underline">Learn More →</a>
-          </div>
-        </div>
-      </section>
-      <!-- Testimonials -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">What Our Users Say</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="glass p-6">
-            <p class="mb-4">"MGZon Chatbot transformed how I code. The AI-generated snippets are accurate and save hours!"</p>
-            <p class="font-semibold">– Ahmed, Developer</p>
-          </div>
-          <div class="glass p-6">
-            <p class="mb-4">"The e-commerce tools helped me optimize my store and boost sales by 30%."</p>
-            <p class="font-semibold">– Sarah, Store Owner</p>
-          </div>
-        </div>
-      </section>
     </section>
-  </main>
-  <!-- Footer -->
-  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
-    <div class="container max-w-6xl mx-auto text-center">
-      <img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
-      <p class="mb-4">
-        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
-        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
-      </p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
-          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Email Us</h4>
-          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
-          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Reach out to our support team for any inquiries or assistance.</p>
-            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
-          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Phone Support</h4>
-          <p>+1-800-123-4567</p>
-          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Contact our support team via phone for immediate assistance.</p>
-            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
-          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Community</h4>
-          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
-          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Join our vibrant community to share ideas and collaborate.</p>
-            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
-          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">API Docs</h4>
-          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
-          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Explore our API documentation for seamless integration.</p>
-            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
-          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">FAQ</h4>
-          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
-          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Find answers to common questions in our FAQ section.</p>
-            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
-          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Documentation</h4>
-          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
-          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Access comprehensive documentation for MGZon Chatbot.</p>
-            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-      </div>
-      <div class="flex justify-center gap-6 mt-6">
-        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
-        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
-        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
-      </div>
-      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
-    </div>
-    <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded shadow-lg z-50">
-      📲 Install MG Chat
-    </button>
-  </footer>
-  <script>
-    // Sidebar toggle
-    const sidebar = document.getElementById('sidebar');
-    const toggleBtn = document.getElementById('sidebarToggle');
-    const closeSidebarBtn = document.getElementById('closeSidebar');
-
-    if (toggleBtn && sidebar) {
-      toggleBtn.addEventListener('click', () => {
-        sidebar.classList.toggle('active');
-        sidebar.classList.toggle('-translate-x-full');
-        sidebar.classList.toggle('translate-x-0');
-        console.log('Sidebar toggled');
-      });
-    } else {
-      console.warn('Sidebar or toggle button not found');
-    }
 
-    if (closeSidebarBtn && sidebar) {
-      closeSidebarBtn.addEventListener('click', () => {
-        sidebar.classList.remove('active');
-        sidebar.classList.add('-translate-x-full');
-        sidebar.classList.remove('translate-x-0');
-        console.log('Sidebar closed');
-      });
-    }
-
-    // Close sidebar when clicking outside on mobile
-    document.addEventListener('click', (e) => {
-      if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
-        sidebar.classList.remove('active');
-        sidebar.classList.add('-translate-x-full');
-        sidebar.classList.remove('translate-x-0');
-        console.log('Sidebar closed due to outside click');
-      }
-    });
+    <section class="quick-features">
+        <div class="container">
+            <div class="quick-features-grid">
+                <div class="quick-feature">
+                    <span class="quick-feature-icon">🧠</span>
+                    <h3>Code Generation</h3>
+                    <p>Generate clean, well-commented code for React, Django, Flask, Node.js, and more.</p>
+                </div>
+                
+                <div class="quick-feature">
+                    <span class="quick-feature-icon">⚡</span>
+                    <h3>Web Search</h3>
+                    <p>Real-time web search for MGZon queries and industry insights.</p>
+                </div>
+                
+                <div class="quick-feature">
+                    <span class="quick-feature-icon">🔗</span>
+                    <h3>E-commerce Solutions</h3>
+                    <p>AI-driven tools to optimize your online store and boost sales.</p>
+                </div>
+                
+                <div class="quick-feature">
+                    <span class="quick-feature-icon">🌊</span>
+                    <h3>AI Assistant</h3>
+                    <p>Your AI assistant for developers, powered by FastAPI and Hugging Face AI.</p>
+                </div>
+            </div>
+        </div>
+    </section>
 
-    // Show/hide card details
-    function showCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.remove('hidden');
-    }
+    <div class="wave-divider"></div>
 
-    function closeCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.add('hidden');
-    }
+    <section class="features">
+        <div class="container">
+            <h2 class="section-title">Why Choose MGZon?</h2>
+            <p class="section-subtitle">Experience the power of AI-powered solutions for code, search, and e-commerce</p>
+            
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">🔒</div>
+                    <h3>Secure & Private</h3>
+                    <p>We do not persist any data regarding your interactions or API keys - everything stays local and private.</p>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">👁️</div>
+                    <h3>Real-Time Insights</h3>
+                    <p>Get up-to-date answers and insights tailored to your needs with real-time web search.</p>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">🧠</div>
+                    <h3>Context-Aware AI</h3>
+                    <p>MGZon loads relevant data for your queries, making it fast and precise.</p>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">🤝</div>
+                    <h3>Developer-Friendly</h3>
+                    <p>Supports multiple frameworks with examples and best practices for seamless integration.</p>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">⚡</div>
+                    <h3>Efficient Automation</h3>
+                    <p>From product recommendations to inventory management, enhance your e-commerce experience.</p>
+                </div>
+                
+                <div class="feature-card">
+                    <div class="feature-icon">🎯</div>
+                    <h3>Precision-Driven</h3>
+                    <p>AI-generated snippets are accurate and save hours, boosting productivity.</p>
+                </div>
+            </div>
+        </div>
+    </section>
 
-    // Launch button spinner
-    const launchBtn = document.getElementById('launchBtn');
-    const spinner = document.getElementById('spinner');
-    if (launchBtn && spinner) {
-      launchBtn.addEventListener('click', (e) => {
-        spinner.classList.remove('hidden');
-        setTimeout(() => spinner.classList.add('hidden'), 2000);
-      });
-    }
+    <footer class="footer">
+        <div class="container">
+            <div class="disclaimer">
+                <h4>Getting Started</h4>
+                <p>
+                    To use MGZon Chatbot, simply launch the chatbot interface. 
+                    You can use our pre-configured AI models or bring your own. 
+                    We do not persist any data regarding your queries or interactions - everything stays local and private.
+                </p>
+                <div style="text-align:center; margin-top: 1.5rem;">
+                    <a href="/chat" class="nav-link cta-button">Launch Chatbot</a>
+                </div>
+            </div>
+            <div class="flex justify-center gap-6 mb-4">
+                <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-facebook"></i></a>
+            </div>
+            <p>© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+        </div>
+    </footer>
 
-    // Logout handler
-    const logoutBtn = document.getElementById('logoutBtn');
-    if (logoutBtn) {
-      logoutBtn.addEventListener('click', async (e) => {
-        e.preventDefault();
-        console.log('Logout button clicked');
-        try {
-          const response = await fetch('/logout', {
-            method: 'GET',
-            credentials: 'include'
-          });
-          if (response.ok) {
-            localStorage.removeItem('token');
-            console.log('Token removed from localStorage');
-            window.location.href = '/login';
-          } else {
-            console.error('Logout failed:', response.status);
-            alert('Failed to log out. Please try again.');
-          }
-        } catch (error) {
-          console.error('Logout error:', error);
-          alert('Error during logout: ' + error.message);
-        }
-      });
-    }
+    <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--accent))] text-white px-6 py-3 rounded-full shadow-lg z-50">
+        📲 Install MG Chat
+    </button>
 
-    // Service Worker for PWA
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/static/js/sw.js')
-        .then(function(reg) {
-          console.log('✅ Service Worker Registered', reg);
-        }).catch(function(err) {
-          console.error('❌ Service Worker registration failed', err);
+    <script>
+        // Particles.js initialization
+        particlesJS('particles-js', {
+            particles: {
+                number: { value: 80, density: { enable: true, value_area: 800 } },
+                color: { value: ['#00f0ff', '#ff007a', '#6b21a8'] },
+                shape: { type: 'circle' },
+                opacity: { value: 0.5, random: true },
+                size: { value: 3, random: true },
+                line_linked: { enable: true, distance: 150, color: '#00f0ff', opacity: 0.4, width: 1 },
+                move: { enable: true, speed: 3, direction: 'none', random: true }
+            },
+            interactivity: {
+                detect_on: 'canvas',
+                events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' } },
+                modes: { repulse: { distance: 100 }, push: { particles_nb: 4 } }
+            },
+            retina_detect: true
         });
-    }
 
-    // Handle beforeinstallprompt for PWA
-    let deferredPrompt;
-    window.addEventListener('beforeinstallprompt', (e) => {
-      e.preventDefault();
-      deferredPrompt = e;
-      const installBtn = document.getElementById('installAppBtn');
-      if (installBtn) {
-        installBtn.style.display = 'block';
-        installBtn.addEventListener('click', () => {
-          deferredPrompt.prompt();
-          deferredPrompt.userChoice.then(choice => {
-            if (choice.outcome === 'accepted') {
-              console.log('✅ User accepted the install prompt');
+        function toggleTheme() {
+            const html = document.documentElement;
+            const button = document.querySelector('.theme-toggle');
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                html.classList.add('light');
+                button.textContent = '☀️';
+                localStorage.setItem('theme', 'light');
             } else {
-              console.log('❌ User dismissed the install prompt');
+                html.classList.remove('light');
+                html.classList.add('dark');
+                button.textContent = '🌙';
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+
+        // Load saved theme preference or system preference
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            document.documentElement.classList.remove('dark', 'light');
+            document.documentElement.classList.add(savedTheme);
+            document.querySelector('.theme-toggle').textContent = savedTheme === 'dark' ? '🌙' : '☀️';
+        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+            document.documentElement.classList.remove('dark');
+            document.documentElement.classList.add('light');
+            document.querySelector('.theme-toggle').textContent = '☀️';
+            localStorage.setItem('theme', 'light');
+        }
+
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/static/js/sw.js')
+                .then(reg => console.log('✅ Service Worker Registered', reg))
+                .catch(err => console.error('❌ Service Worker registration failed', err));
+        }
+
+        let deferredPrompt;
+        window.addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault();
+            deferredPrompt = e;
+            const installBtn = document.getElementById('installAppBtn');
+            if (installBtn) {
+                installBtn.style.display = 'block';
+                installBtn.addEventListener('click', () => {
+                    deferredPrompt.prompt();
+                    deferredPrompt.userChoice.then(choice => {
+                        console.log(choice.outcome === 'accepted' ? '✅ User accepted the install prompt' : '❌ User dismissed the install prompt');
+                        deferredPrompt = null;
+                    });
+                });
             }
-            deferredPrompt = null;
-          });
         });
-      }
-    });
-
-    // Card animations
-    document.querySelectorAll('.glass').forEach(card => {
-      card.addEventListener('mouseenter', () => {
-        card.style.transform = 'scale(1.05) rotate(1deg)';
-      });
-      card.addEventListener('mouseleave', () => {
-        card.style.transform = 'scale(1) rotate(0deg)';
-      });
-    });
-  </script>
+    </script>
 </body>
 </html>

templates/login.html

@@ -1,412 +1,629 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="en" class="dark">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description"
-    content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.">
-  <meta name="keywords" content="MGZon Chatbot, login, AI assistant, code generation, e-commerce, Mark Al-Asfar">
-  <meta name="author" content="Mark Al-Asfar">
-  <meta name="robots" content="index, follow">
-  <title>Login - MGZon Chatbot</title>
-  <!-- manifest for Android/Chrome -->
-  <link rel="manifest" href="/static/manifest.json">
-  <!-- iOS Web App Support -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/static/images/mg.svg">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-title" content="MGZon">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <!-- General Theme -->
-  <meta name="theme-color" content="#2d3748">
-  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-  <!-- Open Graph -->
-  <meta property="og:title" content="Login - MGZon Chatbot">
-  <meta property="og:description"
-    content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
-  <meta property="og:image" content="/static/images/mg.svg">
-  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/login">
-  <meta property="og:type" content="website">
-  <!-- Twitter Card -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="Login - MGZon Chatbot">
-  <meta name="twitter:description"
-    content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
-  <meta name="twitter:image" content="/static/images/mg.svg">
-  <!-- JSON-LD -->
-  <script type="application/ld+json">
-  {
-    "@context": "https://schema.org",
-    "@type": "WebPage",
-    "name": "Login - MGZon Chatbot",
-    "url": "https://mgzon-mgzon-app.hf.space/login",
-    "description": "Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.",
-    "keywords": ["MGZon Chatbot", "login", "AI chatbot", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "E-commerce chatbot", "Python AI chatbot", "FastAPI integration"],
-    "isPartOf": {
-      "@type": "WebSite",
-      "name": "MGZon Chatbot",
-      "url": "https://mgzon-mgzon-app.hf.space/"
-    }
-  }
-  </script>
-  <!-- Tailwind (v3) -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Boxicons -->
-  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
-  <style>
-    @keyframes gradientShift {
-      0% {
-        background-position: 0% 50%;
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.">
+    <meta name="keywords" content="MGZon Chatbot, login, AI assistant, code generation, e-commerce, Mark Al-Asfar">
+    <meta name="author" content="Mark Al-Asfar">
+    <meta name="robots" content="index, follow">
+    <title>Login - MGZon Chatbot</title>
+    <link rel="manifest" href="/static/manifest.json">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/mg.svg">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="MGZon">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="theme-color" content="#00f0ff">
+    <meta property="og:title" content="Login - MGZon Chatbot">
+    <meta property="og:description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+    <meta property="og:image" content="/static/images/mg.svg">
+    <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/login">
+    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Login - MGZon Chatbot">
+    <meta name="twitter:description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+    <meta name="twitter:image" content="/static/images/mg.svg">
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebPage",
+      "name": "Login - MGZon Chatbot",
+      "url": "https://mgzon-mgzon-app.hf.space/login",
+      "description": "Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.",
+      "keywords": ["MGZon Chatbot", "login", "AI chatbot", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "E-commerce chatbot", "Python AI chatbot", "FastAPI integration"],
+      "isPartOf": {
+        "@type": "WebSite",
+        "name": "MGZon Chatbot",
+        "url": "https://mgzon-mgzon-app.hf.space/"
       }
+    }
+    </script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
+    <style>
+        :root {
+            --font-sans: 'Poppins', sans-serif;
+            --font-mono: 'Orbitron', monospace;
+            --radius: 1rem;
+        }
 
-      50% {
-        background-position: 100% 50%;
-      }
+        :root.dark {
+            --background: 220 70% 10%;
+            --foreground: 0 0% 95%;
+            --card: 220 70% 15%;
+            --card-foreground: 0 0% 90%;
+            --primary: 180 100% 50%;
+            --primary-foreground: 0 0% 0%;
+            --secondary: 260 80% 30%;
+            --secondary-foreground: 0 0% 95%;
+            --muted: 220 50% 20%;
+            --muted-foreground: 0 0% 70%;
+            --accent: 320 100% 60%;
+            --accent-foreground: 0 0% 95%;
+            --border: 220 50% 25%;
+        }
 
-      100% {
-        background-position: 0% 50%;
-      }
-    }
+        :root.light {
+            --background: 0 0% 100%;
+            --foreground: 220 70% 10%;
+            --card: 0 0% 95%;
+            --card-foreground: 220 70% 15%;
+            --primary: 180 100% 50%;
+            --primary-foreground: 0 0% 100%;
+            --secondary: 260 80% 40%;
+            --secondary-foreground: 0 0% 10%;
+            --muted: 0 0% 90%;
+            --muted-foreground: 0 0% 40%;
+            --accent: 320 100% 50%;
+            --accent-foreground: 0 0% 10%;
+            --border: 0 0% 80%;
+        }
 
-    body {
-      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
-      background-size: 400% 400%;
-      animation: gradientShift 15s ease infinite;
-      font-family: system-ui, sans-serif;
-    }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
 
-    .glass {
-      background: rgba(255, 255, 255, 0.07);
-      border-radius: 1rem;
-      border: 1px solid rgba(255, 255, 255, 0.12);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-    }
+        body {
+            font-family: var(--font-sans);
+            background: hsl(var(--background));
+            color: hsl(var(--foreground));
+            line-height: 1.6;
+            min-height: 100vh;
+            position: relative;
+            overflow-x: hidden;
+        }
 
-    .loading {
-      display: inline-block;
-      width: 1rem;
-      height: 1rem;
-      border: 2px solid currentColor;
-      border-top-color: transparent;
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-      margin-left: 0.5rem;
-    }
+        #particles-js {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
 
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
+        .container {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
 
-    .glass:hover {
-      transform: scale(1.05);
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-      background: rgba(255, 255, 255, 0.15);
-    }
-  </style>
+        .glass {
+            background: rgba(255, 255, 255, 0.07);
+            border-radius: var(--radius);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            transition: all 0.3s ease;
+        }
+
+        .glass:hover {
+            transform: scale(1.05);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+            background: rgba(255, 255, 255, 0.15);
+        }
+
+        .login-button {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            color: hsl(var(--primary-foreground));
+            border: none;
+            padding: 1rem 2rem;
+            border-radius: var(--radius);
+            font-family: var(--font-mono);
+            font-weight: 600;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .login-button:hover {
+            transform: translateY(-5px) scale(1.05);
+            box-shadow: 0 10px 20px hsl(var(--primary) / 0.5);
+        }
+
+        .login-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            transition: left 0.5s;
+        }
+
+        .login-button:hover::before {
+            left: 100%;
+        }
+
+        .input-field {
+            background: hsl(var(--muted));
+            border: 1px solid hsl(var(--border));
+            color: hsl(var(--foreground));
+            padding: 0.75rem;
+            border-radius: var(--radius);
+            font-family: var(--font-sans);
+            transition: all 0.3s ease;
+        }
+
+        .input-field:focus {
+            outline: none;
+            border-color: hsl(var(--primary));
+            box-shadow: 0 0 10px hsl(var(--primary) / 0.5);
+        }
+
+        .theme-toggle {
+            position: fixed;
+            top: 2rem;
+            right: 2rem;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
+            border: 1px solid hsl(var(--border));
+            color: hsl(var(--card-foreground));
+            padding: 1rem;
+            border-radius: var(--radius);
+            cursor: pointer;
+            font-size: 1.5rem;
+            transition: all 0.3s ease;
+            z-index: 1000;
+        }
+
+        .theme-toggle:hover {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            transform: scale(1.2) rotate(360deg);
+            box-shadow: 0 10px 20px hsl(var(--primary) / 0.5);
+        }
+
+        .error-message {
+            background: hsl(var(--muted));
+            border-left: 5px solid hsl(var(--accent));
+            padding: 1rem;
+            border-radius: var(--radius);
+            color: hsl(var(--accent-foreground));
+        }
+
+        .footer-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 15px hsl(var(--foreground) / 0.2);
+        }
+
+        .footer-card:hover {
+            transform: translateY(-10px) scale(1.05);
+            box-shadow: 0 15px 30px hsl(var(--primary) / 0.4);
+        }
+
+        .footer-card-icon {
+            transition: transform 0.3s ease;
+        }
+
+        .footer-card:hover .footer-card-icon {
+            transform: scale(1.2) rotate(5deg);
+        }
+
+        .wave-divider {
+            height: 120px;
+            background: transparent;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .wave-divider::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 200%;
+            height: 100%;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--background)));
+            border-radius: 50%;
+            animation: wave 10s ease-in-out infinite;
+        }
+
+        @keyframes wave {
+            0%, 100% { transform: translateX(-50%) translateY(70%); }
+            50% { transform: translateX(-50%) translateY(50%); }
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(40px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .footer {
+            text-align: center; /* Ensure footer content is centered */
+        }
+
+        .footer p {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 0 1.5rem;
+            }
+        }
+    </style>
 </head>
+<body>
+    <div id="particles-js"></div>
 
-<body class="text-white min-h-screen flex flex-col justify-center items-center">
-  <div class="container max-w-md mx-auto text-center py-12">
-    <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
-    <h1 class="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
-      Login to MGZon Chatbot
-    </h1>
-    <div class="glass p-8">
-      <form id="loginForm" action="/auth/jwt/login" method="POST" class="flex flex-col gap-4">
-        <input type="email" name="username" id="email" placeholder="Email"
-          class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500"
-          required>
-        <input type="password" name="password" id="password" placeholder="Password"
-          class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500"
-          required>
-        <button type="submit" id="loginBtn"
-          class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
-          Login <i class="bx bx-log-in ml-2"></i>
-          <span id="spinner" class="loading hidden"></span>
-        </button>
-      </form>
-      <div class="flex justify-center gap-4 mt-4 flex-wrap">
-        <button id="googleLoginBtn"
-          class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
-          Login with Google <i class="bx bxl-google ml-2"></i>
-        </button>
-        <button id="githubLoginBtn"
-          class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
-          Login with GitHub <i class="bx bxl-github ml-2"></i>
-        </button>
-      </div>
-      <p class="mt-4">Don't have an account? <a href="/register" class="text-emerald-300 hover:underline">Register</a>
-      </p>
-      <p id="errorMsg" class="text-red-500 mt-4 hidden"></p>
-    </div>
-  </div>
-  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8 w-full">
-    <div class="container max-w-6xl mx-auto text-center">
-      <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
-      <p class="mb-4">
-        Developed by <a href="https://mark-elasfar.web.app/" target="_blank"
-          class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
-        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank"
-          class="text-emerald-300 hover:underline">MGZon AI</a>
-      </p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
-          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Email Us</h4>
-          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
-          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Reach out to our support team for any inquiries or assistance.</p>
-            <button onclick="closeCardDetails('email')"
-              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
-          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Phone Support</h4>
-          <p>+1-800-123-4567</p>
-          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Contact our support team via phone for immediate assistance.</p>
-            <button onclick="closeCardDetails('phone')"
-              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
-          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Community</h4>
-          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
-          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Join our vibrant community to share ideas and collaborate.</p>
-            <button onclick="closeCardDetails('community')"
-              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
-          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">API Docs</h4>
-          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
-          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Explore our API documentation for seamless integration.</p>
-            <button onclick="closeCardDetails('api-docs')"
-              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
-          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">FAQ</h4>
-          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read
-              FAQ</a></p>
-          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Find answers to common questions in our FAQ section.</p>
-            <button onclick="closeCardDetails('faq')"
-              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
-          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Documentation</h4>
-          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
-          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Access comprehensive documentation for MGZon Chatbot.</p>
-            <button onclick="closeCardDetails('docs')"
-              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
+    <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
+
+    <div class="container flex flex-col justify-center items-center min-h-screen">
+        <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6" style="animation: fadeIn 1s ease-out;">
+        <h1 class="text-4xl font-bold mb-4 font-[var(--font-mono)] bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--accent))] bg-clip-text text-transparent" style="animation: fadeIn 1s ease-out 0.3s both;">
+            Login to MGZon Chatbot
+        </h1>
+        <div class="glass p-8 max-w-md w-full" style="animation: fadeIn 1s ease-out 0.6s both;">
+            <form id="loginForm" action="/auth/jwt/login" method="POST" class="flex flex-col gap-4">
+                <input type="email" name="username" id="email" placeholder="Email" class="input-field" required>
+                <input type="password" name="password" id="password" placeholder="Password" class="input-field" required>
+                <button type="submit" id="loginBtn" class="login-button">
+                    Login <i class="bx bx-log-in ml-2"></i>
+                    <span id="spinner" class="loading hidden"></span>
+                </button>
+            </form>
+            <div class="flex justify-center gap-4 mt-4 flex-wrap">
+                <button id="googleLoginBtn" class="login-button inline-flex items-center">
+                    Login with Google <i class="bx bxl-google ml-2"></i>
+                </button>
+                <button id="githubLoginBtn" class="login-button inline-flex items-center">
+                    Login with GitHub <i class="bx bxl-github ml-2"></i>
+                </button>
+            </div>
+            <p class="mt-4 text-center">
+                Don't have an account? <a href="/register" class="text-[hsl(var(--primary))] hover:underline">Register</a>
+            </p>
+            <p id="errorMsg" class="error-message mt-4 hidden"></p>
         </div>
-      </div>
-      <div class="flex justify-center gap-6 mt-6">
-        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i
-            class="bx bxl-github"></i></a>
-        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i
-            class="bx bxl-twitter"></i></a>
-        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/"
-          class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
-      </div>
-      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
     </div>
-    <button id="installAppBtn" style="display: none;"
-      class="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded shadow-lg z-50">
-      📲 Install MG Chat
-    </button>
-  </footer>
-
-  <script>
-    console.log('Login page script loaded'); // Debugging: Ensure script is running
-
-    const loginForm = document.getElementById('loginForm');
-    const loginBtn = document.getElementById('loginBtn');
-    const spinner = document.getElementById('spinner');
-    const errorMsg = document.getElementById('errorMsg');
-    const googleLoginBtn = document.getElementById('googleLoginBtn');
-    const githubLoginBtn = document.getElementById('githubLoginBtn');
-
-    // Check authentication status on page load
-    async function checkAuthStatus() {
-      try {
-        const response = await fetch('/api/check-auth', {
-          method: 'GET',
-          credentials: 'include',
-          headers: { 'Accept': 'application/json' }
+
+    <div class="wave-divider"></div>
+
+    <footer class="footer py-12">
+        <div class="container">
+            <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6" style="animation: fadeIn 1s ease-out;">
+            <p class="mb-4 text-center">
+                Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-[hsl(var(--primary))] hover:underline">Mark Al-Asfar</a>
+                | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-[hsl(var(--primary))] hover:underline">MGZon AI</a>
+            </p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+                    <i class="bx bx-mail-send text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">Email Us</h4>
+                    <p><a href="mailto:support@mgzon.com" class="text-[hsl(var(--primary))] hover:underline">support@mgzon.com</a></p>
+                    <div id="email-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Reach out to our support team for any inquiries or assistance.</p>
+                        <button onclick="closeCardDetails('email')" class="login-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+                    <i class="bx bx-phone text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">Phone Support</h4>
+                    <p>+20 1212444617</p>
+                    <div id="phone-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Contact our support team via phone for immediate assistance.</p>
+                        <button onclick="closeCardDetails('phone')" class="login-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+                    <i class="bx bx-group text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">Community</h4>
+                    <p><a href="https://hager-zon.vercel.app/community" class="text-[hsl(var(--primary))] hover:underline">Join us</a></p>
+                    <div id="community-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Join our vibrant community to share ideas and collaborate.</p>
+                        <button onclick="closeCardDetails('community')" class="login-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+                    <i class="bx bx-code-alt text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">API Docs</h4>
+                    <p><a href="/docs" class="text-[hsl(var(--primary))] hover:underline">Explore Docs</a></p>
+                    <div id="api-docs-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Explore our API documentation for seamless integration.</p>
+                        <button onclick="closeCardDetails('api-docs')" class="login-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+                    <i class="bx bx-help-circle text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">FAQ</h4>
+                    <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-[hsl(var(--primary))] hover:underline">Read FAQ</a></p>
+                    <div id="faq-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Find answers to common questions in our FAQ section.</p>
+                        <button onclick="closeCardDetails('faq')" class="login-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+                    <i class="bx bx-book text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">Documentation</h4>
+                    <p><a href="/docs" class="text-[hsl(var(--primary))] hover:underline">Full Docs</a></p>
+                    <div id="docs-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Access comprehensive documentation for MGZon Chatbot.</p>
+                        <button onclick="closeCardDetails('docs')" class="login-button mt-2">Close</button>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-center gap-6 mt-6">
+                <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-[hsl(var(--foreground))] hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon" class="text-2xl text-[hsl(var(--foreground))] hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-[hsl(var(--foreground))] hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-facebook"></i></a>
+            </div>
+            <p class="mt-6 text-center">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+        </div>
+        <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--accent))] text-[hsl(var(--primary-foreground))] px-6 py-3 rounded-full shadow-lg z-50">
+            📲 Install MG Chat
+        </button>
+    </footer>
+
+    <script>
+        // Particles.js initialization
+        particlesJS('particles-js', {
+            particles: {
+                number: { value: 80, density: { enable: true, value_area: 800 } },
+                color: { value: ['#00f0ff', '#ff007a', '#6b21a8'] },
+                shape: { type: 'circle' },
+                opacity: { value: 0.5, random: true },
+                size: { value: 3, random: true },
+                line_linked: { enable: true, distance: 150, color: '#00f0ff', opacity: 0.4, width: 1 },
+                move: { enable: true, speed: 3, direction: 'none', random: true }
+            },
+            interactivity: {
+                detect_on: 'canvas',
+                events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' } },
+                modes: { repulse: { distance: 100 }, push: { particles_nb: 4 } }
+            },
+            retina_detect: true
         });
-        const data = await response.json();
-        if (data.is_authenticated) {
-          console.log('User is authenticated, redirecting to /chat');
-          window.location.href = '/chat';
+
+        function toggleTheme() {
+            const html = document.documentElement;
+            const button = document.querySelector('.theme-toggle');
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                html.classList.add('light');
+                button.textContent = '☀️';
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.remove('light');
+                html.classList.add('dark');
+                button.textContent = '🌙';
+                localStorage.setItem('theme', 'dark');
+            }
         }
-      } catch (error) {
-        console.error('Error checking auth status:', error);
-      }
-    }
 
-    // Handle email/password login
-    loginForm.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      console.log('Login form submitted'); // Debugging
-      spinner.classList.remove('hidden');
-      errorMsg.classList.add('hidden');
-      const formData = new FormData(loginForm);
-      try {
-        const response = await fetch('/auth/jwt/login', {
-          method: 'POST',
-          body: formData
-        });
-        spinner.classList.add('hidden');
-        if (response.ok) {
-          console.log('Login successful, redirecting to /chat'); // Debugging
-          window.location.href = '/chat';
-        } else {
-          const error = await response.json();
-          errorMsg.textContent = error.detail || 'Login failed. Please try again.';
-          errorMsg.classList.remove('hidden');
-          console.error('Login failed:', error); // Debugging
+        // Load saved theme preference or system preference
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            document.documentElement.classList.remove('dark', 'light');
+            document.documentElement.classList.add(savedTheme);
+            document.querySelector('.theme-toggle').textContent = savedTheme === 'dark' ? '🌙' : '☀️';
+        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+            document.documentElement.classList.remove('dark');
+            document.documentElement.classList.add('light');
+            document.querySelector('.theme-toggle').textContent = '☀️';
+            localStorage.setItem('theme', 'light');
         }
-      } catch (error) {
-        spinner.classList.add('hidden');
-        errorMsg.textContent = 'An error occurred. Please try again.';
-        errorMsg.classList.remove('hidden');
-        console.error('Error during login:', error); // Debugging
-      }
-    });
-
-    // Handle Google OAuth login
-    googleLoginBtn.addEventListener('click', async (e) => {
-      e.preventDefault();
-      console.log('Google login button clicked');
-      spinner.classList.remove('hidden');
-      errorMsg.classList.add('hidden');
-      try {
-        const response = await fetch('https://mgzon-mgzon-app.hf.space/auth/google/authorize', {
-          method: 'GET',
-          headers: { 'Accept': 'application/json' }
+
+        // Check authentication status on page load
+        async function checkAuthStatus() {
+            try {
+                const response = await fetch('/api/check-auth', {
+                    method: 'GET',
+                    credentials: 'include',
+                    headers: { 'Accept': 'application/json' }
+                });
+                const data = await response.json();
+                if (data.is_authenticated) {
+                    console.log('User is authenticated, redirecting to /chat');
+                    window.location.href = '/chat';
+                }
+            } catch (error) {
+                console.error('Error checking auth status:', error);
+            }
+        }
+
+        // Handle email/password login
+        const loginForm = document.getElementById('loginForm');
+        const loginBtn = document.getElementById('loginBtn');
+        const spinner = document.getElementById('spinner');
+        const errorMsg = document.getElementById('errorMsg');
+        const googleLoginBtn = document.getElementById('googleLoginBtn');
+        const githubLoginBtn = document.getElementById('githubLoginBtn');
+
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            console.log('Login form submitted');
+            spinner.classList.remove('hidden');
+            errorMsg.classList.add('hidden');
+            const formData = new FormData(loginForm);
+            try {
+                const response = await fetch('/auth/jwt/login', {
+                    method: 'POST',
+                    body: formData
+                });
+                spinner.classList.add('hidden');
+                if (response.ok) {
+                    console.log('Login successful, redirecting to /chat');
+                    window.location.href = '/chat';
+                } else {
+                    const error = await response.json();
+                    errorMsg.textContent = error.detail || 'Login failed. Please try again.';
+                    errorMsg.classList.remove('hidden');
+                    console.error('Login failed:', error);
+                }
+            } catch (error) {
+                spinner.classList.add('hidden');
+                errorMsg.textContent = 'An error occurred. Please try again.';
+                errorMsg.classList.remove('hidden');
+                console.error('Error during login:', error);
+            }
+        });
+
+        // Handle Google OAuth login
+googleLoginBtn.addEventListener('click', async (e) => {
+    e.preventDefault();
+    console.log('Google login button clicked');
+    spinner.classList.remove('hidden');
+    errorMsg.classList.add('hidden');
+    try {
+        const response = await fetch('/auth/google/authorize', {
+            method: 'GET',
+            headers: { 'Accept': 'application/json' }
         });
         if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
+            throw new Error(`HTTP error! Status: ${response.status}`);
         }
         const data = await response.json();
         if (data.authorization_url) {
-          console.log('Redirecting to Google:', data.authorization_url);
-          window.location.href = data.authorization_url;
+            console.log('Redirecting to Google:', data.authorization_url);
+            window.location.href = data.authorization_url;
         } else {
-          throw new Error('No authorization URL received');
+            throw new Error('No authorization URL received');
         }
-      } catch (error) {
+    } catch (error) {
         spinner.classList.add('hidden');
         errorMsg.textContent = 'Failed to initiate Google login. Please try again.';
         errorMsg.classList.remove('hidden');
         console.error('Error initiating Google login:', error);
-      }
-    });
-
-    // Handle GitHub OAuth login
-    githubLoginBtn.addEventListener('click', async (e) => {
-      e.preventDefault();
-      console.log('GitHub login button clicked');
-      spinner.classList.remove('hidden');
-      errorMsg.classList.add('hidden');
-      try {
-        const response = await fetch('https://mgzon-mgzon-app.hf.space/auth/github/authorize', {
-          method: 'GET',
-          headers: { 'Accept': 'application/json' }
+    }
+});
+
+// Handle GitHub OAuth login
+githubLoginBtn.addEventListener('click', async (e) => {
+    e.preventDefault();
+    console.log('GitHub login button clicked');
+    spinner.classList.remove('hidden');
+    errorMsg.classList.add('hidden');
+    try {
+        const response = await fetch('/auth/github/authorize', {
+            method: 'GET',
+            headers: { 'Accept': 'application/json' }
         });
         if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
+            throw new Error(`HTTP error! Status: ${response.status}`);
         }
         const data = await response.json();
         if (data.authorization_url) {
-          console.log('Redirecting to GitHub:', data.authorization_url);
-          window.location.href = data.authorization_url;
+            console.log('Redirecting to GitHub:', data.authorization_url);
+            window.location.href = data.authorization_url;
         } else {
-          throw new Error('No authorization URL received');
+            throw new Error('No authorization URL received');
         }
-      } catch (error) {
+    } catch (error) {
         spinner.classList.add('hidden');
         errorMsg.textContent = 'Failed to initiate GitHub login. Please try again.';
         errorMsg.classList.remove('hidden');
         console.error('Error initiating GitHub login:', error);
-      }
-    });
-
-    // Check for error query parameters on page load (for OAuth errors)
-    window.addEventListener('load', () => {
-      console.log('Page loaded, checking for OAuth callback');
-      const urlParams = new URLSearchParams(window.location.search);
-      const error = urlParams.get('error');
-      if (error) {
-        errorMsg.textContent = decodeURIComponent(error);
+    }
+});
+
+// Check for OAuth callback on load (for web)
+window.addEventListener('load', async () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const code = urlParams.get('code');
+  const error = urlParams.get('error');
+  if (error) {
+    errorMsg.textContent = decodeURIComponent(error);
+    errorMsg.classList.remove('hidden');
+    console.error('OAuth error from URL:', error);
+  } else if (code) {
+    console.log('OAuth code detected in URL, processing callback');
+    const provider = window.location.pathname.includes('google') ? 'google' : 'github';
+    const callbackEndpoint = `/auth/${provider}/callback?code=${code}`;
+    try {
+      const response = await fetch(callbackEndpoint, {
+        method: 'GET',
+        headers: { 'Accept': 'application/json' }
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.access_token) {
+          localStorage.setItem('token', data.access_token);  // Store token in localStorage for web
+          console.log(`${provider} login successful, token saved`);
+          window.location.href = '/chat';  // Redirect to server's /chat
+        } else {
+          throw new Error('No access token received');
+        }
+      } else {
+        const errorData = await response.json();
+        errorMsg.textContent = errorData.detail || `Failed to complete ${provider} login`;
         errorMsg.classList.remove('hidden');
-        console.error('OAuth error from URL:', error);
-      } else if (urlParams.get('code')) {
-        // If there's a 'code' parameter, it means OAuth login was successful
-        console.log('OAuth login successful, redirecting to /chat');
-        window.location.href = '/chat';
+        console.error(`Failed to complete ${provider} login:`, errorData);
       }
-    });
-
-    // Handle card details toggle
-    function showCardDetails(cardId) {
-      console.log('Showing card details:', cardId); // Debugging
-      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    } catch (error) {
+      errorMsg.textContent = `Failed to process ${provider} login. Please try again.`;
+      errorMsg.classList.remove('hidden');
+      console.error(`Error processing ${provider} callback:`, error);
     }
+  }
+});
 
-    function closeCardDetails(cardId) {
-      console.log('Closing card details:', cardId); // Debugging
-      document.getElementById(`${cardId}-details`).classList.add('hidden');
-    }
+        // Handle card details toggle
+        function showCardDetails(cardId) {
+            console.log('Showing card details:', cardId);
+            document.getElementById(`${cardId}-details`).classList.remove('hidden');
+        }
 
-    // Service Worker for PWA
-    if ('serviceWorker' in navigator) {
-      console.log('Registering service worker'); // Debugging
-      navigator.serviceWorker.register('/static/js/sw.js')
-        .then(reg => console.log('✅ Service Worker Registered', reg))
-        .catch(err => console.error('❌ Service Worker registration failed', err));
-    }
+        function closeCardDetails(cardId) {
+            console.log('Closing card details:', cardId);
+            document.getElementById(`${cardId}-details`).classList.add('hidden');
+        }
 
-    // Handle PWA install prompt
-    let deferredPrompt;
-    window.addEventListener('beforeinstallprompt', (e) => {
-      console.log('Before install prompt triggered'); // Debugging
-      e.preventDefault();
-      deferredPrompt = e;
-      const installBtn = document.getElementById('installAppBtn');
-      if (installBtn) {
-        installBtn.style.display = 'block';
-        installBtn.addEventListener('click', () => {
-          console.log('Install button clicked'); // Debugging
-          deferredPrompt.prompt();
-          deferredPrompt.userChoice.then(choice => {
-            if (choice.outcome === 'accepted') {
-              console.log('✅ User accepted the install prompt');
-            } else {
-              console.log('❌ User dismissed the install prompt');
+        // Service Worker for PWA
+        if ('serviceWorker' in navigator) {
+            console.log('Registering service worker');
+            navigator.serviceWorker.register('/static/js/sw.js')
+                .then(reg => console.log('✅ Service Worker Registered', reg))
+                .catch(err => console.error('❌ Service Worker registration failed', err));
+        }
+
+        // Handle PWA install prompt
+        let deferredPrompt;
+        window.addEventListener('beforeinstallprompt', (e) => {
+            console.log('Before install prompt triggered');
+            e.preventDefault();
+            deferredPrompt = e;
+            const installBtn = document.getElementById('installAppBtn');
+            if (installBtn) {
+                installBtn.style.display = 'block';
+                installBtn.addEventListener('click', () => {
+                    console.log('Install button clicked');
+                    deferredPrompt.prompt();
+                    deferredPrompt.userChoice.then(choice => {
+                        if (choice.outcome === 'accepted') {
+                            console.log('✅ User accepted the install prompt');
+                        } else {
+                            console.log('❌ User dismissed the install prompt');
+                        }
+                        deferredPrompt = null;
+                    });
+                });
             }
-            deferredPrompt = null;
-          });
         });
-      }
-    });
-  </script>
-
+    </script>
 </body>
-
-</html>
+</html>

templates/register.html

@@ -1,222 +1,512 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign up with email, Google, or GitHub.">
-  <meta name="keywords" content="MGZon Chatbot, register, sign up, AI assistant, code generation, e-commerce, Mark Al-Asfar">
-  <meta name="author" content="Mark Al-Asfar">
-  <meta name="robots" content="index, follow">
-  <title>Register - MGZon Chatbot</title>
-  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/images/mg.svg">
-  <!-- Open Graph -->
-  <meta property="og:title" content="Register - MGZon Chatbot">
-  <meta property="og:description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
-  <meta property="og:image" content="/static/images/mg.svg">
-  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/register">
-  <meta property="og:type" content="website">
-  <!-- Twitter Card -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="Register - MGZon Chatbot">
-  <meta name="twitter:description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
-  <meta name="twitter:image" content="/static/images/mg.svg">
-  <!-- JSON-LD -->
-<script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "WebPage",
-  "name": "Register - MGZon Chatbot",
-  "url": "https://mgzon-mgzon-app.hf.space/register",
-  "description": "Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign up with email, Google, or GitHub.",
-  "keywords": ["MGZon Chatbot", "register", "sign up", "AI chatbot", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "E-commerce chatbot", "Python AI chatbot", "FastAPI integration"],
-  "isPartOf": {
-    "@type": "WebSite",
-    "name": "MGZon Chatbot",
-    "url": "https://mgzon-mgzon-app.hf.space/"
-  }
-}
-</script>
-    @keyframes gradientShift {
-      0% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-      100% { background-position: 0% 50%; }
-    }
-    body {
-      background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
-      background-size: 400% 400%;
-      animation: gradientShift 15s ease infinite;
-      font-family: system-ui, sans-serif;
-    }
-    .glass {
-      background: rgba(255, 255, 255, 0.07);
-      border-radius: 1rem;
-      border: 1px solid rgba(255, 255, 255, 0.12);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-    }
-    .loading {
-      display: inline-block;
-      width: 1rem;
-      height: 1rem;
-      border: 2px solid currentColor;
-      border-top-color: transparent;
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-      margin-left: 0.5rem;
-    }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-    .glass:hover {
-      transform: scale(1.05);
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-      background: rgba(255, 255, 255, 0.15);
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign up with email, Google, or GitHub.">
+    <meta name="keywords" content="MGZon Chatbot, register, sign up, AI assistant, code generation, e-commerce, Mark Al-Asfar">
+    <meta name="author" content="Mark Al-Asfar">
+    <meta name="robots" content="index, follow">
+    <title>Register - MGZon Chatbot</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="apple-touch-icon" href="/static/images/mg.svg">
+    <link rel="manifest" href="/static/manifest.json">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="MGZon">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="theme-color" content="#00f0ff">
+    <meta property="og:title" content="Register - MGZon Chatbot">
+    <meta property="og:description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+    <meta property="og:image" content="/static/images/mg.svg">
+    <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/register">
+    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Register - MGZon Chatbot">
+    <meta name="twitter:description" content="Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+    <meta name="twitter:image" content="/static/images/mg.svg">
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebPage",
+      "name": "Register - MGZon Chatbot",
+      "url": "https://mgzon-mgzon-app.hf.space/register",
+      "description": "Register for MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign up with email, Google, or GitHub.",
+      "keywords": ["MGZon Chatbot", "register", "sign up", "AI chatbot", "code generation", "e-commerce", "Mark Al-Asfar", "MGZon", "MGZon AI", "E-commerce chatbot", "Python AI chatbot", "FastAPI integration"],
+      "isPartOf": {
+        "@type": "WebSite",
+        "name": "MGZon Chatbot",
+        "url": "https://mgzon-mgzon-app.hf.space/"
+      }
     }
-  </style>
+    </script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
+    <style>
+        :root {
+            --font-sans: 'Poppins', sans-serif;
+            --font-mono: 'Orbitron', monospace;
+            --radius: 1rem;
+        }
+
+        :root.dark {
+            --background: 220 70% 10%;
+            --foreground: 0 0% 95%;
+            --card: 220 70% 15%;
+            --card-foreground: 0 0% 90%;
+            --primary: 180 100% 50%;
+            --primary-foreground: 0 0% 0%;
+            --secondary: 260 80% 30%;
+            --secondary-foreground: 0 0% 95%;
+            --muted: 220 50% 20%;
+            --muted-foreground: 0 0% 70%;
+            --accent: 320 100% 60%;
+            --accent-foreground: 0 0% 95%;
+            --border: 220 50% 25%;
+        }
+
+        :root.light {
+            --background: 0 0% 100%;
+            --foreground: 220 70% 10%;
+            --card: 0 0% 95%;
+            --card-foreground: 220 70% 15%;
+            --primary: 180 100% 50%;
+            --primary-foreground: 0 0% 100%;
+            --secondary: 260 80% 40%;
+            --secondary-foreground: 0 0% 10%;
+            --muted: 0 0% 90%;
+            --muted-foreground: 0 0% 40%;
+            --accent: 320 100% 50%;
+            --accent-foreground: 0 0% 10%;
+            --border: 0 0% 80%;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-sans);
+            background: hsl(var(--background));
+            color: hsl(var(--foreground));
+            line-height: 1.6;
+            min-height: 100vh;
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        #particles-js {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+
+        .container {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+
+        .glass {
+            background: rgba(255, 255, 255, 0.07);
+            border-radius: var(--radius);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            transition: all 0.3s ease;
+        }
+
+        .glass:hover {
+            transform: scale(1.05);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+            background: rgba(255, 255, 255, 0.15);
+        }
+
+        .register-button {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            color: hsl(var(--primary-foreground));
+            border: none;
+            padding: 1rem 2rem;
+            border-radius: var(--radius);
+            font-family: var(--font-mono);
+            font-weight: 600;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .register-button:hover {
+            transform: translateY(-5px) scale(1.05);
+            box-shadow: 0 10px 20px hsl(var(--primary) / 0.5);
+        }
+
+        .register-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            transition: left 0.5s;
+        }
+
+        .register-button:hover::before {
+            left: 100%;
+        }
+
+        .input-field {
+            background: hsl(var(--muted));
+            border: 1px solid hsl(var(--border));
+            color: hsl(var(--foreground));
+            padding: 0.75rem;
+            border-radius: var(--radius);
+            font-family: var(--font-sans);
+            transition: all 0.3s ease;
+        }
+
+        .input-field:focus {
+            outline: none;
+            border-color: hsl(var(--primary));
+            box-shadow: 0 0 10px hsl(var(--primary) / 0.5);
+        }
+
+        .theme-toggle {
+            position: fixed;
+            top: 2rem;
+            right: 2rem;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
+            border: 1px solid hsl(var(--border));
+            color: hsl(var(--card-foreground));
+            padding: 1rem;
+            border-radius: var(--radius);
+            cursor: pointer;
+            font-size: 1.5rem;
+            transition: all 0.3s ease;
+            z-index: 1000;
+        }
+
+        .theme-toggle:hover {
+            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+            transform: scale(1.2) rotate(360deg);
+            box-shadow: 0 10px 20px hsl(var(--primary) / 0.5);
+        }
+
+        .error-message {
+            background: hsl(var(--muted));
+            border-left: 5px solid hsl(var(--accent));
+            padding: 1rem;
+            border-radius: var(--radius);
+            color: hsl(var(--accent-foreground));
+        }
+
+        .footer-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 15px hsl(var(--foreground) / 0.2);
+        }
+
+        .footer-card:hover {
+            transform: translateY(-10px) scale(1.05);
+            box-shadow: 0 15px 30px hsl(var(--primary) / 0.4);
+        }
+
+        .footer-card-icon {
+            transition: transform 0.3s ease;
+        }
+
+        .footer-card:hover .footer-card-icon {
+            transform: scale(1.2) rotate(5deg);
+        }
+
+        .wave-divider {
+            height: 120px;
+            background: transparent;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .wave-divider::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 200%;
+            height: 100%;
+            background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--background)));
+            border-radius: 50%;
+            animation: wave 10s ease-in-out infinite;
+        }
+
+        @keyframes wave {
+            0%, 100% { transform: translateX(-50%) translateY(70%); }
+            50% { transform: translateX(-50%) translateY(50%); }
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(40px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .footer {
+            text-align: center;
+        }
+
+        .footer p {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 0 1.5rem;
+            }
+        }
+    </style>
 </head>
-<body class="text-white min-h-screen flex flex-col justify-center items-center">
-  <div class="container max-w-md mx-auto text-center py-12">
-    <img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
-    <h1 class="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-emerald-400">
-      Register for MGZon Chatbot
-    </h1>
-    <div class="glass p-8">
-      <form id="registerForm" action="/auth/register" method="POST" class="flex flex-col gap-4">
-        <input type="text" name="username" id="username" placeholder="Username" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
-        <input type="email" name="email" id="email" placeholder="Email" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
-        <input type="password" name="password" id="password" placeholder="Password" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
-        <button type="submit" id="registerBtn" class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
-          Register <i class="bx bx-user-plus ml-2"></i>
-          <span id="spinner" class="loading hidden"></span>
-        </button>
-      </form>
-      <div class="flex justify-center gap-4 mt-4 flex-wrap">
-        <a href="/auth/google/authorize" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
-          Sign Up with Google <i class="bx bxl-google ml-2"></i>
-        </a>
-        <a href="/auth/github/authorize" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
-          Sign Up with GitHub <i class="bx bxl-github ml-2"></i>
-        </a>
-      </div>
-      <p class="mt-4">Already have an account? <a href="/login" class="text-emerald-300 hover:underline">Login</a></p>
-      <p id="errorMsg" class="text-red-500 mt-4 hidden"></p>
-    </div>
-  </div>
-  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8 w-full">
-    <div class="container max-w-6xl mx-auto text-center">
-      <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
-      <p class="mb-4">
-        Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
-        | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
-      </p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
-          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Email Us</h4>
-          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
-          <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Reach out to our support team for any inquiries or assistance.</p>
-            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
-          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Phone Support</h4>
-          <p>+1-800-123-4567</p>
-          <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Contact our support team via phone for immediate assistance.</p>
-            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
-          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Community</h4>
-          <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
-          <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Join our vibrant community to share ideas and collaborate.</p>
-            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
-          <i class="bx bx-code-alt text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">API Docs</h4>
-          <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
-          <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Explore our API documentation for seamless integration.</p>
-            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
-          <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">FAQ</h4>
-          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
-          <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Find answers to common questions in our FAQ section.</p>
-            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
+<body>
+    <div id="particles-js"></div>
+
+    <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
+
+    <div class="container flex flex-col justify-center items-center min-h-screen">
+        <img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6" style="animation: fadeIn 1s ease-out;">
+        <h1 class="text-4xl font-bold mb-4 font-[var(--font-mono)] bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--accent))] bg-clip-text text-transparent" style="animation: fadeIn 1s ease-out 0.3s both;">
+            Register for MGZon Chatbot
+        </h1>
+        <div class="glass p-8 max-w-md w-full" style="animation: fadeIn 1s ease-out 0.6s both;">
+            <form id="registerForm" action="/auth/register" method="POST" class="flex flex-col gap-4">
+                <input type="text" name="username" id="username" placeholder="Username" class="input-field" required>
+                <input type="email" name="email" id="email" placeholder="Email" class="input-field" required>
+                <input type="password" name="password" id="password" placeholder="Password" class="input-field" required>
+                <button type="submit" id="registerBtn" class="register-button">
+                    Register <i class="bx bx-user-plus ml-2"></i>
+                    <span id="spinner" class="loading hidden"></span>
+                </button>
+            </form>
+            <div class="flex justify-center gap-4 mt-4 flex-wrap">
+                <a href="/auth/google/authorize" class="register-button inline-flex items-center">
+                    Sign Up with Google <i class="bx bxl-google ml-2"></i>
+                </a>
+                <a href="/auth/github/authorize" class="register-button inline-flex items-center">
+                    Sign Up with GitHub <i class="bx bxl-github ml-2"></i>
+                </a>
+            </div>
+            <p class="mt-4 text-center">
+                Already have an account? <a href="/login" class="text-[hsl(var(--primary))] hover:underline">Login</a>
+            </p>
+            <p id="errorMsg" class="error-message mt-4 hidden"></p>
         </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
-          <i class="bx bx-book text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Documentation</h4>
-          <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
-          <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
-            <p>Access comprehensive documentation for MGZon Chatbot.</p>
-            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
-          </div>
-        </div>
-      </div>
-      <div class="flex justify-center gap-6 mt-6">
-        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
-        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
-        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
-      </div>
-      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
     </div>
-  </footer>
-  <script>
-    const registerForm = document.getElementById('registerForm');
-    const registerBtn = document.getElementById('registerBtn');
-    const spinner = document.getElementById('spinner');
-    const errorMsg = document.getElementById('errorMsg');
-    registerForm.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      spinner.classList.remove('hidden');
-      errorMsg.classList.add('hidden');
-      const formData = new FormData(registerForm);
-      try {
-        const response = await fetch('/auth/register', {
-          method: 'POST',
-          body: formData
+
+    <div class="wave-divider"></div>
+
+    <footer class="footer py-12">
+        <div class="container">
+            <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6" style="animation: fadeIn 1s ease-out;">
+            <p class="mb-4 text-center">
+                Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-[hsl(var(--primary))] hover:underline">Mark Al-Asfar</a>
+                | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-[hsl(var(--primary))] hover:underline">MGZon AI</a>
+            </p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('email')">
+                    <i class="bx bx-mail-send text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">Email Us</h4>
+                    <p><a href="mailto:support@mgzon.com" class="text-[hsl(var(--primary))] hover:underline">support@mgzon.com</a></p>
+                    <div id="email-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Reach out to our support team for any inquiries or assistance.</p>
+                        <button onclick="closeCardDetails('email')" class="register-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
+                    <i class="bx bx-phone text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">Phone Support</h4>
+                    <p>20 1212444617</p>
+                    <div id="phone-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Contact our support team via phone for immediate assistance.</p>
+                        <button onclick="closeCardDetails('phone')" class="register-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('community')">
+                    <i class="bx bx-group text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">Community</h4>
+                    <p><a href="https://hager-zon.vercel.app/community" class="text-[hsl(var(--primary))] hover:underline">Join us</a></p>
+                    <div id="community-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Join our vibrant community to share ideas and collaborate.</p>
+                        <button onclick="closeCardDetails('community')" class="register-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
+                    <i class="bx bx-code-alt text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">API Docs</h4>
+                    <p><a href="/docs" class="text-[hsl(var(--primary))] hover:underline">Explore Docs</a></p>
+                    <div id="api-docs-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Explore our API documentation for seamless integration.</p>
+                        <button onclick="closeCardDetails('api-docs')" class="register-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
+                    <i class="bx bx-help-circle text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">FAQ</h4>
+                    <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-[hsl(var(--primary))] hover:underline">Read FAQ</a></p>
+                    <div id="faq-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Find answers to common questions in our FAQ section.</p>
+                        <button onclick="closeCardDetails('faq')" class="register-button mt-2">Close</button>
+                    </div>
+                </div>
+                <div class="footer-card glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
+                    <i class="bx bx-book text-3xl text-[hsl(var(--primary))] mb-2 footer-card-icon"></i>
+                    <h4 class="font-semibold mb-1">Documentation</h4>
+                    <p><a href="/docs" class="text-[hsl(var(--primary))] hover:underline">Full Docs</a></p>
+                    <div id="docs-details" class="hidden mt-4 p-4 bg-[hsl(var(--muted))] rounded-lg">
+                        <p>Access comprehensive documentation for MGZon Chatbot.</p>
+                        <button onclick="closeCardDetails('docs')" class="register-button mt-2">Close</button>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-center gap-6 mt-6">
+                <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-[hsl(var(--foreground))] hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-github"></i></a>
+                <a href="https://x.com/MGZon" class="text-2xl text-[hsl(var(--foreground))] hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-twitter"></i></a>
+                <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-[hsl(var(--foreground))] hover:text-[hsl(var(--primary))] transition"><i class="bx bxl-facebook"></i></a>
+            </div>
+            <p class="mt-6 text-center">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+        </div>
+        <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-gradient-to-r from-[hsl(var(--primary))] to-[hsl(var(--accent))] text-[hsl(var(--primary-foreground))] px-6 py-3 rounded-full shadow-lg z-50">
+            📲 Install MG Chat
+        </button>
+    </footer>
+
+    <script>
+        // Particles.js initialization
+        particlesJS('particles-js', {
+            particles: {
+                number: { value: 80, density: { enable: true, value_area: 800 } },
+                color: { value: ['#00f0ff', '#ff007a', '#6b21a8'] },
+                shape: { type: 'circle' },
+                opacity: { value: 0.5, random: true },
+                size: { value: 3, random: true },
+                line_linked: { enable: true, distance: 150, color: '#00f0ff', opacity: 0.4, width: 1 },
+                move: { enable: true, speed: 3, direction: 'none', random: true }
+            },
+            interactivity: {
+                detect_on: 'canvas',
+                events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' } },
+                modes: { repulse: { distance: 100 }, push: { particles_nb: 4 } }
+            },
+            retina_detect: true
         });
-        spinner.classList.add('hidden');
-        if (response.ok) {
-          window.location.href = '/chat';
-        } else {
-          const error = await response.json();
-          errorMsg.textContent = error.detail || 'Registration failed. Please try again.';
-          errorMsg.classList.remove('hidden');
-        }
-      } catch (error) {
-        spinner.classList.add('hidden');
-        errorMsg.textContent = 'An error occurred. Please try again.';
-        errorMsg.classList.remove('hidden');
-      }
-    });
-    function showCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.remove('hidden');
-    }
-    function closeCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.add('hidden');
-    }
+
+        function toggleTheme() {
+            const html = document.documentElement;
+            const button = document.querySelector('.theme-toggle');
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                html.classList.add('light');
+                button.textContent = '☀️';
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.remove('light');
+                html.classList.add('dark');
+                button.textContent = '🌙';
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+
+        // Load saved theme preference or system preference
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            document.documentElement.classList.remove('dark', 'light');
+            document.documentElement.classList.add(savedTheme);
+            document.querySelector('.theme-toggle').textContent = savedTheme === 'dark' ? '🌙' : '☀️';
+        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+            document.documentElement.classList.remove('dark');
+            document.documentElement.classList.add('light');
+            document.querySelector('.theme-toggle').textContent = '☀️';
+            localStorage.setItem('theme', 'light');
+        }
+
+        // Handle form submission
+        const registerForm = document.getElementById('registerForm');
+        const registerBtn = document.getElementById('registerBtn');
+        const spinner = document.getElementById('spinner');
+        const errorMsg = document.getElementById('errorMsg');
+
+        registerForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            console.log('Register form submitted');
+            spinner.classList.remove('hidden');
+            errorMsg.classList.add('hidden');
+            const formData = new FormData(registerForm);
+            try {
+                const response = await fetch('/auth/register', {
+                    method: 'POST',
+                    body: formData
+                });
+                spinner.classList.add('hidden');
+                if (response.ok) {
+                    console.log('Registration successful, redirecting to /chat');
+                    window.location.href = '/chat';
+                } else {
+                    const error = await response.json();
+                    errorMsg.textContent = error.detail || 'Registration failed. Please try again.';
+                    errorMsg.classList.remove('hidden');
+                    console.error('Registration failed:', error);
+                }
+            } catch (error) {
+                spinner.classList.add('hidden');
+                errorMsg.textContent = 'An error occurred. Please try again.';
+                errorMsg.classList.remove('hidden');
+                console.error('Error during registration:', error);
+            }
+        });
+
+        // Handle card details toggle
+        function showCardDetails(cardId) {
+            console.log('Showing card details:', cardId);
+            document.getElementById(`${cardId}-details`).classList.remove('hidden');
+        }
+
+        function closeCardDetails(cardId) {
+            console.log('Closing card details:', cardId);
+            document.getElementById(`${cardId}-details`).classList.add('hidden');
+        }
+
+        // Service Worker for PWA
         if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/static/js/sw.js')
-        .then(function(reg) {
-          console.log('✅ Service Worker Registered', reg);
-        }).catch(function(err) {
-          console.error('❌ Service Worker registration failed', err);
+            console.log('Registering service worker');
+            navigator.serviceWorker.register('/static/js/sw.js')
+                .then(reg => console.log('✅ Service Worker Registered', reg))
+                .catch(err => console.error('❌ Service Worker registration failed', err));
+        }
+
+        // Handle PWA install prompt
+        let deferredPrompt;
+        window.addEventListener('beforeinstallprompt', (e) => {
+            console.log('Before install prompt triggered');
+            e.preventDefault();
+            deferredPrompt = e;
+            const installBtn = document.getElementById('installAppBtn');
+            if (installBtn) {
+                installBtn.style.display = 'block';
+                installBtn.addEventListener('click', () => {
+                    console.log('Install button clicked');
+                    deferredPrompt.prompt();
+                    deferredPrompt.userChoice.then(choice => {
+                        if (choice.outcome === 'accepted') {
+                            console.log('✅ User accepted the install prompt');
+                        } else {
+                            console.log('❌ User dismissed the install prompt');
+                        }
+                        deferredPrompt = null;
+                    });
+                });
+            }
         });
-    }
-  </script>
+    </script>
 </body>
 </html>

test_models.py

@@ -0,0 +1,99 @@
+from transformers import pipeline
+import whisper
+import time
+from gtts import gTTS
+import os
+
+# اختبار 1: DistilGPT2 (نصي)
+def test_distilgpt2():
+    print("\n=== اختبار DistilGPT2 ===")
+    start_time = time.time()
+    generator = pipeline('text-generation', model='distilgpt2')
+    
+    # اختبار بالإنجليزية
+    prompt_en = "What's the capital of France?"
+    result_en = generator(
+        prompt_en,
+        max_new_tokens=50,
+        truncation=True,
+        do_sample=True,
+        top_p=0.9,
+        top_k=50,  # إضافة top_k لتحسين التنوع
+        temperature=0.7  # لتقليل العشوائية
+    )
+    print(f"الرد (إنجليزي): {result_en[0]['generated_text']}")
+    
+    # اختبار بالعربية
+    prompt_ar = "ما عاصمة فرنسا؟"
+    result_ar = generator(
+        prompt_ar,
+        max_new_tokens=50,
+        truncation=True,
+        do_sample=True,
+        top_p=0.9,
+        top_k=50,
+        temperature=0.7
+    )
+    print(f"الرد (عربي): {result_ar[0]['generated_text']}")
+    
+    print(f"الوقت: {time.time() - start_time:.2f} ثانية")
+
+# اختبار 2: Qwen2-0.5B-Instruct (نصي، دعم أفضل للعربية)
+def test_qwen2():
+    print("\n=== اختبار Qwen2-0.5B-Instruct ===")
+    start_time = time.time()
+    generator = pipeline('text-generation', model='Qwen/Qwen2-0.5B-Instruct')
+    
+    # اختبار بالإنجليزية
+    prompt_en = "What's the capital of France?"
+    result_en = generator(
+        prompt_en,
+        max_new_tokens=50,
+        truncation=True,
+        do_sample=True,
+        top_p=0.9,
+        top_k=50,
+        temperature=0.7
+    )
+    print(f"الرد (إنجليزي): {result_en[0]['generated_text']}")
+    
+    # اختبار بالعربية
+    prompt_ar = "ما عاصمة فرنسا؟"
+    result_ar = generator(
+        prompt_ar,
+        max_new_tokens=50,
+        truncation=True,
+        do_sample=True,
+        top_p=0.9,
+        top_k=50,
+        temperature=0.7
+    )
+    print(f"الرد (عربي): {result_ar[0]['generated_text']}")
+    
+    print(f"الوقت: {time.time() - start_time:.2f} ثانية")
+
+# اختبار 3: Whisper-tiny (صوتي)
+def test_whisper_tiny():
+    print("\n=== اختبار Whisper-tiny ===")
+    start_time = time.time()
+    
+    # إنشاء ملف صوتي مؤقت باستخدام gTTS
+    text = "Hello world, this is a test audio."
+    tts = gTTS(text=text, lang='en')
+    audio_file = "test_audio.wav"
+    tts.save(audio_file)
+    
+    # تحميل واختبار Whisper-tiny
+    model = whisper.load_model("tiny")
+    result = model.transcribe(audio_file, fp16=False)
+    print(f"النص المترجم: {result['text']}")
+    print(f"الوقت: {time.time() - start_time:.2f} ثانية")
+    
+    # تنظيف الملف المؤقت
+    if os.path.exists(audio_file):
+        os.remove(audio_file)
+
+if __name__ == "__main__":
+    test_distilgpt2()
+    test_qwen2()
+    test_whisper_tiny()