{"id":1335,"date":"2020-04-12T21:44:00","date_gmt":"2020-04-12T21:44:00","guid":{"rendered":"https:\/\/www.unknownroom.com\/?page_id=1335"},"modified":"2026-03-08T03:18:26","modified_gmt":"2026-03-07T19:18:26","slug":"checkout","status":"publish","type":"page","link":"https:\/\/unknownroom.com\/ar\/checkout\/","title":{"rendered":"Checkout"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1335\" class=\"elementor elementor-1335\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ab38cdb e-con-full e-flex e-con e-parent\" data-id=\"2ab38cdb\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fabb6da elementor-widget elementor-widget-html\" data-id=\"fabb6da\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\"\/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<style>\n    \/* \u0627\u0644\u0625\u062c\u0628\u0627\u0631 \u0627\u0644\u0646\u0648\u0648\u064a \u0644\u062e\u0637 \u0643\u0627\u064a\u0631\u0648 \u0639\u0644\u0649 \u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0645\u0627 \u0639\u062f\u0627 \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a *\/\n    .custom-checkout-page, \n    .custom-checkout-page *:not(.material-symbols-outlined) { \n        font-family: 'Cairo', sans-serif !important; \n    }\n    \n    .material-symbols-outlined \n    .custom-checkout-page h1, .custom-checkout-page h2, .custom-checkout-page h3, .custom-checkout-page p { margin: 0; }\n<\/style>\n\n<div class=\"custom-checkout-page bg-transparent text-slate-100 antialiased min-h-screen w-full flex flex-col\" dir=\"rtl\">\n    \n    <header class=\"w-full border-b border-[#f9d006]\/20 bg-[#231f0f]\/80 backdrop-blur-md px-6 lg:px-12 py-4\">\n        <div class=\"mx-auto flex max-w-[1440px] items-center justify-between\">\n            <div class=\"flex items-center gap-3\">\n                <a href=\"https:\/\/unknownroom.com\/ar\/\" class=\"flex items-center gap-3 hover:opacity-80 transition-opacity\">\n                    <img decoding=\"async\" src=\"https:\/\/unknownroom.com\/wp-content\/uploads\/2023\/12\/Unknown-Room-Logo.png\" alt=\"\u0644\u0648\u062c\u0648 \u0623\u0646\u0648\u0646 \u0633\u0643\u064a\u0628\" style=\"max-height: 45px !important; width: auto !important; object-fit: contain;\" title=\"\">\n                    <h2 class=\"text-xl font-bold tracking-tight text-slate-100\">\u0645\u062a\u062c\u0631 \u0623\u0646\u0648\u0646 \u0633\u0643\u064a\u0628 \u0642\u064a\u0645<\/h2>\n                <\/a>\n            <\/div>\n            <a href=\"javascript:history.back()\" class=\"text-slate-300 hover:text-[#f9d006] flex items-center gap-1 text-sm sm:text-base transition-colors font-bold\">\n                \u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0645\u062a\u062c\u0631 <span class=\"material-symbols-outlined text-sm rtl:-scale-x-100\">arrow_forward<\/span>\n            <\/a>\n        <\/div>\n    <\/header>\n\n    <main class=\"flex-1 mx-auto max-w-[1440px] w-full px-6 lg:px-12 py-12\">\n        <h1 class=\"text-3xl md:text-4xl font-bold text-white mb-8 text-center md:text-right drop-shadow-md\">\u0625\u062a\u0645\u0627\u0645 \u0627\u0644\u0637\u0644\u0628<\/h1>\n\n        <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start\">\n            \n            <div class=\"lg:col-span-7 bg-[#231f0f]\/80 backdrop-blur-lg p-6 md:p-8 rounded-2xl border border-[#f9d006]\/20 shadow-2xl sticky top-24\">\n                <h3 class=\"text-2xl font-bold text-[#f9d006] mb-6 flex items-center gap-2\">\n                    <span class=\"material-symbols-outlined\">person<\/span> \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062a\u0648\u0635\u064a\u0644\n                <\/h3>\n                \n                <form id=\"checkout-form\" action=\"https:\/\/formsubmit.co\/info@unknownroom.com\" method=\"POST\" class=\"flex flex-col gap-5\">\n                    \n                    <input type=\"hidden\" name=\"_captcha\" value=\"false\">\n                    <input type=\"hidden\" name=\"_next\" value=\"https:\/\/unknownroom.com\/ar\/\">\n                    <input type=\"hidden\" name=\"_subject\" value=\"\u0637\u0644\u0628 \u062c\u062f\u064a\u062f \u0645\u0646 \u0645\u062a\u062c\u0631 \u0623\u0646\u0648\u0646 \u0633\u0643\u064a\u0628!\">\n                    \n                    <input type=\"hidden\" name=\"\u062a\u0641\u0627\u0635\u064a\u0644_\u0627\u0644\u0637\u0644\u0628\" id=\"cart-details-input\">\n\n                    <div>\n                        <label class=\"block text-sm text-slate-300 mb-2 font-bold\">\u0627\u0644\u0627\u0633\u0645 \u0628\u0627\u0644\u0643\u0627\u0645\u0644<\/label>\n                        <input type=\"text\" name=\"\u0627\u0644\u0627\u0633\u0645\" id=\"customer-name\" required class=\"w-full bg-[#151208]\/90 border border-white\/10 rounded-lg px-4 py-3 text-white focus:border-[#f9d006] focus:outline-none transition-colors\" placeholder=\"\u0627\u0643\u062a\u0628 \u0627\u0633\u0645\u0643 \u0647\u0646\u0627\">\n                    <\/div>\n                    <div>\n                        <label class=\"block text-sm text-slate-300 mb-2 font-bold\">\u0631\u0642\u0645 \u0627\u0644\u062c\u0648\u0627\u0644<\/label>\n                        <input type=\"tel\" name=\"\u0631\u0642\u0645_\u0627\u0644\u062c\u0648\u0627\u0644\" id=\"customer-phone\" required class=\"w-full bg-[#151208]\/90 border border-white\/10 rounded-lg px-4 py-3 text-white focus:border-[#f9d006] focus:outline-none transition-colors text-right\" placeholder=\"05xxxxxxxx\" dir=\"ltr\">\n                    <\/div>\n                    <div>\n                        <label class=\"block text-sm text-slate-300 mb-2 font-bold\">\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u062a\u0648\u0635\u064a\u0644 \u0628\u0627\u0644\u062a\u0641\u0635\u064a\u0644<\/label>\n                        <textarea name=\"\u0627\u0644\u0639\u0646\u0648\u0627\u0646\" id=\"customer-address\" required rows=\"3\" class=\"w-full bg-[#151208]\/90 border border-white\/10 rounded-lg px-4 py-3 text-white focus:border-[#f9d006] focus:outline-none transition-colors\" placeholder=\"\u0627\u0644\u0645\u062f\u064a\u0646\u0629\u060c \u0627\u0644\u062d\u064a\u060c \u0627\u0644\u0634\u0627\u0631\u0639...\"><\/textarea>\n                    <\/div>\n                    <button type=\"submit\" class=\"w-full mt-4 py-4 bg-[#f9d006] text-[#231f0f] font-bold text-lg rounded-lg hover:bg-yellow-400 transition-colors shadow-lg shadow-[#f9d006]\/20 flex justify-center items-center gap-2\">\n                        \u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0637\u0644\u0628 <span class=\"material-symbols-outlined text-[20px] rtl:-scale-x-100\">send<\/span>\n                    <\/button>\n                <\/form>\n            <\/div>\n\n            <div class=\"lg:col-span-5 bg-[#231f0f]\/80 backdrop-blur-lg p-6 md:p-8 rounded-2xl border border-[#f9d006]\/20 shadow-2xl\">\n                <h3 class=\"text-2xl font-bold text-white mb-6 flex items-center gap-2\">\n                    <span class=\"material-symbols-outlined text-[#f9d006]\">shopping_bag<\/span> \u0645\u0644\u062e\u0635 \u0627\u0644\u0633\u0644\u0629\n                <\/h3>\n                \n                <div id=\"order-items-container\" class=\"flex flex-col gap-4 mb-6 border-b border-white\/10 pb-6\">\n                    <\/div>\n\n                <div class=\"flex justify-between items-center text-lg mt-4\">\n                    <span class=\"text-slate-300 font-bold\">\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a:<\/span>\n                    <span id=\"order-total\" class=\"text-3xl font-bold text-[#f9d006]\">\u0660 \u0631.\u0633<\/span>\n                <\/div>\n            <\/div>\n            \n        <\/div>\n    <\/main>\n\n    <footer class=\"w-full border-t border-[#f9d006]\/20 bg-[#151208]\/90 backdrop-blur-md px-6 lg:px-12 py-8 mt-auto\">\n        <div class=\"mx-auto flex max-w-[1440px] flex-col-reverse md:flex-row items-center justify-between gap-6\">\n            <p class=\"text-slate-400 text-sm sm:text-base font-medium text-center md:text-right\">\n                \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629 \u0644\u0645\u062a\u062c\u0631 \u0623\u0646\u0648\u0646 \u0633\u0643\u064a\u0628 \u0642\u064a\u0645 \u00a9 \u0662\u0660\u0662\u0666\n            <\/p>\n            <a href=\"https:\/\/unknownroom.com\/ar\/\" class=\"flex items-center gap-2 bg-[#f9d006]\/10 border border-[#f9d006]\/30 px-6 py-3 rounded-lg text-[#f9d006] hover:bg-[#f9d006] hover:text-[#231f0f] transition-all font-bold text-sm sm:text-base group\">\n                \u0627\u0644\u062f\u062e\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n                <span class=\"material-symbols-outlined text-[20px] transition-transform group-hover:-translate-x-1\">arrow_back<\/span>\n            <\/a>\n        <\/div>\n    <\/footer>\n\n<\/div>\n<script>\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ \u0633\u062d\u0628 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0630\u0627\u0643\u0631\u0629\n        const cart = JSON.parse(localStorage.getItem('escapeCart')) || [];\n        const itemsContainer = document.getElementById('order-items-container');\n        const totalElement = document.getElementById('order-total');\n\n        \/\/ \u062f\u0627\u0644\u0629 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0627\u0644\u0639\u0631\u0628\u064a\n        const toArabic = (num) => {\n            const arabicNumbers = ['\u0660', '\u0661', '\u0662', '\u0663', '\u0664', '\u0665', '\u0666', '\u0667', '\u0668', '\u0669'];\n            return num.toString().split('').map(c => arabicNumbers[c] || c).join('');\n        };\n\n        \/\/ \u0644\u0648 \u0627\u0644\u0633\u0644\u0629 \u0641\u0627\u0636\u064a\u0629\n        if(cart.length === 0) {\n            itemsContainer.innerHTML = '<div class=\"flex flex-col items-center justify-center text-slate-400 py-10 gap-2\"><span class=\"material-symbols-outlined text-4xl opacity-50\">remove_shopping_cart<\/span><p class=\"font-bold\">\u0627\u0644\u0633\u0644\u0629 \u0641\u0627\u0631\u063a\u0629\u060c \u062c\u0627\u0631\u064a \u0625\u0639\u0627\u062f\u062a\u0643 \u0644\u0644\u0645\u062a\u062c\u0631...<\/p><\/div>';\n            setTimeout(() => { history.back(); }, 2500);\n            return;\n        }\n\n        let total = 0;\n        \n        \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0641\u064a \u0627\u0644\u0633\u0644\u0629\n        cart.forEach(item => {\n            total += item.price;\n            itemsContainer.innerHTML += '<div class=\"flex items-center gap-4 bg-[#151208]\/80 p-3 rounded-xl border border-white\/5 hover:border-[#f9d006]\/30 transition-colors\"><img decoding=\"async\" src=\"' + item.img + '\" class=\"w-16 h-16 object-cover rounded-lg bg-black\/50\"><div class=\"flex-1\"><h4 class=\"font-bold text-white text-sm sm:text-base\">' + item.name + '<\/h4><p class=\"text-[#f9d006] font-bold mt-1\">' + toArabic(item.price) + ' \u0631.\u0633<\/p><\/div><\/div>';\n        });\n\n        \/\/ \u0648\u0636\u0639 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\n        totalElement.innerText = toArabic(total) + ' \u0631.\u0633';\n\n        \/\/ \u062a\u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0648\u0625\u0631\u0633\u0627\u0644\u0647\u0627 \u0645\u0639 \u0627\u0644\u0641\u0648\u0631\u0645\n        document.getElementById('checkout-form').addEventListener('submit', function(e) {\n            \/\/ \u062a\u062c\u0645\u064a\u0639 \u0627\u0644\u0646\u0635 \u0628\u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u0639\u0627\u062f\u064a\u0629 \u0639\u0634\u0627\u0646 \u0645\u064a\u0639\u0645\u0644\u0634 \u0645\u0634\u0627\u0643\u0644 \u0641\u064a \u0627\u0644\u0645\u0646\u062a\u0648\u0631\n            let orderDetails = \"\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629:\\n\";\n            cart.forEach(item => {\n                orderDetails += \"- \" + item.name + \" (\" + item.price + \" \u0631.\u0633)\\n\";\n            });\n            orderDetails += \"\\n\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a: \" + total + \" \u0631.\u0633\";\n\n            \/\/ \u062d\u0642\u0646 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0641\u064a \u0627\u0644\u062d\u0642\u0644 \u0627\u0644\u0645\u062e\u0641\u064a\n            document.getElementById('cart-details-input').value = orderDetails;\n            \n            \/\/ \u062a\u0646\u0638\u064a\u0641 \u0627\u0644\u0633\u0644\u0629 (\u062a\u0642\u062f\u0631 \u062a\u0648\u0642\u0641 \u0627\u0644\u0633\u0637\u0631 \u062f\u0647 \u0645\u0624\u0642\u062a\u0627\u064b \u0644\u0648 \u0628\u062a\u0639\u0645\u0644 \u062a\u064a\u0633\u062a \u0643\u062a\u064a\u0631 \u0648\u0639\u0627\u064a\u0632 \u0627\u0644\u0633\u0644\u0629 \u062a\u0641\u0636\u0644 \u0645\u0644\u064a\u0627\u0646\u0629)\n            localStorage.removeItem('escapeCart');\n        });\n    });\n<\/script>\t\t\t\t<\/div>\n\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>\u0645\u062a\u062c\u0631 \u0623\u0646\u0648\u0646 \u0633\u0643\u064a\u0628 \u0642\u064a\u0645 \u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0645\u062a\u062c\u0631 arrow_forward \u0625\u062a\u0645\u0627\u0645 \u0627\u0644\u0637\u0644\u0628 person \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062a\u0648\u0635\u064a\u0644 \u0627\u0644\u0627\u0633\u0645 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 \u0631\u0642\u0645 \u0627\u0644\u062c\u0648\u0627\u0644 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u062a\u0648\u0635\u064a\u0644 \u0628\u0627\u0644\u062a\u0641\u0635\u064a\u0644 \u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0637\u0644\u0628 send shopping_bag \u0645\u0644\u062e\u0635 \u0627\u0644\u0633\u0644\u0629 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a: \u0660 \u0631.\u0633 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629 \u0644\u0645\u062a\u062c\u0631 \u0623\u0646\u0648\u0646 \u0633\u0643\u064a\u0628 \u0642\u064a\u0645 \u00a9 \u0662\u0660\u0662\u0666 \u0627\u0644\u062f\u062e\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0631\u0626\u064a\u0633\u064a arrow_back<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1335","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/unknownroom.com\/ar\/wp-json\/wp\/v2\/pages\/1335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownroom.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/unknownroom.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/unknownroom.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownroom.com\/ar\/wp-json\/wp\/v2\/comments?post=1335"}],"version-history":[{"count":28,"href":"https:\/\/unknownroom.com\/ar\/wp-json\/wp\/v2\/pages\/1335\/revisions"}],"predecessor-version":[{"id":21187,"href":"https:\/\/unknownroom.com\/ar\/wp-json\/wp\/v2\/pages\/1335\/revisions\/21187"}],"wp:attachment":[{"href":"https:\/\/unknownroom.com\/ar\/wp-json\/wp\/v2\/media?parent=1335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}