\u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #3498db;\n --secondary-color: #2980b9;\n --bg-color: #f9f9f9;\n --text-color: #333;\n --border-color: #ddd;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n --radius: 8px;\n --success-color: #27ae60;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Cairo', sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }\n\n .container {\n background-color: white;\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n width: 100%;\n max-width: 500px;\n padding: 30px;\n position: relative;\n overflow: hidden;\n }\n\n .header {\n text-align: center;\n margin-bottom: 30px;\n color: var(--primary-color);\n position: relative;\n }\n\n .header h1 {\n font-size: 2rem;\n margin-bottom: 10px;\n }\n\n .header p {\n color: #666;\n font-size: 0.9rem;\n }\n\n .form-group {\n margin-bottom: 20px;\n }\n\n label {\n display: block;\n margin-bottom: 8px;\n font-weight: bold;\n }\n\n select, input {\n width: 100%;\n padding: 12px 15px;\n border: 1px solid var(--border-color);\n border-radius: var(--radius);\n font-size: 1rem;\n transition: all 0.3s ease;\n }\n\n select:focus, input:focus {\n outline: none;\n border-color: var(--primary-color);\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);\n }\n\n .currency-input {\n position: relative;\n }\n\n .currency-symbol {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: #666;\n }\n\n .result-container {\n margin-top: 30px;\n padding: 20px;\n background-color: #f0f8ff;\n border-radius: var(--radius);\n border-right: 4px solid var(--primary-color);\n display: none;\n }\n\n .result-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n padding-bottom: 10px;\n border-bottom: 1px dashed #ccc;\n }\n\n .result-row:last-child {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n\n .result-amount {\n font-weight: bold;\n color: var(--success-color);\n }\n\n .btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: var(--radius);\n padding: 12px 25px;\n font-size: 1rem;\n cursor: pointer;\n width: 100%;\n transition: background-color 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n }\n\n .btn:hover {\n background-color: var(--secondary-color);\n }\n\n .btn:disabled {\n background-color: #95a5a6;\n cursor: not-allowed;\n }\n\n .loader {\n display: none;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n border-top-color: white;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .error-message {\n color: #e74c3c;\n margin-top: 5px;\n display: none;\n font-size: 0.9rem;\n }\n\n .currency-options {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n }\n\n .currency-option {\n flex: 1;\n padding: 12px;\n text-align: center;\n border: 2px solid var(--border-color);\n border-radius: var(--radius);\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .currency-option.active {\n border-color: var(--primary-color);\n background-color: rgba(52, 152, 219, 0.1);\n font-weight: bold;\n }\n\n .currency-name {\n display: block;\n font-size: 0.9rem;\n color: #666;\n margin-top: 4px;\n }\n\n .last-update {\n text-align: center;\n margin-top: 15px;\n font-size: 0.8rem;\n color: #7f8c8d;\n }\n\n footer {\n margin-top: 30px;\n text-align: center;\n color: #7f8c8d;\n font-size: 0.8rem;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a<\/h1>\n <p>\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/p>\n <\/div>\n\n <div class=\"form-group\">\n <label>\u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0645\u0635\u062f\u0631<\/label>\n <div class=\"currency-options\">\n <div class=\"currency-option active\" data-currency=\"SAR\">\n SAR\n <span class=\"currency-name\">\u0627\u0644\u0631\u064a\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/span>\n <\/div>\n <div class=\"currency-option\" data-currency=\"USD\">\n USD\n <span class=\"currency-name\">\u0627\u0644\u062f\u0648\u0644\u0627\u0631 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a<\/span>\n <\/div>\n <div class=\"currency-option\" data-currency=\"EUR\">\n EUR\n <span class=\"currency-name\">\u0627\u0644\u064a\u0648\u0631\u0648<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"amount\">Amount<\/label>\n <div class=\"currency-input\">\n <input type=\"number\" id=\"amount\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0645\u0628\u0644\u063a\" min=\"0.01\" step=\"0.01\" value=\"100\">\n <span class=\"currency-symbol\" id=\"currency-symbol\">\ufdfc<\/span>\n <\/div>\n <div class=\"error-message\" id=\"amount-error\">\u064a\u0631\u062c\u0649 \u0625\u062f\u062e\u0627\u0644 \u0645\u0628\u0644\u063a \u0635\u062d\u064a\u062d<\/div>\n <\/div>\n\n <button id=\"convert-btn\" class=\"btn\">\n <span id=\"btn-text\">\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0639\u0645\u0644\u0629<\/span>\n <span class=\"loader\" id=\"loader\"><\/span>\n <\/button>\n\n <div class=\"result-container\" id=\"result-container\">\n <div class=\"result-row\">\n <span>\u0627\u0644\u0645\u0628\u0644\u063a \u0627\u0644\u0623\u0635\u0644\u064a:<\/span>\n <span id=\"original-amount\" class=\"result-amount\"><\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0627\u0644\u062f\u0648\u0644\u0627\u0631 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a (USD):<\/span>\n <span id=\"usd-amount\" class=\"result-amount\"><\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0627\u0644\u0631\u0648\u0628\u064a\u0629 \u0627\u0644\u0625\u0646\u062f\u0648\u0646\u064a\u0633\u064a\u0629 (IDR):<\/span>\n <span id=\"idr-amount\" class=\"result-amount\"><\/span>\n <\/div>\n <\/div>\n\n <p class=\"last-update\" id=\"last-update\"><\/p>\n <\/div>\n\n <footer>\n \u062a\u0645 \u062a\u0637\u0648\u064a\u0631\u0647 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CurrencyFreaks API\n <\/footer>\n\n <script>\n \/\/ \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629\n const API_KEY = '3e9c05a485784d35b8eb7681a2c1dc08';\n const API_URL = 'https:\/\/api.currencyfreaks.com\/v2.0\/rates\/latest';\n let exchangeRates = {};\n let lastUpdateTime = null;\n let selectedCurrency = 'SAR';\n\n \/\/ \u0631\u0645\u0648\u0632 \u0627\u0644\u0639\u0645\u0644\u0627\u062a\n const currencySymbols = {\n 'SAR': '\ufdfc',\n 'USD': '$',\n 'EUR': '\u20ac'\n };\n\n \/\/ \u0627\u0644\u0639\u0646\u0627\u0635\u0631 DOM\n const currencyOptions = document.querySelectorAll('.currency-option');\n const amountInput = document.getElementById('amount');\n const currencySymbolEl = document.getElementById('currency-symbol');\n const convertBtn = document.getElementById('convert-btn');\n const btnText = document.getElementById('btn-text');\n const loader = document.getElementById('loader');\n const resultContainer = document.getElementById('result-container');\n const originalAmountEl = document.getElementById('original-amount');\n const usdAmountEl = document.getElementById('usd-amount');\n const idrAmountEl = document.getElementById('idr-amount');\n const lastUpdateEl = document.getElementById('last-update');\n const amountError = document.getElementById('amount-error');\n\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062a\u0637\u0628\u064a\u0642\n function init() {\n setupEventListeners();\n fetchExchangeRates();\n }\n\n \/\/ \u0625\u0639\u062f\u0627\u062f \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0639\n function setupEventListeners() {\n \/\/ \u0645\u0633\u062a\u0645\u0639 \u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0629\n currencyOptions.forEach(option => {\n option.addEventListener('click', () => {\n \/\/ \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0646\u0634\u0637\u0629 \u0645\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a\n currencyOptions.forEach(opt => opt.classList.remove('active'));\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0646\u0634\u0637\u0629 \u0644\u0644\u062e\u064a\u0627\u0631 \u0627\u0644\u0645\u062d\u062f\u062f\n option.classList.add('active');\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629\n selectedCurrency = option.dataset.currency;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0631\u0645\u0632 \u0627\u0644\u0639\u0645\u0644\u0629\n updateCurrencySymbol();\n });\n });\n\n \/\/ \u0645\u0633\u062a\u0645\u0639 \u0644\u062d\u0642\u0644 \u0627\u0644\u0645\u0628\u0644\u063a\n amountInput.addEventListener('input', validateAmount);\n \n \/\/ \u0645\u0633\u062a\u0645\u0639 \u0644\u0632\u0631 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n convertBtn.addEventListener('click', convertCurrency);\n }\n\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0631\u0645\u0632 \u0627\u0644\u0639\u0645\u0644\u0629\n function updateCurrencySymbol() {\n currencySymbolEl.textContent = currencySymbols[selectedCurrency] || '';\n }\n\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0645\u0628\u0644\u063a\n function validateAmount() {\n const amount = parseFloat(amountInput.value);\n if (isNaN(amount) || amount <= 0) {\n amountError.style.display = 'block';\n convertBtn.disabled = true;\n return false;\n } else {\n amountError.style.display = 'none';\n convertBtn.disabled = false;\n return true;\n }\n }\n\n \/\/ \u062c\u0644\u0628 \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0635\u0631\u0641\n async function fetchExchangeRates() {\n showLoader(true);\n \n try {\n const response = await fetch(`${API_URL}?apikey=${API_KEY}&symbols=SAR,USD,EUR,IDR`);\n const data = await response.json();\n \n if (data && data.rates) {\n exchangeRates = data.rates;\n lastUpdateTime = new Date(data.date);\n updateLastUpdateTime();\n } else {\n throw new Error('\u0628\u064a\u0627\u0646\u0627\u062a \u063a\u064a\u0631 \u0635\u0627\u0644\u062d\u0629 \u0645\u0646 API');\n }\n } catch (error) {\n console.error('\u062e\u0637\u0623 \u0641\u064a \u062c\u0644\u0628 \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0635\u0631\u0641:', error);\n alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u062c\u0644\u0628 \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0635\u0631\u0641. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0644\u0627\u062d\u0642\u064b\u0627.');\n } finally {\n showLoader(false);\n }\n }\n\n \/\/ \u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0639\u0645\u0644\u0629\n function convertCurrency() {\n if (!validateAmount()) {\n return;\n }\n \n const amount = parseFloat(amountInput.value);\n \n if (!exchangeRates[selectedCurrency] || !exchangeRates['USD'] || !exchangeRates['IDR']) {\n alert('\u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0635\u0631\u0641 \u063a\u064a\u0631 \u0645\u062a\u0648\u0641\u0631\u0629 \u062d\u0627\u0644\u064a\u064b\u0627. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0644\u0627\u062d\u0642\u064b\u0627.');\n return;\n }\n \n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0628\u0627\u0644\u063a \u0627\u0644\u0645\u062d\u0648\u0644\u0629\n let usdAmount, idrAmount;\n \n if (selectedCurrency === 'USD') {\n usdAmount = amount;\n idrAmount = amount * (parseFloat(exchangeRates['IDR']) \/ parseFloat(exchangeRates['USD']));\n } else {\n usdAmount = amount * (parseFloat(exchangeRates['USD']) \/ parseFloat(exchangeRates[selectedCurrency]));\n idrAmount = amount * (parseFloat(exchangeRates['IDR']) \/ parseFloat(exchangeRates[selectedCurrency]));\n }\n \n \/\/ \u0639\u0631\u0636 \u0627\u0644\u0646\u062a\u0627\u0626\u062c\n originalAmountEl.textContent = `${amount.toFixed(2)} ${selectedCurrency}`;\n usdAmountEl.textContent = `${usdAmount.toFixed(2)} USD`;\n idrAmountEl.textContent = `${idrAmount.toFixed(2)} IDR`;\n \n \/\/ \u0625\u0638\u0647\u0627\u0631 \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0646\u062a\u0627\u0626\u062c\n resultContainer.style.display = 'block';\n }\n\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0648\u0642\u062a \u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b\n function updateLastUpdateTime() {\n if (lastUpdateTime) {\n const formattedDate = new Intl.DateTimeFormat('ar', {\n dateStyle: 'medium',\n timeStyle: 'short'\n }).format(lastUpdateTime);\n \n lastUpdateEl.textContent = `\u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b: ${formattedDate}`;\n }\n }\n\n \/\/ \u0625\u0638\u0647\u0627\u0631\/\u0625\u062e\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>\n\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0645\u0635\u062f\u0631 SAR \u0627\u0644\u0631\u064a\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a USD \u0627\u0644\u062f\u0648\u0644\u0627\u0631 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a […]<\/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-1450","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\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0645\u0635\u062f\u0631 SAR \u0627\u0644\u0631\u064a\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a USD \u0627\u0644\u062f\u0648\u0644\u0627\u0631 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a […]","_links":{"self":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1450","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=1450"}],"version-history":[{"count":8,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1450\/revisions"}],"predecessor-version":[{"id":1475,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1450\/revisions\/1475"}],"wp:attachment":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/media?parent=1450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1450,"date":"2025-03-15T17:25:59","date_gmt":"2025-03-15T17:25:59","guid":{"rendered":"https:\/\/khstrading.com\/?page_id=1450"},"modified":"2025-03-15T20:23:57","modified_gmt":"2025-03-15T20:23:57","slug":"%d8%aa%d8%ad%d9%88%d9%8a%d9%84-%d8%a7%d9%84%d8%b9%d9%85%d9%84%d8%a9","status":"publish","type":"page","link":"https:\/\/khstrading.com\/en\/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-%d8%a7%d9%84%d8%b9%d9%85%d9%84%d8%a9\/","title":{"rendered":"\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0639\u0645\u0644\u0629"},"content":{"rendered":"\n\n\n \n \n \u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #3498db;\n --secondary-color: #2980b9;\n --bg-color: #f9f9f9;\n --text-color: #333;\n --border-color: #ddd;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n --radius: 8px;\n --success-color: #27ae60;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Cairo', sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }\n\n .container {\n background-color: white;\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n width: 100%;\n max-width: 500px;\n padding: 30px;\n position: relative;\n overflow: hidden;\n }\n\n .header {\n text-align: center;\n margin-bottom: 30px;\n color: var(--primary-color);\n position: relative;\n }\n\n .header h1 {\n font-size: 2rem;\n margin-bottom: 10px;\n }\n\n .header p {\n color: #666;\n font-size: 0.9rem;\n }\n\n .form-group {\n margin-bottom: 20px;\n }\n\n label {\n display: block;\n margin-bottom: 8px;\n font-weight: bold;\n }\n\n select, input {\n width: 100%;\n padding: 12px 15px;\n border: 1px solid var(--border-color);\n border-radius: var(--radius);\n font-size: 1rem;\n transition: all 0.3s ease;\n }\n\n select:focus, input:focus {\n outline: none;\n border-color: var(--primary-color);\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);\n }\n\n .currency-input {\n position: relative;\n }\n\n .currency-symbol {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: #666;\n }\n\n .result-container {\n margin-top: 30px;\n padding: 20px;\n background-color: #f0f8ff;\n border-radius: var(--radius);\n border-right: 4px solid var(--primary-color);\n display: none;\n }\n\n .result-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n padding-bottom: 10px;\n border-bottom: 1px dashed #ccc;\n }\n\n .result-row:last-child {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n\n .result-amount {\n font-weight: bold;\n color: var(--success-color);\n }\n\n .btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: var(--radius);\n padding: 12px 25px;\n font-size: 1rem;\n cursor: pointer;\n width: 100%;\n transition: background-color 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n }\n\n .btn:hover {\n background-color: var(--secondary-color);\n }\n\n .btn:disabled {\n background-color: #95a5a6;\n cursor: not-allowed;\n }\n\n .loader {\n display: none;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n border-top-color: white;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .error-message {\n color: #e74c3c;\n margin-top: 5px;\n display: none;\n font-size: 0.9rem;\n }\n\n .currency-options {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n }\n\n .currency-option {\n flex: 1;\n padding: 12px;\n text-align: center;\n border: 2px solid var(--border-color);\n border-radius: var(--radius);\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .currency-option.active {\n border-color: var(--primary-color);\n background-color: rgba(52, 152, 219, 0.1);\n font-weight: bold;\n }\n\n .currency-name {\n display: block;\n font-size: 0.9rem;\n color: #666;\n margin-top: 4px;\n }\n\n .last-update {\n text-align: center;\n margin-top: 15px;\n font-size: 0.8rem;\n color: #7f8c8d;\n }\n\n footer {\n margin-top: 30px;\n text-align: center;\n color: #7f8c8d;\n font-size: 0.8rem;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a<\/h1>\n <p>\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/p>\n <\/div>\n\n <div class=\"form-group\">\n <label>\u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0645\u0635\u062f\u0631<\/label>\n <div class=\"currency-options\">\n <div class=\"currency-option active\" data-currency=\"SAR\">\n SAR\n <span class=\"currency-name\">\u0627\u0644\u0631\u064a\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/span>\n <\/div>\n <div class=\"currency-option\" data-currency=\"USD\">\n USD\n <span class=\"currency-name\">\u0627\u0644\u062f\u0648\u0644\u0627\u0631 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a<\/span>\n <\/div>\n <div class=\"currency-option\" data-currency=\"EUR\">\n EUR\n <span class=\"currency-name\">\u0627\u0644\u064a\u0648\u0631\u0648<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"amount\">Amount<\/label>\n <div class=\"currency-input\">\n <input type=\"number\" id=\"amount\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0645\u0628\u0644\u063a\" min=\"0.01\" step=\"0.01\" value=\"100\">\n <span class=\"currency-symbol\" id=\"currency-symbol\">\ufdfc<\/span>\n <\/div>\n <div class=\"error-message\" id=\"amount-error\">\u064a\u0631\u062c\u0649 \u0625\u062f\u062e\u0627\u0644 \u0645\u0628\u0644\u063a \u0635\u062d\u064a\u062d<\/div>\n <\/div>\n\n <button id=\"convert-btn\" class=\"btn\">\n <span id=\"btn-text\">\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0639\u0645\u0644\u0629<\/span>\n <span class=\"loader\" id=\"loader\"><\/span>\n <\/button>\n\n <div class=\"result-container\" id=\"result-container\">\n <div class=\"result-row\">\n <span>\u0627\u0644\u0645\u0628\u0644\u063a \u0627\u0644\u0623\u0635\u0644\u064a:<\/span>\n <span id=\"original-amount\" class=\"result-amount\"><\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0627\u0644\u062f\u0648\u0644\u0627\u0631 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a (USD):<\/span>\n <span id=\"usd-amount\" class=\"result-amount\"><\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0627\u0644\u0631\u0648\u0628\u064a\u0629 \u0627\u0644\u0625\u0646\u062f\u0648\u0646\u064a\u0633\u064a\u0629 (IDR):<\/span>\n <span id=\"idr-amount\" class=\"result-amount\"><\/span>\n <\/div>\n <\/div>\n\n <p class=\"last-update\" id=\"last-update\"><\/p>\n <\/div>\n\n <footer>\n \u062a\u0645 \u062a\u0637\u0648\u064a\u0631\u0647 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CurrencyFreaks API\n <\/footer>\n\n <script>\n \/\/ \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629\n const API_KEY = '3e9c05a485784d35b8eb7681a2c1dc08';\n const API_URL = 'https:\/\/api.currencyfreaks.com\/v2.0\/rates\/latest';\n let exchangeRates = {};\n let lastUpdateTime = null;\n let selectedCurrency = 'SAR';\n\n \/\/ \u0631\u0645\u0648\u0632 \u0627\u0644\u0639\u0645\u0644\u0627\u062a\n const currencySymbols = {\n 'SAR': '\ufdfc',\n 'USD': '$',\n 'EUR': '\u20ac'\n };\n\n \/\/ \u0627\u0644\u0639\u0646\u0627\u0635\u0631 DOM\n const currencyOptions = document.querySelectorAll('.currency-option');\n const amountInput = document.getElementById('amount');\n const currencySymbolEl = document.getElementById('currency-symbol');\n const convertBtn = document.getElementById('convert-btn');\n const btnText = document.getElementById('btn-text');\n const loader = document.getElementById('loader');\n const resultContainer = document.getElementById('result-container');\n const originalAmountEl = document.getElementById('original-amount');\n const usdAmountEl = document.getElementById('usd-amount');\n const idrAmountEl = document.getElementById('idr-amount');\n const lastUpdateEl = document.getElementById('last-update');\n const amountError = document.getElementById('amount-error');\n\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062a\u0637\u0628\u064a\u0642\n function init() {\n setupEventListeners();\n fetchExchangeRates();\n }\n\n \/\/ \u0625\u0639\u062f\u0627\u062f \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0639\n function setupEventListeners() {\n \/\/ \u0645\u0633\u062a\u0645\u0639 \u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0629\n currencyOptions.forEach(option => {\n option.addEventListener('click', () => {\n \/\/ \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0646\u0634\u0637\u0629 \u0645\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a\n currencyOptions.forEach(opt => opt.classList.remove('active'));\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0641\u0626\u0629 \u0627\u0644\u0646\u0634\u0637\u0629 \u0644\u0644\u062e\u064a\u0627\u0631 \u0627\u0644\u0645\u062d\u062f\u062f\n option.classList.add('active');\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629\n selectedCurrency = option.dataset.currency;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0631\u0645\u0632 \u0627\u0644\u0639\u0645\u0644\u0629\n updateCurrencySymbol();\n });\n });\n\n \/\/ \u0645\u0633\u062a\u0645\u0639 \u0644\u062d\u0642\u0644 \u0627\u0644\u0645\u0628\u0644\u063a\n amountInput.addEventListener('input', validateAmount);\n \n \/\/ \u0645\u0633\u062a\u0645\u0639 \u0644\u0632\u0631 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n convertBtn.addEventListener('click', convertCurrency);\n }\n\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0631\u0645\u0632 \u0627\u0644\u0639\u0645\u0644\u0629\n function updateCurrencySymbol() {\n currencySymbolEl.textContent = currencySymbols[selectedCurrency] || '';\n }\n\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0645\u0628\u0644\u063a\n function validateAmount() {\n const amount = parseFloat(amountInput.value);\n if (isNaN(amount) || amount <= 0) {\n amountError.style.display = 'block';\n convertBtn.disabled = true;\n return false;\n } else {\n amountError.style.display = 'none';\n convertBtn.disabled = false;\n return true;\n }\n }\n\n \/\/ \u062c\u0644\u0628 \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0635\u0631\u0641\n async function fetchExchangeRates() {\n showLoader(true);\n \n try {\n const response = await fetch(`${API_URL}?apikey=${API_KEY}&symbols=SAR,USD,EUR,IDR`);\n const data = await response.json();\n \n if (data && data.rates) {\n exchangeRates = data.rates;\n lastUpdateTime = new Date(data.date);\n updateLastUpdateTime();\n } else {\n throw new Error('\u0628\u064a\u0627\u0646\u0627\u062a \u063a\u064a\u0631 \u0635\u0627\u0644\u062d\u0629 \u0645\u0646 API');\n }\n } catch (error) {\n console.error('\u062e\u0637\u0623 \u0641\u064a \u062c\u0644\u0628 \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0635\u0631\u0641:', error);\n alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u062c\u0644\u0628 \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0635\u0631\u0641. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0644\u0627\u062d\u0642\u064b\u0627.');\n } finally {\n showLoader(false);\n }\n }\n\n \/\/ \u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0639\u0645\u0644\u0629\n function convertCurrency() {\n if (!validateAmount()) {\n return;\n }\n \n const amount = parseFloat(amountInput.value);\n \n if (!exchangeRates[selectedCurrency] || !exchangeRates['USD'] || !exchangeRates['IDR']) {\n alert('\u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0635\u0631\u0641 \u063a\u064a\u0631 \u0645\u062a\u0648\u0641\u0631\u0629 \u062d\u0627\u0644\u064a\u064b\u0627. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0644\u0627\u062d\u0642\u064b\u0627.');\n return;\n }\n \n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0628\u0627\u0644\u063a \u0627\u0644\u0645\u062d\u0648\u0644\u0629\n let usdAmount, idrAmount;\n \n if (selectedCurrency === 'USD') {\n usdAmount = amount;\n idrAmount = amount * (parseFloat(exchangeRates['IDR']) \/ parseFloat(exchangeRates['USD']));\n } else {\n usdAmount = amount * (parseFloat(exchangeRates['USD']) \/ parseFloat(exchangeRates[selectedCurrency]));\n idrAmount = amount * (parseFloat(exchangeRates['IDR']) \/ parseFloat(exchangeRates[selectedCurrency]));\n }\n \n \/\/ \u0639\u0631\u0636 \u0627\u0644\u0646\u062a\u0627\u0626\u062c\n originalAmountEl.textContent = `${amount.toFixed(2)} ${selectedCurrency}`;\n usdAmountEl.textContent = `${usdAmount.toFixed(2)} USD`;\n idrAmountEl.textContent = `${idrAmount.toFixed(2)} IDR`;\n \n \/\/ \u0625\u0638\u0647\u0627\u0631 \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0646\u062a\u0627\u0626\u062c\n resultContainer.style.display = 'block';\n }\n\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0648\u0642\u062a \u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b\n function updateLastUpdateTime() {\n if (lastUpdateTime) {\n const formattedDate = new Intl.DateTimeFormat('ar', {\n dateStyle: 'medium',\n timeStyle: 'short'\n }).format(lastUpdateTime);\n \n lastUpdateEl.textContent = `\u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b: ${formattedDate}`;\n }\n }\n\n \/\/ \u0625\u0638\u0647\u0627\u0631\/\u0625\u062e\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>\n\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0645\u0635\u062f\u0631 SAR \u0627\u0644\u0631\u064a\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a USD \u0627\u0644\u062f\u0648\u0644\u0627\u0631 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a […]<\/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-1450","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\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0645\u062d\u0648\u0651\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0645\u0635\u062f\u0631 SAR \u0627\u0644\u0631\u064a\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a USD \u0627\u0644\u062f\u0648\u0644\u0627\u0631 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a […]","_links":{"self":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1450","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=1450"}],"version-history":[{"count":8,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1450\/revisions"}],"predecessor-version":[{"id":1475,"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/pages\/1450\/revisions\/1475"}],"wp:attachment":[{"href":"https:\/\/khstrading.com\/en\/wp-json\/wp\/v2\/media?parent=1450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}