houston[bot]
1371 lines
108 KiB
HTML
1371 lines
108 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" id="htmlRoot">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NexusAI - Automate Everything with AI Agents</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<!-- Bootstrap 5.3 -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet"/>
|
|
<!-- AOS Animate on Scroll -->
|
|
<link href="css/aos.css" rel="stylesheet"/>
|
|
<!-- Swiper -->
|
|
<link href="css/swiper-bundle.min.css" rel="stylesheet"/>
|
|
<!-- all min css -->
|
|
<link rel="stylesheet" href="css/all.min.css"/>
|
|
<!-- magnific CSS -->
|
|
<link rel="stylesheet" href="css/magnific-popup.css"/>
|
|
<!-- Style CSS -->
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
</head>
|
|
<body>
|
|
<!-- ======================== LANDING PAGE ======================== -->
|
|
<div id="landing">
|
|
<!-- NAVBAR -->
|
|
<nav id="nbar">
|
|
<div class="container">
|
|
<div class="d-flex align-items-center justify-content-between w-100">
|
|
<a href="#" class="d-flex align-items-center gap-2" style="font-size:1.2rem;font-weight:700;color:var(--tx)">
|
|
<div class="logo-i"><i class="fa-solid fa-layer-group"></i></div>
|
|
<span>NexusAI</span>
|
|
</a>
|
|
<div class="d-none d-lg-flex align-items-center gap-1 mx-auto">
|
|
<a href="#features" class="nav-link">Features</a>
|
|
<a href="#integrations" class="nav-link">Integrations</a>
|
|
<a href="#pricing" class="nav-link">Pricing</a>
|
|
<a href="#faq" class="nav-link">FAQ</a>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button class="boc d-flex align-items-center justify-content-center" id="thbtn" style="width:38px;height:38px;padding:0;border-radius:12px" aria-label="Toggle theme">
|
|
<i class="fa-solid fa-sun" id="suni" style="display:none"></i>
|
|
<i class="fa-solid fa-moon" id="mooni"></i>
|
|
</button>
|
|
<button class="boc px-3 py-2 d-none d-sm-flex align-items-center gap-1" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="swTab('login')">
|
|
<i class="fa-regular fa-user fa-sm"></i> Log in
|
|
</button>
|
|
<button class="bgrd btn px-3 py-2 d-none d-sm-flex align-items-center gap-1" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="swTab('signup')">
|
|
Get Started <i class="fa-solid fa-arrow-right fa-sm"></i>
|
|
</button>
|
|
<button class="boc d-lg-none px-2 py-2" id="mbtog" style="border-radius:10px">
|
|
<i class="fa-solid fa-bars" id="barIcon"></i>
|
|
<i class="fa-solid fa-xmark" id="xIcon" style="display:none"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div id="mbmenu">
|
|
<a href="#features" class="nav-link d-block py-3 border-bottom" style="border-color:var(--bd)!important">Features</a>
|
|
<a href="#integrations" class="nav-link d-block py-3 border-bottom" style="border-color:var(--bd)!important">Integrations</a>
|
|
<a href="#pricing" class="nav-link d-block py-3 border-bottom" style="border-color:var(--bd)!important">Pricing</a>
|
|
<a href="#faq" class="nav-link d-block py-3">FAQ</a>
|
|
<div class="d-flex gap-2 mt-3">
|
|
<button class="boc flex-fill py-2 btn" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="swTab('login')">Log in</button>
|
|
<button class="bgrd flex-fill py-2 btn" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="swTab('signup')">Get Started</button>
|
|
</div>
|
|
</div>
|
|
<!-- HERO -->
|
|
<section id="hero">
|
|
<div class="aur aur-a" style="top:-80px;left:-120px"></div>
|
|
<div class="aur aur-b" style="top:180px;right:-180px"></div>
|
|
<div class="aur aur-a" style="bottom:-80px;left:45%;transform:translateX(-50%);opacity:.4"></div>
|
|
<div class="container position-relative" style="z-index:2">
|
|
<div class="text-center">
|
|
<div class="afu" style="animation-delay:.05s"><span class="hbadge"><span class="bdot"></span>Now with GPT-4o & Claude 3.5 integration</span></div>
|
|
<h1 class="h1 afu" style="animation-delay:.12s">Automate Your Business<br>with <span class="gt">AI Agents</span></h1>
|
|
<p class="mx-auto afu" style="max-width:580px;font-size:clamp(.95rem,1.8vw,1.2rem);color:var(--tx2);margin-bottom:36px;animation-delay:.2s">Deploy intelligent AI agents that handle customer support, automate workflows, analyze data, and scale your operations � without writing a single line of code.</p>
|
|
<div class="d-flex align-items-center justify-content-center gap-3 flex-wrap afu" style="animation-delay:.28s">
|
|
<button class="bgrd btn px-4 py-3 fs-6" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="swTab('signup')">Start for Free � No Credit Card</button>
|
|
<a href="https://www.youtube.com/watch?v=ScMzIvxBSi4" class="boc btn px-4 py-3 fs-6 vidpop"><i class="fa-solid fa-circle-play me-2" style="color:var(--pur)"></i>Watch Demo</a>
|
|
</div>
|
|
<div class="mt-5 afu" style="animation-delay:.4s">
|
|
<p style="font-size:.71rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Trusted by innovative teams at</p>
|
|
<div class="d-flex align-items-center justify-content-center gap-4 flex-wrap">
|
|
<span class="tlog">Stripe</span><span class="tlog">Notion</span><span class="tlog">Vercel</span><span class="tlog">Linear</span><span class="tlog">Figma</span><span class="tlog">Loom</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center mt-5">
|
|
<div class="col-lg-11 adi">
|
|
<div class="dwrap">
|
|
<div class="dtbar"><span class="dd" style="background:#ff5f57"></span><span class="dd" style="background:#ffbd2e"></span><span class="dd" style="background:#28c840"></span><span class="ms-auto me-auto" style="font-size:.76rem;color:var(--tx3)">NexusAI Dashboard � nexus.ai/dashboard</span></div>
|
|
<div class="dgrid">
|
|
<div class="dside">
|
|
<div style="font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);padding:0 10px 10px;font-weight:700">Overview</div>
|
|
<button class="dsi on"><i class="fa-solid fa-gauge-high"></i> Dashboard</button>
|
|
<button class="dsi"><i class="fa-solid fa-robot"></i> Agents</button>
|
|
<button class="dsi"><i class="fa-solid fa-chart-line"></i> Analytics</button>
|
|
<button class="dsi"><i class="fa-regular fa-comments"></i> Conversations</button>
|
|
<button class="dsi"><i class="fa-solid fa-bolt"></i> Automations</button>
|
|
</div>
|
|
<div class="p-3">
|
|
<div class="row g-2 mb-3">
|
|
<div class="col-6 col-sm-3">
|
|
<div class="stpill">
|
|
<div style="font-size:1.4rem;font-weight:700" class="gt">24.8K</div>
|
|
<div style="font-size:.67rem;color:var(--tx3)">AI Conversations</div>
|
|
<div style="font-size:.67rem;color:#34d399;font-weight:600"><i class="fa-solid fa-caret-up me-1"></i>18.4%</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3">
|
|
<div class="stpill">
|
|
<div style="font-size:1.4rem;font-weight:700">98.2%</div>
|
|
<div style="font-size:.67rem;color:var(--tx3)">Resolution Rate</div>
|
|
<div style="font-size:.67rem;color:#34d399;font-weight:600"><i class="fa-solid fa-caret-up me-1"></i>3.1%</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3">
|
|
<div class="stpill">
|
|
<div style="font-size:1.4rem;font-weight:700">1.4s</div>
|
|
<div style="font-size:.67rem;color:var(--tx3)">Avg Response</div>
|
|
<div style="font-size:.67rem;color:#60a5fa;font-weight:600"><i class="fa-solid fa-caret-down me-1"></i>0.3s</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3">
|
|
<div class="stpill">
|
|
<div style="font-size:1.4rem;font-weight:700">$18.2K</div>
|
|
<div style="font-size:.67rem;color:var(--tx3)">Cost Saved</div>
|
|
<div style="font-size:.67rem;color:#34d399;font-weight:600"><i class="fa-solid fa-caret-up me-1"></i>31%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-2">
|
|
<div class="col-sm-7">
|
|
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:12px;padding:14px">
|
|
<div style="font-size:.73rem;color:var(--tx3);margin-bottom:10px;font-weight:600"><i class="fa-solid fa-chart-bar me-1"></i>Agent Activity � Last 7 days</div>
|
|
<div style="display:flex;align-items:flex-end;gap:5px;height:76px">
|
|
<div class="bbar" style="height:45%"></div>
|
|
<div class="bbar" style="height:72%"></div>
|
|
<div class="bbar" style="height:55%"></div>
|
|
<div class="bbar" style="height:88%"></div>
|
|
<div class="bbar" style="height:63%"></div>
|
|
<div class="bbar" style="height:95%"></div>
|
|
<div class="bbar" style="height:78%"></div>
|
|
</div>
|
|
<div class="d-flex justify-content-between mt-2" style="font-size:.62rem;color:var(--tx3)"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:12px;padding:12px;height:100%;display:flex;flex-direction:column;gap:8px">
|
|
<div style="font-size:.71rem;color:var(--tx3);font-weight:600"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pur);box-shadow:0 0 6px var(--pur);margin-right:6px;animation:bpls 2s infinite"></span>Live Agent</div>
|
|
<div class="cbbl cbus">Summarize today's tickets</div>
|
|
<div class="cbbl cbai"><strong>47 tickets.</strong> 38 AI-resolved (81%). Top: billing (23%).</div>
|
|
<div style="display:flex;gap:4px;padding:8px 12px">
|
|
<div class="tdot"></div>
|
|
<div class="tdot" style="animation-delay:.15s"></div>
|
|
<div class="tdot" style="animation-delay:.3s"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SOCIAL PROOF -->
|
|
<section id="proof">
|
|
<div class="container">
|
|
<div class="row g-3 align-items-center text-center">
|
|
<div class="col-6 col-sm-3">
|
|
<div class="pnum">4.9/5</div>
|
|
<div class="plbl"><i class="fa-solid fa-star text-warning me-1"></i>Avg Rating</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3">
|
|
<div class="pnum">50K+</div>
|
|
<div class="plbl">Active Users</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3">
|
|
<div class="pnum">200M+</div>
|
|
<div class="plbl">Automations Run</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3">
|
|
<div class="pnum">99.9%</div>
|
|
<div class="plbl">Uptime SLA</div>
|
|
</div>
|
|
</div>
|
|
<div class="lscroll">
|
|
<div class="ltrack"><span class="lbr">Stripe</span><span class="lbr">Notion</span><span class="lbr">Vercel</span><span class="lbr">Linear</span><span class="lbr">Figma</span><span class="lbr">Shopify</span><span class="lbr">Intercom</span><span class="lbr">HubSpot</span><span class="lbr">Loom</span><span class="lbr">Stripe</span><span class="lbr">Notion</span><span class="lbr">Vercel</span><span class="lbr">Linear</span><span class="lbr">Figma</span><span class="lbr">Shopify</span><span class="lbr">Intercom</span><span class="lbr">HubSpot</span><span class="lbr">Loom</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- PROBLEM -->
|
|
<section class="sp position-relative">
|
|
<div class="aur aur-b" style="top:50%;right:-200px;transform:translateY(-50%)"></div>
|
|
<div class="container position-relative" style="z-index:1">
|
|
<div class="text-center mb-5 rv">
|
|
<span class="slbl">The Problem</span>
|
|
<h2 class="stitle">Your workflow is <span class="gt">broken</span></h2>
|
|
<p class="ssub mx-auto">Teams waste thousands of hours on repetitive tasks that AI should handle automatically.</p>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-4 rv">
|
|
<div class="gc p-4 h-100">
|
|
<div style="width:52px;height:52px;border-radius:14px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.2);display:flex;align-items:center;justify-content:center;margin-bottom:18px"><i class="fa-regular fa-clock fa-lg" style="color:#f87171"></i></div>
|
|
<h3 class="fw-semibold fs-5 mb-2">Manual, Repetitive Work</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Your team spends 60% of their time on copy-paste tasks and repetitive queries � instead of meaningful work that drives business forward.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.1s">
|
|
<div class="gc p-4 h-100">
|
|
<div style="width:52px;height:52px;border-radius:14px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.2);display:flex;align-items:center;justify-content:center;margin-bottom:18px"><i class="fa-solid fa-dollar-sign fa-lg" style="color:#fbbf24"></i></div>
|
|
<h3 class="fw-semibold fs-5 mb-2">Exploding Support Costs</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Hiring more agents is expensive and doesn't scale. Customer expectations rise while response times worsen and satisfaction drops.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.2s">
|
|
<div class="gc p-4 h-100">
|
|
<div style="width:52px;height:52px;border-radius:14px;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.2);display:flex;align-items:center;justify-content:center;margin-bottom:18px"><i class="fa-solid fa-plug fa-lg" style="color:#a78bfa"></i></div>
|
|
<h3 class="fw-semibold fs-5 mb-2">Disconnected Tools</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Your data lives in 20 different apps that don't talk to each other. Building integrations is slow, breaks constantly, and requires expensive devs.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- FEATURES -->
|
|
<section id="features" class="sp" style="background:var(--bg2)">
|
|
<div class="container">
|
|
<div class="text-center mb-5 rv">
|
|
<span class="slbl">Features</span>
|
|
<h2 class="stitle">Everything you need to <span class="gt">automate at scale</span></h2>
|
|
<p class="ssub mx-auto">Powerful AI tools for teams that want to move faster and grow without limits.</p>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-4 rv">
|
|
<div class="gc p-4 h-100">
|
|
<div class="ftico"><i class="fa-regular fa-comment-dots"></i></div>
|
|
<h3 class="fs-5 fw-semibold mb-2">AI Chat & Support</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Deploy a context-aware chatbot that resolves 80% of tickets instantly. Trained on your docs, policies, and past conversations.</p>
|
|
<span class="ftag">GPT-4o powered</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.05s">
|
|
<div class="gc p-4 h-100">
|
|
<div class="ftico"><i class="fa-solid fa-bolt"></i></div>
|
|
<h3 class="fs-5 fw-semibold mb-2">Workflow Automation</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Build complex multi-step automations with a visual builder. Connect any app, trigger on any event, run on any schedule.</p>
|
|
<span class="ftag">1000+ integrations</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.1s">
|
|
<div class="gc p-4 h-100">
|
|
<div class="ftico"><i class="fa-solid fa-chart-line"></i></div>
|
|
<h3 class="fs-5 fw-semibold mb-2">Deep Analytics</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Real-time dashboards showing conversation quality, automation performance, and cost savings � all in one place.</p>
|
|
<span class="ftag">Real-time data</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.15s">
|
|
<div class="gc p-4 h-100">
|
|
<div class="ftico"><i class="fa-solid fa-robot"></i></div>
|
|
<h3 class="fs-5 fw-semibold mb-2">AI Agents</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Autonomous agents that browse the web, write code, send emails, update CRMs, and complete complex multi-step tasks independently.</p>
|
|
<span class="ftag">Autonomous</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.2s">
|
|
<div class="gc p-4 h-100">
|
|
<div class="ftico"><i class="fa-solid fa-users"></i></div>
|
|
<h3 class="fs-5 fw-semibold mb-2">Team Collaboration</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Shared workspaces, role-based permissions, conversation handoffs, and live supervision for entire support teams.</p>
|
|
<span class="ftag">Unlimited seats</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.25s">
|
|
<div class="gc p-4 h-100">
|
|
<div class="ftico"><i class="fa-solid fa-code"></i></div>
|
|
<h3 class="fs-5 fw-semibold mb-2">Developer API</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Full REST API and webhooks for custom integrations. SDKs for JavaScript, Python, and Go. Deploy anywhere in your stack.</p>
|
|
<span class="ftag">API-first</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- HOW IT WORKS -->
|
|
<section id="how" class="sp" style="background:var(--bg3)">
|
|
<div class="container">
|
|
<div class="text-center mb-5 rv">
|
|
<span class="slbl">How It Works</span>
|
|
<h2 class="stitle">Up and running in <span class="gt">3 simple steps</span></h2>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-4 rv">
|
|
<div class="gc p-4 h-100 text-center">
|
|
<div class="hnum">1</div>
|
|
<h3 class="fs-5 fw-semibold mb-2">Connect Your Tools</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Link your existing apps � Slack, Notion, CRM, databases � in minutes with our one-click integration library. No code, no API keys, no headaches.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.1s">
|
|
<div class="gc p-4 h-100 text-center">
|
|
<div class="hnum">2</div>
|
|
<h3 class="fs-5 fw-semibold mb-2">Train Your AI</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Upload your documentation, FAQs, and past conversations. NexusAI learns your brand voice, products, and processes in under 10 minutes.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.2s">
|
|
<div class="gc p-4 h-100 text-center">
|
|
<div class="hnum">3</div>
|
|
<h3 class="fs-5 fw-semibold mb-2">Automate & Scale</h3>
|
|
<p style="font-size:.875rem;color:var(--tx2)">Your AI agents go live, handling conversations and workflows 24/7. Monitor performance in real-time and optimize continuously.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- INTEGRATIONS -->
|
|
<section id="integrations" class="sp position-relative">
|
|
<div class="aur aur-b" style="top:50%;right:-200px;transform:translateY(-50%)"></div>
|
|
<div class="container position-relative" style="z-index:1">
|
|
<div class="text-center mb-5 rv">
|
|
<span class="slbl">Integrations</span>
|
|
<h2 class="stitle">Works with your <span class="gt">favorite tools</span></h2>
|
|
<p class="ssub mx-auto">Connect NexusAI with 1,000+ apps. Everything syncs automatically so your AI always has full context.</p>
|
|
</div>
|
|
<div class="row g-3 justify-content-center rv">
|
|
<div class="col-6 col-md-4">
|
|
<div class="gc p-4 text-center h-100">
|
|
<div style="width:52px;height:52px;border-radius:14px;background:rgba(74,21,75,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 14px"><i class="fa-brands fa-slack fa-xl" style="color:#a78bfa"></i></div>
|
|
<div class="fw-semibold mb-1">Slack</div>
|
|
<div style="font-size:.78rem;color:var(--tx3);margin-bottom:8px">Bi-directional sync & AI in channels</div>
|
|
<span class="ftag"><i class="fa-solid fa-check me-1"></i>Connected</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<div class="gc p-4 text-center h-100">
|
|
<div style="width:52px;height:52px;border-radius:14px;background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 14px"><i class="fa-solid fa-book-open fa-xl" style="color:var(--tx2)"></i></div>
|
|
<div class="fw-semibold mb-1">Notion</div>
|
|
<div style="font-size:.78rem;color:var(--tx3);margin-bottom:8px">Train AI on your knowledge base</div>
|
|
<span class="ftag"><i class="fa-solid fa-check me-1"></i>Connected</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<div class="gc p-4 text-center h-100">
|
|
<div style="width:52px;height:52px;border-radius:14px;background:rgba(88,101,242,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 14px"><i class="fa-brands fa-discord fa-xl" style="color:#7289da"></i></div>
|
|
<div class="fw-semibold mb-1">Discord</div>
|
|
<div style="font-size:.78rem;color:var(--tx3);margin-bottom:8px">AI bots & community automation</div>
|
|
<span class="ftag"><i class="fa-solid fa-check me-1"></i>Connected</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<div class="gc p-4 text-center h-100">
|
|
<div style="width:52px;height:52px;border-radius:14px;background:rgba(36,41,47,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 14px"><i class="fa-brands fa-github fa-xl" style="color:var(--tx2)"></i></div>
|
|
<div class="fw-semibold mb-1">GitHub</div>
|
|
<div style="font-size:.78rem;color:var(--tx3);margin-bottom:8px">AI code review & issue automation</div>
|
|
<span class="ftag"><i class="fa-solid fa-check me-1"></i>Connected</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<div class="gc p-4 text-center h-100">
|
|
<div style="width:52px;height:52px;border-radius:14px;background:rgba(255,102,0,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 14px"><i class="fa-solid fa-bolt fa-xl" style="color:#ff6600"></i></div>
|
|
<div class="fw-semibold mb-1">Zapier</div>
|
|
<div style="font-size:.78rem;color:var(--tx3);margin-bottom:8px">Trigger automations across 5000+ apps</div>
|
|
<span class="ftag"><i class="fa-solid fa-check me-1"></i>Connected</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<div class="gc p-4 text-center h-100">
|
|
<div style="width:52px;height:52px;border-radius:14px;background:rgba(52,168,83,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 14px"><i class="fa-brands fa-google-drive fa-xl" style="color:#34d399"></i></div>
|
|
<div class="fw-semibold mb-1">Google Drive</div>
|
|
<div style="font-size:.78rem;color:var(--tx3);margin-bottom:8px">AI reads & writes your documents</div>
|
|
<span class="ftag"><i class="fa-solid fa-check me-1"></i>Connected</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- PRICING -->
|
|
<section id="pricing" class="sp position-relative" style="background:var(--bg2)">
|
|
<div class="aur aur-a" style="top:50%;left:50%;transform:translate(-50%,-50%)"></div>
|
|
<div class="container position-relative" style="z-index:1">
|
|
<div class="text-center mb-5 rv">
|
|
<span class="slbl">Pricing</span>
|
|
<h2 class="stitle">Simple, <span class="gt">transparent pricing</span></h2>
|
|
<p class="ssub mx-auto">Start for free, scale as you grow. No hidden fees, no surprises.</p>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-center gap-3 mb-5 rv">
|
|
<span style="font-size:.9rem;color:var(--tx2);font-weight:500">Monthly</span>
|
|
<div style="position:relative;width:52px;height:28px"><input type="checkbox" id="ptog" style="position:absolute;opacity:0;width:0;height:0"><label for="ptog" id="ptogLabel" style="position:absolute;inset:0;background:var(--sf);border:1px solid var(--bd2);border-radius:100px;cursor:pointer;transition:.3s"><span id="ptogThumb" style="position:absolute;width:20px;height:20px;left:3px;top:3px;background:var(--grad);border-radius:50%;transition:.3s;display:block"></span></label></div>
|
|
<span style="font-size:.9rem;color:var(--tx2);font-weight:500">Yearly</span>
|
|
<span style="background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.25);color:#34d399;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:100px"><i class="fa-solid fa-tag me-1"></i>Save 30%</span>
|
|
</div>
|
|
<div class="row g-4 align-items-start rv">
|
|
<div class="col-md-4">
|
|
<div class="pcard h-100">
|
|
<div style="font-size:.82rem;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px">Starter</div>
|
|
<div class="pamt mb-1"><sup>$</sup><span class="pv" data-m="29" data-y="19">29</span></div>
|
|
<div style="font-size:.82rem;color:var(--tx3)" class="pper">per month, billed monthly</div>
|
|
<p style="font-size:.875rem;color:var(--tx2);margin:14px 0 20px;padding-bottom:20px;border-bottom:1px solid var(--bd)">Perfect for small teams getting started with AI automation.</p>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>1,000 AI conversations/mo</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>3 AI agents</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>50+ integrations</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>Basic analytics</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>Email support</div>
|
|
<button class="boc btn w-100 py-2 mt-4" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="swTab('signup')">Start Free Trial</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="pcard pop h-100">
|
|
<span class="pbadge"><i class="fa-solid fa-star me-1"></i>Most Popular</span>
|
|
<div style="font-size:.82rem;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px">Pro</div>
|
|
<div class="pamt mb-1"><sup>$</sup><span class="pv" data-m="79" data-y="55">79</span></div>
|
|
<div style="font-size:.82rem;color:var(--tx3)" class="pper">per month, billed monthly</div>
|
|
<p style="font-size:.875rem;color:var(--tx2);margin:14px 0 20px;padding-bottom:20px;border-bottom:1px solid var(--bd)">For growing teams that need powerful automation and analytics.</p>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>Unlimited AI conversations</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>20 AI agents</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>1,000+ integrations</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>Advanced analytics + API</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>Priority 24/7 support</div>
|
|
<button class="bgrd btn w-100 py-2 mt-4" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="swTab('signup')">Get Started <i class="fa-solid fa-arrow-right ms-1 fa-sm"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="pcard h-100">
|
|
<div style="font-size:.82rem;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px">Enterprise</div>
|
|
<div style="font-size:2.2rem;font-weight:700;margin-bottom:4px;padding-top:4px">Custom</div>
|
|
<div style="font-size:.82rem;color:var(--tx3)">contact us for pricing</div>
|
|
<p style="font-size:.875rem;color:var(--tx2);margin:14px 0 20px;padding-bottom:20px;border-bottom:1px solid var(--bd)">For large teams with advanced security and compliance needs.</p>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>Unlimited everything</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>Custom AI fine-tuning</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>SSO & SAML</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>99.99% SLA + dedicated manager</div>
|
|
<div class="pfl"><span class="pchk"><i class="fa-solid fa-check"></i></span>On-premises deployment</div>
|
|
<button class="boc btn w-100 py-2 mt-4">Talk to Sales</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- TESTIMONIALS -->
|
|
<section id="testimonials" class="sp">
|
|
<div class="container">
|
|
<div class="text-center mb-5 rv">
|
|
<span class="slbl">Testimonials</span>
|
|
<h2 class="stitle">Loved by <span class="gt">10,000+ teams</span></h2>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-4 rv">
|
|
<div class="gc p-4 h-100">
|
|
<div class="d-flex gap-1 mb-3"><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i></div>
|
|
<p style="font-size:.875rem;color:var(--tx2);line-height:1.65;font-style:italic;margin-bottom:18px">"NexusAI reduced our support ticket volume by 78% in the first month. It's like hiring a 50-person support team overnight."</p>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<img class="tav" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face" alt="Sarah">
|
|
<div>
|
|
<div style="font-size:.88rem;font-weight:600">Sarah Chen</div>
|
|
<div style="font-size:.76rem;color:var(--tx3)">Head of CX, Stripe</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.1s">
|
|
<div class="gc p-4 h-100">
|
|
<div class="d-flex gap-1 mb-3"><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i></div>
|
|
<p style="font-size:.875rem;color:var(--tx2);line-height:1.65;font-style:italic;margin-bottom:18px">"Response quality is genuinely better than most human agents. The Slack integration means our AI always has full context."</p>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<img class="tav" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face" alt="Marcus">
|
|
<div>
|
|
<div style="font-size:.88rem;font-weight:600">Marcus Johnson</div>
|
|
<div style="font-size:.76rem;color:var(--tx3)">CTO, Linear</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 rv" style="transition-delay:.2s">
|
|
<div class="gc p-4 h-100">
|
|
<div class="d-flex gap-1 mb-3"><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i><i class="fa-solid fa-star text-warning"></i></div>
|
|
<p style="font-size:.875rem;color:var(--tx2);line-height:1.65;font-style:italic;margin-bottom:18px">"$18K saved in the first month just from automated support. The ROI was immediate and staggering."</p>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<img class="tav" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face" alt="Priya">
|
|
<div>
|
|
<div style="font-size:.88rem;font-weight:600">Priya Patel</div>
|
|
<div style="font-size:.76rem;color:var(--tx3)">COO, Vercel</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- FAQ -->
|
|
<section id="faq" class="sp" style="background:var(--bg2)">
|
|
<div class="container">
|
|
<div class="text-center mb-5 rv">
|
|
<span class="slbl">FAQ</span>
|
|
<h2 class="stitle">Common <span class="gt">questions</span></h2>
|
|
</div>
|
|
<div class="row justify-content-center rv">
|
|
<div class="col-lg-8">
|
|
<div class="accordion acco" id="faqAcc">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#f1">How long does it take to set up NexusAI?</button></h2>
|
|
<div id="f1" class="accordion-collapse collapse show" data-bs-parent="#faqAcc">
|
|
<div class="accordion-body">Most teams are fully live within 24 hours. Connect your tools, upload your documentation, and your AI agents are ready. No engineering work required.</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#f2">What AI models does NexusAI use?</button></h2>
|
|
<div id="f2" class="accordion-collapse collapse" data-bs-parent="#faqAcc">
|
|
<div class="accordion-body">We support GPT-4o, Claude 3.5 Sonnet, Gemini Pro, and Llama 3. You choose the model per agent based on cost and performance requirements.</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#f3">Is my data secure and private?</button></h2>
|
|
<div id="f3" class="accordion-collapse collapse" data-bs-parent="#faqAcc">
|
|
<div class="accordion-body">Absolutely. All data is encrypted at rest and in transit. We are SOC 2 Type II certified and GDPR compliant. Your data is never used to train AI models.</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#f4">Do you offer a free trial?</button></h2>
|
|
<div id="f4" class="accordion-collapse collapse" data-bs-parent="#faqAcc">
|
|
<div class="accordion-body">Yes � 14 days free on any plan, no credit card required. You get access to all features. If you're not satisfied, we'll give you a full refund, no questions asked.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- FINAL CTA -->
|
|
<section id="cta">
|
|
<div class="aur aur-a" style="top:50%;left:50%;transform:translate(-50%,-50%)"></div>
|
|
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(139,92,246,.2),transparent 70%);pointer-events:none"></div>
|
|
<div class="container position-relative" style="z-index:2">
|
|
<div class="rv">
|
|
<span class="hbadge mb-4 d-inline-flex"><span class="bdot"></span>14-day free trial � No credit card required</span>
|
|
<h2 style="font-size:clamp(2rem,5vw,3.8rem);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-bottom:18px">Ready to automate your<br><span class="gt">entire business?</span></h2>
|
|
<p style="font-size:1.05rem;color:var(--tx2);max-width:500px;margin:0 auto 36px">Join 50,000+ teams using NexusAI to save time, cut costs, and deliver exceptional customer experiences.</p>
|
|
<div class="d-flex align-items-center justify-content-center gap-3 flex-wrap">
|
|
<button class="bgrd btn px-4 py-3 fs-6" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="swTab('signup')">Start Free Today <i class="fa-solid fa-arrow-right ms-1"></i></button>
|
|
<button class="boc btn px-4 py-3 fs-6"><i class="fa-regular fa-comment-dots me-2"></i>Talk to Sales</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- FOOTER -->
|
|
<footer id="foot">
|
|
<div class="container">
|
|
<div class="row g-5 mb-5">
|
|
<div class="col-lg-4">
|
|
<a class="d-flex align-items-center gap-2 mb-3" href="#" style="font-size:1.15rem;font-weight:700;color:var(--tx)">
|
|
<div class="logo-i"><i class="fa-solid fa-layer-group"></i></div>
|
|
NexusAI
|
|
</a>
|
|
<p style="font-size:.875rem;color:var(--tx3);line-height:1.65;max-width:280px">The most powerful AI automation platform for modern teams.</p>
|
|
<div class="d-flex gap-2 mt-3"><input class="nli" type="email" placeholder="your@email.com" style="max-width:200px"><button class="bgrd btn px-3 py-2" style="font-size:.85rem;white-space:nowrap">Subscribe</button></div>
|
|
</div>
|
|
<div class="col-6 col-md-2 fcol">
|
|
<h5>Product</h5>
|
|
<a href="#">Features</a><a href="#">Integrations</a><a href="#">Pricing</a><a href="#">Changelog</a><a href="#">Status</a>
|
|
</div>
|
|
<div class="col-6 col-md-2 fcol">
|
|
<h5>Resources</h5>
|
|
<a href="#">Documentation</a><a href="#">API Reference</a><a href="#">Blog</a><a href="#">Case Studies</a><a href="#">Community</a>
|
|
</div>
|
|
<div class="col-6 col-md-2 fcol">
|
|
<h5>Company</h5>
|
|
<a href="#">About</a><a href="#">Careers</a><a href="#">Press</a><a href="#">Privacy</a><a href="#">Terms</a>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3 pt-4" style="border-top:1px solid var(--bd)">
|
|
<p style="font-size:.8rem;color:var(--tx3);margin:0">� 2025 NexusAI, Inc. All rights reserved by <a target="_blank" class="text-primary fw-bold" href="https://bestwpware.com/">Bestwpware</a> <br> Distributed by <a target="_blank" class="text-primary fw-bold" href="https://themewagon.com">ThemeWagon</a> </p>
|
|
<div class="d-flex gap-2"><a href="#" class="sico"><i class="fa-brands fa-x-twitter"></i></a><a href="#" class="sico"><i class="fa-brands fa-github"></i></a><a href="#" class="sico"><i class="fa-brands fa-linkedin-in"></i></a><a href="#" class="sico"><i class="fa-brands fa-discord"></i></a></div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<!-- /landing -->
|
|
<!-- ======================== LOGIN OFFCANVAS ======================== -->
|
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="lofc">
|
|
<div class="offcanvas-header">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="logo-i" style="width:30px;height:30px;font-size:.8rem"><i class="fa-solid fa-layer-group"></i></div>
|
|
<h5 class="offcanvas-title mb-0">NexusAI</h5>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" style="filter:invert(1)"></button>
|
|
</div>
|
|
<div class="offcanvas-body p-4">
|
|
<div class="tab-switch"><button class="tab-sw-btn on" id="tabLogin" onclick="swTab('login')">Log In</button><button class="tab-sw-btn" id="tabSignup" onclick="swTab('signup')">Sign Up</button></div>
|
|
<!-- Login -->
|
|
<div id="fLogin">
|
|
<div id="loginErr" class="err-msg"><i class="fa-solid fa-circle-exclamation me-1"></i><span id="loginErrMsg">Invalid email or password.</span></div>
|
|
<label class="olbl"><i class="fa-regular fa-envelope me-1"></i>Email address</label>
|
|
<input class="oinp" type="email" id="loginEmail" placeholder="you@company.com">
|
|
<label class="olbl"><i class="fa-solid fa-lock me-1"></i>Password</label>
|
|
<input class="oinp" type="password" id="loginPass" placeholder="********">
|
|
<div class="text-end mb-3" style="margin-top:-8px"><a href="#" style="font-size:.8rem;color:var(--pur)">Forgot password?</a></div>
|
|
<button class="bgrd btn w-100 py-3 fw-semibold fs-6" id="loginBtn" onclick="doLogin()">Log In <i class="fa-solid fa-arrow-right ms-1 fa-sm"></i></button>
|
|
<div class="odiv">or continue with</div>
|
|
<button class="oauth" onclick="quickLogin('google')"><i class="fa-brands fa-google me-2"></i>Continue with Google</button>
|
|
<button class="oauth" onclick="quickLogin('github')"><i class="fa-brands fa-github me-2"></i>Continue with GitHub</button>
|
|
<p class="text-center mt-4" style="font-size:.82rem;color:var(--tx3)">Don't have an account? <a href="#" style="color:var(--pur)" onclick="swTab('signup');return false">Sign up free</a></p>
|
|
</div>
|
|
<!-- Sign Up -->
|
|
<div id="fSignup" style="display:none">
|
|
<div id="signupErr" class="err-msg"><i class="fa-solid fa-circle-exclamation me-1"></i><span id="signupErrMsg">Please fill all fields.</span></div>
|
|
<label class="olbl"><i class="fa-regular fa-user me-1"></i>Full name</label>
|
|
<input class="oinp" type="text" id="signupName" placeholder="Jane Smith">
|
|
<label class="olbl"><i class="fa-regular fa-envelope me-1"></i>Work email</label>
|
|
<input class="oinp" type="email" id="signupEmail" placeholder="you@company.com">
|
|
<label class="olbl"><i class="fa-solid fa-lock me-1"></i>Password</label>
|
|
<input class="oinp" type="password" id="signupPass" placeholder="Min. 8 characters">
|
|
<button class="bgrd btn w-100 py-3 fw-semibold fs-6" id="signupBtn" onclick="doSignup()">Create Free Account <i class="fa-solid fa-arrow-right ms-1 fa-sm"></i></button>
|
|
<div class="odiv">or sign up with</div>
|
|
<button class="oauth" onclick="quickLogin('google')"><i class="fa-brands fa-google me-2"></i>Continue with Google</button>
|
|
<button class="oauth" onclick="quickLogin('github')"><i class="fa-brands fa-github me-2"></i>Continue with GitHub</button>
|
|
<p class="text-center mt-3" style="font-size:.76rem;color:var(--tx3)">By signing up, you agree to our <a href="#" style="color:var(--pur)">Terms</a> & <a href="#" style="color:var(--pur)">Privacy Policy</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ======================== DASHBOARD ======================== -->
|
|
<div id="dashboard">
|
|
<!-- Sidebar -->
|
|
<div class="db-sidebar" id="dbSidebar">
|
|
<div class="db-logo">
|
|
<div class="logo-i"><i class="fa-solid fa-layer-group"></i></div>
|
|
<span>NexusAI</span>
|
|
</div>
|
|
<div class="db-nav">
|
|
<div class="db-nav-section">Main</div>
|
|
<button class="db-nl active" onclick="dbNav('overview',this)"><i class="fa-solid fa-gauge-high"></i> Overview</button>
|
|
<button class="db-nl" onclick="dbNav('agents',this)"><i class="fa-solid fa-robot"></i> AI Agents <span class="db-badge">4</span></button>
|
|
<button class="db-nl" onclick="dbNav('chat',this)"><i class="fa-regular fa-comments"></i> AI Chat <span class="db-badge" style="background:#34d399">Live</span></button>
|
|
<button class="db-nl" onclick="dbNav('analytics',this)"><i class="fa-solid fa-chart-line"></i> Analytics</button>
|
|
<button class="db-nl" onclick="dbNav('automations',this)"><i class="fa-solid fa-bolt"></i> Automations</button>
|
|
<div class="db-nav-section">Workspace</div>
|
|
<button class="db-nl" onclick="dbNav('integrations',this)"><i class="fa-solid fa-plug"></i> Integrations</button>
|
|
<button class="db-nl" onclick="dbNav('settings',this)"><i class="fa-solid fa-gear"></i> Settings</button>
|
|
</div>
|
|
<div class="db-bottom">
|
|
<button class="db-nl" onclick="doLogout()" style="color:#f87171"><i class="fa-solid fa-right-from-bracket"></i> Log Out</button>
|
|
</div>
|
|
</div>
|
|
<!-- Top bar -->
|
|
<div class="db-top">
|
|
<button class="boc d-lg-none me-2 px-2 py-2" style="border-radius:10px;width:38px;height:38px" onclick="document.getElementById('dbSidebar').classList.toggle('mob-open')">
|
|
<i class="fa-solid fa-bars"></i>
|
|
</button>
|
|
<div class="db-top-search">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
<input type="text" placeholder="Search agents, conversations...">
|
|
</div>
|
|
<div class="ms-auto d-flex align-items-center gap-3">
|
|
<button class="boc d-flex align-items-center justify-content-center" id="dbThBtn" style="width:38px;height:38px;padding:0;border-radius:12px" onclick="toggleTheme()">
|
|
<i class="fa-solid fa-sun" id="dbSunI" style="display:none"></i>
|
|
<i class="fa-solid fa-moon" id="dbMoonI"></i>
|
|
</button>
|
|
<div style="position:relative" id="notifWrap">
|
|
<button class="boc d-flex align-items-center justify-content-center" id="bellBtn" style="width:38px;height:38px;padding:0;border-radius:12px" onclick="toggleNotif(event)">
|
|
<i class="fa-regular fa-bell"></i>
|
|
</button>
|
|
<span id="notifBadge" style="position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:#f87171;border:2px solid var(--bg)"></span>
|
|
<!-- Notification Dropdown -->
|
|
<div class="db-dropdown" id="notifDropdown" style="right:0;min-width:360px">
|
|
<div class="dd-header">
|
|
<div class="dd-header-title"><i class="fa-regular fa-bell me-2" style="color:var(--pur)"></i>Notifications <span id="unreadCount" style="background:rgba(248,113,113,.15);color:#f87171;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:100px;margin-left:6px">4 new</span></div>
|
|
<div class="d-flex gap-2">
|
|
<button class="dd-close" onclick="markAllRead()" title="Mark all read" style="width:auto;padding:4px 10px;font-size:.72rem;color:var(--pur);border-color:rgba(139,92,246,.3)">Mark all read</button>
|
|
<button class="dd-close" onclick="toggleNotif(event)"><i class="fa-solid fa-xmark"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="dd-body" id="notifList">
|
|
<div class="notif-item notif-unread d-flex gap-3 mb-2">
|
|
<div class="notif-ico" style="background:rgba(248,113,113,.12)"><i class="fa-solid fa-triangle-exclamation" style="color:#f87171;font-size:.9rem"></i></div>
|
|
<div style="flex:1">
|
|
<div style="font-size:.85rem;font-weight:600;margin-bottom:3px">High ticket volume alert</div>
|
|
<div style="font-size:.78rem;color:var(--tx2)">Support Bot handling 23% above average. Consider scaling agents.</div>
|
|
<div style="font-size:.7rem;color:var(--tx3);margin-top:5px"><i class="fa-regular fa-clock me-1"></i>2 minutes ago</div>
|
|
</div>
|
|
<div class="notif-dot"></div>
|
|
</div>
|
|
<div class="notif-item notif-unread d-flex gap-3 mb-2">
|
|
<div class="notif-ico" style="background:rgba(52,211,153,.12)"><i class="fa-solid fa-chart-line" style="color:#34d399;font-size:.9rem"></i></div>
|
|
<div style="flex:1">
|
|
<div style="font-size:.85rem;font-weight:600;margin-bottom:3px">Daily goal reached ??</div>
|
|
<div style="font-size:.78rem;color:var(--tx2)">Your AI agents resolved 1,000 conversations today � a new record!</div>
|
|
<div style="font-size:.7rem;color:var(--tx3);margin-top:5px"><i class="fa-regular fa-clock me-1"></i>18 minutes ago</div>
|
|
</div>
|
|
<div class="notif-dot"></div>
|
|
</div>
|
|
<div class="notif-item notif-unread d-flex gap-3 mb-2">
|
|
<div class="notif-ico" style="background:rgba(139,92,246,.12)"><i class="fa-brands fa-slack" style="color:#a78bfa;font-size:.9rem"></i></div>
|
|
<div style="flex:1">
|
|
<div style="font-size:.85rem;font-weight:600;margin-bottom:3px">Slack sync completed</div>
|
|
<div style="font-size:.78rem;color:var(--tx2)">#support channel successfully synced. 47 new threads indexed for AI training.</div>
|
|
<div style="font-size:.7rem;color:var(--tx3);margin-top:5px"><i class="fa-regular fa-clock me-1"></i>1 hour ago</div>
|
|
</div>
|
|
<div class="notif-dot"></div>
|
|
</div>
|
|
<div class="notif-item notif-unread d-flex gap-3 mb-2">
|
|
<div class="notif-ico" style="background:rgba(245,158,11,.1)"><i class="fa-solid fa-robot" style="color:#fbbf24;font-size:.9rem"></i></div>
|
|
<div style="flex:1">
|
|
<div style="font-size:.85rem;font-weight:600;margin-bottom:3px">Agent update available</div>
|
|
<div style="font-size:.78rem;color:var(--tx2)">Support Bot v2.2 is ready. Improved accuracy by 4.3% on billing queries.</div>
|
|
<div style="font-size:.7rem;color:var(--tx3);margin-top:5px"><i class="fa-regular fa-clock me-1"></i>3 hours ago</div>
|
|
</div>
|
|
<div class="notif-dot"></div>
|
|
</div>
|
|
<div class="notif-item d-flex gap-3 mb-2">
|
|
<div class="notif-ico" style="background:rgba(59,130,246,.1)"><i class="fa-solid fa-file-lines" style="color:#60a5fa;font-size:.9rem"></i></div>
|
|
<div style="flex:1">
|
|
<div style="font-size:.85rem;font-weight:600;margin-bottom:3px">Weekly report ready</div>
|
|
<div style="font-size:.78rem;color:var(--tx2)">Your performance report for last week is ready to download.</div>
|
|
<div style="font-size:.7rem;color:var(--tx3);margin-top:5px"><i class="fa-regular fa-clock me-1"></i>Yesterday</div>
|
|
</div>
|
|
<div class="notif-dot read"></div>
|
|
</div>
|
|
<div class="notif-item d-flex gap-3 mb-2">
|
|
<div class="notif-ico" style="background:rgba(52,211,153,.1)"><i class="fa-solid fa-plug" style="color:#34d399;font-size:.9rem"></i></div>
|
|
<div style="flex:1">
|
|
<div style="font-size:.85rem;font-weight:600;margin-bottom:3px">GitHub integration connected</div>
|
|
<div style="font-size:.78rem;color:var(--tx2)">Successfully connected 2 repositories. AI code review is now active.</div>
|
|
<div style="font-size:.7rem;color:var(--tx3);margin-top:5px"><i class="fa-regular fa-clock me-1"></i>2 days ago</div>
|
|
</div>
|
|
<div class="notif-dot read"></div>
|
|
</div>
|
|
</div>
|
|
<div style="padding:12px 14px;border-top:1px solid var(--bd);text-align:center">
|
|
<button class="boc btn w-100 py-2" style="font-size:.82rem;border-radius:10px"><i class="fa-solid fa-list me-1"></i>View All Notifications</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="position:relative" id="profileWrap">
|
|
<div class="db-user-pill" id="userPill" onclick="toggleProfile(event)">
|
|
<div class="db-avatar" id="userAvatar">U</div>
|
|
<div class="d-none d-md-block">
|
|
<div style="font-size:.85rem;font-weight:600;line-height:1.2" id="userName">User</div>
|
|
<div style="font-size:.72rem;color:var(--tx3)" id="userPlan">Pro Plan</div>
|
|
</div>
|
|
<i class="fa-solid fa-chevron-down fa-xs" id="profileChevron" style="color:var(--tx3);margin-left:2px;transition:.3s"></i>
|
|
</div>
|
|
<!-- Profile Dropdown -->
|
|
<div class="db-dropdown profile-dd" id="profileDropdown" style="right:0">
|
|
<div class="profile-dd-top">
|
|
<div class="db-avatar" id="pdAvatar" style="width:46px;height:46px;border-radius:14px;font-size:1rem;flex-shrink:0">U</div>
|
|
<div>
|
|
<div style="font-weight:700;font-size:.95rem" id="pdName">User</div>
|
|
<div style="font-size:.78rem;color:var(--tx3)" id="pdEmail">user@email.com</div>
|
|
<div style="margin-top:5px"><span class="bst son" style="font-size:.68rem" id="pdPlan">Pro Plan</span></div>
|
|
</div>
|
|
</div>
|
|
<div style="padding:8px 0">
|
|
<button class="profile-menu-item" onclick="dbNav('settings',document.querySelector('[onclick*=settings]'));toggleProfile()"><i class="fa-regular fa-user" style="color:var(--pur)"></i>My Profile</button>
|
|
<button class="profile-menu-item" onclick="dbNav('settings',document.querySelector('[onclick*=settings]'));toggleProfile()"><i class="fa-solid fa-gear" style="color:var(--tx3)"></i>Account Settings</button>
|
|
<button class="profile-menu-item" onclick="dbNav('integrations',document.querySelector('[onclick*=integrations]'));toggleProfile()"><i class="fa-solid fa-plug" style="color:#60a5fa"></i>Integrations</button>
|
|
<button class="profile-menu-item" onclick="dbNav('chat',document.querySelector('[onclick*=chat]'));toggleProfile()"><i class="fa-solid fa-robot" style="color:#34d399"></i>AI Chat Console</button>
|
|
<div style="height:1px;background:var(--bd);margin:8px 16px"></div>
|
|
<div style="padding:8px 16px 4px">
|
|
<div style="font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:8px">Current Plan</div>
|
|
<div style="background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(59,130,246,.08));border:1px solid rgba(139,92,246,.25);border-radius:12px;padding:12px">
|
|
<div style="font-weight:700;font-size:.88rem;margin-bottom:3px" id="pdPlanDetail">Pro Plan</div>
|
|
<div style="font-size:.76rem;color:var(--tx2);margin-bottom:8px">Next billing: June 1, 2025</div>
|
|
<button class="bgrd btn w-100 py-1" style="font-size:.75rem;border-radius:8px">Upgrade to Enterprise</button>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px;background:var(--bd);margin:8px 16px"></div>
|
|
<button class="profile-menu-item danger" onclick="doLogout();toggleProfile()"><i class="fa-solid fa-right-from-bracket" style="color:#f87171"></i>Log Out</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Content -->
|
|
<div class="db-main">
|
|
<div class="db-content">
|
|
<!-- -- OVERVIEW -- -->
|
|
<div class="db-section active" id="sec-overview">
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<div>
|
|
<h4 class="fw-700 mb-1" style="font-size:1.4rem;font-weight:700">Good morning, <span id="greetName">User</span> ??</h4>
|
|
<p style="font-size:.875rem;color:var(--tx3);margin:0">Here's what's happening with your AI agents today.</p>
|
|
</div>
|
|
<button class="bgrd btn px-3 py-2" style="font-size:.85rem;white-space:nowrap" onclick="dbNav('chat',document.querySelector('[onclick*=chat]'))"><i class="fa-solid fa-robot me-2"></i>Ask AI Agent</button>
|
|
</div>
|
|
<!-- Stat cards -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-6 col-xl-3">
|
|
<div class="db-stat-card">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div style="width:38px;height:38px;border-radius:11px;background:rgba(139,92,246,.15);display:flex;align-items:center;justify-content:center"><i class="fa-regular fa-comments" style="color:#a78bfa"></i></div>
|
|
<span style="font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:100px;background:rgba(52,211,153,.1);color:#34d399">? 18.4%</span>
|
|
</div>
|
|
<div class="db-stat-val gt">24.8K</div>
|
|
<div class="db-stat-lbl">Total Conversations</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-3">
|
|
<div class="db-stat-card">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div style="width:38px;height:38px;border-radius:11px;background:rgba(52,211,153,.12);display:flex;align-items:center;justify-content:center"><i class="fa-solid fa-bullseye" style="color:#34d399"></i></div>
|
|
<span style="font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:100px;background:rgba(52,211,153,.1);color:#34d399">? 3.1%</span>
|
|
</div>
|
|
<div class="db-stat-val" style="color:#34d399">98.2%</div>
|
|
<div class="db-stat-lbl">Resolution Rate</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-3">
|
|
<div class="db-stat-card">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div style="width:38px;height:38px;border-radius:11px;background:rgba(59,130,246,.12);display:flex;align-items:center;justify-content:center"><i class="fa-regular fa-clock" style="color:#60a5fa"></i></div>
|
|
<span style="font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:100px;background:rgba(59,130,246,.1);color:#60a5fa">? 0.3s faster</span>
|
|
</div>
|
|
<div class="db-stat-val" style="color:#60a5fa">1.4s</div>
|
|
<div class="db-stat-lbl">Avg Response Time</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-3">
|
|
<div class="db-stat-card">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div style="width:38px;height:38px;border-radius:11px;background:rgba(245,158,11,.1);display:flex;align-items:center;justify-content:center"><i class="fa-solid fa-coins" style="color:#fbbf24"></i></div>
|
|
<span style="font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:100px;background:rgba(245,158,11,.1);color:#fbbf24">? 31%</span>
|
|
</div>
|
|
<div class="db-stat-val" style="color:#fbbf24">$18.2K</div>
|
|
<div class="db-stat-lbl">Monthly Cost Savings</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chart + Activity -->
|
|
<div class="row g-3">
|
|
<div class="col-lg-8">
|
|
<div style="background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:24px">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div style="font-weight:600"><i class="fa-solid fa-chart-area me-2" style="color:var(--pur)"></i>Conversation Volume</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">Last 30 days</div>
|
|
</div>
|
|
<canvas id="ovChart" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div style="background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:20px;height:100%">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div style="font-weight:600;font-size:.9rem">Live Activity</div>
|
|
<div class="d-flex align-items-center gap-2"><span style="width:7px;height:7px;border-radius:50%;background:#34d399;animation:bpls 1.5s infinite"></span><span style="font-size:.72rem;color:#34d399;font-weight:600">Live</span></div>
|
|
</div>
|
|
<div id="liveActivity" style="display:flex;flex-direction:column;gap:8px">
|
|
<div style="display:flex;gap:10px;padding:10px;background:var(--bg3);border-radius:10px;font-size:.78rem"><span style="width:7px;height:7px;border-radius:50%;background:#34d399;margin-top:4px;flex-shrink:0"></span><span style="color:var(--tx2)">AI resolved billing query for user@acme.com</span><span style="margin-left:auto;color:var(--tx3);white-space:nowrap">2s ago</span></div>
|
|
<div style="display:flex;gap:10px;padding:10px;background:var(--bg3);border-radius:10px;font-size:.78rem"><span style="width:7px;height:7px;border-radius:50%;background:#8b5cf6;margin-top:4px;flex-shrink:0"></span><span style="color:var(--tx2)">Sales agent qualified lead from LinkedIn</span><span style="margin-left:auto;color:var(--tx3);white-space:nowrap">18s ago</span></div>
|
|
<div style="display:flex;gap:10px;padding:10px;background:var(--bg3);border-radius:10px;font-size:.78rem"><span style="width:7px;height:7px;border-radius:50%;background:#34d399;margin-top:4px;flex-shrink:0"></span><span style="color:var(--tx2)">CRM synced � 12 contacts updated</span><span style="margin-left:auto;color:var(--tx3);white-space:nowrap">45s ago</span></div>
|
|
<div style="display:flex;gap:10px;padding:10px;background:var(--bg3);border-radius:10px;font-size:.78rem"><span style="width:7px;height:7px;border-radius:50%;background:#fbbf24;margin-top:4px;flex-shrink:0"></span><span style="color:var(--tx2)">Escalation: complex refund case ? human</span><span style="margin-left:auto;color:var(--tx3);white-space:nowrap">1m ago</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- -- AI AGENTS -- -->
|
|
<div class="db-section" id="sec-agents">
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<div>
|
|
<h4 style="font-size:1.4rem;font-weight:700;margin-bottom:4px">AI Agents</h4>
|
|
<p style="font-size:.875rem;color:var(--tx3);margin:0">Manage and monitor your deployed AI agents.</p>
|
|
</div>
|
|
<button class="bgrd btn px-3 py-2" style="font-size:.85rem"><i class="fa-solid fa-plus me-2"></i>Deploy New Agent</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="agent-card">
|
|
<div class="d-flex align-items-start gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0"><i class="fa-solid fa-headset" style="color:#34d399;font-size:1.1rem"></i></div>
|
|
<div style="flex:1">
|
|
<div class="d-flex align-items-center gap-2 mb-1"><strong>Support Bot v2.1</strong><span style="width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399"></span></div>
|
|
<div style="font-size:.78rem;color:var(--tx3)">Customer Support � GPT-4o</div>
|
|
</div>
|
|
<span class="bst son">Online</span>
|
|
</div>
|
|
<div class="row g-2 mb-3">
|
|
<div class="col-6">
|
|
<div style="background:var(--bg3);border-radius:10px;padding:10px">
|
|
<div style="font-size:1.1rem;font-weight:700">1,248</div>
|
|
<div style="font-size:.7rem;color:var(--tx3)">Chats today</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div style="background:var(--bg3);border-radius:10px;padding:10px">
|
|
<div style="font-size:1.1rem;font-weight:700;color:#34d399">96.4%</div>
|
|
<div style="font-size:.7rem;color:var(--tx3)">Success rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2"><button class="boc btn flex-fill py-2" style="font-size:.82rem"><i class="fa-solid fa-eye me-1"></i>View</button><button class="bgrd btn flex-fill py-2" style="font-size:.82rem"><i class="fa-solid fa-sliders me-1"></i>Configure</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="agent-card">
|
|
<div class="d-flex align-items-start gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0"><i class="fa-solid fa-handshake" style="color:#a78bfa;font-size:1.1rem"></i></div>
|
|
<div style="flex:1">
|
|
<div class="d-flex align-items-center gap-2 mb-1"><strong>Sales Qualifier</strong><span style="width:9px;height:9px;border-radius:50%;background:#8b5cf6;box-shadow:0 0 8px #8b5cf6"></span></div>
|
|
<div style="font-size:.78rem;color:var(--tx3)">Sales Automation � Claude 3.5</div>
|
|
</div>
|
|
<span class="bst sbz">Busy</span>
|
|
</div>
|
|
<div class="row g-2 mb-3">
|
|
<div class="col-6">
|
|
<div style="background:var(--bg3);border-radius:10px;padding:10px">
|
|
<div style="font-size:1.1rem;font-weight:700">347</div>
|
|
<div style="font-size:.7rem;color:var(--tx3)">Leads qualified</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div style="background:var(--bg3);border-radius:10px;padding:10px">
|
|
<div style="font-size:1.1rem;font-weight:700;color:#a78bfa">78.2%</div>
|
|
<div style="font-size:.7rem;color:var(--tx3)">Conv. rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2"><button class="boc btn flex-fill py-2" style="font-size:.82rem"><i class="fa-solid fa-eye me-1"></i>View</button><button class="bgrd btn flex-fill py-2" style="font-size:.82rem"><i class="fa-solid fa-sliders me-1"></i>Configure</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="agent-card">
|
|
<div class="d-flex align-items-start gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0"><i class="fa-solid fa-chart-bar" style="color:#60a5fa;font-size:1.1rem"></i></div>
|
|
<div style="flex:1">
|
|
<div class="d-flex align-items-center gap-2 mb-1"><strong>Data Analyzer</strong><span style="width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399"></span></div>
|
|
<div style="font-size:.78rem;color:var(--tx3)">Analytics � Gemini Pro</div>
|
|
</div>
|
|
<span class="bst son">Online</span>
|
|
</div>
|
|
<div class="row g-2 mb-3">
|
|
<div class="col-6">
|
|
<div style="background:var(--bg3);border-radius:10px;padding:10px">
|
|
<div style="font-size:1.1rem;font-weight:700">92</div>
|
|
<div style="font-size:.7rem;color:var(--tx3)">Reports generated</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div style="background:var(--bg3);border-radius:10px;padding:10px">
|
|
<div style="font-size:1.1rem;font-weight:700;color:#60a5fa">100%</div>
|
|
<div style="font-size:.7rem;color:var(--tx3)">Accuracy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2"><button class="boc btn flex-fill py-2" style="font-size:.82rem"><i class="fa-solid fa-eye me-1"></i>View</button><button class="bgrd btn flex-fill py-2" style="font-size:.82rem"><i class="fa-solid fa-sliders me-1"></i>Configure</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="agent-card">
|
|
<div class="d-flex align-items-start gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0"><i class="fa-solid fa-envelope" style="color:#fbbf24;font-size:1.1rem"></i></div>
|
|
<div style="flex:1">
|
|
<div class="d-flex align-items-center gap-2 mb-1"><strong>Email Automator</strong><span style="width:9px;height:9px;border-radius:50%;background:#f59e0b"></span></div>
|
|
<div style="font-size:.78rem;color:var(--tx3)">Email Marketing � GPT-4o</div>
|
|
</div>
|
|
<span class="bst sid">Idle</span>
|
|
</div>
|
|
<div class="row g-2 mb-3">
|
|
<div class="col-6">
|
|
<div style="background:var(--bg3);border-radius:10px;padding:10px">
|
|
<div style="font-size:1.1rem;font-weight:700">538</div>
|
|
<div style="font-size:.7rem;color:var(--tx3)">Emails sent</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div style="background:var(--bg3);border-radius:10px;padding:10px">
|
|
<div style="font-size:1.1rem;font-weight:700;color:#fbbf24">41.3%</div>
|
|
<div style="font-size:.7rem;color:var(--tx3)">Open rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2"><button class="boc btn flex-fill py-2" style="font-size:.82rem"><i class="fa-solid fa-eye me-1"></i>View</button><button class="bgrd btn flex-fill py-2" style="font-size:.82rem"><i class="fa-solid fa-sliders me-1"></i>Configure</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- -- AI CHAT (Anthropic API powered) -- -->
|
|
<div class="db-section" id="sec-chat">
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<div>
|
|
<h4 style="font-size:1.4rem;font-weight:700;margin-bottom:4px">AI Chat Console</h4>
|
|
<p style="font-size:.875rem;color:var(--tx3);margin:0">Chat with your NexusAI assistant � powered by Claude.</p>
|
|
</div>
|
|
<button class="boc btn px-3 py-2" style="font-size:.82rem" onclick="clearChat()"><i class="fa-solid fa-rotate-right me-1"></i>New Chat</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-lg-8">
|
|
<div class="chat-wrap">
|
|
<div class="chat-header">
|
|
<div class="chat-ai-avatar"><i class="fa-solid fa-robot"></i></div>
|
|
<div>
|
|
<div style="font-weight:600;font-size:.9rem">NexusAI Assistant</div>
|
|
<div class="chat-status"><span style="width:7px;height:7px;border-radius:50%;background:#34d399;animation:bpls 2s infinite"></span>Online � Powered by Claude</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-body" id="chatBody">
|
|
<div class="d-flex flex-column gap-1">
|
|
<div class="msg msg-ai">?? Hi! I'm your NexusAI assistant. I can help you with support analytics, agent configuration, automation workflows, and business insights. What would you like to know?</div>
|
|
<div class="msg-time" style="align-self:flex-start;padding-left:4px">NexusAI � Just now</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-wrap">
|
|
<textarea class="chat-inp" id="chatInp" placeholder="Ask anything � analytics, automations, agent performance..." rows="1" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendChat()}"></textarea>
|
|
<button class="chat-send" id="chatSendBtn" onclick="sendChat()"><i class="fa-solid fa-paper-plane fa-sm"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div style="background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:20px;margin-bottom:14px">
|
|
<div style="font-weight:600;font-size:.85rem;margin-bottom:14px;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em"><i class="fa-solid fa-bolt me-1" style="color:var(--pur)"></i>Quick Actions</div>
|
|
<div style="display:flex;flex-direction:column;gap:8px">
|
|
<button class="boc btn py-2 text-start px-3" style="font-size:.82rem;border-radius:10px" onclick="quickMsg('Give me a summary of today\'s support metrics')"><i class="fa-solid fa-chart-bar me-2" style="color:var(--pur)"></i>Today's metrics</button>
|
|
<button class="boc btn py-2 text-start px-3" style="font-size:.82rem;border-radius:10px" onclick="quickMsg('Which AI agent is performing best this week?')"><i class="fa-solid fa-robot me-2" style="color:#34d399"></i>Best performing agent</button>
|
|
<button class="boc btn py-2 text-start px-3" style="font-size:.82rem;border-radius:10px" onclick="quickMsg('What automation should I set up to save the most time?')"><i class="fa-solid fa-bolt me-2" style="color:#fbbf24"></i>Automation suggestions</button>
|
|
<button class="boc btn py-2 text-start px-3" style="font-size:.82rem;border-radius:10px" onclick="quickMsg('How can I reduce my average response time?')"><i class="fa-regular fa-clock me-2" style="color:#60a5fa"></i>Improve response time</button>
|
|
<button class="boc btn py-2 text-start px-3" style="font-size:.82rem;border-radius:10px" onclick="quickMsg('Generate a weekly performance report')"><i class="fa-solid fa-file-lines me-2" style="color:#a78bfa"></i>Generate report</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- -- ANALYTICS -- -->
|
|
<div class="db-section" id="sec-analytics">
|
|
<div class="mb-4">
|
|
<h4 style="font-size:1.4rem;font-weight:700;margin-bottom:4px">Analytics</h4>
|
|
<p style="font-size:.875rem;color:var(--tx3);margin:0">Deep insights into your AI performance and business impact.</p>
|
|
</div>
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-3">
|
|
<div class="db-stat-card">
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<div style="width:36px;height:36px;border-radius:10px;background:rgba(139,92,246,.12);display:flex;align-items:center;justify-content:center"><i class="fa-solid fa-chart-line" style="color:#a78bfa;font-size:.85rem"></i></div>
|
|
<span style="font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:100px;background:rgba(52,211,153,.1);color:#34d399">? 24.3%</span>
|
|
</div>
|
|
<div class="db-stat-val gt">$128K</div>
|
|
<div class="db-stat-lbl">Revenue from AI</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="db-stat-card">
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<div style="width:36px;height:36px;border-radius:10px;background:rgba(52,211,153,.1);display:flex;align-items:center;justify-content:center"><i class="fa-solid fa-star" style="color:#34d399;font-size:.85rem"></i></div>
|
|
<span style="font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:100px;background:rgba(52,211,153,.1);color:#34d399">? 0.3</span>
|
|
</div>
|
|
<div class="db-stat-val" style="color:#34d399">4.9?</div>
|
|
<div class="db-stat-lbl">Avg CSAT Score</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="db-stat-card">
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<div style="width:36px;height:36px;border-radius:10px;background:rgba(59,130,246,.1);display:flex;align-items:center;justify-content:center"><i class="fa-solid fa-users" style="color:#60a5fa;font-size:.85rem"></i></div>
|
|
<span style="font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:100px;background:rgba(52,211,153,.1);color:#34d399">? 12%</span>
|
|
</div>
|
|
<div class="db-stat-val" style="color:#60a5fa">8,420</div>
|
|
<div class="db-stat-lbl">Unique users served</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="db-stat-card">
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<div style="width:36px;height:36px;border-radius:10px;background:rgba(245,158,11,.1);display:flex;align-items:center;justify-content:center"><i class="fa-solid fa-percent" style="color:#fbbf24;font-size:.85rem"></i></div>
|
|
<span style="font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:100px;background:rgba(52,211,153,.1);color:#34d399">? 5%</span>
|
|
</div>
|
|
<div class="db-stat-val" style="color:#fbbf24">81%</div>
|
|
<div class="db-stat-lbl">AI containment rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-lg-8">
|
|
<div style="background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:24px">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div style="font-weight:600"><i class="fa-solid fa-chart-area me-2" style="color:var(--pur)"></i>Monthly Performance Trend</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">Last 12 months</div>
|
|
</div>
|
|
<canvas id="anChart" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div style="background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:20px">
|
|
<div style="font-weight:600;font-size:.9rem;margin-bottom:16px">Agent Performance</div>
|
|
<div class="d-flex flex-column gap-3">
|
|
<div>
|
|
<div class="d-flex justify-content-between mb-1" style="font-size:.82rem"><span>Support Bot</span><span style="color:#34d399;font-weight:600">96.4%</span></div>
|
|
<div class="rtbar">
|
|
<div class="rtfill" style="width:96%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="d-flex justify-content-between mb-1" style="font-size:.82rem"><span>Sales Qualifier</span><span style="color:#a78bfa;font-weight:600">78.2%</span></div>
|
|
<div class="rtbar">
|
|
<div class="rtfill" style="width:78%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="d-flex justify-content-between mb-1" style="font-size:.82rem"><span>Data Analyzer</span><span style="color:#60a5fa;font-weight:600">100%</span></div>
|
|
<div class="rtbar">
|
|
<div class="rtfill" style="width:100%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="d-flex justify-content-between mb-1" style="font-size:.82rem"><span>Email Automator</span><span style="color:#fbbf24;font-weight:600">41.3%</span></div>
|
|
<div class="rtbar">
|
|
<div class="rtfill" style="width:41%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- -- AUTOMATIONS -- -->
|
|
<div class="db-section" id="sec-automations">
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<div>
|
|
<h4 style="font-size:1.4rem;font-weight:700;margin-bottom:4px">Automations</h4>
|
|
<p style="font-size:.875rem;color:var(--tx3);margin:0">Manage your active workflow automations.</p>
|
|
</div>
|
|
<button class="bgrd btn px-3 py-2" style="font-size:.85rem"><i class="fa-solid fa-plus me-2"></i>Create Automation</button>
|
|
</div>
|
|
<div style="background:var(--sf);border:1px solid var(--bd);border-radius:18px;overflow:hidden">
|
|
<table class="db-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Automation</th>
|
|
<th>Trigger</th>
|
|
<th>Runs Today</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div style="font-weight:600">Auto-resolve billing tickets</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">Support Bot ? Billing module</div>
|
|
</td>
|
|
<td style="font-size:.82rem">New ticket + billing tag</td>
|
|
<td style="font-weight:600;color:#34d399">248</td>
|
|
<td><span class="bst son">Active</span></td>
|
|
<td><button class="boc btn px-2 py-1" style="font-size:.75rem;border-radius:8px"><i class="fa-solid fa-pencil"></i></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div style="font-weight:600">Welcome email sequence</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">Email Automator ? Onboarding</div>
|
|
</td>
|
|
<td style="font-size:.82rem">New user signup</td>
|
|
<td style="font-weight:600;color:#a78bfa">93</td>
|
|
<td><span class="bst sbz">Running</span></td>
|
|
<td><button class="boc btn px-2 py-1" style="font-size:.75rem;border-radius:8px"><i class="fa-solid fa-pencil"></i></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div style="font-weight:600">CRM data sync</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">Data Analyzer ? HubSpot</div>
|
|
</td>
|
|
<td style="font-size:.82rem">Every 30 minutes</td>
|
|
<td style="font-weight:600;color:#60a5fa">48</td>
|
|
<td><span class="bst son">Active</span></td>
|
|
<td><button class="boc btn px-2 py-1" style="font-size:.75rem;border-radius:8px"><i class="fa-solid fa-pencil"></i></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div style="font-weight:600">Escalation alerts</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">Support Bot ? Slack #escalations</div>
|
|
</td>
|
|
<td style="font-size:.82rem">Low confidence score < 70%</td>
|
|
<td style="font-weight:600;color:#fbbf24">9</td>
|
|
<td><span class="bst sid">Standby</span></td>
|
|
<td><button class="boc btn px-2 py-1" style="font-size:.75rem;border-radius:8px"><i class="fa-solid fa-pencil"></i></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div style="font-weight:600">Lead scoring pipeline</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">Sales Qualifier ? Salesforce</div>
|
|
</td>
|
|
<td style="font-size:.82rem">New lead form submission</td>
|
|
<td style="font-weight:600;color:#34d399">127</td>
|
|
<td><span class="bst son">Active</span></td>
|
|
<td><button class="boc btn px-2 py-1" style="font-size:.75rem;border-radius:8px"><i class="fa-solid fa-pencil"></i></button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- -- INTEGRATIONS -- -->
|
|
<div class="db-section" id="sec-integrations">
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<div>
|
|
<h4 style="font-size:1.4rem;font-weight:700;margin-bottom:4px">Integrations</h4>
|
|
<p style="font-size:.875rem;color:var(--tx3);margin:0">Manage your connected apps and services.</p>
|
|
</div>
|
|
<button class="bgrd btn px-3 py-2" style="font-size:.85rem"><i class="fa-solid fa-plus me-2"></i>Add Integration</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<div class="gc p-4">
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(74,21,75,.15);display:flex;align-items:center;justify-content:center"><i class="fa-brands fa-slack fa-xl" style="color:#a78bfa"></i></div>
|
|
<div>
|
|
<div class="fw-semibold">Slack</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">#support, #escalations</div>
|
|
</div>
|
|
<span class="bst son ms-auto">Connected</span>
|
|
</div>
|
|
<div style="font-size:.8rem;color:var(--tx2);margin-bottom:12px">Bi-directional sync enabled. 3 channels active.</div>
|
|
<button class="boc btn w-100 py-2" style="font-size:.82rem"><i class="fa-solid fa-gear me-1"></i>Configure</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="gc p-4">
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(36,41,47,.15);display:flex;align-items:center;justify-content:center"><i class="fa-brands fa-github fa-xl" style="color:var(--tx2)"></i></div>
|
|
<div>
|
|
<div class="fw-semibold">GitHub</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">nexus-ai/main</div>
|
|
</div>
|
|
<span class="bst son ms-auto">Connected</span>
|
|
</div>
|
|
<div style="font-size:.8rem;color:var(--tx2);margin-bottom:12px">AI code review active. 2 repos monitored.</div>
|
|
<button class="boc btn w-100 py-2" style="font-size:.82rem"><i class="fa-solid fa-gear me-1"></i>Configure</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="gc p-4">
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(52,168,83,.1);display:flex;align-items:center;justify-content:center"><i class="fa-brands fa-google-drive fa-xl" style="color:#34d399"></i></div>
|
|
<div>
|
|
<div class="fw-semibold">Google Drive</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">My Drive + Team Drive</div>
|
|
</div>
|
|
<span class="bst son ms-auto">Connected</span>
|
|
</div>
|
|
<div style="font-size:.8rem;color:var(--tx2);margin-bottom:12px">234 documents indexed for AI training.</div>
|
|
<button class="boc btn w-100 py-2" style="font-size:.82rem"><i class="fa-solid fa-gear me-1"></i>Configure</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="gc p-4">
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(255,102,0,.1);display:flex;align-items:center;justify-content:center"><i class="fa-solid fa-bolt fa-xl" style="color:#ff6600"></i></div>
|
|
<div>
|
|
<div class="fw-semibold">Zapier</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">12 Zaps active</div>
|
|
</div>
|
|
<span class="bst son ms-auto">Connected</span>
|
|
</div>
|
|
<div style="font-size:.8rem;color:var(--tx2);margin-bottom:12px">Connecting to HubSpot, Stripe, Mailchimp.</div>
|
|
<button class="boc btn w-100 py-2" style="font-size:.82rem"><i class="fa-solid fa-gear me-1"></i>Configure</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="gc p-4">
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(88,101,242,.15);display:flex;align-items:center;justify-content:center"><i class="fa-brands fa-discord fa-xl" style="color:#7289da"></i></div>
|
|
<div>
|
|
<div class="fw-semibold">Discord</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">1 server, 4 channels</div>
|
|
</div>
|
|
<span class="bst son ms-auto">Connected</span>
|
|
</div>
|
|
<div style="font-size:.8rem;color:var(--tx2);margin-bottom:12px">Community bot answering 94% of questions.</div>
|
|
<button class="boc btn w-100 py-2" style="font-size:.82rem"><i class="fa-solid fa-gear me-1"></i>Configure</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="gc p-4">
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<div style="width:46px;height:46px;border-radius:14px;background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center"><i class="fa-solid fa-book-open fa-xl" style="color:var(--tx2)"></i></div>
|
|
<div>
|
|
<div class="fw-semibold">Notion</div>
|
|
<div style="font-size:.75rem;color:var(--tx3)">Team workspace</div>
|
|
</div>
|
|
<span class="bst sbz ms-auto">Syncing</span>
|
|
</div>
|
|
<div style="font-size:.8rem;color:var(--tx2);margin-bottom:12px">178 pages indexed. Syncing in progress.</div>
|
|
<button class="boc btn w-100 py-2" style="font-size:.82rem"><i class="fa-solid fa-gear me-1"></i>Configure</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- -- SETTINGS -- -->
|
|
<div class="db-section" id="sec-settings">
|
|
<div class="mb-4">
|
|
<h4 style="font-size:1.4rem;font-weight:700;margin-bottom:4px">Settings</h4>
|
|
<p style="font-size:.875rem;color:var(--tx3);margin:0">Manage your account and preferences.</p>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-lg-6">
|
|
<div style="background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:24px;margin-bottom:16px">
|
|
<div style="font-weight:600;font-size:1rem;margin-bottom:20px"><i class="fa-regular fa-user me-2" style="color:var(--pur)"></i>Profile</div>
|
|
<div class="d-flex align-items-center gap-3 mb-4">
|
|
<div class="db-avatar" id="settingsAvatar" style="width:56px;height:56px;font-size:1.2rem;border-radius:16px">U</div>
|
|
<div>
|
|
<div id="settingsName" style="font-weight:600;font-size:1rem">User Name</div>
|
|
<div id="settingsEmail" style="font-size:.82rem;color:var(--tx3)">user@email.com</div>
|
|
<div style="margin-top:4px"><span class="bst son" style="font-size:.68rem">Pro Plan</span></div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-bottom:12px"><label class="olbl">Display Name</label><input class="oinp" type="text" id="profileName" placeholder="Your name"></div>
|
|
<div style="margin-bottom:12px"><label class="olbl">Email</label><input class="oinp" type="email" id="profileEmail" placeholder="your@email.com"></div>
|
|
<button class="bgrd btn px-4 py-2" style="font-size:.875rem">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div style="background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:24px">
|
|
<div style="font-weight:600;font-size:1rem;margin-bottom:20px"><i class="fa-solid fa-toggle-on me-2" style="color:var(--pur)"></i>Preferences</div>
|
|
<div class="setting-row">
|
|
<div>
|
|
<div style="font-size:.875rem;font-weight:500">Dark Mode</div>
|
|
<div style="font-size:.78rem;color:var(--tx3)">Toggle interface theme</div>
|
|
</div>
|
|
<label class="toggle-switch"><input type="checkbox" id="darkModeToggle" checked onchange="toggleTheme()"><span class="toggle-thumb"></span></label>
|
|
</div>
|
|
<div class="setting-row">
|
|
<div>
|
|
<div style="font-size:.875rem;font-weight:500">Email Notifications</div>
|
|
<div style="font-size:.78rem;color:var(--tx3)">Daily performance digest</div>
|
|
</div>
|
|
<label class="toggle-switch"><input type="checkbox" checked><span class="toggle-thumb"></span></label>
|
|
</div>
|
|
<div class="setting-row">
|
|
<div>
|
|
<div style="font-size:.875rem;font-weight:500">AI Auto-escalation</div>
|
|
<div style="font-size:.78rem;color:var(--tx3)">Escalate when confidence < 70%</div>
|
|
</div>
|
|
<label class="toggle-switch"><input type="checkbox" checked><span class="toggle-thumb"></span></label>
|
|
</div>
|
|
<div class="setting-row">
|
|
<div>
|
|
<div style="font-size:.875rem;font-weight:500">Usage Analytics</div>
|
|
<div style="font-size:.78rem;color:var(--tx3)">Share anonymous usage data</div>
|
|
</div>
|
|
<label class="toggle-switch"><input type="checkbox"><span class="toggle-thumb"></span></label>
|
|
</div>
|
|
<div class="setting-row" style="border:none">
|
|
<div>
|
|
<div style="font-size:.875rem;font-weight:500">Slack Alerts</div>
|
|
<div style="font-size:.78rem;color:var(--tx3)">Real-time critical notifications</div>
|
|
</div>
|
|
<label class="toggle-switch"><input type="checkbox" checked><span class="toggle-thumb"></span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /db-content -->
|
|
</div>
|
|
<!-- /db-main -->
|
|
</div>
|
|
<!-- /dashboard -->
|
|
<!-- ======================== SCRIPTS ======================== -->
|
|
<!-- jQuery -->
|
|
<script src="js/jquery-3.7.1.min.js"></script>
|
|
<!-- Bootstrap 5 -->
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
|
<!-- AOS -->
|
|
<script src="js/aos.js"></script>
|
|
<!-- Swiper -->
|
|
<script src="js/chart.umd.min.js"></script>
|
|
<!-- CounterUp -->
|
|
<script src="js/jquery.magnific-popup.min.js"></script>
|
|
<!-- Main js -->
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|