\u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u2014 \u0625\u062f\u0627\u0631\u0629 \u0643\u0644 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f<\/title>\n <meta name=\"description\" content=\"\u0627\u0631\u0628\u0637 8 \u0645\u0646\u0635\u0627\u062a (\u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u064a\u0648\u062a\u064a\u0648\u0628\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u0644\u064a\u062c\u0631\u0627\u0645\u060c \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u0633\u0646\u0627\u0628) \u0648\u0627\u0646\u0634\u0631 \u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631 \u0634\u0647\u0631\u064a\u064b\u0627 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f.\" \/>\n\n \n <meta property=\"og:title\" content=\"\u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u2014 \u0625\u062f\u0627\u0631\u0629 \u0643\u0644 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f\" \/>\n <meta property=\"og:description\" content=\"\u0627\u0631\u0628\u0637 8 \u0645\u0646\u0635\u0627\u062a \u0648\u0627\u0646\u0634\u0631 \u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631 \u0634\u0647\u0631\u064a\u064b\u0627 \u2014 \u0635\u0648\u0631\u060c \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0648\u0646\u0635\u0648\u0635.\" \/>\n <meta property=\"og:type\" content=\"website\" \/>\n <meta property=\"og:image\" content=\"https:\/\/via.placeholder.com\/1200x630.png?text=Social+Platform\" \/>\n\n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"Product\",\n \"name\": \"\u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644\",\n \"description\": \"\u0623\u062f\u0627\u0629 \u0645\u0628\u0633\u0651\u0637\u0629 \u0644\u0631\u0628\u0637 8 \u062d\u0633\u0627\u0628\u0627\u062a \u0648\u0646\u0634\u0631 \u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631 \u0634\u0647\u0631\u064a\u064b\u0627.\",\n \"brand\": {\"@type\": \"Brand\", \"name\": \"Social Platform\"},\n \"isAccessibleForFree\": true,\n \"offers\": {\n \"@type\": \"Offer\",\n \"priceCurrency\": \"USD\",\n \"price\": \"0\",\n \"availability\": \"https:\/\/schema.org\/InStock\"\n },\n \"aggregateRating\": {\n \"@type\": \"AggregateRating\",\n \"ratingValue\": \"4.8\",\n \"reviewCount\": \"124\"\n }\n }\n <\/script>\n\n <style>\n :root{\n --primary: #FCAF17; \/* \u0634\u0645\u0633 \u0625\u0644\u0643\u062a\u0631\u064a\u0643 *\/\n --bg: #f6f7fb;\n --text: #222;\n --muted: #667085;\n --card: #fff;\n --border: #e7e7ee;\n --shadow: 0 10px 24px rgba(0,0,0,.06);\n --success: #28a745;\n }\n *{box-sizing:border-box;margin:0;padding:0}\n body{font-family: system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\"; background:var(--bg); color:var(--text); line-height:1.7}\n a{color:inherit}\n .container{max-width:1200px;margin:auto;padding:0 20px}\n header{background:#fff; box-shadow:0 1px 12px rgba(0,0,0,.04)}\n header .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 0}\n .logo{font-weight:800;color:var(--primary);letter-spacing:.3px}\n nav a{margin-inline:10px;text-decoration:none;color:#344054}\n .btn{display:inline-block;padding:12px 20px;border-radius:10px;border:2px solid var(--primary);background:var(--primary);color:#1a1a1a;font-weight:700;text-decoration:none;transition:.25s;cursor:pointer}\n .btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}\n .btn.outline{background:transparent;color:#1a1a1a}\n\n .hero{background:#fff}\n .hero .wrap{padding:64px 0;text-align:center}\n .hero h1{font-size:clamp(28px,4vw,44px);line-height:1.2;margin-bottom:12px}\n .hero p{color:var(--muted);max-width:780px;margin:0 auto 24px}\n .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}\n\n section{padding:64px 0}\n h2{font-size:clamp(22px,3.2vw,32px);margin-bottom:12px}\n p.lead{color:var(--muted)}\n\n .grid{display:grid;gap:22px}\n .features-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:28px}\n .card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px; box-shadow:var(--shadow)}\n .icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:rgba(252,175,23,.12);font-size:22px}\n .center{text-align:center}\n\n .note{background:#fff; border:2px dashed var(--primary); border-radius:14px; padding:20px}\n\n .sim-wrap{background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px; box-shadow:var(--shadow)}\n .platforms{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin:10px 0 18px}\n .plat{background:var(--bg);border:2px solid transparent;border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:.2s}\n .plat[aria-pressed=\"true\"]{border-color:var(--primary); background:rgba(252,175,23,.12)}\n .plat .plat-ico{font-size:24px; margin-bottom:6px}\n\n .type-switch{display:flex;gap:10px;justify-content:center;margin:6px 0 16px}\n .type-btn{padding:10px 16px;border-radius:10px;border:2px solid transparent;background:var(--bg);cursor:pointer}\n .type-btn[aria-pressed=\"true\"]{background:var(--primary); border-color:var(--primary); font-weight:700}\n\n .form .row{margin-bottom:14px}\n label{font-weight:700; display:block; margin-bottom:6px}\n .control{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px}\n textarea.control{min-height:120px;resize:vertical}\n\n .preview{display:none;margin-top:18px;border:1px dashed var(--border);border-radius:12px;padding:16px;background:var(--bg)}\n .preview .title{font-weight:800;text-align:center;margin-bottom:12px}\n .preview .item{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px}\n .preview .name{color:var(--primary);font-weight:800;margin-bottom:6px}\n\n .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n\n footer{background:#243447;color:#fff}\n footer .wrap{padding:26px 0;text-align:center}\n footer a{color:var(--primary)}\n\n @media (max-width:520px){\n .cta .btn{width:100%}\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"container wrap\">\n <div class=\"logo\">\u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644<\/div>\n <nav aria-label=\"\u0631\u0648\u0627\u0628\u0637 \u0631\u0626\u064a\u0633\u064a\u0629\">\n <a href=\"#features\">\u0627\u0644\u0645\u0632\u0627\u064a\u0627<\/a>\n <a href=\"#simulator\">\u062c\u0631\u0651\u0628 \u0627\u0644\u0622\u0646<\/a>\n <a href=\"#faq\">\u0627\u0644\u0623\u0633\u0626\u0644\u0629<\/a>\n <\/nav>\n <\/div>\n <\/header>\n\n <section class=\"hero\" id=\"home\">\n <div class=\"container wrap\">\n <h1>\u0643\u0644 \u0633\u0648\u0634\u064a\u0627\u0644\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f<\/h1>\n <p>\u0627\u0631\u0628\u0637 8 \u062d\u0633\u0627\u0628\u0627\u062a (\u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u064a\u0648\u062a\u064a\u0648\u0628\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u0644\u064a\u062c\u0631\u0627\u0645\u060c \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u0633\u0646\u0627\u0628) \u0648\u0627\u0646\u0634\u0631 \u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631 \u0634\u0647\u0631\u064a\u064b\u0627 \u2014 \u0635\u0648\u0631\u060c \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0648\u0646\u0635\u0648\u0635.<\/p>\n <div class=\"cta\">\n <a class=\"btn\" href=\"#simulator\">\u062c\u0631\u0651\u0628 \u0627\u0644\u0623\u062f\u0627\u0629 \u0627\u0644\u0622\u0646<\/a>\n <a class=\"btn outline\" href=\"#features\">\u0627\u0628\u062f\u0623 \u0645\u062c\u0627\u0646\u064b\u0627<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"features\">\n <div class=\"container\">\n <h2>\u0645\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0623\u062f\u0627\u0629<\/h2>\n <p class=\"lead\">\u0645\u0631\u0643\u0651\u0632\u0629 \u0639\u0644\u0649 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0648\u062a\u0634\u062a\u063a\u0644 \u0628\u0645\u0644\u0641 \u0648\u0627\u062d\u062f \u0633\u0631\u064a\u0639.<\/p>\n <div class=\"grid features-grid\">\n <div class=\"card center\">\n <div class=\"icon\">\ud83d\udcf1<\/div>\n <h3>\u0631\u0628\u0637 8 \u062d\u0633\u0627\u0628\u0627\u062a<\/h3>\n <p>\u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f \u062a\u0631\u0628\u0637 \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u064a\u0648\u062a\u064a\u0648\u0628\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u0644\u064a\u062c\u0631\u0627\u0645\u060c \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u0633\u0646\u0627\u0628.<\/p>\n <\/div>\n <div class=\"card center\">\n <div class=\"icon\">\ud83d\udcdd<\/div>\n <h3>\u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631\/\u0634\u0647\u0631<\/h3>\n <p>\u0627\u0646\u0634\u0631 \u0635\u0648\u0631\/\u0641\u064a\u062f\u064a\u0648\/\u0646\u0635\u0648\u0635 \u0628\u0633\u0647\u0648\u0644\u0629 \u0648\u0628\u0646\u0642\u0631\u0629 \u0648\u0627\u062d\u062f\u0629 \u0644\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629.<\/p>\n <\/div>\n <div class=\"card center\">\n <div class=\"icon\">\ud83c\udfaf<\/div>\n <h3>\u0628\u0648\u0633\u062a\u0627\u062a + \u0633\u062a\u0648\u0631\u064a\u0627\u062a<\/h3>\n <p>\u0627\u062e\u062a\u064a\u0627\u0631 \u0646\u0648\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u062d\u0633\u0628 \u0627\u0644\u0645\u0646\u0635\u0629\u060c \u0645\u0639 \u0631\u0627\u0628\u0637 \u0644\u0644\u0633\u062a\u0648\u0631\u064a \u062d\u064a\u062b \u0645\u062f\u0639\u0648\u0645.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"container\">\n <div class=\"note\">\n <strong>\u062a\u0646\u0628\u064a\u0647:<\/strong> \u0627\u0644\u062e\u062f\u0645\u0629 \u0634\u0628\u0647 \u0645\u062c\u0627\u0646\u064a\u0629 \u0648\u0645\u0631\u0643\u0651\u0632\u0629 \u0639\u0644\u0649 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0641\u0642\u0637. \u0644\u0627 \u0645\u064a\u0632\u0627\u062a \u0645\u062f\u0641\u0648\u0639\u0629 \u062d\u0627\u0644\u064a\u064b\u0627.\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"simulator\">\n <div class=\"container\">\n <h2 class=\"center\">\u062c\u0631\u0651\u0628 \u0627\u0644\u0623\u062f\u0627\u0629 \u0627\u0644\u0622\u0646<\/h2>\n <p class=\"lead center\" style=\"margin-bottom:18px\">\u0627\u062e\u062a\u064e\u0631 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0648\u0646\u0648\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0639\u0627\u064a\u0646 \u0642\u0628\u0644 \u0627\u0644\u0646\u0634\u0631 \u0627\u0644\u062a\u062c\u0631\u064a\u0628\u064a.<\/p>\n\n <div class=\"sim-wrap\" role=\"region\" aria-labelledby=\"sim-title\">\n <h3 id=\"sim-title\" style=\"margin-bottom:10px\">\u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u0646\u0635\u0627\u062a<\/h3>\n <div class=\"platforms\" id=\"platforms\" aria-label=\"\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\">\n \n <button type=\"button\" class=\"plat\" data-platform=\"facebook\" aria-pressed=\"false\" aria-label=\"\u0641\u064a\u0633\u0628\u0648\u0643\"><div class=\"plat-ico\">\ud83d\udcd8<\/div>\u0641\u064a\u0633\u0628\u0648\u0643<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"instagram\" aria-pressed=\"false\" aria-label=\"\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\"><div class=\"plat-ico\">\ud83d\udcf7<\/div>\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"telegram\" aria-pressed=\"false\" aria-label=\"\u062a\u0644\u064a\u062c\u0631\u0627\u0645\"><div class=\"plat-ico\">\ud83d\udce2<\/div>\u062a\u0644\u064a\u062c\u0631\u0627\u0645<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"tiktok\" aria-pressed=\"false\" aria-label=\"\u062a\u064a\u0643 \u062a\u0648\u0643\"><div class=\"plat-ico\">\ud83c\udfb5<\/div>\u062a\u064a\u0643 \u062a\u0648\u0643<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"youtube\" aria-pressed=\"false\" aria-label=\"\u064a\u0648\u062a\u064a\u0648\u0628\"><div class=\"plat-ico\">\u25b6\ufe0f<\/div>\u064a\u0648\u062a\u064a\u0648\u0628<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"twitter\" aria-pressed=\"false\" aria-label=\"\u0645\u0646\u0635\u0629 X\"><div class=\"plat-ico\">\ud83d\udd4a\ufe0f<\/div>X<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"linkedin\" aria-pressed=\"false\" aria-label=\"\u0644\u064a\u0646\u0643\u062f\u0625\u0646\"><div class=\"plat-ico\">\ud83d\udcbc<\/div>\u0644\u064a\u0646\u0643\u062f\u0625\u0646<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"whatsapp\" aria-pressed=\"false\" aria-label=\"\u0648\u0627\u062a\u0633\u0627\u0628\"><div class=\"plat-ico\">\ud83d\udc9a<\/div>\u0648\u0627\u062a\u0633\u0627\u0628<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"snapchat\" aria-pressed=\"false\" aria-label=\"\u0633\u0646\u0627\u0628 \u0634\u0627\u062a\"><div class=\"plat-ico\">\ud83d\udc7b<\/div>\u0633\u0646\u0627\u0628 \u0634\u0627\u062a<\/button>\n <\/div>\n\n <div class=\"type-switch\" role=\"tablist\" aria-label=\"\u0646\u0648\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649\">\n <button type=\"button\" id=\"tab-post\" role=\"tab\" class=\"type-btn\" aria-pressed=\"true\" aria-controls=\"form-post\" data-type=\"post\">\u0628\u0648\u0633\u062a\/\u0631\u064a\u0644\u0632<\/button>\n <button type=\"button\" id=\"tab-story\" role=\"tab\" class=\"type-btn\" aria-pressed=\"false\" aria-controls=\"form-story\" data-type=\"story\">\u0633\u062a\u0648\u0631\u064a<\/button>\n <\/div>\n\n <form class=\"form\" id=\"form-post\" aria-labelledby=\"tab-post\">\n <div class=\"row\">\n <label for=\"post-caption\">\u0627\u0644\u0646\u0635 (\u0627\u0644\u0643\u0627\u0628\u0634\u0646)<\/label>\n <textarea id=\"post-caption\" class=\"control\" placeholder=\"\u0627\u0643\u062a\u0628 \u0645\u062d\u062a\u0648\u0649 \u0645\u0646\u0634\u0648\u0631\u0643...\"><\/textarea>\n <\/div>\n <div class=\"row\">\n <label for=\"post-media\">\u0631\u0627\u0628\u0637 \u0635\u0648\u0631\u0629\/\u0641\u064a\u062f\u064a\u0648 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/label>\n <input id=\"post-media\" type=\"url\" class=\"control\" inputmode=\"url\" placeholder=\"https:\/\/example.com\/image.jpg\" \/>\n <\/div>\n <\/form>\n\n <form class=\"form\" id=\"form-story\" aria-labelledby=\"tab-story\" hidden>\n <div class=\"row\">\n <label for=\"story-media\">\u0631\u0627\u0628\u0637 \u0635\u0648\u0631\u0629\/\u0641\u064a\u062f\u064a\u0648 (\u0645\u0637\u0644\u0648\u0628)<\/label>\n <input id=\"story-media\" type=\"url\" required class=\"control\" inputmode=\"url\" placeholder=\"https:\/\/example.com\/story.jpg\" \/>\n <\/div>\n <div class=\"row\">\n <label for=\"story-link\">\u0631\u0627\u0628\u0637 \u0644\u0644\u0633\u062a\u0648\u0631\u064a (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/label>\n <input id=\"story-link\" type=\"url\" class=\"control\" inputmode=\"url\" placeholder=\"https:\/\/example.com\" \/>\n <\/div>\n <\/form>\n\n <div id=\"live\" class=\"sr\" role=\"status\" aria-live=\"polite\"><\/div>\n\n <button id=\"preview\" class=\"btn\" style=\"width:100%; margin-top:6px\">\u0645\u0639\u0627\u064a\u0646\u0629 \u0627\u0644\u0646\u0634\u0631<\/button>\n <div class=\"preview\" id=\"previewBox\" aria-hidden=\"true\">\n <div class=\"title\">\u0645\u0639\u0627\u064a\u0646\u0629 \u0627\u0644\u0646\u0634\u0631<\/div>\n <div id=\"previewList\" class=\"grid\" style=\"grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px\"><\/div>\n <button id=\"publish\" class=\"btn\" style=\"width:100%; margin-top:14px; background:var(--success); border-color:var(--success)\">\u0646\u0634\u0631 \u0627\u0644\u0622\u0646 (\u062a\u062c\u0631\u064a\u0628\u064a)<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"screenshots\">\n <div class=\"container\">\n <h2>\u0644\u0642\u0637\u0627\u062a \u0645\u0646 \u0627\u0644\u0648\u0627\u062c\u0647\u0629<\/h2>\n <div class=\"grid\" style=\"grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:16px\">\n <div class=\"card center\">\u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/div>\n <div class=\"card center\">\u062c\u062f\u0648\u0644\u0629 \u0627\u0644\u0645\u0646\u0634\u0648\u0631\u0627\u062a<\/div>\n <div class=\"card center\">\u062a\u062d\u0644\u064a\u0644\u0627\u062a \u0645\u0628\u0633\u0651\u0637\u0629<\/div>\n <div class=\"card center\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062d\u0633\u0627\u0628\u0627\u062a<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"faq\">\n <div class=\"container\">\n <h2>\u0623\u0633\u0626\u0644\u0629 \u0634\u0627\u0626\u0639\u0629<\/h2>\n <div class=\"grid\" style=\"grid-template-columns:1fr; margin-top:10px\">\n <div class=\"card\">\n <strong>\u0643\u0645 \u062d\u0633\u0627\u0628 \u0623\u0642\u062f\u0631 \u0623\u0631\u0628\u0637\u061f<\/strong>\n <p class=\"lead\">\u062d\u062a\u0649 8 \u0645\u0646\u0635\u0627\u062a: \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u064a\u0648\u062a\u064a\u0648\u0628\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u0644\u064a\u062c\u0631\u0627\u0645\u060c \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u0633\u0646\u0627\u0628.<\/p>\n <\/div>\n <div class=\"card\">\n <strong>\u062d\u062f \u0627\u0644\u0646\u0634\u0631 \u0627\u0644\u0634\u0647\u0631\u064a\u061f<\/strong>\n <p class=\"lead\">400 \u0645\u0646\u0634\u0648\u0631\/\u0634\u0647\u0631 \u0644\u0644\u0635\u0648\u0631 \u0648\u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0648\u0627\u0644\u0646\u0635\u0648\u0635.<\/p>\n <\/div>\n <div class=\"card\">\n <strong>\u0623\u0643\u062f\u0631 \u0623\u0646\u0634\u0631 \u0633\u062a\u0648\u0631\u064a\u0627\u062a \u0645\u0639 \u0631\u0648\u0627\u0628\u0637\u061f<\/strong>\n <p class=\"lead\">\u0625\u064a\u060c \u062a\u0636\u064a\u0641 \u0631\u0627\u0628\u0637 \u0644\u0644\u0633\u062a\u0648\u0631\u064a \u0628\u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0644\u064a \u062a\u062f\u0639\u0645 \u0647\u0627\u0644\u0645\u064a\u0632\u0629.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer>\n <div class=\"container wrap\" style=\"flex-direction:column;gap:8px\">\n <div>\u0644\u0644\u062f\u0639\u0645: <a href=\"mailto:support@social-platform.com\">support@social-platform.com<\/a><\/div>\n <div style=\"opacity:.8\">\u00a9 <span id=\"year\"><\/span> \u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u2014 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629<\/div>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ \u062d\u0627\u0644\u0629 \u0639\u0627\u0645\u0629\n const state = { type: 'post', platforms: new Set() };\n\n \/\/ \u0639\u0646\u0627\u0635\u0631 DOM\n const platformsEl = document.getElementById('platforms');\n const tabPost = document.getElementById('tab-post');\n const tabStory = document.getElementById('tab-story');\n const formPost = document.getElementById('form-post');\n const formStory = document.getElementById('form-story');\n const previewBtn = document.getElementById('preview');\n const previewBox = document.getElementById('previewBox');\n const previewList = document.getElementById('previewList');\n const publishBtn = document.getElementById('publish');\n const live = document.getElementById('live');\n\n \/\/ \u0633\u0646\u0629 \u0627\u0644\u0641\u0648\u062a\u0631\n document.getElementById('year').textContent = new Date().getFullYear();\n\n \/\/ \u062a\u0628\u062f\u064a\u0644 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0645\u0646\u0635\u0627\u062a (\u0632\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u062a\u0628\u062f\u064a\u0644)\n platformsEl.addEventListener('click', (e)=>{\n const btn = e.target.closest('.plat');\n if(!btn) return;\n const p = btn.dataset.platform;\n const pressed = btn.getAttribute('aria-pressed') === 'true';\n btn.setAttribute('aria-pressed', String(!pressed));\n if(pressed){ state.platforms.delete(p); } else { state.platforms.add(p); }\n live.textContent = `\u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629: ${[...state.platforms].length}`;\n });\n\n \/\/ \u0645\u0641\u0627\u062a\u064a\u062d \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0644\u0644\u0645\u0646\u0635\u0627\u062a (\u0625\u062f\u062e\u0627\u0644\/\u0645\u0633\u0627\u0641\u0629)\n platformsEl.addEventListener('keydown', (e)=>{\n if((e.key === 'Enter' || e.key === ' ') && e.target.classList.contains('plat')){\n e.preventDefault(); e.target.click();\n }\n });\n\n \/\/ \u062a\u0628\u0648\u064a\u0628 \u0646\u0648\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649\n function setType(type){\n state.type = type;\n const isPost = type === 'post';\n tabPost.setAttribute('aria-pressed', String(isPost));\n tabStory.setAttribute('aria-pressed', String(!isPost));\n formPost.hidden = !isPost;\n formStory.hidden = isPost;\n }\n tabPost.addEventListener('click', ()=> setType('post'));\n tabStory.addEventListener('click', ()=> setType('story'));\n\n \/\/ \u0623\u062f\u0648\u0627\u062a \u0645\u0633\u0627\u0639\u062f\u0629\n const names = { facebook:'\u0641\u064a\u0633\u0628\u0648\u0643', instagram:'\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645', telegram:'\u062a\u0644\u064a\u062c\u0631\u0627\u0645', tiktok:'\u062a\u064a\u0643 \u062a\u0648\u0643', youtube:'\u064a\u0648\u062a\u064a\u0648\u0628', twitter:'X', linkedin:'\u0644\u064a\u0646\u0643\u062f\u0625\u0646', whatsapp:'\u0648\u0627\u062a\u0633\u0627\u0628', snapchat:'\u0633\u0646\u0627\u0628 \u0634\u0627\u062a' };\n const getName = (k)=> names[k] || k;\n\n \/\/ \u0645\u0639\u0627\u064a\u0646\u0629\n previewBtn.addEventListener('click', ()=>{\n if(state.platforms.size === 0){ alert('\u0627\u062e\u062a\u064e\u0631 \u0645\u0646\u0635\u0629 \u0648\u0627\u062d\u062f\u0629 \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0644'); return; }\n\n \/\/ \u062a\u062d\u0642\u0642 \u0645\u0628\u0643\u0651\u0631 \u0644\u0646\u0648\u0639 \u0627\u0644\u0633\u062a\u0648\u0631\u064a\n if(state.type === 'story'){\n const media = document.getElementById('story-media').value.trim();\n if(!media){ alert('\u0627\u0644\u0633\u062a\u0648\u0631\u064a \u064a\u062a\u0637\u0644\u0628 \u0631\u0627\u0628\u0637 \u0635\u0648\u0631\u0629\/\u0641\u064a\u062f\u064a\u0648'); return; }\n }\n\n \/\/ \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629\n previewList.innerHTML = '';\n const items = [];\n for(const p of state.platforms){\n const item = document.createElement('div');\n item.className = 'item';\n const title = document.createElement('div');\n title.className = 'name';\n title.textContent = getName(p);\n const body = document.createElement('div');\n\n if(state.type === 'post'){\n const caption = document.getElementById('post-caption').value.trim() || '(\u0628\u062f\u0648\u0646 \u0646\u0635)';\n const media = document.getElementById('post-media').value.trim();\n body.innerHTML = `\n <div><strong>\u0646\u0648\u0639:<\/strong> \u0628\u0648\u0633\u062a\/\u0631\u064a\u0644\u0632<\/div>\n <div><strong>\u0627\u0644\u0646\u0635:<\/strong> ${escapeHtml(caption)}<\/div>\n ${media ? `<div><strong>\u0627\u0644\u0648\u0633\u0627\u0626\u0637:<\/strong> ${escapeHtml(media)}<\/div>` : ''}\n `;\n } else {\n const media = document.getElementById('story-media').value.trim();\n const link = document.getElementById('story-link').value.trim();\n body.innerHTML = `\n <div><strong>\u0646\u0648\u0639:<\/strong> \u0633\u062a\u0648\u0631\u064a<\/div>\n <div><strong>\u0627\u0644\u0648\u0633\u0627\u0626\u0637:<\/strong> ${escapeHtml(media)}<\/div>\n ${link ? `<div><strong>\u0627\u0644\u0631\u0627\u0628\u0637:<\/strong> ${escapeHtml(link)}<\/div>` : ''}\n `;\n }\n\n item.appendChild(title);\n item.appendChild(body);\n items.push(item);\n }\n\n items.forEach(el=> previewList.appendChild(el));\n previewBox.style.display = 'block';\n previewBox.setAttribute('aria-hidden','false');\n previewBox.scrollIntoView({behavior:'smooth', block:'start'});\n });\n\n \/\/ \u0646\u0634\u0631 \u062a\u062c\u0631\u064a\u0628\u064a\n publishBtn.addEventListener('click', ()=>{\n if(state.platforms.size === 0){ alert('\u0645\u0627\u0643\u0648 \u0645\u0646\u0635\u0627\u062a \u0645\u062e\u062a\u0627\u0631\u0629'); return; }\n alert('\u062a\u0645 \u0627\u0644\u0646\u0634\u0631 \u0627\u0644\u062a\u062c\u0631\u064a\u0628\u064a! (\u0641\u064a \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0643\u0627\u0645\u0644\u0629 \u064a\u062a\u0645 \u0627\u0644\u0627\u0631\u0633\u0627\u0644 \u0627\u0644\u0641\u0639\u0644\u064a)');\n resetAll();\n });\n\n \/\/ \u062a\u0645\u0631\u064a\u0631 \u0633\u0644\u0633 \u0644\u0644\u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629\n document.querySelectorAll('a[href^=\"#\"]').forEach(a=>{\n a.addEventListener('click', e=>{\n const id = a.getAttribute('href');\n if(id === '#') return;\n const el = document.querySelector(id);\n if(el){ e.preventDefault(); window.scrollTo({top: el.offsetTop - 12, behavior:'smooth'}); }\n });\n });\n\n \/\/ \u062f\u0648\u0627\u0644 \u0645\u0633\u0627\u0639\u062f\u0629\n function resetAll(){\n \/\/ \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\n document.querySelectorAll('.plat').forEach(b=> b.setAttribute('aria-pressed','false'));\n state.platforms.clear();\n \/\/ \u0627\u0644\u0646\u0645\u0627\u0630\u062c\n document.getElementById('post-caption').value = '';\n document.getElementById('post-media').value = '';\n document.getElementById('story-media').value = '';\n document.getElementById('story-link').value = '';\n \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629\n previewBox.style.display = 'none';\n previewBox.setAttribute('aria-hidden','true');\n live.textContent = '\u062a\u0645\u062a \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u0639\u064a\u064a\u0646';\n \/\/ \u0631\u062c\u0648\u0639 \u0644\u0646\u0648\u0639 \u0628\u0648\u0633\u062a\n setType('post');\n window.scrollTo({top: document.getElementById('simulator').offsetTop - 12, behavior:'smooth'});\n }\n\n \/\/ \u0645\u0646\u0639 \u0625\u062f\u0631\u0627\u062c HTML \u0645\u0646 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 (\u0633\u0644\u0627\u0645\u0629 \u0628\u0633\u064a\u0637\u0629)\n function escapeHtml(s){\n return s.replace(\/[&<>\\\"']\/g, (c)=> ({'&':'&','<':'<','>':'>','\\\"':'"','\\\\'':'''}[c]));\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u2014 \u0625\u062f\u0627\u0631\u0629 \u0643\u0644 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f \u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u0627\u0644\u0645\u0632\u0627\u064a\u0627 \u062c\u0631\u0651\u0628 \u0627\u0644\u0622\u0646 \u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0643\u0644 \u0633\u0648\u0634\u064a\u0627\u0644\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-190","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":4,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/190\/revisions"}],"predecessor-version":[{"id":194,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/190\/revisions\/194"}],"wp:attachment":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/media?parent=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":190,"date":"2025-11-11T23:32:03","date_gmt":"2025-11-11T23:32:03","guid":{"rendered":"https:\/\/iraqi-engineer.org\/?page_id=190"},"modified":"2025-11-11T23:58:08","modified_gmt":"2025-11-11T23:58:08","slug":"121212-2","status":"publish","type":"page","link":"https:\/\/iraqi-engineer.org\/index.php\/121212-2\/","title":{"rendered":"\u0646\u0645\u0648\u0630\u062c \u0633\u0648\u0634\u064a\u0627\u0644"},"content":{"rendered":"\n\n\n\n \n \n \u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u2014 \u0625\u062f\u0627\u0631\u0629 \u0643\u0644 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f<\/title>\n <meta name=\"description\" content=\"\u0627\u0631\u0628\u0637 8 \u0645\u0646\u0635\u0627\u062a (\u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u064a\u0648\u062a\u064a\u0648\u0628\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u0644\u064a\u062c\u0631\u0627\u0645\u060c \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u0633\u0646\u0627\u0628) \u0648\u0627\u0646\u0634\u0631 \u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631 \u0634\u0647\u0631\u064a\u064b\u0627 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f.\" \/>\n\n \n <meta property=\"og:title\" content=\"\u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u2014 \u0625\u062f\u0627\u0631\u0629 \u0643\u0644 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f\" \/>\n <meta property=\"og:description\" content=\"\u0627\u0631\u0628\u0637 8 \u0645\u0646\u0635\u0627\u062a \u0648\u0627\u0646\u0634\u0631 \u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631 \u0634\u0647\u0631\u064a\u064b\u0627 \u2014 \u0635\u0648\u0631\u060c \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0648\u0646\u0635\u0648\u0635.\" \/>\n <meta property=\"og:type\" content=\"website\" \/>\n <meta property=\"og:image\" content=\"https:\/\/via.placeholder.com\/1200x630.png?text=Social+Platform\" \/>\n\n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"Product\",\n \"name\": \"\u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644\",\n \"description\": \"\u0623\u062f\u0627\u0629 \u0645\u0628\u0633\u0651\u0637\u0629 \u0644\u0631\u0628\u0637 8 \u062d\u0633\u0627\u0628\u0627\u062a \u0648\u0646\u0634\u0631 \u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631 \u0634\u0647\u0631\u064a\u064b\u0627.\",\n \"brand\": {\"@type\": \"Brand\", \"name\": \"Social Platform\"},\n \"isAccessibleForFree\": true,\n \"offers\": {\n \"@type\": \"Offer\",\n \"priceCurrency\": \"USD\",\n \"price\": \"0\",\n \"availability\": \"https:\/\/schema.org\/InStock\"\n },\n \"aggregateRating\": {\n \"@type\": \"AggregateRating\",\n \"ratingValue\": \"4.8\",\n \"reviewCount\": \"124\"\n }\n }\n <\/script>\n\n <style>\n :root{\n --primary: #FCAF17; \/* \u0634\u0645\u0633 \u0625\u0644\u0643\u062a\u0631\u064a\u0643 *\/\n --bg: #f6f7fb;\n --text: #222;\n --muted: #667085;\n --card: #fff;\n --border: #e7e7ee;\n --shadow: 0 10px 24px rgba(0,0,0,.06);\n --success: #28a745;\n }\n *{box-sizing:border-box;margin:0;padding:0}\n body{font-family: system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\"; background:var(--bg); color:var(--text); line-height:1.7}\n a{color:inherit}\n .container{max-width:1200px;margin:auto;padding:0 20px}\n header{background:#fff; box-shadow:0 1px 12px rgba(0,0,0,.04)}\n header .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 0}\n .logo{font-weight:800;color:var(--primary);letter-spacing:.3px}\n nav a{margin-inline:10px;text-decoration:none;color:#344054}\n .btn{display:inline-block;padding:12px 20px;border-radius:10px;border:2px solid var(--primary);background:var(--primary);color:#1a1a1a;font-weight:700;text-decoration:none;transition:.25s;cursor:pointer}\n .btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}\n .btn.outline{background:transparent;color:#1a1a1a}\n\n .hero{background:#fff}\n .hero .wrap{padding:64px 0;text-align:center}\n .hero h1{font-size:clamp(28px,4vw,44px);line-height:1.2;margin-bottom:12px}\n .hero p{color:var(--muted);max-width:780px;margin:0 auto 24px}\n .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}\n\n section{padding:64px 0}\n h2{font-size:clamp(22px,3.2vw,32px);margin-bottom:12px}\n p.lead{color:var(--muted)}\n\n .grid{display:grid;gap:22px}\n .features-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:28px}\n .card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px; box-shadow:var(--shadow)}\n .icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:rgba(252,175,23,.12);font-size:22px}\n .center{text-align:center}\n\n .note{background:#fff; border:2px dashed var(--primary); border-radius:14px; padding:20px}\n\n .sim-wrap{background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px; box-shadow:var(--shadow)}\n .platforms{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin:10px 0 18px}\n .plat{background:var(--bg);border:2px solid transparent;border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:.2s}\n .plat[aria-pressed=\"true\"]{border-color:var(--primary); background:rgba(252,175,23,.12)}\n .plat .plat-ico{font-size:24px; margin-bottom:6px}\n\n .type-switch{display:flex;gap:10px;justify-content:center;margin:6px 0 16px}\n .type-btn{padding:10px 16px;border-radius:10px;border:2px solid transparent;background:var(--bg);cursor:pointer}\n .type-btn[aria-pressed=\"true\"]{background:var(--primary); border-color:var(--primary); font-weight:700}\n\n .form .row{margin-bottom:14px}\n label{font-weight:700; display:block; margin-bottom:6px}\n .control{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px}\n textarea.control{min-height:120px;resize:vertical}\n\n .preview{display:none;margin-top:18px;border:1px dashed var(--border);border-radius:12px;padding:16px;background:var(--bg)}\n .preview .title{font-weight:800;text-align:center;margin-bottom:12px}\n .preview .item{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px}\n .preview .name{color:var(--primary);font-weight:800;margin-bottom:6px}\n\n .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n\n footer{background:#243447;color:#fff}\n footer .wrap{padding:26px 0;text-align:center}\n footer a{color:var(--primary)}\n\n @media (max-width:520px){\n .cta .btn{width:100%}\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"container wrap\">\n <div class=\"logo\">\u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644<\/div>\n <nav aria-label=\"\u0631\u0648\u0627\u0628\u0637 \u0631\u0626\u064a\u0633\u064a\u0629\">\n <a href=\"#features\">\u0627\u0644\u0645\u0632\u0627\u064a\u0627<\/a>\n <a href=\"#simulator\">\u062c\u0631\u0651\u0628 \u0627\u0644\u0622\u0646<\/a>\n <a href=\"#faq\">\u0627\u0644\u0623\u0633\u0626\u0644\u0629<\/a>\n <\/nav>\n <\/div>\n <\/header>\n\n <section class=\"hero\" id=\"home\">\n <div class=\"container wrap\">\n <h1>\u0643\u0644 \u0633\u0648\u0634\u064a\u0627\u0644\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f<\/h1>\n <p>\u0627\u0631\u0628\u0637 8 \u062d\u0633\u0627\u0628\u0627\u062a (\u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u064a\u0648\u062a\u064a\u0648\u0628\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u0644\u064a\u062c\u0631\u0627\u0645\u060c \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u0633\u0646\u0627\u0628) \u0648\u0627\u0646\u0634\u0631 \u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631 \u0634\u0647\u0631\u064a\u064b\u0627 \u2014 \u0635\u0648\u0631\u060c \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a \u0648\u0646\u0635\u0648\u0635.<\/p>\n <div class=\"cta\">\n <a class=\"btn\" href=\"#simulator\">\u062c\u0631\u0651\u0628 \u0627\u0644\u0623\u062f\u0627\u0629 \u0627\u0644\u0622\u0646<\/a>\n <a class=\"btn outline\" href=\"#features\">\u0627\u0628\u062f\u0623 \u0645\u062c\u0627\u0646\u064b\u0627<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"features\">\n <div class=\"container\">\n <h2>\u0645\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0623\u062f\u0627\u0629<\/h2>\n <p class=\"lead\">\u0645\u0631\u0643\u0651\u0632\u0629 \u0639\u0644\u0649 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0648\u062a\u0634\u062a\u063a\u0644 \u0628\u0645\u0644\u0641 \u0648\u0627\u062d\u062f \u0633\u0631\u064a\u0639.<\/p>\n <div class=\"grid features-grid\">\n <div class=\"card center\">\n <div class=\"icon\">\ud83d\udcf1<\/div>\n <h3>\u0631\u0628\u0637 8 \u062d\u0633\u0627\u0628\u0627\u062a<\/h3>\n <p>\u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f \u062a\u0631\u0628\u0637 \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u064a\u0648\u062a\u064a\u0648\u0628\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u0644\u064a\u062c\u0631\u0627\u0645\u060c \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u0633\u0646\u0627\u0628.<\/p>\n <\/div>\n <div class=\"card center\">\n <div class=\"icon\">\ud83d\udcdd<\/div>\n <h3>\u062d\u062a\u0649 400 \u0645\u0646\u0634\u0648\u0631\/\u0634\u0647\u0631<\/h3>\n <p>\u0627\u0646\u0634\u0631 \u0635\u0648\u0631\/\u0641\u064a\u062f\u064a\u0648\/\u0646\u0635\u0648\u0635 \u0628\u0633\u0647\u0648\u0644\u0629 \u0648\u0628\u0646\u0642\u0631\u0629 \u0648\u0627\u062d\u062f\u0629 \u0644\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629.<\/p>\n <\/div>\n <div class=\"card center\">\n <div class=\"icon\">\ud83c\udfaf<\/div>\n <h3>\u0628\u0648\u0633\u062a\u0627\u062a + \u0633\u062a\u0648\u0631\u064a\u0627\u062a<\/h3>\n <p>\u0627\u062e\u062a\u064a\u0627\u0631 \u0646\u0648\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u062d\u0633\u0628 \u0627\u0644\u0645\u0646\u0635\u0629\u060c \u0645\u0639 \u0631\u0627\u0628\u0637 \u0644\u0644\u0633\u062a\u0648\u0631\u064a \u062d\u064a\u062b \u0645\u062f\u0639\u0648\u0645.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"container\">\n <div class=\"note\">\n <strong>\u062a\u0646\u0628\u064a\u0647:<\/strong> \u0627\u0644\u062e\u062f\u0645\u0629 \u0634\u0628\u0647 \u0645\u062c\u0627\u0646\u064a\u0629 \u0648\u0645\u0631\u0643\u0651\u0632\u0629 \u0639\u0644\u0649 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0641\u0642\u0637. \u0644\u0627 \u0645\u064a\u0632\u0627\u062a \u0645\u062f\u0641\u0648\u0639\u0629 \u062d\u0627\u0644\u064a\u064b\u0627.\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"simulator\">\n <div class=\"container\">\n <h2 class=\"center\">\u062c\u0631\u0651\u0628 \u0627\u0644\u0623\u062f\u0627\u0629 \u0627\u0644\u0622\u0646<\/h2>\n <p class=\"lead center\" style=\"margin-bottom:18px\">\u0627\u062e\u062a\u064e\u0631 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0648\u0646\u0648\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0639\u0627\u064a\u0646 \u0642\u0628\u0644 \u0627\u0644\u0646\u0634\u0631 \u0627\u0644\u062a\u062c\u0631\u064a\u0628\u064a.<\/p>\n\n <div class=\"sim-wrap\" role=\"region\" aria-labelledby=\"sim-title\">\n <h3 id=\"sim-title\" style=\"margin-bottom:10px\">\u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u0646\u0635\u0627\u062a<\/h3>\n <div class=\"platforms\" id=\"platforms\" aria-label=\"\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\">\n \n <button type=\"button\" class=\"plat\" data-platform=\"facebook\" aria-pressed=\"false\" aria-label=\"\u0641\u064a\u0633\u0628\u0648\u0643\"><div class=\"plat-ico\">\ud83d\udcd8<\/div>\u0641\u064a\u0633\u0628\u0648\u0643<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"instagram\" aria-pressed=\"false\" aria-label=\"\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\"><div class=\"plat-ico\">\ud83d\udcf7<\/div>\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"telegram\" aria-pressed=\"false\" aria-label=\"\u062a\u0644\u064a\u062c\u0631\u0627\u0645\"><div class=\"plat-ico\">\ud83d\udce2<\/div>\u062a\u0644\u064a\u062c\u0631\u0627\u0645<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"tiktok\" aria-pressed=\"false\" aria-label=\"\u062a\u064a\u0643 \u062a\u0648\u0643\"><div class=\"plat-ico\">\ud83c\udfb5<\/div>\u062a\u064a\u0643 \u062a\u0648\u0643<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"youtube\" aria-pressed=\"false\" aria-label=\"\u064a\u0648\u062a\u064a\u0648\u0628\"><div class=\"plat-ico\">\u25b6\ufe0f<\/div>\u064a\u0648\u062a\u064a\u0648\u0628<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"twitter\" aria-pressed=\"false\" aria-label=\"\u0645\u0646\u0635\u0629 X\"><div class=\"plat-ico\">\ud83d\udd4a\ufe0f<\/div>X<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"linkedin\" aria-pressed=\"false\" aria-label=\"\u0644\u064a\u0646\u0643\u062f\u0625\u0646\"><div class=\"plat-ico\">\ud83d\udcbc<\/div>\u0644\u064a\u0646\u0643\u062f\u0625\u0646<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"whatsapp\" aria-pressed=\"false\" aria-label=\"\u0648\u0627\u062a\u0633\u0627\u0628\"><div class=\"plat-ico\">\ud83d\udc9a<\/div>\u0648\u0627\u062a\u0633\u0627\u0628<\/button>\n <button type=\"button\" class=\"plat\" data-platform=\"snapchat\" aria-pressed=\"false\" aria-label=\"\u0633\u0646\u0627\u0628 \u0634\u0627\u062a\"><div class=\"plat-ico\">\ud83d\udc7b<\/div>\u0633\u0646\u0627\u0628 \u0634\u0627\u062a<\/button>\n <\/div>\n\n <div class=\"type-switch\" role=\"tablist\" aria-label=\"\u0646\u0648\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649\">\n <button type=\"button\" id=\"tab-post\" role=\"tab\" class=\"type-btn\" aria-pressed=\"true\" aria-controls=\"form-post\" data-type=\"post\">\u0628\u0648\u0633\u062a\/\u0631\u064a\u0644\u0632<\/button>\n <button type=\"button\" id=\"tab-story\" role=\"tab\" class=\"type-btn\" aria-pressed=\"false\" aria-controls=\"form-story\" data-type=\"story\">\u0633\u062a\u0648\u0631\u064a<\/button>\n <\/div>\n\n <form class=\"form\" id=\"form-post\" aria-labelledby=\"tab-post\">\n <div class=\"row\">\n <label for=\"post-caption\">\u0627\u0644\u0646\u0635 (\u0627\u0644\u0643\u0627\u0628\u0634\u0646)<\/label>\n <textarea id=\"post-caption\" class=\"control\" placeholder=\"\u0627\u0643\u062a\u0628 \u0645\u062d\u062a\u0648\u0649 \u0645\u0646\u0634\u0648\u0631\u0643...\"><\/textarea>\n <\/div>\n <div class=\"row\">\n <label for=\"post-media\">\u0631\u0627\u0628\u0637 \u0635\u0648\u0631\u0629\/\u0641\u064a\u062f\u064a\u0648 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/label>\n <input id=\"post-media\" type=\"url\" class=\"control\" inputmode=\"url\" placeholder=\"https:\/\/example.com\/image.jpg\" \/>\n <\/div>\n <\/form>\n\n <form class=\"form\" id=\"form-story\" aria-labelledby=\"tab-story\" hidden>\n <div class=\"row\">\n <label for=\"story-media\">\u0631\u0627\u0628\u0637 \u0635\u0648\u0631\u0629\/\u0641\u064a\u062f\u064a\u0648 (\u0645\u0637\u0644\u0648\u0628)<\/label>\n <input id=\"story-media\" type=\"url\" required class=\"control\" inputmode=\"url\" placeholder=\"https:\/\/example.com\/story.jpg\" \/>\n <\/div>\n <div class=\"row\">\n <label for=\"story-link\">\u0631\u0627\u0628\u0637 \u0644\u0644\u0633\u062a\u0648\u0631\u064a (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/label>\n <input id=\"story-link\" type=\"url\" class=\"control\" inputmode=\"url\" placeholder=\"https:\/\/example.com\" \/>\n <\/div>\n <\/form>\n\n <div id=\"live\" class=\"sr\" role=\"status\" aria-live=\"polite\"><\/div>\n\n <button id=\"preview\" class=\"btn\" style=\"width:100%; margin-top:6px\">\u0645\u0639\u0627\u064a\u0646\u0629 \u0627\u0644\u0646\u0634\u0631<\/button>\n <div class=\"preview\" id=\"previewBox\" aria-hidden=\"true\">\n <div class=\"title\">\u0645\u0639\u0627\u064a\u0646\u0629 \u0627\u0644\u0646\u0634\u0631<\/div>\n <div id=\"previewList\" class=\"grid\" style=\"grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px\"><\/div>\n <button id=\"publish\" class=\"btn\" style=\"width:100%; margin-top:14px; background:var(--success); border-color:var(--success)\">\u0646\u0634\u0631 \u0627\u0644\u0622\u0646 (\u062a\u062c\u0631\u064a\u0628\u064a)<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"screenshots\">\n <div class=\"container\">\n <h2>\u0644\u0642\u0637\u0627\u062a \u0645\u0646 \u0627\u0644\u0648\u0627\u062c\u0647\u0629<\/h2>\n <div class=\"grid\" style=\"grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:16px\">\n <div class=\"card center\">\u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/div>\n <div class=\"card center\">\u062c\u062f\u0648\u0644\u0629 \u0627\u0644\u0645\u0646\u0634\u0648\u0631\u0627\u062a<\/div>\n <div class=\"card center\">\u062a\u062d\u0644\u064a\u0644\u0627\u062a \u0645\u0628\u0633\u0651\u0637\u0629<\/div>\n <div class=\"card center\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062d\u0633\u0627\u0628\u0627\u062a<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"faq\">\n <div class=\"container\">\n <h2>\u0623\u0633\u0626\u0644\u0629 \u0634\u0627\u0626\u0639\u0629<\/h2>\n <div class=\"grid\" style=\"grid-template-columns:1fr; margin-top:10px\">\n <div class=\"card\">\n <strong>\u0643\u0645 \u062d\u0633\u0627\u0628 \u0623\u0642\u062f\u0631 \u0623\u0631\u0628\u0637\u061f<\/strong>\n <p class=\"lead\">\u062d\u062a\u0649 8 \u0645\u0646\u0635\u0627\u062a: \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u064a\u0648\u062a\u064a\u0648\u0628\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u0644\u064a\u062c\u0631\u0627\u0645\u060c \u0648\u0627\u062a\u0633\u0627\u0628\u060c \u0633\u0646\u0627\u0628.<\/p>\n <\/div>\n <div class=\"card\">\n <strong>\u062d\u062f \u0627\u0644\u0646\u0634\u0631 \u0627\u0644\u0634\u0647\u0631\u064a\u061f<\/strong>\n <p class=\"lead\">400 \u0645\u0646\u0634\u0648\u0631\/\u0634\u0647\u0631 \u0644\u0644\u0635\u0648\u0631 \u0648\u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0648\u0627\u0644\u0646\u0635\u0648\u0635.<\/p>\n <\/div>\n <div class=\"card\">\n <strong>\u0623\u0643\u062f\u0631 \u0623\u0646\u0634\u0631 \u0633\u062a\u0648\u0631\u064a\u0627\u062a \u0645\u0639 \u0631\u0648\u0627\u0628\u0637\u061f<\/strong>\n <p class=\"lead\">\u0625\u064a\u060c \u062a\u0636\u064a\u0641 \u0631\u0627\u0628\u0637 \u0644\u0644\u0633\u062a\u0648\u0631\u064a \u0628\u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0644\u064a \u062a\u062f\u0639\u0645 \u0647\u0627\u0644\u0645\u064a\u0632\u0629.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer>\n <div class=\"container wrap\" style=\"flex-direction:column;gap:8px\">\n <div>\u0644\u0644\u062f\u0639\u0645: <a href=\"mailto:support@social-platform.com\">support@social-platform.com<\/a><\/div>\n <div style=\"opacity:.8\">\u00a9 <span id=\"year\"><\/span> \u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u2014 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629<\/div>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ \u062d\u0627\u0644\u0629 \u0639\u0627\u0645\u0629\n const state = { type: 'post', platforms: new Set() };\n\n \/\/ \u0639\u0646\u0627\u0635\u0631 DOM\n const platformsEl = document.getElementById('platforms');\n const tabPost = document.getElementById('tab-post');\n const tabStory = document.getElementById('tab-story');\n const formPost = document.getElementById('form-post');\n const formStory = document.getElementById('form-story');\n const previewBtn = document.getElementById('preview');\n const previewBox = document.getElementById('previewBox');\n const previewList = document.getElementById('previewList');\n const publishBtn = document.getElementById('publish');\n const live = document.getElementById('live');\n\n \/\/ \u0633\u0646\u0629 \u0627\u0644\u0641\u0648\u062a\u0631\n document.getElementById('year').textContent = new Date().getFullYear();\n\n \/\/ \u062a\u0628\u062f\u064a\u0644 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0645\u0646\u0635\u0627\u062a (\u0632\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u062a\u0628\u062f\u064a\u0644)\n platformsEl.addEventListener('click', (e)=>{\n const btn = e.target.closest('.plat');\n if(!btn) return;\n const p = btn.dataset.platform;\n const pressed = btn.getAttribute('aria-pressed') === 'true';\n btn.setAttribute('aria-pressed', String(!pressed));\n if(pressed){ state.platforms.delete(p); } else { state.platforms.add(p); }\n live.textContent = `\u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629: ${[...state.platforms].length}`;\n });\n\n \/\/ \u0645\u0641\u0627\u062a\u064a\u062d \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0644\u0644\u0645\u0646\u0635\u0627\u062a (\u0625\u062f\u062e\u0627\u0644\/\u0645\u0633\u0627\u0641\u0629)\n platformsEl.addEventListener('keydown', (e)=>{\n if((e.key === 'Enter' || e.key === ' ') && e.target.classList.contains('plat')){\n e.preventDefault(); e.target.click();\n }\n });\n\n \/\/ \u062a\u0628\u0648\u064a\u0628 \u0646\u0648\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649\n function setType(type){\n state.type = type;\n const isPost = type === 'post';\n tabPost.setAttribute('aria-pressed', String(isPost));\n tabStory.setAttribute('aria-pressed', String(!isPost));\n formPost.hidden = !isPost;\n formStory.hidden = isPost;\n }\n tabPost.addEventListener('click', ()=> setType('post'));\n tabStory.addEventListener('click', ()=> setType('story'));\n\n \/\/ \u0623\u062f\u0648\u0627\u062a \u0645\u0633\u0627\u0639\u062f\u0629\n const names = { facebook:'\u0641\u064a\u0633\u0628\u0648\u0643', instagram:'\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645', telegram:'\u062a\u0644\u064a\u062c\u0631\u0627\u0645', tiktok:'\u062a\u064a\u0643 \u062a\u0648\u0643', youtube:'\u064a\u0648\u062a\u064a\u0648\u0628', twitter:'X', linkedin:'\u0644\u064a\u0646\u0643\u062f\u0625\u0646', whatsapp:'\u0648\u0627\u062a\u0633\u0627\u0628', snapchat:'\u0633\u0646\u0627\u0628 \u0634\u0627\u062a' };\n const getName = (k)=> names[k] || k;\n\n \/\/ \u0645\u0639\u0627\u064a\u0646\u0629\n previewBtn.addEventListener('click', ()=>{\n if(state.platforms.size === 0){ alert('\u0627\u062e\u062a\u064e\u0631 \u0645\u0646\u0635\u0629 \u0648\u0627\u062d\u062f\u0629 \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0644'); return; }\n\n \/\/ \u062a\u062d\u0642\u0642 \u0645\u0628\u0643\u0651\u0631 \u0644\u0646\u0648\u0639 \u0627\u0644\u0633\u062a\u0648\u0631\u064a\n if(state.type === 'story'){\n const media = document.getElementById('story-media').value.trim();\n if(!media){ alert('\u0627\u0644\u0633\u062a\u0648\u0631\u064a \u064a\u062a\u0637\u0644\u0628 \u0631\u0627\u0628\u0637 \u0635\u0648\u0631\u0629\/\u0641\u064a\u062f\u064a\u0648'); return; }\n }\n\n \/\/ \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629\n previewList.innerHTML = '';\n const items = [];\n for(const p of state.platforms){\n const item = document.createElement('div');\n item.className = 'item';\n const title = document.createElement('div');\n title.className = 'name';\n title.textContent = getName(p);\n const body = document.createElement('div');\n\n if(state.type === 'post'){\n const caption = document.getElementById('post-caption').value.trim() || '(\u0628\u062f\u0648\u0646 \u0646\u0635)';\n const media = document.getElementById('post-media').value.trim();\n body.innerHTML = `\n <div><strong>\u0646\u0648\u0639:<\/strong> \u0628\u0648\u0633\u062a\/\u0631\u064a\u0644\u0632<\/div>\n <div><strong>\u0627\u0644\u0646\u0635:<\/strong> ${escapeHtml(caption)}<\/div>\n ${media ? `<div><strong>\u0627\u0644\u0648\u0633\u0627\u0626\u0637:<\/strong> ${escapeHtml(media)}<\/div>` : ''}\n `;\n } else {\n const media = document.getElementById('story-media').value.trim();\n const link = document.getElementById('story-link').value.trim();\n body.innerHTML = `\n <div><strong>\u0646\u0648\u0639:<\/strong> \u0633\u062a\u0648\u0631\u064a<\/div>\n <div><strong>\u0627\u0644\u0648\u0633\u0627\u0626\u0637:<\/strong> ${escapeHtml(media)}<\/div>\n ${link ? `<div><strong>\u0627\u0644\u0631\u0627\u0628\u0637:<\/strong> ${escapeHtml(link)}<\/div>` : ''}\n `;\n }\n\n item.appendChild(title);\n item.appendChild(body);\n items.push(item);\n }\n\n items.forEach(el=> previewList.appendChild(el));\n previewBox.style.display = 'block';\n previewBox.setAttribute('aria-hidden','false');\n previewBox.scrollIntoView({behavior:'smooth', block:'start'});\n });\n\n \/\/ \u0646\u0634\u0631 \u062a\u062c\u0631\u064a\u0628\u064a\n publishBtn.addEventListener('click', ()=>{\n if(state.platforms.size === 0){ alert('\u0645\u0627\u0643\u0648 \u0645\u0646\u0635\u0627\u062a \u0645\u062e\u062a\u0627\u0631\u0629'); return; }\n alert('\u062a\u0645 \u0627\u0644\u0646\u0634\u0631 \u0627\u0644\u062a\u062c\u0631\u064a\u0628\u064a! (\u0641\u064a \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0643\u0627\u0645\u0644\u0629 \u064a\u062a\u0645 \u0627\u0644\u0627\u0631\u0633\u0627\u0644 \u0627\u0644\u0641\u0639\u0644\u064a)');\n resetAll();\n });\n\n \/\/ \u062a\u0645\u0631\u064a\u0631 \u0633\u0644\u0633 \u0644\u0644\u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629\n document.querySelectorAll('a[href^=\"#\"]').forEach(a=>{\n a.addEventListener('click', e=>{\n const id = a.getAttribute('href');\n if(id === '#') return;\n const el = document.querySelector(id);\n if(el){ e.preventDefault(); window.scrollTo({top: el.offsetTop - 12, behavior:'smooth'}); }\n });\n });\n\n \/\/ \u062f\u0648\u0627\u0644 \u0645\u0633\u0627\u0639\u062f\u0629\n function resetAll(){\n \/\/ \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\n document.querySelectorAll('.plat').forEach(b=> b.setAttribute('aria-pressed','false'));\n state.platforms.clear();\n \/\/ \u0627\u0644\u0646\u0645\u0627\u0630\u062c\n document.getElementById('post-caption').value = '';\n document.getElementById('post-media').value = '';\n document.getElementById('story-media').value = '';\n document.getElementById('story-link').value = '';\n \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629\n previewBox.style.display = 'none';\n previewBox.setAttribute('aria-hidden','true');\n live.textContent = '\u062a\u0645\u062a \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u0639\u064a\u064a\u0646';\n \/\/ \u0631\u062c\u0648\u0639 \u0644\u0646\u0648\u0639 \u0628\u0648\u0633\u062a\n setType('post');\n window.scrollTo({top: document.getElementById('simulator').offsetTop - 12, behavior:'smooth'});\n }\n\n \/\/ \u0645\u0646\u0639 \u0625\u062f\u0631\u0627\u062c HTML \u0645\u0646 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 (\u0633\u0644\u0627\u0645\u0629 \u0628\u0633\u064a\u0637\u0629)\n function escapeHtml(s){\n return s.replace(\/[&<>\\\"']\/g, (c)=> ({'&':'&','<':'<','>':'>','\\\"':'"','\\\\'':'''}[c]));\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u2014 \u0625\u062f\u0627\u0631\u0629 \u0643\u0644 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f \u0645\u0646\u0635\u0629 \u0633\u0648\u0634\u064a\u0627\u0644 \u0627\u0644\u0645\u0632\u0627\u064a\u0627 \u062c\u0631\u0651\u0628 \u0627\u0644\u0622\u0646 \u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0643\u0644 \u0633\u0648\u0634\u064a\u0627\u0644\u0643 \u0645\u0646 \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-190","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":4,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/190\/revisions"}],"predecessor-version":[{"id":194,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/190\/revisions\/194"}],"wp:attachment":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/media?parent=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}