\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0437\u0430\u043a\u0430\u0437\u0430<\/title>\n<style>\n :root{\n \/* \u2014\u2014\u2014 \u0421\u0432\u0435\u0442\u043b\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u2014\u2014\u2014 *\/\n --bg:#f7f8fb;\n --card:#ffffff;\n --card2:#fbfcff;\n --border:#e4e8ec;\n --muted:#6b7280;\n --text:#0f172a;\n --accent:#22c55e;\n --accent-d:#16a34a;\n --danger:#dc2626;\n --warn:#f59e0b;\n --radius:16px;\n --ring: 0 0 0 3px rgba(34,197,94,.20);\n }\n\n html,body{\n background:\n radial-gradient(900px 480px at 80% -60%, rgba(56,189,248,.10), transparent 55%),\n linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);\n color:var(--text);\n\n\n margin:0;\n }\n\n .wrap{max-width:820px;margin:42px auto;padding:0 16px}\n\n .card{\n position:relative;\n background:\n radial-gradient(1200px 600px at 80% -40%, rgba(56,189,248,.06), transparent 60%),\n linear-gradient(180deg, var(--card) 0%, var(--card2) 100%);\n border:1px solid var(--border);\n border-radius:var(--radius);\n box-shadow: 0 10px 30px rgba(15,23,42,.07);\n padding:24px 22px 22px;\n overflow:hidden;\n }\n\n .ribbon{\n display:flex; align-items:center; gap:10px;\n background:linear-gradient(90deg,#16a34a 0%, #22c55e 60%, #4ade80 100%);\n color:#052e16;\n font-weight:700; font-size:14px; padding:10px 14px;\n border-radius:12px; margin-bottom:14px;\n box-shadow:0 6px 20px rgba(34,197,94,.25);\n }\n .ribbon svg{width:18px;height:18px}\n\n h1{font-size:26px;margin:6px 0 8px;font-weight:800;letter-spacing:.2px}\n p.sub{color:var(--muted);margin:0 0 18px;font-size:14px}\n\n .row{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch}\n .row .grow{flex:1}\n\n input[type=\"text\"]{\n width:100%; height:54px; padding:0 14px; background:#ffffff;\n color:var(--text); border:1px solid #d7dce3; border-radius:14px;\n outline:none; font-size:16px; transition:.2s; box-sizing:border-box;\n box-shadow: 0 2px 0 rgba(15,23,42,.02) inset;\n }\n input[type=\"text\"]::placeholder{color:#94a3b8}\n input[type=\"text\"]:focus{border-color:#1fb86b; box-shadow:var(--ring)}\n\n button{\n height:54px; padding:0 20px; border-radius:14px; border:none; cursor:pointer;\n background:linear-gradient(180deg, var(--accent), var(--accent-d));\n color:#052e16; font-weight:800; font-size:16px; transition:.2s; white-space:nowrap; flex-shrink:0;\n box-shadow: 0 10px 24px rgba(34,197,94,.25);\n }\n button:hover{filter:saturate(1.05) brightness(1.03)}\n button:disabled{opacity:.6; cursor:not-allowed}\n\n .result{margin-top:18px;display:none}\n .result.show{display:block}\n\n .kv{display:grid; grid-template-columns: 220px 1fr; gap:10px 14px; margin-top:14px}\n .k{color:var(--muted); font-weight:600}\n .v{color:var(--text)}\n\n .hint{color:var(--muted); font-size:12px; margin-top:10px}\n .notfound{\n color:#7f1d1d;\n padding:14px 16px;\n border:1px solid #fecaca;\n background:#fff1f2;\n border-radius:12px;\n }\n\n .loader{\n display:inline-block;width:16px;height:16px;border:2px solid #e2e8f0;border-top-color:#16a34a;border-radius:50%;\n animation:spin .9s linear infinite;vertical-align:-3px;margin-right:8px\n }\n @keyframes spin{to{transform:rotate(360deg)}}\n\n .foot{margin-top:20px;color:var(--muted);font-size:12px;text-align:right}\n\n \/* \u2014\u2014\u2014 \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u043b\u0438\u043d\u0438\u044f (\u0441\u0432\u0435\u0442\u043b\u0430\u044f) \u2014\u2014\u2014 *\/\n .timeline{\n margin-top:18px; padding:18px 14px; border:1px dashed #d7dee8; border-radius:14px;\n background:linear-gradient(180deg, rgba(148,163,184,.12), rgba(255,255,255,.6));\n }\n .steps{\n display:grid; grid-template-columns: repeat(3,1fr); gap:12px 22px; align-items:start; position:relative;\n }\n .steps::before{\n content:\"\"; position:absolute; top:22px; left:16px; right:16px;\n height:2px; background:linear-gradient(90deg,#e2e8f0,#cbd5e1);\n z-index:0;\n }\n .step{position:relative; z-index:1; display:flex; gap:10px; align-items:flex-start}\n .dot{\n position:relative; margin-top:6px; width:14px;height:14px;border-radius:999px;background:#ffffff;border:2px solid #cbd5e1; flex:0 0 14px;\n box-shadow:0 0 0 4px rgba(148,163,184,.25) inset;\n }\n .step.done .dot{background:#22c55e;border-color:#16a34a; box-shadow:0 0 0 4px rgba(34,197,94,.25) inset}\n .step.current .dot{background:#f59e0b;border-color:#b45309; box-shadow:0 0 0 4px rgba(245,158,11,.25) inset}\n\n .step .meta{display:flex; flex-direction:column; gap:4px}\n .step .label{font-weight:800; letter-spacing:.2px}\n .step .date{color:#475569; font-size:13px; display:flex; align-items:center; gap:6px}\n .step svg{width:16px;height:16px;opacity:.9; color:#0f172a}\n\n \/* \u2014\u2014\u2014 \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u2014\u2014\u2014 *\/\n @media (max-width: 720px){\n .wrap{margin:22px auto;padding:0 12px}\n .card{padding:16px;border-radius:14px}\n h1{font-size:22px}\n .row{flex-direction:column;gap:8px}\n button{width:100%}\n .kv{grid-template-columns:1fr; gap:8px 0}\n .k{font-size:13px} .v{font-size:15px}\n .foot{text-align:left;font-size:11px}\n .steps{grid-template-columns:1fr; gap:14px}\n .steps::before{display:none}\n .dot{margin-top:2px}\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n <div class=\"card\">\n \n\n <h1>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0437\u0430\u043a\u0430\u0437\u0430<\/h1>\n <p class=\"sub\">\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 +77077810099<\/p>\n\n <div class=\"row\">\n <div class=\"grow\">\n <input id=\"orderNo\" type=\"text\" inputmode=\"numeric\" placeholder=\"\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: 571722277\" autofocus \/>\n <div class=\"hint\">\u041d\u043e\u043c\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 (\u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432).<\/div>\n <\/div>\n <button id=\"btn\" type=\"button\">\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c<\/button>\n <\/div>\n\n <div id=\"result\" class=\"result\"><\/div>\n <div class=\"foot\">\u0414\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437 \u041c\u043e\u0439\u0421\u043a\u043b\u0430\u0434.<\/div>\n <\/div>\n<\/div>\n\n<script>\n const API_BASE = \"https:\/\/suleon.parts\/api\/\";\n const $ = (sel) => document.querySelector(sel);\n const orderInput = $('#orderNo');\n const btn = $('#btn');\n const result = $('#result');\n\n function normalizeNo(no){ return (no||'').trim(); }\n\n async function fetchOrder(no){\n const url = `${API_BASE.replace(\/\\\/+$\/,'')}\/order?no=${encodeURIComponent(no)}`;\n const r = await fetch(url);\n const text = await r.text();\n if (text.trim().startsWith(\"<\")) throw new Error(\"\u0421\u0435\u0440\u0432\u0435\u0440 \u0432\u0435\u0440\u043d\u0443\u043b HTML \u0432\u043c\u0435\u0441\u0442\u043e JSON\");\n try { return JSON.parse(text); } catch(e){ throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430 \u0440\u0430\u0437\u0431\u043e\u0440\u0430 JSON: \"+e.message); }\n }\n\n const Icons = {\n cart:`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7 4h-2l-1 2H2v2h2l3.6 7.59L6.25 18A2 2 0 0 0 8 21h10v-2H8.42a.25.25 0 0 1-.23-.15l.03-.06L9.1 16h7.45a2 2 0 0 0 1.8-1.1l3.37-6.76A1 1 0 0 0 21 6H7.42l-.7-2zM7 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\"\/><\/svg>`,\n truck:`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M3 5h11v8h-1.18A3 3 0 0 0 10 15H8a3 3 0 0 0-2.82 2H5a2 2 0 1 0 0 4 2 2 0 0 0 2-2h8a2 2 0 1 0 2-2h2v-5l-3-4h-2V5H3zm14 5.5 2 3.5h-2V10.5z\"\/><\/svg>`,\n check:`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>`,\n calendar:`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v3H2V6a2 2 0 0 1 2-2h3V2zm15 8v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8h20z\"\/><\/svg>`\n };\n\n function safe(v){ return (v==null||v===undefined) ? \"\" : String(v); }\n\n function pickSmart(o, keys = [], patterns = []) {\n if (!o) return \"\";\n for (const k of keys) {\n if (o[k]) return String(o[k]).trim();\n }\n const norm = s => String(s).toLowerCase().replace(\/\\s+\/g,'').trim();\n const entries = Object.entries(o);\n for (const pat of patterns) {\n const np = norm(pat);\n const hit = entries.find(([k,v]) => v && norm(k).includes(np));\n if (hit) return String(hit[1]).trim();\n }\n return \"\";\n }\n\n function renderTimeline({purchased, shipped, arrived, eta}){\n const hasPurchased = !!purchased;\n const hasShipped = !!shipped;\n const hasArrived = !!arrived;\n\n \/\/ \u043a\u0430\u043a\u043e\u0439 \u0448\u0430\u0433 \u0441\u0435\u0439\u0447\u0430\u0441 \u0430\u043a\u0442\u0438\u0432\u0435\u043d\n const current = hasArrived ? 2 : (hasShipped ? 1 : (hasPurchased ? 0 : -1));\n\n const step = (idx, label, date, icon) => {\n const isFinal = idx === 2;\n \/\/ \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0448\u0430\u0433 \u00ab\u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c\u00bb, \u0435\u0441\u043b\u0438 \u043e\u043d \u043b\u0435\u0432\u0435\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0418\u041b\u0418 \u044d\u0442\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0448\u0430\u0433 \u0441 \u043f\u0440\u0438\u0431\u044b\u0442\u0438\u0435\u043c\n const isDone = (current > idx) || (isFinal && hasArrived);\n const isCurrent = (current === idx) && !(isFinal && hasArrived); \/\/ \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0431\u044b\u043b, \u043d\u0435 \u00abcurrent\u00bb\n const cls = isDone ? 'step done' : (isCurrent ? 'step current' : 'step');\n\n const dateText = date ? date : (idx===2 ? (eta ? `\u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f: ${eta}` : '\u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043e') : '\u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043e');\n return `\n <div class=\"${cls}\">\n <div class=\"dot\"><\/div>\n <div class=\"meta\">\n <div class=\"label\">${icon} ${label}<\/div>\n <div class=\"date\">${Icons.calendar} <span>${safe(dateText)}<\/span><\/div>\n <\/div>\n <\/div>`;\n };\n\n return `\n \n <\/div>`;\n }\n\n\n function renderOrder(data){\n const o = data.order;\n result.className = \"result show\";\n\n if (!data.found || !o){\n result.innerHTML = '<div class=\"notfound\">\u0417\u0430\u043a\u0430\u0437 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0435\u0449\u0451 \u0440\u0430\u0437.<\/div>';\n return;\n }\n\n const purchased = pickSmart(\n o,\n ['purchased_date','m_purchased','date_purchased','purchased','purchase_date','purchasedAt','mPurchased'],\n ['\u0442\u043e\u0432\u0430\u0440\u043a\u0443\u043f\u043b\u0435\u043d','\u043a\u0443\u043f\u043b\u0435\u043d','\u8cb7']\n );\n const shipped = pickSmart(\n o,\n ['shipped_date','m_shipped','date_shipped','shipped','ship_date','shippedAt','mShipped'],\n ['\u0442\u043e\u0432\u0430\u0440\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d','\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d','\u50b3\u9001']\n );\n const arrived = pickSmart(\n o,\n ['arrived_date','m_arrived','date_arrived','arrived','arrival_date','arrivedAt','mArrived'],\n ['\u0442\u043e\u0432\u0430\u0440\u043f\u0440\u0438\u0431\u044b\u043b','\u043f\u0440\u0438\u0431\u044b\u043b','\u4f86\u4e86']\n );\n const eta = pickSmart(\n o,\n ['eta_date','eta','expected_date','expectedAt'],\n ['\u0434\u0430\u0442\u0430\u043f\u0440\u0438\u0431\u044b\u0442\u0438\u044f','\u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0430\u044f\u0434\u0430\u0442\u0430\u043f\u0440\u0438\u0431\u044b\u0442\u0438\u044f','\u5230\u8fbe']\n );\n const managerComment = pickSmart(\n o,\n ['manager_comment','comment','managerComment'],\n ['\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\u043ce\u043d\u0435\u0434\u0436\u0435\u0440\u0430','\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430']\n );\n\n const kv = (k,v)=>`<div class=\"k\">${k}<\/div><div class=\"v\">${safe(v)}<\/div>`;\n\n result.innerHTML = `\n ${renderTimeline({purchased, shipped, arrived, eta})}\n\n <div class=\"kv\">\n ${kv(\"\u041f\u0440\u0438\u0431\u044b\u0442\u0438\u0435\", eta)}\n ${kv(\"\u041e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\", purchased)}\n ${kv(\"\u041a\u0443\u043f\u043b\u0435\u043d\", shipped)}\n ${kv(\"\u041d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430\", o.order_no || o.orderNo || o.number)}\n ${kv(\"\u0414\u0430\u0442\u0430 \u0437\u0430\u043a\u0430\u0437\u0430\", o.order_date || o.orderDate)}\n ${kv(\"\u041c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\", o.seller)}\n \n \n ${kv(\"\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\", managerComment)}\n <\/div>\n\n <div class=\"hint\" style=\"margin-top:10px\">\n \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: ${safe(o.updated_at || o.updatedAt || '').replace('T',' ').replace('Z','')} (UTC)\n <\/div>\n `;\n }\n\n async function handleCheck(){\n const no = normalizeNo(orderInput.value);\n if(!no){\n result.className=\"result show\";\n result.innerHTML='<div class=\"notfound\">\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430.<\/div>';\n return;\n }\n btn.disabled=true; const old=btn.innerHTML;\n btn.innerHTML='<span class=\"loader\"><\/span>\u0418\u0434\u0451\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430';\n result.className=\"result show\"; result.innerHTML=\"\";\n try{\n const data=await fetchOrder(no);\n renderOrder(data);\n }catch(e){\n result.innerHTML='<div class=\"notfound\">\u041e\u0448\u0438\u0431\u043a\u0430: '+e.message+'<\/div>';\n }finally{\n btn.disabled=false; btn.innerHTML=old;\n }\n }\n\n btn.addEventListener('click',handleCheck);\n orderInput.addEventListener('keydown',e=>{ if(e.key==='Enter') handleCheck(); });\n<\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0437\u0430\u043a\u0430\u0437\u0430 \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0437\u0430\u043a\u0430\u0437\u0430 \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 +77077810099 \u041d\u043e\u043c\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 (\u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432). \u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0414\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437 \u041c\u043e\u0439\u0421\u043a\u043b\u0430\u0434.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suleon.parts\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26"}],"version-history":[{"count":23,"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/suleon.parts\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":26,"date":"2025-09-30T21:27:46","date_gmt":"2025-09-30T21:27:46","guid":{"rendered":"https:\/\/suleon.parts\/?page_id=26"},"modified":"2025-12-02T04:57:09","modified_gmt":"2025-12-02T04:57:09","slug":"%d0%be%d1%82%d1%81%d0%bb%d0%b5%d0%b4%d0%b8%d1%82%d1%8c-%d0%bf%d0%be%d1%81%d1%8b%d0%bb%d0%ba%d1%83","status":"publish","type":"page","link":"https:\/\/suleon.parts\/?page_id=26","title":{"rendered":""},"content":{"rendered":"\n\n\n\n\n\n\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0437\u0430\u043a\u0430\u0437\u0430<\/title>\n<style>\n :root{\n \/* \u2014\u2014\u2014 \u0421\u0432\u0435\u0442\u043b\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u2014\u2014\u2014 *\/\n --bg:#f7f8fb;\n --card:#ffffff;\n --card2:#fbfcff;\n --border:#e4e8ec;\n --muted:#6b7280;\n --text:#0f172a;\n --accent:#22c55e;\n --accent-d:#16a34a;\n --danger:#dc2626;\n --warn:#f59e0b;\n --radius:16px;\n --ring: 0 0 0 3px rgba(34,197,94,.20);\n }\n\n html,body{\n background:\n radial-gradient(900px 480px at 80% -60%, rgba(56,189,248,.10), transparent 55%),\n linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);\n color:var(--text);\n\n\n margin:0;\n }\n\n .wrap{max-width:820px;margin:42px auto;padding:0 16px}\n\n .card{\n position:relative;\n background:\n radial-gradient(1200px 600px at 80% -40%, rgba(56,189,248,.06), transparent 60%),\n linear-gradient(180deg, var(--card) 0%, var(--card2) 100%);\n border:1px solid var(--border);\n border-radius:var(--radius);\n box-shadow: 0 10px 30px rgba(15,23,42,.07);\n padding:24px 22px 22px;\n overflow:hidden;\n }\n\n .ribbon{\n display:flex; align-items:center; gap:10px;\n background:linear-gradient(90deg,#16a34a 0%, #22c55e 60%, #4ade80 100%);\n color:#052e16;\n font-weight:700; font-size:14px; padding:10px 14px;\n border-radius:12px; margin-bottom:14px;\n box-shadow:0 6px 20px rgba(34,197,94,.25);\n }\n .ribbon svg{width:18px;height:18px}\n\n h1{font-size:26px;margin:6px 0 8px;font-weight:800;letter-spacing:.2px}\n p.sub{color:var(--muted);margin:0 0 18px;font-size:14px}\n\n .row{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch}\n .row .grow{flex:1}\n\n input[type=\"text\"]{\n width:100%; height:54px; padding:0 14px; background:#ffffff;\n color:var(--text); border:1px solid #d7dce3; border-radius:14px;\n outline:none; font-size:16px; transition:.2s; box-sizing:border-box;\n box-shadow: 0 2px 0 rgba(15,23,42,.02) inset;\n }\n input[type=\"text\"]::placeholder{color:#94a3b8}\n input[type=\"text\"]:focus{border-color:#1fb86b; box-shadow:var(--ring)}\n\n button{\n height:54px; padding:0 20px; border-radius:14px; border:none; cursor:pointer;\n background:linear-gradient(180deg, var(--accent), var(--accent-d));\n color:#052e16; font-weight:800; font-size:16px; transition:.2s; white-space:nowrap; flex-shrink:0;\n box-shadow: 0 10px 24px rgba(34,197,94,.25);\n }\n button:hover{filter:saturate(1.05) brightness(1.03)}\n button:disabled{opacity:.6; cursor:not-allowed}\n\n .result{margin-top:18px;display:none}\n .result.show{display:block}\n\n .kv{display:grid; grid-template-columns: 220px 1fr; gap:10px 14px; margin-top:14px}\n .k{color:var(--muted); font-weight:600}\n .v{color:var(--text)}\n\n .hint{color:var(--muted); font-size:12px; margin-top:10px}\n .notfound{\n color:#7f1d1d;\n padding:14px 16px;\n border:1px solid #fecaca;\n background:#fff1f2;\n border-radius:12px;\n }\n\n .loader{\n display:inline-block;width:16px;height:16px;border:2px solid #e2e8f0;border-top-color:#16a34a;border-radius:50%;\n animation:spin .9s linear infinite;vertical-align:-3px;margin-right:8px\n }\n @keyframes spin{to{transform:rotate(360deg)}}\n\n .foot{margin-top:20px;color:var(--muted);font-size:12px;text-align:right}\n\n \/* \u2014\u2014\u2014 \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u043b\u0438\u043d\u0438\u044f (\u0441\u0432\u0435\u0442\u043b\u0430\u044f) \u2014\u2014\u2014 *\/\n .timeline{\n margin-top:18px; padding:18px 14px; border:1px dashed #d7dee8; border-radius:14px;\n background:linear-gradient(180deg, rgba(148,163,184,.12), rgba(255,255,255,.6));\n }\n .steps{\n display:grid; grid-template-columns: repeat(3,1fr); gap:12px 22px; align-items:start; position:relative;\n }\n .steps::before{\n content:\"\"; position:absolute; top:22px; left:16px; right:16px;\n height:2px; background:linear-gradient(90deg,#e2e8f0,#cbd5e1);\n z-index:0;\n }\n .step{position:relative; z-index:1; display:flex; gap:10px; align-items:flex-start}\n .dot{\n position:relative; margin-top:6px; width:14px;height:14px;border-radius:999px;background:#ffffff;border:2px solid #cbd5e1; flex:0 0 14px;\n box-shadow:0 0 0 4px rgba(148,163,184,.25) inset;\n }\n .step.done .dot{background:#22c55e;border-color:#16a34a; box-shadow:0 0 0 4px rgba(34,197,94,.25) inset}\n .step.current .dot{background:#f59e0b;border-color:#b45309; box-shadow:0 0 0 4px rgba(245,158,11,.25) inset}\n\n .step .meta{display:flex; flex-direction:column; gap:4px}\n .step .label{font-weight:800; letter-spacing:.2px}\n .step .date{color:#475569; font-size:13px; display:flex; align-items:center; gap:6px}\n .step svg{width:16px;height:16px;opacity:.9; color:#0f172a}\n\n \/* \u2014\u2014\u2014 \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u2014\u2014\u2014 *\/\n @media (max-width: 720px){\n .wrap{margin:22px auto;padding:0 12px}\n .card{padding:16px;border-radius:14px}\n h1{font-size:22px}\n .row{flex-direction:column;gap:8px}\n button{width:100%}\n .kv{grid-template-columns:1fr; gap:8px 0}\n .k{font-size:13px} .v{font-size:15px}\n .foot{text-align:left;font-size:11px}\n .steps{grid-template-columns:1fr; gap:14px}\n .steps::before{display:none}\n .dot{margin-top:2px}\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n <div class=\"card\">\n \n\n <h1>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0437\u0430\u043a\u0430\u0437\u0430<\/h1>\n <p class=\"sub\">\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 +77077810099<\/p>\n\n <div class=\"row\">\n <div class=\"grow\">\n <input id=\"orderNo\" type=\"text\" inputmode=\"numeric\" placeholder=\"\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: 571722277\" autofocus \/>\n <div class=\"hint\">\u041d\u043e\u043c\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 (\u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432).<\/div>\n <\/div>\n <button id=\"btn\" type=\"button\">\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c<\/button>\n <\/div>\n\n <div id=\"result\" class=\"result\"><\/div>\n <div class=\"foot\">\u0414\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437 \u041c\u043e\u0439\u0421\u043a\u043b\u0430\u0434.<\/div>\n <\/div>\n<\/div>\n\n<script>\n const API_BASE = \"https:\/\/suleon.parts\/api\/\";\n const $ = (sel) => document.querySelector(sel);\n const orderInput = $('#orderNo');\n const btn = $('#btn');\n const result = $('#result');\n\n function normalizeNo(no){ return (no||'').trim(); }\n\n async function fetchOrder(no){\n const url = `${API_BASE.replace(\/\\\/+$\/,'')}\/order?no=${encodeURIComponent(no)}`;\n const r = await fetch(url);\n const text = await r.text();\n if (text.trim().startsWith(\"<\")) throw new Error(\"\u0421\u0435\u0440\u0432\u0435\u0440 \u0432\u0435\u0440\u043d\u0443\u043b HTML \u0432\u043c\u0435\u0441\u0442\u043e JSON\");\n try { return JSON.parse(text); } catch(e){ throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430 \u0440\u0430\u0437\u0431\u043e\u0440\u0430 JSON: \"+e.message); }\n }\n\n const Icons = {\n cart:`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7 4h-2l-1 2H2v2h2l3.6 7.59L6.25 18A2 2 0 0 0 8 21h10v-2H8.42a.25.25 0 0 1-.23-.15l.03-.06L9.1 16h7.45a2 2 0 0 0 1.8-1.1l3.37-6.76A1 1 0 0 0 21 6H7.42l-.7-2zM7 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\"\/><\/svg>`,\n truck:`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M3 5h11v8h-1.18A3 3 0 0 0 10 15H8a3 3 0 0 0-2.82 2H5a2 2 0 1 0 0 4 2 2 0 0 0 2-2h8a2 2 0 1 0 2-2h2v-5l-3-4h-2V5H3zm14 5.5 2 3.5h-2V10.5z\"\/><\/svg>`,\n check:`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>`,\n calendar:`<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v3H2V6a2 2 0 0 1 2-2h3V2zm15 8v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8h20z\"\/><\/svg>`\n };\n\n function safe(v){ return (v==null||v===undefined) ? \"\" : String(v); }\n\n function pickSmart(o, keys = [], patterns = []) {\n if (!o) return \"\";\n for (const k of keys) {\n if (o[k]) return String(o[k]).trim();\n }\n const norm = s => String(s).toLowerCase().replace(\/\\s+\/g,'').trim();\n const entries = Object.entries(o);\n for (const pat of patterns) {\n const np = norm(pat);\n const hit = entries.find(([k,v]) => v && norm(k).includes(np));\n if (hit) return String(hit[1]).trim();\n }\n return \"\";\n }\n\n function renderTimeline({purchased, shipped, arrived, eta}){\n const hasPurchased = !!purchased;\n const hasShipped = !!shipped;\n const hasArrived = !!arrived;\n\n \/\/ \u043a\u0430\u043a\u043e\u0439 \u0448\u0430\u0433 \u0441\u0435\u0439\u0447\u0430\u0441 \u0430\u043a\u0442\u0438\u0432\u0435\u043d\n const current = hasArrived ? 2 : (hasShipped ? 1 : (hasPurchased ? 0 : -1));\n\n const step = (idx, label, date, icon) => {\n const isFinal = idx === 2;\n \/\/ \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0448\u0430\u0433 \u00ab\u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c\u00bb, \u0435\u0441\u043b\u0438 \u043e\u043d \u043b\u0435\u0432\u0435\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0418\u041b\u0418 \u044d\u0442\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0448\u0430\u0433 \u0441 \u043f\u0440\u0438\u0431\u044b\u0442\u0438\u0435\u043c\n const isDone = (current > idx) || (isFinal && hasArrived);\n const isCurrent = (current === idx) && !(isFinal && hasArrived); \/\/ \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0431\u044b\u043b, \u043d\u0435 \u00abcurrent\u00bb\n const cls = isDone ? 'step done' : (isCurrent ? 'step current' : 'step');\n\n const dateText = date ? date : (idx===2 ? (eta ? `\u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f: ${eta}` : '\u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043e') : '\u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043e');\n return `\n <div class=\"${cls}\">\n <div class=\"dot\"><\/div>\n <div class=\"meta\">\n <div class=\"label\">${icon} ${label}<\/div>\n <div class=\"date\">${Icons.calendar} <span>${safe(dateText)}<\/span><\/div>\n <\/div>\n <\/div>`;\n };\n\n return `\n \n <\/div>`;\n }\n\n\n function renderOrder(data){\n const o = data.order;\n result.className = \"result show\";\n\n if (!data.found || !o){\n result.innerHTML = '<div class=\"notfound\">\u0417\u0430\u043a\u0430\u0437 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0435\u0449\u0451 \u0440\u0430\u0437.<\/div>';\n return;\n }\n\n const purchased = pickSmart(\n o,\n ['purchased_date','m_purchased','date_purchased','purchased','purchase_date','purchasedAt','mPurchased'],\n ['\u0442\u043e\u0432\u0430\u0440\u043a\u0443\u043f\u043b\u0435\u043d','\u043a\u0443\u043f\u043b\u0435\u043d','\u8cb7']\n );\n const shipped = pickSmart(\n o,\n ['shipped_date','m_shipped','date_shipped','shipped','ship_date','shippedAt','mShipped'],\n ['\u0442\u043e\u0432\u0430\u0440\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d','\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d','\u50b3\u9001']\n );\n const arrived = pickSmart(\n o,\n ['arrived_date','m_arrived','date_arrived','arrived','arrival_date','arrivedAt','mArrived'],\n ['\u0442\u043e\u0432\u0430\u0440\u043f\u0440\u0438\u0431\u044b\u043b','\u043f\u0440\u0438\u0431\u044b\u043b','\u4f86\u4e86']\n );\n const eta = pickSmart(\n o,\n ['eta_date','eta','expected_date','expectedAt'],\n ['\u0434\u0430\u0442\u0430\u043f\u0440\u0438\u0431\u044b\u0442\u0438\u044f','\u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0430\u044f\u0434\u0430\u0442\u0430\u043f\u0440\u0438\u0431\u044b\u0442\u0438\u044f','\u5230\u8fbe']\n );\n const managerComment = pickSmart(\n o,\n ['manager_comment','comment','managerComment'],\n ['\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\u043ce\u043d\u0435\u0434\u0436\u0435\u0440\u0430','\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430']\n );\n\n const kv = (k,v)=>`<div class=\"k\">${k}<\/div><div class=\"v\">${safe(v)}<\/div>`;\n\n result.innerHTML = `\n ${renderTimeline({purchased, shipped, arrived, eta})}\n\n <div class=\"kv\">\n ${kv(\"\u041f\u0440\u0438\u0431\u044b\u0442\u0438\u0435\", eta)}\n ${kv(\"\u041e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\", purchased)}\n ${kv(\"\u041a\u0443\u043f\u043b\u0435\u043d\", shipped)}\n ${kv(\"\u041d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430\", o.order_no || o.orderNo || o.number)}\n ${kv(\"\u0414\u0430\u0442\u0430 \u0437\u0430\u043a\u0430\u0437\u0430\", o.order_date || o.orderDate)}\n ${kv(\"\u041c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\", o.seller)}\n \n \n ${kv(\"\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\", managerComment)}\n <\/div>\n\n <div class=\"hint\" style=\"margin-top:10px\">\n \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: ${safe(o.updated_at || o.updatedAt || '').replace('T',' ').replace('Z','')} (UTC)\n <\/div>\n `;\n }\n\n async function handleCheck(){\n const no = normalizeNo(orderInput.value);\n if(!no){\n result.className=\"result show\";\n result.innerHTML='<div class=\"notfound\">\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430.<\/div>';\n return;\n }\n btn.disabled=true; const old=btn.innerHTML;\n btn.innerHTML='<span class=\"loader\"><\/span>\u0418\u0434\u0451\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430';\n result.className=\"result show\"; result.innerHTML=\"\";\n try{\n const data=await fetchOrder(no);\n renderOrder(data);\n }catch(e){\n result.innerHTML='<div class=\"notfound\">\u041e\u0448\u0438\u0431\u043a\u0430: '+e.message+'<\/div>';\n }finally{\n btn.disabled=false; btn.innerHTML=old;\n }\n }\n\n btn.addEventListener('click',handleCheck);\n orderInput.addEventListener('keydown',e=>{ if(e.key==='Enter') handleCheck(); });\n<\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0437\u0430\u043a\u0430\u0437\u0430 \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0437\u0430\u043a\u0430\u0437\u0430 \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 +77077810099 \u041d\u043e\u043c\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 (\u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432). \u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0414\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437 \u041c\u043e\u0439\u0421\u043a\u043b\u0430\u0434.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suleon.parts\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26"}],"version-history":[{"count":23,"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/suleon.parts\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/suleon.parts\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}