“帮我用 HTML + CSS + JavaScript 写一个模拟手机桌面的互动网页。要求如下： 1. 整体背景...

A public project built with the Lightcap AI agent by anon-b453 — open to read, run, fork, and export. Updated .

Prompt

“帮我用 HTML + CSS + JavaScript 写一个模拟手机桌面的互动网页。要求如下：

  1. 整体背景是深色模式，顶部有手机状态栏（时间02:50，5G信号，电量70%）。
  2. 屏幕中间显示 8 个彩色圆角方形应用图标（微信、钱包、游戏大厅、浏览器、线上购物、短视频、外卖、论坛社区）。
  3. 每个图标下方写着应用名称，并且统一显示红色的‘已锁’字样。
  4. 点击‘微信’图标时，页面应跳转切换到‘微信聊天列表’界面。聊天列表里需要有‘池衍’和‘工作群’。
  5. 请把所有代码整合在一个单独的 HTML 文件中，确保我在浏览器里双击打开就能直接运行和点击交互。”

Lightcap

html <!DOCTYPE html>

模拟手机桌面

body { margin: 0; background: #111; color: #fff; font-family: Arial, sans-serif; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .status-bar { width: 100%; height: 30px; background: #222; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; box-sizing: border-box; font-size: 14px; color: #0f0; } .status-left, .status-right { display: flex; align-items: center; } .screen { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .apps { display: grid; grid-template-columns: repeat(4, 80px); grid-gap: 20px; justify-content: center; } .app { width: 80px; height: 80px; background: #444; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; } .app span.name { margin-top: 5px; font-size: 12px; color: #fff; } .app span.lock { position: absolute; bottom: 2px; font-size: 10px; color: red; } .chat-screen { display: none; flex-direction: column; width: 100%; height: 100%; background: #111; padding: 10px; box-sizing: border-box; overflow-y: auto; } .chat-item { padding: 8px; border-bottom: 1px solid #333; } .back { color: #0af; cursor: pointer; margin-bottom: 10px; }

02:50 5G 🔋 70%

微信 已锁

钱包 已锁

游戏大厅 已锁

浏览器 已锁

线上购物 已锁

短视频 已锁

外卖 已锁

论坛社区 已锁

← 返回桌面 池衍 工作群

const wechat = document.getElementById('wechat'); const home = document.getElementById('homeScreen'); const chat = document.getElementById('chatScreen'); const back = document.getElementById('backBtn'); wechat.addEventListener('click', () => { home.style.display = 'none'; chat.style.display = 'flex'; }); back.addEventListener('click', () => { chat.style.display = 'none'; home.style.display = 'flex'; });

Browse all public projects

Lightcap