JOJO
2f75c1c8bb
Current status includes: - Virtual monitor surface and components - Monitor store for state management - Tool call animations and transitions - Liquid glass shader integration Known issue to fix: Tool status display timing - "正在xx" appears after tool execution completes instead of when tool call starts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
160 lines
4.7 KiB
HTML
160 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Liquid Glass 原样 Demo</title>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
color: rgba(255, 255, 255, 0.92);
|
||
font-family: 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
background: radial-gradient(circle at top, #05070f, #02020a 55%, #000005 95%);
|
||
overflow: hidden;
|
||
}
|
||
.demo-frame {
|
||
position: relative;
|
||
display: grid;
|
||
gap: 32px;
|
||
padding: clamp(24px, 5vw, 72px);
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
z-index: 0;
|
||
}
|
||
.panel {
|
||
position: relative;
|
||
border-radius: 28px;
|
||
padding: 36px;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
background: rgba(255, 255, 255, 0.02);
|
||
backdrop-filter: blur(40px) saturate(130%);
|
||
}
|
||
.panel.dynamic {
|
||
background: rgba(9, 12, 26, 0.65);
|
||
}
|
||
h1,
|
||
h2,
|
||
p {
|
||
margin: 0;
|
||
}
|
||
h1 {
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
opacity: 0.95;
|
||
}
|
||
p {
|
||
color: rgba(255, 255, 255, 0.72);
|
||
margin-top: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
.grid-lines {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
background-image:
|
||
linear-gradient(transparent 95%, rgba(255, 255, 255, 0.08) 96%),
|
||
linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.08) 96%);
|
||
background-size: 46px 46px;
|
||
opacity: 0.35;
|
||
}
|
||
.code-lines {
|
||
margin-top: 28px;
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
.code-line {
|
||
height: 1px;
|
||
position: relative;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
|
||
overflow: hidden;
|
||
}
|
||
.code-line::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -2px;
|
||
width: 120px;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
|
||
animation: scan 4s ease-in-out infinite;
|
||
}
|
||
.dynamic .wave-layer {
|
||
margin-top: 24px;
|
||
height: 160px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.dynamic .wave-layer::before,
|
||
.dynamic .wave-layer::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
|
||
opacity: 0.8;
|
||
animation: wave 7s linear infinite;
|
||
}
|
||
.dynamic .wave-layer::after {
|
||
animation-duration: 11s;
|
||
opacity: 0.45;
|
||
}
|
||
@keyframes scan {
|
||
from {
|
||
transform: translateX(-100%);
|
||
}
|
||
to {
|
||
transform: translateX(150%);
|
||
}
|
||
}
|
||
@keyframes wave {
|
||
from {
|
||
transform: translateX(-30%) translateY(0);
|
||
}
|
||
to {
|
||
transform: translateX(30%) translateY(0);
|
||
}
|
||
}
|
||
footer {
|
||
text-align: right;
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
margin-top: -8px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo-frame">
|
||
<header>
|
||
<h1>Liquid Glass Shader Demo</h1>
|
||
<p>该页引入 Apple 样式液态玻璃 shader（scripts/liquid-glass-demo 中的原版脚本），用于验证折射、Q 弹形变以及线条/边框穿透效果。</p>
|
||
</header>
|
||
<section class="panel" id="static-panel">
|
||
<div class="grid-lines"></div>
|
||
<h2>静态背景</h2>
|
||
<p>拖拽玻璃块穿过这些细线与描边，确认折射数据异常时的表现。</p>
|
||
<div class="code-lines">
|
||
<div class="code-line"></div>
|
||
<div class="code-line" style="width: 82%"></div>
|
||
<div class="code-line" style="width: 67%"></div>
|
||
<div class="code-line" style="width: 92%"></div>
|
||
</div>
|
||
</section>
|
||
<section class="panel dynamic" id="dynamic-panel">
|
||
<div class="grid-lines"></div>
|
||
<h2>动态背景</h2>
|
||
<p>波形与扫描线模拟真实 UI 场景，帮助检查形变和拖拽反馈。</p>
|
||
<div class="wave-layer"></div>
|
||
<div class="code-lines">
|
||
<div class="code-line"></div>
|
||
<div class="code-line" style="width: 70%"></div>
|
||
<div class="code-line" style="width: 55%"></div>
|
||
</div>
|
||
</section>
|
||
<footer>脚本来源：scripts/liquid-glass-demo/public/liquid-glass.js</footer>
|
||
</div>
|
||
<script src="/static/liquid-glass-demo/liquid-glass.js"></script>
|
||
</body>
|
||
</html>
|