Edgechat/liquid-resource.html at master · baseGame/Edgechat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple Liquid Glass 全生态视觉重构与全栈实现</title>
    <style>
        /*
         ==========================================================================
         1. 核心架构与设计系统级 Token (Design Tokens)
         定义了跨越不同变体的共享光学物理参数与环境光反馈
         ==========================================================================
        */
        :root {
            /* 玻璃体本色，保证在无背景时的最低限度遮蔽 */
            --lg-base-tint: rgba(255, 255, 255, 0.08);
            /* 边缘环境光高亮，模拟几何倒角的反光切割 */
            --lg-rim-light: rgba(255, 255, 255, 0.45);
            /* 多层次内阴影，构建玻璃内部的厚度感与体积感 */
            --lg-internal-volume: inset 0 3px 15px rgba(255, 255, 255, 0.4),
                                  inset 0 -3px 12px rgba(255, 255, 255, 0.1),
                                  inset 1px 0 2px rgba(255, 255, 255, 0.5);
            /* 环境投射阴影，脱离底层平面 */
            --lg-drop-shadow: 0 24px 50px rgba(0, 0, 0, 0.2);

            /* 复合滤镜：在 SVG 光学管道之上，增加原生亮度与饱和度补偿，防止画面因折射而显灰 */
            --liquid-glass-optical-pipeline: url(#liquid-glass-engine) brightness(115%) saturate(120%);
        }

        /*
         ==========================================================================
         2. 全局环境构建：用于凸显折射效能的动态底层背景
         ==========================================================================
        */
        @keyframes fluidEnvironment {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        body {
            margin: 0;
            padding: 50px 20px;
            min-height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
            /* 构建一个极具色彩张力的动态背景，能够最大限度触发 SVG 色散与光线偏折 */
            background: linear-gradient(-45deg, #FF2A54, #833AB4, #12C2E9, #C471ED);
            background-size: 300% 300%;
            animation: fluidEnvironment 20s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 60px;
            box-sizing: border-box;
            color: white;
        }

       .section-title {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: -40px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            z-index: 10;
        }

        /*
         ==========================================================================
         3. Liquid Glass 物理承载容器抽象类
         实施内容层与光学层深度隔离，确保前景 UI 组件的独立渲染
         ==========================================================================
        */
       .liquid-glass-panel {
            position: relative;
            isolation: isolate; /* 建立新的堆叠上下文，防止混合模式穿透 */
            box-shadow: var(--lg-drop-shadow);
            /*
               优雅降级机制 (Graceful Degradation):
               优先宣告标准 backdrop-filter，针对 Safari 的 WebKit Bug (Bug #127102) 进行防护。
               若浏览器支持 URL 滤镜，则后续的 pseudo-element 将覆盖此层光学表现。
            */
            -webkit-backdrop-filter: blur(25px) saturate(200%);
            backdrop-filter: blur(25px) saturate(200%);
            border: 1px solid var(--lg-rim-light);
            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* 光学透镜层伪元素：专职负责渲染由 SVG 定义的复杂光线追踪路径 */
       .liquid-glass-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: var(--lg-base-tint);
            /* 引入内含色散与折射的核心管道 */
            -webkit-backdrop-filter: var(--liquid-glass-optical-pipeline);
            backdrop-filter: var(--liquid-glass-optical-pipeline);
            box-shadow: var(--lg-internal-volume);
            z-index: -1;
            pointer-events: none; /* 穿透鼠标事件，保障底层控件交互 */
        }

        /*
         ==========================================================================
         变体应用 A：Spotlight 级别高通透搜索框 (The Command Palette)
         ==========================================================================
        */
       .variant-search {
            display: flex;
            align-items: center;
            width: 480px;
            max-width: 90vw;
            padding: 18px 24px;
            border-radius: 60px; /* 极致的圆角曲线 */
            gap: 16px;
        }
       .variant-search input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            font-size: 20px;
            color: #FFFFFF;
            font-weight: 500;
            text-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 提升输入文本在强透光环境下的对比度 */
        }
       .variant-search input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
       .search-kbd {
            background: rgba(0, 0, 0, 0.25);
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);
        }

        /*
         ==========================================================================
         变体应用 B：Apple Music 风格沉浸式底座控制台
         ==========================================================================
        */
       .variant-media-player {
            display: flex;
            flex-direction: column;
            width: 360px;
            padding: 32px;
            border-radius: 40px;
            gap: 24px;
        }
       .player-meta {
            text-align: center;
        }
       .player-meta h3 { margin: 0 0 6px 0; font-size: 24px; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
       .player-meta p { margin: 0; font-size: 15px; opacity: 0.85; font-weight: 500; }

       .progress-container {
            width: 100%;
            height: 8px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
            overflow: hidden;
        }
       .progress-bar {
            width: 60%;
            height: 100%;
            background: #FFFFFF;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(255,255,255,0.8);
        }

       .player-controls {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
       .btn-media {
            background: none;
            border: none;
            color: #FFFFFF;
            font-size: 28px;
            cursor: pointer;
            transition: transform 0.2s, opacity 0.2s;
            text-shadow: 0 4px 10px rgba(0,0,0,0.4);
        }
       .btn-media:hover { transform: scale(1.1); opacity: 0.9; }
       .btn-play { font-size: 50px; }

        /*
         ==========================================================================
         变体应用 C：macOS Tahoe 流体动态 Dock 导航栏
         ==========================================================================
        */
       .variant-dock {
            display: flex;
            align-items: center;
            padding: 16px 24px;
            border-radius: 48px;
            gap: 20px;
        }
        /* 针对鼠标响应触发极致的物理外扩形变 (Morphing) */
       .variant-dock:hover {
            padding: 20px 32px;
            border-radius: 56px;
            transform: translateY(-5px);
        }
       .dock-app {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            cursor: pointer;
            /* 弹性交互反馈 */
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,0.5);
            border: 1px solid rgba(255,255,255,0.3);
        }
       .dock-app:hover {
            transform: scale(1.3) translateY(-15px);
            background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1));
            z-index: 10;
        }

        /*
         ==========================================================================
         无障碍响应体系 (Accessibility Media Queries)
         ==========================================================================
        */
        @media (prefers-reduced-transparency: reduce) {
           .liquid-glass-panel::before {
                /* 降级为近乎实体的色彩面板，切断深层 SVG 光线追踪，保障对比度 */
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                background: rgba(30, 30, 30, 0.95);
            }
        }
        @media (prefers-reduced-motion: reduce) {
           .variant-dock,.dock-app {
                transition: none; /* 移除引发生理不适的果冻回弹动效 */
            }
           .variant-dock:hover { transform: none; padding: 16px 24px; }
           .dock-app:hover { transform: scale(1.1); }
        }
    </style>
</head>
<body>

    <svg style="position: absolute; width: 0; height: 0; pointer-events: none;" aria-hidden="true">
        <defs>
            <filter id="liquid-glass-engine" x="-20%" y="-20%" width="140%" height="140%">

                <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="optics_blur_base" />

                <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" result="vector_field_noise" />
                <feGaussianBlur in="vector_field_noise" stdDeviation="3" result="smooth_vector_field" />

                <feDisplacementMap in="optics_blur_base" in2="smooth_vector_field" scale="40" xChannelSelector="R" yChannelSelector="G" result="optics_refracted_body" />

                <feOffset in="optics_refracted_body" dx="-3" dy="-1" result="optics_shift_red" />
                <feColorMatrix in="optics_shift_red" type="matrix" result="isolated_red" values="
                    1 0 0 0 0
                    0 0 0 0 0
                    0 0 0 0 0
                    0 0 0 1 0" />

                <feOffset in="optics_refracted_body" dx="3" dy="1" result="optics_shift_blue" />
                <feColorMatrix in="optics_shift_blue" type="matrix" result="isolated_blue" values="
                    0 0 0 0 0
                    0 0 0 0 0
                    0 0 1 0 0
                    0 0 0 1 0" />

                <feColorMatrix in="optics_refracted_body" type="matrix" result="isolated_green" values="
                    0 0 0 0 0
                    0 1 0 0 0
                    0 0 0 0 0
                    0 0 0 1 0" />

                <feBlend mode="screen" in="isolated_red" in2="isolated_green" result="composite_rg" />
                <feBlend mode="screen" in="composite_rg" in2="isolated_blue" result="final_render_output" />
            </filter>
        </defs>
    </svg>

    <div class="section-title">Variant 1: Spotlight Palette</div>
    <div class="liquid-glass-panel variant-search">
        <span style="font-size: 24px;">🔍</span>
        <input type="text" placeholder="Search applications or files...">
        <div class="search-kbd">⌘ K</div>
    </div>

    <div class="section-title">Variant 2: Immersive Console</div>
    <div class="liquid-glass-panel variant-media-player">
        <div class="player-meta">
            <h3>Liquid Optics</h3>
            <p>Apple Design Architecture · 2026</p>
        </div>
        <div class="progress-container">
            <div class="progress-bar"></div>
        </div>
        <div class="player-controls">
            <button type="button" class="btn-media">⏮</button>
            <button type="button" class="btn-media btn-play">▶</button>
            <button type="button" class="btn-media">⏭</button>
        </div>
    </div>

    <div class="section-title">Variant 3: Fluid Dock</div>
    <div class="liquid-glass-panel variant-dock">
        <div class="dock-app">🧭</div>
        <div class="dock-app">✉️</div>
        <div class="dock-app">📸</div>
        <div class="dock-app">⚙️</div>
    </div>

</body>
</html>