\u05de\u05ea\u05e8\u05d2\u05dd \u05e9\u05e4\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05dd<\/title>\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n<style>\r\n body {\r\n font-family: 'Rubik', sans-serif;\r\n background-color: #f0f4f8;\r\n color: #333;\r\n line-height: 1.6;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.container {\r\n max-width: 900px;\r\n margin: 2rem auto;\r\n padding: 2rem;\r\n background-color: #ffffff;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\nh1, h2 {\r\n text-align: center;\r\n color: #2c3e50;\r\n margin-bottom: 1.5rem;\r\n}\r\n\r\n.translator {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 2rem;\r\n gap: 10px;\r\n}\r\n\r\n.input-section, .output-section {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: #f8f9fa;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 15px;\r\n padding: 1rem;\r\n}\r\n\r\nselect, textarea, .btn {\r\n width: 90%;\r\n padding: 1rem;\r\n margin-bottom: 1rem;\r\n border: 2px solid #e0e0e0;\r\n border-radius: 10px;\r\n font-size: 1rem;\r\n transition: all 0.3s ease;\r\n}\r\n\r\nselect:focus, textarea:focus, .btn:focus {\r\n outline: none;\r\n border-color: #3498db;\r\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);\r\n}\r\n\r\ntextarea {\r\n height: 180px;\r\n resize: vertical;\r\n background-color: #ffffff;\r\n}\r\n\r\n.btn {\r\n background-color: #3498db;\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 500;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n.btn:hover {\r\n background-color: #2980b9;\r\n}\r\n\r\n.button-group {\r\n display: flex;\r\n gap: 10px;\r\n}\r\n\r\n.button-group .btn {\r\n flex: 1;\r\n}\r\n\r\n.history {\r\n background-color: #f8f9fa;\r\n padding: 2rem;\r\n border-radius: 15px;\r\n border: 1px solid #e0e0e0;\r\n margin-top: 2rem;\r\n}\r\n\r\n#history-list {\r\n list-style-type: none;\r\n padding: 0;\r\n}\r\n\r\n#history-list li {\r\n background-color: #ffffff;\r\n margin-bottom: 1rem;\r\n padding: 1rem;\r\n border-radius: 10px;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n border: 1px solid #e0e0e0;\r\n}\r\n\r\n#history-list li button {\r\n background-color: #e74c3c;\r\n color: white;\r\n border: none;\r\n padding: 0.5rem 1rem;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n float: left;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n#history-list li button:hover {\r\n background-color: #c0392b;\r\n}\r\n\r\n@media (max-width: 700px) {\r\n .container {\r\n padding: 1rem;\r\n margin: 1rem;\r\n }\r\n\r\n .translator {\r\n flex-direction: column;\r\n }\r\n\r\n .input-section, .output-section {\r\n width: 90%;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .button-group {\r\n flex-direction: column;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <h1>\u05de\u05ea\u05e8\u05d2\u05dd \u05e9\u05e4\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05dd<\/h1>\r\n <div class=\"translator\">\r\n <div class=\"input-section\">\r\n <select id=\"source-lang\">\r\n <option value=\"en\">\u05d0\u05e0\u05d2\u05dc\u05d9\u05ea<\/option>\r\n <option value=\"he\" selected>\u05e2\u05d1\u05e8\u05d9\u05ea<\/option>\r\n <option value=\"es\">\u05e1\u05e4\u05e8\u05d3\u05d9\u05ea<\/option>\r\n <option value=\"fr\">\u05e6\u05e8\u05e4\u05ea\u05d9\u05ea<\/option>\r\n <option value=\"de\">\u05d2\u05e8\u05de\u05e0\u05d9\u05ea<\/option>\r\n <option value=\"ar\">\u05e2\u05e8\u05d1\u05d9\u05ea<\/option>\r\n <option value=\"ru\">\u05e8\u05d5\u05e1\u05d9\u05ea<\/option>\r\n <option value=\"zh\">\u05e1\u05d9\u05e0\u05d9\u05ea<\/option>\r\n <option value=\"ja\">\u05d9\u05e4\u05e0\u05d9\u05ea<\/option>\r\n <\/select>\r\n <textarea id=\"source-text\" placeholder=\"\u05d4\u05e7\u05dc\u05d3 \u05d8\u05e7\u05e1\u05d8 \u05dc\u05ea\u05e8\u05d2\u05d5\u05dd...\" dir=\"auto\"><\/textarea>\r\n <div class=\"button-group\">\r\n <button id=\"speak-source\" class=\"btn\">\u05d4\u05e7\u05e8\u05d0 \u05d8\u05e7\u05e1\u05d8 \u05de\u05e7\u05d5\u05e8<\/button>\r\n <button id=\"start-recording\" class=\"btn\">\u05d4\u05ea\u05d7\u05dc \u05d4\u05e7\u05dc\u05d8\u05d4<\/button>\r\n <button id=\"stop-recording\" class=\"btn\" style=\"display: none;\">\u05d4\u05e4\u05e1\u05e7 \u05d4\u05e7\u05dc\u05d8\u05d4<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"output-section\">\r\n <select id=\"target-lang\">\r\n <option value=\"en\" selected>\u05d0\u05e0\u05d2\u05dc\u05d9\u05ea<\/option>\r\n <option value=\"he\">\u05e2\u05d1\u05e8\u05d9\u05ea<\/option>\r\n <option value=\"es\">\u05e1\u05e4\u05e8\u05d3\u05d9\u05ea<\/option>\r\n <option value=\"fr\">\u05e6\u05e8\u05e4\u05ea\u05d9\u05ea<\/option>\r\n <option value=\"de\">\u05d2\u05e8\u05de\u05e0\u05d9\u05ea<\/option>\r\n <option value=\"ar\">\u05e2\u05e8\u05d1\u05d9\u05ea<\/option>\r\n <option value=\"ru\">\u05e8\u05d5\u05e1\u05d9\u05ea<\/option>\r\n <option value=\"zh\">\u05e1\u05d9\u05e0\u05d9\u05ea<\/option>\r\n <option value=\"ja\">\u05d9\u05e4\u05e0\u05d9\u05ea<\/option>\r\n <\/select>\r\n <textarea id=\"target-text\" readonly dir=\"auto\"><\/textarea>\r\n <button id=\"speak-target\" class=\"btn\">\u05d4\u05e7\u05e8\u05d0 \u05d8\u05e7\u05e1\u05d8 \u05de\u05ea\u05d5\u05e8\u05d2\u05dd<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"history\">\r\n <h2>\u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05ea\u05e8\u05d2\u05d5\u05de\u05d9\u05dd<\/h2>\r\n <ul id=\"history-list\"><\/ul>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n \/\/ \u05e7\u05d1\u05d5\u05e2\u05d9\u05dd \u05d5\u05d7\u05d9\u05d1\u05d5\u05e8\u05d9\u05dd \u05dc-DOM\r\nconst sourceText = document.getElementById('source-text');\r\nconst targetText = document.getElementById('target-text');\r\nconst sourceLang = document.getElementById('source-lang');\r\nconst targetLang = document.getElementById('target-lang');\r\nconst historyList = document.getElementById('history-list');\r\nconst speakSourceBtn = document.getElementById('speak-source');\r\nconst speakTargetBtn = document.getElementById('speak-target');\r\nconst startRecordingBtn = document.getElementById('start-recording');\r\nconst stopRecordingBtn = document.getElementById('stop-recording');\r\n\r\n\/\/ \u05de\u05e4\u05ea\u05d7 \u05d4-API\r\nconst API_KEY = 'AIzaSyDwjlH56bJ-S9zFJp210b4ABGU_OWxKJ1c';\r\n\r\n\/\/ \u05de\u05e9\u05ea\u05e0\u05d9\u05dd \u05d2\u05dc\u05d5\u05d1\u05dc\u05d9\u05d9\u05dd\r\nlet translationHistory = JSON.parse(localStorage.getItem('translationHistory')) || [];\r\nlet recognition;\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05ea\u05e8\u05d2\u05d5\u05dd \u05d8\u05e7\u05e1\u05d8\r\nasync function translateText() {\r\n const text = sourceText.value;\r\n const from = sourceLang.value;\r\n const to = targetLang.value;\r\n\r\n if (text) {\r\n try {\r\n const response = await fetch(`https:\/\/translation.googleapis.com\/language\/translate\/v2?key=${API_KEY}`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n },\r\n body: JSON.stringify({\r\n q: text,\r\n source: from,\r\n target: to,\r\n format: 'text'\r\n })\r\n });\r\n const data = await response.json();\r\n \r\n if (data.data && data.data.translations && data.data.translations[0]) {\r\n targetText.value = data.data.translations[0].translatedText;\r\n saveToHistory(text, targetText.value, from, to);\r\n } else {\r\n throw new Error('Translation failed');\r\n }\r\n } catch (error) {\r\n console.error('Error:', error);\r\n targetText.value = '\u05d0\u05d9\u05e8\u05e2\u05d4 \u05e9\u05d2\u05d9\u05d0\u05d4 \u05d1\u05ea\u05e8\u05d2\u05d5\u05dd. \u05d0\u05e0\u05d0 \u05e0\u05e1\u05d4 \u05e9\u05d5\u05d1.';\r\n }\r\n }\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05e9\u05de\u05d9\u05e8\u05ea \u05ea\u05e8\u05d2\u05d5\u05dd \u05d1\u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d4\r\nfunction saveToHistory(sourceText, targetText, sourceLang, targetLang) {\r\n const translation = {\r\n sourceText,\r\n targetText,\r\n sourceLang,\r\n targetLang,\r\n date: new Date().toLocaleString()\r\n };\r\n\r\n translationHistory.unshift(translation);\r\n if (translationHistory.length > 10) {\r\n translationHistory.pop();\r\n }\r\n\r\n localStorage.setItem('translationHistory', JSON.stringify(translationHistory));\r\n renderHistory();\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05e6\u05d2\u05ea \u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05d4\u05ea\u05e8\u05d2\u05d5\u05de\u05d9\u05dd\r\nfunction renderHistory() {\r\n historyList.innerHTML = '';\r\n translationHistory.forEach((item, index) => {\r\n const li = document.createElement('li');\r\n li.innerHTML = `\r\n <strong>${item.sourceLang} -> ${item.targetLang}<\/strong><br>\r\n ${item.sourceText} -> ${item.targetText}<br>\r\n <small>${item.date}<\/small>\r\n <button onclick=\"deleteHistoryItem(${index})\">\u05de\u05d7\u05e7<\/button>\r\n `;\r\n historyList.appendChild(li);\r\n });\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05de\u05d7\u05d9\u05e7\u05ea \u05e4\u05e8\u05d9\u05d8 \u05de\u05d4\u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d4\r\nfunction deleteHistoryItem(index) {\r\n translationHistory.splice(index, 1);\r\n localStorage.setItem('translationHistory', JSON.stringify(translationHistory));\r\n renderHistory();\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05e7\u05e8\u05d0\u05ea \u05d8\u05e7\u05e1\u05d8 (TTS)\r\nfunction speakText(text, lang) {\r\n if ('speechSynthesis' in window) {\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = lang;\r\n speechSynthesis.speak(utterance);\r\n } else {\r\n alert('\u05d3\u05e4\u05d3\u05e4\u05df \u05d6\u05d4 \u05d0\u05d9\u05e0\u05d5 \u05ea\u05d5\u05de\u05da \u05d1\u05d4\u05e7\u05e8\u05d0\u05ea \u05d8\u05e7\u05e1\u05d8.');\r\n }\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05ea\u05d7\u05dc\u05ea \u05d4\u05e7\u05dc\u05d8\u05d4\r\nfunction startRecording() {\r\n if ('webkitSpeechRecognition' in window) {\r\n recognition = new webkitSpeechRecognition();\r\n recognition.lang = sourceLang.value;\r\n recognition.continuous = true;\r\n recognition.interimResults = true;\r\n\r\n recognition.onresult = function(event) {\r\n const speechResult = Array.from(event.results)\r\n .map(result => result[0].transcript)\r\n .join('');\r\n sourceText.value = speechResult;\r\n };\r\n\r\n recognition.onerror = function(event) {\r\n console.error('Speech recognition error', event.error);\r\n stopRecording();\r\n };\r\n\r\n recognition.start();\r\n startRecordingBtn.style.display = 'none';\r\n stopRecordingBtn.style.display = 'inline-block';\r\n } else {\r\n alert('\u05d3\u05e4\u05d3\u05e4\u05df \u05d6\u05d4 \u05d0\u05d9\u05e0\u05d5 \u05ea\u05d5\u05de\u05da \u05d1\u05d6\u05d9\u05d4\u05d5\u05d9 \u05e7\u05d5\u05dc.');\r\n }\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05e4\u05e1\u05e7\u05ea \u05d4\u05e7\u05dc\u05d8\u05d4\r\nfunction stopRecording() {\r\n if (recognition) {\r\n recognition.stop();\r\n startRecordingBtn.style.display = 'inline-block';\r\n stopRecordingBtn.style.display = 'none';\r\n translateText();\r\n }\r\n}\r\n\r\n\/\/ \u05de\u05d0\u05d6\u05d9\u05e0\u05d9 \u05d0\u05d9\u05e8\u05d5\u05e2\u05d9\u05dd\r\nsourceText.addEventListener('input', debounce(translateText, 500));\r\nsourceLang.addEventListener('change', translateText);\r\ntargetLang.addEventListener('change', translateText);\r\nspeakSourceBtn.addEventListener('click', () => speakText(sourceText.value, sourceLang.value));\r\nspeakTargetBtn.addEventListener('click', () => speakText(targetText.value, targetLang.value));\r\nstartRecordingBtn.addEventListener('click', startRecording);\r\nstopRecordingBtn.addEventListener('click', stopRecording);\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d9\u05ea Debounce \u05dc\u05de\u05e0\u05d9\u05e2\u05ea \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05de\u05d9\u05d5\u05ea\u05e8\u05d5\u05ea \u05dc-API\r\nfunction debounce(func, wait) {\r\n let timeout;\r\n return function executedFunction(...args) {\r\n const later = () => {\r\n clearTimeout(timeout);\r\n func(...args);\r\n };\r\n clearTimeout(timeout);\r\n timeout = setTimeout(later, wait);\r\n };\r\n}\r\n\r\n\/\/ \u05d0\u05ea\u05d7\u05d5\u05dc \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4\r\nrenderHistory();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u05de\u05ea\u05e8\u05d2\u05dd \u05e9\u05e4\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05dd \u05de\u05ea\u05e8\u05d2\u05dd \u05e9\u05e4\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05dd \u05d0\u05e0\u05d2\u05dc\u05d9\u05ea\u05e2\u05d1\u05e8\u05d9\u05ea\u05e1\u05e4\u05e8\u05d3\u05d9\u05ea\u05e6\u05e8\u05e4\u05ea\u05d9\u05ea\u05d2\u05e8\u05de\u05e0\u05d9\u05ea\u05e2\u05e8\u05d1\u05d9\u05ea\u05e8\u05d5\u05e1\u05d9\u05ea\u05e1\u05d9\u05e0\u05d9\u05ea\u05d9\u05e4\u05e0\u05d9\u05ea \u05d4\u05e7\u05e8\u05d0 \u05d8\u05e7\u05e1\u05d8 \u05de\u05e7\u05d5\u05e8 \u05d4\u05ea\u05d7\u05dc \u05d4\u05e7\u05dc\u05d8\u05d4 \u05d4\u05e4\u05e1\u05e7 \u05d4\u05e7\u05dc\u05d8\u05d4 \u05d0\u05e0\u05d2\u05dc\u05d9\u05ea\u05e2\u05d1\u05e8\u05d9\u05ea\u05e1\u05e4\u05e8\u05d3\u05d9\u05ea\u05e6\u05e8\u05e4\u05ea\u05d9\u05ea\u05d2\u05e8\u05de\u05e0\u05d9\u05ea\u05e2\u05e8\u05d1\u05d9\u05ea\u05e8\u05d5\u05e1\u05d9\u05ea\u05e1\u05d9\u05e0\u05d9\u05ea\u05d9\u05e4\u05e0\u05d9\u05ea \u05d4\u05e7\u05e8\u05d0 \u05d8\u05e7\u05e1\u05d8 \u05de\u05ea\u05d5\u05e8\u05d2\u05dd \u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05ea\u05e8\u05d2\u05d5\u05de\u05d9\u05dd<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","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-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-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-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-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-gradient":""}},"footnotes":""},"class_list":["post-6960","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6960"}],"version-history":[{"count":7,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6960\/revisions"}],"predecessor-version":[{"id":6968,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6960\/revisions\/6968"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u05de\u05ea\u05e8\u05d2\u05dd \u05e9\u05e4\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05dd<\/title>\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n<style>\r\n body {\r\n font-family: 'Rubik', sans-serif;\r\n background-color: #f0f4f8;\r\n color: #333;\r\n line-height: 1.6;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.container {\r\n max-width: 900px;\r\n margin: 2rem auto;\r\n padding: 2rem;\r\n background-color: #ffffff;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\nh1, h2 {\r\n text-align: center;\r\n color: #2c3e50;\r\n margin-bottom: 1.5rem;\r\n}\r\n\r\n.translator {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 2rem;\r\n gap: 10px;\r\n}\r\n\r\n.input-section, .output-section {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: #f8f9fa;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 15px;\r\n padding: 1rem;\r\n}\r\n\r\nselect, textarea, .btn {\r\n width: 90%;\r\n padding: 1rem;\r\n margin-bottom: 1rem;\r\n border: 2px solid #e0e0e0;\r\n border-radius: 10px;\r\n font-size: 1rem;\r\n transition: all 0.3s ease;\r\n}\r\n\r\nselect:focus, textarea:focus, .btn:focus {\r\n outline: none;\r\n border-color: #3498db;\r\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);\r\n}\r\n\r\ntextarea {\r\n height: 180px;\r\n resize: vertical;\r\n background-color: #ffffff;\r\n}\r\n\r\n.btn {\r\n background-color: #3498db;\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 500;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n.btn:hover {\r\n background-color: #2980b9;\r\n}\r\n\r\n.button-group {\r\n display: flex;\r\n gap: 10px;\r\n}\r\n\r\n.button-group .btn {\r\n flex: 1;\r\n}\r\n\r\n.history {\r\n background-color: #f8f9fa;\r\n padding: 2rem;\r\n border-radius: 15px;\r\n border: 1px solid #e0e0e0;\r\n margin-top: 2rem;\r\n}\r\n\r\n#history-list {\r\n list-style-type: none;\r\n padding: 0;\r\n}\r\n\r\n#history-list li {\r\n background-color: #ffffff;\r\n margin-bottom: 1rem;\r\n padding: 1rem;\r\n border-radius: 10px;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n border: 1px solid #e0e0e0;\r\n}\r\n\r\n#history-list li button {\r\n background-color: #e74c3c;\r\n color: white;\r\n border: none;\r\n padding: 0.5rem 1rem;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n float: left;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n#history-list li button:hover {\r\n background-color: #c0392b;\r\n}\r\n\r\n@media (max-width: 700px) {\r\n .container {\r\n padding: 1rem;\r\n margin: 1rem;\r\n }\r\n\r\n .translator {\r\n flex-direction: column;\r\n }\r\n\r\n .input-section, .output-section {\r\n width: 90%;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .button-group {\r\n flex-direction: column;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <h1>\u05de\u05ea\u05e8\u05d2\u05dd \u05e9\u05e4\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05dd<\/h1>\r\n <div class=\"translator\">\r\n <div class=\"input-section\">\r\n <select id=\"source-lang\">\r\n <option value=\"en\">\u05d0\u05e0\u05d2\u05dc\u05d9\u05ea<\/option>\r\n <option value=\"he\" selected>\u05e2\u05d1\u05e8\u05d9\u05ea<\/option>\r\n <option value=\"es\">\u05e1\u05e4\u05e8\u05d3\u05d9\u05ea<\/option>\r\n <option value=\"fr\">\u05e6\u05e8\u05e4\u05ea\u05d9\u05ea<\/option>\r\n <option value=\"de\">\u05d2\u05e8\u05de\u05e0\u05d9\u05ea<\/option>\r\n <option value=\"ar\">\u05e2\u05e8\u05d1\u05d9\u05ea<\/option>\r\n <option value=\"ru\">\u05e8\u05d5\u05e1\u05d9\u05ea<\/option>\r\n <option value=\"zh\">\u05e1\u05d9\u05e0\u05d9\u05ea<\/option>\r\n <option value=\"ja\">\u05d9\u05e4\u05e0\u05d9\u05ea<\/option>\r\n <\/select>\r\n <textarea id=\"source-text\" placeholder=\"\u05d4\u05e7\u05dc\u05d3 \u05d8\u05e7\u05e1\u05d8 \u05dc\u05ea\u05e8\u05d2\u05d5\u05dd...\" dir=\"auto\"><\/textarea>\r\n <div class=\"button-group\">\r\n <button id=\"speak-source\" class=\"btn\">\u05d4\u05e7\u05e8\u05d0 \u05d8\u05e7\u05e1\u05d8 \u05de\u05e7\u05d5\u05e8<\/button>\r\n <button id=\"start-recording\" class=\"btn\">\u05d4\u05ea\u05d7\u05dc \u05d4\u05e7\u05dc\u05d8\u05d4<\/button>\r\n <button id=\"stop-recording\" class=\"btn\" style=\"display: none;\">\u05d4\u05e4\u05e1\u05e7 \u05d4\u05e7\u05dc\u05d8\u05d4<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"output-section\">\r\n <select id=\"target-lang\">\r\n <option value=\"en\" selected>\u05d0\u05e0\u05d2\u05dc\u05d9\u05ea<\/option>\r\n <option value=\"he\">\u05e2\u05d1\u05e8\u05d9\u05ea<\/option>\r\n <option value=\"es\">\u05e1\u05e4\u05e8\u05d3\u05d9\u05ea<\/option>\r\n <option value=\"fr\">\u05e6\u05e8\u05e4\u05ea\u05d9\u05ea<\/option>\r\n <option value=\"de\">\u05d2\u05e8\u05de\u05e0\u05d9\u05ea<\/option>\r\n <option value=\"ar\">\u05e2\u05e8\u05d1\u05d9\u05ea<\/option>\r\n <option value=\"ru\">\u05e8\u05d5\u05e1\u05d9\u05ea<\/option>\r\n <option value=\"zh\">\u05e1\u05d9\u05e0\u05d9\u05ea<\/option>\r\n <option value=\"ja\">\u05d9\u05e4\u05e0\u05d9\u05ea<\/option>\r\n <\/select>\r\n <textarea id=\"target-text\" readonly dir=\"auto\"><\/textarea>\r\n <button id=\"speak-target\" class=\"btn\">\u05d4\u05e7\u05e8\u05d0 \u05d8\u05e7\u05e1\u05d8 \u05de\u05ea\u05d5\u05e8\u05d2\u05dd<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"history\">\r\n <h2>\u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05ea\u05e8\u05d2\u05d5\u05de\u05d9\u05dd<\/h2>\r\n <ul id=\"history-list\"><\/ul>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n \/\/ \u05e7\u05d1\u05d5\u05e2\u05d9\u05dd \u05d5\u05d7\u05d9\u05d1\u05d5\u05e8\u05d9\u05dd \u05dc-DOM\r\nconst sourceText = document.getElementById('source-text');\r\nconst targetText = document.getElementById('target-text');\r\nconst sourceLang = document.getElementById('source-lang');\r\nconst targetLang = document.getElementById('target-lang');\r\nconst historyList = document.getElementById('history-list');\r\nconst speakSourceBtn = document.getElementById('speak-source');\r\nconst speakTargetBtn = document.getElementById('speak-target');\r\nconst startRecordingBtn = document.getElementById('start-recording');\r\nconst stopRecordingBtn = document.getElementById('stop-recording');\r\n\r\n\/\/ \u05de\u05e4\u05ea\u05d7 \u05d4-API\r\nconst API_KEY = 'AIzaSyDwjlH56bJ-S9zFJp210b4ABGU_OWxKJ1c';\r\n\r\n\/\/ \u05de\u05e9\u05ea\u05e0\u05d9\u05dd \u05d2\u05dc\u05d5\u05d1\u05dc\u05d9\u05d9\u05dd\r\nlet translationHistory = JSON.parse(localStorage.getItem('translationHistory')) || [];\r\nlet recognition;\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05ea\u05e8\u05d2\u05d5\u05dd \u05d8\u05e7\u05e1\u05d8\r\nasync function translateText() {\r\n const text = sourceText.value;\r\n const from = sourceLang.value;\r\n const to = targetLang.value;\r\n\r\n if (text) {\r\n try {\r\n const response = await fetch(`https:\/\/translation.googleapis.com\/language\/translate\/v2?key=${API_KEY}`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n },\r\n body: JSON.stringify({\r\n q: text,\r\n source: from,\r\n target: to,\r\n format: 'text'\r\n })\r\n });\r\n const data = await response.json();\r\n \r\n if (data.data && data.data.translations && data.data.translations[0]) {\r\n targetText.value = data.data.translations[0].translatedText;\r\n saveToHistory(text, targetText.value, from, to);\r\n } else {\r\n throw new Error('Translation failed');\r\n }\r\n } catch (error) {\r\n console.error('Error:', error);\r\n targetText.value = '\u05d0\u05d9\u05e8\u05e2\u05d4 \u05e9\u05d2\u05d9\u05d0\u05d4 \u05d1\u05ea\u05e8\u05d2\u05d5\u05dd. \u05d0\u05e0\u05d0 \u05e0\u05e1\u05d4 \u05e9\u05d5\u05d1.';\r\n }\r\n }\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05e9\u05de\u05d9\u05e8\u05ea \u05ea\u05e8\u05d2\u05d5\u05dd \u05d1\u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d4\r\nfunction saveToHistory(sourceText, targetText, sourceLang, targetLang) {\r\n const translation = {\r\n sourceText,\r\n targetText,\r\n sourceLang,\r\n targetLang,\r\n date: new Date().toLocaleString()\r\n };\r\n\r\n translationHistory.unshift(translation);\r\n if (translationHistory.length > 10) {\r\n translationHistory.pop();\r\n }\r\n\r\n localStorage.setItem('translationHistory', JSON.stringify(translationHistory));\r\n renderHistory();\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05e6\u05d2\u05ea \u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05d4\u05ea\u05e8\u05d2\u05d5\u05de\u05d9\u05dd\r\nfunction renderHistory() {\r\n historyList.innerHTML = '';\r\n translationHistory.forEach((item, index) => {\r\n const li = document.createElement('li');\r\n li.innerHTML = `\r\n <strong>${item.sourceLang} -> ${item.targetLang}<\/strong><br>\r\n ${item.sourceText} -> ${item.targetText}<br>\r\n <small>${item.date}<\/small>\r\n <button onclick=\"deleteHistoryItem(${index})\">\u05de\u05d7\u05e7<\/button>\r\n `;\r\n historyList.appendChild(li);\r\n });\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05de\u05d7\u05d9\u05e7\u05ea \u05e4\u05e8\u05d9\u05d8 \u05de\u05d4\u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d4\r\nfunction deleteHistoryItem(index) {\r\n translationHistory.splice(index, 1);\r\n localStorage.setItem('translationHistory', JSON.stringify(translationHistory));\r\n renderHistory();\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05e7\u05e8\u05d0\u05ea \u05d8\u05e7\u05e1\u05d8 (TTS)\r\nfunction speakText(text, lang) {\r\n if ('speechSynthesis' in window) {\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = lang;\r\n speechSynthesis.speak(utterance);\r\n } else {\r\n alert('\u05d3\u05e4\u05d3\u05e4\u05df \u05d6\u05d4 \u05d0\u05d9\u05e0\u05d5 \u05ea\u05d5\u05de\u05da \u05d1\u05d4\u05e7\u05e8\u05d0\u05ea \u05d8\u05e7\u05e1\u05d8.');\r\n }\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05ea\u05d7\u05dc\u05ea \u05d4\u05e7\u05dc\u05d8\u05d4\r\nfunction startRecording() {\r\n if ('webkitSpeechRecognition' in window) {\r\n recognition = new webkitSpeechRecognition();\r\n recognition.lang = sourceLang.value;\r\n recognition.continuous = true;\r\n recognition.interimResults = true;\r\n\r\n recognition.onresult = function(event) {\r\n const speechResult = Array.from(event.results)\r\n .map(result => result[0].transcript)\r\n .join('');\r\n sourceText.value = speechResult;\r\n };\r\n\r\n recognition.onerror = function(event) {\r\n console.error('Speech recognition error', event.error);\r\n stopRecording();\r\n };\r\n\r\n recognition.start();\r\n startRecordingBtn.style.display = 'none';\r\n stopRecordingBtn.style.display = 'inline-block';\r\n } else {\r\n alert('\u05d3\u05e4\u05d3\u05e4\u05df \u05d6\u05d4 \u05d0\u05d9\u05e0\u05d5 \u05ea\u05d5\u05de\u05da \u05d1\u05d6\u05d9\u05d4\u05d5\u05d9 \u05e7\u05d5\u05dc.');\r\n }\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05e4\u05e1\u05e7\u05ea \u05d4\u05e7\u05dc\u05d8\u05d4\r\nfunction stopRecording() {\r\n if (recognition) {\r\n recognition.stop();\r\n startRecordingBtn.style.display = 'inline-block';\r\n stopRecordingBtn.style.display = 'none';\r\n translateText();\r\n }\r\n}\r\n\r\n\/\/ \u05de\u05d0\u05d6\u05d9\u05e0\u05d9 \u05d0\u05d9\u05e8\u05d5\u05e2\u05d9\u05dd\r\nsourceText.addEventListener('input', debounce(translateText, 500));\r\nsourceLang.addEventListener('change', translateText);\r\ntargetLang.addEventListener('change', translateText);\r\nspeakSourceBtn.addEventListener('click', () => speakText(sourceText.value, sourceLang.value));\r\nspeakTargetBtn.addEventListener('click', () => speakText(targetText.value, targetLang.value));\r\nstartRecordingBtn.addEventListener('click', startRecording);\r\nstopRecordingBtn.addEventListener('click', stopRecording);\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d9\u05ea Debounce \u05dc\u05de\u05e0\u05d9\u05e2\u05ea \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05de\u05d9\u05d5\u05ea\u05e8\u05d5\u05ea \u05dc-API\r\nfunction debounce(func, wait) {\r\n let timeout;\r\n return function executedFunction(...args) {\r\n const later = () => {\r\n clearTimeout(timeout);\r\n func(...args);\r\n };\r\n clearTimeout(timeout);\r\n timeout = setTimeout(later, wait);\r\n };\r\n}\r\n\r\n\/\/ \u05d0\u05ea\u05d7\u05d5\u05dc \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4\r\nrenderHistory();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u05de\u05ea\u05e8\u05d2\u05dd \u05e9\u05e4\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05dd \u05de\u05ea\u05e8\u05d2\u05dd \u05e9\u05e4\u05d5\u05ea \u05de\u05ea\u05e7\u05d3\u05dd \u05d0\u05e0\u05d2\u05dc\u05d9\u05ea\u05e2\u05d1\u05e8\u05d9\u05ea\u05e1\u05e4\u05e8\u05d3\u05d9\u05ea\u05e6\u05e8\u05e4\u05ea\u05d9\u05ea\u05d2\u05e8\u05de\u05e0\u05d9\u05ea\u05e2\u05e8\u05d1\u05d9\u05ea\u05e8\u05d5\u05e1\u05d9\u05ea\u05e1\u05d9\u05e0\u05d9\u05ea\u05d9\u05e4\u05e0\u05d9\u05ea \u05d4\u05e7\u05e8\u05d0 \u05d8\u05e7\u05e1\u05d8 \u05de\u05e7\u05d5\u05e8 \u05d4\u05ea\u05d7\u05dc \u05d4\u05e7\u05dc\u05d8\u05d4 \u05d4\u05e4\u05e1\u05e7 \u05d4\u05e7\u05dc\u05d8\u05d4 \u05d0\u05e0\u05d2\u05dc\u05d9\u05ea\u05e2\u05d1\u05e8\u05d9\u05ea\u05e1\u05e4\u05e8\u05d3\u05d9\u05ea\u05e6\u05e8\u05e4\u05ea\u05d9\u05ea\u05d2\u05e8\u05de\u05e0\u05d9\u05ea\u05e2\u05e8\u05d1\u05d9\u05ea\u05e8\u05d5\u05e1\u05d9\u05ea\u05e1\u05d9\u05e0\u05d9\u05ea\u05d9\u05e4\u05e0\u05d9\u05ea \u05d4\u05e7\u05e8\u05d0 \u05d8\u05e7\u05e1\u05d8 \u05de\u05ea\u05d5\u05e8\u05d2\u05dd \u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05ea\u05e8\u05d2\u05d5\u05de\u05d9\u05dd<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","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-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-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-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-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-gradient":""}},"footnotes":""},"class_list":["post-6960","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6960"}],"version-history":[{"count":7,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6960\/revisions"}],"predecessor-version":[{"id":6968,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6960\/revisions\/6968"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}