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; letter-spacing:.5px; font-size:16px;
    }

    .btn{
      appearance:none; border:none; outline:none; cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 14px; border-radius:12px;
      background:var(--panel-2); color:var(--text);
      border:1px solid var(--border);
      transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
    }
    .btn:hover{ background:#232833; }
    .btn-primary{
      background:linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
      color:white; border:none; box-shadow:0 8px 24px rgba(139,92,246,.35);
    }
    .btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); }
    .btn-ghost{
      background:transparent; border:1px solid var(--border);
    }
    .icon-btn{
      width:36px; height:36px; display:grid; place-items:center;
      border-radius:10px; background:transparent; border:1px solid var(--border);
      color:#cbd5e1;
    }
    .icon{ width:16px; height:16px; display:inline-block; }

    .search{
      display:flex; align-items:center; gap:8px;
      background:var(--panel-2);
      border:1px solid var(--border);
      padding:10px 12px; border-radius:12px; color:#cbd5e1;
    }
    .search input{
      background:transparent; border:none; outline:none; color:#cbd5e1; width:100%;
    }

    .nav{ display:grid; gap:8px; }
 .........完整代码请登录后点击上方下载按钮下载查看