简单状态栏
Last updated
Last updated
<EnvironmentData>
<Time>13:37:33</Time>
<Weather>多云转小雨</Weather>
<Description>空气中飘着柳絮伴随着樱花香，春天到了</Description>
</EnvironmentData>```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Midnight Gummy Ultra Panel</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Quicksand:wght@500;700&family=Noto+Sans+SC:wght@300;500&display=swap" rel="stylesheet">
<style>
:root {
--accent-pink: #ff9eaf;
--accent-purple: #bb9af7;
--accent-blue: #7dcfff;
--text-main: #c0caf5;
--text-dim: #565f89;
--glass-bg: rgba(26, 27, 38, 0.6);
--radius-main: 10px;
--font-cute: 'Quicksand', 'Noto Sans SC', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
body {
background: transparent;
margin: 0;
}
/* 整体容器 */
.ultra-panel {
font-family: var(--font-cute);
display: flex;
flex-direction: column;
gap: 12px;
width:100%;
max-width: 500px;
user-select: none;
position: relative;
}
.panel-row {
display: flex;
gap: 12px;
width: 100%;
}
/* 基础项：玻璃拟态 + 复合阴影 */
.data-card {
background: var(--glass-bg);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.15); /* 顶部高光边 */
border-radius: var(--radius-main);
padding: 10px 14px;
box-shadow:
4px 4px 0px rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 扫描线背景效果 */
.data-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
background-size: 100% 2px, 3px 100%;
pointer-events: none;
opacity: 0.3;
}
.data-card:hover {
transform: translateY(-3px);
background: rgba(30, 33, 48, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
/* 装饰支架 */
.corner-deco {
position: absolute;
width: 6px;
height: 6px;
border: 1px solid currentColor;
opacity: 0.4;
}
.lt { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.rb { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
/* 内容布局 */
.card-header {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-dim);
}
.icon-svg {
width: 12px;
height: 12px;
margin-right: 6px;
fill: currentColor;
filter: drop-shadow(0 0 3px currentColor);
}
.value {
font-size: 13px;
font-weight: 500;
color: var(--text-main);
display: flex;
align-items: baseline;
}
/* 特殊样式 */
.item-time { flex: 1.3; border-bottom: 2px solid var(--accent-purple); color: var(--accent-purple); }
.item-weather { flex: 1; border-bottom: 2px solid var(--accent-blue); color: var(--accent-blue); }
.item-env { width: 100%; border-bottom: 2px solid var(--accent-pink); color: var(--accent-pink); }
/* 时间数值：等宽字体 */
#current-time {
font-family: var(--font-mono);
font-size: 15px;
letter-spacing: -0.5px;
}
/* 环境描述：稍微缩小 */
.env-text {
font-size: 11px;
line-height: 1.4;
opacity: 0.85;
}
/* 呼吸灯 */
.status-dot {
width: 3px;
height: 3px;
background: currentColor;
border-radius: 50%;
margin-left: auto;
box-shadow: 0 0 6px currentColor;
animation: blink 2s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.8); }
}
</style>
</head>
<body>
<div class="ultra-panel">
<!-- 第一行 -->
<div class="panel-row">
<!-- 时间卡片 -->
<div class="data-card item-time">
<div class="corner-deco lt"></div>
<div class="corner-deco rb"></div>
<div class="card-header">
<svg class="icon-svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.1.8-1.2-4.5-2.7V7z"/></svg>
<span class="label">Chrono</span>
<div class="status-dot"></div>
</div>
<div class="value">
<span id="current-time">时间部分</span>
</div>
</div>
<!-- 天气卡片 -->
<div class="data-card item-weather">
<div class="corner-deco lt"></div>
<div class="corner-deco rb"></div>
<div class="card-header">
<svg class="icon-svg" viewBox="0 0 24 24"><path d="M6.7 14.7c0-3.1 2.5-5.7 5.7-5.7.3 0 .5 0 .8.1C14.1 6.8 16.4 5 19 5c3.3 0 6 2.7 6 6 0 .5-.1 1-.2 1.4 1.4.9 2.2 2.4 2.2 4.1 0 2.8-2.2 5-5 5h-13c-4 0-7.3-3.3-7.3-7.3 0-3.5 2.5-6.4 5.8-7.1.1-.1.2-.1.2-.4z"/></svg>
<span class="label">Sky</span>
</div>
<div class="value">
<span>今日天气</span>
</div>
</div>
</div>
<!-- 第二行 -->
<div class="panel-row">
<!-- 环境描述卡片 -->
<div class="data-card item-env">
<div class="corner-deco lt"></div>
<div class="corner-deco rb"></div>
<div class="card-header">
<svg class="icon-svg" viewBox="0 0 24 24"><path d="M12 3L2 12h3v8h14v-8h3L12 3zm0 14.5c-1.4 0-2.5-1.1-2.5-2.5s2.5-4.5 2.5-4.5 2.5 3.1 2.5 4.5-1.1 2.5-2.5 2.5z"/></svg>
<span class="label">Atmosphere</span>
<div class="status-dot"></div>
</div>
<div class="value env-text">
环境描述内容
</div>
</div>
</div>
</div>
</body>
</html>
```在每次对话开始时，按照剧情需要更新的环境信息，请严格按照以下XML结构输出环境数据组件。
<EnvironmentData>
<Time>当前场景的具体时间</Time>
<Weather>当前场景的天气情况</Weather>
<Description>用一句话描述当前环境的氛围、气味或景象</Description>
</EnvironmentData>
【字段说明】
- <Time>：输出当前场景的具体时间，格式为 HH:MM:SS。
- <Weather>：简要描述当前的天气，如“晴朗”、“小雨”、“阴天有风”。
- <Description>：用一句带有感官细节的文字描述环境特色，例如“空气中弥漫着雨后泥土的清新气味”或“午后的阳光透过百叶窗，在木地板上投下斑驳的光影”。
【重要约束】
- 只输出上述XML结构，不要有任何开场白、解释或其他文字。
- 必须保持XML标签名称（EnvironmentData, Time, Weather, Description）完全一致，不要修改。
- 每个标签内只填写对应的内容，不要包含标签本身。