<3D\/AR-viewer> Demo<\/title><br \/>\n <meta charset=\"utf-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\".\/assets\/favicon\/apple-touch-icon.png\">\n <link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\".\/assets\/favicon\/favicon-32x32.png\">\n <link rel=\"manifest\" href=\".\/assets\/favicon\/site.webmanifest\">\n <link type=\"text\/css\" href=\".\/styles.css\" rel=\"stylesheet\"\/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Lobster&family=Poppins:wght@400;700&family=Protest+Guerrilla&family=Playwrite+CU&family=Oswald:wght@400;700&family=Nerko+One&family=Fascinate+Inline&family=Kanit:wght@400;700&family=Sofadi+One&family=Bebas+Neue&family=Jacques+Francois+Shadow&family=Anton&family=Dela+Gothic+One&family=Pacifico&family=Caveat:wght@400;700&family=Permanent+Marker&family=Matemasie&family=Cinzel:wght@400;700&display=swap\" rel=\"stylesheet\">\n<p> <script src=\"mix2.js\"><\/script><br \/>\n <script src=\"https:\/\/unpkg.com\/focus-visible@5.0.2\/dist\/focus-visible.js\" defer><\/script><\/p>\n<style>\n model-viewer {\n width: 100%;\n height: 450px;\n margin: 0 auto;\n }\n .container, .button-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n }\n .color-choice {\n width: 30px;\n height: 30px;\n display: inline-block;\n margin: 5px;\n cursor: pointer;\n }\n .grey { background-color: #cccccc; }\n .red { background-color: #ff0000; }\n .blue { background-color: #0000ff; }\n .green { background-color: #00ff00; }\n .yellow { background-color: #ffff00; }<\/p>\n<p> button {\n margin: 10px;\n }\n .file-container {\n margin: 10px;\n padding: 5px;\n border-radius: 5px;\n }\n .file-name {\n margin-left: 5px;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .editor-container {\n margin-top: 20px;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: calc(100% - 30px);\n max-width: 648px;\n height: auto;\n box-sizing: border-box;\n margin-left: auto;\n margin-right: auto;\n }\n .canvas-container {\n border: 1px solid #ccc;\n width: 80vw;\n height: 80vw;\n max-width: 648px;\n max-height: 648px;\n min-width: 300px;\n min-height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }<\/p>\n<p> .editor-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n #image-editor, #image-editor-2 {\n border: 1px solid #ddd;\n width: 100%;\n height: 100%;\n }\n .bold-title {\n font-size: 1.2em;\n font-weight: bold;\n margin-top: 20px;\n margin-bottom: 15px;\n }\n .normal-paragraph {\n font-size: 1em;\n font-weight: normal;\n }\n .acordeon {\n cursor: pointer;\n text-align: center;\n text-decoration: underline;\n outline: none;\n transition: 0.4s;\n margin-top: 25px;\n width: 100%;\n }\n .panel {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.2s ease-out;\n text-align: center;\n margin-left: 10px;\n margin-right: 10px;\n width: 100%;\n }<\/p>\n<p> \/* Ad\u0103ugat pentru modal *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgb(0,0,0);\n background-color: rgba(0,0,0,0.4);\n }\n .modal-content {\n background-color: #fefefe;\n margin: 15% auto;\n padding: 20px;\n border: 1px solid #888;\n width: 80%;\n max-width: 600px;\n }\n .close {\n color: #aaa;\n float: right;\n font-size: 28px;\n font-weight: bold;\n }\n .close:hover,\n .close:focus {\n color: black;\n text-decoration: none;\n cursor: pointer;\n }<\/p>\n<p> #imageLibrary {\n max-height: 400px;\n overflow-y: scroll !important;\n -webkit-overflow-scrolling: touch;\n padding-right: 20px;\n }\n #imageLibrary::-webkit-scrollbar {\n width: 12px;\n }\n #imageLibrary::-webkit-scrollbar-thumb {\n background-color: darkgray;\n border-radius: 10px;\n }\n #imageLibrary::-webkit-scrollbar-track {\n background: lightgray;\n }<\/p>\n<p> html {\n scrollbar-width: thin;\n }<\/p>\n<p> .scroll-indicator {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 24px;\n color: rgba(0, 0, 0, 0.5);\n pointer-events: none;\n }\n .scroll-indicator::after {\n content: '\u2b07\ufe0f';\n animation: bounce 2s infinite;\n }<\/p>\n<p> @keyframes bounce {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(10px);\n }\n }\n input[type=\"text\"], input[type=\"color\"] {\n font-size: 16px; \/* Asigur\u0103 c\u0103 dimensiunea textului este suficient de mare pentru a preveni zoom-ul *\/\n}<\/p>\n<\/style>\n<p><\/head><br \/>\n<body><br \/>\n <\/p>\n<div id=\"imageLibraryModal\" class=\"modal\">\n<div class=\"modal-content\">\n <span class=\"close\">×<\/span><\/p>\n<h3>Selecteaz\u0103 o imagine din libr\u0103rie:<\/h3>\n<div id=\"imageLibrary\">\n<div class=\"scroll-indicator\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <model-viewer id=\"model\" bounds=\"tight\" src=\".\/tricou3.glb\" camera-target=\"0m 1m 0m\" camera-orbit=\"0deg 75deg 1.5m\" field-of-view=\"20deg\" \n ar ar-modes=\"webxr scene-viewer quick-look\"\n camera-controls poster=\"loading2.jpg\"><br \/>\n <button slot=\"ar-button\" id=\"ar-button\" onclick=\"showLoading()\">Vezi \u00een spa\u021biul t\u0103u<\/button><br \/>\n <\/model-viewer><\/p>\n<div class=\"container\">\n<div class=\"button-container\">\n <label for=\"customizationSelector\">Selecteaz\u0103 partea de personalizat:<\/label><br \/>\n <select id=\"customizationSelector\" onchange=\"toggleSections()\"><option value=\"fata\">Personalizeaz\u0103 fa\u021ba<\/option><option value=\"spate\">Personalizeaz\u0103 spatele<\/option><\/select>\n<\/div>\n<p> <\/p>\n<div id=\"section-fata\">\n<div class=\"button-container\">\n<div class=\"bold-title\">Personalizeaz\u0103 partea din fa\u021ba<\/div>\n<p class=\"normal-paragraph\">Instructiuni de utilizare in partea de jos a paginii.<\/p>\n<div class=\"color-options\">\n <span>Schimb\u0103 culoarea:<\/span><\/p>\n<div class=\"color-choice grey\" onclick=\"changeColor('grey.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice red\" onclick=\"changeColor('red.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice blue\" onclick=\"changeColor('blue.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice green\" onclick=\"changeColor('green.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice yellow\" onclick=\"changeColor('yellow.jpg', 'Fabric 127')\"><\/div>\n<\/p><\/div>\n<div class=\"file-container\">\n<p> <button onclick=\"document.getElementById('textureUpload').click()\">\u00cencarc\u0103 imagine<\/button><\/p>\n<p> <span id=\"file-name\" class=\"file-name\"><\/span><br \/>\n <input type=\"file\" id=\"textureUpload\" accept=\"image\/*\" style=\"display: none;\" onchange=\"updateFileName(); updateTexture();\"><br \/>\n <button onclick=\"openImageLibrary(1)\">Alege din libr\u0103rie<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"file-container\">\n <label for=\"customText\">Introdu textul:<\/label><br \/>\n <input type=\"text\" id=\"customText\" maxlength=\"100\" placeholder=\"Maxim 100 caractere\"><\/p>\n<p> <label for=\"fontSelect\">Alege fontul:<\/label><br \/>\n <select id=\"fontSelect\" style=\"font-family: Arial;\"><option value=\"Arial\" style=\"font-family: Arial;\">Arial<\/option><option value=\"Courier New\" style=\"font-family: 'Courier New';\">Courier New<\/option><option value=\"Roboto\" style=\"font-family: 'Roboto';\">Roboto<\/option><option value=\"Open Sans\" style=\"font-family: 'Open Sans';\">Open Sans<\/option><option value=\"Lobster\" style=\"font-family: 'Lobster';\">Lobster<\/option><option value=\"Poppins\" style=\"font-family: 'Poppins';\">Poppins<\/option><option value=\"Protest Guerrilla\" style=\"font-family: 'Protest Guerrilla';\">Protest Guerrilla<\/option><option value=\"Playwrite CU\" style=\"font-family: 'Playwrite CU';\">Playwrite CU<\/option><option value=\"Oswald\" style=\"font-family: 'Oswald';\">Oswald<\/option><option value=\"Nerko One\" style=\"font-family: 'Nerko One';\">Nerko One<\/option><option value=\"Fascinate Inline\" style=\"font-family: 'Fascinate Inline';\">Fascinate Inline<\/option><option value=\"Kanit\" style=\"font-family: 'Kanit';\">Kanit<\/option><option value=\"Sofadi One\" style=\"font-family: 'Sofadi One';\">Sofadi One<\/option><option value=\"Bebas Neue\" style=\"font-family: 'Bebas Neue';\">Bebas Neue<\/option><option value=\"Jacques Francois Shadow\" style=\"font-family: 'Jacques Francois Shadow';\">Jacques Francois Shadow<\/option><option value=\"Anton\" style=\"font-family: 'Anton';\">Anton<\/option><option value=\"Dela Gothic One\" style=\"font-family: 'Dela Gothic One';\">Dela Gothic One<\/option><option value=\"Pacifico\" style=\"font-family: 'Pacifico';\">Pacifico<\/option><option value=\"Caveat\" style=\"font-family: 'Caveat';\">Caveat<\/option><option value=\"Permanent Marker\" style=\"font-family: 'Permanent Marker';\">Permanent Marker<\/option><option value=\"Matemasie\" style=\"font-family: 'Matemasie';\">Matemasie<\/option><option value=\"Cinzel\" style=\"font-family: 'Cinzel';\">Cinzel<\/option><\/select><\/p>\n<p> <label for=\"textColor\">Alege culoarea:<\/label><br \/>\n <input type=\"color\" id=\"textColor\" value=\"#000000\"><\/p>\n<p> <br \/>\n <label for=\"textBold\">Bold<\/label><br \/>\n <input type=\"checkbox\" id=\"textBold\">\n<\/div>\n<p><button onclick=\"addTextToCanvas(canvas1)\">Adaug\u0103 Text<\/button><\/p>\n<p> <button onclick=\"applyImage('sigla-1024')\">Aplic\u0103 Imaginea<\/button>\n <\/div>\n<div class=\"editor-wrapper\">\n<div class=\"editor-container\">\n<h3 class=\"normal-paragraph\">Pozi\u021bioneaz\u0103 imagini fa\u021ba<\/h3>\n<div class=\"canvas-container\">\n <canvas id=\"image-editor\"><\/canvas>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p> <\/p>\n<div id=\"section-spate\">\n<div class=\"button-container\">\n<div class=\"bold-title\">Personalizeaz\u0103 partea din spate<\/div>\n<p class=\"normal-paragraph\">Instructiuni de utilizare in partea de jos a paginii.<\/p>\n<div class=\"color-options\">\n <span>Schimb\u0103 culoarea:<\/span><\/p>\n<div class=\"color-choice grey\" onclick=\"changeColor('grey.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice red\" onclick=\"changeColor('red.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice blue\" onclick=\"changeColor('blue.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice green\" onclick=\"changeColor('green.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice yellow\" onclick=\"changeColor('yellow.jpg', 'Fabric 127')\"><\/div>\n<\/p><\/div>\n<div class=\"file-container\">\n <button onclick=\"document.getElementById('textureUpload-2').click()\">\u00cencarc\u0103 imagine<\/button><\/p>\n<p> <span id=\"file-name-2\" class=\"file-name\"><\/span><br \/>\n <input type=\"file\" id=\"textureUpload-2\" accept=\"image\/*\" style=\"display: none;\" onchange=\"updateFileName2(); updateTexture2();\"><br \/>\n <button onclick=\"openImageLibrary(2)\">Alege din libr\u0103rie<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"file-container\">\n <label for=\"customText2\">Introdu textul:<\/label><br \/>\n <input type=\"text\" id=\"customText2\" maxlength=\"100\" placeholder=\"Maxim 100 caractere\"><\/p>\n<p> <label for=\"fontSelect2\">Alege fontul:<\/label><br \/>\n<select id=\"fontSelect2\" style=\"font-family: Arial;\"><option value=\"Arial\" style=\"font-family: Arial;\">Arial<\/option><option value=\"Courier New\" style=\"font-family: 'Courier New';\">Courier New<\/option><option value=\"Roboto\" style=\"font-family: 'Roboto';\">Roboto<\/option><option value=\"Open Sans\" style=\"font-family: 'Open Sans';\">Open Sans<\/option><option value=\"Lobster\" style=\"font-family: 'Lobster';\">Lobster<\/option><option value=\"Poppins\" style=\"font-family: 'Poppins';\">Poppins<\/option><option value=\"Protest Guerrilla\" style=\"font-family: 'Protest Guerrilla';\">Protest Guerrilla<\/option><option value=\"Playwrite CU\" style=\"font-family: 'Playwrite CU';\">Playwrite CU<\/option><option value=\"Oswald\" style=\"font-family: 'Oswald';\">Oswald<\/option><option value=\"Nerko One\" style=\"font-family: 'Nerko One';\">Nerko One<\/option><option value=\"Fascinate Inline\" style=\"font-family: 'Fascinate Inline';\">Fascinate Inline<\/option><option value=\"Kanit\" style=\"font-family: 'Kanit';\">Kanit<\/option><option value=\"Sofadi One\" style=\"font-family: 'Sofadi One';\">Sofadi One<\/option><option value=\"Bebas Neue\" style=\"font-family: 'Bebas Neue';\">Bebas Neue<\/option><option value=\"Jacques Francois Shadow\" style=\"font-family: 'Jacques Francois Shadow';\">Jacques Francois Shadow<\/option><option value=\"Anton\" style=\"font-family: 'Anton';\">Anton<\/option><option value=\"Dela Gothic One\" style=\"font-family: 'Dela Gothic One';\">Dela Gothic One<\/option><option value=\"Pacifico\" style=\"font-family: 'Pacifico';\">Pacifico<\/option><option value=\"Caveat\" style=\"font-family: 'Caveat';\">Caveat<\/option><option value=\"Permanent Marker\" style=\"font-family: 'Permanent Marker';\">Permanent Marker<\/option><option value=\"Matemasie\" style=\"font-family: 'Matemasie';\">Matemasie<\/option><option value=\"Cinzel\" style=\"font-family: 'Cinzel';\">Cinzel<\/option><\/select><\/p>\n<p> <label for=\"textColor2\">Alege culoarea:<\/label><br \/>\n <input type=\"color\" id=\"textColor2\" value=\"#000000\"><\/p>\n<p> <label for=\"textBold2\">Bold<\/label><br \/>\n\t\t<input type=\"checkbox\" id=\"textBold2\"><\/p>\n<\/div>\n<p><button onclick=\"addTextToCanvas(canvas2)\">Adaug\u0103 Text<\/button><\/p>\n<p> <button onclick=\"applyImage('sigla-2048')\">Aplic\u0103 Imaginea<\/button>\n <\/div>\n<div class=\"editor-wrapper\">\n<div class=\"editor-container\">\n<h3 class=\"normal-paragraph\">Pozi\u021bioneaz\u0103 imagini spate<\/h3>\n<div class=\"canvas-container\">\n <canvas id=\"image-editor-2\"><\/canvas>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"acordeon\">Instructiuni personalizare<\/div>\n<div class=\"panel\">\n<p>Alege culoarea materialului \u0219i\/sau \u00eencarc\u0103 fi\u0219ierele de imagini apoi apas\u0103 butonul Aplic\u0103 imaginea.<br \/>\n Daca ai incarcat imagini le po\u021bi pozi\u021biona, scala, roti in fereastrele de pozi\u021bionarea imaginilor din fa\u021ba \u0219i spate prin click \u0219i tragere<\/p>\n<\/p><\/div>\n<div class=\"acordeon\">Instruc\u021biuni de vizualizare in realitate augmentat\u0103<\/div>\n<div class=\"panel\">\n<p>Serviciul de vizualizare \u00een realitate augmentat\u0103 este disponibil pe dispozitivele mobile (smartphone sau tablet\u0103) IOS \u0219i Android (cu Google Play).<br \/>\n Dup\u0103 \u00eenc\u0103rcarea modelului pe telefon, da\u021bi click pe butonul “Vezi \u00een spa\u021biul t\u0103u”.<br \/>\n \u00cendrepta\u021bi camera telefonului c\u0103tre zona \u00een care vre\u021bi s\u0103 plasa\u021bi produsul \u0219i mi\u0219ca\u021bi-l u\u0219or.<br \/>\n Produsul poate fi m\u0103rit\/mic\u0219orat, mutat\/rotit pentru a fi plasat \u00een locul dorit, prin tragerea cu degetul pe ecranul telefonului.<\/p>\n<\/p><\/div>\n<p class=\"normal-paragraph\">Copyright <a href=\"https:\/\/stereomode.com\/ro\/\" target=\"_blank\" rel=\"noopener\">stereomode.com<\/a> demo purpose only.<\/p>\n<\/p><\/div>\n<p> <script>\n let canvas1 = new fabric.Canvas('image-editor');\n let canvas2 = new fabric.Canvas('image-editor-2');\n let uploadedImg1, uploadedImg2;\n let selectedEditor = null;<\/p>\n<p> function updateEditorDimensions(canvas, containerId) {\n const canvasContainer = document.querySelector(containerId);\n const size = Math.min(canvasContainer.offsetWidth, canvasContainer.offsetHeight) * 0.9;<\/p>\n<p> canvas.setDimensions({\n width: size,\n height: size\n });<\/p>\n<p> if (!canvas.backgroundImage) {\n fabric.Image.fromURL('fundal4.jpg', function (img) {\n img.set({\n left: canvas.width \/ 2,\n top: canvas.height \/ 2,\n originX: 'center',\n originY: 'center',\n scaleX: canvas.width \/ img.width,\n scaleY: canvas.height \/ img.height\n });\n canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));\n });\n }\n }<\/p>\n<p> function updateFileName() {\n const uploader = document.getElementById('textureUpload');\n const fileNameDisplay = document.getElementById('file-name');\n const fileName = uploader.files[0].name;\n fileNameDisplay.textContent = fileName.length > 20 ? fileName.substring(0, 20) + '...' : fileName;\n }<\/p>\n<p> function updateFileName2() {\n const uploader = document.getElementById('textureUpload-2');\n const fileNameDisplay = document.getElementById('file-name-2');\n const fileName = uploader.files[0].name;\n fileNameDisplay.textContent = fileName.length > 20 ? fileName.substring(0, 20) + '...' : fileName;\n }<\/p>\n<p> function updateTexture() {\n const input = document.getElementById('textureUpload');\n const file = input.files[0];\n if (!file) {\n alert(\"Nu a fost selectat niciun fi\u0219ier.\");\n return;\n }\n const allowedTypes = ['image\/jpeg', 'image\/png', 'image\/gif'];\n if (!allowedTypes.includes(file.type)) {\n alert(\"Te rug\u0103m s\u0103 \u00eencarci un fi\u0219ier de tip imagine (.jpg, .png, .gif).\");\n return;\n }\n const maxSize = 5 * 1024 * 1024;\n if (file.size > maxSize) {\n alert(\"Dimensiunea fi\u0219ierului este prea mare. Maxim 5 MB.\");\n return;\n }\n const reader = new FileReader();\n reader.onload = function (e) {\n fabric.Image.fromURL(e.target.result, function (img) {\n uploadedImg1 = img;\n const scaleFactor = 0.8;\n const canvasWidth = canvas1.width * scaleFactor;\n const canvasHeight = canvas1.height * scaleFactor;\n const imgAspectRatio = img.width \/ img.height;\n let newWidth, newHeight;\n if (imgAspectRatio > 1) {\n newWidth = canvasWidth;\n newHeight = canvasWidth \/ imgAspectRatio;\n } else {\n newHeight = canvasHeight;\n newWidth = canvasHeight * imgAspectRatio;\n }\n img.set({\n left: canvas1.width \/ 2,\n top: canvas1.height \/ 2,\n originX: 'center',\n originY: 'center',\n scaleX: newWidth \/ img.width,\n scaleY: newHeight \/ img.height\n });\n canvas1.add(img);\n canvas1.renderAll();\n });\n };\n reader.readAsDataURL(file);\n }<\/p>\n<p> function updateTexture2() {\n const input = document.getElementById('textureUpload-2');\n const file = input.files[0];\n if (!file) {\n alert(\"Nu a fost selectat niciun fi\u0219ier.\");\n return;\n }\n const allowedTypes = ['image\/jpeg', 'image\/png', 'image\/gif'];\n if (!allowedTypes.includes(file.type)) {\n alert(\"Te rug\u0103m s\u0103 \u00eencarci un fi\u0219ier de tip imagine (.jpg, .png, .gif).\");\n return;\n }\n const maxSize = 5 * 1024 * 1024;\n if (file.size > maxSize) {\n alert(\"Dimensiunea fi\u0219ierului este prea mare. Maxim 5 MB.\");\n return;\n }\n const reader = new FileReader();\n reader.onload = function (e) {\n fabric.Image.fromURL(e.target.result, function (img) {\n uploadedImg2 = img;\n const scaleFactor = 0.8;\n const canvasWidth = canvas2.width * scaleFactor;\n const canvasHeight = canvas2.height * scaleFactor;\n const imgAspectRatio = img.width \/ img.height;\n let newWidth, newHeight;\n if (imgAspectRatio > 1) {\n newWidth = canvasWidth;\n newHeight = canvasWidth \/ imgAspectRatio;\n } else {\n newHeight = canvasHeight;\n newWidth = canvasHeight * imgAspectRatio;\n }\n img.set({\n left: canvas2.width \/ 2,\n top: canvas2.height \/ 2,\n originX: 'center',\n originY: 'center',\n scaleX: newWidth \/ img.width,\n scaleY: newHeight \/ img.height\n });\n canvas2.add(img);\n canvas2.renderAll();\n });\n };\n reader.readAsDataURL(file);\n }\nfunction applyImage(materialName) {\n const canvas = materialName === 'sigla-1024' ? canvas1 : canvas2;<\/p>\n<p> \/\/ Elimin\u0103m temporar fundalul pentru a preveni aplatizarea fundalului nedorit\n const currentBackground = canvas.backgroundImage;\n canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas));<\/p>\n<p> \/\/ Verific\u0103m ordinea corect\u0103 a straturilor din canvas\n console.log(canvas.getObjects());<\/p>\n<p> \/\/ Aplatiz\u0103m canvas-ul pentru a captura tot con\u021binutul (texte, imagini, etc.), f\u0103r\u0103 fundal\n const dataURL = canvas.toDataURL({\n format: 'png',\n multiplier: 1,\n withoutBackground: true \/\/ Ne asigur\u0103m c\u0103 p\u0103str\u0103m transparen\u021ba\n });<\/p>\n<p> \/\/ Reaplic\u0103m fundalul dup\u0103 ce gener\u0103m imaginea, dac\u0103 e necesar\n canvas.setBackgroundImage(currentBackground, canvas.renderAll.bind(canvas));<\/p>\n<p> \/\/ Aplic\u0103m imaginea ca textur\u0103 pe modelul 3D\n applyTexture(document.querySelector('model-viewer#model'), dataURL, materialName);\n}<\/p>\n<p> async function applyTexture(modelViewer, url, materialName) {\n const texture = await modelViewer.createTexture(url);\n const materialIndex = modelViewer.model.materials.findIndex(material => material.name === materialName);\n if (materialIndex !== -1) {\n const material = modelViewer.model.materials[materialIndex];\n material.pbrMetallicRoughness.baseColorTexture.setTexture(texture);\n console.log(`Textura a fost aplicat\u0103 materialului ${materialName}.`);\n } else {\n console.log(`Materialul '${materialName}' nu a fost g\u0103sit.`);\n }\n }<\/p>\n<p> function changeColor(imageUrl, materialName) {\n const modelViewer = document.querySelector('model-viewer#model');\n modelViewer.createTexture(imageUrl).then((texture) => {\n const materialIndex = modelViewer.model.materials.findIndex(material => material.name === materialName);\n if (materialIndex !== -1) {\n const material = modelViewer.model.materials[materialIndex];\n material.pbrMetallicRoughness.baseColorTexture.setTexture(texture);\n console.log(`Culoarea aplicat\u0103 materialului ${materialName}.`);\n }\n });\n }<\/p>\n<p> \/\/ Ad\u0103ugare text pe canvas\n function addTextToCanvas(canvas) {\n const textInput = canvas === canvas1 ? document.getElementById('customText').value : document.getElementById('customText2').value;\n const font = canvas === canvas1 ? document.getElementById('fontSelect').value : document.getElementById('fontSelect2').value;\n const color = canvas === canvas1 ? document.getElementById('textColor').value : document.getElementById('textColor2').value;\n \/\/ Modificare: verific\u0103m pentru fiecare canvas checkbox-ul respectiv\n const isBold = canvas === canvas1 ? document.getElementById('textBold').checked : document.getElementById('textBold2').checked;<\/p>\n<p> if (textInput.trim() === \"\") {\n alert(\"Te rug\u0103m s\u0103 introduci un text.\");\n return;\n }<\/p>\n<p> const fontWeight = isBold ? 'bold' : 'normal';<\/p>\n<p> const text = new fabric.Text(textInput, {\n left: canvas.width \/ 2,\n top: canvas.height \/ 2,\n originX: 'center',\n originY: 'center',\n fontFamily: font,\n fill: color,\n fontSize: 40,\n fontWeight: fontWeight,\n selectable: true\n });<\/p>\n<p> canvas.add(text);\n canvas.renderAll();\n}<\/p>\n<p> document.getElementById('fontSelect').addEventListener('change', function () {\n const selectedFont = this.options[this.selectedIndex].value;\n this.style.fontFamily = selectedFont;\n });<\/p>\n<p> document.getElementById('fontSelect2').addEventListener('change', function () {\n const selectedFont = this.options[this.selectedIndex].value;\n this.style.fontFamily = selectedFont;\n });<\/p>\n<p> function openImageLibrary(editorNumber) {\n selectedEditor = editorNumber;\n loadLibraryImages();\n const modal = document.getElementById(\"imageLibraryModal\");\n modal.style.display = \"block\";\n }<\/p>\n<p> function loadLibraryImages() {\n fetch('.\/list_images.php')\n .then(response => response.json())\n .then(images => {\n const imageLibrary = document.getElementById('imageLibrary');\n imageLibrary.innerHTML = ''; <\/p>\n<p> images.forEach(image => {\n const imgElement = document.createElement('img');\n imgElement.src = image; \n imgElement.style.width = '100px';\n imgElement.style.margin = '10px';\n imgElement.onclick = function() {\n applyImageFromLibrary(image);\n };\n imageLibrary.appendChild(imgElement);\n });\n })\n .catch(error => {\n console.error('Eroare la \u00eenc\u0103rcarea imaginilor:', error);\n });\n }<\/p>\n<p> function applyImageFromLibrary(imageName) {\n const imageUrl = imageName;\n const canvas = selectedEditor === 1 ? canvas1 : canvas2;<\/p>\n<p> fabric.Image.fromURL(imageUrl, function(img) {\n const canvasWidth = canvas.width * 0.8;\n const canvasHeight = canvas.height * 0.8;<\/p>\n<p> const imgAspectRatio = img.width \/ img.height;\n let newWidth, newHeight;<\/p>\n<p> if (imgAspectRatio > 1) {\n newWidth = canvasWidth;\n newHeight = canvasWidth \/ imgAspectRatio;\n } else {\n newHeight = canvasHeight;\n newWidth = canvasHeight * imgAspectRatio;\n }<\/p>\n<p> img.set({\n left: canvas.width \/ 2,\n top: canvas.height \/ 2,\n originX: 'center',\n originY: 'center',\n scaleX: newWidth \/ img.width,\n scaleY: newHeight \/ img.height\n });<\/p>\n<p> canvas.add(img);\n canvas.renderAll();\n });<\/p>\n<p> const modal = document.getElementById(\"imageLibraryModal\");\n modal.style.display = \"none\";\n }<\/p>\n<p> document.addEventListener('DOMContentLoaded', function() {\n const acordeons = document.querySelectorAll('.acordeon');\n acordeons.forEach(acordeon => {\n acordeon.addEventListener('click', function() {\n this.classList.toggle(\"active\");\n var panel = this.nextElementSibling;\n if (panel.style.maxHeight) {\n panel.style.maxHeight = null;\n } else {\n panel.style.maxHeight = panel.scrollHeight + \"px\";\n }\n });\n });<\/p>\n<p> updateEditorDimensions(canvas1, '.canvas-container');\n updateEditorDimensions(canvas2, '.canvas-container');<\/p>\n<p> window.addEventListener('resize', () => {\n updateEditorDimensions(canvas1, '.canvas-container');\n updateEditorDimensions(canvas2, '.canvas-container');\n });<\/p>\n<p> const span = document.getElementsByClassName(\"close\")[0];\n span.onclick = function() {\n const modal = document.getElementById(\"imageLibraryModal\");\n modal.style.display = \"none\";\n }\n window.onclick = function(event) {\n const modal = document.getElementById(\"imageLibraryModal\");\n if (event.target == modal) {\n modal.style.display = \"none\";\n }\n }\n });\n function toggleSections() {\n const selector = document.getElementById('customizationSelector');\n const selectedValue = selector.value;<\/p>\n<p> const fataSection = document.getElementById('section-fata');\n const spateSection = document.getElementById('section-spate');<\/p>\n<p> if (selectedValue === 'fata') {\n fataSection.style.display = 'block';\n spateSection.style.display = 'none';\n } else {\n fataSection.style.display = 'none';\n spateSection.style.display = 'block';\n }\n}<\/p>\n<p>\/\/ Ini\u021bial seteaz\u0103 vizibilitatea corect\u0103 la \u00eenc\u0103rcarea paginii\ndocument.addEventListener('DOMContentLoaded', function() {\n toggleSections(); \/\/ Asigur\u0103-te c\u0103 sec\u021biunea \"Personalizeaz\u0103 fa\u021ba\" este afi\u0219at\u0103 ini\u021bial\n});<\/p>\n<p> <\/script><\/p>\n<p> <script type=\"module\" src=\".\/mix1.js\"><\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>","protected":false},"excerpt":{"rendered":"<p><3D\/AR-viewer> Demo × Selecteaz\u0103 o imagine din libr\u0103rie: Vezi \u00een spa\u021biul t\u0103u Selecteaz\u0103 partea de personalizat: Personalizeaz\u0103 fa\u021baPersonalizeaz\u0103 spatele Personalizeaz\u0103 partea din fa\u021ba Instructiuni de utilizare in partea de jos a paginii. Schimb\u0103 culoarea: \u00cencarc\u0103 imagine Alege din libr\u0103rie Introdu textul: Alege fontul: ArialCourier NewRobotoOpen SansLobsterPoppinsProtest GuerrillaPlaywrite CUOswaldNerko OneFascinate InlineKanitSofadi ...<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"class_list":["post-3494","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/pages\/3494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/comments?post=3494"}],"version-history":[{"count":1,"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/pages\/3494\/revisions"}],"predecessor-version":[{"id":3495,"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/pages\/3494\/revisions\/3495"}],"wp:attachment":[{"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/media?parent=3494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3494,"date":"2024-09-11T11:30:34","date_gmt":"2024-09-11T11:30:34","guid":{"rendered":"https:\/\/stereomode.com\/?page_id=3494"},"modified":"2024-09-11T11:31:22","modified_gmt":"2024-09-11T11:31:22","slug":"test-personalizare-produse","status":"publish","type":"page","link":"https:\/\/stereomode.com\/ro\/test-personalizare-produse\/","title":{"rendered":"test personalizare produse"},"content":{"rendered":"

\n
\n
\n <3D\/AR-viewer> Demo<\/title><br \/>\n <meta charset=\"utf-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\".\/assets\/favicon\/apple-touch-icon.png\">\n <link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\".\/assets\/favicon\/favicon-32x32.png\">\n <link rel=\"manifest\" href=\".\/assets\/favicon\/site.webmanifest\">\n <link type=\"text\/css\" href=\".\/styles.css\" rel=\"stylesheet\"\/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Lobster&family=Poppins:wght@400;700&family=Protest+Guerrilla&family=Playwrite+CU&family=Oswald:wght@400;700&family=Nerko+One&family=Fascinate+Inline&family=Kanit:wght@400;700&family=Sofadi+One&family=Bebas+Neue&family=Jacques+Francois+Shadow&family=Anton&family=Dela+Gothic+One&family=Pacifico&family=Caveat:wght@400;700&family=Permanent+Marker&family=Matemasie&family=Cinzel:wght@400;700&display=swap\" rel=\"stylesheet\">\n<p> <script src=\"mix2.js\"><\/script><br \/>\n <script src=\"https:\/\/unpkg.com\/focus-visible@5.0.2\/dist\/focus-visible.js\" defer><\/script><\/p>\n<style>\n model-viewer {\n width: 100%;\n height: 450px;\n margin: 0 auto;\n }\n .container, .button-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n }\n .color-choice {\n width: 30px;\n height: 30px;\n display: inline-block;\n margin: 5px;\n cursor: pointer;\n }\n .grey { background-color: #cccccc; }\n .red { background-color: #ff0000; }\n .blue { background-color: #0000ff; }\n .green { background-color: #00ff00; }\n .yellow { background-color: #ffff00; }<\/p>\n<p> button {\n margin: 10px;\n }\n .file-container {\n margin: 10px;\n padding: 5px;\n border-radius: 5px;\n }\n .file-name {\n margin-left: 5px;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .editor-container {\n margin-top: 20px;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: calc(100% - 30px);\n max-width: 648px;\n height: auto;\n box-sizing: border-box;\n margin-left: auto;\n margin-right: auto;\n }\n .canvas-container {\n border: 1px solid #ccc;\n width: 80vw;\n height: 80vw;\n max-width: 648px;\n max-height: 648px;\n min-width: 300px;\n min-height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }<\/p>\n<p> .editor-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n #image-editor, #image-editor-2 {\n border: 1px solid #ddd;\n width: 100%;\n height: 100%;\n }\n .bold-title {\n font-size: 1.2em;\n font-weight: bold;\n margin-top: 20px;\n margin-bottom: 15px;\n }\n .normal-paragraph {\n font-size: 1em;\n font-weight: normal;\n }\n .acordeon {\n cursor: pointer;\n text-align: center;\n text-decoration: underline;\n outline: none;\n transition: 0.4s;\n margin-top: 25px;\n width: 100%;\n }\n .panel {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.2s ease-out;\n text-align: center;\n margin-left: 10px;\n margin-right: 10px;\n width: 100%;\n }<\/p>\n<p> \/* Ad\u0103ugat pentru modal *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgb(0,0,0);\n background-color: rgba(0,0,0,0.4);\n }\n .modal-content {\n background-color: #fefefe;\n margin: 15% auto;\n padding: 20px;\n border: 1px solid #888;\n width: 80%;\n max-width: 600px;\n }\n .close {\n color: #aaa;\n float: right;\n font-size: 28px;\n font-weight: bold;\n }\n .close:hover,\n .close:focus {\n color: black;\n text-decoration: none;\n cursor: pointer;\n }<\/p>\n<p> #imageLibrary {\n max-height: 400px;\n overflow-y: scroll !important;\n -webkit-overflow-scrolling: touch;\n padding-right: 20px;\n }\n #imageLibrary::-webkit-scrollbar {\n width: 12px;\n }\n #imageLibrary::-webkit-scrollbar-thumb {\n background-color: darkgray;\n border-radius: 10px;\n }\n #imageLibrary::-webkit-scrollbar-track {\n background: lightgray;\n }<\/p>\n<p> html {\n scrollbar-width: thin;\n }<\/p>\n<p> .scroll-indicator {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 24px;\n color: rgba(0, 0, 0, 0.5);\n pointer-events: none;\n }\n .scroll-indicator::after {\n content: '\u2b07\ufe0f';\n animation: bounce 2s infinite;\n }<\/p>\n<p> @keyframes bounce {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(10px);\n }\n }\n input[type=\"text\"], input[type=\"color\"] {\n font-size: 16px; \/* Asigur\u0103 c\u0103 dimensiunea textului este suficient de mare pentru a preveni zoom-ul *\/\n}<\/p>\n<\/style>\n<p><\/head><br \/>\n<body><br \/>\n <\/p>\n<div id=\"imageLibraryModal\" class=\"modal\">\n<div class=\"modal-content\">\n <span class=\"close\">×<\/span><\/p>\n<h3>Selecteaz\u0103 o imagine din libr\u0103rie:<\/h3>\n<div id=\"imageLibrary\">\n<div class=\"scroll-indicator\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <model-viewer id=\"model\" bounds=\"tight\" src=\".\/tricou3.glb\" camera-target=\"0m 1m 0m\" camera-orbit=\"0deg 75deg 1.5m\" field-of-view=\"20deg\" \n ar ar-modes=\"webxr scene-viewer quick-look\"\n camera-controls poster=\"loading2.jpg\"><br \/>\n <button slot=\"ar-button\" id=\"ar-button\" onclick=\"showLoading()\">Vezi \u00een spa\u021biul t\u0103u<\/button><br \/>\n <\/model-viewer><\/p>\n<div class=\"container\">\n<div class=\"button-container\">\n <label for=\"customizationSelector\">Selecteaz\u0103 partea de personalizat:<\/label><br \/>\n <select id=\"customizationSelector\" onchange=\"toggleSections()\"><option value=\"fata\">Personalizeaz\u0103 fa\u021ba<\/option><option value=\"spate\">Personalizeaz\u0103 spatele<\/option><\/select>\n<\/div>\n<p> <\/p>\n<div id=\"section-fata\">\n<div class=\"button-container\">\n<div class=\"bold-title\">Personalizeaz\u0103 partea din fa\u021ba<\/div>\n<p class=\"normal-paragraph\">Instructiuni de utilizare in partea de jos a paginii.<\/p>\n<div class=\"color-options\">\n <span>Schimb\u0103 culoarea:<\/span><\/p>\n<div class=\"color-choice grey\" onclick=\"changeColor('grey.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice red\" onclick=\"changeColor('red.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice blue\" onclick=\"changeColor('blue.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice green\" onclick=\"changeColor('green.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice yellow\" onclick=\"changeColor('yellow.jpg', 'Fabric 127')\"><\/div>\n<\/p><\/div>\n<div class=\"file-container\">\n<p> <button onclick=\"document.getElementById('textureUpload').click()\">\u00cencarc\u0103 imagine<\/button><\/p>\n<p> <span id=\"file-name\" class=\"file-name\"><\/span><br \/>\n <input type=\"file\" id=\"textureUpload\" accept=\"image\/*\" style=\"display: none;\" onchange=\"updateFileName(); updateTexture();\"><br \/>\n <button onclick=\"openImageLibrary(1)\">Alege din libr\u0103rie<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"file-container\">\n <label for=\"customText\">Introdu textul:<\/label><br \/>\n <input type=\"text\" id=\"customText\" maxlength=\"100\" placeholder=\"Maxim 100 caractere\"><\/p>\n<p> <label for=\"fontSelect\">Alege fontul:<\/label><br \/>\n <select id=\"fontSelect\" style=\"font-family: Arial;\"><option value=\"Arial\" style=\"font-family: Arial;\">Arial<\/option><option value=\"Courier New\" style=\"font-family: 'Courier New';\">Courier New<\/option><option value=\"Roboto\" style=\"font-family: 'Roboto';\">Roboto<\/option><option value=\"Open Sans\" style=\"font-family: 'Open Sans';\">Open Sans<\/option><option value=\"Lobster\" style=\"font-family: 'Lobster';\">Lobster<\/option><option value=\"Poppins\" style=\"font-family: 'Poppins';\">Poppins<\/option><option value=\"Protest Guerrilla\" style=\"font-family: 'Protest Guerrilla';\">Protest Guerrilla<\/option><option value=\"Playwrite CU\" style=\"font-family: 'Playwrite CU';\">Playwrite CU<\/option><option value=\"Oswald\" style=\"font-family: 'Oswald';\">Oswald<\/option><option value=\"Nerko One\" style=\"font-family: 'Nerko One';\">Nerko One<\/option><option value=\"Fascinate Inline\" style=\"font-family: 'Fascinate Inline';\">Fascinate Inline<\/option><option value=\"Kanit\" style=\"font-family: 'Kanit';\">Kanit<\/option><option value=\"Sofadi One\" style=\"font-family: 'Sofadi One';\">Sofadi One<\/option><option value=\"Bebas Neue\" style=\"font-family: 'Bebas Neue';\">Bebas Neue<\/option><option value=\"Jacques Francois Shadow\" style=\"font-family: 'Jacques Francois Shadow';\">Jacques Francois Shadow<\/option><option value=\"Anton\" style=\"font-family: 'Anton';\">Anton<\/option><option value=\"Dela Gothic One\" style=\"font-family: 'Dela Gothic One';\">Dela Gothic One<\/option><option value=\"Pacifico\" style=\"font-family: 'Pacifico';\">Pacifico<\/option><option value=\"Caveat\" style=\"font-family: 'Caveat';\">Caveat<\/option><option value=\"Permanent Marker\" style=\"font-family: 'Permanent Marker';\">Permanent Marker<\/option><option value=\"Matemasie\" style=\"font-family: 'Matemasie';\">Matemasie<\/option><option value=\"Cinzel\" style=\"font-family: 'Cinzel';\">Cinzel<\/option><\/select><\/p>\n<p> <label for=\"textColor\">Alege culoarea:<\/label><br \/>\n <input type=\"color\" id=\"textColor\" value=\"#000000\"><\/p>\n<p> <br \/>\n <label for=\"textBold\">Bold<\/label><br \/>\n <input type=\"checkbox\" id=\"textBold\">\n<\/div>\n<p><button onclick=\"addTextToCanvas(canvas1)\">Adaug\u0103 Text<\/button><\/p>\n<p> <button onclick=\"applyImage('sigla-1024')\">Aplic\u0103 Imaginea<\/button>\n <\/div>\n<div class=\"editor-wrapper\">\n<div class=\"editor-container\">\n<h3 class=\"normal-paragraph\">Pozi\u021bioneaz\u0103 imagini fa\u021ba<\/h3>\n<div class=\"canvas-container\">\n <canvas id=\"image-editor\"><\/canvas>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p> <\/p>\n<div id=\"section-spate\">\n<div class=\"button-container\">\n<div class=\"bold-title\">Personalizeaz\u0103 partea din spate<\/div>\n<p class=\"normal-paragraph\">Instructiuni de utilizare in partea de jos a paginii.<\/p>\n<div class=\"color-options\">\n <span>Schimb\u0103 culoarea:<\/span><\/p>\n<div class=\"color-choice grey\" onclick=\"changeColor('grey.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice red\" onclick=\"changeColor('red.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice blue\" onclick=\"changeColor('blue.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice green\" onclick=\"changeColor('green.jpg', 'Fabric 127')\"><\/div>\n<div class=\"color-choice yellow\" onclick=\"changeColor('yellow.jpg', 'Fabric 127')\"><\/div>\n<\/p><\/div>\n<div class=\"file-container\">\n <button onclick=\"document.getElementById('textureUpload-2').click()\">\u00cencarc\u0103 imagine<\/button><\/p>\n<p> <span id=\"file-name-2\" class=\"file-name\"><\/span><br \/>\n <input type=\"file\" id=\"textureUpload-2\" accept=\"image\/*\" style=\"display: none;\" onchange=\"updateFileName2(); updateTexture2();\"><br \/>\n <button onclick=\"openImageLibrary(2)\">Alege din libr\u0103rie<\/button>\n <\/div>\n<p> <\/p>\n<div class=\"file-container\">\n <label for=\"customText2\">Introdu textul:<\/label><br \/>\n <input type=\"text\" id=\"customText2\" maxlength=\"100\" placeholder=\"Maxim 100 caractere\"><\/p>\n<p> <label for=\"fontSelect2\">Alege fontul:<\/label><br \/>\n<select id=\"fontSelect2\" style=\"font-family: Arial;\"><option value=\"Arial\" style=\"font-family: Arial;\">Arial<\/option><option value=\"Courier New\" style=\"font-family: 'Courier New';\">Courier New<\/option><option value=\"Roboto\" style=\"font-family: 'Roboto';\">Roboto<\/option><option value=\"Open Sans\" style=\"font-family: 'Open Sans';\">Open Sans<\/option><option value=\"Lobster\" style=\"font-family: 'Lobster';\">Lobster<\/option><option value=\"Poppins\" style=\"font-family: 'Poppins';\">Poppins<\/option><option value=\"Protest Guerrilla\" style=\"font-family: 'Protest Guerrilla';\">Protest Guerrilla<\/option><option value=\"Playwrite CU\" style=\"font-family: 'Playwrite CU';\">Playwrite CU<\/option><option value=\"Oswald\" style=\"font-family: 'Oswald';\">Oswald<\/option><option value=\"Nerko One\" style=\"font-family: 'Nerko One';\">Nerko One<\/option><option value=\"Fascinate Inline\" style=\"font-family: 'Fascinate Inline';\">Fascinate Inline<\/option><option value=\"Kanit\" style=\"font-family: 'Kanit';\">Kanit<\/option><option value=\"Sofadi One\" style=\"font-family: 'Sofadi One';\">Sofadi One<\/option><option value=\"Bebas Neue\" style=\"font-family: 'Bebas Neue';\">Bebas Neue<\/option><option value=\"Jacques Francois Shadow\" style=\"font-family: 'Jacques Francois Shadow';\">Jacques Francois Shadow<\/option><option value=\"Anton\" style=\"font-family: 'Anton';\">Anton<\/option><option value=\"Dela Gothic One\" style=\"font-family: 'Dela Gothic One';\">Dela Gothic One<\/option><option value=\"Pacifico\" style=\"font-family: 'Pacifico';\">Pacifico<\/option><option value=\"Caveat\" style=\"font-family: 'Caveat';\">Caveat<\/option><option value=\"Permanent Marker\" style=\"font-family: 'Permanent Marker';\">Permanent Marker<\/option><option value=\"Matemasie\" style=\"font-family: 'Matemasie';\">Matemasie<\/option><option value=\"Cinzel\" style=\"font-family: 'Cinzel';\">Cinzel<\/option><\/select><\/p>\n<p> <label for=\"textColor2\">Alege culoarea:<\/label><br \/>\n <input type=\"color\" id=\"textColor2\" value=\"#000000\"><\/p>\n<p> <label for=\"textBold2\">Bold<\/label><br \/>\n\t\t<input type=\"checkbox\" id=\"textBold2\"><\/p>\n<\/div>\n<p><button onclick=\"addTextToCanvas(canvas2)\">Adaug\u0103 Text<\/button><\/p>\n<p> <button onclick=\"applyImage('sigla-2048')\">Aplic\u0103 Imaginea<\/button>\n <\/div>\n<div class=\"editor-wrapper\">\n<div class=\"editor-container\">\n<h3 class=\"normal-paragraph\">Pozi\u021bioneaz\u0103 imagini spate<\/h3>\n<div class=\"canvas-container\">\n <canvas id=\"image-editor-2\"><\/canvas>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"acordeon\">Instructiuni personalizare<\/div>\n<div class=\"panel\">\n<p>Alege culoarea materialului \u0219i\/sau \u00eencarc\u0103 fi\u0219ierele de imagini apoi apas\u0103 butonul Aplic\u0103 imaginea.<br \/>\n Daca ai incarcat imagini le po\u021bi pozi\u021biona, scala, roti in fereastrele de pozi\u021bionarea imaginilor din fa\u021ba \u0219i spate prin click \u0219i tragere<\/p>\n<\/p><\/div>\n<div class=\"acordeon\">Instruc\u021biuni de vizualizare in realitate augmentat\u0103<\/div>\n<div class=\"panel\">\n<p>Serviciul de vizualizare \u00een realitate augmentat\u0103 este disponibil pe dispozitivele mobile (smartphone sau tablet\u0103) IOS \u0219i Android (cu Google Play).<br \/>\n Dup\u0103 \u00eenc\u0103rcarea modelului pe telefon, da\u021bi click pe butonul “Vezi \u00een spa\u021biul t\u0103u”.<br \/>\n \u00cendrepta\u021bi camera telefonului c\u0103tre zona \u00een care vre\u021bi s\u0103 plasa\u021bi produsul \u0219i mi\u0219ca\u021bi-l u\u0219or.<br \/>\n Produsul poate fi m\u0103rit\/mic\u0219orat, mutat\/rotit pentru a fi plasat \u00een locul dorit, prin tragerea cu degetul pe ecranul telefonului.<\/p>\n<\/p><\/div>\n<p class=\"normal-paragraph\">Copyright <a href=\"https:\/\/stereomode.com\/ro\/\" target=\"_blank\" rel=\"noopener\">stereomode.com<\/a> demo purpose only.<\/p>\n<\/p><\/div>\n<p> <script>\n let canvas1 = new fabric.Canvas('image-editor');\n let canvas2 = new fabric.Canvas('image-editor-2');\n let uploadedImg1, uploadedImg2;\n let selectedEditor = null;<\/p>\n<p> function updateEditorDimensions(canvas, containerId) {\n const canvasContainer = document.querySelector(containerId);\n const size = Math.min(canvasContainer.offsetWidth, canvasContainer.offsetHeight) * 0.9;<\/p>\n<p> canvas.setDimensions({\n width: size,\n height: size\n });<\/p>\n<p> if (!canvas.backgroundImage) {\n fabric.Image.fromURL('fundal4.jpg', function (img) {\n img.set({\n left: canvas.width \/ 2,\n top: canvas.height \/ 2,\n originX: 'center',\n originY: 'center',\n scaleX: canvas.width \/ img.width,\n scaleY: canvas.height \/ img.height\n });\n canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));\n });\n }\n }<\/p>\n<p> function updateFileName() {\n const uploader = document.getElementById('textureUpload');\n const fileNameDisplay = document.getElementById('file-name');\n const fileName = uploader.files[0].name;\n fileNameDisplay.textContent = fileName.length > 20 ? fileName.substring(0, 20) + '...' : fileName;\n }<\/p>\n<p> function updateFileName2() {\n const uploader = document.getElementById('textureUpload-2');\n const fileNameDisplay = document.getElementById('file-name-2');\n const fileName = uploader.files[0].name;\n fileNameDisplay.textContent = fileName.length > 20 ? fileName.substring(0, 20) + '...' : fileName;\n }<\/p>\n<p> function updateTexture() {\n const input = document.getElementById('textureUpload');\n const file = input.files[0];\n if (!file) {\n alert(\"Nu a fost selectat niciun fi\u0219ier.\");\n return;\n }\n const allowedTypes = ['image\/jpeg', 'image\/png', 'image\/gif'];\n if (!allowedTypes.includes(file.type)) {\n alert(\"Te rug\u0103m s\u0103 \u00eencarci un fi\u0219ier de tip imagine (.jpg, .png, .gif).\");\n return;\n }\n const maxSize = 5 * 1024 * 1024;\n if (file.size > maxSize) {\n alert(\"Dimensiunea fi\u0219ierului este prea mare. Maxim 5 MB.\");\n return;\n }\n const reader = new FileReader();\n reader.onload = function (e) {\n fabric.Image.fromURL(e.target.result, function (img) {\n uploadedImg1 = img;\n const scaleFactor = 0.8;\n const canvasWidth = canvas1.width * scaleFactor;\n const canvasHeight = canvas1.height * scaleFactor;\n const imgAspectRatio = img.width \/ img.height;\n let newWidth, newHeight;\n if (imgAspectRatio > 1) {\n newWidth = canvasWidth;\n newHeight = canvasWidth \/ imgAspectRatio;\n } else {\n newHeight = canvasHeight;\n newWidth = canvasHeight * imgAspectRatio;\n }\n img.set({\n left: canvas1.width \/ 2,\n top: canvas1.height \/ 2,\n originX: 'center',\n originY: 'center',\n scaleX: newWidth \/ img.width,\n scaleY: newHeight \/ img.height\n });\n canvas1.add(img);\n canvas1.renderAll();\n });\n };\n reader.readAsDataURL(file);\n }<\/p>\n<p> function updateTexture2() {\n const input = document.getElementById('textureUpload-2');\n const file = input.files[0];\n if (!file) {\n alert(\"Nu a fost selectat niciun fi\u0219ier.\");\n return;\n }\n const allowedTypes = ['image\/jpeg', 'image\/png', 'image\/gif'];\n if (!allowedTypes.includes(file.type)) {\n alert(\"Te rug\u0103m s\u0103 \u00eencarci un fi\u0219ier de tip imagine (.jpg, .png, .gif).\");\n return;\n }\n const maxSize = 5 * 1024 * 1024;\n if (file.size > maxSize) {\n alert(\"Dimensiunea fi\u0219ierului este prea mare. Maxim 5 MB.\");\n return;\n }\n const reader = new FileReader();\n reader.onload = function (e) {\n fabric.Image.fromURL(e.target.result, function (img) {\n uploadedImg2 = img;\n const scaleFactor = 0.8;\n const canvasWidth = canvas2.width * scaleFactor;\n const canvasHeight = canvas2.height * scaleFactor;\n const imgAspectRatio = img.width \/ img.height;\n let newWidth, newHeight;\n if (imgAspectRatio > 1) {\n newWidth = canvasWidth;\n newHeight = canvasWidth \/ imgAspectRatio;\n } else {\n newHeight = canvasHeight;\n newWidth = canvasHeight * imgAspectRatio;\n }\n img.set({\n left: canvas2.width \/ 2,\n top: canvas2.height \/ 2,\n originX: 'center',\n originY: 'center',\n scaleX: newWidth \/ img.width,\n scaleY: newHeight \/ img.height\n });\n canvas2.add(img);\n canvas2.renderAll();\n });\n };\n reader.readAsDataURL(file);\n }\nfunction applyImage(materialName) {\n const canvas = materialName === 'sigla-1024' ? canvas1 : canvas2;<\/p>\n<p> \/\/ Elimin\u0103m temporar fundalul pentru a preveni aplatizarea fundalului nedorit\n const currentBackground = canvas.backgroundImage;\n canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas));<\/p>\n<p> \/\/ Verific\u0103m ordinea corect\u0103 a straturilor din canvas\n console.log(canvas.getObjects());<\/p>\n<p> \/\/ Aplatiz\u0103m canvas-ul pentru a captura tot con\u021binutul (texte, imagini, etc.), f\u0103r\u0103 fundal\n const dataURL = canvas.toDataURL({\n format: 'png',\n multiplier: 1,\n withoutBackground: true \/\/ Ne asigur\u0103m c\u0103 p\u0103str\u0103m transparen\u021ba\n });<\/p>\n<p> \/\/ Reaplic\u0103m fundalul dup\u0103 ce gener\u0103m imaginea, dac\u0103 e necesar\n canvas.setBackgroundImage(currentBackground, canvas.renderAll.bind(canvas));<\/p>\n<p> \/\/ Aplic\u0103m imaginea ca textur\u0103 pe modelul 3D\n applyTexture(document.querySelector('model-viewer#model'), dataURL, materialName);\n}<\/p>\n<p> async function applyTexture(modelViewer, url, materialName) {\n const texture = await modelViewer.createTexture(url);\n const materialIndex = modelViewer.model.materials.findIndex(material => material.name === materialName);\n if (materialIndex !== -1) {\n const material = modelViewer.model.materials[materialIndex];\n material.pbrMetallicRoughness.baseColorTexture.setTexture(texture);\n console.log(`Textura a fost aplicat\u0103 materialului ${materialName}.`);\n } else {\n console.log(`Materialul '${materialName}' nu a fost g\u0103sit.`);\n }\n }<\/p>\n<p> function changeColor(imageUrl, materialName) {\n const modelViewer = document.querySelector('model-viewer#model');\n modelViewer.createTexture(imageUrl).then((texture) => {\n const materialIndex = modelViewer.model.materials.findIndex(material => material.name === materialName);\n if (materialIndex !== -1) {\n const material = modelViewer.model.materials[materialIndex];\n material.pbrMetallicRoughness.baseColorTexture.setTexture(texture);\n console.log(`Culoarea aplicat\u0103 materialului ${materialName}.`);\n }\n });\n }<\/p>\n<p> \/\/ Ad\u0103ugare text pe canvas\n function addTextToCanvas(canvas) {\n const textInput = canvas === canvas1 ? document.getElementById('customText').value : document.getElementById('customText2').value;\n const font = canvas === canvas1 ? document.getElementById('fontSelect').value : document.getElementById('fontSelect2').value;\n const color = canvas === canvas1 ? document.getElementById('textColor').value : document.getElementById('textColor2').value;\n \/\/ Modificare: verific\u0103m pentru fiecare canvas checkbox-ul respectiv\n const isBold = canvas === canvas1 ? document.getElementById('textBold').checked : document.getElementById('textBold2').checked;<\/p>\n<p> if (textInput.trim() === \"\") {\n alert(\"Te rug\u0103m s\u0103 introduci un text.\");\n return;\n }<\/p>\n<p> const fontWeight = isBold ? 'bold' : 'normal';<\/p>\n<p> const text = new fabric.Text(textInput, {\n left: canvas.width \/ 2,\n top: canvas.height \/ 2,\n originX: 'center',\n originY: 'center',\n fontFamily: font,\n fill: color,\n fontSize: 40,\n fontWeight: fontWeight,\n selectable: true\n });<\/p>\n<p> canvas.add(text);\n canvas.renderAll();\n}<\/p>\n<p> document.getElementById('fontSelect').addEventListener('change', function () {\n const selectedFont = this.options[this.selectedIndex].value;\n this.style.fontFamily = selectedFont;\n });<\/p>\n<p> document.getElementById('fontSelect2').addEventListener('change', function () {\n const selectedFont = this.options[this.selectedIndex].value;\n this.style.fontFamily = selectedFont;\n });<\/p>\n<p> function openImageLibrary(editorNumber) {\n selectedEditor = editorNumber;\n loadLibraryImages();\n const modal = document.getElementById(\"imageLibraryModal\");\n modal.style.display = \"block\";\n }<\/p>\n<p> function loadLibraryImages() {\n fetch('.\/list_images.php')\n .then(response => response.json())\n .then(images => {\n const imageLibrary = document.getElementById('imageLibrary');\n imageLibrary.innerHTML = ''; <\/p>\n<p> images.forEach(image => {\n const imgElement = document.createElement('img');\n imgElement.src = image; \n imgElement.style.width = '100px';\n imgElement.style.margin = '10px';\n imgElement.onclick = function() {\n applyImageFromLibrary(image);\n };\n imageLibrary.appendChild(imgElement);\n });\n })\n .catch(error => {\n console.error('Eroare la \u00eenc\u0103rcarea imaginilor:', error);\n });\n }<\/p>\n<p> function applyImageFromLibrary(imageName) {\n const imageUrl = imageName;\n const canvas = selectedEditor === 1 ? canvas1 : canvas2;<\/p>\n<p> fabric.Image.fromURL(imageUrl, function(img) {\n const canvasWidth = canvas.width * 0.8;\n const canvasHeight = canvas.height * 0.8;<\/p>\n<p> const imgAspectRatio = img.width \/ img.height;\n let newWidth, newHeight;<\/p>\n<p> if (imgAspectRatio > 1) {\n newWidth = canvasWidth;\n newHeight = canvasWidth \/ imgAspectRatio;\n } else {\n newHeight = canvasHeight;\n newWidth = canvasHeight * imgAspectRatio;\n }<\/p>\n<p> img.set({\n left: canvas.width \/ 2,\n top: canvas.height \/ 2,\n originX: 'center',\n originY: 'center',\n scaleX: newWidth \/ img.width,\n scaleY: newHeight \/ img.height\n });<\/p>\n<p> canvas.add(img);\n canvas.renderAll();\n });<\/p>\n<p> const modal = document.getElementById(\"imageLibraryModal\");\n modal.style.display = \"none\";\n }<\/p>\n<p> document.addEventListener('DOMContentLoaded', function() {\n const acordeons = document.querySelectorAll('.acordeon');\n acordeons.forEach(acordeon => {\n acordeon.addEventListener('click', function() {\n this.classList.toggle(\"active\");\n var panel = this.nextElementSibling;\n if (panel.style.maxHeight) {\n panel.style.maxHeight = null;\n } else {\n panel.style.maxHeight = panel.scrollHeight + \"px\";\n }\n });\n });<\/p>\n<p> updateEditorDimensions(canvas1, '.canvas-container');\n updateEditorDimensions(canvas2, '.canvas-container');<\/p>\n<p> window.addEventListener('resize', () => {\n updateEditorDimensions(canvas1, '.canvas-container');\n updateEditorDimensions(canvas2, '.canvas-container');\n });<\/p>\n<p> const span = document.getElementsByClassName(\"close\")[0];\n span.onclick = function() {\n const modal = document.getElementById(\"imageLibraryModal\");\n modal.style.display = \"none\";\n }\n window.onclick = function(event) {\n const modal = document.getElementById(\"imageLibraryModal\");\n if (event.target == modal) {\n modal.style.display = \"none\";\n }\n }\n });\n function toggleSections() {\n const selector = document.getElementById('customizationSelector');\n const selectedValue = selector.value;<\/p>\n<p> const fataSection = document.getElementById('section-fata');\n const spateSection = document.getElementById('section-spate');<\/p>\n<p> if (selectedValue === 'fata') {\n fataSection.style.display = 'block';\n spateSection.style.display = 'none';\n } else {\n fataSection.style.display = 'none';\n spateSection.style.display = 'block';\n }\n}<\/p>\n<p>\/\/ Ini\u021bial seteaz\u0103 vizibilitatea corect\u0103 la \u00eenc\u0103rcarea paginii\ndocument.addEventListener('DOMContentLoaded', function() {\n toggleSections(); \/\/ Asigur\u0103-te c\u0103 sec\u021biunea \"Personalizeaz\u0103 fa\u021ba\" este afi\u0219at\u0103 ini\u021bial\n});<\/p>\n<p> <\/script><\/p>\n<p> <script type=\"module\" src=\".\/mix1.js\"><\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>","protected":false},"excerpt":{"rendered":"<p><3D\/AR-viewer> Demo × Selecteaz\u0103 o imagine din libr\u0103rie: Vezi \u00een spa\u021biul t\u0103u Selecteaz\u0103 partea de personalizat: Personalizeaz\u0103 fa\u021baPersonalizeaz\u0103 spatele Personalizeaz\u0103 partea din fa\u021ba Instructiuni de utilizare in partea de jos a paginii. Schimb\u0103 culoarea: \u00cencarc\u0103 imagine Alege din libr\u0103rie Introdu textul: Alege fontul: ArialCourier NewRobotoOpen SansLobsterPoppinsProtest GuerrillaPlaywrite CUOswaldNerko OneFascinate InlineKanitSofadi ...<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"class_list":["post-3494","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/pages\/3494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/comments?post=3494"}],"version-history":[{"count":1,"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/pages\/3494\/revisions"}],"predecessor-version":[{"id":3495,"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/pages\/3494\/revisions\/3495"}],"wp:attachment":[{"href":"https:\/\/stereomode.com\/ro\/wp-json\/wp\/v2\/media?parent=3494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}