Bitrix24 \u2014 Power Demo (Unofficial)<\/title>\n <meta name=\"description\" content=\"A single-file, interactive HTML demo showcasing the breadth of Bitrix24: CRM, tasks, automation, contact center, and dashboards.\" \/>\n <style>\n \/* ====== Design System ====== *\/\n :root {\n --bg: #0b1220;\n --bg-soft: #101a2e;\n --ink: #e9eefc;\n --muted: #b7c0d9;\n --brand: #2ed3ba; \/* aqua *\/\n --brand-2: #7c8cff; \/* indigo *\/\n --accent: #ffd166; \/* honey *\/\n --danger: #ff6b6b;\n --success: #80ed99;\n --card: rgba(255,255,255,0.06);\n --border: rgba(255,255,255,0.15);\n --shadow: 0 10px 30px rgba(0,0,0,0.35);\n --radius: 20px;\n }\n * { box-sizing: border-box; }\n html, body { height: 100%; }\n body {\n margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial;\n color: var(--ink); background: radial-gradient(1200px 600px at 80% -10%, #1c2b52, transparent 70%),\n radial-gradient(900px 500px at -10% 10%, #133a39, transparent 60%),\n linear-gradient(180deg, #0b1220, #09101d 60%);\n letter-spacing: .2px; overflow-x: hidden;\n }\n a { color: inherit; text-decoration: none; }\n .container { width: min(1200px, 92%); margin-inline: auto; }\n .glass { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(8px); box-shadow: var(--shadow); }\n .btn { display:inline-flex; gap:.6rem; align-items:center; padding:.9rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: #ffffff10; color: var(--ink); font-weight: 600; cursor: pointer; transition: transform .1s ease, background .2s ease, border-color .2s ease; }\n .btn:hover { transform: translateY(-1px); border-color: #ffffff44; background: #ffffff18; }\n .btn.brand { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#041018; border: none; box-shadow: 0 10px 20px rgba(46,211,186,.35); }\n .btn.ghost { background: #ffffff08; }\n .chip { padding:.35rem .7rem; border-radius: 999px; font-size:.8rem; color:#041018; background: linear-gradient(90deg, #9ff9ec, #9ea9ff); font-weight:700; letter-spacing:.3px; }\n .tag { font-size:.8rem; padding:.3rem .6rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); }\n .grid { display: grid; gap: 1.2rem; }\n .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }\n .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }\n .flex { display:flex; }\n .center { display:grid; place-items:center; }\n\n \/* ====== Navbar ====== *\/\n .nav { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(8,12,24,.9), rgba(8,12,24,.2)); border-bottom:1px solid var(--border); backdrop-filter: blur(6px); }\n .nav .row { display:flex; align-items:center; justify-content:space-between; padding: .8rem 0; }\n .logo { display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.5px; }\n .logo .dot { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 20px rgba(124,140,255,.6); }\n .nav .actions { display:flex; gap:.6rem; align-items:center; }\n\n \/* ====== Hero ====== *\/\n .hero { position: relative; padding: 6rem 0 4rem; overflow: hidden; }\n .halo { position: absolute; inset: -20% -10% auto auto; width: 900px; height: 900px; background: radial-gradient(closest-side, #214, transparent 75%); filter: blur(50px); opacity: .35; pointer-events:none; }\n .hero h1 { font-size: clamp(2rem, 6.2vw, 4rem); line-height: 1.05; margin: 0 0 1rem; }\n .hero p { color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.25rem); margin: 0 0 1.5rem; }\n .hero .cta { display:flex; gap:.8rem; flex-wrap: wrap; }\n .hero .marquee { margin-top: 2rem; display:flex; gap:1rem; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }\n .hero .marquee .pill { white-space: nowrap; border:1px dashed var(--border); padding:.6rem .9rem; border-radius:999px; opacity:.85; animation: slide 20s linear infinite; }\n @keyframes slide { from{ transform: translateX(0); } to{ transform: translateX(-100%); } }\n\n \/* ====== Section headers ====== *\/\n .section { padding: 3.5rem 0; }\n .section h2 { font-size: clamp(1.4rem, 4.8vw, 2rem); margin: 0 0 .6rem; }\n .section p.lead { color: var(--muted); margin: 0 0 1.2rem; }\n\n \/* ====== Cards ====== *\/\n .card { padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #0e1628, #0c1423); box-shadow: var(--shadow); }\n .card h3 { margin:.2rem 0 .5rem; font-size:1.2rem; }\n .kicker { font-size:.75rem; letter-spacing:.3px; color: var(--muted); text-transform: uppercase; }\n\n \/* ====== CRM Pipeline Demo ====== *\/\n .kanban { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }\n .column { background: #0d1628; border:1px dashed var(--border); border-radius: var(--radius); padding: .8rem; min-height: 230px; }\n .col-title { font-weight:700; display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }\n .deal { background: #0f1a30; border:1px solid var(--border); border-radius: 14px; padding:.6rem .7rem; margin:.5rem 0; box-shadow: 0 6px 16px rgba(0,0,0,.25); cursor: grab; }\n .deal small { color: var(--muted); }\n .ghost { outline:2px dashed var(--brand-2); outline-offset: 3px; }\n\n \/* ====== Automation Flow ====== *\/\n .flow { position: relative; min-height: 300px; background: #0c1526; border:1px dashed var(--border); border-radius: var(--radius); }\n .node { position:absolute; padding:.8rem 1rem; border-radius: 14px; background:#0f1a31; border:1px solid var(--border); box-shadow: var(--shadow); }\n .node.active { outline: 2px solid var(--brand); }\n .connector { position:absolute; height:2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow:0 0 10px rgba(124,140,255,.6); }\n\n \/* ====== Chat & Contact Center ====== *\/\n .chat { display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem; }\n .thread { height: 280px; overflow:auto; padding: .8rem; border-radius: 14px; background: #0f1a30; border:1px solid var(--border); }\n .msg { max-width: 70%; padding:.6rem .8rem; border-radius: 14px; margin:.35rem 0; }\n .me { margin-left:auto; background: #13264a; }\n .bot { background: #142033; }\n\n \/* ====== Dashboard ====== *\/\n .dash { display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem; }\n .stat { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; border:1px solid var(--border); border-radius: 14px; background:#0f1930; }\n .mini-chart { width: 100%; height: 120px; }\n\n \/* ====== Pricing ====== *\/\n .pricing { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; align-items: stretch; }\n .plan { padding: 1.2rem; border:1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #0c1526, #0b1220); display:grid; gap:.7rem; }\n .plan.pop { outline: 2px solid var(--brand); box-shadow: 0 0 0 12px #2ed3ba1a; }\n .price { font-size: 2rem; font-weight:800; }\n\n \/* ====== Footer ====== *\/\n footer { padding: 3rem 0 5rem; color: var(--muted); }\n\n \/* ====== Responsive ====== *\/\n @media (max-width: 1000px) {\n .grid-3 { grid-template-columns: 1fr; }\n .grid-2, .kanban, .chat, .dash, .pricing { grid-template-columns: 1fr; }\n .hero { padding-top: 4.5rem; }\n }\n <\/style>\n<\/head>\n<body>\n \n <nav class=\"nav\">\n <div class=\"container row\">\n <div class=\"logo\">\n <span class=\"dot\"><\/span>\n <span>\u0628\u062a\u0631\u0643\u0633\u0662\u0664 <span style=\"color:var(--brand);\">Power Demo<\/span><\/span>\n <\/div>\n <div class=\"actions\">\n <span class=\"tag\">CRM \u2022 Tasks \u2022 Contact Center \u2022 Automation<\/span>\n <button class=\"btn ghost\" id=\"toggleTheme\" title=\"Toggle Theme\">\ud83c\udf17 Theme<\/button>\n <button class=\"btn brand\" id=\"openModal\">Start Free<\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <header class=\"hero\">\n <div class=\"halo\"><\/div>\n <div class=\"container\">\n <span class=\"chip\">UNOFFICIAL SHOWCASE<\/span>\n <h1>Operate your entire business in one place.<\/h1>\n <p>Meet <strong>\u0628\u062a\u0631\u0643\u0633\u0662\u0664<\/strong>: a unified workspace for CRM, projects, contact center, websites, and automation. This single HTML file demonstrates key concepts with interactive mini\u2011demos\u2014no frameworks or external libraries.<\/p>\n <div class=\"cta\">\n <a class=\"btn brand\" href=\"#crm\">Explore CRM<\/a>\n <a class=\"btn ghost\" href=\"#dash\">View Dashboard<\/a>\n <a class=\"btn ghost\" href=\"#automation\">\u0627\u0644\u0623\u062a\u0645\u062a\u0629<\/a>\n <\/div>\n <div class=\"hero marquee\" aria-hidden=\"true\">\n <div class=\"pill\">Leads \u2192 Deals \u2192 Invoices<\/div>\n <div class=\"pill\">Tasks & Projects<\/div>\n <div class=\"pill\">Telephony & Omnichannel<\/div>\n <div class=\"pill\">Marketing Automation<\/div>\n <div class=\"pill\">Docs & Drive<\/div>\n <div class=\"pill\">Calendars & HR<\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <section class=\"section\">\n <div class=\"container grid grid-3\">\n <article class=\"card\">\n <div class=\"kicker\">\u0625\u062f\u0627\u0631\u0629 \u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621 CRM<\/div>\n <h3>From lead to loyal customer<\/h3>\n <p class=\"lead\">Collect, qualify, nurture, and win\u2014then onboard and support from a single system.<\/p>\n <div class=\"flex\" style=\"gap:.5rem; flex-wrap:wrap;\">\n <span class=\"tag\">Leads<\/span>\n <span class=\"tag\">Deals<\/span>\n <span class=\"tag\">Invoices<\/span>\n <span class=\"tag\">Catalog<\/span>\n <span class=\"tag\">Email & Calls<\/span>\n <\/div>\n <\/article>\n <article class=\"card\">\n <div class=\"kicker\">Tasks<\/div>\n <h3>Projects that actually ship<\/h3>\n <p class=\"lead\">Plan sprints, assign work, and track progress with Gantt, Kanban, or List\u2014your pick.<\/p>\n <div class=\"flex\" style=\"gap:.5rem; flex-wrap:wrap;\">\n <span class=\"tag\">Gantt<\/span>\n <span class=\"tag\">Kanban<\/span>\n <span class=\"tag\">Time tracking<\/span>\n <span class=\"tag\">Workflows<\/span>\n <\/div>\n <\/article>\n <article class=\"card\">\n <div class=\"kicker\">\u0645\u0631\u0643\u0632 \u0627\u0644\u0627\u062a\u0635\u0627\u0644<\/div>\n <h3>Omnichannel in a click<\/h3>\n <p class=\"lead\">WhatsApp, phone, live chat, and social in one queue\u2014auto\u2011route and auto\u2011reply.<\/p>\n <div class=\"flex\" style=\"gap:.5rem; flex-wrap:wrap;\">\n <span class=\"tag\">\u0648\u0627\u062a\u0633\u0627\u0628<\/span>\n <span class=\"tag\">Telephony<\/span>\n <span class=\"tag\">\u0645\u062a\u062d\u062f\u062b \u0631\u0648\u0628\u0648\u062a<\/span>\n <span class=\"tag\">CSAT<\/span>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n \n <section id=\"crm\" class=\"section\">\n <div class=\"container\">\n <h2>CRM Pipeline \u2014 Drag & Drop Deals<\/h2>\n <p class=\"lead\">Add sample deals and drag them across stages. This mimics Bitrix24’s Kanban CRM.<\/p>\n <div class=\"kanban\" id=\"kanban\">\n <div class=\"column\" data-stage=\"New\">\n <div class=\"col-title\">New <span class=\"tag\" id=\"count-New\">0<\/span><\/div>\n <\/div>\n <div class=\"column\" data-stage=\"Qualified\">\n <div class=\"col-title\">Qualified <span class=\"tag\" id=\"count-Qualified\">0<\/span><\/div>\n <\/div>\n <div class=\"column\" data-stage=\"Proposal\">\n <div class=\"col-title\">Proposal <span class=\"tag\" id=\"count-Proposal\">0<\/span><\/div>\n <\/div>\n <div class=\"column\" data-stage=\"Won\">\n <div class=\"col-title\">Won <span class=\"tag\" id=\"count-Won\">0<\/span><\/div>\n <\/div>\n <\/div>\n <div style=\"margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap;\">\n <button class=\"btn\" id=\"addDeal\">\u2795 Add Deal<\/button>\n <button class=\"btn\" id=\"shuffleDeals\">\ud83d\udd00 Auto-Advance<\/button>\n <button class=\"btn\" id=\"clearDeals\">\ud83d\uddd1\ufe0f Clear<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"automation\" class=\"section\">\n <div class=\"container\">\n <h2>Automation Builder \u2014 Visual Flow<\/h2>\n <p class=\"lead\">Click nodes to activate the flow. Triggers hand off to actions and conditions.<\/p>\n <div class=\"flow\" id=\"flow\">\n <div class=\"node\" id=\"n1\" style=\"left:4%; top:22%;\">Trigger: New Lead<\/div>\n <div class=\"node\" id=\"n2\" style=\"left:33%; top:22%;\">Condition: Budget \u2265 $5k<\/div>\n <div class=\"node\" id=\"n3\" style=\"left:62%; top:8%;\">Action: Assign to AE<\/div>\n <div class=\"node\" id=\"n4\" style=\"left:62%; top:38%;\">Action: Send Intro Email<\/div>\n <span class=\"connector\" style=\"left:13%; top:32%; width:22%;\"><\/span>\n <span class=\"connector\" style=\"left:43%; top:26%; width:17%; transform: rotate(-15deg);\"><\/span>\n <span class=\"connector\" style=\"left:43%; top:36%; width:17%; transform: rotate(15deg);\"><\/span>\n <\/div>\n <div style=\"margin-top:.8rem; display:flex; gap:.6rem;\">\n <button class=\"btn\" id=\"runFlow\">\u25b6\ufe0f Run<\/button>\n <button class=\"btn\" id=\"resetFlow\">\u21a9\ufe0f Reset<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container chat\">\n <div class=\"card\">\n <div class=\"kicker\">Live Chat<\/div>\n <h3>Omnichannel Widget<\/h3>\n <div class=\"thread\" id=\"thread\" aria-live=\"polite\"><\/div>\n <div style=\"display:flex; gap:.5rem; margin-top:.6rem;\">\n <input id=\"chatInput\" class=\"glass\" placeholder=\"Type a message\u2026\" style=\"flex:1; height:42px; padding:0 .8rem; color:var(--ink);\" \/>\n <button id=\"sendBtn\" class=\"btn brand\">\u0625\u0631\u0633\u0627\u0644<\/button>\n <\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"kicker\">Smart Routing<\/div>\n <h3>Queue & SLA<\/h3>\n <p class=\"lead\">Incoming chats are routed to the first available agent. SLA timers ensure nobody waits.<\/p>\n <div class=\"grid grid-2\">\n <div class=\"stat\"><span>Avg. First Response<\/span><strong id=\"sla1\">\u2014<\/strong><\/div>\n <div class=\"stat\"><span>CSAT (last 100)<\/span><strong id=\"csat\">\u2014<\/strong><\/div>\n <\/div>\n <p style=\"color:var(--muted); margin-top:.6rem;\">Tip: Type <code>\/help<\/code> in chat to see quick replies.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"dash\" class=\"section\">\n <div class=\"container dash\">\n <div class=\"card\">\n <div class=\"kicker\">Dashboard<\/div>\n <h3>Team Performance<\/h3>\n <div class=\"grid grid-3\" style=\"grid-template-columns: repeat(3,1fr);\">\n <div class=\"stat\"><span>Deals Won<\/span><strong id=\"kpiDeals\">0<\/strong><\/div>\n <div class=\"stat\"><span>Revenue<\/span><strong id=\"kpiRev\">$0<\/strong><\/div>\n <div class=\"stat\"><span>Tasks Done<\/span><strong id=\"kpiTasks\">0<\/strong><\/div>\n <\/div>\n <svg class=\"mini-chart\" viewbox=\"0 0 100 40\" preserveaspectratio=\"none\" id=\"spark\">\n <polyline fill=\"none\" stroke=\"url(#g)\" stroke-width=\"2\" points=\"\"\/>\n <defs>\n <lineargradient id=\"g\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\n <stop offset=\"0%\" stop-color=\"var(--brand)\"\/>\n <stop offset=\"100%\" stop-color=\"var(--brand-2)\"\/>\n <\/lineargradient>\n <\/defs>\n <\/svg>\n <\/div>\n <div class=\"card\">\n <div class=\"kicker\">Workload<\/div>\n <h3>Capacity Ring<\/h3>\n <div class=\"center\" style=\"height:170px;\">\n <svg viewbox=\"0 0 120 120\" width=\"170\" height=\"170\">\n <circle cx=\"60\" cy=\"60\" r=\"48\" stroke=\"#203050\" stroke-width=\"14\" fill=\"none\"\/>\n <circle id=\"ring\" cx=\"60\" cy=\"60\" r=\"48\" stroke=\"url(#g)\" stroke-width=\"14\" fill=\"none\" stroke-linecap=\"round\"\n stroke-dasharray=\"0 999\" transform=\"rotate(-90 60 60)\"\/>\n <\/svg>\n <\/div>\n <div class=\"center\"><span class=\"tag\">Live utilization <strong id=\"util\">0%<\/strong><\/span><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container\">\n <h2>Pricing \u2014 Simple & Transparent<\/h2>\n <p class=\"lead\">Toggle billing period. This is a fictional demo.<\/p>\n <div style=\"display:flex; gap:.6rem; align-items:center; margin-bottom: .8rem;\">\n <span class=\"tag\">Billing:<\/span>\n <button class=\"btn\" id=\"toggleBilling\">Monthly<\/button>\n <\/div>\n <div class=\"pricing\">\n <div class=\"plan\">\n <div class=\"kicker\">Starter<\/div>\n <div class=\"price\" data-base=\"0\">$0<\/div>\n <div style=\"color:var(--muted)\">For small teams that want essentials.<\/div>\n <ul style=\"margin:.2rem 0 0 1rem; line-height:1.8;\">\n <li>CRM & Tasks<\/li>\n <li>Live Chat<\/li>\n <li>5 GB Drive<\/li>\n <\/ul>\n <button class=\"btn brand\">\u0625\u0628\u062f\u0623 \u0645\u0639\u0646\u0627<\/button>\n <\/div>\n <div class=\"plan pop\">\n <div class=\"kicker\">Business<\/div>\n <div class=\"price\" data-base=\"39\">$39<\/div>\n <div style=\"color:var(--muted)\">Automation & advanced reporting.<\/div>\n <ul style=\"margin:.2rem 0 0 1rem; line-height:1.8;\">\n <li>All Starter features<\/li>\n <li>Automations<\/li>\n <li>Telephony & Omnichannel<\/li>\n <\/ul>\n <button class=\"btn brand\">Try Business<\/button>\n <\/div>\n <div class=\"plan\">\n <div class=\"kicker\">Enterprise<\/div>\n <div class=\"price\" data-base=\"99\">$99<\/div>\n <div style=\"color:var(--muted)\">Scale with SSO, SAML, and audit.<\/div>\n <ul style=\"margin:.2rem 0 0 1rem; line-height:1.8;\">\n <li>All Business features<\/li>\n <li>SSO\/SAML, Audit Log<\/li>\n <li>Advanced Security<\/li>\n <\/ul>\n <button class=\"btn brand\">Contact Sales<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <div id=\"modal\" style=\"position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55);\">\n <div class=\"glass\" style=\"width:min(520px, 92%); padding:1.2rem;\">\n <div class=\"flex\" style=\"justify-content:space-between; align-items:center; gap:1rem;\">\n <h3 style=\"margin:0\">Start Your Free Workspace<\/h3>\n <button class=\"btn\" id=\"closeModal\">\u2716<\/button>\n <\/div>\n <p class=\"lead\">Create a test portal to explore CRM, projects, contact center, and more.<\/p>\n <form id=\"signupForm\" class=\"grid\" style=\"gap:.7rem;\" action=\"\">\n <input class=\"glass\" name=\"name\" placeholder=\"Your name\" required style=\"height:44px; padding:0 .8rem; color:var(--ink);\" \/>\n <input class=\"glass\" name=\"email\" type=\"email\" placeholder=\"Work email\" required style=\"height:44px; padding:0 .8rem; color:var(--ink);\" \/>\n <select class=\"glass\" name=\"team\" required style=\"height:44px; padding:0 .8rem; color:var(--ink); background:#0f1a30;\">\n <option value=\"\" hidden>Team size<\/option>\n <option>1-5<\/option>\n <option>6-20<\/option>\n <option>21-100<\/option>\n <option>100+<\/option>\n <\/select>\n <button class=\"btn brand\" type=\"submit\">Create Workspace<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"ar\"\/><\/form>\n <p id=\"signupResult\" style=\"display:none; margin-top:.6rem;\" class=\"lead\"><\/p>\n <\/div>\n <\/div>\n\n <footer class=\"container\">\n <p>Made with \u2764\ufe0f for a vivid demo. Bitrix24 is a trademark of its respective owners. This page is an <strong>unofficial<\/strong> showcase.<\/p>\n <\/footer>\n\n <script>\n \/\/ ====== THEME TOGGLE ======\n const toggleBtn = document.getElementById('toggleTheme');\n toggleBtn.addEventListener('click', () => {\n const dark = document.documentElement.dataset.theme !== 'light';\n if (dark) {\n document.documentElement.dataset.theme = 'light';\n \/\/ quick light palette\n document.documentElement.style.setProperty('--bg', '#f6f8ff');\n document.documentElement.style.setProperty('--bg-soft', '#eef2ff');\n document.documentElement.style.setProperty('--ink', '#0b1220');\n document.documentElement.style.setProperty('--muted', '#3b4766');\n document.documentElement.style.setProperty('--card', 'rgba(0,0,0,0.04)');\n document.documentElement.style.setProperty('--border', 'rgba(0,0,0,0.12)');\n document.body.style.background = 'linear-gradient(180deg, #ffffff, #eef2ff 60%)';\n } else {\n document.documentElement.dataset.theme = 'dark';\n document.documentElement.style.cssText = '';\n location.reload(); \/\/ simplest way to restore original gradients\n }\n });\n\n \/\/ ====== KANBAN DEMO ======\n const kanban = document.getElementById('kanban');\n const counts = { New:0, Qualified:0, Proposal:0, Won:0 };\n function updateCounts(){ for(const k in counts){ document.getElementById('count-'+k).textContent = document.querySelectorAll(`.column[data-stage=\"${k}\"] .deal`).length; } }\n let id = 1;\n function makeDeal(){\n const el = document.createElement('div');\n el.className = 'deal';\n el.draggable = true;\n el.dataset.amount = (Math.floor(Math.random()*9)+1) * 1000;\n el.innerHTML = `<strong>Deal #${id++}<\/strong><br><small>$${el.dataset.amount} \u2022 ACME Co.<\/small>`;\n el.addEventListener('dragstart', e => { e.dataTransfer.setData('text\/plain', 'deal'); e.dataTransfer.setDragImage(el, 10, 10); setTimeout(()=>el.classList.add('ghost'), 0); window.__drag = el; });\n el.addEventListener('dragend', ()=> el.classList.remove('ghost'));\n return el;\n }\n document.getElementById('addDeal').addEventListener('click',() => { document.querySelector('.column[data-stage=\"New\"]').appendChild(makeDeal()); updateCounts(); animateKpis(); });\n document.getElementById('clearDeals').addEventListener('click',() => { document.querySelectorAll('.deal').forEach(d=>d.remove()); updateCounts(); document.getElementById('kpiDeals').textContent = 0; document.getElementById('kpiRev').textContent = '$0'; document.getElementById('kpiTasks').textContent = 0; drawSpark([]); setRing(0); });\n document.getElementById('shuffleDeals').addEventListener('click',() => {\n const stages = ['New','Qualified','Proposal','Won'];\n document.querySelectorAll('.deal').forEach(d => {\n const i = Math.min(stages.indexOf(d.closest('.column').dataset.stage)+ (Math.random()<.6?1:0), 3);\n document.querySelector(`.column[data-stage=\"${stages[i]}\"]`).appendChild(d);\n });\n updateCounts(); animateKpis();\n });\n document.querySelectorAll('.column').forEach(col => {\n col.addEventListener('dragover', e => e.preventDefault());\n col.addEventListener('drop', e => { e.preventDefault(); if(window.__drag){ col.appendChild(window.__drag); updateCounts(); animateKpis(); } });\n });\n\n \/\/ ====== AUTOMATION FLOW ======\n const nodes = ['n1','n2','n3','n4'].map(id => document.getElementById(id));\n nodes.forEach(n => n.addEventListener('click', ()=> n.classList.toggle('active')));\n document.getElementById('runFlow').addEventListener('click', async () => {\n for (const n of nodes){ n.classList.add('active'); await new Promise(r=>setTimeout(r, 320)); }\n });\n document.getElementById('resetFlow').addEventListener('click', ()=> nodes.forEach(n=>n.classList.remove('active')));\n\n \/\/ ====== CHAT DEMO ======\n const thread = document.getElementById('thread');\n const input = document.getElementById('chatInput');\n const sendBtn = document.getElementById('sendBtn');\n function pushMsg(txt, mine=false){\n const p = document.createElement('div'); p.className = 'msg '+(mine?'me':'bot'); p.textContent = txt; thread.appendChild(p); thread.scrollTop = thread.scrollHeight;\n }\n const replies = {\n '\/help': 'Try: pricing, status, agent, call me',\n 'pricing': 'Plans: Starter $0, Business $39, Enterprise $99 (demo).',\n 'status': 'All systems nominal. CRM API latency: 82ms. Contacts synced: 12,948.',\n 'agent': 'Routing you to the first available agent\u2026 SLA 40s.',\n 'call me': 'Please share your phone. We will call you shortly.'\n };\n function handleSend(){\n const v = input.value.trim(); if(!v) return; pushMsg(v, true); input.value = '';\n const key = Object.keys(replies).find(k => v.toLowerCase().includes(k));\n setTimeout(()=> pushMsg(replies[key] || 'Thanks! A human will join shortly.'), 350);\n \/\/ tweak KPIs\n animateKpis();\n randomizeSLA();\n }\n sendBtn.addEventListener('click', handleSend);\n input.addEventListener('keydown', e => { if(e.key==='Enter') handleSend(); });\n\n \/\/ ====== DASHBOARD WIDGETS ======\n const kpiDeals = document.getElementById('kpiDeals');\n const kpiRev = document.getElementById('kpiRev');\n const kpiTasks = document.getElementById('kpiTasks');\n function animateTo(el, to, prefix='', suffix=''){ const from = parseFloat((el.textContent||'0').replace(\/[^0-9.]\/g,'')) || 0; const steps = 24; let i=0; const d = (to-from)\/steps; const t = setInterval(()=>{ i++; const v = Math.round((from + d*i)*10)\/10; el.textContent = prefix + (el===kpiRev? v.toLocaleString(): Math.round(v)) + suffix; if(i>=steps) clearInterval(t); }, 18); }\n function animateKpis(){\n const deals = document.querySelectorAll('.column[data-stage=\"Won\"] .deal');\n const sum = [...deals].reduce((s,d)=> s + Number(d.dataset.amount), 0);\n animateTo(kpiDeals, deals.length);\n animateTo(kpiRev, sum, '$');\n animateTo(kpiTasks, Math.max(0, Math.round(sum\/500)));\n drawSpark([...document.querySelectorAll('.deal')].map((d,i)=> (Number(d.dataset.amount)\/1000) + i%5));\n setRing(Math.min(100, 20 + (deals.length*15)));\n }\n function drawSpark(data){\n const poly = document.querySelector('#spark polyline');\n if(!data || !data.length){ poly.setAttribute('points',''); return; }\n const max = Math.max(...data), min = Math.min(...data);\n const points = data.map((v,i)=>{\n const x = (i\/(data.length-1))*100; const y = 40 - ((v-min)\/(max-min+0.0001))*36 - 2; return `${x.toFixed(2)},${y.toFixed(2)}`;\n }).join(' ');\n poly.setAttribute('points', points);\n }\n function setRing(pct){\n const C = Math.PI*96; const dash = (C*pct\/100).toFixed(1);\n document.getElementById('ring').setAttribute('stroke-dasharray', `${dash} ${999}`);\n document.getElementById('util').textContent = `${Math.round(pct)}%`;\n }\n\n \/\/ seed a few deals for visuals\n ['New','Qualified','Proposal'].forEach((stage, i)=>{\n const col = document.querySelector(`.column[data-stage=\"${stage}\"]`);\n for(let j=0;j< (i+1); j++){ col.appendChild(makeDeal()); }\n });\n updateCounts(); animateKpis(); randomizeSLA();\n\n \/\/ ====== SLA & CSAT ======\n function randomizeSLA(){\n const sla = (20 + Math.random()*60) | 0; document.getElementById('sla1').textContent = sla + 's';\n const cs = (90 + Math.random()*9).toFixed(1) + '%'; document.getElementById('csat').textContent = cs;\n }\n\n \/\/ ====== BILLING TOGGLE ======\n let yearly = false;\n document.getElementById('toggleBilling').addEventListener('click', (e)=>{\n yearly = !yearly; e.target.textContent = yearly ? 'Yearly (save 20%)' : 'Monthly';\n document.querySelectorAll('.price').forEach(p => {\n const base = Number(p.dataset.base);\n const val = yearly ? Math.round(base*12*0.8) : base; \/\/ simple demo math\n p.textContent = '$' + val;\n });\n });\n\n \/\/ ====== MODAL ======\n const modal = document.getElementById('modal');\n document.getElementById('openModal').addEventListener('click', ()=> modal.style.display = 'flex');\n document.getElementById('closeModal').addEventListener('click', ()=> modal.style.display = 'none');\n document.getElementById('signupForm').addEventListener('submit', (e)=>{\n e.preventDefault(); const data = new FormData(e.target);\n const name = data.get('name'); const email = data.get('email'); const team = data.get('team');\n document.getElementById('signupResult').style.display = 'block';\n document.getElementById('signupResult').textContent = `\u2714\ufe0f Workspace created for ${name} (${email}) \u2014 Team ${team}. Check your inbox! (demo)`;\n e.target.reset();\n });\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Bitrix24 \u2014 Power Demo (Unofficial) Bitrix24 Power Demo CRM \u2022 Tasks \u2022 Contact Center \u2022 Automation \ud83c\udf17 Theme Start Free UNOFFICIAL SHOWCASE Operate your entire business in one place. Meet Bitrix24: a unified workspace for CRM, projects, contact center, websites, and automation. This single HTML file demonstrates key concepts with interactive mini\u2011demos\u2014no frameworks or external […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-783","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>BITRIX24 - Rawaj Tech<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rawajtech.com\/ar\/bitrix24-3\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BITRIX24 - Rawaj Tech\" \/>\n<meta property=\"og:description\" content=\"Bitrix24 \u2014 Power Demo (Unofficial) Bitrix24 Power Demo CRM \u2022 Tasks \u2022 Contact Center \u2022 Automation \ud83c\udf17 Theme Start Free UNOFFICIAL SHOWCASE Operate your entire business in one place. Meet Bitrix24: a unified workspace for CRM, projects, contact center, websites, and automation. This single HTML file demonstrates key concepts with interactive mini\u2011demos\u2014no frameworks or external […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rawajtech.com\/ar\/bitrix24-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Rawaj Tech\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/rawajtech\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-26T18:50:15+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@rawajtech\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u062a\u0627\u0646\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rawajtech.com\/bitrix24-3\/\",\"url\":\"https:\/\/rawajtech.com\/bitrix24-3\/\",\"name\":\"BITRIX24 - Rawaj Tech\",\"isPartOf\":{\"@id\":\"https:\/\/rawajtech.com\/#website\"},\"datePublished\":\"2025-08-26T18:50:13+00:00\",\"dateModified\":\"2025-08-26T18:50:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rawajtech.com\/bitrix24-3\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rawajtech.com\/bitrix24-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rawajtech.com\/bitrix24-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rawajtech.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"BITRIX24\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rawajtech.com\/#website\",\"url\":\"https:\/\/rawajtech.com\/\",\"name\":\"Rawaj Tech\",\"description\":\"Just One Click!\",\"publisher\":{\"@id\":\"https:\/\/rawajtech.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rawajtech.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/rawajtech.com\/#organization\",\"name\":\"Rawaj Tech\",\"url\":\"https:\/\/rawajtech.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/rawajtech.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/rawajtech.com\/wp-content\/uploads\/2022\/08\/rawaj-logo-ai.png\",\"contentUrl\":\"https:\/\/rawajtech.com\/wp-content\/uploads\/2022\/08\/rawaj-logo-ai.png\",\"width\":1488,\"height\":528,\"caption\":\"Rawaj Tech\"},\"image\":{\"@id\":\"https:\/\/rawajtech.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"http:\/\/facebook.com\/rawajtech\",\"https:\/\/x.com\/rawajtech\",\"http:\/\/instagram.com\/rawajtech\/\"]}]}<\/script>\n","yoast_head_json":{"title":"BITRIX24 - Rawaj Tech","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rawajtech.com\/ar\/bitrix24-3\/","og_locale":"ar_AR","og_type":"article","og_title":"BITRIX24 - Rawaj Tech","og_description":"Bitrix24 \u2014 Power Demo (Unofficial) Bitrix24 Power Demo CRM \u2022 Tasks \u2022 Contact Center \u2022 Automation \ud83c\udf17 Theme Start Free UNOFFICIAL SHOWCASE Operate your entire business in one place. Meet Bitrix24: a unified workspace for CRM, projects, contact center, websites, and automation. This single HTML file demonstrates key concepts with interactive mini\u2011demos\u2014no frameworks or external […]","og_url":"https:\/\/rawajtech.com\/ar\/bitrix24-3\/","og_site_name":"Rawaj Tech","article_publisher":"http:\/\/facebook.com\/rawajtech","article_modified_time":"2025-08-26T18:50:15+00:00","twitter_card":"summary_large_image","twitter_site":"@rawajtech","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u062a\u0627\u0646"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rawajtech.com\/bitrix24-3\/","url":"https:\/\/rawajtech.com\/bitrix24-3\/","name":"BITRIX24 - Rawaj Tech","isPartOf":{"@id":"https:\/\/rawajtech.com\/#website"},"datePublished":"2025-08-26T18:50:13+00:00","dateModified":"2025-08-26T18:50:15+00:00","breadcrumb":{"@id":"https:\/\/rawajtech.com\/bitrix24-3\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rawajtech.com\/bitrix24-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rawajtech.com\/bitrix24-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rawajtech.com\/"},{"@type":"ListItem","position":2,"name":"BITRIX24"}]},{"@type":"WebSite","@id":"https:\/\/rawajtech.com\/#website","url":"https:\/\/rawajtech.com\/","name":"Rawaj Tech","description":"\u0631\u0648\u0627\u062c \u0628\u0646\u0642\u0631\u0629 \u0648\u0627\u062d\u062f\u0629","publisher":{"@id":"https:\/\/rawajtech.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rawajtech.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/rawajtech.com\/#organization","name":"Rawaj Tech","url":"https:\/\/rawajtech.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/rawajtech.com\/#\/schema\/logo\/image\/","url":"https:\/\/rawajtech.com\/wp-content\/uploads\/2022\/08\/rawaj-logo-ai.png","contentUrl":"https:\/\/rawajtech.com\/wp-content\/uploads\/2022\/08\/rawaj-logo-ai.png","width":1488,"height":528,"caption":"Rawaj Tech"},"image":{"@id":"https:\/\/rawajtech.com\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/rawajtech","https:\/\/x.com\/rawajtech","http:\/\/instagram.com\/rawajtech\/"]}]}},"_links":{"self":[{"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/pages\/783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/comments?post=783"}],"version-history":[{"count":2,"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/pages\/783\/revisions"}],"predecessor-version":[{"id":786,"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/pages\/783\/revisions\/786"}],"wp:attachment":[{"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/media?parent=783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":783,"date":"2025-08-26T18:50:13","date_gmt":"2025-08-26T18:50:13","guid":{"rendered":"https:\/\/rawajtech.com\/?page_id=783"},"modified":"2025-08-26T18:50:15","modified_gmt":"2025-08-26T18:50:15","slug":"bitrix24-3","status":"publish","type":"page","link":"https:\/\/rawajtech.com\/ar\/bitrix24-3\/","title":{"rendered":"BITRIX24"},"content":{"rendered":"\n\n\n \n \n Bitrix24 \u2014 Power Demo (Unofficial)<\/title>\n <meta name=\"description\" content=\"A single-file, interactive HTML demo showcasing the breadth of Bitrix24: CRM, tasks, automation, contact center, and dashboards.\" \/>\n <style>\n \/* ====== Design System ====== *\/\n :root {\n --bg: #0b1220;\n --bg-soft: #101a2e;\n --ink: #e9eefc;\n --muted: #b7c0d9;\n --brand: #2ed3ba; \/* aqua *\/\n --brand-2: #7c8cff; \/* indigo *\/\n --accent: #ffd166; \/* honey *\/\n --danger: #ff6b6b;\n --success: #80ed99;\n --card: rgba(255,255,255,0.06);\n --border: rgba(255,255,255,0.15);\n --shadow: 0 10px 30px rgba(0,0,0,0.35);\n --radius: 20px;\n }\n * { box-sizing: border-box; }\n html, body { height: 100%; }\n body {\n margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial;\n color: var(--ink); background: radial-gradient(1200px 600px at 80% -10%, #1c2b52, transparent 70%),\n radial-gradient(900px 500px at -10% 10%, #133a39, transparent 60%),\n linear-gradient(180deg, #0b1220, #09101d 60%);\n letter-spacing: .2px; overflow-x: hidden;\n }\n a { color: inherit; text-decoration: none; }\n .container { width: min(1200px, 92%); margin-inline: auto; }\n .glass { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(8px); box-shadow: var(--shadow); }\n .btn { display:inline-flex; gap:.6rem; align-items:center; padding:.9rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: #ffffff10; color: var(--ink); font-weight: 600; cursor: pointer; transition: transform .1s ease, background .2s ease, border-color .2s ease; }\n .btn:hover { transform: translateY(-1px); border-color: #ffffff44; background: #ffffff18; }\n .btn.brand { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#041018; border: none; box-shadow: 0 10px 20px rgba(46,211,186,.35); }\n .btn.ghost { background: #ffffff08; }\n .chip { padding:.35rem .7rem; border-radius: 999px; font-size:.8rem; color:#041018; background: linear-gradient(90deg, #9ff9ec, #9ea9ff); font-weight:700; letter-spacing:.3px; }\n .tag { font-size:.8rem; padding:.3rem .6rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); }\n .grid { display: grid; gap: 1.2rem; }\n .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }\n .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }\n .flex { display:flex; }\n .center { display:grid; place-items:center; }\n\n \/* ====== Navbar ====== *\/\n .nav { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(8,12,24,.9), rgba(8,12,24,.2)); border-bottom:1px solid var(--border); backdrop-filter: blur(6px); }\n .nav .row { display:flex; align-items:center; justify-content:space-between; padding: .8rem 0; }\n .logo { display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.5px; }\n .logo .dot { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 20px rgba(124,140,255,.6); }\n .nav .actions { display:flex; gap:.6rem; align-items:center; }\n\n \/* ====== Hero ====== *\/\n .hero { position: relative; padding: 6rem 0 4rem; overflow: hidden; }\n .halo { position: absolute; inset: -20% -10% auto auto; width: 900px; height: 900px; background: radial-gradient(closest-side, #214, transparent 75%); filter: blur(50px); opacity: .35; pointer-events:none; }\n .hero h1 { font-size: clamp(2rem, 6.2vw, 4rem); line-height: 1.05; margin: 0 0 1rem; }\n .hero p { color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.25rem); margin: 0 0 1.5rem; }\n .hero .cta { display:flex; gap:.8rem; flex-wrap: wrap; }\n .hero .marquee { margin-top: 2rem; display:flex; gap:1rem; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }\n .hero .marquee .pill { white-space: nowrap; border:1px dashed var(--border); padding:.6rem .9rem; border-radius:999px; opacity:.85; animation: slide 20s linear infinite; }\n @keyframes slide { from{ transform: translateX(0); } to{ transform: translateX(-100%); } }\n\n \/* ====== Section headers ====== *\/\n .section { padding: 3.5rem 0; }\n .section h2 { font-size: clamp(1.4rem, 4.8vw, 2rem); margin: 0 0 .6rem; }\n .section p.lead { color: var(--muted); margin: 0 0 1.2rem; }\n\n \/* ====== Cards ====== *\/\n .card { padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #0e1628, #0c1423); box-shadow: var(--shadow); }\n .card h3 { margin:.2rem 0 .5rem; font-size:1.2rem; }\n .kicker { font-size:.75rem; letter-spacing:.3px; color: var(--muted); text-transform: uppercase; }\n\n \/* ====== CRM Pipeline Demo ====== *\/\n .kanban { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }\n .column { background: #0d1628; border:1px dashed var(--border); border-radius: var(--radius); padding: .8rem; min-height: 230px; }\n .col-title { font-weight:700; display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }\n .deal { background: #0f1a30; border:1px solid var(--border); border-radius: 14px; padding:.6rem .7rem; margin:.5rem 0; box-shadow: 0 6px 16px rgba(0,0,0,.25); cursor: grab; }\n .deal small { color: var(--muted); }\n .ghost { outline:2px dashed var(--brand-2); outline-offset: 3px; }\n\n \/* ====== Automation Flow ====== *\/\n .flow { position: relative; min-height: 300px; background: #0c1526; border:1px dashed var(--border); border-radius: var(--radius); }\n .node { position:absolute; padding:.8rem 1rem; border-radius: 14px; background:#0f1a31; border:1px solid var(--border); box-shadow: var(--shadow); }\n .node.active { outline: 2px solid var(--brand); }\n .connector { position:absolute; height:2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow:0 0 10px rgba(124,140,255,.6); }\n\n \/* ====== Chat & Contact Center ====== *\/\n .chat { display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem; }\n .thread { height: 280px; overflow:auto; padding: .8rem; border-radius: 14px; background: #0f1a30; border:1px solid var(--border); }\n .msg { max-width: 70%; padding:.6rem .8rem; border-radius: 14px; margin:.35rem 0; }\n .me { margin-left:auto; background: #13264a; }\n .bot { background: #142033; }\n\n \/* ====== Dashboard ====== *\/\n .dash { display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem; }\n .stat { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; border:1px solid var(--border); border-radius: 14px; background:#0f1930; }\n .mini-chart { width: 100%; height: 120px; }\n\n \/* ====== Pricing ====== *\/\n .pricing { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; align-items: stretch; }\n .plan { padding: 1.2rem; border:1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #0c1526, #0b1220); display:grid; gap:.7rem; }\n .plan.pop { outline: 2px solid var(--brand); box-shadow: 0 0 0 12px #2ed3ba1a; }\n .price { font-size: 2rem; font-weight:800; }\n\n \/* ====== Footer ====== *\/\n footer { padding: 3rem 0 5rem; color: var(--muted); }\n\n \/* ====== Responsive ====== *\/\n @media (max-width: 1000px) {\n .grid-3 { grid-template-columns: 1fr; }\n .grid-2, .kanban, .chat, .dash, .pricing { grid-template-columns: 1fr; }\n .hero { padding-top: 4.5rem; }\n }\n <\/style>\n<\/head>\n<body>\n \n <nav class=\"nav\">\n <div class=\"container row\">\n <div class=\"logo\">\n <span class=\"dot\"><\/span>\n <span>\u0628\u062a\u0631\u0643\u0633\u0662\u0664 <span style=\"color:var(--brand);\">Power Demo<\/span><\/span>\n <\/div>\n <div class=\"actions\">\n <span class=\"tag\">CRM \u2022 Tasks \u2022 Contact Center \u2022 Automation<\/span>\n <button class=\"btn ghost\" id=\"toggleTheme\" title=\"Toggle Theme\">\ud83c\udf17 Theme<\/button>\n <button class=\"btn brand\" id=\"openModal\">Start Free<\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <header class=\"hero\">\n <div class=\"halo\"><\/div>\n <div class=\"container\">\n <span class=\"chip\">UNOFFICIAL SHOWCASE<\/span>\n <h1>Operate your entire business in one place.<\/h1>\n <p>Meet <strong>\u0628\u062a\u0631\u0643\u0633\u0662\u0664<\/strong>: a unified workspace for CRM, projects, contact center, websites, and automation. This single HTML file demonstrates key concepts with interactive mini\u2011demos\u2014no frameworks or external libraries.<\/p>\n <div class=\"cta\">\n <a class=\"btn brand\" href=\"#crm\">Explore CRM<\/a>\n <a class=\"btn ghost\" href=\"#dash\">View Dashboard<\/a>\n <a class=\"btn ghost\" href=\"#automation\">\u0627\u0644\u0623\u062a\u0645\u062a\u0629<\/a>\n <\/div>\n <div class=\"hero marquee\" aria-hidden=\"true\">\n <div class=\"pill\">Leads \u2192 Deals \u2192 Invoices<\/div>\n <div class=\"pill\">Tasks & Projects<\/div>\n <div class=\"pill\">Telephony & Omnichannel<\/div>\n <div class=\"pill\">Marketing Automation<\/div>\n <div class=\"pill\">Docs & Drive<\/div>\n <div class=\"pill\">Calendars & HR<\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <section class=\"section\">\n <div class=\"container grid grid-3\">\n <article class=\"card\">\n <div class=\"kicker\">\u0625\u062f\u0627\u0631\u0629 \u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621 CRM<\/div>\n <h3>From lead to loyal customer<\/h3>\n <p class=\"lead\">Collect, qualify, nurture, and win\u2014then onboard and support from a single system.<\/p>\n <div class=\"flex\" style=\"gap:.5rem; flex-wrap:wrap;\">\n <span class=\"tag\">Leads<\/span>\n <span class=\"tag\">Deals<\/span>\n <span class=\"tag\">Invoices<\/span>\n <span class=\"tag\">Catalog<\/span>\n <span class=\"tag\">Email & Calls<\/span>\n <\/div>\n <\/article>\n <article class=\"card\">\n <div class=\"kicker\">Tasks<\/div>\n <h3>Projects that actually ship<\/h3>\n <p class=\"lead\">Plan sprints, assign work, and track progress with Gantt, Kanban, or List\u2014your pick.<\/p>\n <div class=\"flex\" style=\"gap:.5rem; flex-wrap:wrap;\">\n <span class=\"tag\">Gantt<\/span>\n <span class=\"tag\">Kanban<\/span>\n <span class=\"tag\">Time tracking<\/span>\n <span class=\"tag\">Workflows<\/span>\n <\/div>\n <\/article>\n <article class=\"card\">\n <div class=\"kicker\">\u0645\u0631\u0643\u0632 \u0627\u0644\u0627\u062a\u0635\u0627\u0644<\/div>\n <h3>Omnichannel in a click<\/h3>\n <p class=\"lead\">WhatsApp, phone, live chat, and social in one queue\u2014auto\u2011route and auto\u2011reply.<\/p>\n <div class=\"flex\" style=\"gap:.5rem; flex-wrap:wrap;\">\n <span class=\"tag\">\u0648\u0627\u062a\u0633\u0627\u0628<\/span>\n <span class=\"tag\">Telephony<\/span>\n <span class=\"tag\">\u0645\u062a\u062d\u062f\u062b \u0631\u0648\u0628\u0648\u062a<\/span>\n <span class=\"tag\">CSAT<\/span>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n \n <section id=\"crm\" class=\"section\">\n <div class=\"container\">\n <h2>CRM Pipeline \u2014 Drag & Drop Deals<\/h2>\n <p class=\"lead\">Add sample deals and drag them across stages. This mimics Bitrix24’s Kanban CRM.<\/p>\n <div class=\"kanban\" id=\"kanban\">\n <div class=\"column\" data-stage=\"New\">\n <div class=\"col-title\">New <span class=\"tag\" id=\"count-New\">0<\/span><\/div>\n <\/div>\n <div class=\"column\" data-stage=\"Qualified\">\n <div class=\"col-title\">Qualified <span class=\"tag\" id=\"count-Qualified\">0<\/span><\/div>\n <\/div>\n <div class=\"column\" data-stage=\"Proposal\">\n <div class=\"col-title\">Proposal <span class=\"tag\" id=\"count-Proposal\">0<\/span><\/div>\n <\/div>\n <div class=\"column\" data-stage=\"Won\">\n <div class=\"col-title\">Won <span class=\"tag\" id=\"count-Won\">0<\/span><\/div>\n <\/div>\n <\/div>\n <div style=\"margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap;\">\n <button class=\"btn\" id=\"addDeal\">\u2795 Add Deal<\/button>\n <button class=\"btn\" id=\"shuffleDeals\">\ud83d\udd00 Auto-Advance<\/button>\n <button class=\"btn\" id=\"clearDeals\">\ud83d\uddd1\ufe0f Clear<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"automation\" class=\"section\">\n <div class=\"container\">\n <h2>Automation Builder \u2014 Visual Flow<\/h2>\n <p class=\"lead\">Click nodes to activate the flow. Triggers hand off to actions and conditions.<\/p>\n <div class=\"flow\" id=\"flow\">\n <div class=\"node\" id=\"n1\" style=\"left:4%; top:22%;\">Trigger: New Lead<\/div>\n <div class=\"node\" id=\"n2\" style=\"left:33%; top:22%;\">Condition: Budget \u2265 $5k<\/div>\n <div class=\"node\" id=\"n3\" style=\"left:62%; top:8%;\">Action: Assign to AE<\/div>\n <div class=\"node\" id=\"n4\" style=\"left:62%; top:38%;\">Action: Send Intro Email<\/div>\n <span class=\"connector\" style=\"left:13%; top:32%; width:22%;\"><\/span>\n <span class=\"connector\" style=\"left:43%; top:26%; width:17%; transform: rotate(-15deg);\"><\/span>\n <span class=\"connector\" style=\"left:43%; top:36%; width:17%; transform: rotate(15deg);\"><\/span>\n <\/div>\n <div style=\"margin-top:.8rem; display:flex; gap:.6rem;\">\n <button class=\"btn\" id=\"runFlow\">\u25b6\ufe0f Run<\/button>\n <button class=\"btn\" id=\"resetFlow\">\u21a9\ufe0f Reset<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container chat\">\n <div class=\"card\">\n <div class=\"kicker\">Live Chat<\/div>\n <h3>Omnichannel Widget<\/h3>\n <div class=\"thread\" id=\"thread\" aria-live=\"polite\"><\/div>\n <div style=\"display:flex; gap:.5rem; margin-top:.6rem;\">\n <input id=\"chatInput\" class=\"glass\" placeholder=\"Type a message\u2026\" style=\"flex:1; height:42px; padding:0 .8rem; color:var(--ink);\" \/>\n <button id=\"sendBtn\" class=\"btn brand\">\u0625\u0631\u0633\u0627\u0644<\/button>\n <\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"kicker\">Smart Routing<\/div>\n <h3>Queue & SLA<\/h3>\n <p class=\"lead\">Incoming chats are routed to the first available agent. SLA timers ensure nobody waits.<\/p>\n <div class=\"grid grid-2\">\n <div class=\"stat\"><span>Avg. First Response<\/span><strong id=\"sla1\">\u2014<\/strong><\/div>\n <div class=\"stat\"><span>CSAT (last 100)<\/span><strong id=\"csat\">\u2014<\/strong><\/div>\n <\/div>\n <p style=\"color:var(--muted); margin-top:.6rem;\">Tip: Type <code>\/help<\/code> in chat to see quick replies.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"dash\" class=\"section\">\n <div class=\"container dash\">\n <div class=\"card\">\n <div class=\"kicker\">Dashboard<\/div>\n <h3>Team Performance<\/h3>\n <div class=\"grid grid-3\" style=\"grid-template-columns: repeat(3,1fr);\">\n <div class=\"stat\"><span>Deals Won<\/span><strong id=\"kpiDeals\">0<\/strong><\/div>\n <div class=\"stat\"><span>Revenue<\/span><strong id=\"kpiRev\">$0<\/strong><\/div>\n <div class=\"stat\"><span>Tasks Done<\/span><strong id=\"kpiTasks\">0<\/strong><\/div>\n <\/div>\n <svg class=\"mini-chart\" viewbox=\"0 0 100 40\" preserveaspectratio=\"none\" id=\"spark\">\n <polyline fill=\"none\" stroke=\"url(#g)\" stroke-width=\"2\" points=\"\"\/>\n <defs>\n <lineargradient id=\"g\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\n <stop offset=\"0%\" stop-color=\"var(--brand)\"\/>\n <stop offset=\"100%\" stop-color=\"var(--brand-2)\"\/>\n <\/lineargradient>\n <\/defs>\n <\/svg>\n <\/div>\n <div class=\"card\">\n <div class=\"kicker\">Workload<\/div>\n <h3>Capacity Ring<\/h3>\n <div class=\"center\" style=\"height:170px;\">\n <svg viewbox=\"0 0 120 120\" width=\"170\" height=\"170\">\n <circle cx=\"60\" cy=\"60\" r=\"48\" stroke=\"#203050\" stroke-width=\"14\" fill=\"none\"\/>\n <circle id=\"ring\" cx=\"60\" cy=\"60\" r=\"48\" stroke=\"url(#g)\" stroke-width=\"14\" fill=\"none\" stroke-linecap=\"round\"\n stroke-dasharray=\"0 999\" transform=\"rotate(-90 60 60)\"\/>\n <\/svg>\n <\/div>\n <div class=\"center\"><span class=\"tag\">Live utilization <strong id=\"util\">0%<\/strong><\/span><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container\">\n <h2>Pricing \u2014 Simple & Transparent<\/h2>\n <p class=\"lead\">Toggle billing period. This is a fictional demo.<\/p>\n <div style=\"display:flex; gap:.6rem; align-items:center; margin-bottom: .8rem;\">\n <span class=\"tag\">Billing:<\/span>\n <button class=\"btn\" id=\"toggleBilling\">Monthly<\/button>\n <\/div>\n <div class=\"pricing\">\n <div class=\"plan\">\n <div class=\"kicker\">Starter<\/div>\n <div class=\"price\" data-base=\"0\">$0<\/div>\n <div style=\"color:var(--muted)\">For small teams that want essentials.<\/div>\n <ul style=\"margin:.2rem 0 0 1rem; line-height:1.8;\">\n <li>CRM & Tasks<\/li>\n <li>Live Chat<\/li>\n <li>5 GB Drive<\/li>\n <\/ul>\n <button class=\"btn brand\">\u0625\u0628\u062f\u0623 \u0645\u0639\u0646\u0627<\/button>\n <\/div>\n <div class=\"plan pop\">\n <div class=\"kicker\">Business<\/div>\n <div class=\"price\" data-base=\"39\">$39<\/div>\n <div style=\"color:var(--muted)\">Automation & advanced reporting.<\/div>\n <ul style=\"margin:.2rem 0 0 1rem; line-height:1.8;\">\n <li>All Starter features<\/li>\n <li>Automations<\/li>\n <li>Telephony & Omnichannel<\/li>\n <\/ul>\n <button class=\"btn brand\">Try Business<\/button>\n <\/div>\n <div class=\"plan\">\n <div class=\"kicker\">Enterprise<\/div>\n <div class=\"price\" data-base=\"99\">$99<\/div>\n <div style=\"color:var(--muted)\">Scale with SSO, SAML, and audit.<\/div>\n <ul style=\"margin:.2rem 0 0 1rem; line-height:1.8;\">\n <li>All Business features<\/li>\n <li>SSO\/SAML, Audit Log<\/li>\n <li>Advanced Security<\/li>\n <\/ul>\n <button class=\"btn brand\">Contact Sales<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <div id=\"modal\" style=\"position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55);\">\n <div class=\"glass\" style=\"width:min(520px, 92%); padding:1.2rem;\">\n <div class=\"flex\" style=\"justify-content:space-between; align-items:center; gap:1rem;\">\n <h3 style=\"margin:0\">Start Your Free Workspace<\/h3>\n <button class=\"btn\" id=\"closeModal\">\u2716<\/button>\n <\/div>\n <p class=\"lead\">Create a test portal to explore CRM, projects, contact center, and more.<\/p>\n <form id=\"signupForm\" class=\"grid\" style=\"gap:.7rem;\" action=\"\">\n <input class=\"glass\" name=\"name\" placeholder=\"Your name\" required style=\"height:44px; padding:0 .8rem; color:var(--ink);\" \/>\n <input class=\"glass\" name=\"email\" type=\"email\" placeholder=\"Work email\" required style=\"height:44px; padding:0 .8rem; color:var(--ink);\" \/>\n <select class=\"glass\" name=\"team\" required style=\"height:44px; padding:0 .8rem; color:var(--ink); background:#0f1a30;\">\n <option value=\"\" hidden>Team size<\/option>\n <option>1-5<\/option>\n <option>6-20<\/option>\n <option>21-100<\/option>\n <option>100+<\/option>\n <\/select>\n <button class=\"btn brand\" type=\"submit\">Create Workspace<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"ar\"\/><\/form>\n <p id=\"signupResult\" style=\"display:none; margin-top:.6rem;\" class=\"lead\"><\/p>\n <\/div>\n <\/div>\n\n <footer class=\"container\">\n <p>Made with \u2764\ufe0f for a vivid demo. Bitrix24 is a trademark of its respective owners. This page is an <strong>unofficial<\/strong> showcase.<\/p>\n <\/footer>\n\n <script>\n \/\/ ====== THEME TOGGLE ======\n const toggleBtn = document.getElementById('toggleTheme');\n toggleBtn.addEventListener('click', () => {\n const dark = document.documentElement.dataset.theme !== 'light';\n if (dark) {\n document.documentElement.dataset.theme = 'light';\n \/\/ quick light palette\n document.documentElement.style.setProperty('--bg', '#f6f8ff');\n document.documentElement.style.setProperty('--bg-soft', '#eef2ff');\n document.documentElement.style.setProperty('--ink', '#0b1220');\n document.documentElement.style.setProperty('--muted', '#3b4766');\n document.documentElement.style.setProperty('--card', 'rgba(0,0,0,0.04)');\n document.documentElement.style.setProperty('--border', 'rgba(0,0,0,0.12)');\n document.body.style.background = 'linear-gradient(180deg, #ffffff, #eef2ff 60%)';\n } else {\n document.documentElement.dataset.theme = 'dark';\n document.documentElement.style.cssText = '';\n location.reload(); \/\/ simplest way to restore original gradients\n }\n });\n\n \/\/ ====== KANBAN DEMO ======\n const kanban = document.getElementById('kanban');\n const counts = { New:0, Qualified:0, Proposal:0, Won:0 };\n function updateCounts(){ for(const k in counts){ document.getElementById('count-'+k).textContent = document.querySelectorAll(`.column[data-stage=\"${k}\"] .deal`).length; } }\n let id = 1;\n function makeDeal(){\n const el = document.createElement('div');\n el.className = 'deal';\n el.draggable = true;\n el.dataset.amount = (Math.floor(Math.random()*9)+1) * 1000;\n el.innerHTML = `<strong>Deal #${id++}<\/strong><br><small>$${el.dataset.amount} \u2022 ACME Co.<\/small>`;\n el.addEventListener('dragstart', e => { e.dataTransfer.setData('text\/plain', 'deal'); e.dataTransfer.setDragImage(el, 10, 10); setTimeout(()=>el.classList.add('ghost'), 0); window.__drag = el; });\n el.addEventListener('dragend', ()=> el.classList.remove('ghost'));\n return el;\n }\n document.getElementById('addDeal').addEventListener('click',() => { document.querySelector('.column[data-stage=\"New\"]').appendChild(makeDeal()); updateCounts(); animateKpis(); });\n document.getElementById('clearDeals').addEventListener('click',() => { document.querySelectorAll('.deal').forEach(d=>d.remove()); updateCounts(); document.getElementById('kpiDeals').textContent = 0; document.getElementById('kpiRev').textContent = '$0'; document.getElementById('kpiTasks').textContent = 0; drawSpark([]); setRing(0); });\n document.getElementById('shuffleDeals').addEventListener('click',() => {\n const stages = ['New','Qualified','Proposal','Won'];\n document.querySelectorAll('.deal').forEach(d => {\n const i = Math.min(stages.indexOf(d.closest('.column').dataset.stage)+ (Math.random()<.6?1:0), 3);\n document.querySelector(`.column[data-stage=\"${stages[i]}\"]`).appendChild(d);\n });\n updateCounts(); animateKpis();\n });\n document.querySelectorAll('.column').forEach(col => {\n col.addEventListener('dragover', e => e.preventDefault());\n col.addEventListener('drop', e => { e.preventDefault(); if(window.__drag){ col.appendChild(window.__drag); updateCounts(); animateKpis(); } });\n });\n\n \/\/ ====== AUTOMATION FLOW ======\n const nodes = ['n1','n2','n3','n4'].map(id => document.getElementById(id));\n nodes.forEach(n => n.addEventListener('click', ()=> n.classList.toggle('active')));\n document.getElementById('runFlow').addEventListener('click', async () => {\n for (const n of nodes){ n.classList.add('active'); await new Promise(r=>setTimeout(r, 320)); }\n });\n document.getElementById('resetFlow').addEventListener('click', ()=> nodes.forEach(n=>n.classList.remove('active')));\n\n \/\/ ====== CHAT DEMO ======\n const thread = document.getElementById('thread');\n const input = document.getElementById('chatInput');\n const sendBtn = document.getElementById('sendBtn');\n function pushMsg(txt, mine=false){\n const p = document.createElement('div'); p.className = 'msg '+(mine?'me':'bot'); p.textContent = txt; thread.appendChild(p); thread.scrollTop = thread.scrollHeight;\n }\n const replies = {\n '\/help': 'Try: pricing, status, agent, call me',\n 'pricing': 'Plans: Starter $0, Business $39, Enterprise $99 (demo).',\n 'status': 'All systems nominal. CRM API latency: 82ms. Contacts synced: 12,948.',\n 'agent': 'Routing you to the first available agent\u2026 SLA 40s.',\n 'call me': 'Please share your phone. We will call you shortly.'\n };\n function handleSend(){\n const v = input.value.trim(); if(!v) return; pushMsg(v, true); input.value = '';\n const key = Object.keys(replies).find(k => v.toLowerCase().includes(k));\n setTimeout(()=> pushMsg(replies[key] || 'Thanks! A human will join shortly.'), 350);\n \/\/ tweak KPIs\n animateKpis();\n randomizeSLA();\n }\n sendBtn.addEventListener('click', handleSend);\n input.addEventListener('keydown', e => { if(e.key==='Enter') handleSend(); });\n\n \/\/ ====== DASHBOARD WIDGETS ======\n const kpiDeals = document.getElementById('kpiDeals');\n const kpiRev = document.getElementById('kpiRev');\n const kpiTasks = document.getElementById('kpiTasks');\n function animateTo(el, to, prefix='', suffix=''){ const from = parseFloat((el.textContent||'0').replace(\/[^0-9.]\/g,'')) || 0; const steps = 24; let i=0; const d = (to-from)\/steps; const t = setInterval(()=>{ i++; const v = Math.round((from + d*i)*10)\/10; el.textContent = prefix + (el===kpiRev? v.toLocaleString(): Math.round(v)) + suffix; if(i>=steps) clearInterval(t); }, 18); }\n function animateKpis(){\n const deals = document.querySelectorAll('.column[data-stage=\"Won\"] .deal');\n const sum = [...deals].reduce((s,d)=> s + Number(d.dataset.amount), 0);\n animateTo(kpiDeals, deals.length);\n animateTo(kpiRev, sum, '$');\n animateTo(kpiTasks, Math.max(0, Math.round(sum\/500)));\n drawSpark([...document.querySelectorAll('.deal')].map((d,i)=> (Number(d.dataset.amount)\/1000) + i%5));\n setRing(Math.min(100, 20 + (deals.length*15)));\n }\n function drawSpark(data){\n const poly = document.querySelector('#spark polyline');\n if(!data || !data.length){ poly.setAttribute('points',''); return; }\n const max = Math.max(...data), min = Math.min(...data);\n const points = data.map((v,i)=>{\n const x = (i\/(data.length-1))*100; const y = 40 - ((v-min)\/(max-min+0.0001))*36 - 2; return `${x.toFixed(2)},${y.toFixed(2)}`;\n }).join(' ');\n poly.setAttribute('points', points);\n }\n function setRing(pct){\n const C = Math.PI*96; const dash = (C*pct\/100).toFixed(1);\n document.getElementById('ring').setAttribute('stroke-dasharray', `${dash} ${999}`);\n document.getElementById('util').textContent = `${Math.round(pct)}%`;\n }\n\n \/\/ seed a few deals for visuals\n ['New','Qualified','Proposal'].forEach((stage, i)=>{\n const col = document.querySelector(`.column[data-stage=\"${stage}\"]`);\n for(let j=0;j< (i+1); j++){ col.appendChild(makeDeal()); }\n });\n updateCounts(); animateKpis(); randomizeSLA();\n\n \/\/ ====== SLA & CSAT ======\n function randomizeSLA(){\n const sla = (20 + Math.random()*60) | 0; document.getElementById('sla1').textContent = sla + 's';\n const cs = (90 + Math.random()*9).toFixed(1) + '%'; document.getElementById('csat').textContent = cs;\n }\n\n \/\/ ====== BILLING TOGGLE ======\n let yearly = false;\n document.getElementById('toggleBilling').addEventListener('click', (e)=>{\n yearly = !yearly; e.target.textContent = yearly ? 'Yearly (save 20%)' : 'Monthly';\n document.querySelectorAll('.price').forEach(p => {\n const base = Number(p.dataset.base);\n const val = yearly ? Math.round(base*12*0.8) : base; \/\/ simple demo math\n p.textContent = '$' + val;\n });\n });\n\n \/\/ ====== MODAL ======\n const modal = document.getElementById('modal');\n document.getElementById('openModal').addEventListener('click', ()=> modal.style.display = 'flex');\n document.getElementById('closeModal').addEventListener('click', ()=> modal.style.display = 'none');\n document.getElementById('signupForm').addEventListener('submit', (e)=>{\n e.preventDefault(); const data = new FormData(e.target);\n const name = data.get('name'); const email = data.get('email'); const team = data.get('team');\n document.getElementById('signupResult').style.display = 'block';\n document.getElementById('signupResult').textContent = `\u2714\ufe0f Workspace created for ${name} (${email}) \u2014 Team ${team}. Check your inbox! (demo)`;\n e.target.reset();\n });\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Bitrix24 \u2014 Power Demo (Unofficial) Bitrix24 Power Demo CRM \u2022 Tasks \u2022 Contact Center \u2022 Automation \ud83c\udf17 Theme Start Free UNOFFICIAL SHOWCASE Operate your entire business in one place. Meet Bitrix24: a unified workspace for CRM, projects, contact center, websites, and automation. This single HTML file demonstrates key concepts with interactive mini\u2011demos\u2014no frameworks or external […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-783","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>BITRIX24 - Rawaj Tech<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rawajtech.com\/ar\/bitrix24-3\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BITRIX24 - Rawaj Tech\" \/>\n<meta property=\"og:description\" content=\"Bitrix24 \u2014 Power Demo (Unofficial) Bitrix24 Power Demo CRM \u2022 Tasks \u2022 Contact Center \u2022 Automation \ud83c\udf17 Theme Start Free UNOFFICIAL SHOWCASE Operate your entire business in one place. Meet Bitrix24: a unified workspace for CRM, projects, contact center, websites, and automation. This single HTML file demonstrates key concepts with interactive mini\u2011demos\u2014no frameworks or external […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rawajtech.com\/ar\/bitrix24-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Rawaj Tech\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/rawajtech\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-26T18:50:15+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@rawajtech\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u062a\u0627\u0646\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rawajtech.com\/bitrix24-3\/\",\"url\":\"https:\/\/rawajtech.com\/bitrix24-3\/\",\"name\":\"BITRIX24 - Rawaj Tech\",\"isPartOf\":{\"@id\":\"https:\/\/rawajtech.com\/#website\"},\"datePublished\":\"2025-08-26T18:50:13+00:00\",\"dateModified\":\"2025-08-26T18:50:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rawajtech.com\/bitrix24-3\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rawajtech.com\/bitrix24-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rawajtech.com\/bitrix24-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rawajtech.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"BITRIX24\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rawajtech.com\/#website\",\"url\":\"https:\/\/rawajtech.com\/\",\"name\":\"Rawaj Tech\",\"description\":\"Just One Click!\",\"publisher\":{\"@id\":\"https:\/\/rawajtech.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rawajtech.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/rawajtech.com\/#organization\",\"name\":\"Rawaj Tech\",\"url\":\"https:\/\/rawajtech.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/rawajtech.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/rawajtech.com\/wp-content\/uploads\/2022\/08\/rawaj-logo-ai.png\",\"contentUrl\":\"https:\/\/rawajtech.com\/wp-content\/uploads\/2022\/08\/rawaj-logo-ai.png\",\"width\":1488,\"height\":528,\"caption\":\"Rawaj Tech\"},\"image\":{\"@id\":\"https:\/\/rawajtech.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"http:\/\/facebook.com\/rawajtech\",\"https:\/\/x.com\/rawajtech\",\"http:\/\/instagram.com\/rawajtech\/\"]}]}<\/script>\n","yoast_head_json":{"title":"BITRIX24 - Rawaj Tech","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rawajtech.com\/ar\/bitrix24-3\/","og_locale":"ar_AR","og_type":"article","og_title":"BITRIX24 - Rawaj Tech","og_description":"Bitrix24 \u2014 Power Demo (Unofficial) Bitrix24 Power Demo CRM \u2022 Tasks \u2022 Contact Center \u2022 Automation \ud83c\udf17 Theme Start Free UNOFFICIAL SHOWCASE Operate your entire business in one place. Meet Bitrix24: a unified workspace for CRM, projects, contact center, websites, and automation. This single HTML file demonstrates key concepts with interactive mini\u2011demos\u2014no frameworks or external […]","og_url":"https:\/\/rawajtech.com\/ar\/bitrix24-3\/","og_site_name":"Rawaj Tech","article_publisher":"http:\/\/facebook.com\/rawajtech","article_modified_time":"2025-08-26T18:50:15+00:00","twitter_card":"summary_large_image","twitter_site":"@rawajtech","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u062a\u0627\u0646"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rawajtech.com\/bitrix24-3\/","url":"https:\/\/rawajtech.com\/bitrix24-3\/","name":"BITRIX24 - Rawaj Tech","isPartOf":{"@id":"https:\/\/rawajtech.com\/#website"},"datePublished":"2025-08-26T18:50:13+00:00","dateModified":"2025-08-26T18:50:15+00:00","breadcrumb":{"@id":"https:\/\/rawajtech.com\/bitrix24-3\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rawajtech.com\/bitrix24-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rawajtech.com\/bitrix24-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rawajtech.com\/"},{"@type":"ListItem","position":2,"name":"BITRIX24"}]},{"@type":"WebSite","@id":"https:\/\/rawajtech.com\/#website","url":"https:\/\/rawajtech.com\/","name":"Rawaj Tech","description":"\u0631\u0648\u0627\u062c \u0628\u0646\u0642\u0631\u0629 \u0648\u0627\u062d\u062f\u0629","publisher":{"@id":"https:\/\/rawajtech.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rawajtech.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/rawajtech.com\/#organization","name":"Rawaj Tech","url":"https:\/\/rawajtech.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/rawajtech.com\/#\/schema\/logo\/image\/","url":"https:\/\/rawajtech.com\/wp-content\/uploads\/2022\/08\/rawaj-logo-ai.png","contentUrl":"https:\/\/rawajtech.com\/wp-content\/uploads\/2022\/08\/rawaj-logo-ai.png","width":1488,"height":528,"caption":"Rawaj Tech"},"image":{"@id":"https:\/\/rawajtech.com\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/rawajtech","https:\/\/x.com\/rawajtech","http:\/\/instagram.com\/rawajtech\/"]}]}},"_links":{"self":[{"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/pages\/783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/comments?post=783"}],"version-history":[{"count":2,"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/pages\/783\/revisions"}],"predecessor-version":[{"id":786,"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/pages\/783\/revisions\/786"}],"wp:attachment":[{"href":"https:\/\/rawajtech.com\/ar\/wp-json\/wp\/v2\/media?parent=783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}