177 lines
5.8 KiB
HTML
177 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
:root {
|
|
--glass-bg: rgba(255, 255, 255, 0.65);
|
|
--glass-border: rgba(255, 255, 255, 0.5);
|
|
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
|
|
--text-primary: #2D3748;
|
|
--text-secondary: #718096;
|
|
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, system-ui, sans-serif;
|
|
/* 弥散光感背景 */
|
|
background: radial-gradient(circle at 10% 20%, rgb(239, 246, 255) 0%, rgb(219, 228, 255) 90%);
|
|
background-attachment: fixed;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 增加一个背景装饰球 */
|
|
body::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10%;
|
|
left: -10%;
|
|
width: 50%;
|
|
height: 50%;
|
|
background: radial-gradient(circle, rgba(169, 139, 254, 0.4) 0%, rgba(255,255,255,0) 70%);
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Sidebar - 悬浮的玻璃侧栏 */
|
|
.sidebar {
|
|
width: 260px;
|
|
margin: 16px;
|
|
border-radius: 24px;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--glass-border);
|
|
box-shadow: var(--glass-shadow);
|
|
display: flex; flex-direction: column; padding: 24px;
|
|
}
|
|
|
|
.logo {
|
|
font-weight: 800; font-size: 20px;
|
|
background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.nav-item {
|
|
padding: 12px 16px; margin-bottom: 8px; border-radius: 16px;
|
|
color: var(--text-secondary); font-size: 14px; cursor: pointer; font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.nav-item.active {
|
|
background: white;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
color: #5B4BC4;
|
|
}
|
|
.nav-item:hover:not(.active) { background: rgba(255,255,255,0.5); }
|
|
|
|
.main { flex: 1; display: flex; flex-direction: column; padding: 0 20px; overflow-y: auto; align-items: center; position: relative; }
|
|
.chat-container { max-width: 760px; width: 100%; padding-top: 40px; padding-bottom: 120px; }
|
|
|
|
/* 对话气泡 */
|
|
.user-msg {
|
|
background: white;
|
|
align-self: flex-end;
|
|
padding: 16px 24px;
|
|
border-radius: 20px 20px 4px 20px; /* 不规则圆角 */
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
margin-bottom: 40px;
|
|
margin-left: auto;
|
|
max-width: 80%;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.ai-msg { margin-bottom: 30px; }
|
|
|
|
/* 步骤卡片 - 玻璃条 */
|
|
.step-card {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid white;
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
margin-bottom: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
font-size: 14px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
|
|
}
|
|
.icon-circle {
|
|
width: 36px; height: 36px; border-radius: 12px;
|
|
background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
|
|
display: flex; align-items: center; justify-content: center; color: white;
|
|
}
|
|
|
|
/* 输入框 - 悬浮胶囊 */
|
|
.input-wrapper { position: fixed; bottom: 30px; width: 100%; max-width: 760px; z-index: 10; }
|
|
.input-box {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid white;
|
|
border-radius: 100px; /* 胶囊形状 */
|
|
padding: 12px 12px 12px 24px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: var(--text-secondary);
|
|
}
|
|
.send-btn {
|
|
width: 44px; height: 44px;
|
|
background: var(--primary-gradient);
|
|
border-radius: 50%; border: none;
|
|
box-shadow: 0 4px 12px rgba(118, 75, 162, 0.4);
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
.send-btn:hover { transform: scale(1.05); }
|
|
</style>
|
|
<title>Creative Glass Theme</title>
|
|
</head>
|
|
<body>
|
|
<div class="sidebar">
|
|
<div class="logo">AI Agent ✨</div>
|
|
<div class="nav-item active">Project Files</div>
|
|
<div class="nav-item">Dashboard</div>
|
|
<div style="flex:1"></div>
|
|
<div class="nav-item">Settings</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="chat-container">
|
|
<div class="user-msg">
|
|
搜索一下原神目前卡池是什么，写在一个文件里。
|
|
</div>
|
|
|
|
<div class="ai-msg">
|
|
<div class="ai-text" style="padding-left: 8px;">好的，我已经为您整理了卡池信息。</div>
|
|
|
|
<div class="step-card">
|
|
<div class="icon-circle">🔍</div>
|
|
<div style="flex:1">Web Search: <b>Genshin Impact Banners</b></div>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<div class="icon-circle">⚙️</div>
|
|
<div style="flex:1">Processing Data...</div>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<div class="icon-circle">📂</div>
|
|
<div style="flex:1">File Saved: <b style="color:#6B46C1">banner_info.txt</b></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-wrapper">
|
|
<div class="input-box">
|
|
<span>Ask me anything...</span>
|
|
<button class="send-btn"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |