手机模拟器edit icon

作者：
邓朝元
Fork(复制)
图库
图片、视频、音频、图标
下载
嵌入
BUG反馈
index.html
现在支持上传本地图片了！
index.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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            padding: 15px;
            overflow: hidden;
        }

        .phone-container {
            position: relative;
            width: 360px;
            height: 740px;
            background: #000;
            border-radius: 40px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            border: 12px solid #111;
        }

        .phone-screen {
            position: relative;
            width: 100%;
            height: 100%;
            background: #111;
            border-radius: 30px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .status-bar {
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;
            color: white;
            font-size: 14px;
            background: rgba(0, 0, 0, 0.3);
        }

        .time {
            font-weight: 600;
        }

        .status-icons {
            display: flex;
            gap: 5px;
        }

        .screen-content {
            flex: 1;
            overflow: hidden;
            position: relative;
        }

        .home-screen {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            padding: 20px;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .app-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
            text-decoration: none;
            font-size: 12px;
        }

        .app-icon i {
            font-size: 30px;
            margin-bottom: 5px;
            background: rgba(255, 255, 255, 0.2);
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            backdrop-filter: blur(10px);
        }

        .app-icon span {
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .dock {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 25px;
            background: rgba(255, 255, 255, 0.2);
            padding: 10px 25px;
            border-radius: 30px;
            backdrop-filter: blur(10px);
        }

        .app-screen {
            display: none;
            flex-direction: column;
            height: 100%;
            background: white;
        }

        .app-header {
            display: flex;
            align-items: center;
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
        }

        .back-btn {
            background: none;
            border: none;
            font-size: 20px;
            margin-right: 15px;
            cursor: pointer;
        }

        .app-title {
            font-size: 18px;
            font-weight: 600;
        }

        /* 浏览器样式 */
        .browser-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .browser-toolbar {
            display: flex;
            padding: 10px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            gap: 10px;
        }

        .browser-btn {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: #333;
            padding: 5px 10px;
            border-radius: 5px;
        }

        .browser-btn:hover {
            background: #e9ecef;
        }

        .url-input {
            flex: 1;
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            font-size: 14px;
        }

        .browser-frame {
            flex: 1;
            border: none;
        }

        .download-notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #28a745;
            color: white;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: none;
            z-index: 1000;
        }

        /* 设置界面样式 */
        .settings-content {
            flex: 1;
            overflow-y: auto;
        }

        .setting-category {
            padding: 12px 20px 5px;
            font-size: 13px;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
        }

        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }

        .setting-item:last-child {
            border-bottom: none;
        }

        .setting-label {
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .setting-label i {
            width: 22px;
            text-align: center;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .range-slider {
            width: 100px;
        }

        .chevron {
            color: #999;
        }

        /* 通知中心 */
        .notification-center {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            flex-direction: column;
            z-index: 100;
        }

        .notification-header {
            padding: 20px;
            color: white;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
        }

        .notifications {
            flex: 1;
            overflow-y: auto;
            padding: 0 20px;
        }

        .notification {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            color: white;
        }

        .notification-title {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .notification-content {
            font-size: 14px;
            opacity: 0.8;
        }

        .close-notification {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }

        /* 计算器 */
        .calculator-screen {
            background: #111;
            color: white;
            padding: 20px;
            text-align: right;
            font-size: 36px;
            height: 100px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }

        .calculator-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 20px;
            flex: 1;
        }

        .calc-btn {
            padding: 20px;
            font-size: 20px;
            border: none;
            border-radius: 10px;
            background: #333;
            color: white;
            cursor: pointer;
        }

        .calc-btn.operator {
            background: #ff9500;
        }

        .calc-btn.equals {
            background: #ff9500;
        }

        .calc-btn.clear {
            background: #a5a5a5;
        }

        /* 相机 */
        .camera-screen {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #000;
        }

        .camera-viewfinder {
            flex: 1;
            background: linear-gradient(45deg, #0f2027, #203a43, #2c5364);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
        }

        .camera-controls {
            padding: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: rgba(0, 0, 0, 0.7);
        }

        .shutter-btn {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: white;
            border: 5px solid #aaa;
            cursor: pointer;
        }

        /* 照片 */
        .gallery-screen {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            padding: 10px;
            height: 100%;
            overflow-y: auto;
        }

        .gallery-item {
            aspect-ratio: 1/1;
            background: #ddd;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #777;
        }

        /* 音乐 */
        .music-player {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .album-art {
            width: 250px;
            height: 250px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            margin: 30px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
        }

        .song-info {
            text-align: center;
            margin-bottom: 30px;
        }

        .song-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .song-artist {
            font-size: 18px;
            opacity: 0.8;
        }

        .progress-container {
            padding: 0 30px;
            margin-bottom: 30px;
        }

        .progress-bar {
            height: 5px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            margin-bottom: 5px;
        }

        .progress {
            height: 100%;
            background: white;
            border-radius: 5px;
            width: 30%;
        }

        .time-info {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }

        .player-controls {
            display: flex;
            justify-content: center;
            gap: 30px;
            padding: 20px;
        }

        .control-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }

        .play-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: white;
            color: #764ba2;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        /* 天气 */
        .weather-screen {
            padding: 30px;
            color: white;
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            height: 100%;
        }

        .weather-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .weather-icon {
            font-size: 80px;
            margin-bottom: 10px;
        }

        .temperature {
            font-size: 60px;
            font-weight: 300;
        }

        .location {
            font-size: 24px;
            opacity: 0.9;
        }

        .weather-details {
            display: flex;
            justify-content: space-around;
            margin-top: 40px;
        }

        .detail-item {
            text-align: center;
        }

        .detail-value {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .detail-label {
            font-size: 14px;
            opacity: 0.8;
        }

        /* 电话 */
        .phone-screen-content {
            padding: 25px;
            height: 100%;
            background: linear-gradient(135deg, #00b894, #00cec9);
            color: white;
            display: flex;
            flex-direction: column;
        }

        .dial-display {
            font-size: 40px;
            text-align: center;
            margin: 30px 0;
            letter-spacing: 3px;
        }

        .dial-pad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .dial-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            font-size: 24px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            cursor: pointer;
        }

        .call-btn {
            background: #00b894;
            width: 80px;
            height: 80px;
            font-size: 30px;
        }

        .delete-btn {
            font-size: 20px;
        }

        /* 信息 */
        .messages-screen {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #f0f0f0;
        }

        .messages-header {
            padding: 15px 20px;
            background: #007AFF;
            color: white;
            font-size: 18px;
            font-weight: 500;
        }

        .messages-list {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }

        .message {
            background: white;
            border-radius: 15px;
            padding: 12px 15px;
            margin-bottom: 12px;
            max-width: 80%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .message.sent {
            background: #007AFF;
            color: white;
            margin-left: auto;
        }

        .message-time {
            font-size: 11px;
            text-align: right;
            margin-top: 5px;
            opacity: 0.7;
        }

        .message-input {
            display: flex;
            padding: 12px;
            background: white;
            border-top: 1px solid #eee;
        }

        .message-input input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            font-size: 15px;
        }

        .send-btn {
            background: #007AFF;
            color: white;
            border: none;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            margin-left: 10px;
            font-size: 18px;
            cursor: pointer;
        }

        /* 地图 */
        .map-screen {
            height: 100%;
            background: #4CAF50;
            display: flex;
            flex-direction: column;
        }

        .map-header {
            padding: 15px 20px;
            background: #388E3C;
            color: white;
            font-size: 18px;
            font-weight: 500;
        }

        .map-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
        }

        /* 备忘录 */
        .notes-screen {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #FFEB3B;
        }

        .notes-header {
            padding: 15px 20px;
            background: #FBC02D;
            color: white;
            font-size: 18px;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
        }

        .notes-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .note-editor {
            width: 100%;
            height: 100%;
            border: none;
            font-size: 16px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }

        .notes-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }

        .note-item {
            padding: 15px;
            background: white;
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            cursor: pointer;
        }

        .note-title {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .note-preview {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .note-date {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }

        /* 日历 */
        .calendar-screen {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #E91E63;
        }

        .calendar-header {
            padding: 15px 20px;
            background: #C2185B;
            color: white;
            font-size: 18px;
            font-weight: 500;
        }

        .calendar-content {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .calendar-date {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .calendar-events {
            width: 100%;
            max-width: 300px;
        }

        .event {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
        }

        .event-title {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .event-time {
            font-size: 14px;
            opacity: 0.9;
        }

        /* 文件浏览器 */
        .files-screen {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #f8f9fa;
        }

        .files-header {
            padding: 15px 20px;
            background: #6f42c1;
            color: white;
            font-size: 18px;
            font-weight: 500;
        }

        .files-content {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
        }

        .file-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: white;
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .file-icon {
            font-size: 24px;
            margin-right: 15px;
            color: #6f42c1;
        }

        .file-info {
            flex: 1;
        }

        .file-name {
            font-weight: 500;
            margin-bottom: 3px;
        }

        .file-size {
            font-size: 13px;
            color: #666;
        }

        /* 主页指示器 */
        .home-indicator {
            height: 5px;
            width: 130px;
            background: white;
            border-radius: 5px;
            margin: 10px auto;
            cursor: pointer;
        }

        .navigation-bar {
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background: rgba(0, 0, 0, 0.8);
        }

        .nav-btn {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }

        /* 主题设置 */
        .theme-selector {
            display: flex;
            gap: 15px;
            padding: 15px 20px;
            flex-wrap: wrap;
        }

        .theme-option {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .theme-option.active {
            border-color: white;
        }

        .wallpaper-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .wallpaper-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .wallpaper-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
        .wallpaper-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
        .wallpaper-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
        .wallpaper-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }

        /* 密码管理 */
        .password-manager {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .password-dialog {
            background: white;
            border-radius: 15px;
            padding: 25px;
            width: 300px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        .password-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            text-align: center;
        }

        .password-input {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }

        .password-buttons {
            display: flex;
            justify-content: space-between;
        }

        .password-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }

        .cancel-btn {
            background: #f8f9fa;
            color: #333;
        }

        .save-btn {
            background: #007AFF;
            color: white;
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="phone-screen">
            <div class="status-bar">
                <div class="time" id="current-time">9:41</div>
                <div class="status-icons">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-three-quarters"></i>
                </div>
            </div>
            
            <div class="screen-content">
                <!-- 主屏幕 -->
                <div class="home-screen" id="home-screen">
                    <a href="#" class="app-icon" data-app="phone">
                        <i class="fas fa-phone"></i>
                        <span>电话</span>
                    </a>
                    <a href="#" class="app-icon" data-app="messages">
                        <i class="fas fa-comment"></i>
                        <span>信息</span>
                    </a>
                    <a href="#" class="app-icon" data-app="camera">
                        <i class="fas fa-camera"></i>
                        <span>相机</span>
                    </a>
                    <a href="#" class="app-icon" data-app="photos">
                        <i class="fas fa-images"></i>
                        <span>照片</span>
                    </a>
                    <a href="#" class="app-icon" data-app="weather">
                        <i class="fas fa-cloud-sun"></i>
                        <span>天气</span>
                    </a>
                    <a href="#" class="app-icon" data-app="calculator">
                        <i class="fas fa-calculator"></i>
                        <span>计算器</span>
                    </a>
                    <a href="#" class="app-icon" data-app="music">
                        <i class="fas fa-music"></i>
                        <span>音乐</span>
                    </a>
                    <a href="#" class="app-icon" data-app="settings">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </a>
                    <a href="#" class="app-icon" data-app="browser">
                        <i class="fas fa-globe"></i>
                        <span>浏览器</span>
                    </a>
                    <a href="#" class="app-icon" data-app="maps">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>地图</span>
                    </a>
                    <a href="#" class="app-icon" data-app="notes">
                        <i class="fas fa-sticky-note"></i>
                        <span>备忘录</span>
                    </a>
                    <a href="#" class="app-icon" data-app="calendar">
                        <i class="fas fa-calendar"></i>
                        <span>日历</span>
                    </a>
                    <a href="#" class="app-icon" data-app="files">
                        <i class="fas fa-folder"></i>
                        <span>文件</span>
                    </a>
                    
                    <div class="dock">
                        <a href="#" class="app-icon" data-app="phone">
                            <i class="fas fa-phone"></i>
                        </a>
                        <a href="#" class="app-icon" data-app="messages">
                            <i class="fas fa-comment"></i>
                        </a>
                        <a href="#" class="app-icon" data-app="browser">
                            <i class="fas fa-globe"></i>
                        </a>
                        <a href="#" class="app-icon" data-app="music">
                            <i class="fas fa-music"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 浏览器应用 -->
                <div class="app-screen" id="browser-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">浏览器</div>
                    </div>
                    <div class="browser-content">
                        <div class="browser-toolbar">
                            <button class="browser-btn" onclick="goBack()"><i class="fas fa-arrow-left"></i></button>
                            <button class="browser-btn" onclick="goForward()"><i class="fas fa-arrow-right"></i></button>
                            <button class="browser-btn" onclick="refreshPage()"><i class="fas fa-sync-alt"></i></button>
                            <input type="text" class="url-input" id="url-input" value="https://www.google.com" placeholder="搜索或输入网址">
                            <button class="browser-btn" onclick="downloadFile()"><i class="fas fa-download"></i></button>
                        </div>
                        <iframe class="browser-frame" id="browser-frame" src="about:blank"></iframe>
                    </div>
                </div>
                
                <!-- 设置应用 -->
                <div class="app-screen" id="settings-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">设置</div>
                    </div>
                    <div class="settings-content">
                        <div class="setting-category">网络</div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-plane"></i> 飞行模式</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="airplane-mode">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-wifi"></i> WiFi</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="wifi-toggle" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fab fa-bluetooth-b"></i> 蓝牙</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="bluetooth-toggle">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-signal"></i> 蜂窝数据</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="cellular-toggle" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-category">显示与亮度</div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-moon"></i> 勿扰模式</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="do-not-disturb">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-location-arrow"></i> 定位服务</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="location-toggle" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-sun"></i> 亮度</div>
                            <input type="range" min="0" max="100" value="70" class="range-slider" id="brightness-slider">
                        </div>
                        
                        <div class="setting-category">声音</div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-volume-up"></i> 音量</div>
                            <input type="range" min="0" max="100" value="80" class="range-slider" id="volume-slider">
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-bell"></i> 静音</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="mute-toggle">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-category">个性化</div>
                        <div class="setting-item" onclick="openWallpaperSettings()">
                            <div class="setting-label"><i class="fas fa-image"></i> 壁纸</div>
                            <i class="fas fa-chevron-right chevron"></i>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-palette"></i> 主题</div>
                            <i class="fas fa-chevron-right chevron"></i>
                        </div>
                        
                        <div class="setting-category">安全与隐私</div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-lock"></i> 密码管理</div>
                            <i class="fas fa-chevron-right chevron"></i>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-fingerprint"></i> 指纹解锁</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="fingerprint-toggle">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-category">系统</div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-sync-alt"></i> 自动更新</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="auto-update" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-battery-full"></i> 低电量模式</div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="low-power-mode">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label"><i class="fas fa-info-circle"></i> 关于手机</div>
                            <i class="fas fa-chevron-right chevron"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 壁纸设置 -->
                <div class="app-screen" id="wallpaper-app" style="display: none;">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeWallpaperSettings()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">壁纸</div>
                    </div>
                    <div class="settings-content">
                        <div class="setting-category">选择壁纸</div>
                        <div class="theme-selector">
                            <div class="theme-option wallpaper-1 active" data-wallpaper="wallpaper-1"></div>
                            <div class="theme-option wallpaper-2" data-wallpaper="wallpaper-2"></div>
                            <div class="theme-option wallpaper-3" data-wallpaper="wallpaper-3"></div>
                            <div class="theme-option wallpaper-4" data-wallpaper="wallpaper-4"></div>
                            <div class="theme-option wallpaper-5" data-wallpaper="wallpaper-5"></div>
                            <div class="theme-option wallpaper-6" data-wallpaper="wallpaper-6"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 计算器应用 -->
                <div class="app-screen" id="calculator-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">计算器</div>
                    </div>
                    <div class="calculator-screen" id="calc-screen">0</div>
                    <div class="calculator-buttons">
                        <button class="calc-btn clear" onclick="clearCalc()">C</button>
                        <button class="calc-btn" onclick="appendToCalc('/')">/</button>
                        <button class="calc-btn" onclick="appendToCalc('*')">×</button>
                        <button class="calc-btn" onclick="deleteLast()">⌫</button>
                        
                        <button class="calc-btn" onclick="appendToCalc('7')">7</button>
                        <button class="calc-btn" onclick="appendToCalc('8')">8</button>
                        <button class="calc-btn" onclick="appendToCalc('9')">9</button>
                        <button class="calc-btn operator" onclick="appendToCalc('-')">-</button>
                        
                        <button class="calc-btn" onclick="appendToCalc('4')">4</button>
                        <button class="calc-btn" onclick="appendToCalc('5')">5</button>
                        <button class="calc-btn" onclick="appendToCalc('6')">6</button>
                        <button class="calc-btn operator" onclick="appendToCalc('+')">+</button>
                        
                        <button class="calc-btn" onclick="appendToCalc('1')">1</button>
                        <button class="calc-btn" onclick="appendToCalc('2')">2</button>
                        <button class="calc-btn" onclick="appendToCalc('3')">3</button>
                        <button class="calc-btn equals" onclick="calculate()">=</button>
                        
                        <button class="calc-btn" onclick="appendToCalc('0')" style="grid-column: span 2;">0</button>
                        <button class="calc-btn" onclick="appendToCalc('.')">.</button>
                    </div>
                </div>
                
                <!-- 相机应用 -->
                <div class="app-screen" id="camera-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">相机</div>
                    </div>
                    <div class="camera-screen">
                        <div class="camera-viewfinder">
                            <i class="fas fa-camera"></i>
                        </div>
                        <div class="camera-controls">
                            <i class="fas fa-sync-alt nav-btn"></i>
                            <div class="shutter-btn" onclick="takePhoto()"></div>
                            <i class="fas fa-images nav-btn"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 照片应用 -->
                <div class="app-screen" id="photos-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">照片</div>
                    </div>
                    <div class="gallery-screen">
                        <div class="gallery-item"><i class="fas fa-mountain"></i></div>
                        <div class="gallery-item"><i class="fas fa-city"></i></div>
                        <div class="gallery-item"><i class="fas fa-tree"></i></div>
                        <div class="gallery-item"><i class="fas fa-cat"></i></div>
                        <div class="gallery-item"><i class="fas fa-dog"></i></div>
                        <div class="gallery-item"><i class="fas fa-car"></i></div>
                        <div class="gallery-item"><i class="fas fa-coffee"></i></div>
                        <div class="gallery-item"><i class="fas fa-utensils"></i></div>
                        <div class="gallery-item"><i class="fas fa-book"></i></div>
                    </div>
                </div>
                
                <!-- 音乐应用 -->
                <div class="app-screen" id="music-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">音乐</div>
                    </div>
                    <div class="music-player">
                        <div class="album-art">
                            <i class="fas fa-music"></i>
                        </div>
                        <div class="song-info">
                            <div class="song-title">虚拟歌曲</div>
                            <div class="song-artist">虚拟艺术家</div>
                        </div>
                        <div class="progress-container">
                            <div class="progress-bar" onclick="seekMusic(event)">
                                <div class="progress" id="music-progress"></div>
                            </div>
                            <div class="time-info">
                                <span id="current-time-display">1:23</span>
                                <span id="total-time-display">4:56</span>
                            </div>
                        </div>
                        <div class="player-controls">
                            <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                            <button class="control-btn play-btn" onclick="togglePlay()"><i class="fas fa-play" id="play-icon"></i></button>
                            <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                        </div>
                    </div>
                </div>
                
                <!-- 天气应用 -->
                <div class="app-screen" id="weather-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">天气</div>
                    </div>
                    <div class="weather-screen">
                        <div class="weather-header">
                            <div class="weather-icon"><i class="fas fa-sun"></i></div>
                            <div class="temperature">26°</div>
                            <div class="location">北京</div>
                        </div>
                        <div class="weather-details">
                            <div class="detail-item">
                                <div class="detail-value">28°</div>
                                <div class="detail-label">最高</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-value">19°</div>
                                <div class="detail-label">最低</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-value">65%</div>
                                <div class="detail-label">湿度</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 电话应用 -->
                <div class="app-screen" id="phone-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">电话</div>
                    </div>
                    <div class="phone-screen-content">
                        <div class="dial-display" id="dial-display"> </div>
                        <div class="dial-pad">
                            <button class="dial-btn" onclick="dialNumber('1')">1</button>
                            <button class="dial-btn" onclick="dialNumber('2')">2</button>
                            <button class="dial-btn" onclick="dialNumber('3')">3</button>
                            <button class="dial-btn" onclick="dialNumber('4')">4</button>
                            <button class="dial-btn" onclick="dialNumber('5')">5</button>
                            <button class="dial-btn" onclick="dialNumber('6')">6</button>
                            <button class="dial-btn" onclick="dialNumber('7')">7</button>
                            <button class="dial-btn" onclick="dialNumber('8')">8</button>
                            <button class="dial-btn" onclick="dialNumber('9')">9</button>
                            <button class="dial-btn" onclick="dialNumber('*')">*</button>
                            <button class="dial-btn" onclick="dialNumber('0')">0</button>
                            <button class="dial-btn" onclick="dialNumber('#')">#</button>
                        </div>
                        <div style="display: flex; justify-content: center; margin-top: 20px;">
                            <button class="dial-btn delete-btn" onclick="deleteDigit()"><i class="fas fa-backspace"></i></button>
                            <button class="dial-btn call-btn" onclick="makeCall()"><i class="fas fa-phone"></i></button>
                        </div>
                    </div>
                </div>
                
                <!-- 信息应用 -->
                <div class="app-screen" id="messages-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">信息</div>
                    </div>
                    <div class="messages-screen">
                        <div class="messages-header">消息</div>
                        <div class="messages-list" id="messages-list">
                            <div class="message">
                                <div>你好！今天过得怎么样？</div>
                                <div class="message-time">10:30</div>
                            </div>
                            <div class="message sent">
                                <div>很好，谢谢！你呢？</div>
                                <div class="message-time">10:32</div>
                            </div>
                            <div class="message">
                                <div>我也很好。周末有什么计划吗？</div>
                                <div class="message-time">10:35</div>
                            </div>
                        </div>
                        <div class="message-input">
                            <input type="text" id="message-input" placeholder="输入消息...">
                            <button class="send-btn" onclick="sendMessage()"><i class="fas fa-paper-plane"></i></button>
                        </div>
                    </div>
                </div>
                
                <!-- 地图应用 -->
                <div class="app-screen" id="maps-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">地图</div>
                    </div>
                    <div class="map-screen">
                        <div class="map-header">地图</div>
                        <div class="map-content">
                            <div>地图内容区域</div>
                        </div>
                    </div>
                </div>
                
                <!-- 备忘录应用 -->
                <div class="app-screen" id="notes-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">备忘录</div>
                    </div>
                    <div class="notes-screen">
                        <div class="notes-header">
                            <span>我的备忘录</span>
                            <button class="back-btn" onclick="newNote()"><i class="fas fa-plus"></i></button>
                        </div>
                        <div class="notes-list" id="notes-list">
                            <div class="note-item" onclick="openNote(0)">
                                <div class="note-info">
                                    <div class="note-title">购物清单</div>
                                    <div class="note-preview">牛奶、面包、鸡蛋、苹果...</div>
                                    <div class="note-date">2023-10-15</div>
                                </div>
                            </div>
                            <div class="note-item" onclick="openNote(1)">
                                <div class="note-info">
                                    <div class="note-title">会议记录</div>
                                    <div class="note-preview">讨论项目进度和下一步计划...</div>
                                    <div class="note-date">2023-10-14</div>
                                </div>
                            </div>
                            <div class="note-item" onclick="openNote(2)">
                                <div class="note-info">
                                    <div class="note-title">旅行计划</div>
                                    <div class="note-preview">目的地：桂林，时间：11月...</div>
                                    <div class="note-date">2023-10-10</div>
                                </div>
                            </div>
                        </div>
                        <div class="notes-content" id="notes-content" style="display: none;">
                            <textarea class="note-editor" id="note-editor" placeholder="在这里输入您的备忘录..."></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- 日历应用 -->
                <div class="app-screen" id="calendar-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">日历</div>
                    </div>
                    <div class="calendar-screen">
                        <div class="calendar-header">日历</div>
                        <div class="calendar-content">
                            <div class="calendar-date" id="calendar-date">2023年10月15日 星期日</div>
                            <div class="calendar-events">
                                <div class="event">
                                    <div class="event-title">团队会议</div>
                                    <div class="event-time">上午 10:00 - 11:30</div>
                                </div>
                                <div class="event">
                                    <div class="event-title">午餐约会</div>
                                    <div class="event-time">中午 12:30 - 14:00</div>
                                </div>
                                <div class="event">
                                    <div class="event-title">项目截止</div>
                                    <div class="event-time">晚上 18:00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 文件浏览器 -->
                <div class="app-screen" id="files-app">
                    <div class="app-header">
                        <button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
                        <div class="app-title">文件</div>
                    </div>
                    <div class="files-screen">
                        <div class="files-header">我的文件</div>
                        <div class="files-content">
                            <div class="file-item">
                                <div class="file-icon"><i class="fas fa-file-pdf"></i></div>
                                <div class="file-info">
                                    <div class="file-name">项目报告.pdf</div>
                                    <div class="file-size">2.4 MB</div>
                                </div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon"><i class="fas fa-file-image"></i></div>
                                <div class="file-info">
                                    <div class="file-name">度假照片.jpg</div>
                                    <div class="file-size">1.8 MB</div>
                                </div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon"><i class="fas fa-file-word"></i></div>
                                <div class="file-info">
                                    <div class="file-name">简历.docx</div>
                                    <div class="file-size">350 KB</div>
                                </div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon"><i class="fas fa-file-excel"></i></div>
                                <div class="file-info">
                                    <div class="file-name">财务报表.xlsx</div>
                                    <div class="file-size">1.2 MB</div>
                                </div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon"><i class="fas fa-file-archive"></i></div>
                                <div class="file-info">
                                    <div class="file-name">备份文件.zip</div>
                                    <div class="file-size">45 MB</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="home-indicator" onclick="showHomeScreen()"></div>
            
            <div class="navigation-bar">
                <button class="nav-btn" onclick="showNotificationCenter()"><i class="fas fa-bell"></i></button>
                <button class="nav-btn" onclick="showHomeScreen()"><i class="fas fa-home"></i></button>
                <button class="nav-btn"><i class="fas fa-user"></i></button>
            </div>
        </div>
        
        <!-- 通知中心 -->
        <div class="notification-center" id="notification-center">
            <div class="notification-header">通知中心</div>
            <div class="close-notification" onclick="closeNotificationCenter()"><i class="fas fa-times"></i></div>
            <div class="notifications">
                <div class="notification">
                    <div class="notification-title">新消息</div>
                    <div class="notification-content">您有一条新信息来自朋友</div>
                </div>
                <div class="notification">
                    <div class="notification-title">天气提醒</div>
                    <div class="notification-content">今天天气晴朗，适合外出</div>
                </div>
                <div class="notification">
                    <div class="notification-title">系统更新</div>
                    <div class="notification-content">有新的系统更新可用</div>
                </div>
                <div class="notification">
                    <div class="notification-title">日历提醒</div>
                    <div class="notification-content">下午3点会议提醒</div>
                </div>
                <div class="notification">
                    <div class="notification-title">音乐</div>
                    <div class="notification-content">您喜欢的歌曲已添加到播放列表</div>
                </div>
            </div>
        </div>
        
        <!-- 下载通知 -->
        <div class="download-notification" id="download-notification">
            文件已下载到下载文件夹
        </div>
        
        <!-- 密码管理器 -->
        <div class="password-manager" id="password-manager">
            <div class="password-dialog">
                <div class="password-title">保存密码</div>
                <p>是否要为该网站保存密码？</p>
                <input type="text" class="password-input" id="username-input" placeholder="用户名">
                <input type="password" class="password-input" id="password-input" placeholder="密码">
                <div class="password-buttons">
                    <button class="password-btn cancel-btn" onclick="closePasswordManager()">取消</button>
                    <button class="password-btn save-btn" onclick="savePassword()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 更新时间
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.getElementById('current-time').textContent = `${hours}:${minutes}`;
            
            // 更新日历日期
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            document.getElementById('calendar-date').textContent = now.toLocaleDateString('zh-CN', options);
        }
        
        setInterval(updateTime, 60000);
        updateTime();
        
        // 应用图标点击事件
        document.querySelectorAll('.app-icon').forEach(icon => {
            icon.addEventListener('click', function(e) {
                e.preventDefault();
                const app = this.getAttribute('data-app');
                openApp(app);
            });
        });
        
        // 打开应用
        function openApp(appName) {
            document.getElementById('home-screen').style.display = 'none';
            document.getElementById(`${appName}-app`).style.display = 'flex';
            
            // 特殊处理浏览器
            if (appName === 'browser') {
                const urlInput = document.getElementById('url-input');
                const browserFrame = document.getElementById('browser-frame');
                
                urlInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        let url = urlInput.value;
                        if (!url.startsWith('http')) {
                            url = 'https://' + url;
                        }
                        browserFrame.src = url;
                    }
                });
            }
            
            // 特殊处理备忘录
            if (appName === 'notes') {
                document.getElementById('notes-list').style.display = 'block';
                document.getElementById('notes-content').style.display = 'none';
            }
        }
        
        // 关闭应用
        function closeApp() {
            document.querySelectorAll('.app-screen').forEach(screen => {
                screen.style.display = 'none';
            });
            document.getElementById('home-screen').style.display = 'grid';
        }
        
        // 显示主屏幕
        function showHomeScreen() {
            document.querySelectorAll('.app-screen').forEach(screen => {
                screen.style.display = 'none';
            });
            document.getElementById('home-screen').style.display = 'grid';
            closeNotificationCenter();
        }
        
        // 显示通知中心
        function showNotificationCenter() {
            document.getElementById('notification-center').style.display = 'flex';
        }
        
        // 关闭通知中心
        function closeNotificationCenter() {
            document.getElementById('notification-center').style.display = 'none';
        }
        
        // 计算器功能
        let calcDisplay = document.getElementById('calc-screen');
        let currentInput = '0';
        let operator = null;
        let previousInput = null;
        
        function appendToCalc(value) {
            if (currentInput === '0' && value !== '.') {
                currentInput = value;
            } else {
                currentInput += value;
            }
            calcDisplay.textContent = currentInput;
        }
        
        function clearCalc() {
            currentInput = '0';
            operator = null;
            previousInput = null;
            calcDisplay.textContent = currentInput;
        }
        
        function deleteLast() {
            currentInput = currentInput.toString().slice(0, -1);
            if (currentInput === '') currentInput = '0';
            calcDisplay.textContent = currentInput;
        }
        
        function calculate() {
            if (operator && previousInput !== null) {
                let result;
                const prev = parseFloat(previousInput);
                const current = parseFloat(currentInput);
                
                switch (operator) {
                    case '+':
                        result = prev + current;
                        break;
                    case '-':
                        result = prev - current;
                        break;
                    case '*':
                        result = prev * current;
                        break;
                    case '/':
                        result = prev / current;
                        break;
                    default:
                        return;
                }
                
                currentInput = result.toString();
                operator = null;
                previousInput = null;
                calcDisplay.textContent = currentInput;
            }
        }
        
        // 相机快门按钮点击效果
        function takePhoto() {
            const shutterBtn = document.querySelector('.shutter-btn');
            shutterBtn.style.transform = 'scale(0.9)';
            setTimeout(() => {
                shutterBtn.style.transform = 'scale(1)';
                alert('照片已拍摄！');
            }, 100);
        }
        
        // 音乐播放器
        let isPlaying = false;
        const playIcon = document.getElementById('play-icon');
        const musicProgress = document.getElementById('music-progress');
        let progressInterval;
        
        function togglePlay() {
            isPlaying = !isPlaying;
            if (isPlaying) {
                playIcon.className = 'fas fa-pause';
                startProgress();
            } else {
                playIcon.className = 'fas fa-play';
                stopProgress();
            }
        }
        
        function startProgress() {
            let progress = 30; // 初始进度30%
            progressInterval = setInterval(() => {
                progress += 0.5;
                if (progress > 100) progress = 0;
                musicProgress.style.width = progress + '%';
                
                // 更新时间显示
                const currentTime = Math.floor(progress * 2.976); // 总时间297.6秒
                const minutes = Math.floor(currentTime / 60);
                const seconds = currentTime % 60;
                document.getElementById('current-time-display').textContent = 
                    `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
            }, 100);
        }
        
        function stopProgress() {
            clearInterval(progressInterval);
        }
        
        function seekMusic(e) {
            const progressBar = e.currentTarget;
            const rect = progressBar.getBoundingClientRect();
            const pos = (e.clientX - rect.left) / rect.width;
            musicProgress.style.width = (pos * 100) + '%';
        }
        
        // 电话应用
        const dialDisplay = document.getElementById('dial-display');
        let dialNumberStr = '';
        
        function dialNumber(num) {
            dialNumberStr += num;
            dialDisplay.textContent = dialNumberStr;
        }
        
        function deleteDigit() {
            dialNumberStr = dialNumberStr.slice(0, -1);
            dialDisplay.textContent = dialNumberStr || ' ';
        }
        
        function makeCall() {
            if (dialNumberStr) {
                alert(`正在拨打: ${dialNumberStr}`);
            }
        }
        
        // 信息应用
        function sendMessage() {
            const input = document.getElementById('message-input');
            const message = input.value.trim();
            
            if (message) {
                const messagesList = document.getElementById('messages-list');
                const messageElement = document.createElement('div');
                messageElement.className = 'message sent';
                
                const now = new Date();
                const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
                
                messageElement.innerHTML = `
                    <div>${message}</div>
                    <div class="message-time">${timeString}</div>
                `;
                
                messagesList.appendChild(messageElement);
                input.value = '';
                
                // 滚动到底部
                messagesList.scrollTop = messagesList.scrollHeight;
            }
        }
        
        // 壁纸设置
        function openWallpaperSettings() {
            document.getElementById('settings-app').style.display = 'none';
            document.getElementById('wallpaper-app').style.display = 'flex';
            
            // 壁纸选择事件
            document.querySelectorAll('.theme-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.theme-option').forEach(opt => {
                        opt.classList.remove('active');
                    });
                    this.classList.add('active');
                    
                    const wallpaperClass = this.getAttribute('data-wallpaper');
                    document.querySelector('.home-screen').className = 'home-screen ' + wallpaperClass;
                });
            });
        }
        
        function closeWallpaperSettings() {
            document.getElementById('wallpaper-app').style.display = 'none';
            document.getElementById('settings-app').style.display = 'flex';
        }
        
        // 初始化壁纸选择
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.theme-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.theme-option').forEach(opt => {
                        opt.classList.remove('active');
                    });
                    this.classList.add('active');
                    
                    const wallpaperClass = this.getAttribute('data-wallpaper');
                    document.querySelector('.home-screen').className = 'home-screen ' + wallpaperClass;
                });
            });
        });
        
        // 浏览器功能
        function goBack() {
            const browserFrame = document.getElementById('browser-frame');
            browserFrame.contentWindow.history.back();
        }
        
        function goForward() {
            const browserFrame = document.getElementById('browser-frame');
            browserFrame.contentWindow.history.forward();
        }
        
        function refreshPage() {
            const browserFrame = document.getElementById('browser-frame');
            browserFrame.contentWindow.location.reload();
        }
        
        function downloadFile() {
            const notification = document.getElementById('download-notification');
            notification.style.display = 'block';
            setTimeout(() => {
                notification.style.display = 'none';
            }, 3000);
        }
        
        // 设置网络冲突处理
        document.getElementById('airplane-mode').addEventListener('change', function() {
            const airplaneMode = this.checked;
            const wifiToggle = document.getElementById('wifi-toggle');
            const cellularToggle = document.getElementById('cellular-toggle');
            
            if (airplaneMode) {
                wifiToggle.checked = false;
                cellularToggle.checked = false;
                wifiToggle.disabled = true;
                cellularToggle.disabled = true;
            } else {
                wifiToggle.disabled = false;
                cellularToggle.disabled = false;
            }
        });
        
        document.getElementById('wifi-toggle').addEventListener('change', function() {
            const wifiEnabled = this.checked;
            const airplaneMode = document.getElementById('airplane-mode');
            
            if (wifiEnabled && airplaneMode.checked) {
                airplaneMode.checked = false;
            }
        });
        
        document.getElementById('cellular-toggle').addEventListener('change', function() {
            const cellularEnabled = this.checked;
            const airplaneMode = document.getElementById('airplane-mode');
            
            if (cellularEnabled && airplaneMode.checked) {
                airplaneMode.checked = false;
            }
        });
        
        // 备忘录功能
        const notes = [
            {
                title: "购物清单",
                content: "牛奶、面包、鸡蛋、苹果、香蕉、西红柿、黄瓜、鸡肉、大米、食用油",
                date: "2023-10-15"
            },
            {
                title: "会议记录",
                content: "讨论项目进度和下一步计划。需要完成的任务：1. 完成前端界面设计 2. 优化后端API性能 3. 准备下周的汇报材料",
                date: "2023-10-14"
            },
            {
                title: "旅行计划",
                content: "目的地：桂林\n时间：11月15日-11月22日\n行程安排：\n- 第一天：抵达桂林，入住酒店\n- 第二天：游览象鼻山、七星公园\n- 第三天：漓江游船\n- 第四天：阳朔西街\n- 第五天：遇龙河漂流\n- 第六天：银子岩\n- 第七天：返回",
                date: "2023-10-10"
            }
        ];
        
        function newNote() {
            document.getElementById('notes-list').style.display = 'none';
            document.getElementById('notes-content').style.display = 'block';
            document.getElementById('note-editor').value = '';
        }
        
        function openNote(index) {
            document.getElementById('notes-list').style.display = 'none';
            document.getElementById('notes-content').style.display = 'block';
            document.getElementById('note-editor').value = notes[index].content;
        }
        
        // 密码管理器
        function showPasswordManager() {
            document.getElementById('password-manager').style.display = 'flex';
        }
        
        function closePasswordManager() {
            document.getElementById('password-manager').style.display = 'none';
        }
        
        function savePassword() {
            const username = document.getElementById('username-input').value;
            const password = document.getElementById('password-input').value;
            
            if (username && password) {
                alert(`密码已保存：\n用户名: ${username}\n密码: ${password}`);
                closePasswordManager();
            } else {
                alert('请填写用户名和密码');
            }
        }
    </script>
</body>
</html>
编辑器加载中
预览
控制台