\u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a<\/title>\n <style>\n * {\n box-sizing: border-box;\n font-family: 'Cairo', sans-serif;\n }\n body {\n background-color: #f5f5f5;\n margin: 0;\n padding: 0;\n direction: rtl;\n }\n .container {\n max-width: 800px;\n margin: 20px auto;\n background-color: white;\n border-radius: 10px;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);\n padding: 20px;\n }\n .header {\n background-color: #3498db;\n color: white;\n padding: 20px;\n text-align: center;\n border-radius: 10px 10px 0 0;\n }\n .form-step {\n display: none;\n }\n .form-step.active {\n display: block;\n }\n .buttons {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n }\n button {\n padding: 10px 20px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .step-indicator {\n width: 100%;\n height: 10px;\n background: #ddd;\n margin: 10px 0;\n position: relative;\n border-radius: 5px;\n }\n .step-progress {\n height: 100%;\n background: #3498db;\n width: 0%;\n border-radius: 5px;\n transition: width 0.3s ease;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a<\/h1>\n <\/div>\n <div class=\"step-indicator\">\n <div class=\"step-progress\"><\/div>\n <\/div>\n <form id=\"marketingForm\" action=\"\">\n <div class=\"form-step active\" data-step=\"1\">\n <h2>\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0645\u0644<\/h2>\n <label>\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 *<\/label>\n <input type=\"text\" required>\n <label>\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a *<\/label>\n <input type=\"email\" required>\n <div class=\"buttons\">\n <button type=\"button\" class=\"next-btn\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <\/div>\n <div class=\"form-step\" data-step=\"2\">\n <h2>\u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641<\/h2>\n <label>\u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0639\u0645\u0631\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u0629 *<\/label>\n <input type=\"text\" required>\n <div class=\"buttons\">\n <button type=\"button\" class=\"prev-btn\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button type=\"button\" class=\"next-btn\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <\/div>\n <div class=\"form-step\" data-step=\"3\">\n <h2>\u0627\u0644\u0623\u0647\u062f\u0627\u0641<\/h2>\n <label>\u0645\u0627 \u0647\u0648 \u0627\u0644\u0647\u062f\u0641 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u061f *<\/label>\n <input type=\"text\" required>\n <div class=\"buttons\">\n <button type=\"button\" class=\"prev-btn\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button type=\"submit\">\u0625\u0631\u0633\u0627\u0644<\/button>\n <\/div>\n <\/div>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <\/div>\n <script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const steps = document.querySelectorAll(\".form-step\");\n const progress = document.querySelector(\".step-progress\");\n const nextButtons = document.querySelectorAll(\".next-btn\");\n const prevButtons = document.querySelectorAll(\".prev-btn\");\n let currentStep = 0;\n\n function updateStepDisplay() {\n steps.forEach((step, index) => {\n step.classList.toggle(\"active\", index === currentStep);\n });\n progress.style.width = `${(currentStep \/ (steps.length - 1)) * 100}%`;\n }\n\n nextButtons.forEach(button => {\n button.addEventListener(\"click\", function () {\n if (currentStep < steps.length - 1) {\n currentStep++;\n updateStepDisplay();\n }\n });\n });\n\n prevButtons.forEach(button => {\n button.addEventListener(\"click\", function () {\n if (currentStep > 0) {\n currentStep--;\n updateStepDisplay();\n }\n });\n });\n\n updateStepDisplay();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>AI Chat Interface<\/title>\n <style>\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f9f9f9;\n }\n h1 {\n color: #333;\n text-align: center;\n }\n .chat-container {\n display: flex;\n flex-direction: column;\n height: 70vh;\n border: 1px solid #ddd;\n border-radius: 8px;\n overflow: hidden;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }\n .chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n }\n .message-row {\n margin-bottom: 15px;\n display: flex;\n }\n .user-message {\n justify-content: flex-end;\n }\n .ai-message {\n justify-content: flex-start;\n }\n .message-content {\n padding: 10px 15px;\n border-radius: 18px;\n max-width: 70%;\n word-break: break-word;\n }\n .user-message .message-content {\n background-color: #0078d7;\n color: white;\n }\n .ai-message .message-content {\n background-color: #f0f0f0;\n color: #333;\n }\n .chat-input {\n display: flex;\n padding: 15px;\n background-color: #f0f0f0;\n border-top: 1px solid #ddd;\n }\n .chat-input textarea {\n flex: 1;\n padding: 12px;\n border: 1px solid #ddd;\n border-radius: 20px;\n resize: none;\n font-family: inherit;\n font-size: 14px;\n }\n .chat-input button {\n background-color: #0078d7;\n color: white;\n border: none;\n border-radius: 20px;\n padding: 0 20px;\n margin-left: 10px;\n cursor: pointer;\n font-weight: bold;\n }\n .chat-input button:hover {\n background-color: #006abc;\n }\n .chat-input button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n }\n .loading {\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(255,255,255,.3);\n border-radius: 50%;\n border-top-color: white;\n animation: spin 1s ease-in-out infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n .system-message {\n text-align: center;\n padding: 10px;\n color: #666;\n font-style: italic;\n font-size: 13px;\n }\n pre {\n background-color: #f6f8fa;\n border-radius: 5px;\n padding: 10px;\n overflow-x: auto;\n font-family: monospace;\n margin: 5px 0;\n }\n <\/style>\n<\/head>\n<body>\n <h1>AI Chat Assistant<\/h1>\n <div class=\"chat-container\">\n <div class=\"chat-messages\" id=\"chatMessages\">\n <div class=\"message-row ai-message\">\n <div class=\"message-content\">\n Hello! I’m your AI assistant. How can I help you today?\n <\/div>\n <\/div>\n <\/div>\n <div class=\"chat-input\">\n <textarea id=\"userInput\" placeholder=\"Type your message here...\" rows=\"1\"><\/textarea>\n <button id=\"sendButton\">Send<\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ -------------------------------\n \/\/ Insert your GitHub API key here:\n const GITHUB_API_KEY = \"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\"; \/\/ <-- Your API key\n \/\/ -------------------------------\n\n const chatMessages = document.getElementById('chatMessages');\n const userInput = document.getElementById('userInput');\n const sendButton = document.getElementById('sendButton');\n\n \/\/ Auto-resize the textarea based on content\n userInput.addEventListener('input', function() {\n this.style.height = 'auto';\n this.style.height = (this.scrollHeight) + 'px';\n });\n\n \/\/ Send message when Enter key is pressed (but allow Shift+Enter for new lines)\n userInput.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n });\n\n sendButton.addEventListener('click', sendMessage);\n\n async function sendMessage() {\n const message = userInput.value.trim();\n if (!message) return;\n\n \/\/ Clear input and reset height\n userInput.value = '';\n userInput.style.height = 'auto';\n\n \/\/ Add user message to chat\n addMessage(message, 'user');\n\n \/\/ Disable input while waiting for response\n userInput.disabled = true;\n sendButton.disabled = true;\n sendButton.innerHTML = '<div class=\"loading\"><\/div>';\n\n try {\n \/\/ Call the AI API using your GitHub API key\n const response = await callAIApi(message);\n \/\/ Add AI response to chat\n addMessage(response, 'ai');\n } catch (error) {\n console.error('Error:', error);\n addSystemMessage('Sorry, there was an error processing your request.');\n }\n\n \/\/ Re-enable input\n userInput.disabled = false;\n sendButton.disabled = false;\n sendButton.textContent = 'Send';\n userInput.focus();\n }\n\n function addMessage(content, sender) {\n const messageRow = document.createElement('div');\n messageRow.className = `message-row ${sender}-message`;\n\n const messageContent = document.createElement('div');\n messageContent.className = 'message-content';\n\n \/\/ Process markdown-like formatting for code blocks\n if (sender === 'ai') {\n messageContent.innerHTML = formatMessage(content);\n } else {\n messageContent.textContent = content;\n }\n\n messageRow.appendChild(messageContent);\n chatMessages.appendChild(messageRow);\n \/\/ Scroll to the bottom\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }\n\n function addSystemMessage(message) {\n const systemMessage = document.createElement('div');\n systemMessage.className = 'system-message';\n systemMessage.textContent = message;\n chatMessages.appendChild(systemMessage);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }\n\n function formatMessage(text) {\n \/\/ Replace code blocks with styled pre elements\n let formatted = text.replace(\/```([\\s\\S]*?)```\/g, '<pre>$1<\/pre>');\n \/\/ Replace newlines with <br> tags\n formatted = formatted.replace(\/\\n\/g, '<br>');\n return formatted;\n }\n\n async function callAIApi(message) {\n \/\/ Replace the URL below with your actual AI endpoint URL\n const endpoint = \"https:\/\/api.github.com\/your-ai-endpoint\";\n \n const response = await fetch(endpoint, {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${GITHUB_API_KEY}`,\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json'\n },\n body: JSON.stringify({ prompt: message })\n });\n\n if (!response.ok) {\n throw new Error(`API error: ${response.status}`);\n }\n\n const data = await response.json();\n \/\/ Assumes the response JSON has a property called \"response\"\n return data.response;\n }\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 * \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a * \u0627\u0644\u062a\u0627\u0644\u064a \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641 \u0627\u0644\u0641\u0626\u0629 […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1446","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"KHS for Global Trading","author_link":"https:\/\/khstrading.com\/en\/author\/khstrading\/"},"uagb_comment_info":0,"uagb_excerpt":"\u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 * \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a * \u0627\u0644\u062a\u0627\u0644\u064a \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641 \u0627\u0644\u0641\u0626\u0629 […]","_links":{"self":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/comments?post=1446"}],"version-history":[{"count":6,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1446\/revisions"}],"predecessor-version":[{"id":1476,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1446\/revisions\/1476"}],"wp:attachment":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/media?parent=1446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1446,"date":"2025-03-15T17:24:33","date_gmt":"2025-03-15T17:24:33","guid":{"rendered":"https:\/\/khstrading.com\/?page_id=1446"},"modified":"2025-03-15T20:24:07","modified_gmt":"2025-03-15T20:24:07","slug":"%d8%ad%d9%84-%d8%aa%d8%b3%d9%88%d9%8a%d9%82%d9%8a","status":"publish","type":"page","link":"https:\/\/khstrading.com\/en\/%d8%ad%d9%84-%d8%aa%d8%b3%d9%88%d9%8a%d9%82%d9%8a\/","title":{"rendered":"\u062d\u0644 \u062a\u0633\u0648\u064a\u0642\u064a \u0644\u0645\u0646\u062a\u062c\u0643"},"content":{"rendered":"\n\n\n \n \n \u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a<\/title>\n <style>\n * {\n box-sizing: border-box;\n font-family: 'Cairo', sans-serif;\n }\n body {\n background-color: #f5f5f5;\n margin: 0;\n padding: 0;\n direction: rtl;\n }\n .container {\n max-width: 800px;\n margin: 20px auto;\n background-color: white;\n border-radius: 10px;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);\n padding: 20px;\n }\n .header {\n background-color: #3498db;\n color: white;\n padding: 20px;\n text-align: center;\n border-radius: 10px 10px 0 0;\n }\n .form-step {\n display: none;\n }\n .form-step.active {\n display: block;\n }\n .buttons {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n }\n button {\n padding: 10px 20px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n .step-indicator {\n width: 100%;\n height: 10px;\n background: #ddd;\n margin: 10px 0;\n position: relative;\n border-radius: 5px;\n }\n .step-progress {\n height: 100%;\n background: #3498db;\n width: 0%;\n border-radius: 5px;\n transition: width 0.3s ease;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a<\/h1>\n <\/div>\n <div class=\"step-indicator\">\n <div class=\"step-progress\"><\/div>\n <\/div>\n <form id=\"marketingForm\" action=\"\">\n <div class=\"form-step active\" data-step=\"1\">\n <h2>\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0645\u0644<\/h2>\n <label>\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 *<\/label>\n <input type=\"text\" required>\n <label>\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a *<\/label>\n <input type=\"email\" required>\n <div class=\"buttons\">\n <button type=\"button\" class=\"next-btn\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <\/div>\n <div class=\"form-step\" data-step=\"2\">\n <h2>\u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641<\/h2>\n <label>\u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0639\u0645\u0631\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u0629 *<\/label>\n <input type=\"text\" required>\n <div class=\"buttons\">\n <button type=\"button\" class=\"prev-btn\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button type=\"button\" class=\"next-btn\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <\/div>\n <div class=\"form-step\" data-step=\"3\">\n <h2>\u0627\u0644\u0623\u0647\u062f\u0627\u0641<\/h2>\n <label>\u0645\u0627 \u0647\u0648 \u0627\u0644\u0647\u062f\u0641 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u061f *<\/label>\n <input type=\"text\" required>\n <div class=\"buttons\">\n <button type=\"button\" class=\"prev-btn\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button type=\"submit\">\u0625\u0631\u0633\u0627\u0644<\/button>\n <\/div>\n <\/div>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <\/div>\n <script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const steps = document.querySelectorAll(\".form-step\");\n const progress = document.querySelector(\".step-progress\");\n const nextButtons = document.querySelectorAll(\".next-btn\");\n const prevButtons = document.querySelectorAll(\".prev-btn\");\n let currentStep = 0;\n\n function updateStepDisplay() {\n steps.forEach((step, index) => {\n step.classList.toggle(\"active\", index === currentStep);\n });\n progress.style.width = `${(currentStep \/ (steps.length - 1)) * 100}%`;\n }\n\n nextButtons.forEach(button => {\n button.addEventListener(\"click\", function () {\n if (currentStep < steps.length - 1) {\n currentStep++;\n updateStepDisplay();\n }\n });\n });\n\n prevButtons.forEach(button => {\n button.addEventListener(\"click\", function () {\n if (currentStep > 0) {\n currentStep--;\n updateStepDisplay();\n }\n });\n });\n\n updateStepDisplay();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>AI Chat Interface<\/title>\n <style>\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f9f9f9;\n }\n h1 {\n color: #333;\n text-align: center;\n }\n .chat-container {\n display: flex;\n flex-direction: column;\n height: 70vh;\n border: 1px solid #ddd;\n border-radius: 8px;\n overflow: hidden;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }\n .chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n }\n .message-row {\n margin-bottom: 15px;\n display: flex;\n }\n .user-message {\n justify-content: flex-end;\n }\n .ai-message {\n justify-content: flex-start;\n }\n .message-content {\n padding: 10px 15px;\n border-radius: 18px;\n max-width: 70%;\n word-break: break-word;\n }\n .user-message .message-content {\n background-color: #0078d7;\n color: white;\n }\n .ai-message .message-content {\n background-color: #f0f0f0;\n color: #333;\n }\n .chat-input {\n display: flex;\n padding: 15px;\n background-color: #f0f0f0;\n border-top: 1px solid #ddd;\n }\n .chat-input textarea {\n flex: 1;\n padding: 12px;\n border: 1px solid #ddd;\n border-radius: 20px;\n resize: none;\n font-family: inherit;\n font-size: 14px;\n }\n .chat-input button {\n background-color: #0078d7;\n color: white;\n border: none;\n border-radius: 20px;\n padding: 0 20px;\n margin-left: 10px;\n cursor: pointer;\n font-weight: bold;\n }\n .chat-input button:hover {\n background-color: #006abc;\n }\n .chat-input button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n }\n .loading {\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(255,255,255,.3);\n border-radius: 50%;\n border-top-color: white;\n animation: spin 1s ease-in-out infinite;\n }\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n .system-message {\n text-align: center;\n padding: 10px;\n color: #666;\n font-style: italic;\n font-size: 13px;\n }\n pre {\n background-color: #f6f8fa;\n border-radius: 5px;\n padding: 10px;\n overflow-x: auto;\n font-family: monospace;\n margin: 5px 0;\n }\n <\/style>\n<\/head>\n<body>\n <h1>AI Chat Assistant<\/h1>\n <div class=\"chat-container\">\n <div class=\"chat-messages\" id=\"chatMessages\">\n <div class=\"message-row ai-message\">\n <div class=\"message-content\">\n Hello! I’m your AI assistant. How can I help you today?\n <\/div>\n <\/div>\n <\/div>\n <div class=\"chat-input\">\n <textarea id=\"userInput\" placeholder=\"Type your message here...\" rows=\"1\"><\/textarea>\n <button id=\"sendButton\">Send<\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ -------------------------------\n \/\/ Insert your GitHub API key here:\n const GITHUB_API_KEY = \"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\"; \/\/ <-- Your API key\n \/\/ -------------------------------\n\n const chatMessages = document.getElementById('chatMessages');\n const userInput = document.getElementById('userInput');\n const sendButton = document.getElementById('sendButton');\n\n \/\/ Auto-resize the textarea based on content\n userInput.addEventListener('input', function() {\n this.style.height = 'auto';\n this.style.height = (this.scrollHeight) + 'px';\n });\n\n \/\/ Send message when Enter key is pressed (but allow Shift+Enter for new lines)\n userInput.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n });\n\n sendButton.addEventListener('click', sendMessage);\n\n async function sendMessage() {\n const message = userInput.value.trim();\n if (!message) return;\n\n \/\/ Clear input and reset height\n userInput.value = '';\n userInput.style.height = 'auto';\n\n \/\/ Add user message to chat\n addMessage(message, 'user');\n\n \/\/ Disable input while waiting for response\n userInput.disabled = true;\n sendButton.disabled = true;\n sendButton.innerHTML = '<div class=\"loading\"><\/div>';\n\n try {\n \/\/ Call the AI API using your GitHub API key\n const response = await callAIApi(message);\n \/\/ Add AI response to chat\n addMessage(response, 'ai');\n } catch (error) {\n console.error('Error:', error);\n addSystemMessage('Sorry, there was an error processing your request.');\n }\n\n \/\/ Re-enable input\n userInput.disabled = false;\n sendButton.disabled = false;\n sendButton.textContent = 'Send';\n userInput.focus();\n }\n\n function addMessage(content, sender) {\n const messageRow = document.createElement('div');\n messageRow.className = `message-row ${sender}-message`;\n\n const messageContent = document.createElement('div');\n messageContent.className = 'message-content';\n\n \/\/ Process markdown-like formatting for code blocks\n if (sender === 'ai') {\n messageContent.innerHTML = formatMessage(content);\n } else {\n messageContent.textContent = content;\n }\n\n messageRow.appendChild(messageContent);\n chatMessages.appendChild(messageRow);\n \/\/ Scroll to the bottom\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }\n\n function addSystemMessage(message) {\n const systemMessage = document.createElement('div');\n systemMessage.className = 'system-message';\n systemMessage.textContent = message;\n chatMessages.appendChild(systemMessage);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }\n\n function formatMessage(text) {\n \/\/ Replace code blocks with styled pre elements\n let formatted = text.replace(\/```([\\s\\S]*?)```\/g, '<pre>$1<\/pre>');\n \/\/ Replace newlines with <br> tags\n formatted = formatted.replace(\/\\n\/g, '<br>');\n return formatted;\n }\n\n async function callAIApi(message) {\n \/\/ Replace the URL below with your actual AI endpoint URL\n const endpoint = \"https:\/\/api.github.com\/your-ai-endpoint\";\n \n const response = await fetch(endpoint, {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${GITHUB_API_KEY}`,\n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json'\n },\n body: JSON.stringify({ prompt: message })\n });\n\n if (!response.ok) {\n throw new Error(`API error: ${response.status}`);\n }\n\n const data = await response.json();\n \/\/ Assumes the response JSON has a property called \"response\"\n return data.response;\n }\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 * \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a * \u0627\u0644\u062a\u0627\u0644\u064a \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641 \u0627\u0644\u0641\u0626\u0629 […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1446","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"KHS for Global Trading","author_link":"https:\/\/khstrading.com\/en\/author\/khstrading\/"},"uagb_comment_info":0,"uagb_excerpt":"\u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0645\u0639\u0627\u0644\u062c \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 * \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a * \u0627\u0644\u062a\u0627\u0644\u064a \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641 \u0627\u0644\u0641\u0626\u0629 […]","_links":{"self":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/comments?post=1446"}],"version-history":[{"count":6,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1446\/revisions"}],"predecessor-version":[{"id":1476,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1446\/revisions\/1476"}],"wp:attachment":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/media?parent=1446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}