Product Lookup<\/title>\r\n<style>\r\n body{\r\n direction: ltr;\r\n font-family: Arial\r\n }\r\n \/* Updated CSS for flexbox layout *\/\r\n .input-container {\r\n margin-bottom: 20px; \/* Add margin to separate from the table *\/\r\n text-align: center; \/* Center align input and button *\/\r\n }\r\n\r\n .input-container input[type=\"text\"],\r\n .input-container button,\r\n .input-container .spinner {\r\n margin: 10px; \/* Adjust margin as needed *\/\r\n }\r\n\r\n #rectangle {\r\n width: 180px; \/* Adjust width as needed *\/\r\n height: 260px; \/* Adjust height as needed *\/\r\n border: 20px solid black; \/* Border color *\/\r\n margin: auto; \/* Center rectangle *\/\r\n box-shadow: 0 0 0 2px white, 0 0 0 10px red; \/* White box-shadow for the space, red box-shadow for the border *\/\r\n background-color: \/* Add background color *\/;\r\n }\r\n\r\n .spinner {\r\n border: 4px solid rgba(255, 0, 0, 0.1); \/* Red border color *\/\r\n border-left-color: #f00; \/* Red spinner color *\/\r\n border-radius: 50%;\r\n width: 30px;\r\n height: 30px;\r\n animation: spin 0.5s linear infinite; \/* Faster spinner *\/\r\n display: none;\r\nmargin: 1rem; }\r\n\r\n @keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n \/* Button hover color *\/\r\n button:hover {\r\n background-color: #f00; \/* Red hover color *\/\r\n color:white;\r\n }\r\n\r\n \/* Added CSS for table and cell alignment *\/\r\n table {\r\n width: 100%;\r\n border-collapse: separate; \/* Hide table border *\/\r\n border: 2px solid white !important; \/* Add !important to override other styles *\/\r\n }\r\n\r\n td {\r\n vertical-align: top;\r\n text-align: center;\r\n padding: 10px; \/* Add padding for better spacing *\/\r\n border: 2px solid white !important; \/* Add !important to override other styles *\/\r\n }\r\n\r\n #lastCell img {\r\n display: block;\r\n margin: 0 auto; \/* Center image *\/\r\n }\r\n\r\n \/* Media query for responsive layout *\/\r\n @media only screen and (max-width: 600px) {\r\n table {\r\n display: block;\r\n }\r\n\r\n td {\r\n display: block;\r\n width: 100%;\r\n }\r\n\r\n .input-container input[type=\"text\"],\r\n .input-container button,\r\n .input-container {\r\n width: 100%;\r\n margin: 10px 0; \/* Adjust margin as needed *\/\r\n }\r\n\r\n .spinner {\r\n width: 30px;\r\n height: 30px;\r\n border-width: 2px;\r\n }\r\n\r\n .input-container button {\r\n margin-top: 10px; \/* Add space between button and input *\/\r\n }\r\n }\r\n<\/style>\r\n<script>\r\n function fetchData() {\r\n \/\/ Clear the cells before each fetch\r\n document.getElementById('result').innerHTML = '';\r\n document.getElementById('middleCell').innerHTML = '';\r\n document.getElementById('lastCell').innerHTML = '';\r\n\r\n const productNumber = document.getElementById('productNumber').value;\r\n const spinner = document.getElementById('spinner');\r\n spinner.style.display = 'inline-block'; \/\/ Show spinner\r\n\r\n fetch(`https:\/\/zollanvari.ir\/api\/originality\/${productNumber}`)\r\n .then(response => {\r\n if (!response.ok) {\r\n throw new Error('Network response was not ok');\r\n }\r\n return response.json();\r\n })\r\n .then(data => {\r\n spinner.style.display = 'none'; \/\/ Hide spinner\r\n displayData(data);\r\n displayImage(data);\r\n })\r\n .catch(error => {\r\n spinner.style.display = 'none'; \/\/ Hide spinner\r\n handleError();\r\n console.error('Error fetching data:', error)\r\n });\r\n }\r\n\r\n function displayData(data) {\r\n const resultElement = document.getElementById('result');\r\n resultElement.innerHTML = `\r\n <p><span style=\"font-weight:800\">\u88fd\u54c1\u756a\u53f7\uff1a<\/span> ${data.pno}<\/p>\r\n <p><span style=\"font-weight:800\">\u30c7\u30b6\u30a4\u30f3\u3068\u5236\u4f5c:<\/span> Zollanvari<\/p>\r\n <p><span style=\"font-weight:800\">\u30b3\u30fc\u30c9\uff1a<\/span> ${data.code.nameFa}<\/p>\r\n <p><span style=\"font-weight:800\">\u5bf8\u6cd5:<\/span> ${data.widthNew} * ${data.heightNew} = ${data.areaNew} (m^2)<\/p>\r\n <p><span style=\"font-weight:800\">\u80cc\u666f\u8272:<\/span> ${data.background_color.name}<\/p>\r\n <p><span style=\"font-weight:800\">\u30dc\u30fc\u30c0\u306e\u8272\uff1a<\/span> ${data.border_color.name}<\/p>\r\n `;\r\n\r\n \/\/ Create a div element for the rectangle\r\n const rectangle = document.createElement('div');\r\n rectangle.id = 'rectangle';\r\n\r\n \/\/ Set background color based on RGB codes\r\n const backgroundColor = `rgb(${data.background_color.red}, ${data.background_color.green}, ${data.background_color.blue})`;\r\n rectangle.style.backgroundColor = backgroundColor;\r\n\r\n \/\/ Set border color based on RGB codes\r\n const borderColor = `rgb(${data.border_color.red}, ${data.border_color.green}, ${data.border_color.blue})`;\r\n rectangle.style.borderColor = borderColor;\r\n\r\n const middleCell = document.getElementById('middleCell');\r\n middleCell.appendChild(rectangle);\r\n }\r\n\r\n function displayImage(data) {\r\n const imageElement = document.createElement('img');\r\n imageElement.src = 'https:\/\/zollanvariheadquarters.com\/fa\/originality\/original.png';\r\n\r\n const lastCell = document.getElementById('lastCell');\r\n lastCell.appendChild(imageElement);\r\n }\r\n\r\n function handleError() {\r\n const resultElement = document.getElementById('result');\r\n resultElement.innerHTML = '<p>\u7d50\u679c\u304c\u898b\u3064\u304b\u3089\u306a\u3044\u304b\u3001\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002<\/p>';\r\n }\r\n<\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"input-container\">\r\n <input type=\"text\" id=\"productNumber\" name=\"productNumber\" placeholder=\"\u88fd\u54c1\u756a\u53f7\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\">\r\n <button onclick=\"fetchData()\">\u63d0\u51fa\u3059\u308b<\/button>\r\n <div class=\"spinner\" id=\"spinner\"><\/div> \r\n<\/div>\r\n\r\n<table>\r\n <tr>\r\n <td id=\"result\">\r\n \r\n <\/td>\r\n <td id=\"middleCell\"><\/td> \r\n <td id=\"lastCell\"><\/td> \r\n <\/tr>\r\n<\/table>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"aux-parallax-section elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-3fc70d4\" data-id=\"3fc70d4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5bfbfdd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5bfbfdd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"aux-parallax-section elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9e2afd5\" data-id=\"9e2afd5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-03d2382 elementor-widget elementor-widget-spacer\" data-id=\"03d2382\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u88fd\u54c1\u306e\u30aa\u30ea\u30b8\u30ca\u30ea\u30c6\u30a3\u306b\u3064\u3044\u3066\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 Product Lookup \u63d0\u51fa\u3059\u308b<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"_links":{"self":[{"href":"https:\/\/zollanvariheadquarters.com\/jp\/wp-json\/wp\/v2\/pages\/1741"}],"collection":[{"href":"https:\/\/zollanvariheadquarters.com\/jp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zollanvariheadquarters.com\/jp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zollanvariheadquarters.com\/jp\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/zollanvariheadquarters.com\/jp\/wp-json\/wp\/v2\/comments?post=1741"}],"version-history":[{"count":310,"href":"https:\/\/zollanvariheadquarters.com\/jp\/wp-json\/wp\/v2\/pages\/1741\/revisions"}],"predecessor-version":[{"id":2821,"href":"https:\/\/zollanvariheadquarters.com\/jp\/wp-json\/wp\/v2\/pages\/1741\/revisions\/2821"}],"wp:attachment":[{"href":"https:\/\/zollanvariheadquarters.com\/jp\/wp-json\/wp\/v2\/media?parent=1741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}