Setări cookie
Contactați-ne
Home
Servicii
Creare site de prezentare
Transformăm ideile tale într-un site web captivant și responsiv!
Creare magazin online
Transformăm visul tău de afacere online într-o realitate profitabilă!
Catalog produse
Transformăm ideile tale în cataloage atractive și profesionale
Redesign website
Reîmprospătăm imaginea site-ului tău și creăm o experiență online inedită pentru utilizatori
Desktop publishing (DTP)
Design grafic și publicare electronică a documentelor.
Portofoliu
Pachete servicii
FAQs
Despre noi
Contact
Editor de cod
HTML Code
⛶
Copy HTML
HTML code copied
CSS Code
⛶
Copy CSS
CSS code copied
JavaScript Code
⛶
Copy JS
JS code copied
Empty all forms
X
\`; const completeSource = source .replace('', script + '') .replace('/*CSS_PLACEHOLDER*/', cssCode) .replace('', htmlCode); const blob = new Blob([completeSource], { type: 'text/html' }); const url = URL.createObjectURL(blob); self.postMessage({ url: url }); }); `; const worker = createWorkerFromString(workerCode); function updateIframe() { const htmlCode = window.htmlEditor.getValue(); const cssCode = window.cssEditor.getValue(); const jsCode = window.jsEditor.getValue(); worker.postMessage({ htmlCode: htmlCode, cssCode: cssCode, jsCode: jsCode }); worker.addEventListener('message', (event) => { const url = event.data.url; const iframe = document.getElementById('rezultat'); iframe.src = url; }); } function initialize() { require(['vs/editor/editor.main'], function() { window.htmlEditor = monaco.editor.create(document.getElementById('codHTML'), { value: '', language: 'html', theme: 'vs-dark' }); window.cssEditor = monaco.editor.create(document.getElementById('codCSS'), { value: '', language: 'css', theme: 'vs-dark' }); window.jsEditor = monaco.editor.create(document.getElementById('codJS'), { value: '', language: 'javascript', theme: 'vs-dark' }); updateIframe(); window.htmlEditor.onDidChangeModelContent(updateIframe); window.cssEditor.onDidChangeModelContent(updateIframe); window.jsEditor.onDidChangeModelContent(updateIframe); }); } window.addEventListener('load', initialize); // start code popup dialog function openPopup(elementId) { const el = document.getElementById(elementId); const header = document.getElementById('modal-header'); const editorType = elementId === 'codHTML' ? 'HTML EDITOR' : elementId === 'codCSS' ? 'CSS EDITOR' : 'JS EDITOR'; header.textContent = editorType; popup.style.display = 'block'; let code = ''; switch (elementId) { case 'codHTML': code = window.htmlEditor.getValue(); break; case 'codCSS': code = window.cssEditor.getValue(); break; case 'codJS': code = window.jsEditor.getValue(); break; } popupContent.value = code; popupContent.setAttribute('data-source', elementId); } function closePopup() { if (popup.style.display !== 'block') { return; // Nu actualiza valoarea textarea principală dacă popup-ul este închis } const source = popupContent.getAttribute('data-source'); if (source) { switch (source) { case 'codHTML': window.htmlEditor.setValue(popupContent.value); break; case 'codCSS': window.cssEditor.setValue(popupContent.value); break; case 'codJS': window.jsEditor.setValue(popupContent.value); break; } updateIframe(); } popup.style.display = 'none'; } function autoResizeTextarea(textarea) { textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; } const textareas = document.querySelectorAll('.inputs textarea'); textareas.forEach(textarea => { textarea.addEventListener('input', () => autoResizeTextarea(textarea)); textarea.addEventListener('blur', updateIframe); autoResizeTextarea(textarea); }); const modalHeader = document.getElementById("modal-header"); let isMouseDown = false; let startX, startY, offsetX, offsetY; modalHeader.addEventListener("mousedown", (e) => { isMouseDown = true; startX = e.clientX; startY = e.clientY; offsetX = popup.offsetLeft; offsetY = popup.offsetTop; }); document.addEventListener("mousemove", (e) => { if (!isMouseDown) return; const dx = e.clientX - startX; const dy = e.clientY - startY; popup.style.left = offsetX + dx + "px"; popup.style.top = offsetY + dy + "px"; }); document.addEventListener("mouseup", () => { isMouseDown = false; }); document.addEventListener("mousedown", (e) => { if (!isMouseDown && !popup.contains(e.target) && e.target !== modalHeader && !e.target.classList.contains('popup-btn') && !e.target.parentNode.classList.contains('popup-btn')) { closePopup(); } }); document.getElementById('openHtmlPopup').addEventListener('click', function() { openPopup('codHTML'); }); document.getElementById('openCssPopup').addEventListener('click', function() { openPopup('codCSS'); }); document.getElementById('openJsPopup').addEventListener('click', function() { openPopup('codJS'); }); document.getElementById('closePopupBtn').addEventListener('click', closePopup); function updateSourceTextarea() { if (popup.style.display !== 'block') { return; // Nu actualiza valoarea textarea principală dacă popup-ul este închis } const source = popupContent.getAttribute('data-source'); if (source) { const sourceEl = document.getElementById(source); sourceEl.value = popupContent.value; updateIframe(); // Adaugă această linie pentru a actualiza iframe-ul } } popupContent.addEventListener('input', updateSourceTextarea); // end code dialog popup // start copy text button code // HTML button document.getElementById("copy-html-button").addEventListener("click", function() { copyTextToClipboard(window.htmlEditor.getValue(), "copy-html-button"); }); // CSS button document.getElementById("copy-css-button").addEventListener("click", function() { copyTextToClipboard(window.cssEditor.getValue(), "copy-css-button"); }); // JS button document.getElementById("copy-js-button").addEventListener("click", function() { copyTextToClipboard(window.jsEditor.getValue(), "copy-js-button"); }); function copyTextToClipboard(code, notificationId) { const temporaryTextarea = document.createElement("textarea"); document.body.appendChild(temporaryTextarea); temporaryTextarea.value = code; temporaryTextarea.setAttribute('style', 'white-space: pre-wrap;'); temporaryTextarea.select(); temporaryTextarea.setSelectionRange(0, 99999); document.execCommand("copy"); document.body.removeChild(temporaryTextarea); showNotification("Code was copied", notificationId); } //end copy text button code function showNotification(message, buttonId) { var notification = document.createElement('div'); var button = document.getElementById(buttonId); var caret = document.createElement('div'); // Creează notificarea notification.textContent = message; notification.style.position = 'absolute'; notification.style.top = button.offsetTop + button.offsetHeight + 'px'; notification.style.padding = '5px 20px'; notification.style.marginTop = '10px'; notification.style.backgroundColor = '#333'; notification.style.color = '#fff'; notification.style.borderRadius = '5px'; notification.style.whiteSpace = 'nowrap'; notification.style.zIndex = '1000'; notification.style.borderStyle = 'solid'; notification.style.borderWidth = '2px'; notification.style.borderColor = '#ff7900'; // Creează carretul cu vârful în sus caret.style.position = 'absolute'; caret.style.top = '-8px'; caret.style.width = '0'; caret.style.height = '0'; caret.style.borderLeft = '5px solid transparent'; caret.style.borderRight = '5px solid transparent'; caret.style.borderBottom = '8px solid #ff7900'; caret.style.zIndex = '1000'; caret.style.left = '50%'; caret.style.transform = 'translateX(-50%)'; // Adaugă carretul și notificarea în DOM button.parentNode.appendChild(notification); notification.appendChild(caret); // Centrează notificarea și carretul pe buton notification.style.left = button.offsetLeft + button.offsetWidth / 2 - notification.offsetWidth / 2 + 'px'; setTimeout(function() { button.parentNode.removeChild(notification); }, 4000); } //end code show notification document.getElementById("clear-all-button").addEventListener("click", function() { clearTextareaContent("htmlEditor"); clearTextareaContent("cssEditor"); clearTextareaContent("jsEditor"); clearIframeContent("rezultat"); }); function clearTextareaContent(editorId) { switch (editorId) { case "htmlEditor": window.htmlEditor.setValue(""); break; case "cssEditor": window.cssEditor.setValue(""); break; case "jsEditor": window.jsEditor.setValue(""); break; } } function clearIframeContent(iframeId) { const iframe = document.getElementById(iframeId); const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; iframeDoc.open(); iframeDoc.write(""); iframeDoc.close(); showNotification("Forms have been emptied", "clear-all-button"); } // end cod golire formulare