svg+css布局炫酷ai聊天智能体ui界面代码-html代码-BFW代码库

svg+css布局炫酷ai聊天智能体ui界面代码

代码语言：html

代码描述：svg+css布局炫酷ai聊天智能体ui界面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ai bot</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root{
      --sidebar-bg:#0f1116;
      --panel-bg:#171a20;
      --panel-2:#1e222b;
      --main-bg:#1a1d24;
      --text:#e5e7eb;
      --muted:#9aa0aa;
      --border:rgba(255,255,255,.06);
      --primary:#8b5cf6;
      --primary-2:#7c3aed;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:14px;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      color:var(--text);
      background:linear-gradient(180deg,#171a20 0%, #121419 100%);
      overflow:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    .app{
      height:100%;
      display:flex;
    }
    /* Sidebar */
    .sidebar{
      width:260px;
      min-width:260px;
      background:var(--sidebar-bg);
      border-right:1px solid var(--border);
      display:flex;
      flex-direction:column;
      padding:14px;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      padding:10px 10px;
      border-radius:10px;
    }
    .brand .logo{
      width:28px; height:28px; border-radius:8px;
      display:grid; place-items:center;
      background:radial-gradient(60% 60% at 30% 30%, #94f0ff 0%, #00d4ff 35%, #5b5bff 70%, #1a1a1a 100%);
      box-shadow:0 6px 18px rgba(0,0,0,.3), 0 0 0 2px rgba(255,255,255,.06) inset;
      font-weight:800; font-size:14px;
    }
    .brand .title{
      font-weight:800; let.........完整代码请登录后点击上方下载按钮下载查看