HTML PWA

我的应用

📌 已置顶

所有应用

📂

还没有文件，点击上方按钮添加

提示词模块

使用说明

复制下方提示词，并将其中的 [在此填写您的需求] 替换为您的想法。发送给 Claude 或 ChatGPT 即可生成单文件 HTML 应用。

请为我创建一个独立的HTML文件，要求如下：

## 用户需求
[在此填写您的需求]

## 技术要求
1. **单文件完整性**: 一个 HTML 文件包含所有代码
2. **数据同步**: 禁止 localStorage，必须使用 PWA Bridge 协议（见复制模板）
3. **响应式设计**: 适配手机端
4. **离线可用**: 必须完全离线运行

请直接提供完整的代码。

请为我创建一个独立的HTML文件，要求如下：

## 用户需求
[在此填写您的需求]

## 技术要求
1. **单文件完整性**: 所有代码必须在一个HTML文件中，包括CSS和JavaScript
2. **无外部依赖**: 不要引用任何外部库、CDN或资源
3. **数据持久化**: 严禁使用 localStorage。必须使用 PWA Bridge 协议（下述）
4. **响应式设计**: 适配手机和桌面设备
5. **现代化UI**: 使用 modern CSS 特性，美观的设计

## 代码结构
请按以下结构组织代码：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[应用标题]</title>
    <style>
        /* CSS 样式在这里 */
    </style>
</head>
<body>
    
    <script>
        // --- PWA Bridge Protocol ---
        window.addEventListener('message', (e) => {
            if (e.data.type === 'PWA_INIT') {
                const { data, theme } = e.data.payload;
                // data: 之前保存的数据; theme: 'dark'|'light'
                initApp(data, theme);
            }
        });
        function saveData(myData) {
            window.parent.postMessage({ type: 'PWA_SAVE_DATA', payload: myData }, '*');
        }
        // --- 逻辑在这里 ---
    </script>
</body>
</html>
```

## 设计要求
- 使用深色主题或现代配色方案
- 添加适当的动画效果
- 代码要有适当的注释

请直接提供完整的HTML代码，不要分段。

应用设置

账户状态

登录或注册以启用云端多端同步

已登录: ---

高级

数据将自动同步至 Cloudflare 边缘节点

数据管理

存储占用

已使用: ---

预览

添加 HTML 文件

📄

拖拽 HTML 文件到这里或

选择文件