Upload 7 files

database/db.py

@@ -0,0 +1,125 @@
+import requests
+from bs4 import BeautifulSoup
+import json
+
+
+# Step 1: Fetch the authenticity_token and commitOid from the GitHub edit page
+def fetch_authenticity_token_and_commit_oid():
+    url = "https://github.com/omarnuwrar/facebook_users/edit/main/user.json"
+
+    headers = {
+        "cookie": "_octo=GH1.1.1509769180.1721774314; _device_id=0038e28d4f7d4f9baf8f76b6b9fb8980; GHCC=Required:1-Analytics:1-SocialMedia:1-Advertising:1; MicrosoftApplicationsTelemetryDeviceId=c58113b4-9acb-4ba8-b9f2-4217bdef379a; MSFPC=GUID=79b87b010d464a8783fbf43e19eccddf&HASH=79b8&LV=202408&V=4&LU=1723654762596; saved_user_sessions=155741452%3A-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; user_session=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; __Host-user_session_same_site=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; logged_in=yes; dotcom_user=omarnuwrar; color_mode=%7B%22color_mode%22%3A%22auto%22%2C%22light_theme%22%3A%7B%22name%22%3A%22light%22%2C%22color_mode%22%3A%22light%22%7D%2C%22dark_theme%22%3A%7B%22name%22%3A%22dark%22%2C%22color_mode%22%3A%22dark%22%7D%7D; cpu_bucket=lg; preferred_color_mode=light; tz=Africa%2FTripoli; _gh_sess=Et3VoSldT9M0OPTf1sAMnJKFUFz8Il9SUj24IRU%2Fqgm5093fAYCP53rl01WZ9gCQ3IXTbj7hJzD7v%2F5yZ2xA9frNZOh0hUIjgimhL2EMFDCm4p5ffx1nhXyxZl4RyhKn2S%2Fe4Z%2FU1zlJAink62m1J8m%2BDdJBMeGXfA02osNdhbGGvsSZr1zIDYQqpwxU02xCB4L63wjwYx4DW7sZm3g8rZ61FXTF%2BBpgIJ71n6oIjzy68WE1yXmMApZin%2Fn6N%2FCR%2FHElbo7kbeEketYuHH7eUJzsgBnSDkW3BtXeY6NID5vpcZC7LTdI3rU4cRGZw50BBOINnmp90VWnRUlA6UI9EH8YVkRWIchrmd1ZWv13LywwUdM6WUVQYgky9jObbEnA--DLzBDC0Q3Nc6ruc9--S2YvbxU4k8fZSN11zJMD%2FA%3D%3D",
+        "if-none-match": 'W/"2ff86bd1792cfee5ed79ee070b3b46de"',
+        "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
+        "x-github-target": "dotcom",
+        "x-react-router": "json",
+        "x-requested-with": "XMLHttpRequest",
+    }
+
+    response = requests.get(url, headers=headers)
+
+    if response.status_code == 200:
+        soup = BeautifulSoup(response.text, 'html.parser')
+        script_tag = soup.find("script", {"type": "application/json", "data-target": "react-app.embeddedData"})
+
+        if script_tag:
+            try:
+                json_data = json.loads(script_tag.string.strip())
+                authenticity_token = json_data["payload"]["csrf_tokens"]["/omarnuwrar/facebook_users/tree-save/main/user.json"]["post"]
+                commit_oid = json_data["payload"]["webCommitInfo"]["commitOid"]
+                return authenticity_token, commit_oid
+            except (KeyError, json.JSONDecodeError) as e:
+                print(f"Error: Failed to extract data. Details: {str(e)}")
+                return None, None
+        else:
+            print("Error: Could not find the required <script> tag.")
+            return None, None
+    else:
+        print(f"Error: Failed to fetch the page. Status code: {response.status_code}")
+        return None, None
+
+# Step 2: Send the POST request to update the user.json file
+def update_user_json_file(authenticity_token, commit_oid, new_content):
+    url = "https://github.com/omarnuwrar/facebook_users/tree-save/main/user.json"
+
+    headers = {
+        "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
+        "x-requested-with": "XMLHttpRequest",
+        "github-verified-fetch": "true",
+        "content-type": "application/x-www-form-urlencoded",
+        "cookie": "_octo=GH1.1.1509769180.1721774314; _device_id=0038e28d4f7d4f9baf8f76b6b9fb8980; GHCC=Required:1-Analytics:1-SocialMedia:1-Advertising:1; MicrosoftApplicationsTelemetryDeviceId=c58113b4-9acb-4ba8-b9f2-4217bdef379a; MSFPC=GUID=79b87b010d464a8783fbf43e19eccddf&HASH=79b8&LV=202408&V=4&LU=1723654762596; saved_user_sessions=155741452%3A-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; user_session=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; __Host-user_session_same_site=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; logged_in=yes; dotcom_user=omarnuwrar; color_mode=%7B%22color_mode%22%3A%22auto%22%2C%22light_theme%22%3A%7B%22name%22%3A%22light%22%2C%22color_mode%22%3A%22light%22%7D%2C%22dark_theme%22%3A%7B%22name%22%3A%22dark%22%2C%22color_mode%22%3A%22dark%22%7D%7D; cpu_bucket=lg; preferred_color_mode=light; tz=Africa%2FTripoli; _gh_sess=iGiHV2pREeAQUlLWkb1wo811bKhhuAzlVs5AtTemyU3AiBZ7YoWmORTAktrhyJB4jDGKBILs7RalWi8VR8vZkzaUQvvIL6OPlBjjjN7Pa6SUkyG4EUrg2HIRcffC476tf0zVeiKp%2F4JYXb%2BQdxIQnLkJCcW1%2FZUzyJEdxN4TH6nxdP6WcZjlMLqON0jfBWRrZ04L7TbV10y%2BTg09oAajFnv6OHAzMvmhyysN7hd7%2FEE4OvIMbcabKeDzO%2FjIIjIvdkyyb3C4Ct0x6iHMtkaKwuTWnIeU7K9GCu8z1jg6xu79wW3QuVe7qsoHUrpeSu8%2FgfBwhhlIt05OiUO5lHOh%2FfTlJW1YNUGD1HHc2upfSn3BByveMzH%2FLWIgJxJNbxu7--Vp%2B%2BUTGEI0obQY0r--qJ%2FCfe6eR4OcpfnxHoQfDg%3D%3D",
+    }
+
+    payload = {
+        "message": "Update user.json",
+        "placeholder_message": "Update user.json",
+        "description": "",
+        "commit-choice": "direct",
+        "target_branch": "main",
+        "quick_pull": "",
+        "guidance_task": "",
+        "commit": commit_oid,
+        "same_repo": "1",
+        "pr": "",
+        "content_changed": "true",
+        "filename": "user.json",
+        "new_filename": "user.json",
+        "value": new_content,
+        "authenticity_token": authenticity_token,
+    }
+
+    response = requests.post(url, headers=headers, data=payload)
+
+    if response.status_code == 200:
+        return {"success": True, "message": "user.json has been updated!"}
+    else:
+        return {"success": False, "message": f"Request failed with status code {response.status_code}", "details": response.text}
+
+
+
+# Function to fetch and extract the JSON data
+def fetch_json_from_github():
+    # URL of the GitHub page
+    url = "https://github.com/omarnuwrar/facebook_users/blob/main/user.json"
+    
+    # Custom headers
+    headers = {
+        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
+        "Cookie": "_octo=GH1.1.1509769180.1721774314; _device_id=0038e28d4f7d4f9baf8f76b6b9fb8980; GHCC=Required:1-Analytics:1-SocialMedia:1-Advertising:1; MicrosoftApplicationsTelemetryDeviceId=c58113b4-9acb-4ba8-b9f2-4217bdef379a; MSFPC=GUID=79b87b010d464a8783fbf43e19eccddf&HASH=79b8&LV=202408&V=4&LU=1723654762596; saved_user_sessions=155741452%3A-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; user_session=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; __Host-user_session_same_site=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; logged_in=yes; dotcom_user=omarnuwrar; color_mode=%7B%22color_mode%22%3A%22auto%22%2C%22light_theme%22%3A%7B%22name%22%3A%22light%22%2C%22color_mode%22%3A%22light%22%7D%2C%22dark_theme%22%3A%7B%22name%22%3A%22dark%22%2C%22color_mode%22%3A%22dark%22%7D%7D; cpu_bucket=lg; preferred_color_mode=light; tz=Africa%2FTripoli; _gh_sess=x%2FUolEogMJm8xgplCEKLt%2Bjr2fy%2F32MeeXdsPUHdt0Wsm9LJL%2FKoQvBK8m917eOkeQ%2FLQ3ZYhpr5GYWIZg6ppbEcN8uRr7wvLyeD0H7xsr1OBuE7PLtY37f6jHoGjAxkZeNXEZGuYhlxI%2FVujsH7VmHgEg7IMo54gAxe3LeaMg3TgOkMydkJnnvNwflqY5b%2FqCBDaDvp3OqnaORUpiwLPUx74SZmMvKiQqxP2QCTh6Jp6W6aVeow%2FJOfAHzP7ht5%2BcxpNc8Oj5dtxo%2FhvFC1OS6bk%2BZLSg46HFGPVMgVAU3g2NLGkC2shtjR9pAri%2FEj5e%2BYmkJIsH%2FwImQM%2BbERdCn2Yx1%2BN3bKiPZUZmYUypgEvy4zBu6hD8Ged36j2BHZ--wZa14jvl23NHDEOt--A%2BjPZnS%2FCvd5pmuzbEl%2B7Q%3D%3D"
+    }
+
+    try:
+        # Fetch the HTML content of the page
+        response = requests.get(url, headers=headers)
+        response.raise_for_status()  # Raise an exception for HTTP errors
+
+        # Parse the HTML using BeautifulSoup
+        soup = BeautifulSoup(response.text, 'html.parser')
+        
+        # Find the <script> tag with type="application/json" and `data-target="react-app.embeddedData"`
+        script_tag = soup.find('script', {'type': 'application/json', 'data-target': 'react-app.embeddedData'})
+        if script_tag:
+            # Load the JSON content from the <script> tag
+            embedded_data = json.loads(script_tag.string)
+            
+            # Navigate to the "blob" > "rawLines" key for the JSON in the file
+            raw_lines = embedded_data.get("payload", {}).get("blob", {}).get("rawLines", [])
+            if raw_lines:
+                # The JSON content is in the first element of the rawLines list
+                json_content = raw_lines[0]
+                
+                # Parse the JSON content
+                data = json.loads(json_content)
+                
+                # Return the extracted JSON data
+                return {"success": True, "data": data}
+            else:
+                return {"success": False, "message": "JSON data not found in the 'rawLines' key."}
+        else:
+            return {"success": False, "message": "Could not find the <script> tag with embedded JSON data."}
+    except requests.exceptions.RequestException as e:
+        return {"success": False, "message": f"Error fetching data: {e}"}
+    except json.JSONDecodeError as je:
+        return {"success": False, "message": f"Error parsing JSON: {je}"}
+
+

database/msg.py

@@ -0,0 +1,126 @@
+import requests
+from bs4 import BeautifulSoup
+import json
+
+
+# Step 1: Fetch the authenticity_token and commitOid from the GitHub edit page
+def fetch_authenticity_token_and_commit_oid():
+    url = "https://github.com/omarnuwrar/facebook_users/edit/main/messages.json"
+
+    headers = {
+        "cookie": "_octo=GH1.1.1509769180.1721774314; _device_id=0038e28d4f7d4f9baf8f76b6b9fb8980; GHCC=Required:1-Analytics:1-SocialMedia:1-Advertising:1; MicrosoftApplicationsTelemetryDeviceId=c58113b4-9acb-4ba8-b9f2-4217bdef379a; MSFPC=GUID=79b87b010d464a8783fbf43e19eccddf&HASH=79b8&LV=202408&V=4&LU=1723654762596; saved_user_sessions=155741452%3A-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; user_session=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; __Host-user_session_same_site=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; logged_in=yes; dotcom_user=omarnuwrar; color_mode=%7B%22color_mode%22%3A%22auto%22%2C%22light_theme%22%3A%7B%22name%22%3A%22light%22%2C%22color_mode%22%3A%22light%22%7D%2C%22dark_theme%22%3A%7B%22name%22%3A%22dark%22%2C%22color_mode%22%3A%22dark%22%7D%7D; cpu_bucket=lg; preferred_color_mode=light; tz=Africa%2FTripoli; _gh_sess=Et3VoSldT9M0OPTf1sAMnJKFUFz8Il9SUj24IRU%2Fqgm5093fAYCP53rl01WZ9gCQ3IXTbj7hJzD7v%2F5yZ2xA9frNZOh0hUIjgimhL2EMFDCm4p5ffx1nhXyxZl4RyhKn2S%2Fe4Z%2FU1zlJAink62m1J8m%2BDdJBMeGXfA02osNdhbGGvsSZr1zIDYQqpwxU02xCB4L63wjwYx4DW7sZm3g8rZ61FXTF%2BBpgIJ71n6oIjzy68WE1yXmMApZin%2Fn6N%2FCR%2FHElbo7kbeEketYuHH7eUJzsgBnSDkW3BtXeY6NID5vpcZC7LTdI3rU4cRGZw50BBOINnmp90VWnRUlA6UI9EH8YVkRWIchrmd1ZWv13LywwUdM6WUVQYgky9jObbEnA--DLzBDC0Q3Nc6ruc9--S2YvbxU4k8fZSN11zJMD%2FA%3D%3D",
+        "if-none-match": 'W/"2ff86bd1792cfee5ed79ee070b3b46de"',
+        "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
+        "x-github-target": "dotcom",
+        "x-react-router": "json",
+        "x-requested-with": "XMLHttpRequest",
+    }
+
+    response = requests.get(url, headers=headers)
+
+    if response.status_code == 200:
+        soup = BeautifulSoup(response.text, 'html.parser')
+        script_tag = soup.find("script", {"type": "application/json", "data-target": "react-app.embeddedData"})
+
+        if script_tag:
+            try:
+                json_data = json.loads(script_tag.string.strip())
+                authenticity_token = json_data["payload"]["csrf_tokens"]["/omarnuwrar/facebook_users/tree-save/main/messages.json"]["post"]
+                commit_oid = json_data["payload"]["webCommitInfo"]["commitOid"]
+                return authenticity_token, commit_oid
+            except (KeyError, json.JSONDecodeError) as e:
+                print(f"Error: Failed to extract data. Details: {str(e)}")
+                return None, None
+        else:
+            print("Error: Could not find the required <script> tag.")
+            return None, None
+    else:
+        print(f"Error: Failed to fetch the page. Status code: {response.status_code}")
+        return None, None
+
+# Step 2: Send the POST request to update the messages.json file
+def update_user_json_file(authenticity_token, commit_oid, new_content):
+    url = "https://github.com/omarnuwrar/facebook_users/tree-save/main/messages.json"
+
+    headers = {
+        "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
+        "x-requested-with": "XMLHttpRequest",
+        "github-verified-fetch": "true",
+        "content-type": "application/x-www-form-urlencoded",
+        "cookie": "_octo=GH1.1.1509769180.1721774314; _device_id=0038e28d4f7d4f9baf8f76b6b9fb8980; GHCC=Required:1-Analytics:1-SocialMedia:1-Advertising:1; MicrosoftApplicationsTelemetryDeviceId=c58113b4-9acb-4ba8-b9f2-4217bdef379a; MSFPC=GUID=79b87b010d464a8783fbf43e19eccddf&HASH=79b8&LV=202408&V=4&LU=1723654762596; saved_user_sessions=155741452%3A-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; user_session=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; __Host-user_session_same_site=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; logged_in=yes; dotcom_user=omarnuwrar; color_mode=%7B%22color_mode%22%3A%22auto%22%2C%22light_theme%22%3A%7B%22name%22%3A%22light%22%2C%22color_mode%22%3A%22light%22%7D%2C%22dark_theme%22%3A%7B%22name%22%3A%22dark%22%2C%22color_mode%22%3A%22dark%22%7D%7D; cpu_bucket=lg; preferred_color_mode=light; tz=Africa%2FTripoli; _gh_sess=iGiHV2pREeAQUlLWkb1wo811bKhhuAzlVs5AtTemyU3AiBZ7YoWmORTAktrhyJB4jDGKBILs7RalWi8VR8vZkzaUQvvIL6OPlBjjjN7Pa6SUkyG4EUrg2HIRcffC476tf0zVeiKp%2F4JYXb%2BQdxIQnLkJCcW1%2FZUzyJEdxN4TH6nxdP6WcZjlMLqON0jfBWRrZ04L7TbV10y%2BTg09oAajFnv6OHAzMvmhyysN7hd7%2FEE4OvIMbcabKeDzO%2FjIIjIvdkyyb3C4Ct0x6iHMtkaKwuTWnIeU7K9GCu8z1jg6xu79wW3QuVe7qsoHUrpeSu8%2FgfBwhhlIt05OiUO5lHOh%2FfTlJW1YNUGD1HHc2upfSn3BByveMzH%2FLWIgJxJNbxu7--Vp%2B%2BUTGEI0obQY0r--qJ%2FCfe6eR4OcpfnxHoQfDg%3D%3D",
+    }
+
+    payload = {
+        "message": "Update messages.json",
+        "placeholder_message": "Update messages.json",
+        "description": "",
+        "commit-choice": "direct",
+        "target_branch": "main",
+        "quick_pull": "",
+        "guidance_task": "",
+        "commit": commit_oid,
+        "same_repo": "1",
+        "pr": "",
+        "content_changed": "true",
+        "filename": "messages.json",
+        "new_filename": "messages.json",
+        "value": new_content,
+        "authenticity_token": authenticity_token,
+    }
+
+    response = requests.post(url, headers=headers, data=payload)
+
+    if response.status_code == 200:
+        return {"success": True, "message": "messages.json has been updated!"}
+    else:
+        return {"success": False, "message": f"Request failed with status code {response.status_code}", "details": response.text}
+
+
+
+# Function to fetch and extract the JSON data
+def fetch_json_from_github():
+    # URL of the GitHub page
+    url = "https://github.com/omarnuwrar/facebook_users/blob/main/messages.json"
+    
+    # Custom headers
+    headers = {
+        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
+        "Cookie": "_octo=GH1.1.1509769180.1721774314; _device_id=0038e28d4f7d4f9baf8f76b6b9fb8980; GHCC=Required:1-Analytics:1-SocialMedia:1-Advertising:1; MicrosoftApplicationsTelemetryDeviceId=c58113b4-9acb-4ba8-b9f2-4217bdef379a; MSFPC=GUID=79b87b010d464a8783fbf43e19eccddf&HASH=79b8&LV=202408&V=4&LU=1723654762596; saved_user_sessions=155741452%3A-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; user_session=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; __Host-user_session_same_site=-zRjSJs7jZqrr1__FmMhrYJm9FbPo9S5piz0arT1xJWkOgH4; logged_in=yes; dotcom_user=omarnuwrar; color_mode=%7B%22color_mode%22%3A%22auto%22%2C%22light_theme%22%3A%7B%22name%22%3A%22light%22%2C%22color_mode%22%3A%22light%22%7D%2C%22dark_theme%22%3A%7B%22name%22%3A%22dark%22%2C%22color_mode%22%3A%22dark%22%7D%7D; cpu_bucket=lg; preferred_color_mode=light; tz=Africa%2FTripoli; _gh_sess=x%2FUolEogMJm8xgplCEKLt%2Bjr2fy%2F32MeeXdsPUHdt0Wsm9LJL%2FKoQvBK8m917eOkeQ%2FLQ3ZYhpr5GYWIZg6ppbEcN8uRr7wvLyeD0H7xsr1OBuE7PLtY37f6jHoGjAxkZeNXEZGuYhlxI%2FVujsH7VmHgEg7IMo54gAxe3LeaMg3TgOkMydkJnnvNwflqY5b%2FqCBDaDvp3OqnaORUpiwLPUx74SZmMvKiQqxP2QCTh6Jp6W6aVeow%2FJOfAHzP7ht5%2BcxpNc8Oj5dtxo%2FhvFC1OS6bk%2BZLSg46HFGPVMgVAU3g2NLGkC2shtjR9pAri%2FEj5e%2BYmkJIsH%2FwImQM%2BbERdCn2Yx1%2BN3bKiPZUZmYUypgEvy4zBu6hD8Ged36j2BHZ--wZa14jvl23NHDEOt--A%2BjPZnS%2FCvd5pmuzbEl%2B7Q%3D%3D"
+    }
+
+    try:
+        # Fetch the HTML content of the page
+        response = requests.get(url, headers=headers)
+        response.raise_for_status()  # Raise an exception for HTTP errors
+
+        # Parse the HTML using BeautifulSoup
+        soup = BeautifulSoup(response.text, 'html.parser')
+        
+        # Find the <script> tag with type="application/json" and `data-target="react-app.embeddedData"`
+        script_tag = soup.find('script', {'type': 'application/json', 'data-target': 'react-app.embeddedData'})
+        if script_tag:
+            # Load the JSON content from the <script> tag
+            embedded_data = json.loads(script_tag.string)
+            
+            # Navigate to the "blob" > "rawLines" key for the JSON in the file
+            raw_lines = embedded_data.get("payload", {}).get("blob", {}).get("rawLines", [])
+            if raw_lines:
+                # The JSON content is in the first element of the rawLines list
+                json_content = raw_lines[0]
+                
+                # Parse the JSON content
+                data = json.loads(json_content)
+                
+                # Return the extracted JSON data
+                return {"success": True, "data": data}
+            else:
+                return {"success": False, "message": "JSON data not found in the 'rawLines' key."}
+        else:
+            return {"success": False, "message": "Could not find the <script> tag with embedded JSON data."}
+    except requests.exceptions.RequestException as e:
+        return {"success": False, "message": f"Error fetching data: {e}"}
+    except json.JSONDecodeError as je:
+        return {"success": False, "message": f"Error parsing JSON: {je}"}
+
+
+

templates/dashboard.html

@@ -0,0 +1,2046 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>نانو بوت - لوحة التحكم</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #4361ee;
+            --primary-light: #4895ef;
+            --primary-dark: #3f37c9;
+            --secondary-color: #4cc9f0;
+            --success-color: #4caf50;
+            --danger-color: #f72585;
+            --warning-color: #ff9e00;
+            --info-color: #3a86ff;
+            --light-color: #f8f9fa;
+            --dark-color: #212529;
+            --body-bg: #f0f5ff;
+            --card-bg: #ffffff;
+            --border-color: #e9ecef;
+            --text-color: #333;
+            --text-muted: #6c757d;
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
+            --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.07);
+            --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
+            --transition: all 0.3s ease;
+            --border-radius: 12px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Tajawal', sans-serif;
+        }
+
+        body {
+            background-color: var(--body-bg);
+            color: var(--text-color);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Scrollbar Styling */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--primary-light);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--primary-color);
+        }
+
+        /* Navigation */
+        .navbar {
+            background-color: var(--card-bg);
+            color: var(--text-color);
+            padding: 15px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: var(--shadow-md);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .navbar-brand {
+            display: flex;
+            align-items: center;
+            font-size: 22px;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+
+        .navbar-brand svg {
+            width: 28px;
+            height: 28px;
+            margin-left: 10px;
+            fill: var(--primary-color);
+        }
+
+        .navbar-nav {
+            display: flex;
+            align-items: center;
+        }
+
+        .nav-item {
+            margin-right: 20px;
+        }
+
+        .nav-link {
+            color: var(--text-color);
+            text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+        }
+
+        .nav-link:hover {
+            color: var(--primary-color);
+        }
+
+        .nav-link svg {
+            margin-left: 5px;
+            width: 18px;
+            height: 18px;
+        }
+
+        .container {
+            max-width: 1200px;
+            width: 100%;
+            margin: 0 auto;
+            padding: 20px;
+            flex: 1;
+        }
+
+        /* Dashboard Grid */
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 20px;
+        }
+
+        @media (min-width: 768px) {
+            .dashboard-grid {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+
+        @media (min-width: 1200px) {
+            .dashboard-grid {
+                grid-template-columns: 1fr 1fr 1fr;
+            }
+        }
+
+        /* Cards */
+        .card {
+            background-color: var(--card-bg);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-sm);
+            transition: var(--transition);
+            overflow: hidden;
+            height: 100%;
+        }
+
+        .card:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-3px);
+        }
+
+        .card-header {
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: rgba(67, 97, 238, 0.05);
+        }
+
+        .card-title {
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+        }
+
+        .card-title svg {
+            margin-left: 8px;
+            width: 20px;
+            height: 20px;
+        }
+
+        .card-body {
+            padding: 20px;
+        }
+
+        .card-footer {
+            padding: 15px 20px;
+            border-top: 1px solid var(--border-color);
+            background-color: rgba(67, 97, 238, 0.03);
+        }
+
+        /* Status Card */
+        .status-card {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            padding: 30px 20px;
+        }
+
+        .status-icon {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 15px;
+            background-color: rgba(67, 97, 238, 0.1);
+        }
+
+        .status-icon svg {
+            width: 40px;
+            height: 40px;
+            fill: var(--primary-color);
+        }
+
+        .status-title {
+            font-size: 20px;
+            font-weight: 700;
+            margin-bottom: 10px;
+        }
+
+        .status-subtitle {
+            color: var(--text-muted);
+            margin-bottom: 20px;
+        }
+
+        /* Switch */
+        .switch-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
+            margin: 0 10px;
+        }
+
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: .4s;
+            border-radius: 34px;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+
+        input:checked + .slider {
+            background-color: var(--success-color);
+        }
+
+        input:focus + .slider {
+            box-shadow: 0 0 1px var(--success-color);
+        }
+
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+
+        .switch-label {
+            font-weight: 500;
+        }
+
+        /* Info Cards */
+        .info-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .info-item:last-child {
+            margin-bottom: 0;
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+
+        .info-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 15px;
+            flex-shrink: 0;
+        }
+
+        .info-icon.primary {
+            background-color: rgba(67, 97, 238, 0.1);
+            color: var(--primary-color);
+        }
+
+        .info-icon.success {
+            background-color: rgba(76, 175, 80, 0.1);
+            color: var(--success-color);
+        }
+
+        .info-icon.warning {
+            background-color: rgba(255, 158, 0, 0.1);
+            color: var(--warning-color);
+        }
+
+        .info-icon svg {
+            width: 20px;
+            height: 20px;
+        }
+
+        .info-content {
+            flex: 1;
+        }
+
+        .info-label {
+            font-size: 14px;
+            color: var(--text-muted);
+            margin-bottom: 5px;
+        }
+
+        .info-value {
+            font-size: 16px;
+            font-weight: 700;
+        }
+
+        /* Forms */
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 12px 15px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            font-size: 16px;
+            transition: var(--transition);
+            background-color: var(--light-color);
+        }
+
+        .form-control:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
+        }
+
+        textarea.form-control {
+            min-height: 120px;
+            resize: vertical;
+        }
+
+        /* Buttons */
+        .btn {
+            display: inline-block;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
+            text-align: center;
+            text-decoration: none;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: var(--primary-dark);
+        }
+
+        .btn-success {
+            background-color: var(--success-color);
+            color: white;
+        }
+
+        .btn-success:hover {
+            background-color: #3d8b40;
+        }
+
+        .btn-danger {
+            background-color: var(--danger-color);
+            color: white;
+        }
+
+        .btn-danger:hover {
+            background-color: #d61a6c;
+        }
+
+        .btn-sm {
+            padding: 6px 12px;
+            font-size: 14px;
+        }
+
+        .btn-block {
+            display: block;
+            width: 100%;
+        }
+
+        /* Products List */
+        .product-list {
+            margin-top: 20px;
+        }
+
+        .product-item {
+            background-color: var(--light-color);
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 15px;
+            position: relative;
+            transition: var(--transition);
+        }
+
+        .product-item:hover {
+            box-shadow: var(--shadow-sm);
+        }
+
+        .product-title {
+            font-weight: 700;
+            margin-bottom: 5px;
+            padding-left: 30px;
+        }
+
+        .product-price {
+            color: var(--primary-color);
+            font-weight: 700;
+            margin-bottom: 10px;
+        }
+
+        .product-description {
+            color: var(--text-muted);
+            font-size: 14px;
+            margin-bottom: 10px;
+        }
+
+        .product-actions {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            display: flex;
+            gap: 5px;
+        }
+
+        .action-btn {
+            width: 30px;
+            height: 30px;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .action-btn.edit {
+            background-color: rgba(58, 134, 255, 0.1);
+            color: var(--info-color);
+        }
+
+        .action-btn.delete {
+            background-color: rgba(247, 37, 133, 0.1);
+            color: var(--danger-color);
+        }
+
+        .action-btn:hover {
+            transform: translateY(-2px);
+        }
+
+        .action-btn svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        /* Tabs */
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 20px;
+            overflow-x: auto;
+            scrollbar-width: none; /* Firefox */
+        }
+
+        .tabs::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera */
+        }
+
+        .tab-item {
+            padding: 12px 20px;
+            font-weight: 500;
+            color: var(--text-muted);
+            cursor: pointer;
+            transition: var(--transition);
+            white-space: nowrap;
+        }
+
+        .tab-item.active {
+            color: var(--primary-color);
+            border-bottom: 2px solid var(--primary-color);
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        /* Modal */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: var(--transition);
+        }
+
+        .modal-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .modal {
+            background-color: var(--card-bg);
+            border-radius: var(--border-radius);
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+            box-shadow: var(--shadow-lg);
+            transform: translateY(20px);
+            transition: var(--transition);
+        }
+
+        .modal-overlay.active .modal {
+            transform: translateY(0);
+        }
+
+        .modal-header {
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-title {
+            font-size: 18px;
+            font-weight: 700;
+        }
+
+        .modal-close {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 20px;
+            color: var(--text-muted);
+        }
+
+        .modal-body {
+            padding: 20px;
+        }
+
+        .modal-footer {
+            padding: 15px 20px;
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+        }
+
+        /* Notifications */
+        .notification-container {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            z-index: 1001;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            pointer-events: none;
+        }
+
+        .notification {
+            background-color: var(--card-bg);
+            border-radius: 8px;
+            box-shadow: var(--shadow-md);
+            padding: 15px 20px;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            max-width: 400px;
+            transform: translateY(-20px);
+            opacity: 0;
+            transition: all 0.3s ease;
+            pointer-events: auto;
+        }
+
+        .notification.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+
+        .notification-icon {
+            width: 24px;
+            height: 24px;
+            margin-left: 15px;
+            flex-shrink: 0;
+        }
+
+        .notification-content {
+            flex: 1;
+        }
+
+        .notification-title {
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+
+        .notification-message {
+            font-size: 14px;
+            color: var(--text-muted);
+        }
+
+        .notification-close {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-muted);
+            margin-right: -5px;
+        }
+
+        .notification.success .notification-icon {
+            color: var(--success-color);
+        }
+
+        .notification.error .notification-icon {
+            color: var(--danger-color);
+        }
+
+        .notification.info .notification-icon {
+            color: var(--info-color);
+        }
+
+        /* Loading */
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(255, 255, 255, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 2000;
+            opacity: 0;
+            visibility: hidden;
+            transition: var(--transition);
+        }
+
+        .loading-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(67, 97, 238, 0.2);
+            border-radius: 50%;
+            border-top-color: var(--primary-color);
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Badges */
+        .badge {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 700;
+        }
+
+        .badge-success {
+            background-color: rgba(76, 175, 80, 0.1);
+            color: var(--success-color);
+        }
+
+        .badge-danger {
+            background-color: rgba(247, 37, 133, 0.1);
+            color: var(--danger-color);
+        }
+
+        .badge-warning {
+            background-color: rgba(255, 158, 0, 0.1);
+            color: var(--warning-color);
+        }
+
+        /* Responsive Adjustments */
+        @media (max-width: 768px) {
+            .navbar {
+                padding: 10px 15px;
+            }
+
+            .navbar-brand {
+                font-size: 18px;
+            }
+
+            .container {
+                padding: 15px;
+            }
+
+            .card-header {
+                padding: 12px 15px;
+            }
+
+            .card-body {
+                padding: 15px;
+            }
+
+            .status-icon {
+                width: 60px;
+                height: 60px;
+            }
+
+            .status-icon svg {
+                width: 30px;
+                height: 30px;
+            }
+
+            .status-title {
+                font-size: 18px;
+            }
+        }
+    </style>
+
+<style>
+    /* Message Badge */
+    .message-badge {
+        background-color: var(--danger-color);
+        color: white;
+        border-radius: 50%;
+        padding: 2px 6px;
+        font-size: 12px;
+        position: absolute;
+        top: -5px;
+        left: -5px;
+        font-weight: bold;
+    }
+
+    .nav-link {
+        position: relative;
+    }
+
+    /* Expiration Warning */
+    .expiration-warning {
+        color: var(--danger-color);
+        font-weight: 500;
+        margin-top: 5px;
+        font-size: 14px;
+    }
+
+    /* Confirmation Modal */
+    .confirm-modal {
+        background-color: var(--card-bg);
+        border-radius: var(--border-radius);
+        width: 90%;
+        max-width: 400px;
+        box-shadow: var(--shadow-lg);
+        padding: 20px;
+        text-align: center;
+    }
+
+    .confirm-title {
+        font-size: 18px;
+        font-weight: 700;
+        margin-bottom: 15px;
+    }
+
+    .confirm-message {
+        margin-bottom: 20px;
+        color: var(--text-muted);
+    }
+
+    .confirm-buttons {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+    }
+
+    /* Improved Product Display */
+    .product-item {
+        background-color: var(--light-color);
+        border-radius: 8px;
+        padding: 20px;
+        margin-bottom: 20px;
+        position: relative;
+        transition: var(--transition);
+        border: 1px solid var(--border-color);
+    }
+
+    .product-item:hover {
+        box-shadow: var(--shadow-md);
+        transform: translateY(-2px);
+    }
+
+    .product-title {
+        font-weight: 700;
+        font-size: 18px;
+        margin-bottom: 10px;
+        padding-left: 40px;
+        color: var(--primary-color);
+    }
+
+    .product-price {
+        color: var(--success-color);
+        font-weight: 700;
+        margin-bottom: 15px;
+        font-size: 16px;
+    }
+
+    .product-description {
+        color: var(--text-color);
+        font-size: 15px;
+        margin-bottom: 15px;
+        line-height: 1.5;
+    }
+
+    .product-info {
+        background-color: rgba(67, 97, 238, 0.05);
+        padding: 10px;
+        border-radius: 6px;
+        font-size: 14px;
+        color: var(--text-muted);
+        margin-top: 10px;
+    }
+
+    .product-actions {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        display: flex;
+        gap: 8px;
+    }
+
+    .action-btn {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: var(--transition);
+    }
+
+    .action-btn.edit {
+        background-color: rgba(58, 134, 255, 0.2);
+        color: var(--info-color);
+    }
+
+    .action-btn.delete {
+        background-color: rgba(247, 37, 133, 0.2);
+        color: var(--danger-color);
+    }
+
+    .action-btn:hover {
+        transform: translateY(-3px);
+        box-shadow: var(--shadow-sm);
+    }
+
+    .action-btn svg {
+        width: 18px;
+        height: 18px;
+    }
+
+    @media (max-width: 768px) {
+        .product-title {
+            font-size: 16px;
+            padding-left: 0;
+            margin-top: 40px; /* Space for the action buttons */
+        }
+
+        .product-actions {
+            top: 15px;
+            left: 15px;
+            right: 15px;
+            justify-content: flex-end;
+        }
+    }
+
+    /* Subscription and Expiration Warnings */
+.subscription-warning {
+    color: var(--danger-color);
+    font-weight: 500;
+    margin-top: 5px;
+    font-size: 14px;
+}
+
+.expiration-warning {
+    color: var(--warning-color);
+    font-weight: 500;
+    margin-top: 5px;
+    font-size: 14px;
+}
+
+.expiration-error {
+    color: var(--danger-color);
+    font-weight: 700;
+    margin-top: 5px;
+    font-size: 14px;
+}
+
+.expired-date {
+    text-decoration: line-through;
+    color: var(--danger-color);
+}
+
+/* Improved Product Display */
+.product-list {
+    margin-top: 20px;
+}
+
+.product-item {
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e9ecef;
+    transition: all 0.3s ease;
+}
+
+.product-item:hover {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px);
+}
+
+.product-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 15px;
+}
+
+.product-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #4361ee;
+    flex: 1;
+}
+
+.product-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.action-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.action-btn.edit {
+    background-color: rgba(58, 134, 255, 0.1);
+    color: #3a86ff;
+}
+
+.action-btn.delete {
+    background-color: rgba(247, 37, 133, 0.1);
+    color: #f72585;
+}
+
+.action-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.action-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+.product-price {
+    color: #4caf50;
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 10px;
+    background-color: rgba(76, 175, 80, 0.1);
+    display: inline-block;
+    padding: 5px 10px;
+    border-radius: 6px;
+}
+
+.product-description {
+    margin-bottom: 15px;
+    line-height: 1.5;
+    color: #333;
+}
+
+.product-info {
+    background-color: rgba(67, 97, 238, 0.05);
+    padding: 12px;
+    border-radius: 8px;
+    font-size: 14px;
+    color: #6c757d;
+}
+
+.info-label {
+    font-weight: 700;
+    color: #4361ee;
+}
+
+/* Mobile Responsiveness for Products */
+@media (max-width: 768px) {
+    .product-item {
+        padding: 15px;
+    }
+
+    .product-header {
+        flex-direction: column;
+    }
+
+    .product-title {
+        margin-bottom: 10px;
+    }
+
+    .product-actions {
+        align-self: flex-end;
+    }
+}
+
+.navbar .logo-icon {
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 5px 15px rgba(67, 97, 238, 0.2);
+    position: relative;
+    overflow: hidden;
+    margin-left: 10px;
+}
+
+.navbar .logo-icon::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
+    transform: rotate(35deg);
+}
+
+.navbar .logo-icon i {
+    color: white;
+    font-size: 20px;
+    position: relative;
+    z-index: 2;
+}
+
+.navbar .logo-text h1 {
+    font-size: 18px;
+    font-weight: 800;
+    margin: 0;
+}
+
+.navbar .logo-text p {
+    font-size: 12px;
+    margin: 0;
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+}
+</style>
+</head>
+<body>
+    <!-- Loading Overlay -->
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="spinner"></div>
+    </div>
+
+    <!-- Notification Container -->
+    <div class="notification-container" id="notificationContainer"></div>
+
+    <!-- Navbar -->
+    <nav class="navbar">
+        <div class="navbar-brand">
+            <div class="logo-icon">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="logo-text">
+                <h1>NANO BOT</h1>
+            </div>
+        </div>
+        <div class="navbar-nav">
+            <div class="nav-item">
+                <a href="{{ url_for('messages_page') }}" class="nav-link">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 2v.511l-8 6.223-8-6.222V6h16zM4 18V9.044l7.386 5.745a.994.994 0 0 0 1.228 0L20 9.044 20.002 18H4z"/>
+                    </svg>
+                    الرسائل
+                    {% if unread_count > 0 %}
+                    <span class="message-badge">{{ unread_count }}</span>
+                    {% endif %}
+                </a>
+            </div>
+            <div class="nav-item">
+                <a href="#" class="nav-link" id="logoutBtn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M16 13v-2H7V8l-5 4 5 4v-3z"/>
+                        <path d="M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z"/>
+                    </svg>
+                    تسجيل الخروج
+                </a>
+            </div>
+        </div>
+        </nav>
+
+    <!-- Main Container -->
+    <div class="container">
+        <div class="dashboard-grid">
+            <!-- Status Card -->
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                            <path d="M11 11h2v6h-2zm0-4h2v2h-2z"/>
+                        </svg>
+                        حالة البوت
+                    </h2>
+                </div>
+                <div class="card-body status-card">
+                    <div class="status-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                            <path d="M9.999 13.587 7.7 11.292l-1.412 1.416 3.713 3.705 6.706-6.706-1.414-1.414z"/>
+                        </svg>
+                    </div>
+                    <h3 class="status-title">بوت الماسنجر</h3>
+                    <p class="status-subtitle">تحكم في حالة البوت الخاص بك</p>
+
+                    <div class="switch-container">
+                        <span class="switch-label">تشغيل</span>
+                        <label class="switch">
+                            <input type="checkbox" id="botStatusToggle" {% if bot_status == 'ON' %}checked{% endif %}>
+                            <span class="slider"></span>
+                        </label>
+                        <span class="switch-label">إيقاف</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Account Info Card -->
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z"/>
+                        </svg>
+                        معلومات الحساب
+                    </h2>
+                </div>
+                <div class="card-body">
+                    <div class="info-item">
+                        <div class="info-icon primary">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                                <path d="M11 11h2v6h-2zm0-4h2v2h-2z"/>
+                            </svg>
+                        </div>
+                        <div class="info-content">
+                            <div class="info-label">اسم الصفحة</div>
+                            <div class="info-value">{{ page.username }}</div>
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-icon success">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M21 11h-3V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v14c0 1.654 1.346 3 3 3h14c1.654 0 3-1.346 3-3v-6a1 1 0 0 0-1-1zM5 19a1 1 0 0 1-1-1V5h12v13c0 .351.061.688.171 1H5zm15-1a1 1 0 0 1-2 0v-5h2v5z"/>
+                                <path d="M6 7h8v2H6zm0 4h8v2H6zm0 4h5v2H6z"/>
+                            </svg>
+                        </div>
+                        <div class="info-content">
+                            <div class="info-label">نوع الاشتراك</div>
+                            <div class="info-value">{{ subscription_status }}</div>
+                            {% if subscription_message %}
+                            <div class="subscription-warning">{{ subscription_message }}</div>
+                            {% endif %}
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-icon warning">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                                <path d="M13 7h-2v5.414l3.293 3.293 1.414-1.414L13 11.586z"/>
+                            </svg>
+                        </div>
+                        <div class="info-content">
+                            <div class="info-label">تاريخ انتهاء الاشتراك</div>
+                            <div class="info-value {% if is_expired %}expired-date{% endif %}">{{ expiration_date }}</div>
+                            {% if expiration_message %}
+                            <div class="{% if is_expired %}expiration-error{% else %}expiration-warning{% endif %}">{{ expiration_message }}</div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- System Settings Card -->
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.084 0 2 .916 2 2s-.916 2-2 2-2-.916-2-2 .916-2 2-2z"/>
+                            <path d="m2.845 16.136 1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8.1 8.1 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8.132 8.132 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2.001 2.001 0 0 0-.731-2.732l-.505-.292a7.718 7.718 0 0 0 0-2.224l.505-.292a2.002 2.002 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8.1 8.1 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8.132 8.132 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2.001 2.001 0 0 0 .731 2.732l.505.292a7.683 7.683 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733zm3.326-2.758A5.703 5.703 0 0 1 6 12c0-.462.058-.926.17-1.378a.999.999 0 0 0-.47-1.108l-1.123-.65.998-1.729 1.145.662a.997.997 0 0 0 1.188-.142 6.071 6.071 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956 6.083 6.083 0 0 1 2.384 1.399.999.999 0 0 0 1.188.142l1.144-.661 1 1.729-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378 0 .461-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649-.998 1.729-1.145-.661a.996.996 0 0 0-1.188.142 6.071 6.071 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956 6.083 6.083 0 0 1-2.384-1.399.992.992 0 0 0-1.188-.141l-1.144.662-1-1.729 1.124-.651a1 1 0 0 0 .471-1.108z"/>
+                        </svg>
+                        إعدادات النظام
+                    </h2>
+                </div>
+                <div class="card-body">
+                    <div class="tabs">
+                        <div class="tab-item active" data-tab="style">أسلوب الرد</div>
+                        <div class="tab-item" data-tab="products">المنتجات</div>
+                    </div>
+                    
+                    <div class="tab-content active" id="style-tab">
+                        <div class="form-group">
+                            <label class="form-label">أسلوب الرد للبوت</label>
+                            <textarea class="form-control" id="styleInput" rows="6" placeholder="أدخل أسلوب الرد الذي تريده للبوت...">{{ style }}</textarea>
+                        </div>
+                        <button class="btn btn-primary btn-block" id="saveStyleBtn">حفظ الأسلوب</button>
+                    </div>
+                    
+                    <div class="tab-content" id="products-tab">
+                        <button class="btn btn-primary" id="addProductBtn">إضافة منتج جديد</button>
+                    
+                        <div class="product-list" id="productsList">
+                            {% for product in products %}
+                            <div class="product-item" data-index="{{ loop.index0 }}">
+                                <div class="product-header">
+                                    <div class="product-title">{{ product.name }}</div>
+                                    <div class="product-actions">
+                                        <div class="action-btn edit" onclick="editProduct({{ loop.index0 }})">
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                                <path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"/>
+                                            </svg>
+                                        </div>
+                                        <div class="action-btn delete" onclick="deleteProduct({{ loop.index0 }})">
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                                <path d="M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z"/>
+                                                <path d="M9 10h2v8H9zm4 0h2v8h-2z"/>
+                                            </svg>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="product-price">{{ product.price }} دينار ليبي</div>
+                                <div class="product-description">{{ product.description }}</div>
+                                {% if product.info %}
+                                <div class="product-info">
+                                    <span class="info-label">معلومات إضافية:</span> {{ product.info }}
+                                </div>
+                                {% endif %}
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    </div>
+                </div>
+
+    <!-- Add/Edit Product Modal -->
+    <div class="modal-overlay" id="productModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3 class="modal-title" id="productModalTitle">إضافة منتج جديد</h3>
+                <button class="modal-close" id="closeProductModal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label class="form-label">اسم المنتج</label>
+                    <input type="text" class="form-control" id="productName" placeholder="أدخل اسم المنتج">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">وصف المنتج</label>
+                    <textarea class="form-control" id="productDescription" rows="3" placeholder="أدخل وصف المنتج"></textarea>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">السعر (دينار ليبي)</label>
+                    <input type="text" class="form-control" id="productPrice" placeholder="أدخل سعر المنتج">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">معلومات إضافية</label>
+                    <textarea class="form-control" id="productInfo" rows="2" placeholder="أدخل أي معلومات إضافية عن المنتج"></textarea>
+                </div>
+                <input type="hidden" id="productIndex" value="-1">
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-danger" id="cancelProductBtn">إلغاء</button>
+                <button class="btn btn-primary" id="saveProductBtn">حفظ المنتج</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // DOM Elements
+        const loadingOverlay = document.getElementById('loadingOverlay');
+        const notificationContainer = document.getElementById('notificationContainer');
+        const botStatusToggle = document.getElementById('botStatusToggle');
+        const styleInput = document.getElementById('styleInput');
+        const saveStyleBtn = document.getElementById('saveStyleBtn');
+        const addProductBtn = document.getElementById('addProductBtn');
+        const productsList = document.getElementById('productsList');
+        const productModal = document.getElementById('productModal');
+        const closeProductModal = document.getElementById('closeProductModal');
+        const cancelProductBtn = document.getElementById('cancelProductBtn');
+        const saveProductBtn = document.getElementById('saveProductBtn');
+        const productModalTitle = document.getElementById('productModalTitle');
+        const productName = document.getElementById('productName');
+        const productDescription = document.getElementById('productDescription');
+        const productPrice = document.getElementById('productPrice');
+        const productInfo = document.getElementById('productInfo');
+        const productIndex = document.getElementById('productIndex');
+        const tabItems = document.querySelectorAll('.tab-item');
+        const tabContents = document.querySelectorAll('.tab-content');
+
+        // WebSocket Connection
+        let socket;
+        
+        function connectWebSocket() {
+            socket = io.connect(window.location.origin);
+            
+            socket.on('connect', function() {
+                console.log('WebSocket connected');
+            });
+            
+            socket.on('status_updated', function(data) {
+                showNotification('تم تحديث الحالة', 'تم تحديث حالة البوت بنجاح', 'success');
+            });
+            
+            socket.on('style_updated', function(data) {
+                showNotification('تم تحديث الأسلوب', 'تم تحديث أسلوب الرد بنجاح', 'success');
+            });
+            
+            socket.on('product_added', function(data) {
+                showNotification('تمت الإضافة', 'تمت إضافة المنتج بنجاح', 'success');
+                // Refresh the page to show the new product
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1500);
+            });
+            
+            socket.on('product_deleted', function(data) {
+                showNotification('تم الحذف', 'تم حذف المنتج بنجاح', 'success');
+                // Refresh the page to update the products list
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1500);
+            });
+            
+            socket.on('data_refreshed', function(data) {
+                showNotification('تم التحديث', 'تم تحديث البيانات بنجاح', 'info');
+            });
+        }
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            // Connect WebSocket
+            connectWebSocket();
+            
+            // Initialize tabs
+            tabItems.forEach(item => {
+                item.addEventListener('click', () => {
+                    const tabId = item.getAttribute('data-tab');
+                    
+                    // Remove active class from all tabs
+                    tabItems.forEach(tab => tab.classList.remove('active'));
+                    tabContents.forEach(content => content.classList.remove('active'));
+                    
+                    // Add active class to current tab
+                    item.classList.add('active');
+                    document.getElementById(`${tabId}-tab`).classList.add('active');
+                });
+            });
+            
+            // Bot Status Toggle
+            botStatusToggle.addEventListener('change', function() {
+                updateBotStatus(this.checked ? 'ON' : 'OFF');
+            });
+            
+            // Save Style Button
+            saveStyleBtn.addEventListener('click', function() {
+                updateStyle(styleInput.value);
+            });
+            
+            // Add Product Button
+            addProductBtn.addEventListener('click', function() {
+                openProductModal();
+            });
+            
+            // Close Product Modal
+            closeProductModal.addEventListener('click', function() {
+                closeModal(productModal);
+            });
+            
+            // Cancel Product Button
+            cancelProductBtn.addEventListener('click', function() {
+                closeModal(productModal);
+            });
+            
+            // Save Product Button
+            saveProductBtn.addEventListener('click', function() {
+                saveProduct();
+            });
+        });
+
+        // Functions
+        function showLoading() {
+            loadingOverlay.classList.add('active');
+        }
+
+        function hideLoading() {
+            loadingOverlay.classList.remove('active');
+        }
+
+        function showNotification(title, message, type = 'info') {
+            const notification = document.createElement('div');
+            notification.className = `notification ${type}`;
+            
+            let iconSvg;
+            if (type === 'success') {
+                iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="notification-icon">
+                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                    <path d="M9.999 13.587 7.7 11.292l-1.412 1.416 3.713 3.705 6.706-6.706-1.414-1.414z"/>
+                </svg>`;
+            } else if (type === 'error') {
+                iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="notification-icon">
+                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                    <path d="M13 7h-2v7h2zm0 8h-2v2h2z"/>
+                </svg>`;
+            } else {
+                iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="notification-icon">
+                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                    <path d="M11 11h2v6h-2zm0-4h2v2h-2z"/>
+                </svg>`;
+            }
+            
+            notification.innerHTML = `
+                ${iconSvg}
+                <div class="notification-content">
+                    <div class="notification-title">${title}</div>
+                    <div class="notification-message">${message}</div>
+                </div>
+                <button class="notification-close">&times;</button>
+            `;
+            
+            notificationContainer.appendChild(notification);
+            
+            // Show notification with animation
+            setTimeout(() => {
+                notification.classList.add('show');
+            }, 10);
+            
+            // Auto close after 5 seconds
+            setTimeout(() => {
+                closeNotification(notification);
+            }, 5000);
+            
+            // Close button
+            notification.querySelector('.notification-close').addEventListener('click', function() {
+                closeNotification(notification);
+            });
+        }
+
+        function closeNotification(notification) {
+            notification.classList.remove('show');
+            setTimeout(() => {
+                notification.remove();
+            }, 300);
+        }
+
+        function updateBotStatus(status) {
+            showLoading();
+            
+            fetch('/api/update_status', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ status: status }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                hideLoading();
+                if (data.success) {
+                    showNotification('تم تحديث الحالة', 'تم تحديث حالة البوت بنجاح', 'success');
+                } else {
+                    showNotification('خطأ', data.message, 'error');
+                    // Reset toggle to previous state
+                    botStatusToggle.checked = status === 'OFF' ? false : true;
+                }
+            })
+            .catch(error => {
+                hideLoading();
+                showNotification('خطأ', 'حدث خطأ أثناء تحديث الحالة', 'error');
+                console.error('Error:', error);
+                // Reset toggle to previous state
+                botStatusToggle.checked = status === 'OFF' ? false : true;
+            });
+        }
+
+        function updateStyle(style) {
+            showLoading();
+            
+            fetch('/api/update_system', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ style: style }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                hideLoading();
+                if (data.success) {
+                    showNotification('تم تحديث الأسلوب', 'تم تحديث أسلوب الرد بنجاح', 'success');
+                } else {
+                    showNotification('خطأ', data.message, 'error');
+                }
+            })
+            .catch(error => {
+                hideLoading();
+                showNotification('خطأ', 'حدث خطأ أثناء تحديث الأسلوب', 'error');
+                console.error('Error:', error);
+            });
+        }
+
+        function openProductModal(index = -1) {
+            productModalTitle.textContent = index === -1 ? 'إضافة منتج جديد' : 'تعديل المنتج';
+            productIndex.value = index;
+            
+            if (index !== -1) {
+                // Edit existing product
+                const productItem = document.querySelector(`.product-item[data-index="${index}"]`);
+                const productTitle = productItem.querySelector('.product-title').textContent;
+                const productPriceText = productItem.querySelector('.product-price').textContent;
+                const productDescText = productItem.querySelector('.product-description').textContent;
+                const productInfoElem = productItem.querySelector('.product-info');
+                
+                productName.value = productTitle;
+                productDescription.value = productDescText;
+                productPrice.value = productPriceText.replace(' دينار ليبي', '');
+                productInfo.value = productInfoElem ? productInfoElem.textContent : '';
+            } else {
+                // Add new product
+                productName.value = '';
+                productDescription.value = '';
+                productPrice.value = '';
+                productInfo.value = '';
+            }
+            
+            openModal(productModal);
+        }
+
+        function openModal(modal) {
+            modal.classList.add('active');
+        }
+
+        function closeModal(modal) {
+            modal.classList.remove('active');
+        }
+
+        function saveProduct() {
+            const name = productName.value.trim();
+            const description = productDescription.value.trim();
+            const price = productPrice.value.trim();
+            const info = productInfo.value.trim();
+            const index = parseInt(productIndex.value);
+            
+            if (!name || !description || !price) {
+                showNotification('خطأ', 'يرجى ملء جميع الحقول المطلوبة', 'error');
+                return;
+            }
+            
+            showLoading();
+            
+            if (index === -1) {
+                // Add new product
+                fetch('/api/add_product', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        product: {
+                            name: name,
+                            description: description,
+                            price: price,
+                            info: info
+                        }
+                    }),
+                })
+                .then(response => response.json())
+                .then(data => {
+                    hideLoading();
+                    closeModal(productModal);
+                    
+                    if (data.success) {
+                        showNotification('تمت الإضافة', 'تمت إضافة المنتج بنجاح', 'success');
+                        // Refresh the page to show the new product
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, 1500);
+                    } else {
+                        showNotification('خطأ', data.message, 'error');
+                    }
+                })
+                .catch(error => {
+                    hideLoading();
+                    closeModal(productModal);
+                    showNotification('خطأ', 'حدث خطأ أثناء إضافة المنتج', 'error');
+                    console.error('Error:', error);
+                });
+            } else {
+                // First delete the old product
+                deleteProduct(index, false).then(() => {
+                    // Then add the updated product
+                    fetch('/api/add_product', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            product: {
+                                name: name,
+                                description: description,
+                                price: price,
+                                info: info
+                            }
+                        }),
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        hideLoading();
+                        closeModal(productModal);
+                        
+                        if (data.success) {
+                            showNotification('تم التحديث', 'تم تحديث المنتج بنجاح', 'success');
+                            // Refresh the page to show the updated product
+                            setTimeout(() => {
+                                window.location.reload();
+                            }, 1500);
+                        } else {
+                            showNotification('خطأ', data.message, 'error');
+                        }
+                    })
+                    .catch(error => {
+                        hideLoading();
+                        closeModal(productModal);
+                        showNotification('خطأ', 'حدث خطأ أثناء تحديث المنتج', 'error');
+                        console.error('Error:', error);
+                    });
+                });
+            }
+        }
+
+        function editProduct(index) {
+            openProductModal(index);
+        }
+
+        function deleteProduct(index, showConfirm = true) {
+            if (showConfirm && !confirm('هل أنت متأكد من حذف هذا المنتج؟')) {
+                return Promise.resolve();
+            }
+            
+            showLoading();
+            
+            return fetch('/api/delete_product', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ index: index }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (showConfirm) {
+                    hideLoading();
+                }
+                
+                if (data.success && showConfirm) {
+                    showNotification('تم الحذف', 'تم حذف المنتج بنجاح', 'success');
+                    // Refresh the page to update the products list
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1500);
+                } else if (!data.success && showConfirm) {
+                    showNotification('خطأ', data.message, 'error');
+                }
+                
+                return data;
+            })
+            .catch(error => {
+                if (showConfirm) {
+                    hideLoading();
+                    showNotification('خطأ', 'حدث خطأ أثناء حذف المنتج', 'error');
+                    console.error('Error:', error);
+                }
+                throw error;
+            });
+        }
+
+    </script>
+
+<script>
+    // Logout confirmation
+    document.getElementById('logoutBtn').addEventListener('click', function(e) {
+        e.preventDefault();
+
+        // Create confirmation modal
+        const modalOverlay = document.createElement('div');
+        modalOverlay.className = 'modal-overlay';
+
+        const confirmModal = document.createElement('div');
+        confirmModal.className = 'confirm-modal';
+
+        confirmModal.innerHTML = `
+            <div class="confirm-title">تأكيد تسجيل الخروج</div>
+            <div class="confirm-message">هل أنت متأكد من رغبتك في تسجيل الخروج؟</div>
+            <div class="confirm-buttons">
+                <button class="btn btn-danger" id="confirmLogout">تأكيد</button>
+                <button class="btn btn-primary" id="cancelLogout">إلغاء</button>
+            </div>
+        `;
+
+        modalOverlay.appendChild(confirmModal);
+        document.body.appendChild(modalOverlay);
+
+        // Show modal
+        setTimeout(() => {
+            modalOverlay.classList.add('active');
+        }, 10);
+
+        // Confirm button
+        document.getElementById('confirmLogout').addEventListener('click', function() {
+            window.location.href = "{{ url_for('logout') }}";
+        });
+
+        // Cancel button
+        document.getElementById('cancelLogout').addEventListener('click', function() {
+            modalOverlay.classList.remove('active');
+            setTimeout(() => {
+                modalOverlay.remove();
+            }, 300);
+        });
+    });
+
+    // Improved delete product function
+    function deleteProduct(index) {
+        // Create confirmation modal
+        const modalOverlay = document.createElement('div');
+        modalOverlay.className = 'modal-overlay';
+
+        const confirmModal = document.createElement('div');
+        confirmModal.className = 'confirm-modal';
+
+        confirmModal.innerHTML = `
+            <div class="confirm-title">تأكيد حذف المنتج</div>
+            <div class="confirm-message">هل أنت متأكد من رغبتك في حذف هذا المنتج؟ لا يمكن التراجع عن هذه العملية.</div>
+            <div class="confirm-buttons">
+                <button class="btn btn-danger" id="confirmDelete">حذف</button>
+                <button class="btn btn-primary" id="cancelDelete">إلغاء</button>
+            </div>
+        `;
+
+        modalOverlay.appendChild(confirmModal);
+        document.body.appendChild(modalOverlay);
+
+        // Show modal
+        setTimeout(() => {
+            modalOverlay.classList.add('active');
+        }, 10);
+
+        // Confirm button
+        document.getElementById('confirmDelete').addEventListener('click', function() {
+            modalOverlay.classList.remove('active');
+
+            showLoading();
+
+            fetch('/api/delete_product', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ index: index }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                hideLoading();
+
+                if (data.success) {
+                    showNotification('تم الحذف', 'تم حذف المنتج بنجاح', 'success');
+                    // Refresh the page to update the products list
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1500);
+                } else {
+                    showNotification('خطأ', data.message, 'error');
+                }
+
+                setTimeout(() => {
+                    modalOverlay.remove();
+                }, 300);
+            })
+            .catch(error => {
+                hideLoading();
+                showNotification('خطأ', 'حدث خطأ أثناء حذف المنتج', 'error');
+                console.error('Error:', error);
+
+                setTimeout(() => {
+                    modalOverlay.remove();
+                }, 300);
+            });
+        });
+
+        // Cancel button
+        document.getElementById('cancelDelete').addEventListener('click', function() {
+            modalOverlay.classList.remove('active');
+            setTimeout(() => {
+                modalOverlay.remove();
+            }, 300);
+        });
+    }
+
+    // Improved edit product function
+    function editProduct(index) {
+    productModalTitle.textContent = 'تعديل المنتج';
+    productIndex.value = index;
+
+    // Get the product data from the DOM
+    const productItem = document.querySelector(`.product-item[data-index="${index}"]`);
+
+    if (productItem) {
+        const titleElem = productItem.querySelector('.product-title');
+        const priceElem = productItem.querySelector('.product-price');
+        const descElem = productItem.querySelector('.product-description');
+        const infoElem = productItem.querySelector('.product-info');
+
+        // Extract values
+        let name = titleElem ? titleElem.textContent.trim() : '';
+        let price = priceElem ? priceElem.textContent.replace(' دينار ليبي', '').trim() : '';
+        let description = descElem ? descElem.textContent.trim() : '';
+        let info = '';
+
+        if (infoElem) {
+            // Remove the label if present
+            info = infoElem.textContent.replace('معلومات إضافية:', '').trim();
+        }
+
+        // Set form values
+        productName.value = name;
+        productDescription.value = description;
+        productPrice.value = price;
+        productInfo.value = info;
+    }
+
+    // Open modal
+    openModal(productModal);
+}
+
+    // Update the saveProduct function to handle editing better
+    function saveProduct() {
+        const name = productName.value.trim();
+        const description = productDescription.value.trim();
+        const price = productPrice.value.trim();
+        const info = productInfo.value.trim();
+        const index = parseInt(productIndex.value);
+
+        if (!name || !description || !price) {
+            showNotification('خطأ', 'يرجى ملء جميع الحقول المطلوبة', 'error');
+            return;
+        }
+
+        showLoading();
+
+        // Prepare product data
+        const productData = {
+            product: {
+                name: name,
+                description: description,
+                price: price,
+                info: info
+            }
+        };
+
+        if (index === -1) {
+            // Add new product
+            fetch('/api/add_product', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(productData),
+            })
+            .then(response => response.json())
+            .then(data => {
+                hideLoading();
+                closeModal(productModal);
+
+                if (data.success) {
+                    showNotification('تمت الإضافة', 'تمت إضافة المنتج بنجاح', 'success');
+                    // Refresh the page to show the new product
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1500);
+                } else {
+                    showNotification('خطأ', data.message, 'error');
+                }
+            })
+            .catch(error => {
+                hideLoading();
+                closeModal(productModal);
+                showNotification('خطأ', 'حدث خطأ أثناء إضافة المنتج', 'error');
+                console.error('Error:', error);
+            });
+        } else {
+            // Update existing product (delete then add)
+            fetch('/api/delete_product', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ index: index }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Now add the updated product
+                    return fetch('/api/add_product', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(productData),
+                    });
+                } else {
+                    throw new Error(data.message || 'Failed to delete product');
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                hideLoading();
+                closeModal(productModal);
+
+                if (data.success) {
+                    showNotification('تم التحديث', 'تم تحديث المنتج بنجاح', 'success');
+                    // Refresh the page to show the updated product
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1500);
+                } else {
+                    showNotification('خطأ', data.message, 'error');
+                }
+            })
+            .catch(error => {
+                hideLoading();
+                closeModal(productModal);
+                showNotification('خطأ', 'حدث خطأ أثناء تحديث المنتج', 'error');
+                console.error('Error:', error);
+            });
+        }
+    }
+</script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,488 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NANO BOT - تسجيل الدخول</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');
+
+        :root {
+            --primary: #4361ee;
+            --primary-dark: #3a56d4;
+            --secondary: #7209b7;
+            --accent: #4cc9f0;
+            --dark: #2b2d42;
+            --light: #f8f9fa;
+            --gray-100: #f1f3f5;
+            --gray-200: #e9ecef;
+            --gray-300: #dee2e6;
+            --success: #38b000;
+            --warning: #ffaa00;
+            --danger: #e63946;
+            --info: #3a86ff;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Tajawal', sans-serif;
+        }
+
+        body {
+            background: #f5f7ff;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 15px;
+            direction: rtl;
+        }
+
+        .app-container {
+            width: 100%;
+            max-width: 480px;
+            background: linear-gradient(145deg, #ffffff, #f8f9ff);
+            border-radius: 24px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+            overflow: hidden;
+            position: relative;
+        }
+
+        .header {
+            padding: 30px 25px 0;
+            position: relative;
+            z-index: 1;
+        }
+
+        .header::before {
+            content: '';
+            position: absolute;
+            top: -100px;
+            right: -100px;
+            width: 250px;
+            height: 250px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            border-radius: 50%;
+            opacity: 0.1;
+            z-index: -1;
+        }
+
+        .header::after {
+            content: '';
+            position: absolute;
+            bottom: -50px;
+            left: -50px;
+            width: 150px;
+            height: 150px;
+            background: linear-gradient(135deg, var(--accent), var(--primary));
+            border-radius: 50%;
+            opacity: 0.1;
+            z-index: -1;
+        }
+
+        .logo-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 25px;
+        }
+
+        .logo-icon {
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            border-radius: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 10px 20px rgba(67, 97, 238, 0.2);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .logo-icon::before {
+            content: '';
+            position: absolute;
+            top: -10px;
+            left: -10px;
+            right: -10px;
+            bottom: -10px;
+            background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
+            transform: rotate(35deg);
+        }
+
+        .logo-icon i {
+            color: white;
+            font-size: 28px;
+            position: relative;
+            z-index: 2;
+        }
+
+        .logo-text {
+            margin-right: 15px;
+        }
+
+        .logo-text h1 {
+            font-size: 24px;
+            font-weight: 800;
+            color: var(--dark);
+            margin: 0;
+            letter-spacing: -0.5px;
+        }
+
+        .logo-text p {
+            font-size: 14px;
+            color: #6c757d;
+            margin: 0;
+        }
+
+        .main-content {
+            padding: 0 25px 30px;
+        }
+
+        .form-intro {
+            text-align: right;
+            margin-bottom: 25px;
+        }
+
+        .form-intro p {
+            color: #4b5563;
+            font-size: 16px;
+            line-height: 1.6;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+            position: relative;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: var(--dark);
+            font-weight: 600;
+            font-size: 15px;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 15px;
+            background: white;
+            border: 1px solid var(--gray-300);
+            border-radius: 12px;
+            font-size: 15px;
+            transition: all 0.3s ease;
+            color: var(--dark);
+        }
+
+        .form-group input:focus {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
+            outline: none;
+        }
+
+        .password-toggle {
+            position: absolute;
+            left: 15px;
+            top: 45px;
+            color: #6c757d;
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        .submit-btn {
+            width: 100%;
+            padding: 16px;
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            border: none;
+            border-radius: 14px;
+            font-size: 16px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 8px 20px rgba(67, 97, 238, 0.25);
+            margin-top: 10px;
+        }
+
+        .submit-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: 0.5s;
+        }
+
+        .submit-btn:hover::before {
+            left: 100%;
+        }
+
+        .submit-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 12px 25px rgba(67, 97, 238, 0.35);
+        }
+
+        .submit-btn:active {
+            transform: translateY(0);
+        }
+
+        .spinner {
+            display: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 0.8s linear infinite;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        @keyframes spin {
+            to { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+
+        .button-text {
+            transition: opacity 0.3s ease;
+        }
+
+        .footer {
+            background: var(--gray-100);
+            padding: 20px;
+            text-align: center;
+            border-top: 1px solid var(--gray-200);
+        }
+
+        .footer-text {
+            font-size: 13px;
+            color: #6c757d;
+            margin-bottom: 10px;
+        }
+
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+        }
+
+        .social-link {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--primary);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            transition: all 0.3s ease;
+        }
+
+        .social-link:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .notification {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 16px 25px;
+            border-radius: 12px;
+            color: white;
+            font-weight: 500;
+            display: none;
+            z-index: 1000;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+            text-align: center;
+            min-width: 300px;
+            max-width: 90%;
+            font-size: 15px;
+            transition: all 0.3s ease;
+        }
+
+        .success {
+            background: linear-gradient(135deg, #10b981, #059669);
+        }
+
+        .error {
+            background: linear-gradient(135deg, #ef4444, #dc2626);
+        }
+
+        .alert {
+            background: linear-gradient(145deg, #fff1f1, #ffe6e6);
+            border-radius: 12px;
+            padding: 15px;
+            margin-bottom: 20px;
+            color: var(--danger);
+            font-size: 14px;
+            border-right: 4px solid var(--danger);
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 480px) {
+            body {
+                padding: 0;
+                background: linear-gradient(145deg, #ffffff, #f8f9ff);
+            }
+
+            .app-container {
+                max-width: 100%;
+                height: 100vh;
+                border-radius: 0;
+                box-shadow: none;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .main-content {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 0 20px;
+            }
+
+            .header {
+                padding: 25px 20px 0;
+            }
+
+            .logo-icon {
+                width: 50px;
+                height: 50px;
+            }
+
+            .logo-icon i {
+                font-size: 24px;
+            }
+
+            .logo-text h1 {
+                font-size: 22px;
+            }
+
+            .form-group input {
+                padding: 12px;
+            }
+
+            .submit-btn {
+                padding: 14px;
+            }
+
+            .footer {
+                margin-top: auto;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="notification" id="notification"></div>
+
+    <div class="app-container">
+        <div class="header">
+            <div class="logo-container">
+                <div class="logo-icon">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <div class="logo-text">
+                    <h1>NANO BOT</h1>
+                    <p>الذكاء الاصطناعي لخدمة العملاء</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="form-intro">
+                <p>قم بتسجيل الدخول للوصول إلى لوحة التحكم والاستفادة من خدمات الذكاء الاصطناعي المتقدمة للرد التلقائي على رسائل العملاء.</p>
+            </div>
+
+            {% if error %}
+            <div class="alert">
+                {{ error }}
+            </div>
+            {% endif %}
+
+            <form id="loginForm" method="post" onsubmit="showLoading()">
+                <div class="form-group">
+                    <label for="username">اسم المستخدم</label>
+                    <input type="text" id="username" name="username" required autofocus>
+                </div>
+
+                <div class="form-group">
+                    <label for="password">كلمة المرور</label>
+                    <input type="password" id="password" name="password" required>
+                    <span class="password-toggle" onclick="togglePassword()">
+                        <i class="fas fa-eye" id="toggleIcon"></i>
+                    </span>
+                </div>
+
+                <button type="submit" class="submit-btn" id="submitButton">
+                    <span class="button-text">تسجيل الدخول</span>
+                    <span class="spinner" id="loadingSpinner"></span>
+                </button>
+            </form>
+        </div>
+
+        <div class="footer">
+            <p class="footer-text">NANO BOT © 2023 - روبوت الذكاء الاصطناعي للتواصل مع العملاء</p>
+            <div class="social-links">
+                <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
+                <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
+                <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
+                <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function showLoading() {
+            const buttonText = document.querySelector('.button-text');
+            const loadingSpinner = document.getElementById('loadingSpinner');
+
+            buttonText.style.opacity = '0';
+            loadingSpinner.style.display = 'block';
+        }
+
+        function togglePassword() {
+            const passwordInput = document.getElementById('password');
+            const toggleIcon = document.getElementById('toggleIcon');
+
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                toggleIcon.classList.remove('fa-eye');
+                toggleIcon.classList.add('fa-eye-slash');
+            } else {
+                passwordInput.type = 'password';
+                toggleIcon.classList.remove('fa-eye-slash');
+                toggleIcon.classList.add('fa-eye');
+            }
+        }
+
+        function showNotification(message, type) {
+            const notification = document.getElementById('notification');
+            notification.textContent = message;
+            notification.className = 'notification ' + type;
+            notification.style.display = 'block';
+
+            setTimeout(function() {
+                notification.style.opacity = '0';
+                notification.style.transform = 'translateX(-50%) translateY(-20px)';
+                setTimeout(() => {
+                    notification.style.display = 'none';
+                    notification.style.opacity = '1';
+                    notification.style.transform = 'translateX(-50%) translateY(0)';
+                }, 300);
+            }, 5000);
+        }
+    </script>
+</body>
+</html>

templates/messages.html

@@ -0,0 +1,1160 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>نانو بوت - الرسائل</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #4361ee;
+            --primary-light: #4895ef;
+            --primary-dark: #3f37c9;
+            --secondary-color: #4cc9f0;
+            --success-color: #4caf50;
+            --danger-color: #f72585;
+            --warning-color: #ff9e00;
+            --info-color: #3a86ff;
+            --light-color: #f8f9fa;
+            --dark-color: #212529;
+            --body-bg: #f0f5ff;
+            --card-bg: #ffffff;
+            --border-color: #e9ecef;
+            --text-color: #333;
+            --text-muted: #6c757d;
+            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
+            --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.07);
+            --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
+            --transition: all 0.3s ease;
+            --border-radius: 12px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Tajawal', sans-serif;
+        }
+
+        body {
+            background-color: var(--body-bg);
+            color: var(--text-color);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Scrollbar Styling */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--primary-light);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--primary-color);
+        }
+
+        /* Navigation */
+        .navbar {
+            background-color: var(--card-bg);
+            color: var(--text-color);
+            padding: 15px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: var(--shadow-md);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .navbar-brand {
+            display: flex;
+            align-items: center;
+            font-size: 22px;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+
+        .navbar-brand svg {
+            width: 28px;
+            height: 28px;
+            margin-left: 10px;
+            fill: var(--primary-color);
+        }
+
+        .navbar-nav {
+            display: flex;
+            align-items: center;
+        }
+
+        .nav-item {
+            margin-right: 20px;
+        }
+
+        .nav-link {
+            color: var(--text-color);
+            text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+        }
+
+        .nav-link:hover {
+            color: var(--primary-color);
+        }
+
+        .nav-link svg {
+            margin-left: 5px;
+            width: 18px;
+            height: 18px;
+        }
+
+        .container {
+            max-width: 1200px;
+            width: 100%;
+            margin: 0 auto;
+            padding: 20px;
+            flex: 1;
+        }
+
+        /* Page Header */
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+
+        .page-title {
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+        }
+
+        .page-title svg {
+            margin-left: 10px;
+            width: 24px;
+            height: 24px;
+        }
+
+        .page-actions {
+            display: flex;
+            gap: 10px;
+        }
+
+        /* Messages */
+        .messages-container {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 20px;
+        }
+
+        @media (min-width: 768px) {
+            .messages-container {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (min-width: 1200px) {
+            .messages-container {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+
+        .message-card {
+            background-color: var(--card-bg);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-sm);
+            transition: var(--transition);
+            overflow: hidden;
+            position: relative;
+        }
+
+        .message-card:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-3px);
+        }
+
+        .message-card.unread::before {
+            content: '';
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            width: 10px;
+            height: 10px;
+            background-color: var(--primary-color);
+            border-radius: 50%;
+        }
+
+        .message-header {
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+        }
+
+        .user-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: var(--primary-light);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: 700;
+            margin-left: 15px;
+            flex-shrink: 0;
+            overflow: hidden;
+        }
+
+        .user-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .user-info {
+            flex: 1;
+        }
+
+        .user-name {
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+
+        .message-time {
+            font-size: 12px;
+            color: var(--text-muted);
+        }
+
+        .message-body {
+            padding: 20px;
+            min-height: 100px;
+        }
+
+        .message-text {
+            line-height: 1.6;
+            margin-bottom: 15px;
+        }
+
+        .message-footer {
+            padding: 15px 20px;
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .message-actions {
+            display: flex;
+            gap: 10px;
+        }
+
+        .btn {
+            display: inline-block;
+            padding: 8px 16px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
+            text-align: center;
+            text-decoration: none;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: var(--primary-dark);
+        }
+
+        .btn-danger {
+            background-color: var(--danger-color);
+            color: white;
+        }
+
+        .btn-danger:hover {
+            background-color: #d61a6c;
+        }
+
+        .btn-outline {
+            background-color: transparent;
+            border: 1px solid var(--border-color);
+            color: var(--text-color);
+        }
+
+        .btn-outline:hover {
+            background-color: var(--light-color);
+        }
+
+        .btn-sm {
+            padding: 6px 12px;
+            font-size: 12px;
+        }
+
+        .btn svg {
+            width: 16px;
+            height: 16px;
+            margin-left: 5px;
+            vertical-align: middle;
+        }
+
+        /* Empty State */
+        .empty-state {
+            text-align: center;
+            padding: 50px 20px;
+            background-color: var(--card-bg);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow-sm);
+        }
+
+        .empty-icon {
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 20px;
+            color: var(--text-muted);
+        }
+
+        .empty-title {
+            font-size: 20px;
+            font-weight: 700;
+            margin-bottom: 10px;
+            color: var(--text-color);
+        }
+
+        .empty-description {
+            color: var(--text-muted);
+            margin-bottom: 20px;
+        }
+
+        /* Loading */
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(255, 255, 255, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 2000;
+            opacity: 0;
+            visibility: hidden;
+            transition: var(--transition);
+        }
+
+        .loading-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(67, 97, 238, 0.2);
+            border-radius: 50%;
+            border-top-color: var(--primary-color);
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Notifications */
+        .notification-container {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            z-index: 1001;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            pointer-events: none;
+        }
+
+        .notification {
+            background-color: var(--card-bg);
+            border-radius: 8px;
+            box-shadow: var(--shadow-md);
+            padding: 15px 20px;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            max-width: 400px;
+            transform: translateY(-20px);
+            opacity: 0;
+            transition: all 0.3s ease;
+            pointer-events: auto;
+        }
+
+        .notification.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+
+        .notification-icon {
+            width: 24px;
+            height: 24px;
+            margin-left: 15px;
+            flex-shrink: 0;
+        }
+
+        .notification-content {
+            flex: 1;
+        }
+
+        .notification-title {
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+
+        .notification-message {
+            font-size: 14px;
+            color: var(--text-muted);
+        }
+
+        .notification-close {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-muted);
+            margin-right: -5px;
+        }
+
+        .notification.success .notification-icon {
+            color: var(--success-color);
+        }
+
+        .notification.error .notification-icon {
+            color: var(--danger-color);
+        }
+
+        .notification.info .notification-icon {
+            color: var(--info-color);
+        }
+
+        /* Responsive Adjustments */
+        @media (max-width: 768px) {
+            .navbar {
+                padding: 10px 15px;
+            }
+
+            .navbar-brand {
+                font-size: 18px;
+            }
+
+            .container {
+                padding: 15px;
+            }
+
+            .page-title {
+                font-size: 20px;
+            }
+
+            .message-header {
+                padding: 12px 15px;
+            }
+
+            .message-body {
+                padding: 15px;
+            }
+
+            .message-footer {
+                padding: 12px 15px;
+            }
+        }
+
+        .message-time {
+    font-size: 12px;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.seen-status {
+    color: var(--text-muted);
+}
+
+.seen-status.new {
+    color: var(--primary-color);
+    font-weight: 500;
+}
+
+.navbar .logo-icon {
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 5px 15px rgba(67, 97, 238, 0.2);
+    position: relative;
+    overflow: hidden;
+    margin-left: 10px;
+}
+
+.navbar .logo-icon::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
+    transform: rotate(35deg);
+}
+
+.navbar .logo-icon i {
+    color: white;
+    font-size: 20px;
+    position: relative;
+    z-index: 2;
+}
+
+.navbar .logo-text h1 {
+    font-size: 18px;
+    font-weight: 800;
+    margin: 0;
+}
+
+.navbar .logo-text p {
+    font-size: 12px;
+    margin: 0;
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+}
+    </style>
+</head>
+<body>
+    <!-- Loading Overlay -->
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="spinner"></div>
+    </div>
+
+    <!-- Notification Container -->
+    <div class="notification-container" id="notificationContainer"></div>
+
+    <!-- Navbar -->
+    <nav class="navbar">
+        <div class="navbar-brand">
+            <div class="logo-icon">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="logo-text">
+                <h1>NANO  BOT</h1>
+            </div>
+        </div>
+        <div class="navbar-nav">
+            <div class="nav-item">
+                <a href="{{ url_for('dashboard') }}" class="nav-link">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M4 13h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1zm-1 7a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4zm10 0a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v7zm1-10h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1z"/>
+                    </svg>
+                    لوحة التحكم
+                </a>
+            </div>
+            <div class="nav-item">
+                <a href="{{ url_for('logout') }}" class="nav-link">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M16 13v-2H7V8l-5 4 5 4v-3z"/>
+                        <path d="M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z"/>
+                    </svg>
+                    تسجيل الخروج
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Container -->
+    <div class="container">
+        <div class="page-header">
+            <h1 class="page-title">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 2v.511l-8 6.223-8-6.222V6h16zM4 18V9.044l7.386 5.745a.994.994 0 0 0 1.228 0L20 9.044 20.002 18H4z"/>
+                </svg>
+                رسائل الإدارة
+            </h1>
+            <div class="page-actions">
+                <button class="btn btn-primary" id="refreshBtn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M10 11H7.101l.001-.009a4.956 4.956 0 0 1 .752-1.787 5.054 5.054 0 0 1 2.2-1.811c.302-.128.617-.226.938-.291a5.078 5.078 0 0 1 2.018 0 4.978 4.978 0 0 1 2.525 1.361l1.416-1.412a7.036 7.036 0 0 0-2.224-1.501 6.921 6.921 0 0 0-1.315-.408 7.079 7.079 0 0 0-2.819 0 6.94 6.94 0 0 0-1.316.409 7.04 7.04 0 0 0-3.08 2.534 6.978 6.978 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4 4-4zm4 2h2.899l-.001.008a4.976 4.976 0 0 1-2.103 3.138 4.943 4.943 0 0 1-1.787.752 5.073 5.073 0 0 1-2.017 0 4.956 4.956 0 0 1-1.787-.752 5.072 5.072 0 0 1-.74-.61L7.05 16.95a7.032 7.032 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.07 7.07 0 0 0 2.818 0 7.031 7.031 0 0 0 4.395-2.945 6.974 6.974 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4-4 4z"/>
+                    </svg>
+                    تحديث
+                </button>
+            </div>
+        </div>
+
+        {% if messages|length > 0 %}
+        <div class="messages-container">
+            {% for message in messages %}
+            <div class="message-card {% if 'seen' not in message %}unread{% endif %}" data-index="{{ loop.index0 }}">
+                <div class="message-header">
+                    <div class="user-avatar">
+                        {{ message.full_name[0] }}
+                    </div>
+                    <div class="user-info">
+                        <div class="user-name">{{ message.full_name }}</div>
+                        <div class="message-time">
+                            {% if message.timestamp %}
+                                {% set timestamp = message.timestamp.split('T') %}
+                                <span>{{ timestamp[0] }} {{ timestamp[1].split('.')[0] }}</span>
+                                {% if 'seen' in message %}
+                                <span class="seen-status">• تم القراءة</span>
+                                {% else %}
+                                <span class="seen-status new">• جديد</span>
+                                {% endif %}
+                            {% else %}
+                                {% if 'seen' in message %}
+                                <span>تم القراءة</span>
+                                {% else %}
+                                <span>جديد</span>
+                                {% endif %}
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+                <div class="message-body">
+                    <div class="message-text">{{ message.message }}</div>
+                </div>
+                <div class="message-footer">
+                    <div class="message-actions">
+                        {% if 'seen' not in message %}
+                        <button class="btn btn-outline btn-sm mark-seen-btn" data-index="{{ loop.index0 }}">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
+                            </svg>
+                            تعليم كمقروء
+                        </button>
+                        {% endif %}
+                    </div>
+                    <button class="btn btn-danger btn-sm delete-btn" data-index="{{ loop.index0 }}">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z"/>
+                            <path d="M9 10h2v8H9zm4 0h2v8h-2z"/>
+                        </svg>
+                        حذف
+                    </button>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="empty-state">
+            <svg class="empty-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 2v.511l-8 6.223-8-6.222V6h16zM4 18V9.044l7.386 5.745a.994.994 0 0 0 1.228 0L20 9.044 20.002 18H4z"/>
+            </svg>
+            <h3 class="empty-title">لا توجد رسائل</h3>
+            <p class="empty-description">لم يتم العثور على أي رسائل من العملاء في الوقت الحالي.</p>
+            <button class="btn btn-primary" id="emptyRefreshBtn">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M10 11H7.101l.001-.009a4.956 4.956 0 0 1 .752-1.787 5.054 5.054 0 0 1 2.2-1.811c.302-.128.617-.226.938-.291a5.078 5.078 0 0 1 2.018 0 4.978 4.978 0 0 1 2.525 1.361l1.416-1.412a7.036 7.036 0 0 0-2.224-1.501 6.921 6.921 0 0 0-1.315-.408 7.079 7.079 0 0 0-2.819 0 6.94 6.94 0 0 0-1.316.409 7.04 7.04 0 0 0-3.08 2.534 6.978 6.978 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4 4-4zm4 2h2.899l-.001.008a4.976 4.976 0 0 1-2.103 3.138 4.943 4.943 0 0 1-1.787.752 5.073 5.073 0 0 1-2.017 0 4.956 4.956 0 0 1-1.787-.752 5.072 5.072 0 0 1-.74-.61L7.05 16.95a7.032 7.032 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.07 7.07 0 0 0 2.818 0 7.031 7.031 0 0 0 4.395-2.945 6.974 6.974 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4-4 4z"/>
+                </svg>
+                تحديث
+            </button>
+        </div>
+        {% endif %}
+    </div>
+    <!-- Confirmation Dialog -->
+<div class="confirmation-dialog" id="confirmationDialog">
+    <div class="confirmation-content">
+        <div class="confirmation-header">
+            <h3>تأكيد الحذف</h3>
+            <button class="close-btn" id="closeConfirmBtn">&times;</button>
+        </div>
+        <div class="confirmation-body">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="confirmation-icon">
+                <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                <path d="M13 7h-2v6h2zm0 8h-2v2h2z"/>
+            </svg>
+            <p>هل أنت متأكد من حذف هذه الرسالة؟</p>
+            <p class="confirmation-note">لا يمكن التراجع عن هذا الإجراء.</p>
+        </div>
+        <div class="confirmation-footer">
+            <button class="btn btn-outline" id="cancelDeleteBtn">إلغاء</button>
+            <button class="btn btn-danger" id="confirmDeleteBtn">تأكيد الحذف</button>
+        </div>
+    </div>
+</div>
+
+<style>
+    /* Confirmation Dialog */
+.confirmation-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2000;
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--transition);
+}
+
+.confirmation-dialog.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.confirmation-content {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-lg);
+    width: 90%;
+    max-width: 400px;
+    transform: translateY(-20px);
+    transition: transform 0.3s ease;
+}
+
+.confirmation-dialog.active .confirmation-content {
+    transform: translateY(0);
+}
+
+.confirmation-header {
+    padding: 15px 20px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.confirmation-header h3 {
+    margin: 0;
+    color: var(--danger-color);
+    font-weight: 700;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: var(--text-muted);
+}
+
+.confirmation-body {
+    padding: 20px;
+    text-align: center;
+}
+
+.confirmation-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 15px;
+    color: var(--danger-color);
+}
+
+.confirmation-note {
+    font-size: 14px;
+    color: var(--text-muted);
+    margin-top: 10px;
+}
+
+.confirmation-footer {
+    padding: 15px 20px;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+</style>
+
+<script>
+    // DOM Elements
+    const loadingOverlay = document.getElementById('loadingOverlay');
+    const notificationContainer = document.getElementById('notificationContainer');
+    const refreshBtn = document.getElementById('refreshBtn');
+    const emptyRefreshBtn = document.getElementById('emptyRefreshBtn');
+    const markSeenBtns = document.querySelectorAll('.mark-seen-btn');
+    const deleteBtns = document.querySelectorAll('.delete-btn');
+    let confirmationDialog;
+    let closeConfirmBtn;
+    let cancelDeleteBtn;
+    let confirmDeleteBtn;
+    let messageToDelete = null;
+
+    // WebSocket Connection
+    let socket;
+    let recentActions = new Set(); // Track recent actions to prevent duplicate notifications
+
+    function connectWebSocket() {
+        socket = io.connect(window.location.origin);
+
+        socket.on('connect', function() {
+            console.log('WebSocket connected');
+        });
+
+        socket.on('message_seen', function(data) {
+            const actionKey = `seen_${data.page_id}_${data.index}`;
+            // Only show notification if this wasn't a local action
+            if (!recentActions.has(actionKey)) {
+                showNotification('تم تحديث الحالة', 'تم تعليم الرسالة كمقروءة', 'success');
+
+                // Update UI if needed
+                const messageCard = document.querySelector(`.message-card[data-index="${data.index}"]`);
+                if (messageCard) {
+                    messageCard.classList.remove('unread');
+                    const markSeenBtn = messageCard.querySelector('.mark-seen-btn');
+                    if (markSeenBtn) {
+                        markSeenBtn.remove();
+                    }
+                    const seenStatus = messageCard.querySelector('.seen-status');
+                    if (seenStatus) {
+                        seenStatus.textContent = '• تم القراءة';
+                        seenStatus.classList.remove('new');
+                    }
+                }
+            }
+        });
+
+        socket.on('message_deleted', function(data) {
+            const actionKey = `delete_${data.page_id}_${data.index}`;
+            // Only show notification if this wasn't a local action
+            if (!recentActions.has(actionKey)) {
+                showNotification('تم الحذف', 'تم حذف الرسالة بنجاح', 'success');
+
+                // Remove message card from UI if needed
+                const messageCard = document.querySelector(`.message-card[data-index="${data.index}"]`);
+                if (messageCard) {
+                    messageCard.style.opacity = '0';
+                    messageCard.style.transform = 'translateY(20px)';
+                    setTimeout(() => {
+                        messageCard.remove();
+
+                        // Check if there are no more messages
+                        const remainingMessages = document.querySelectorAll('.message-card');
+                        if (remainingMessages.length === 0) {
+                            // Reload the page to show empty state
+                            window.location.reload();
+                        }
+                    }, 300);
+                }
+            }
+        });
+
+        socket.on('data_refreshed', function(data) {
+            const actionKey = `refresh_${data.type}`;
+            // Only show notification if this wasn't a local action
+            if (!recentActions.has(actionKey)) {
+                showNotification('تم التحديث', 'تم تحديث الرسائل بنجاح', 'info');
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1000);
+            }
+        });
+    }
+
+    // Helper function to track recent actions
+    function trackAction(actionType, pageId, index) {
+        const actionKey = `${actionType}_${pageId}_${index}`;
+        recentActions.add(actionKey);
+
+        // Remove from tracking after 5 seconds
+        setTimeout(() => {
+            recentActions.delete(actionKey);
+        }, 5000);
+
+        return actionKey;
+    }
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+        // Connect WebSocket
+        connectWebSocket();
+
+        // Get confirmation dialog elements
+        confirmationDialog = document.getElementById('confirmationDialog');
+        closeConfirmBtn = document.getElementById('closeConfirmBtn');
+        cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
+        confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
+
+        // Set up confirmation dialog buttons
+        closeConfirmBtn.addEventListener('click', closeConfirmation);
+        cancelDeleteBtn.addEventListener('click', closeConfirmation);
+        confirmDeleteBtn.addEventListener('click', function() {
+            if (messageToDelete !== null) {
+                proceedWithDelete(messageToDelete);
+                closeConfirmation();
+            }
+        });
+
+        // Refresh Button
+        if (refreshBtn) {
+            refreshBtn.addEventListener('click', function() {
+                refreshMessages();
+            });
+        }
+
+        // Empty Refresh Button
+        if (emptyRefreshBtn) {
+            emptyRefreshBtn.addEventListener('click', function() {
+                refreshMessages();
+            });
+        }
+
+        // Mark Seen Buttons
+        markSeenBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                const index = this.getAttribute('data-index');
+                markMessageAsSeen(index);
+            });
+        });
+
+        // Delete Buttons
+        deleteBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                const index = this.getAttribute('data-index');
+                showDeleteConfirmation(index);
+            });
+        });
+    });
+
+    // Functions
+    function showLoading() {
+        loadingOverlay.classList.add('active');
+    }
+
+    function hideLoading() {
+        loadingOverlay.classList.remove('active');
+    }
+
+    function showNotification(title, message, type = 'info') {
+        const notification = document.createElement('div');
+        notification.className = `notification ${type}`;
+
+        let iconSvg;
+        if (type === 'success') {
+            iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="notification-icon">
+                <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                <path d="M9.999 13.587 7.7 11.292l-1.412 1.416 3.713 3.705 6.706-6.706-1.414-1.414z"/>
+            </svg>`;
+        } else if (type === 'error') {
+            iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="notification-icon">
+                <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                <path d="M13 7h-2v7h2zm0 8h-2v2h2z"/>
+            </svg>`;
+        } else {
+            iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="notification-icon">
+                <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+                <path d="M11 11h2v6h-2zm0-4h2v2h-2z"/>
+            </svg>`;
+        }
+
+        notification.innerHTML = `
+            ${iconSvg}
+            <div class="notification-content">
+                <div class="notification-title">${title}</div>
+                <div class="notification-message">${message}</div>
+            </div>
+            <button class="notification-close">&times;</button>
+        `;
+
+        notificationContainer.appendChild(notification);
+
+        // Show notification with animation
+        setTimeout(() => {
+            notification.classList.add('show');
+        }, 10);
+
+        // Auto close after 5 seconds
+        setTimeout(() => {
+            closeNotification(notification);
+        }, 5000);
+
+        // Close button
+        notification.querySelector('.notification-close').addEventListener('click', function() {
+            closeNotification(notification);
+        });
+    }
+
+    function closeNotification(notification) {
+        notification.classList.remove('show');
+        setTimeout(() => {
+            notification.remove();
+        }, 300);
+    }
+
+    function refreshMessages() {
+        // Track this action to prevent duplicate notifications
+        trackAction('refresh', 'messages', null);
+
+        showLoading();
+
+        fetch('/api/refresh_data', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ type: 'messages' }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            hideLoading();
+            if (data.success) {
+                showNotification('تم التحديث', 'تم تحديث الرسائل بنجاح', 'success');
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1500);
+            } else {
+                showNotification('خطأ', data.message, 'error');
+            }
+        })
+        .catch(error => {
+            hideLoading();
+            showNotification('خطأ', 'حدث خطأ أثناء تحديث الرسائل', 'error');
+            console.error('Error:', error);
+        });
+    }
+
+    function markMessageAsSeen(index) {
+        // Ensure index is a number
+        index = parseInt(index, 10);
+
+        // Track this action to prevent duplicate notifications
+        const pageId = '{{ page.page_id }}'; // Get page_id from template
+        trackAction('seen', pageId, index);
+
+        showLoading();
+
+        fetch('/api/mark_message_seen', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ index: index }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            hideLoading();
+            if (data.success) {
+                showNotification('تم التحديث', 'تم تعليم الرسالة كمقروءة', 'success');
+
+                // Update UI
+                const messageCard = document.querySelector(`.message-card[data-index="${index}"]`);
+                if (messageCard) {
+                    messageCard.classList.remove('unread'); // Remove unread class
+                    const markSeenBtn = messageCard.querySelector('.mark-seen-btn');
+                    if (markSeenBtn) {
+                        markSeenBtn.remove(); // Remove the "Mark as Seen" button
+                    }
+                    const seenStatus = messageCard.querySelector('.seen-status');
+                    if (seenStatus) {
+                        seenStatus.textContent = '• تم القراءة';
+                        seenStatus.classList.remove('new');
+                    }
+                }
+            } else {
+                showNotification('خطأ', data.message, 'error');
+            }
+        })
+        .catch(error => {
+            hideLoading();
+            showNotification('خطأ', 'حدث خطأ أثناء تعليم الرسالة كمقروءة', 'error');
+            console.error('Error:', error);
+        });
+    }
+
+    function showDeleteConfirmation(index) {
+        messageToDelete = index;
+        confirmationDialog.classList.add('active');
+        // Prevent scrolling on the body
+        document.body.style.overflow = 'hidden';
+    }
+
+    function closeConfirmation() {
+        confirmationDialog.classList.remove('active');
+        // Re-enable scrolling
+        document.body.style.overflow = '';
+        // Reset the message to delete
+        setTimeout(() => {
+            messageToDelete = null;
+        }, 300);
+    }
+
+    function proceedWithDelete(index) {
+        // Track this action to prevent duplicate notifications
+        const pageId = '{{ page.page_id }}'; // Get page_id from template
+        trackAction('delete', pageId, index);
+
+        showLoading();
+
+        fetch('/api/delete_message', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ index: index }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            hideLoading();
+            if (data.success) {
+                showNotification('تم الحذف', 'تم حذف الرسالة بنجاح', 'success');
+
+                // Remove message card from UI
+                const messageCard = document.querySelector(`.message-card[data-index="${index}"]`);
+                if (messageCard) {
+                    messageCard.style.opacity = '0';
+                    messageCard.style.transform = 'translateY(20px)';
+                    setTimeout(() => {
+                        messageCard.remove();
+
+                        // Check if there are no more messages
+                        const remainingMessages = document.querySelectorAll('.message-card');
+                        if (remainingMessages.length === 0) {
+                            // Reload the page to show empty state
+                            window.location.reload();
+                        }
+                    }, 300);
+                }
+            } else {
+                showNotification('خطأ', data.message, 'error');
+            }
+        })
+        .catch(error => {
+            hideLoading();
+            showNotification('خطأ', 'حدث خطأ أثناء حذف الرسالة', 'error');
+            console.error('Error:', error);
+        });
+    }
+</script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+</body>
+</html>