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

main.py

@@ -13,7 +13,7 @@ from starlette.middleware.sessions import SessionMiddleware
 from fastapi.openapi.docs import get_swagger_ui_html
 from fastapi.middleware.cors import CORSMiddleware
 from api.endpoints import router as api_router
-from api.auth import fastapi_users, auth_backend, current_active_user, get_auth_router  # أزل أي ذكر لـ google_oauth_router, github_oauth_router
+from api.auth import fastapi_users, auth_backend, current_active_user, get_auth_router 
 from api.database import User, Conversation, get_db, init_db
 from api.models import UserRead, UserCreate, UserUpdate
 from motor.motor_asyncio import AsyncIOMotorClient
@@ -29,6 +29,8 @@ from datetime import datetime
 from httpx_oauth.exceptions import GetIdEmailError
 import re
 import anyio
+import requests  
+from bs4 import BeautifulSoup 
 
 # Setup logging
 logging.basicConfig(level=logging.DEBUG)
@@ -93,6 +95,25 @@ QUEUE_SIZE = int(os.getenv("QUEUE_SIZE", 80))
 CONCURRENCY_LIMIT = int(os.getenv("CONCURRENCY_LIMIT", 20))
 logger.debug(f"Application settings: QUEUE_SIZE={QUEUE_SIZE}, CONCURRENCY_LIMIT={CONCURRENCY_LIMIT}")
 
+# SearXNG instances 
+searx_instances = [
+    "https://search.ononoki.org/",      # JP
+    "https://search.mdosch.de/",        # DE
+    "https://searx.prvcy.eu/",          # EU
+    "https://searxng.biz/",             # US
+    "https://searx.tuxcloud.net/",      # DE
+    "https://search.bus-hit.me/",       # RU
+    "https://searx.tiekoetter.com/",    # DE
+    "https://searx.be/",                # BE
+    "https://searx.me/",                # NL
+    "https://searx.eu/",                # EU
+    "https://kheru.lavabit.com/searx/", # US
+    "https://search.disroot.org/",      # NL
+    "https://searx.ninja/",             # US
+    "https://searx.mastodontech.de/",   # DE
+    "https://searx.ablatednation.com/"  # US
+]
+
 # Initialize FastAPI app
 @asynccontextmanager
 async def lifespan(app: FastAPI):
@@ -105,8 +126,8 @@ async def lifespan(app: FastAPI):
 app = FastAPI(
     title="MGZon Chatbot API",
     lifespan=lifespan,
-    docs_url=None,  # تعطيل Swagger UI الافتراضي على /docs
-    redoc_url=None   # تعطيل ReDoc الافتراضي لو مش عايزه
+    docs_url=None, 
+    redoc_url=None 
 )
 
 # Add SessionMiddleware
@@ -123,25 +144,26 @@ app.add_middleware(
     CORSMiddleware,
     allow_origins=[
         "https://mgzon-mgzon-app.hf.space",
+        "https://mgzonai.vercel.app"
         "http://localhost:7860",
         "http://localhost:8000",
-        "http://localhost",  # إضافة لدعم Capacitor على Android/iOS
-        "https://localhost",  # إضافة لدعم HTTPS المحلي
-        "capacitor://localhost",  # دعم Capacitor native apps
-        "file://",  # دعم الملفات المحلية في offline mode
+        "http://localhost",
+        "https://localhost",
+        "capacitor://localhost",
+        "file://",
         "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=["*"],  # سمح بكل الـ methods
-    allow_headers=["*"],  # سمح بكل الـ headers
+    allow_methods=["*"],
+    allow_headers=["*"],
 )
 logger.debug("CORS middleware configured with allowed origins")
 
 # Include routers
 app.include_router(api_router)
-get_auth_router(app)  # يضيف الـ custom OAuth endpoints + JWT + register
+get_auth_router(app)
 logger.debug("API and auth routers included")
 
 # Add logout endpoint
@@ -293,9 +315,13 @@ async def about(request: Request, user: User = Depends(current_active_user)):
     return templates.TemplateResponse("about.html", {"request": request, "user": user})
 
 @app.get("/profile", response_class=HTMLResponse)
-async def about(request: Request, user: User = Depends(current_active_user)):
-    logger.debug(f"About page accessed by user: {user.email if user else 'Anonymous'}")
+async def profile(request: Request, user: User = Depends(current_active_user)):
+    logger.debug(f"Profile page accessed by user: {user.email if user else 'Anonymous'}")
     return templates.TemplateResponse("profile.html", {"request": request, "user": user})
+    
+@app.get("/download", response_class=HTMLResponse)
+async def download_page(request: Request):
+    return templates.TemplateResponse("download.html", {"request": request})
 
 # Serve static files
 @app.get("/static/{path:path}")
@@ -363,13 +389,13 @@ async def sitemap():
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/chat</loc>\n'
     xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>daily</changefreq>\n'
-    xml += '    <priority>0.8</priority>\n'
+    xml += '    <priority>0.9</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/about</loc>\n'
     xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>weekly</changefreq>\n'
-    xml += '    <priority>0.7</priority>\n'
+    xml += '    <priority>0.9</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/login</loc>\n'
@@ -390,12 +416,18 @@ async def sitemap():
     xml += '    <priority>0.9</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
-    xml += '    <loc>https://mgzon-mgzon-app.hf.space/profile</loc>\n'
+    xml += '    <loc>https://mgzon-mgzon-app.hf.space/download</loc>\n'
     xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>weekly</changefreq>\n'
     xml += '    <priority>0.9</priority>\n'
     xml += '  </url>\n'
     xml += '  <url>\n'
+    xml += '    <loc>https://mgzon-mgzon-app.hf.space/profile</loc>\n'
+    xml += f'    <lastmod>{current_date}</lastmod>\n'
+    xml += '    <changefreq>weekly</changefreq>\n'
+    xml += '    <priority>1.0</priority>\n'
+    xml += '  </url>\n'
+    xml += '  <url>\n'
     xml += '    <loc>https://mgzon-mgzon-app.hf.space/blog</loc>\n'
     xml += f'    <lastmod>{current_date}</lastmod>\n'
     xml += '    <changefreq>daily</changefreq>\n'
@@ -423,6 +455,55 @@ async def health_check():
     logger.debug("Health check endpoint accessed")
     return "OK"
 
+
+@app.get("/search")
+async def search_web(q: str):
+    """
+    يبحث في الويب باستخدام SearXNG instances متعددة ويجلب محتوى أعمق من الصفحات.
+    """
+    try:
+        for instance in searx_instances:
+            try:
+                url = f"{instance}search?format=json&q={requests.utils.quote(q)}&categories=general"
+                response = requests.get(url, timeout=10)
+                response.raise_for_status()
+                data = response.json()
+                results = data.get("results", [])
+                if not results:
+                    continue
+                
+                search_results = []
+                for i, item in enumerate(results[:7]):  # More results (7 instead of 5)
+                    title = item.get("title", "No title")
+                    content = item.get("content", "No content")
+                    link = item.get("url", "No link")
+                    # Fetch deeper page content
+                    try:
+                        page_response = requests.get(link, timeout=7, headers={'User-Agent': 'Mozilla/5.0'})
+                        page_response.raise_for_status()
+                        soup = BeautifulSoup(page_response.text, "html.parser")
+                        paragraphs = soup.find_all("p")
+                        # Extract more paragraphs for depth
+                        page_content = " ".join([p.get_text(strip=True) for p in paragraphs[:15]])  # More paras
+                    except Exception as e:
+                        logger.warning(f"Failed to fetch page content for {link}: {e}")
+                        page_content = content
+                    search_results.append({
+                        "title": title,
+                        "link": link,
+                        "content": page_content[:3000]  # Deeper limit
+                    })
+                if search_results:  # Return if any results
+                    return {"success": True, "results": search_results}
+            except Exception as e:
+                logger.warning(f"Instance {instance} failed: {e}")
+                continue
+        return {"success": False, "message": "No web results found."}
+    except Exception as e:
+        logger.exception("Web search failed")
+        raise HTTPException(status_code=500, detail=f"Web search error: {str(e)}")
+
+
 if __name__ == "__main__":
     logger.info(f"Starting uvicorn server on port {os.getenv('PORT', 7860)}")
     uvicorn.run(app, host="0.0.0.0", port=int(os.getenv("PORT", 7860)))

static/js/about.js

@@ -0,0 +1,559 @@
+// about.js
+
+// Translations - Updated with project & AI details
+const translations = {
+  en: {
+    title: "About MGZon AI – Adaptive Horizons",
+    heroTitle: "About MGZon AI",
+    heroDesc: "An AI-powered platform revolutionizing e-commerce and code generation – Empowering creators and businesses with adaptive intelligence.",
+    arHint: "Tap for AR View",
+    storyTitle: "Our Journey",
+    story1Title: "2023: Ignition in Alexandria",
+    story1Desc: "MGZon AI sparks to life in Alexandria, Egypt, leveraging DeepSeek & FastAPI to launch the core chatbot – Empowering developers and e-commerce innovators globally.",
+    story2Title: "2024: Global Expansion",
+    story2Desc: "Seamless integrations with warehouses in USA, Canada, China; 5G/6G tech accelerates e-commerce automation and code generation for thousands.",
+    story3Title: "2025-2026: Quantum Evolution",
+    story3Desc: "Recognized by TechCrunch as MENA's AI leader; Pushing ethical AI boundaries in commerce and coding for a smarter future.",
+    visionTitle: "Our Vision",
+    visionDesc: "Adaptive Intelligence for Tomorrow",
+    visionDetails: "MGZon AI fuses cutting-edge tech with real-world utility, democratizing AI for seamless e-commerce and effortless code creation.",
+    visionBtn: "Explore Features",
+    projectTitle: "Project & AI Insights",
+    aiTechTitle: "Core AI Technologies",
+    projectHowTitle: "How It Works",
+    projectHowDesc: "AI analyzes user queries to generate code snippets or optimize e-commerce flows – Ethical, adaptive, and future-proof.",
+    teamTitle: "Core Constellation",
+    team1Name: "Sarah Dayan",
+    team1Desc: "Lead AI Architect – Sculpting ML & chatbot symphonies for MGZon.",
+    team2Name: "Leonardo Cuco",
+    team2Desc: "E-Commerce Oracle – Orchestrating digital commerce evolutions for MGZon.",
+    achievementsTitle: "Milestones",
+    ach1Title: "Global Reach",
+    ach1Desc: "Serving 10K+ users across 50 countries, powered by AI-driven constellations.",
+    ach2Title: "Industry Acclaim",
+    ach2Desc: "Featured as TechCrunch's top MENA AI innovator – Leading 2024's breakthroughs.",
+    missionTitle: "Our North Star",
+    missionDesc: "Democratizing AI for creators & enterprises – Streamlining codecraft and amplifying e-commerce realms with ethical innovation and ingenuity.",
+    footerCrafted: "Powered by MGZon AI | Innovating in the MENA region",
+    contact1Title: "Nexus Mail",
+    contact1Details: "Transmit queries into the void – Responses warp in swiftly.",
+    contact2Title: "Voice Link",
+    contact2Details: "Instant quantum sync for urgent transmissions.",
+    contact3Title: "Collective",
+    contact3Btn: "Assemble",
+    contact3Details: "Converge in the hive – Ideas ignite, collaborations supernova.",
+    contact4Title: "Codex",
+    contact4Btn: "Decrypt",
+    contact4Details: "Unlock the arcane APIs – Seamless fusion awaits.",
+    collapseBtn: "Collapse",
+    copyright: "© 2026 MGZon AI. Eternal in the codeverse.",
+    searchPlaceholder: "Search here... (e.g., AI trends 2026)",
+    voiceTitle: "Press to speak",
+    themeTitle: "Toggle Theme",
+    chatPlaceholder: "Type your message...",
+    sendBtn: "Send",
+    voiceStatus: "Listening...",
+    navLogo: "MGZon AI",
+    navHome: "Home",
+    navAbout: "About",
+    navContact: "Contact",
+    you: "You",
+    error: "Hmm, I couldn't process that. Try asking about AI, team, or search something!",
+    searchPrefix: "Here's what I found on the web:",
+    searchError: "Sorry, search failed right now – try rephrasing or check your connection!",
+    voicePrompt: "Voice enabled! Speak now."
+  },
+  ar: {
+    title: "عن MGZon AI – آفاق متكيفة",
+    heroTitle: "عن MGZon AI",
+    heroDesc: "منصة مدعومة بالذكاء الاصطناعي ثورية في التجارة الإلكترونية وتوليد الكود – تمكين الخالقين والأعمال بالذكاء المتكيف.",
+    arHint: "اضغط لعرض AR",
+    storyTitle: "رحلتنا",
+    story1Title: "2023: الإشعال في الإسكندرية",
+    story1Desc: "MGZon AI يشتعل بالحياة في الإسكندرية، مصر، مستفيدًا من DeepSeek وFastAPI لإطلاق الشاتبوت الأساسي – تمكين المطورين ومبتكري التجارة الإلكترونية عالميًا.",
+    story2Title: "2024: التوسع العالمي",
+    story2Desc: "تكاملات سلسة مع مستودعات في الولايات المتحدة، كندا، الصين؛ تقنية 5G/6G تسرع أتمتة التجارة الإلكترونية وتوليد الكود لآلاف.",
+    story3Title: "2025-2026: التطور الكمي",
+    story3Desc: "معترف بها من TechCrunch كقائد AI في الشرق الأوسط؛ دفع حدود AI الأخلاقي في التجارة والكود لمستقبل أذكى.",
+    visionTitle: "رؤيتنا",
+    visionDesc: "ذكاء متكيف للغد",
+    visionDetails: "MGZon AI يدمج التقنية المتقدمة مع المنفعة الواقعية، ديمقراطية AI لتجارة إلكترونية سلسة وإنشاء كود سهل.",
+    visionBtn: "استكشف الميزات",
+    projectTitle: "رؤى المشروع والذكاء الاصطناعي",
+    aiTechTitle: "التقنيات الأساسية للذكاء الاصطناعي",
+    projectHowTitle: "كيف يعمل",
+    projectHowDesc: "الذكاء الاصطناعي يحلل استفسارات المستخدم لتوليد مقتطفات كود أو تحسين تدفقات التجارة الإلكترونية – أخلاقي، متكيف، ومستعد للمستقبل.",
+    teamTitle: "الكوكبة الأساسية",
+    team1Name: "سارة دايان",
+    team1Desc: "مهندس AI رئيسي – نحت سيمفونيات ML وchatbot لـ MGZon.",
+    team2Name: "ليوناردو كوكو",
+    team2Desc: "خبير التجارة الإلكترونية – تنسيق تطورات التجارة الرقمية لـ MGZon.",
+    achievementsTitle: "المعالم",
+    ach1Title: "الوصول العالمي",
+    ach1Desc: "خدمة 10K+ مستخدمين عبر 50 دولة، مدعومة بكوكبات مدفوعة بالذكاء الاصطناعي.",
+    ach2Title: "الإعجاب الصناعي",
+    ach2Desc: "مميزة كأفضل مبتكر AI في الشرق الأوسط من TechCrunch – قائدة اختراقات 2024.",
+    missionTitle: "نجمنا الشمالي",
+    missionDesc: "ديمقراطية AI للخالقين والمؤسسات – تبسيط صناعة الكود وتضخيم عوالم التجارة الإلكترونية بالابتكار الأخلاقي والإبداع.",
+    footerCrafted: "مدعوم بـ MGZon AI | الابتكار في منطقة الشرق الأوسط",
+    contact1Title: "بريد النيكسوس",
+    contact1Details: "أرسل استفساراتك إلى الفراغ – الردود تتسارع بسرعة الضوء.",
+    contact2Title: "رابط الصوت",
+    contact2Details: "مزامنة كمية فورية للنقلات العاجلة.",
+    contact3Title: "الجماعة",
+    contact3Btn: "اجتمع",
+    contact3Details: "اجتمع في النخلة – الأفكار تشعل، التعاونات سوبرنوفا.",
+    contact4Title: "الكوديكس",
+    contact4Btn: "فك الشفرة",
+    contact4Details: "افتح APIs الغامضة – اندماج سلس ينتظر.",
+    collapseBtn: "طي",
+    copyright: "© 2026 MGZon AI. أبدي في عالم الكود.",
+    searchPlaceholder: "ابحث هنا... (مثال: اتجاهات AI 2026)",
+    voiceTitle: "اضغط للكلام",
+    themeTitle: "تبديل الثيم",
+    chatPlaceholder: "اكتب رسالتك...",
+    sendBtn: "إرسال",
+    voiceStatus: "يستمع...",
+    navLogo: "MGZon AI",
+    navHome: "الرئيسية",
+    navAbout: "عننا",
+    navContact: "اتصل",
+    you: "أنت",
+    error: "همم، مش قدرت أفهم ده. جرب تسأل عن AI أو الفريق أو ابحث في حاجة!",
+    searchPrefix: "ده اللي لقيته على الويب:",
+    searchError: "آسف، البحث فشل دلوقتي – جرب تعيد الصياغة أو تأكد من الإنترنت!",
+    voicePrompt: "الصوت مفعل! اتكلم دلوقتي."
+  },
+  fr: {
+    title: "À propos de MGZon AI – Horizons Adaptatifs",
+    heroTitle: "À propos de MGZon AI",
+    heroDesc: "Plateforme alimentée par l'IA révolutionnant le e-commerce et la génération de code – Empowerant les créateurs et entreprises avec une intelligence adaptative.",
+    arHint: "Appuyez pour la vue AR",
+    storyTitle: "Notre Voyage",
+    story1Title: "2023: Allumage à Alexandrie",
+    story1Desc: "MGZon AI s'allume à Alexandrie, Égypte, exploitant DeepSeek & FastAPI pour lancer le chatbot central – Empowerant les développeurs et innovateurs e-commerce globalement.",
+    story2Title: "2024: Expansion Globale",
+    story2Desc: "Intégrations fluides avec des entrepôts aux USA, Canada, Chine ; La tech 5G/6G accélère l'automatisation e-commerce et la génération de code pour des milliers.",
+    story3Title: "2025-2026: Évolution Quantique",
+    story3Desc: "Reconnue par TechCrunch comme leader AI MENA ; Poussant les frontières éthiques de l'AI en commerce et codage pour un avenir plus intelligent.",
+    visionTitle: "Notre Vision",
+    visionDesc: "Intelligence Adaptative pour Demain",
+    visionDetails: "MGZon AI fusionne tech de pointe avec utilité réelle, démocratisant l'AI pour e-commerce fluide et création de code sans effort.",
+    visionBtn: "Explorer les Fonctionnalités",
+    projectTitle: "Perspectives du Projet & IA",
+    aiTechTitle: "Technologies IA de Base",
+    projectHowTitle: "Comment Ça Marche",
+    projectHowDesc: "L'IA analyse les requêtes des utilisateurs pour générer des extraits de code ou optimiser les flux e-commerce – Éthique, adaptatif et prêt pour l'avenir.",
+    teamTitle: "Constellation Centrale",
+    team1Name: "Sarah Dayan",
+    team1Desc: "Architecte AI Principal – Sculptant symphonies ML & chatbot pour MGZon.",
+    team2Name: "Leonardo Cuco",
+    team2Desc: "Oracle E-Commerce – Orchestrant évolutions commerce numérique pour MGZon.",
+    achievementsTitle: "Jalons",
+    ach1Title: "Portée Globale",
+    ach1Desc: "Servant 10K+ utilisateurs dans 50 pays, alimenté par constellations AI.",
+    ach2Title: "Acclamation Industrielle",
+    ach2Desc: "Mise en avant comme top innovateur AI MENA par TechCrunch – Menant les percées 2024.",
+    missionTitle: "Notre Étoile Polaire",
+    missionDesc: "Démocratiser l'AI pour créateurs & entreprises – Rationalisant l'art du code et amplifiant les royaumes e-commerce avec innovation éthique et ingéniosité.",
+    footerCrafted: "Alimenté par MGZon AI | Innovant dans la région MENA",
+    contact1Title: "Courrier Nexus",
+    contact1Details: "Transmettez les requêtes dans le vide – Les réponses se déforment rapidement.",
+    contact2Title: "Lien Vocal",
+    contact2Details: "Synchronisation quantique instantanée pour transmissions urgentes.",
+    contact3Title: "Collectif",
+    contact3Btn: "Assembler",
+    contact3Details: "Converger dans la ruche – Idées s'allument, collaborations supernova.",
+    contact4Title: "Codex",
+    contact4Btn: "Décrypter",
+    contact4Details: "Déverrouillez les APIs arcanes – Fusion seamless attend.",
+    collapseBtn: "Réduire",
+    copyright: "© 2026 MGZon AI. Éternel dans le codeverse.",
+    searchPlaceholder: "Rechercher ici... (ex: tendances AI 2026)",
+    voiceTitle: "Appuyez pour parler",
+    themeTitle: "Changer le thème",
+    chatPlaceholder: "Tapez votre message...",
+    sendBtn: "Envoyer",
+    voiceStatus: "Écoute...",
+    navLogo: "MGZon AI",
+    navHome: "Accueil",
+    navAbout: "À propos",
+    navContact: "Contact",
+    you: "Vous",
+    error: "Hmm, je n'ai pas pu traiter cela. Essayez de demander sur l'AI, l'équipe ou recherchez quelque chose !",
+    searchPrefix: "Voici ce que j'ai trouvé sur le web:",
+    searchError: "Désolé, la recherche a échoué pour le moment – essayez de reformuler ou vérifiez votre connexion !",
+    voicePrompt: "Voix activée ! Parlez maintenant."
+  },
+  de: {
+    title: "Über MGZon AI – Adaptive Horizonte",
+    heroTitle: "Über MGZon AI",
+    heroDesc: "AI-gestützte Plattform, die E-Commerce und Code-Generierung revolutioniert – Ermächtigt Schöpfer und Unternehmen mit adaptiver Intelligenz.",
+    arHint: "Tippen Sie für AR-Ansicht",
+    storyTitle: "Unsere Reise",
+    story1Title: "2023: Zündung in Alexandria",
+    story1Desc: "MGZon AI entzündet sich in Alexandria, Ägypten, nutzt DeepSeek & FastAPI, um den Kern-Chatbot zu starten – Ermächtigt Entwickler und E-Commerce-Innovatoren global.",
+    story2Title: "2024: Globale Expansion",
+    story2Desc: "Nahtlose Integrationen mit Lagern in USA, Kanada, China; 5G/6G-Tech beschleunigt E-Commerce-Automatisierung und Code-Generierung für Tausende.",
+    story3Title: "2025-2026: Quantenevolution",
+    story3Desc: "Von TechCrunch als MENA AI-Führer anerkannt; Drängt ethische AI-Grenzen in Handel und Codierung für eine intelligentere Zukunft.",
+    visionTitle: "Unsere Vision",
+    visionDesc: "Adaptive Intelligenz für Morgen",
+    visionDetails: "MGZon AI fusioniert Spitzen-Tech mit realer Nützlichkeit, demokratisiert AI für nahtloses E-Commerce und mühelose Code-Erstellung.",
+    visionBtn: "Funktionen Erkunden",
+    projectTitle: "Projekt- & KI-Einblicke",
+    aiTechTitle: "Kern-KI-Technologien",
+    projectHowTitle: "Wie Es Funktioniert",
+    projectHowDesc: "KI analysiert Nutzeranfragen, um Codeschnipsel zu generieren oder E-Commerce-Flüsse zu optimieren – Ethisch, adaptiv und zukunftssicher.",
+    teamTitle: "Kernkonstellation",
+    team1Name: "Sarah Dayan",
+    team1Desc: "Lead AI-Architekt – Modelliert ML & Chatbot-Symphonien für MGZon.",
+    team2Name: "Leonardo Cuco",
+    team2Desc: "E-Commerce-Oracle – Dirigiert digitale Commerce-Evolutionen für MGZon.",
+    achievementsTitle: "Meilensteine",
+    ach1Title: "Globale Reichweite",
+    ach1Desc: "Bedient 10K+ Nutzer in 50 Ländern, angetrieben von AI-Konstellationen.",
+    ach2Title: "Branchen-Anerkennung",
+    ach2Desc: "Vorgestellt als Top MENA AI-Innovator von TechCrunch – Führend 2024s Durchbrüche.",
+    missionTitle: "Unser Nordstern",
+    missionDesc: "Demokratisierung von AI für Schöpfer & Unternehmen – Vereinfacht Codekunst und verstärkt E-Commerce-Reiche mit ethischer Innovation und Erfindungsgabe.",
+    footerCrafted: "Angetrieben von MGZon AI | Innovierend in der MENA-Region",
+    contact1Title: "Nexus-Mail",
+    contact1Details: "Übermitteln Sie Anfragen ins Leere – Antworten verbiegen sich schnell.",
+    contact2Title: "Sprachlink",
+    contact2Details: "Sofortige Quantensynchronisation für dringende Übertragungen.",
+    contact3Title: "Kollektiv",
+    contact3Btn: "Versammeln",
+    contact3Details: "Konvergieren im Stock – Ideen entzünden, Kollaborationen Supernova.",
+    contact4Title: "Codex",
+    contact4Btn: "Entschlüsseln",
+    contact4Details: "Entsperren Sie die arkane APIs – Nahtlose Fusion wartet.",
+    collapseBtn: "Zusammenklappen",
+    copyright: "© 2026 MGZon AI. Ewig im Codeversum.",
+    searchPlaceholder: "Suchen Sie hier... (z.B. AI-Trends 2026)",
+    voiceTitle: "Drücken zum Sprechen",
+    themeTitle: "Thema wechseln",
+    chatPlaceholder: "Geben Sie Ihre Nachricht ein...",
+    sendBtn: "Senden",
+    voiceStatus: "Hört zu...",
+    navLogo: "MGZon AI",
+    navHome: "Home",
+    navAbout: "Über uns",
+    navContact: "Kontakt",
+    you: "Sie",
+    error: "Hmm, ich konnte das nicht verarbeiten. Versuchen Sie, nach AI, Team oder etwas zu suchen!",
+    searchPrefix: "Hier ist, was ich im Web gefunden habe:",
+    searchError: "Entschuldigung, die Suche ist gerade fehlgeschlagen – versuchen Sie, umzuformulieren oder überprüfen Sie Ihre Verbindung!",
+    voicePrompt: "Sprache aktiviert! Sprechen Sie jetzt."
+  }
+};
+
+// Language and Theme Management
+let currentLang = navigator.language.split('-')[0] || 'en';
+if (!translations[currentLang]) currentLang = 'en';
+
+function switchLanguage(lang) {
+  currentLang = lang;
+  document.querySelectorAll('[data-translate]').forEach(el => {
+    const key = el.dataset.translate;
+    if (translations[lang][key]) {
+      el.textContent = translations[lang][key];
+    }
+  });
+  document.querySelectorAll('[data-translate-placeholder]').forEach(el => {
+    const key = el.dataset.translatePlaceholder;
+    if (translations[lang][key]) {
+      el.placeholder = translations[lang][key];
+    }
+  });
+  document.querySelectorAll('[data-title-translate]').forEach(el => {
+    const key = el.dataset.titleTranslate;
+    if (translations[lang][key]) {
+      el.title = translations[lang][key];
+    }
+  });
+  const titleKey = document.title.dataset.translate || 'title';
+  if (translations[lang][titleKey]) {
+    document.title = translations[lang][titleKey];
+  }
+  document.querySelector('meta[property="og:title"]').setAttribute('content', translations[lang].title || document.title);
+  document.documentElement.lang = lang;
+  document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
+  document.body.classList.toggle('rtl', lang === 'ar');
+  if (recognition) recognition.lang = lang === 'ar' ? 'ar-SA' : lang === 'fr' ? 'fr-FR' : lang === 'de' ? 'de-DE' : 'en-US';
+}
+
+// Theme Toggle
+document.getElementById('theme-toggle').addEventListener('click', () => {
+  document.body.dataset.theme = document.body.dataset.theme === 'light' ? 'dark' : 'light';
+  const icon = document.querySelector('#theme-toggle i');
+  icon.classList.toggle('bx-sun');
+  icon.classList.toggle('bx-moon');
+});
+
+// Language Toggle
+document.getElementById('lang-toggle').addEventListener('change', (e) => {
+  switchLanguage(e.target.value);
+});
+
+// GSAP Animations
+gsap.registerPlugin(ScrollTrigger);
+gsap.from(".timeline-node", {
+  scrollTrigger: { trigger: ".timeline-container", start: "top 80%" },
+  y: 60,
+  opacity: 0,
+  duration: 1.2,
+  stagger: 0.3,
+  ease: "power3.out"
+});
+gsap.from(".neon-gradient", {
+  scrollTrigger: { trigger: "section" },
+  scale: 0.8,
+  opacity: 0,
+  duration: 1,
+  ease: "back.out(1.7)"
+});
+
+// Three.js Orb
+const orbScene = new THREE.Scene();
+const orbCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+const orbRenderer = new THREE.WebGLRenderer({ canvas: document.getElementById('hero-orb') || document.createElement('canvas'), alpha: true });
+orbRenderer.setSize(300, 300);
+const orbGeometry = new THREE.SphereGeometry(1, 32, 32);
+const orbMaterial = new THREE.MeshBasicMaterial({ color: 0x00f0ff, wireframe: true });
+const orb = new THREE.Mesh(orbGeometry, orbMaterial);
+orbScene.add(orb);
+orbCamera.position.z = 5;
+function rotateOrb() {
+  requestAnimationFrame(rotateOrb);
+  orb.rotation.x += 0.005;
+  orb.rotation.y += 0.01;
+  orbRenderer.render(orbScene, orbCamera);
+}
+rotateOrb();
+
+// Particles.js (Optimized for performance)
+particlesJS('particles-js', {
+  particles: {
+    number: { value: 20, density: { enable: true, value_area: 800 } },
+    color: { value: ['#00f0ff', '#ff007a', '#6b21a8'] },
+    shape: { type: 'star' },
+    opacity: { value: 0.3, random: true },
+    size: { value: 2, random: true },
+    line_linked: { enable: false },
+    move: { enable: true, speed: 2, direction: 'none', random: true, out_mode: 'out' }
+  },
+  interactivity: { events: { onhover: { enable: true, mode: 'bubble' } } }
+});
+
+// 3D Ambient (Optimized)
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('3d-canvas'), alpha: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+const geometry = new THREE.BoxGeometry();
+const material = new THREE.MeshBasicMaterial({ color: 0x00f0ff, wireframe: true });
+for (let i = 0; i < 15; i++) {
+  const cube = new THREE.Mesh(geometry, material);
+  cube.position.set((Math.random() - 0.6) * 100, (Math.random() - 0.6) * 100, (Math.random() - 0.6) * 100);
+  scene.add(cube);
+}
+camera.position.z = 50;
+function animate3D() {
+  requestAnimationFrame(animate3D);
+  scene.children.forEach(child => {
+    child.rotation.x += 0.005;
+    child.rotation.y += 0.01;
+  });
+  renderer.render(scene, camera);
+}
+animate3D();
+
+// AR Toggle
+document.querySelector('.ar-hint').addEventListener('click', () => {
+  const arScene = document.getElementById('ar-scene');
+  arScene.style.display = arScene.style.display === 'none' ? 'block' : 'none';
+});
+
+// Chat and Search
+let conversationHistory = [];
+
+// TTS function
+function speakText(text) {
+  if ('speechSynthesis' in window) {
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.lang = currentLang === 'ar' ? 'ar-SA' : currentLang === 'fr' ? 'fr-FR' : currentLang === 'de' ? 'de-DE' : 'en-US';
+    utterance.rate = 0.9;
+    utterance.pitch = 1;
+    speechSynthesis.speak(utterance);
+  } else {
+    console.log('TTS not supported');
+  }
+}
+
+// Enhanced search function (محدث للاتصال بالخادم الخلفي /search)
+async function searxSearch(query) {
+  const lowerQuery = query.toLowerCase();
+  if (lowerQuery.includes('hello') || lowerQuery.includes('hi') || lowerQuery.includes('how are you') || lowerQuery.includes('ازيك') || lowerQuery.includes('مرحبا')) {
+    query = `funny or friendly response to "${query}"`;
+  }
+
+  try {
+    // الاتصال بالخادم الخلفي (بدون CORS مشكلة لأنه من نفس الدومين)
+    const backendUrl = '/search';  // أو 'https://mgzon-mgzon-app.hf.space/search' لو على HF
+    const response = await fetch(`${backendUrl}?q=${encodeURIComponent(query)}`, {
+      headers: { 'Accept': 'application/json' }
+    });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const data = await response.json();
+    if (data.success && data.results && data.results.length > 0) {
+      const resultsText = data.results.map((result, i) => 
+        `Result ${i + 1}:\nTitle: ${result.title}\nLink: ${result.link}\nContent: ${result.content.substring(0, 200)}...`
+      ).join('\n\n');
+      return { success: true, text: translations[currentLang].searchPrefix + '\n\n' + resultsText };
+    }
+    return { success: false, text: translations[currentLang].searchError };
+  } catch (err) {
+    console.log(`Search failed: ${err.message}`);
+    return { success: false, text: translations[currentLang].searchError };
+  }
+}
+
+// Bot response function
+async function getBotResponse(userText) {
+  const searchResult = await searxSearch(userText);
+  const reply = searchResult.success ? searchResult.text : searchResult.text;
+  speakText(reply);
+  return reply;
+}
+
+// Enhanced chat display
+function updateChatDisplay(userText, botText) {
+  const userDiv = document.createElement('div');
+  userDiv.className = 'chat-message user';
+  userDiv.innerHTML = `<strong>${translations[currentLang].you}:</strong> ${userText}`;
+  
+  const botDiv = document.createElement('div');
+  botDiv.className = 'chat-message';
+  const formattedText = botText.split('\n\n').map(line => `<p>${line.replace(/\n/g, '<br>')}</p>`).join('');
+  botDiv.innerHTML = `<strong>MGZon AI:</strong><div>${formattedText}</div>`;
+  
+  const popupContent = document.getElementById('popup-content');
+  popupContent.appendChild(userDiv);
+  popupContent.appendChild(botDiv);
+  const popup = document.getElementById('gemini-popup');
+  popup.style.display = 'block';
+  popupContent.scrollTop = popupContent.scrollHeight;
+  gsap.from(popup, { scale: 0.8, opacity: 0, duration: 0.5 });
+}
+
+// Search Input
+document.getElementById('search-input').addEventListener('keypress', async (e) => {
+  if (e.key === 'Enter') {
+    const query = e.target.value;
+    if (query) {
+      conversationHistory.push({ role: 'user', text: query });
+      const reply = await getBotResponse(query);
+      conversationHistory.push({ role: 'assistant', text: reply });
+      updateChatDisplay(query, reply);
+      e.target.value = '';
+    }
+  }
+});
+
+// Chat Send
+document.getElementById('send-chat').addEventListener('click', async () => {
+  const query = document.getElementById('chat-input').value;
+  if (query) {
+    conversationHistory.push({ role: 'user', text: query });
+    const reply = await getBotResponse(query);
+    conversationHistory.push({ role: 'assistant', text: reply });
+    updateChatDisplay(query, reply);
+    document.getElementById('chat-input').value = '';
+  }
+});
+
+document.getElementById('chat-input').addEventListener('keypress', (e) => {
+  if (e.key === 'Enter') document.getElementById('send-chat').click();
+});
+
+function closePopup() {
+  document.getElementById('gemini-popup').style.display = 'none';
+}
+
+function togglePanel(id) {
+  const panel = document.getElementById(id + '-panel');
+  panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
+}
+
+window.addEventListener('resize', () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+// Enhanced Voice Recognition (Non-continuous, with repeat filter)
+const voiceBtn = document.getElementById('voice-toggle');
+const statusDiv = document.getElementById('voice-status');
+let recognition;
+let isListening = false;
+let lastTranscript = '';
+const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+if (SpeechRecognition) {
+  recognition = new SpeechRecognition();
+  recognition.lang = currentLang === 'ar' ? 'ar-SA' : currentLang === 'fr' ? 'fr-FR' : currentLang === 'de' ? 'de-DE' : 'en-US';
+  recognition.continuous = false;
+  recognition.interimResults = false;
+
+  recognition.onstart = () => {
+    isListening = true;
+    voiceBtn.classList.add('listening');
+    statusDiv.style.display = 'block';
+    statusDiv.textContent = translations[currentLang].voiceStatus || 'Listening...';
+  };
+
+  recognition.onresult = async (event) => {
+    const transcript = event.results[0][0].transcript;
+    if (transcript === lastTranscript) return; // Prevent duplicates
+    lastTranscript = transcript;
+    statusDiv.textContent = `Heard: ${transcript}`;
+    conversationHistory.push({ role: 'user', text: transcript });
+    const reply = await getBotResponse(transcript);
+    conversationHistory.push({ role: 'assistant', text: reply });
+    updateChatDisplay(transcript, reply);
+  };
+
+  recognition.onerror = (event) => {
+    statusDiv.textContent = `Error: ${event.error}. Try again!`;
+    isListening = false;
+    voiceBtn.classList.remove('listening');
+    setTimeout(() => statusDiv.style.display = 'none', 3000);
+  };
+
+  recognition.onend = () => {
+    isListening = false;
+    voiceBtn.classList.remove('listening');
+    setTimeout(() => statusDiv.style.display = 'none', 2000);
+  };
+
+  voiceBtn.addEventListener('click', () => {
+    if (speechSynthesis.speaking) speechSynthesis.cancel();
+    if (isListening) {
+      recognition.stop();
+    } else {
+      recognition.start();
+    }
+  });
+
+  voiceBtn.title = translations[currentLang].voiceTitle || 'Press to speak';
+} else {
+  voiceBtn.disabled = true;
+  voiceBtn.title = 'Voice not supported. Use Chrome!';
+  statusDiv.style.display = 'block';
+  statusDiv.textContent = 'Voice not supported – Use Chrome!';
+}
+
+// Initialize
+switchLanguage(currentLang);

static/js/index.js

@@ -0,0 +1,352 @@
+/**
+ * @typedef {import('trigram-utils').TrigramTuple} TrigramTuple
+ *
+ * @typedef Options
+ * @property {Array<string>} [only]
+ *   Languages to allow.
+ * @property {Array<string>} [ignore]
+ *   Languages to ignore.
+ * @property {number} [minLength=10]
+ *   Minimum length to accept.
+ */
+
+/* Load `trigram-utils`. */
+import {asTuples} from 'trigram-utils'
+
+/* Load `expressions` (regular expressions matching
+ * scripts). */
+import {expressions} from './expressions.js'
+
+/* Load `data` (trigram information per language,
+ * per script). */
+import {data} from './data.js'
+
+/* Maximum sample length. */
+const MAX_LENGTH = 2048
+
+/* Minimum sample length. */
+const MIN_LENGTH = 10
+
+/* The maximum distance to add when a given trigram does
+ * not exist in a trigram dictionary. */
+const MAX_DIFFERENCE = 300
+
+const own = {}.hasOwnProperty
+
+/* Construct trigram dictionaries. */
+
+/** @type {string} */
+let script
+
+/** @type {Record<string, Record<string, Record<string, number>>>} */
+const numericData = {}
+
+for (script in data) {
+  if (own.call(data, script)) {
+    const languages = data[script]
+    /** @type {string} */
+    let name
+
+    numericData[script] = {}
+
+    for (name in languages) {
+      if (own.call(languages, name)) {
+        const model = languages[name].split('|')
+        /** @type {Record<string, number>} */
+        const trigrams = {}
+        let weight = model.length
+
+        while (weight--) {
+          trigrams[model[weight]] = weight
+        }
+
+        numericData[script][name] = trigrams
+      }
+    }
+  }
+}
+
+/**
+ * Get the most probable language for the given value.
+ *
+ * @param {string} [value]
+ *   The value to test.
+ * @param {Options} [options]
+ *   Configuration.
+ * @return {string}
+ *  The most probable language.
+ */
+export function franc(value, options) {
+  return francAll(value, options)[0][0]
+}
+
+/**
+ * Get a list of probable languages the given value is
+ * written in.
+ *
+ * @param {string} [value]
+ *   The value to test.
+ * @param {Options} [options]
+ *   Configuration.
+ * @return {Array<TrigramTuple>}
+ *   An array containing language—distance tuples.
+ */
+export function francAll(value, options = {}) {
+  /** @type {Array<string>} */
+  // @ts-expect-error: `whitelist` is from long ago.
+  const only = [...(options.whitelist || []), ...(options.only || [])]
+  /** @type {Array<string>} */
+  // @ts-expect-error: `blacklist` is from long ago.
+  const ignore = [...(options.blacklist || []), ...(options.ignore || [])]
+  const minLength =
+    options.minLength !== null && options.minLength !== undefined
+      ? options.minLength
+      : MIN_LENGTH
+
+  if (!value || value.length < minLength) {
+    return und()
+  }
+
+  value = value.slice(0, MAX_LENGTH)
+
+  /* Get the script which characters occur the most
+   * in `value`. */
+  const script = getTopScript(value, expressions)
+
+  /* One languages exists for the most-used script. */
+  if (!script[0] || !(script[0] in numericData)) {
+    /* If no matches occured, such as a digit only string,
+     * or because the language is ignored, exit with `und`. */
+    if (!script[0] || script[1] === 0 || !allow(script[0], only, ignore)) {
+      return und()
+    }
+
+    return singleLanguageTuples(script[0])
+  }
+
+  /* Get all distances for a given script, and
+   * normalize the distance values. */
+  return normalize(
+    value,
+    getDistances(asTuples(value), numericData[script[0]], only, ignore)
+  )
+}
+
+/**
+ * Normalize the difference for each tuple in
+ * `distances`.
+ *
+ * @param {string} value
+ *   Value to normalize.
+ * @param {Array<TrigramTuple>} distances
+ *   List of distances.
+ * @return {Array<TrigramTuple>}
+ *   Normalized distances.
+ */
+function normalize(value, distances) {
+  const min = distances[0][1]
+  const max = value.length * MAX_DIFFERENCE - min
+  let index = -1
+
+  while (++index < distances.length) {
+    distances[index][1] = 1 - (distances[index][1] - min) / max || 0
+  }
+
+  return distances
+}
+
+/**
+ * From `scripts`, get the most occurring expression for
+ * `value`.
+ *
+ * @param {string} value
+ *   Value to check.
+ * @param {Record<string, RegExp>} scripts
+ *   Top-Scripts.
+ * @return {[string|undefined, number]}
+ *   Top script and its occurrence percentage.
+ */
+function getTopScript(value, scripts) {
+  let topCount = -1
+  /** @type {string|undefined} */
+  let topScript
+  /** @type {string} */
+  let script
+
+  for (script in scripts) {
+    if (own.call(scripts, script)) {
+      const count = getOccurrence(value, scripts[script])
+
+      if (count > topCount) {
+        topCount = count
+        topScript = script
+      }
+    }
+  }
+
+  return [topScript, topCount]
+}
+
+/**
+ * Get the occurrence ratio of `expression` for `value`.
+ *
+ * @param {string} value
+ *   Value to check.
+ * @param {RegExp} expression
+ *   Code-point expression.
+ * @return {number}
+ *   Float between 0 and 1.
+ */
+function getOccurrence(value, expression) {
+  const count = value.match(expression)
+
+  return (count ? count.length : 0) / value.length || 0
+}
+
+/**
+ * Get the distance between an array of trigram—count
+ * tuples, and multiple trigram dictionaries.
+ *
+ * @param {Array<TrigramTuple>} trigrams
+ *   An array containing trigram—count tuples.
+ * @param {Record<string, Record<string, number>>} languages
+ *   Multiple trigrams to test against.
+ * @param {Array<string>} only
+ *   Allowed languages; if non-empty, only included languages are kept.
+ * @param {Array<string>} ignore
+ *   Disallowed languages; included languages are ignored.
+ * @return {Array<TrigramTuple>} An array
+ *   containing language—distance tuples.
+ */
+function getDistances(trigrams, languages, only, ignore) {
+  languages = filterLanguages(languages, only, ignore)
+
+  /** @type {Array<TrigramTuple>} */
+  const distances = []
+  /** @type {string} */
+  let language
+
+  if (languages) {
+    for (language in languages) {
+      if (own.call(languages, language)) {
+        distances.push([language, getDistance(trigrams, languages[language])])
+      }
+    }
+  }
+
+  return distances.length === 0 ? und() : distances.sort(sort)
+}
+
+/**
+ * Get the distance between an array of trigram—count
+ * tuples, and a language dictionary.
+ *
+ * @param {Array<TrigramTuple>} trigrams
+ *   An array containing trigram—count tuples.
+ * @param {Record<string, number>} model
+ *   Object containing weighted trigrams.
+ * @return {number}
+ *   The distance between the two.
+ */
+function getDistance(trigrams, model) {
+  let distance = 0
+  let index = -1
+
+  while (++index < trigrams.length) {
+    const trigram = trigrams[index]
+    let difference = MAX_DIFFERENCE
+
+    if (trigram[0] in model) {
+      difference = trigram[1] - model[trigram[0]] - 1
+
+      if (difference < 0) {
+        difference = -difference
+      }
+    }
+
+    distance += difference
+  }
+
+  return distance
+}
+
+/**
+ * Filter `languages` by removing languages in
+ * `ignore`, or including languages in `only`.
+ *
+ * @param {Record<string, Record<string, number>>} languages
+ *   Languages to filter
+ * @param {Array<string>} only
+ *   Allowed languages; if non-empty, only included languages are kept.
+ * @param {Array<string>} ignore
+ *   Disallowed languages; included languages are ignored.
+ * @return {Record<string, Record<string, number>>}
+ *   Filtered array of languages.
+ */
+function filterLanguages(languages, only, ignore) {
+  if (only.length === 0 && ignore.length === 0) {
+    return languages
+  }
+
+  /** @type {Record<string, Record<string, number>>} */
+  const filteredLanguages = {}
+  /** @type {string} */
+  let language
+
+  for (language in languages) {
+    if (allow(language, only, ignore)) {
+      filteredLanguages[language] = languages[language]
+    }
+  }
+
+  return filteredLanguages
+}
+
+/**
+ * Check if `language` can match according to settings.
+ *
+ * @param {string} language
+ *   Languages to filter
+ * @param {Array<string>} only
+ *   Allowed languages; if non-empty, only included languages are kept.
+ * @param {Array<string>} ignore
+ *   Disallowed languages; included languages are ignored.
+ * @return {boolean}
+ *   Whether `language` can match
+ */
+function allow(language, only, ignore) {
+  if (only.length === 0 && ignore.length === 0) {
+    return true
+  }
+
+  return (
+    (only.length === 0 || only.includes(language)) && !ignore.includes(language)
+  )
+}
+
+/**
+ * Create a single `und` tuple.
+ */
+function und() {
+  return singleLanguageTuples('und')
+}
+
+/**
+ * Create a single tuple as a list of tuples from a given language code.
+ *
+ * @param {string} language
+ * @returns {Array<TrigramTuple>}
+ */
+function singleLanguageTuples(language) {
+  return [[language, 1]]
+}
+
+/**
+ * Deep regular sort on the number at `1` in both objects.
+ *
+ * @param {TrigramTuple} a
+ * @param {TrigramTuple} b
+ */
+function sort(a, b) {
+  return a[1] - b[1]
+}

static/robots.txt

@@ -13,5 +13,8 @@ Allow: /static/sitemap.xml
 Allow: /static/google97468ef1f6b6e804.html
 Allow: /static/favicon.ico
 Allow: /static/css/
+Allow: /static/images/
 Allow: /static/js/
+
+
 Sitemap: https://mgzon-mgzon-app.hf.space/static/sitemap.xml

static/sitemap.xml

@@ -10,13 +10,13 @@
     <loc>https://mgzon-mgzon-app.hf.space/chat</loc>
     <lastmod>2025-09-01</lastmod>
     <changefreq>daily</changefreq>
-    <priority>0.8</priority>
+    <priority>0.9</priority>
   </url>
   <url>
     <loc>https://mgzon-mgzon-app.hf.space/about</loc>
-    <lastmod>2025-09-30</lastmod>
+    <lastmod>2025-10-2</lastmod>
     <changefreq>weekly</changefreq>
-    <priority>0.7</priority>
+    <priority>1.0</priority>
   </url>
   <url>
     <loc>https://mgzon-mgzon-app.hf.space/login</loc>
@@ -46,6 +46,12 @@
     <loc>https://mgzon-mgzon-app.hf.space/profile</loc>
     <lastmod>2025-10-01</lastmod>
     <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://mgzon-mgzon-app.hf.space/download</loc>
+    <lastmod>2025-10-02</lastmod>
+    <changefreq>weekly</changefreq>
     <priority>0.9</priority>
   </url>
   <url>

templates/about.html

@@ -1,278 +1,707 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Learn about MGZon AI, founded by Mark Al-Asfar in Alexandria, Egypt. Discover our mission, team, and achievements in AI and e-commerce.">
-  <meta name="keywords" content="MGZon AI, Mark Al-Asfar, AI chatbot, e-commerce, code generation, Alexandria, technology, team, achievements">
-  <meta name="author" content="Mark Al-Asfar">
+  <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
+  <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
+  <meta name="description" content="Learn about MGZon AI, an innovative AI-powered platform for e-commerce and code generation. Discover our mission, technologies, and achievements.">
+  <meta name="keywords" content="MGZon AI, AI chatbot, e-commerce, code generation, technology, achievements, MGZon, E-commerce chatbot, 5G, 6G, 2025 AI trends, 2026 trends, adaptive UI">
+  <meta name="author" content="MGZon AI Team">
   <meta name="robots" content="index, follow">
-  <title>About MGZon AI – Our Story</title>
-  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-  <link rel="apple-touch-icon" href="/static/images/mg.svg">
+  <title data-translate="title">About MGZon AI – Adaptive Horizons</title>
+  <link rel="canonical" href="https://mgzon-mgzon-app.hf.space/about" />
+  <link rel="icon" type="image/x-icon" href="https://mgzon-mgzon-app.hf.space/static/images/mg.svg">
+  <link rel="apple-touch-icon" href="https://mgzon-mgzon-app.hf.space/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">
   <!-- Open Graph -->
-  <meta property="og:title" content="About MGZon AI – Our Story">
-  <meta property="og:description" content="Learn about MGZon AI, its founder Mark Al-Asfar, and our mission to innovate in AI and e-commerce.">
-  <meta property="og:image" content="/static/images/mg.svg">
+  <meta property="og:title" content="About MGZon AI – Adaptive Horizons">
+  <meta property="og:description" content="Immerse in MGZon AI's adaptive story, powering 2026 AI frontiers for e-commerce and code generation.">
+  <meta property="og:image" content="https://mgzon-mgzon-app.hf.space/static/images/mg.svg">
   <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/about">
   <meta property="og:type" content="website">
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="About MGZon AI – Our Story">
-  <meta name="twitter:description" content="Learn about MGZon AI, its founder Mark Al-Asfar, and our mission to innovate in AI and e-commerce.">
-  <meta name="twitter:image" content="/static/images/mg.svg">
-  <!-- JSON-LD -->
-<script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "Organization",
-  "name": "MGZon AI",
-  "url": "https://mgzon-mgzon-app.hf.space",
-  "logo": "/static/images/mg.svg",
-  "founder": {
-    "@type": "Person",
-    "name": "Mark Al-Asfar",
-    "sameAs": "https://mark-elasfar.web.app/"
-  },
-  "description": "MGZon AI develops AI-powered solutions for e-commerce and coding, founded by Mark Al-Asfar from Alexandria, Egypt.",
-  "keywords": ["MGZon AI", "Mark Al-Asfar", "AI chatbot", "e-commerce", "code generation", "Alexandria", "technology", "team", "MGZon", "MGZon chatbot", "E-commerce chatbot", "5G", "6G", "2025 AI trends"],
-  "address": {
-    "@type": "PostalAddress",
-    "addressLocality": "Alexandria",
-    "addressCountry": "Egypt"
-  }
-}
-</script>
-  <!-- Tailwind (v3) -->
-  <script src="https://cdn.tailwindcss.com"></script>
+  <meta name="twitter:title" content="About MGZon AI – Adaptive Horizons">
+  <meta name="twitter:description" content="Immerse in MGZon AI's adaptive story, powering 2026 AI frontiers for e-commerce and code generation.">
+  <meta name="twitter:image" content="https://mgzon-mgzon-app.hf.space/static/images/mg.svg">
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;600;700&family=Cairo:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
+  <!-- GSAP for animations -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
   <!-- Boxicons -->
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
+  <!-- External JavaScript -->
+  <script src="/static/js/about.js" defer></script>
+  <!-- تحميل مشروط لـ Three.js و Particles.js -->
+  <script>
+    if (window.innerWidth > 768) {
+      const threeScript = document.createElement('script');
+      threeScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
+      document.head.appendChild(threeScript);
+      const particlesScript = document.createElement('script');
+      particlesScript.src = 'https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js';
+      document.head.appendChild(particlesScript);
+    }
+  </script>
+  <!-- A-Frame for AR -->
+  <script src="https://aframe.io/releases/1.5.0/aframe.min.js" defer></script>
+
   <style>
+    :root {
+      --primary: #00f0ff;
+      --secondary: #ff007a;
+      --accent: #6b21a8;
+      --background: #000;
+      --foreground: #f8f9fa;
+      --card-bg: rgba(10, 10, 10, 0.9);
+      --glow-primary: 0 0 25px #00f0ff;
+      --glow-secondary: 0 0 25px #ff007a;
+    }
+    [data-theme="light"] {
+      --background: #f8f9fa;
+      --foreground: #000;
+      --card-bg: rgba(248, 249, 250, 0.9);
+    }
+    body {
+      background: var(--background);
+      color: var(--foreground);
+      font-family: 'Inter', sans-serif;
+      overflow-x: hidden;
+      position: relative;
+      transition: background 0.3s, color 0.3s;
+    }
+    .rtl {
+      direction: rtl;
+      font-family: 'Cairo', sans-serif;
+    }
+    #particles-js, #3d-canvas {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      opacity: 0.3;
+      will-change: transform;
+      display: none;
+    }
+    @media (min-width: 769px) {
+      #particles-js, #3d-canvas { display: block; }
+    }
+    #hero-orb {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      width: 200px;
+      height: 200px;
+      transform: translate(-50%, -50%);
+      z-index: -1;
+      opacity: 0.1;
+      display: none;
+    }
+    @media (min-width: 769px) {
+      #hero-orb { display: block; }
+    }
+    .neon-gradient {
+      background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
+      background-size: 300% 300%;
+      animation: gradientShift 5s ease infinite;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
     @keyframes gradientShift {
-      0% { background-position: 0% 50%; }
+      0%, 100% { 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 {
+    .glass-morphism {
+      background: rgba(255, 255, 255, 0.02);
+      backdrop-filter: blur(30px);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      border-radius: 16px;
+      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
+      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    .glass-morphism:hover {
+      transform: translateY(-5px) scale(1.02);
+      box-shadow: 0 15px 30px rgba(0, 120, 255, 0.3);
+      border-color: var(--primary);
+    }
+    .hero-section {
+      background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
+      min-height: 80vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    .timeline-container {
+      position: relative;
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    .timeline-line {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: linear-gradient(to bottom, var(--primary), var(--accent));
+      transform: translateX(-50%);
+      z-index: 1;
+    }
+    .timeline-node {
+      position: relative;
+      width: 48%;
+      margin: 2rem 0;
+      padding: 1.5rem;
+    }
+    .timeline-node.left {
+      left: 0;
+      text-align: right;
+    }
+    .timeline-node.right {
+      left: 52%;
+    }
+    .timeline-node::before {
+      content: '';
+      position: absolute;
+      top: 1.5rem;
+      width: 16px;
+      height: 16px;
+      background: var(--primary);
+      border-radius: 50%;
+      box-shadow: var(--glow-primary);
+      z-index: 2;
+    }
+    .timeline-node.left::before {
+      right: -8px;
+    }
+    .timeline-node.right::before {
+      left: -8px;
+    }
+    .nav-morph {
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid rgba(0, 240, 255, 0.2);
+    }
+    .theme-btn {
+      background: rgba(0, 240, 255, 0.1);
+      border: 1px solid var(--primary);
+      color: var(--primary);
+      border-radius: 50%;
+      width: 36px;
+      height: 36px;
+      transition: all 0.3s ease;
+    }
+    .theme-btn:hover {
+      background: var(--primary);
+      color: #000;
+      box-shadow: var(--glow-primary);
+      transform: rotate(180deg);
+    }
+    .voice-btn {
+      background: rgba(0, 240, 255, 0.1);
+      border: 1px solid var(--primary);
+      color: var(--primary);
+      border-radius: 50%;
+      width: 36px;
+      height: 36px;
+      transition: all 0.3s ease;
+    }
+    .voice-btn:hover {
+      background: var(--primary);
+      color: #000;
+      box-shadow: var(--glow-primary);
+    }
+    .contact-hub {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: 1rem;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .contact-pod {
+      background: var(--card-bg);
+      border: 1px solid rgba(0, 240, 255, 0.2);
+      border-radius: 12px;
+      padding: 1rem;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      position: relative;
+    }
+    .contact-pod::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(45deg, transparent 30%, rgba(0, 240, 255, 0.1) 50%, transparent 70%);
       opacity: 0;
-      transition: opacity 0.2s ease;
+      transition: opacity 0.5s;
+      pointer-events: none;
+    }
+    .contact-pod:hover::after {
+      opacity: 1;
+      animation: shimmer 0.5s ease;
+    }
+    @keyframes shimmer {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+    .contact-pod:hover {
+      transform: translateY(-5px) rotate(2deg);
+      box-shadow: var(--glow-primary);
+    }
+    .contact-icon {
+      font-size: 1.5rem;
+      color: var(--primary);
+      margin-bottom: 0.5rem;
+      display: block;
+      transition: transform 0.3s ease;
+    }
+    .contact-pod:hover .contact-icon {
+      transform: scale(1.2) rotate(360deg);
+    }
+    .details-panel {
+      display: none;
+      margin-top: 1rem;
+      padding: 1rem;
+      background: rgba(0, 240, 255, 0.05);
+      border-radius: 12px;
+      border-left: 3px solid var(--primary);
+    }
+    .logo-pulse {
+      animation: pulseLogo 2s infinite;
+    }
+    @keyframes pulseLogo {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+    }
+    .search-bar {
+      background: rgba(255,255,255,0.1);
+      border: 1px solid var(--primary);
+      color: var(--foreground);
+      padding: 6px 12px;
+      border-radius: 20px;
+      width: 100%;
+      max-width: 200px;
+    }
+    .voice-status {
+      position: fixed;
+      top: 80px;
+      right: 10px;
+      background: rgba(0,0,0,0.8);
+      color: var(--primary);
+      padding: 6px 12px;
+      border-radius: 20px;
+      display: none;
+      z-index: 1000;
+    }
+    .gemini-popup {
+      position: fixed;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--card-bg);
+      color: var(--foreground);
+      padding: 15px;
+      border-radius: 16px;
+      width: 90vw;
+      max-width: 400px;
+      max-height: 60vh;
+      overflow-y: auto;
+      display: none;
+      z-index: 1000;
+      border: 1px solid var(--primary);
+      box-shadow: var(--glow-primary);
+    }
+    .close-popup {
+      cursor: pointer;
+      float: right;
+      font-size: 20px;
+      color: var(--primary);
+    }
+    .chat-message {
+      margin-bottom: 1rem;
+      padding: 1rem;
+      border-radius: 12px;
+      background: rgba(0, 240, 255, 0.1);
+      word-wrap: break-word;
+      line-height: 1.5;
+    }
+    .chat-message.user {
+      background: rgba(255, 0, 122, 0.1);
+      text-align: right;
+    }
+    #voice-toggle.listening {
+      background: rgba(255, 0, 0, 0.5);
+      animation: pulse 1s infinite;
+    }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); }
     }
-    .main-content {
-      min-height: calc(100vh - 4rem);
+    /* تحسينات الـ Navbar */
+    .nav-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 100%;
+      overflow-x: hidden;
     }
-    .glass:hover {
-      transform: scale(1.05);
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-      background: rgba(255, 255, 255, 0.15);
+    .nav-links {
+      display: flex;
+      align-items: center;
+      space-x-4;
+    }
+    .hamburger {
+      display: none;
+      font-size: 24px;
+      color: var(--primary);
+      cursor: pointer;
+    }
+    .search-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
     @media (max-width: 768px) {
-      .sidebar {
-        transform: translateX(-100%);
+      .nav-container {
+        flex-wrap: wrap;
+        padding: 0.5rem 1rem;
+      }
+      .nav-links {
+        flex-direction: column;
+        position: absolute;
+        top: 60px;
+        right: 0;
+        background: var(--card-bg);
+        width: 100%;
+        padding: 1rem;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        z-index: 40;
+        display: flex; /* مفتوح افتراضيًا */
+        opacity: 0;
+        transform: translateY(-10px);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+      }
+      .nav-links.active {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      .hamburger {
+        display: block;
+      }
+      .search-container {
+        margin-top: 0.5rem;
+        width: 100%;
+        justify-content: flex-end;
+      }
+      .search-bar {
+        max-width: 150px;
+      }
+      .theme-btn, .voice-btn {
+        width: 32px;
+        height: 32px;
+      }
+      .timeline-node {
+        width: 100%;
+        left: 0 !important;
+        text-align: center;
+        padding: 1rem;
+      }
+      .timeline-line {
+        left: 20px;
+      }
+      .timeline-node::before {
+        left: 12px !important;
+        right: auto !important;
+      }
+      .hero-section {
+        min-height: 60vh;
       }
-      .sidebar.active {
-        transform: translateX(0);
+      .hero-section h1 {
+        font-size: 2.5rem;
+      }
+      .hero-section p {
+        font-size: 1rem;
+      }
+      .hero-section img {
+        width: 100px;
+        height: 100px;
+      }
+      .contact-hub {
+        grid-template-columns: 1fr;
+      }
+      .glass-morphism {
+        padding: 1rem;
+        border-radius: 12px;
       }
     }
   </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 hover:bg-emerald-600 transition">API Documentation</a>
-      <a href="/about" class="px-4 py-2 rounded-lg bg-emerald-600">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</h1>
-        <p class="text-lg max-w-2xl mx-auto mb-8">Founded by Mark Al-Asfar in Alexandria, Egypt, MGZon AI is revolutionizing e-commerce and coding with AI-driven solutions.</p>
+<body>
+  <!-- 3D Ambient -->
+  <canvas id="3d-canvas"></canvas>
+  <canvas id="hero-orb"></canvas>
+  <!-- Particles -->
+  <div id="particles-js"></div>
+  <!-- Voice Status -->
+  <div id="voice-status" class="voice-status" data-translate="voiceStatus">Listening...</div>
+  <!-- Gemini Chat Popup -->
+  <div id="gemini-popup" class="gemini-popup">
+    <span class="close-popup" onclick="closePopup()">&times;</span>
+    <div id="popup-content"></div>
+    <div class="mt-4">
+      <input type="text" id="chat-input" class="search-bar w-full" data-translate-placeholder="chatPlaceholder" placeholder="Type your message...">
+      <button id="send-chat" class="mt-2 bg-[var(--primary)] text-black px-4 py-2 rounded-full w-full" data-translate="sendBtn">Send</button>
+    </div>
+  </div>
+
+  <!-- Navigation -->
+  <nav class="fixed top-0 w-full nav-morph z-50 py-3">
+    <div class="container mx-auto px-4 nav-container">
+      <div class="flex items-center gap-4">
+        <a href="/" class="text-xl font-bold font-orbitron neon-gradient" data-translate="navLogo">
+          <img src="https://mgzon-mgzon-app.hf.space/static/images/mg.svg" alt="MGZon Logo" class="inline w-6 h-6 logo-pulse mr-2" loading="lazy">
+          MGZon AI
+        </a>
+        <div class="hamburger">
+          <i class='bx bx-menu'></i>
+        </div>
       </div>
-      <!-- Story Section -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Our Story</h2>
-        <div class="glass p-6">
-<p class="mb-4">MGZon AI was founded in 2023 in Alexandria, Egypt, by Mark Al-Asfar with a vision to empower developers and businesses through AI-driven solutions like MGZon Chatbot. We leverage technologies like DeepSeek, FastAPI, and 5G/6G innovations to deliver cutting-edge e-commerce and code generation tools.</p>
-          <p>From a small startup to a global player, we now operate warehouses in the USA, Canada, and China, serving thousands of users worldwide.</p>
+      <div class="nav-links flex items-center space-x-4">
+        <a href="/" class="text-white hover:text-[var(--primary)] transition-all duration-300 ease-out" data-translate="navHome">Home</a>
+        <a href="/download" download class="link-button text-white hover:text-[var(--primary)]">
+          Download APP <i class="bx bx-download ml-1"></i>
+        </a>
+        <a href="/chat" class="text-white hover:text-[var(--primary)] transition-all duration-300 ease-out" data-translate="navContact">Launch Chatbot</a>
+        <select id="lang-toggle" class="bg-transparent text-white border-[var(--primary)] rounded-md px-2 py-1">
+          <option value="en">English</option>
+          <option value="ar">العربية</option>
+          <option value="fr">Français</option>
+          <option value="de">Deutsch</option>
+        </select>
+        <button id="theme-toggle" class="theme-btn" data-title-translate="themeTitle">
+          <i class='bx bx-sun'></i>
+        </button>
+      </div>
+      <div class="search-container">
+        <input type="text" id="search-input" class="search-bar" data-translate-placeholder="searchPlaceholder" placeholder="Search...">
+        <button id="voice-toggle" class="voice-btn" data-title-translate="voiceTitle">
+          <i class='bx bx-microphone'></i>
+        </button>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero Section -->
+  <section class="hero-section relative min-h-screen flex items-center justify-center text-center pt-16">
+    <div class="container mx-auto px-4">
+      <img src="https://mgzon-mgzon-app.hf.space/static/images/mg.svg" alt="MGZon Logo" class="w-48 h-48 mx-auto mb-6 logo-pulse" loading="lazy">
+      <h1 class="text-5xl md:text-7xl font-bold font-orbitron neon-gradient mb-6" data-translate="heroTitle">About MGZon AI</h1>
+      <p class="text-lg md:text-2xl max-w-3xl mx-auto opacity-80" data-translate="heroDesc">An AI-powered platform revolutionizing e-commerce and code generation – Empowering creators and businesses with adaptive intelligence.</p>
+      <div class="ar-hint mt-8" data-translate="arHint">
+        <i class='bx bx-vr' style="font-size: 1.5rem;"></i> Tap for AR View
+      </div>
+    </div>
+    <a-scene embedded arjs="trackingMethod: best;" style="display: none;" id="ar-scene">
+      <a-marker preset="hiro">
+        <a-box position="0 0.5 0" material="color: #00f0ff;"></a-box>
+      </a-marker>
+      <a-entity camera></a-entity>
+    </a-scene>
+  </section>
+
+  <!-- Our Story Section - Timeline Style -->
+  <section class="py-16 bg-[var(--card-bg)]" id="story-sec">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl md:text-4xl font-bold font-orbitron text-[var(--primary)] mb-8 text-center" data-translate="storyTitle">Our Journey</h2>
+      <div class="timeline-container">
+        <div class="timeline-line"></div>
+        <div class="timeline-node left glass-morphism">
+          <h3 class="text-2xl font-bold mb-3" data-translate="story1Title">2023: Ignition in Alexandria</h3>
+          <p data-translate="story1Desc">MGZon AI sparks to life in Alexandria, Egypt, leveraging DeepSeek & FastAPI to launch the core chatbot – Empowering developers and e-commerce innovators globally.</p>
         </div>
-      </section>
-      <!-- Founder Section -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Meet Our Founder</h2>
-        <div class="glass p-6 text-center">
-          <img src="/static/images/mg.svg" alt="Mark Al-Asfar" class="w-24 h-24 mx-auto mb-4 rounded-full">
-          <h3 class="text-xl font-semibold mb-2">Mark Al-Asfar</h3>
-          <p class="mb-4">A visionary developer from Alexandria, Mark Al-Asfar founded MGZon AI to bridge the gap between AI innovation and practical applications in coding and e-commerce.</p>
-          <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Learn More About Mark</a>
+        <div class="timeline-node right glass-morphism">
+          <h3 class="text-2xl font-bold mb-3" data-translate="story2Title">2024: Global Expansion</h3>
+          <p data-translate="story2Desc">Seamless integrations with warehouses in USA, Canada, China; 5G/6G tech accelerates e-commerce automation and code generation for thousands.</p>
         </div>
-      </section>
-      <!-- Team Section -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Our Team</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="glass p-6 text-center">
-            <img src="https://via.placeholder.com/96" alt="Team Member" class="w-24 h-24 mx-auto mb-4 rounded-full">
-            <h3 class="text-xl font-semibold mb-2">Hager Mohamed</h3>
-            <p class="mb-4">Lead AI Engineer, specializing in machine learning and chatbot development.</p>
-          </div>
-          <div class="glass p-6 text-center">
-            <img src="https://via.placeholder.com/96" alt="Team Member" class="w-24 h-24 mx-auto mb-4 rounded-full">
-            <h3 class="text-xl font-semibold mb-2">Ahmed Khaled</h3>
-            <p class="mb-4">E-commerce Specialist, driving innovative solutions for online businesses.</p>
-          </div>
+        <div class="timeline-node left glass-morphism">
+          <h3 class="text-2xl font-bold mb-3" data-translate="story3Title">2025-2026: Quantum Evolution</h3>
+          <p data-translate="story3Desc">Recognized by TechCrunch as MENA's AI leader; Pushing ethical AI boundaries in commerce and coding for a smarter future.</p>
         </div>
-      </section>
-      <!-- Achievements Section -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Our Achievements</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">Global Reach</h3>
-            <p>Serving over 10,000 users across 50 countries with our AI tools.</p>
-          </div>
-          <div class="glass p-6">
-            <h3 class="text-xl font-semibold mb-2">Award-Winning Innovation</h3>
-            <p>Recognized as a top AI startup in MENA by TechCrunch in 2024.</p>
-          </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Our Vision Section -->
+  <section class="py-16">
+    <div class="container mx-auto px-4 text-center">
+      <h2 class="text-4xl md:text-6xl font-bold font-orbitron mb-12 neon-gradient" data-translate="visionTitle">Our Vision</h2>
+      <div class="glass-morphism max-w-3xl mx-auto p-8">
+        <img src="https://mgzon-mgzon-app.hf.space/static/images/Mark_Al-Asfar.png" alt="MGZon Vision" class="w-32 h-32 mx-auto mb-6 rounded-full ring-4 ring-[var(--primary)]" loading="lazy">
+        <h3 class="text-3xl font-bold mb-4" data-translate="visionDesc">Adaptive Intelligence for Tomorrow</h3>
+        <p class="text-lg mb-8" data-translate="visionDetails">MGZon AI fuses cutting-edge tech with real-world utility, democratizing AI for seamless e-commerce and effortless code creation.</p>
+        <a href="/profile" target="_blank" class="inline-flex items-center bg-gradient-to-r from-[var(--primary)] to-[var(--secondary)] text-black px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:shadow-[var(--glow-primary)] hover:scale-105" data-translate="visionBtn">Explore Features <i class='bx bx-rocket ml-2'></i></a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Project & AI Details Section -->
+  <section class="py-16 bg-[var(--card-bg)]">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl md:text-4xl font-bold font-orbitron text-[var(--primary)] mb-8 text-center" data-translate="projectTitle">Project & AI Insights</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+        <div class="glass-morphism p-6">
+          <h3 class="text-xl font-bold mb-3" data-translate="aiTechTitle">Core AI Technologies</h3>
+          <ul class="text-base space-y-2">
+            <li>• DeepSeek for advanced NLP in chatbots</li>
+            <li>• FastAPI for scalable backend</li>
+            <li>• ML models for predictive e-commerce</li>
+          </ul>
         </div>
-      </section>
-      <!-- Mission Section -->
-      <section class="my-12">
-        <h2 class="text-3xl font-bold text-center mb-8">Our Mission</h2>
-        <div class="glass p-6">
-          <p>At MGZon AI, we aim to make AI accessible to developers and businesses, simplifying coding and enhancing e-commerce with cutting-edge technology.</p>
+        <div class="glass-morphism p-6">
+          <h3 class="text-xl font-bold mb-3" data-translate="projectHowTitle">How It Works</h3>
+          <p class="text-base" data-translate="projectHowDesc">AI analyzes user queries to generate code snippets or optimize e-commerce flows – Ethical, adaptive, and future-proof.</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 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:[email protected]" class="text-emerald-300 hover:underline">[email protected]</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>
+  </section>
+
+  <!-- Our Team Section -->
+  <section class="py-16 bg-[var(--card-bg)]">
+    <div class="container mx-auto px-4">
+      <h2 class="text-4xl md:text-6xl font-bold font-orbitron text-center mb-12 neon-gradient" data-translate="teamTitle">Core Constellation</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+        <div class="glass-morphism p-6 text-center">
+          <img src="https://mgzon-mgzon-app.hf.space/static/images/Sarah_D.jpeg" alt="Sarah Dayan" class="w-32 h-32 mx-auto mb-4 rounded-full ring-4 ring-[var(--secondary)]" loading="lazy">
+          <h3 class="text-2xl font-bold mb-3" data-translate="team1Name">Sarah Dayan</h3>
+          <p class="text-base opacity-90" data-translate="team1Desc">Lead AI Architect – Sculpting ML & chatbot symphonies for MGZon.</p>
         </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 class="glass-morphism p-6 text-center">
+          <img src="https://mgzon-mgzon-app.hf.space/static/images/Leonardo.jpeg" alt="Leonardo Cuco" class="w-32 h-32 mx-auto mb-4 rounded-full ring-4 ring-[var(--accent)]" loading="lazy">
+          <h3 class="text-2xl font-bold mb-3" data-translate="team2Name">Leonardo Cuco</h3>
+          <p class="text-base opacity-90" data-translate="team2Desc">E-Commerce Oracle – Orchestrating digital commerce evolutions for MGZon.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Achievements Section -->
+  <section class="py-16">
+    <div class="container mx-auto px-4">
+      <h2 class="text-4xl md:text-6xl font-bold font-orbitron text-center mb-12 neon-gradient" data-translate="achievementsTitle">Milestones</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+        <div class="glass-morphism p-6">
+          <h3 class="text-2xl font-bold mb-4" data-translate="ach1Title">Global Reach</h3>
+          <p class="text-base opacity-90" data-translate="ach1Desc">Serving 10K+ users across 50 countries, powered by AI-driven constellations.</p>
+        </div>
+        <div class="glass-morphism p-6">
+          <h3 class="text-2xl font-bold mb-4" data-translate="ach2Title">Industry Acclaim</h3>
+          <p class="text-base opacity-90" data-translate="ach2Desc">Featured as TechCrunch's top MENA AI innovator – Leading 2024's breakthroughs.</p>
         </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>
+  </section>
+
+  <!-- Our Mission Section -->
+  <section class="py-16 bg-[var(--card-bg)]">
+    <div class="container mx-auto px-4 text-center">
+      <h2 class="text-4xl md:text-6xl font-bold font-orbitron mb-8 neon-gradient" data-translate="missionTitle">Our North Star</h2>
+      <div class="glass-morphism p-8 max-w-3xl mx-auto">
+        <p class="text-lg opacity-90" data-translate="missionDesc">Democratizing AI for creators & enterprises – Streamlining codecraft and amplifying e-commerce realms with ethical innovation and ingenuity.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Contact Nexus -->
+  <footer class="py-16 relative overflow-hidden">
+    <div class="container mx-auto px-4 text-center">
+      <img src="https://mgzon-mgzon-app.hf.space/static/images/mg.svg" alt="MGZon Core" class="w-24 h-24 mx-auto mb-8 logo-pulse" loading="lazy">
+      <p class="mb-8 text-lg opacity-80" data-translate="footerCrafted">Powered by MGZon AI | Innovating in the MENA region</p>
+      <div class="contact-hub mb-8">
+        <div class="contact-pod" onclick="togglePanel('email')">
+          <i class="bx bx-mail-send contact-icon"></i>
+          <h4 class="font-bold mt-2" data-translate="contact1Title">Nexus Mail</h4>
+          <p><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
+          <div id="email-panel" class="details-panel">
+            <p data-translate="contact1Details">Transmit queries into the void – Responses warp in swiftly.</p>
+            <button onclick="togglePanel('email')" class="text-[var(--primary)] mt-2 text-sm underline" data-translate="collapseBtn">Collapse</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 class="contact-pod" onclick="togglePanel('phone')">
+          <i class="bx bx-phone contact-icon"></i>
+          <h4 class="font-bold mt-2" data-translate="contact2Title">Voice Link</h4>
+          <p>+20 1212444617</p>
+          <div id="phone-panel" class="details-panel">
+            <p data-translate="contact2Details">Instant quantum sync for urgent transmissions.</p>
+            <button onclick="togglePanel('phone')" class="text-[var(--primary)] mt-2 text-sm underline" data-translate="collapseBtn">Collapse</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 class="contact-pod" onclick="togglePanel('community')">
+          <i class="bx bx-group contact-icon"></i>
+          <h4 class="font-bold mt-2" data-translate="contact3Title">Collective</h4>
+          <p><a href="https://mgzon-mgzon-app.hf.space/community" class="hover:underline" data-translate="contact3Btn">Assemble</a></p>
+          <div id="community-panel" class="details-panel">
+            <p data-translate="contact3Details">Converge in the hive – Ideas ignite, collaborations supernova.</p>
+            <button onclick="togglePanel('community')" class="text-[var(--primary)] mt-2 text-sm underline" data-translate="collapseBtn">Collapse</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 class="contact-pod" onclick="togglePanel('docs')">
+          <i class="bx bx-code-alt contact-icon"></i>
+          <h4 class="font-bold mt-2" data-translate="contact4Title">Codex</h4>
+          <p><a href="/docs" class="hover:underline" data-translate="contact4Btn">Decrypt</a></p>
+          <div id="docs-panel" class="details-panel">
+            <p data-translate="contact4Details">Unlock the arcane APIs – Seamless fusion awaits.</p>
+            <button onclick="togglePanel('docs')" class="text-[var(--primary)] mt-2 text-sm underline" data-translate="collapseBtn">Collapse</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 class="flex justify-center space-x-6 mb-8">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-[var(--primary)] transition-all duration-300"><i class='bx bxl-github'></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-[var(--primary)] transition-all duration-300"><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-[var(--primary)] transition-all duration-300"><i class='bx bxl-facebook'></i></a>
       </div>
-      <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
+      <p class="opacity-70 text-sm" data-translate="copyright">© 2026 MGZon AI. Eternal in the codeverse.</p>
     </div>
   </footer>
+
+  <!-- JavaScript للـ Hamburger Menu -->
   <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');
+    document.addEventListener('DOMContentLoaded', () => {
+      const hamburger = document.querySelector('.hamburger');
+      const navLinks = document.querySelector('.nav-links');
+      // إضافة كلاس active افتراضيًا على الموبايل
+      if (window.innerWidth <= 768) {
+        navLinks.classList.add('active');
       }
+      hamburger.addEventListener('click', () => {
+        navLinks.classList.toggle('active');
+      });
     });
-    function showCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.remove('hidden');
-    }
-    function closeCardDetails(cardId) {
-      document.getElementById(`${cardId}-details`).classList.add('hidden');
+  </script>
+
+  <!-- JSON-LD -->
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebPage",
+      "name": "About MGZon AI",
+      "url": "https://mgzon-mgzon-app.hf.space/about",
+      "description": "Learn about MGZon AI's mission, technologies, and achievements in AI-powered e-commerce and code generation.",
+      "publisher": {
+        "@type": "Organization",
+        "name": "MGZon AI",
+        "logo": "https://mgzon-mgzon-app.hf.space/static/images/mg.svg"
+      },
+      "inLanguage": "en"
     }
   </script>
 </body>

templates/download.html

@@ -0,0 +1,409 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-device-width, initial-scale=1.0">
+  <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
+  <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
+  <meta name="description" content="Download the MGZon AI app to revolutionize your e-commerce and code generation experience with cutting-edge AI technology.">
+  <meta name="keywords" content="MGZon AI, download app, e-commerce, code generation, AI chatbot, mobile app, 2025 AI trends, 2026 trends">
+  <meta name="author" content="MGZon AI Team">
+  <meta name="robots" content="index, follow">
+  <title data-translate="title">Download MGZon AI App</title>
+  <link rel="canonical" href="https://mgzon-mgzon-app.hf.space/download" />
+  <link rel="icon" type="image/x-icon" href="https://mgzon-mgzon-app.hf.space/static/images/mg.svg">
+  <link rel="apple-touch-icon" href="https://mgzon-mgzon-app.hf.space/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">
+  <!-- Open Graph -->
+  <meta property="og:title" content="Download MGZon AI App">
+  <meta property="og:description" content="Get the MGZon AI app to empower your e-commerce and coding with adaptive intelligence.">
+  <meta property="og:image" content="https://mgzon-mgzon-app.hf.space/static/images/mg.svg">
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/download">
+  <meta property="og:type" content="website">
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Download MGZon AI App">
+  <meta name="twitter:description" content="Get the MGZon AI app to empower your e-commerce and coding with adaptive intelligence.">
+  <meta name="twitter:image" content="https://mgzon-mgzon-app.hf.space/static/images/mg.svg">
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;600;700&family=Cairo:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
+  <!-- GSAP for animations -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
+  <!-- Boxicons -->
+  <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
+
+  <script>
+    if (window.innerWidth > 768) {
+      const threeScript = document.createElement('script');
+      threeScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
+      document.head.appendChild(threeScript);
+      const particlesScript = document.createElement('script');
+      particlesScript.src = 'https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js';
+      document.head.appendChild(particlesScript);
+    }
+  </script>
+
+  <style>
+    :root {
+      --primary: #00f0ff;
+      --secondary: #ff007a;
+      --accent: #6b21a8;
+      --background: #000;
+      --foreground: #f8f9fa;
+      --card-bg: rgba(10, 10, 10, 0.9);
+      --glow-primary: 0 0 25px #00f0ff;
+      --glow-secondary: 0 0 25px #ff007a;
+    }
+    [data-theme="light"] {
+      --background: #f8f9fa;
+      --foreground: #000;
+      --card-bg: rgba(248, 249, 250, 0.9);
+    }
+    body {
+      background: var(--background);
+      color: var(--foreground);
+      font-family: 'Inter', sans-serif;
+      overflow-x: hidden;
+      position: relative;
+      transition: background 0.3s, color 0.3s;
+    }
+    .rtl {
+      direction: rtl;
+      font-family: 'Cairo', sans-serif;
+    }
+    #particles-js, #3d-canvas {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      opacity: 0.3;
+      will-change: transform;
+      display: none;
+    }
+    @media (min-width: 769px) {
+      #particles-js, #3d-canvas { display: block; }
+    }
+    .neon-gradient {
+      background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
+      background-size: 300% 300%;
+      animation: gradientShift 5s ease infinite;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    @keyframes gradientShift {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+    }
+    .glass-morphism {
+      background: rgba(255, 255, 255, 0.02);
+      backdrop-filter: blur(30px);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      border-radius: 16px;
+      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
+      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    .glass-morphism:hover {
+      transform: translateY(-5px) scale(1.02);
+      box-shadow: 0 15px 30px rgba(0, 120, 255, 0.3);
+      border-color: var(--primary);
+    }
+    .hero-section {
+      background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
+      min-height: 80vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    .download-btn {
+      background: linear-gradient(to right, var(--primary), var(--secondary));
+      padding: 16px 32px;
+      border-radius: 50px;
+      font-size: 1.25rem;
+      font-weight: bold;
+      color: #000;
+      transition: all 0.3s ease;
+    }
+    .download-btn:hover {
+      transform: scale(1.05);
+      box-shadow: var(--glow-primary);
+    }
+    .nav-morph {
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid rgba(0, 240, 255, 0.2);
+    }
+    .theme-btn {
+      background: rgba(0, 240, 255, 0.1);
+      border: 1px solid var(--primary);
+      color: var(--primary);
+      border-radius: 50%;
+      width: 36px;
+      height: 36px;
+      transition: all 0.3s ease;
+    }
+    .theme-btn:hover {
+      background: var(--primary);
+      color: #000;
+      box-shadow: var(--glow-primary);
+      transform: rotate(180deg);
+    }
+    .voice-btn {
+      background: rgba(0, 240, 255, 0.1);
+      border: 1px solid var(--primary);
+      color: var(--primary);
+      border-radius: 50%;
+      width: 36px;
+      height: 36px;
+      transition: all 0.3s ease;
+    }
+    .voice-btn:hover {
+      background: var(--primary);
+      color: #000;
+      box-shadow: var(--glow-primary);
+    }
+    .logo-pulse {
+      animation: pulseLogo 2s infinite;
+    }
+    @keyframes pulseLogo {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+    }
+    .search-bar {
+      background: rgba(255,255,255,0.1);
+      border: 1px solid var(--primary);
+      color: var(--foreground);
+      padding: 6px 12px;
+      border-radius: 20px;
+      width: 100%;
+      max-width: 200px;
+    }
+    .voice-status {
+      position: fixed;
+      top: 80px;
+      right: 10px;
+      background: rgba(0,0,0,0.8);
+      color: var(--primary);
+      padding: 6px 12px;
+      border-radius: 20px;
+      display: none;
+      z-index: 1000;
+    }
+    /* تحسينات الـ Navbar */
+    .nav-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 100%;
+      overflow-x: hidden;
+    }
+    .nav-links {
+      display: flex;
+      align-items: center;
+      space-x-4;
+    }
+    .hamburger {
+      display: none;
+      font-size: 24px;
+      color: var(--primary);
+      cursor: pointer;
+    }
+    .search-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    @media (max-width: 768px) {
+      .nav-container {
+        flex-wrap: wrap;
+        padding: 0.5rem 1rem;
+      }
+      .nav-links {
+        flex-direction: column;
+        position: absolute;
+        top: 60px;
+        right: 0;
+        background: var(--card-bg);
+        width: 100%;
+        padding: 1rem;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        z-index: 40;
+        display: flex;
+        opacity: 0;
+        transform: translateY(-10px);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+      }
+      .nav-links.active {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      .hamburger {
+        display: block;
+      }
+      .search-container {
+        margin-top: 0.5rem;
+        width: 100%;
+        justify-content: flex-end;
+      }
+      .search-bar {
+        max-width: 150px;
+      }
+      .theme-btn, .voice-btn {
+        width: 32px;
+        height: 32px;
+      }
+      .hero-section {
+        min-height: 60vh;
+      }
+      .hero-section h1 {
+        font-size: 2.5rem;
+      }
+      .hero-section p {
+        font-size: 1rem;
+      }
+      .hero-section img {
+        width: 100px;
+        height: 100px;
+      }
+      .download-btn {
+        padding: 12px 24px;
+        font-size: 1rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- 3D Ambient -->
+  <canvas id="3d-canvas"></canvas>
+  <!-- Particles -->
+  <div id="particles-js"></div>
+  <!-- Voice Status -->
+  <div id="voice-status" class="voice-status" data-translate="voiceStatus">Listening...</div>
+
+  <!-- Navigation -->
+  <nav class="fixed top-0 w-full nav-morph z-50 py-3">
+    <div class="container mx-auto px-4 nav-container">
+      <div class="flex items-center gap-4">
+        <a href="/" class="text-xl font-bold font-orbitron neon-gradient" data-translate="navLogo">
+          <img src="https://mgzon-mgzon-app.hf.space/static/images/mg.svg" alt="MGZon Logo" class="inline w-6 h-6 logo-pulse mr-2" loading="lazy">
+          MGZon AI
+        </a>
+        <div class="hamburger">
+          <i class='bx bx-menu'></i>
+        </div>
+      </div>
+      <div class="nav-links flex items-center space-x-4">
+        <a href="/" class="text-white hover:text-[var(--primary)] transition-all duration-300 ease-out" data-translate="navHome">Home</a>
+        <a href="/about" class="text-white hover:text-[var(--primary)] transition-all duration-300 ease-out" data-translate="navAbout">About</a>
+        <a href="/chat" class="text-white hover:text-[var(--primary)] transition-all duration-300 ease-out" data-translate="navContact">Launch Chatbot</a>
+        <select id="lang-toggle" class="bg-transparent text-white border-[var(--primary)] rounded-md px-2 py-1">
+          <option value="en">English</option>
+          <option value="ar">العربية</option>
+          <option value="fr">Français</option>
+          <option value="de">Deutsch</option>
+        </select>
+        <button id="theme-toggle" class="theme-btn" data-title-translate="themeTitle">
+          <i class='bx bx-sun'></i>
+        </button>
+      </div>
+      <div class="search-container">
+        <input type="text" id="search-input" class="search-bar" data-translate-placeholder="searchPlaceholder" placeholder="Search...">
+        <button id="voice-toggle" class="voice-btn" data-title-translate="voiceTitle">
+          <i class='bx bx-microphone'></i>
+        </button>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero Section -->
+  <section class="hero-section relative min-h-screen flex items-center justify-center text-center pt-16">
+    <div class="container mx-auto px-4">
+      <img src="https://mgzon-mgzon-app.hf.space/static/images/mg.svg" alt="MGZon App" class="w-48 h-48 mx-auto mb-6 logo-pulse" loading="lazy">
+      <h1 class="text-5xl md:text-7xl font-bold font-orbitron neon-gradient mb-6" data-translate="heroTitle">Download MGZon AI</h1>
+      <p class="text-lg md:text-2xl max-w-3xl mx-auto opacity-80 mb-8" data-translate="heroDesc">Get the MGZon AI app to revolutionize your e-commerce and code generation experience with adaptive intelligence.</p>
+      <a href="https://drive.google.com/file/d/1-gtlJpAQI5ztA1s0EtQAP-RLxkfw2jG_/view?usp=sharing" download class="download-btn inline-flex items-center">
+        Download Now <i class="bx bx-download ml-2"></i>
+        
+      </a> 
+
+    </div>
+  </section>
+
+  <!-- Features Section -->
+  <section class="py-16 bg-[var(--card-bg)]">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl md:text-4xl font-bold font-orbitron text-[var(--primary)] mb-8 text-center" data-translate="featuresTitle">Why MGZon AI?</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+        <div class="glass-morphism p-6 text-center">
+          <i class="bx bx-rocket text-4xl text-[var(--primary)] mb-4"></i>
+          <h3 class="text-xl font-bold mb-3" data-translate="feature1Title">Fast & Efficient</h3>
+          <p class="text-base opacity-90" data-translate="feature1Desc">Streamline your e-commerce and coding tasks with lightning-fast AI.</p>
+        </div>
+        <div class="glass-morphism p-6 text-center">
+          <i class="bx bx-brain text-4xl text-[var(--primary)] mb-4"></i>
+          <h3 class="text-xl font-bold mb-3" data-translate="feature2Title">Smart Chatbot</h3>
+          <p class="text-base opacity-90" data-translate="feature2Desc">Powered by DeepSeek for intelligent, context-aware interactions.</p>
+        </div>
+        <div class="glass-morphism p-6 text-center">
+          <i class="bx bx-globe text-4xl text-[var(--primary)] mb-4"></i>
+          <h3 class="text-xl font-bold mb-3" data-translate="feature3Title">Global Reach</h3>
+          <p class="text-base opacity-90" data-translate="feature3Desc">Seamlessly connect with markets worldwide.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="py-16 relative overflow-hidden">
+    <div class="container mx-auto px-4 text-center">
+      <img src="https://mgzon-mgzon-app.hf.space/static/images/mg.svg" alt="MGZon Core" class="w-24 h-24 mx-auto mb-8 logo-pulse" loading="lazy">
+      <p class="mb-8 text-lg opacity-80" data-translate="footerCrafted">Powered by MGZon AI | Innovating in the MENA region</p>
+      <div class="flex justify-center space-x-6 mb-8">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-[var(--primary)] transition-all duration-300"><i class='bx bxl-github'></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-[var(--primary)] transition-all duration-300"><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-[var(--primary)] transition-all duration-300"><i class='bx bxl-facebook'></i></a>
+      </div>
+      <p class="opacity-70 text-sm" data-translate="copyright">© 2026 MGZon AI. Eternal in the codeverse.</p>
+    </div>
+  </footer>
+
+  <!-- JavaScript للـ Hamburger Menu -->
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const hamburger = document.querySelector('.hamburger');
+      const navLinks = document.querySelector('.nav-links');
+      if (window.innerWidth <= 768) {
+        navLinks.classList.add('active');
+      }
+      hamburger.addEventListener('click', () => {
+        navLinks.classList.toggle('active');
+      });
+    });
+  </script>
+
+  <!-- JSON-LD -->
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebPage",
+      "name": "Download MGZon AI App",
+      "url": "https://mgzon-mgzon-app.hf.space/download",
+      "description": "Download the MGZon AI app to revolutionize your e-commerce and code generation experience with cutting-edge AI technology.",
+      "publisher": {
+        "@type": "Organization",
+        "name": "MGZon AI",
+        "logo": "https://mgzon-mgzon-app.hf.space/static/images/mg.svg"
+      },
+      "inLanguage": "en"
+    }
+  </script>
+    <script src="/static/js/about.js" defer></script>
+</body>
+</html>

templates/profile.html

@@ -5,9 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Profile of Mark Al-Asfar, AI Developer and Founder of MGZon Chatbot.">
     <meta name="keywords" content="Mark Al-Asfar, AI Developer, MGZon, Chatbot Developer, Full Stack Developer">
-
+     <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
+    <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
     <meta name="author" content="Mark Al-Asfar">
     <title>Mark Al-Asfar - AI Developer</title>
+    <link rel="canonical" href="https://mgzon-mgzon-app.hf.space/profile" />
     <link rel="manifest" href="https://mgzon-mgzon-app.hf.space/static/manifest.json">
     <link rel="apple-touch-icon" sizes="180x180" href="https://mgzon-mgzon-app.hf.space/static/images/mg.svg">
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -32,7 +34,7 @@
             "@type": "Person",
             "name": "Mark Elasfar",
             "url": "https://mark-elasfar.web.app/",
-            "image": "https://mark-elasfar.web.app/profile.jpg",
+            "image": "https://mark-elasfar.web.app/assets/img/mac.png",
             "jobTitle": "AI Developer and Founder of MGZon",
             "description": "Mark Al-Asfar is a developer specializing in AI, web development, and e-commerce solutions. He is the founder of MGZon, an AI-powered chatbot platform.",
             "sameAs": [
@@ -43,7 +45,7 @@
             "worksFor": {
                 "@type": "Organization",
                 "name": "MGZon",
-                "url": "https://mgzon-mgzon-app.hf.space/"
+                "url": "https://mgzon-mgzon-app.hf.space/profile"
             },
             "inLanguage": "en"
         },
@@ -51,7 +53,7 @@
             "@context": "https://schema.org",
             "@type": "WebSite",
             "name": "MGZon Chatbot",
-            "url": "https://mgzon-mgzon-app.hf.space/",
+            "url": "https://mgzon-mgzon-app.hf.space/profile",
             "description": "MGZon is an AI-powered chatbot for code generation, web search, and e-commerce solutions, developed by Mark Al-Asfar.",
             "keywords": "AI chatbot, code generation, e-commerce AI, offline AI, TTS Arabic",
             "potentialAction": {
@@ -63,7 +65,8 @@
         }
     ]
     </script>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
+
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
@@ -615,8 +618,8 @@
                 </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://github.com/Mark-Lasfar" 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/mgz0n" 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>