编辑页面

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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .phone-frame {
            width: 375px;
            height: 812px;
            background: #fff;
            border-radius: 40px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
        .screen {
            height: calc(100% - 80px);
            overflow-y: auto;
            overflow-x: hidden;
        }
        .screen::-webkit-scrollbar {
            display: none;
        }
        /* 首页 */
        .home-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            padding-top: 40px;
        }
        .home-header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .home-header h1 {
            font-size: 24px;
            font-weight: 600;
        }
        .header-icons {
            display: flex;
            gap: 15px;
        }
        .header-icons span {
            font-size: 20px;
            cursor: pointer;
        }
        .child-info {
            background: rgba(255,255,255,0.15);
            border-radius: 15px;
            padding: 15px;
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .child-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 12px;
        }
        .child-details {
            flex: 1;
        }
        .child-name {
            font-size: 16px;
            font-weight: 600;
        }
        .child-status {
            font-size: 12px;
            opacity: 0.9;
            margin-top: 4px;
        }
        .child-battery {
            font-size: 20px;
        }
        .location-card {
            background: white;
            border-radius: 15px;
            padding: 15px;
            margin: 0 15px 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.2s;
        }
        .location-card:active {
            transform: scale(0.98);
        }
        .location-map {
            height: 180px;
            background: linear-gradient(180deg, #e8f4e8 0%, #d4e8d4 100%);
            border-radius: 10px;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
        }
        .map-grid {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(200,200,200,0.3) 1px, transparent 1px),
                linear-gradient(90deg, rgba(200,200,200,0.3) 1px, transparent 1px);
            background-size: 30px 30px;
        }
        .map-marker {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: #667eea;
            border-radius: 50% 50% 50% 0;
            transform: translate(-50%, -100%) rotate(-45deg);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .map-marker::after {
            content: "";
            position: absolute;
            width: 60px;
            height: 60px;
            background: rgba(102,126,234,0.3);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .map-marker span {
            transform: rotate(45deg);
            color: white;
            font-size: 18px;
        }
        .fence-zone {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border: 3px dashed #4CAF50;
            border-radius: 50%;
            opacity: 0.7;
        }
        .location-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .location-text h3 {
            color: #333;
            font-size: 15px;
            margin-bottom: 4px;
        }
        .location-text p {
            color: #888;
            font-size: 12px;
        }
        .location-arrow {
            color: #667eea;
            font-size: 24px;
        }
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 0 15px;
            margin-bottom: 15px;
        }
        .quick-action {
            background: white;
            border-radius: 15px;
            padding: 15px 10px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: all 0.2s;
        }
        .quick-action:active {
            transform: scale(0.95);
            background: #f5f5f5;
        }
        .quick-action-icon {
            width: 40px;
            height: 40px;
            margin: 0 auto 8px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .quick-action span {
            font-size: 11px;
            color: #666;
        }
        .function-list {
            padding: 15px;
        }
        .function-category {
            margin-bottom: 15px;
        }
        .category-title {
            font-size: 14px;
            color: #888;
            margin-bottom: 10px;
            padding-left: 5px;
        }
        .function-items {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .function-item {
            padding: 15px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background 0.2s;
        }
        .function-item:last-child {
            border-bottom: none;
        }
        .function-item:active {
            background: #f9f9f9;
        }
        .function-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }
        .function-content {
            flex: 1;
        }
        .function-content h4 {
            font-size: 14px;
            color: #333;
            margin-bottom: 3px;
        }
        .function-content p {
            font-size: 11px;
            color: #999;
        }
        .function-arrow {
            color: #ccc;
            font-size: 18px;
        }
        /* 页面通用样式 */
        .page-header {
            position: sticky;
            top: 0;
            background: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            z-index: 10;
        }
        .back-btn {
            font-size: 24px;
            margin-right: 15px;
            cursor: pointer;
        }
        .page-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        .page-content {
            padding: 20px;
        }
        /* 定位页面 */
        .map-container {
            height: 300px;
            background: linear-gradient(180deg, #e8f4e8 0%, #d4e8d4 100%);
            border-radius: 15px;
            margin-bottom: 20px;
            position: relative;
        }
        .full-map {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .full-map .map-grid {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(150,150,150,0.3) 1px, transparent 1px),
                linear-gradient(90deg, rgba(150,150,150,0.3) 1px, transparent 1px);
            background-size: 25px 25px;
        }
        .map-controls {
            position: absolute;
            right: 15px;
            top: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .map-btn {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            cursor: pointer;
        }
        .location-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #667eea;
            color: white;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 14px;
            box-shadow: 0 4px 15px rgba(102,126,234,0.4);
            cursor: pointer;
        }
        .info-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }
        .info-card {
            background: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .info-card h4 {
            font-size: 12px;
            color: #888;
            margin-bottom: 8px;
        }
        .info-card .value {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }
        .info-card .unit {
            font-size: 12px;
            color: #888;
        }
        .fence-section {
            background: white;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .add-btn {
            color: #667eea;
            font-size: 14px;
            cursor: pointer;
        }
        .fence-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .fence-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background: #f8f8f8;
            border-radius: 10px;
        }
        .fence-icon {
            width: 35px;
            height: 35px;
            background: #e8f0ff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 16px;
        }
        .fence-info {
            flex: 1;
        }
        .fence-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 3px;
        }
        .fence-status {
            font-size: 11px;
            color: #4CAF50;
        }
        .fence-toggle {
            width: 45px;
            height: 26px;
            background: #667eea;
            border-radius: 13px;
            position: relative;
            cursor: pointer;
        }
        .fence-toggle::after {
            content: "";
            position: absolute;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 21px;
            transition: left 0.2s;
        }
        .fence-toggle.off {
            background: #ddd;
        }
        .fence-toggle.off::after {
            left: 2px;
        }
        /* 围栏详情弹窗 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
        .modal.show {
            display: flex;
        }
        .modal-content {
            background: white;
            width: 90%;
            max-width: 350px;
            border-radius: 20px;
            padding: 25px;
            animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .modal-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .modal-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            margin: 0 auto 15px;
            color: white;
        }
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        .modal-info {
            background: #f8f8f8;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .modal-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .modal-row:last-child {
            margin-bottom: 0;
        }
        .modal-label {
            color: #888;
            font-size: 13px;
        }
        .modal-value {
            color: #333;
            font-size: 13px;
            font-weight: 500;
        }
        .modal-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 15px;
            cursor: pointer;
        }
        .modal-close {
            margin-top: 12px;
            text-align: center;
            color: #888;
            font-size: 14px;
            cursor: pointer;
        }
        /* 安全防护页面 */
        .alert-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .alert-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .alert-icon {
            width: 45px;
            height: 45px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-right: 12px;
        }
        .alert-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .alert-time {
            font-size: 12px;
            color: #888;
        }
        .alert-content {
            background: #f8f8f8;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .alert-type {
            display: inline-block;
            background: #fff3e0;
            color: #ff9800;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            margin-bottom: 8px;
        }
        .alert-desc {
            font-size: 13px;
            color: #666;
            line-height: 1.5;
        }
        .alert-actions {
            display: flex;
            gap: 10px;
        }
        .alert-btn {
            flex: 1;
            padding: 10px;
            border-radius: 10px;
            font-size: 13px;
            text-align: center;
            cursor: pointer;
            border: none;
        }
        .alert-btn.primary {
            background: #667eea;
            color: white;
        }
        .alert-btn.secondary {
            background: #f0f0f0;
            color: #666;
        }
        .recording-list {
            margin-top: 20px;
        }
        .recording-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background: #f8f8f8;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        .recording-icon {
            width: 40px;
            height: 40px;
            background: #e3f2fd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 16px;
        }
        .recording-info {
            flex: 1;
        }
        .recording-name {
            font-size: 13px;
            color: #333;
            margin-bottom: 3px;
        }
        .recording-meta {
            font-size: 11px;
            color: #888;
        }
        .play-btn {
            width: 35px;
            height: 35px;
            background: #667eea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            cursor: pointer;
        }
        /* SOS页面 */
        .sos-status {
            text-align: center;
            padding: 30px;
            background: white;
            border-radius: 15px;
            margin-bottom: 20px;
        }
        .sos-circle {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            box-shadow: 0 8px 25px rgba(244,67,54,0.4);
            cursor: pointer;
        }
        .sos-circle:active {
            transform: scale(0.95);
        }
        .sos-icon {
            font-size: 50px;
            color: white;
        }
        .sos-text {
            font-size: 16px;
            color: #333;
            font-weight: 600;
        }
        .sos-hint {
            font-size: 12px;
            color: #888;
            margin-top: 5px;
        }
        .emergency-contacts {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .contact-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .contact-item:last-child {
            border-bottom: none;
        }
        .contact-avatar {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            margin-right: 12px;
        }
        .contact-info {
            flex: 1;
        }
        .contact-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 3px;
        }
        .contact-phone {
            font-size: 12px;
            color: #888;
        }
        .contact-badge {
            background: #e3f2fd;
            color: #2196f3;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
        }
        .sos-settings {
            background: white;
            border-radius: 15px;
            padding: 20px;
        }
        .setting-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .setting-row:last-child {
            border-bottom: none;
        }
        .setting-label {
            font-size: 14px;
            color: #333;
        }
        .setting-value {
            font-size: 14px;
            color: #888;
        }
        /* 健康监测页面 */
        .health-overview {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            padding: 20px;
            color: white;
            margin-bottom: 20px;
        }
        .health-title {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 15px;
        }
        .health-data {
            display: flex;
            justify-content: space-around;
        }
        .health-item {
            text-align: center;
        }
        .health-value {
            font-size: 32px;
            font-weight: 600;
        }
        .health-label {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 5px;
        }
        .chart-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
        }
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .chart-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        .chart-period {
            font-size: 12px;
            color: #667eea;
        }
        .chart-area {
            height: 150px;
            position: relative;
        }
        .simple-chart {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            height: 120px;
            padding: 0 10px;
        }
        .chart-bar {
            width: 30px;
            background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
            border-radius: 5px 5px 0 0;
            position: relative;
        }
        .chart-label {
            text-align: center;
            font-size: 10px;
            color: #888;
            margin-top: 8px;
        }
        .health-tips {
            background: white;
            border-radius: 15px;
            padding: 20px;
        }
        .tip-item {
            display: flex;
            align-items: flex-start;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .tip-item:last-child {
            border-bottom: none;
        }
        .tip-icon {
            width: 30px;
            height: 30px;
            background: #e8f5e9;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 14px;
        }
        .tip-text {
            font-size: 13px;
            color: #333;
            line-height: 1.5;
        }
        /* 护眼管理页面 */
        .eye-protection-header {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
            border-radius: 15px;
            padding: 20px;
            color: white;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .eye-icon-large {
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            margin-right: 15px;
        }
        .eye-info h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }
        .eye-info p {
            font-size: 12px;
            opacity: 0.9;
        }
        .device-list {
            margin-top: 15px;
        }
        .device-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: white;
            border-radius: 12px;
            margin-bottom: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .device-icon {
            width: 40px;
            height: 40px;
            background: #e3f2fd;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 20px;
        }
        .device-info {
            flex: 1;
        }
        .device-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 3px;
        }
        .device-status {
            font-size: 11px;
            color: #4CAF50;
        }
        .device-toggle {
            width: 45px;
            height: 26px;
            background: #667eea;
            border-radius: 13px;
            position: relative;
            cursor: pointer;
        }
        .device-toggle::after {
            content: "";
            position: absolute;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 21px;
        }
        .usage-stats {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
        }
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        .stat-item {
            text-align: center;
            padding: 15px;
            background: #f8f8f8;
            border-radius: 12px;
        }
        .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }
        .stat-label {
            font-size: 12px;
            color: #888;
            margin-top: 5px;
        }
        /* 设备管理页面 */
        .device-manager-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .current-device {
            display: flex;
            align-items: center;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            color: white;
            margin-bottom: 20px;
        }
        .device-avatar {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 15px;
        }
        .device-details h4 {
            font-size: 16px;
            margin-bottom: 5px;
        }
        .device-details p {
            font-size: 12px;
            opacity: 0.8;
        }
        .device-actions {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
        .device-action {
            text-align: center;
            padding: 15px 10px;
            background: #f8f8f8;
            border-radius: 12px;
            cursor: pointer;
        }
        .device-action:active {
            background: #eee;
        }
        .device-action-icon {
            font-size: 24px;
            margin-bottom: 8px;
        }
        .device-action span {
            font-size: 12px;
            color: #666;
        }
        .settings-list {
            background: white;
            border-radius: 15px;
            overflow: hidden;
        }
        .settings-item {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .settings-item:last-child {
            border-bottom: none;
        }
        .settings-item:active {
            background: #f9f9f9;
        }
        .settings-icon {
            width: 35px;
            height: 35px;
            background: #f0f0f0;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 16px;
        }
        .settings-text {
            flex: 1;
            font-size: 14px;
            color: #333;
        }
        .settings-arrow {
            color: #ccc;
            font-size: 18px;
        }
        /* 底部导航 */
        .bottom-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #f0f0f0;
            padding-bottom: 10px;
        }
        .nav-item {
            text-align: center;
            cursor: pointer;
            padding: 5px 15px;
        }
        .nav-item:active {
            transform: scale(0.9);
        }
        .nav-icon {
            font-size: 24px;
            margin-bottom: 5px;
        }
        .nav-item span {
            font-size: 10px;
            color: #888;
        }
        .nav-item.active span {
            color: #667eea;
        }
        .nav-item.active .nav-icon {
            color: #667eea;
        }
        /* 页面容器 */
        .page {
            display: none;
        }
        .page.active {
            display: block;
        }
        /* Toast提示 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 14px;
            z-index: 200;
            display: none;
        }
        .toast.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        /* 标题栏 */
        .page-header-title {
            text-align: center;
            padding: 15px;
            font-size: 18px;
            font-weight: 600;
            color: #333;
            background: white;
            border-bottom: 1px solid #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="phone-frame">
        <div class="screen">
            <!-- 首页 -->
            <div id="page-home" class="page active">
                <div class="home-header">
                    <div class="home-header-top">
                        <h1>学生智能安全防护书包</h1>
                        <div class="header-icons">
                            <span>🔔</span>
                            <span>⚙️</span>
                        </div>
                    </div>
                    <div class="child-info">
                        <div class="child-avatar">👦</div>
                        <div class="child-details">
                            <div class="child-name">小明</div>
                            <div class="child-status">正在学校 · 已到校</div>
                        </div>
                        <div class="child-battery">🔋 85%</div>
                    </div>
                </div>
                <div class="location-card" onclick="showPage('location')">
                    <div class="location-map">
                        <div class="map-grid"></div>
                        <div class="fence-zone"></div>
                        <div class="map-marker"><span>📍</span></div>
                    </div>
                    <div class="location-info">
                        <div class="location-text">
                            <h3>北京市海淀区中关村第一小学</h3>
                            <p>最后更新: 刚刚 · 距家 2.3km</p>
                        </div>
                        <div class="location-arrow">›</div>
                    </div>
                </div>
                <div class="quick-actions">
                    <div class="quick-action" onclick="showPage('safety')">
                        <div class="quick-action-icon" style="background:#fff3e0;color:#ff9800;">🛡️</div>
                        <span>安全防护</span>
                    </div>
                    <div class="quick-action" onclick="showPage('sos')">
                        <div class="quick-action-icon" style="background:#ffebee;color:#f44336;">🆘</div>
                        <span>SOS求助</span>
                    </div>
                    <div class="quick-action" onclick="showPage('health')">
                        <div class="quick-action-icon" style="background:#e8f5e9;color:#4caf50;">❤️</div>
                        <span>健康监测</span>
                    </div>
                    <div class="quick-action" onclick="showPage('eye')">
                        <div class="quick-action-icon" style="background:#e3f2fd;color:#2196f3;">👁️</div>
                        <span>护眼管理</span>
                    </div>
                </div>
                <div class="function-list">
                    <div class="function-category">
                        <div class="category-title">常用功能</div>
                        <div class="function-items">
                            <div class="function-item" onclick="showPage('location')">
                                <div class="function-icon" style="background:#e8f0ff;color:#667eea;">📍</div>
                                <div class="function-content">
                                    <h4>定位与围栏</h4>
                                    <p>实时查看位置 · 设置安全区域</p>
                                </div>
                                <div class="function-arrow">›</div>
                            </div>
                            <div class="function-item" onclick="showPage('device')">
                                <div class="function-icon" style="background:#f3e5f5;color:#9c27b0;">🎒</div>
                                <div class="function-content">
                                    <h4>设备管理</h4>
                                    <p>绑定/解绑 · 电量查看 · 系统设置</p>
                                </div>
                                <div class="function-arrow">›</div>
                            </div>
                        </div>
                    </div>
                    <div class="function-category">
                        <div class="category-title">全部功能</div>
                        <div class="function-items">
                            <div class="function-item" onclick="showPage('safety')">
                                <div class="function-icon" style="background:#fff3e0;color:#ff9800;">🛡️</div>
                                <div class="function-content">
                                    <h4>安全防护</h4>
                                    <p>霸凌警报 · 录音取证 · 走失警报</p>
                                </div>
                                <div class="function-arrow">›</div>
                            </div>
                            <div class="function-item" onclick="showPage('sos')">
                                <div class="function-icon" style="background:#ffebee;color:#f44336;">🆘</div>
                                <div class="function-content">
                                    <h4>SOS求助</h4>
                                    <p>紧急求助 · 循环拨打设置</p>
                                </div>
                                <div class="function-arrow">›</div>
                            </div>
                            <div class="function-item" onclick="showPage('health')">
                                <div class="function-icon" style="background:#e8f5e9;color:#4caf50;">❤️</div>
                                <div class="function-content">
                                    <h4>健康监测</h4>
                                    <p>心率/血氧 · 姿态异常 · 数据趋势</p>
                                </div>
                                <div class="function-arrow">›</div>
                            </div>
                            <div class="function-item" onclick="showPage('eye')">
                                <div class="function-icon" style="background:#e3f2fd;color:#2196f3;">👁️</div>
                                <div class="function-content">
                                    <h4>护眼管理</h4>
                                    <p>用眼时长 · 频闪检测 · 设备配对</p>
                                </div>
                                <div class="function-arrow">›</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 定位与围栏页面 -->
            <div id="page-location" class="page">
                <div class="page-header">
                    <span class="back-btn" onclick="showPage('home')">←</span>
                    <span class="page-title">定位与围栏</span>
                </div>
                <div class="page-content">
                    <div class="map-container">
                        <div class="full-map">
                            <div class="map-grid"></div>
                            <div class="fence-zone"></div>
                            <div class="map-marker"><span>📍</span></div>
                            <div class="map-controls">
                                <div class="map-btn">+</div>
                                <div class="map-btn">−</div>
                            </div>
                            <div class="location-btn" onclick="showToast('正在定位...')">📍 定位到孩子</div>
                        </div>
                    </div>
                    <div class="info-cards">
                        <div class="info-card">
                            <h4>今日步数</h4>
                            <span class="value">8,523</span>
                            <span class="unit">步</span>
                        </div>
                        <div class="info-card">
                            <h4>设备电量</h4>
                            <span class="value">85</span>
                            <span class="unit">%</span>
                        </div>
                    </div>
                    <div class="fence-section">
                        <div class="section-header">
                            <span class="section-title">🛡️ 安全围栏</span>
                            <span class="add-btn" onclick="showToast('添加新围栏')">+ 添加</span>
                        </div>
                        <div class="fence-list">
                            <div class="fence-item" onclick="showFenceModal('school')">
                                <div class="fence-icon">🏫</div>
                                <div class="fence-info">
                                    <div class="fence-name">学校区域</div>
                                    <div class="fence-status">围栏内 · 已启用</div>
                                </div>
                                <div class="fence-toggle"></div>
                            </div>
                            <div class="fence-item" onclick="showFenceModal('home')">
                                <div class="fence-icon">🏠</div>
                                <div class="fence-info">
                                    <div class="fence-name">家庭区域</div>
<div class="fence-status">围栏内 · 已启用</div>
                                </div>
                                <div class="fence-toggle"></div>
                            </div>
                            <div class="fence-item" onclick="showFenceModal('training')">
                                <div class="fence-icon">📚</div>
                                <div class="fence-info">
                                    <div class="fence-name">培训机构</div>
                                    <div class="fence-status">围栏外 · 已启用</div>
                                </div>
                                <div class="fence-toggle off" onclick="event.stopPropagation();this.classList.toggle('off')"></div>
                            </div>
                        </div>
                    </div>
                    <div class="alert-card" style="background:#fff3e0;border-left:4px solid #ff9800;">
                        <div style="display:flex;align-items:center;">
                            <span style="font-size:24px;margin-right:12px;">⚠️</span>
                            <div>
                                <div style="font-size:14px;color:#333;font-weight:600;">进出校提醒已开启</div>
                                <div style="font-size:12px;color:#888;margin-top:3px;">孩子进出学校时将收到通知</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 安全防护页面 -->
            <div id="page-safety" class="page">
                <div class="page-header">
                    <span class="back-btn" onclick="showPage('home')">←</span>
                    <span class="page-title">安全防护</span>
                </div>
                <div class="page-content">
                    <div class="alert-card">
                        <div class="alert-header">
                            <div class="alert-icon" style="background:#fff3e0;color:#ff9800;">🔔</div>
                            <div>
                                <div class="alert-title">霸凌警报</div>
                                <div class="alert-time">今天 14:30</div>
                            </div>
                        </div>
                        <div class="alert-content">
                            <span class="alert-type">敏感词识别</span>
                            <p class="alert-desc">检测到环境异常，书包已自动开启静默录音。建议查看录音内容并与孩子沟通。</p>
                        </div>
                        <div class="alert-actions">
                            <button class="alert-btn primary" onclick="showToast('正在加载录音...')">🎧 查看录音</button>
                            <button class="alert-btn secondary">详情</button>
                        </div>
                    </div>
                    <div class="alert-card">
                        <div class="alert-header">
                            <div class="alert-icon" style="background:#e3f2fd;color:#2196f3;">🚨</div>
                            <div>
                                <div class="alert-title">走失警报</div>
                                <div class="alert-time">昨天 16:45</div>
                            </div>
                        </div>
                        <div class="alert-content">
                            <span class="alert-type">关键词触发</span>
                            <p class="alert-desc">孩子说"想回家"触发走失关键词，AI已开启语音导航引导孩子。</p>
                        </div>
                        <div class="alert-actions">
                            <button class="alert-btn primary">📍 查看位置</button>
                            <button class="alert-btn secondary">已处理</button>
                        </div>
                    </div>
                    <div class="recording-list">
                        <div class="section-header" style="margin-bottom:15px;">
                            <span class="section-title">🎙️ 历史录音</span>
                            <span class="add-btn">查看全部</span>
                        </div>
                        <div class="recording-item">
                            <div class="recording-icon">🎧</div>
                            <div class="recording-info">
                                <div class="recording-name">霸凌事件录音_0515_1430.wav</div>
                                <div class="recording-meta">时长: 2分35秒 · 大小: 1.2MB</div>
                            </div>
                            <div class="play-btn" onclick="showToast('正在播放...')">▶</div>
                        </div>
                        <div class="recording-item">
                            <div class="recording-icon">🎧</div>
                            <div class="recording-info">
                                <div class="recording-name">环境异常录音_0515_1428.wav</div>
                                <div class="recording-meta">时长: 1分12秒 · 大小: 0.6MB</div>
                            </div>
                            <div class="play-btn" onclick="showToast('正在播放...')">▶</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SOS求助页面 -->
            <div id="page-sos" class="page">
                <div class="page-header">
                    <span class="back-btn" onclick="showPage('home')">←</span>
                    <span class="page-title">SOS求助</span>
                </div>
                <div class="page-content">
                    <div class="sos-status">
                        <div class="sos-circle" onclick="showToast('SOS测试已发送')">
                            <span class="sos-icon">🆘</span>
                        </div>
                        <div class="sos-text">长按3秒触发紧急求助</div>
                        <div class="sos-hint">触发后将自动拨打家长电话并发送实时位置</div>
                    </div>
                    <div class="emergency-contacts">
                        <div class="section-header" style="margin-bottom:15px;">
                            <span class="section-title">📞 紧急联系人</span>
                            <span class="add-btn" onclick="showToast('添加联系人')">+ 添加</span>
                        </div>
                        <div class="contact-item">
                            <div class="contact-avatar">👨</div>
                            <div class="contact-info">
                                <div class="contact-name">爸爸</div>
                                <div class="contact-phone">138****1234</div>
                            </div>
                            <span class="contact-badge">主联系人</span>
                        </div>
                        <div class="contact-item">
                            <div class="contact-avatar">👩</div>
                            <div class="contact-info">
                                <div class="contact-name">妈妈</div>
                                <div class="contact-phone">139****5678</div>
                            </div>
                            <span class="contact-badge">主联系人</span>
                        </div>
                        <div class="contact-item">
                            <div class="contact-avatar">👵</div>
                            <div class="contact-info">
                                <div class="contact-name">奶奶</div>
                                <div class="contact-phone">137****9012</div>
                            </div>
                        </div>
                    </div>
                    <div class="sos-settings">
                        <div class="section-header" style="margin-bottom:15px;">
                            <span class="section-title">⚙️ 求助设置</span>
                        </div>
                        <div class="setting-row">
                            <span class="setting-label">循环拨打次数</span>
                            <span class="setting-value">3次 ›</span>
                        </div>
                        <div class="setting-row">
                            <span class="setting-label">拨打电话顺序</span>
                            <span class="setting-value">依次拨打 ›</span>
                        </div>
                        <div class="setting-row">
                            <span class="setting-label">触发后自动录音</span>
                            <span class="setting-value">开启</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 健康监测页面 -->
            <div id="page-health" class="page">
                <div class="page-header">
                    <span class="back-btn" onclick="showPage('home')">←</span>
                    <span class="page-title">健康监测</span>
                </div>
                <div class="page-content">
                    <div class="health-overview">
                        <div class="health-title">当前健康状态</div>
                        <div class="health-data">
                            <div class="health-item">
                                <div class="health-value">76</div>
                                <div class="health-label">心率 bpm</div>
                            </div>
                            <div class="health-item">
                                <div class="health-value">98%</div>
                                <div class="health-label">血氧 SpO2</div>
                            </div>
                            <div class="health-item">
                                <div class="health-value">良好</div>
                                <div class="health-label">姿态</div>
                            </div>
                        </div>
                    </div>
                    <div class="chart-card">
                        <div class="chart-header">
                            <span class="chart-title">📊 心率趋势</span>
                            <span class="chart-period">近7天</span>
                        </div>
                        <div class="chart-area">
                            <div class="simple-chart">
                                <div style="display:flex;flex-direction:column;align-items:center;">
                                    <div class="chart-bar" style="height:60%;"></div>
                                    <span class="chart-label">周一</span>
                                </div>
                                <div style="display:flex;flex-direction:column;align-items:center;">
                                    <div class="chart-bar" style="height:75%;"></div>
                                    <span class="chart-label">周二</span>
                                </div>
                                <div style="display:flex;flex-direction:column;align-items:center;">
                                    <div class="chart-bar" style="height:55%;"></div>
                                    <span class="chart-label">周三</span>
                                </div>
                                <div style="display:flex;flex-direction:column;align-items:center;">
                                    <div class="chart-bar" style="height:80%;"></div>
                                    <span class="chart-label">周四</span>
                                </div>
                                <div style="display:flex;flex-direction:column;align-items:center;">
                                    <div class="chart-bar" style="height:65%;"></div>
                                    <span class="chart-label">周五</span>
                                </div>
                                <div style="display:flex;flex-direction:column;align-items:center;">
                                    <div class="chart-bar" style="height:70%;"></div>
                                    <span class="chart-label">周六</span>
                                </div>
                                <div style="display:flex;flex-direction:column;align-items:center;">
                                    <div class="chart-bar" style="height:60%;"></div>
                                    <span class="chart-label">今天</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chart-card">
                        <div class="chart-header">
                            <span class="chart-title">📊 姿态统计</span>
                            <span class="chart-period">本周</span>
                        </div>
                        <div class="chart-area">
                            <div class="stat-grid">
                                <div class="stat-item">
                                    <div class="stat-value">12</div>
                                    <div class="stat-label">驼背提醒</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">3</div>
                                    <div class="stat-label">低头提醒</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">0</div>
                                    <div class="stat-label">摔倒检测</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">85%</div>
                                    <div class="stat-label">良好姿态率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="health-tips">
                        <div class="section-header" style="margin-bottom:15px;">
                            <span class="section-title">💡 健康建议</span>
                        </div>
                        <div class="tip-item">
                            <div class="tip-icon">📝</div>
                            <div class="tip-text">今日已有12次驼背提醒，建议每45分钟起来活动一下</div>
                        </div>
                        <div class="tip-item">
                            <div class="tip-icon">🏃</div>
                            <div class="tip-text">书包重量2.3kg，符合小学生标准（体重10%以内）</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 护眼管理页面 -->
            <div id="page-eye" class="page">
                <div class="page-header">
                    <span class="back-btn" onclick="showPage('home')">←</span>
                    <span class="page-title">护眼管理</span>
                </div>
                <div class="page-content">
                    <div class="eye-protection-header">
                        <div class="eye-icon-large">👁️</div>
                        <div class="eye-info">
                            <h3>护眼模式已开启</h3>
                            <p>已连接2台学习设备</p>
                        </div>
                    </div>
                    <div class="device-list">
                        <div class="section-header" style="margin-bottom:10px;">
                            <span class="section-title">📱 已配对设备</span>
                            <span class="add-btn" onclick="showToast('扫描配对新设备')">+ 添加设备</span>
                        </div>
                        <div class="device-item">
                            <div class="device-icon">📱</div>
                            <div class="device-info">
                                <div class="device-name">小明平板</div>
                                <div class="device-status">学生模式已开启 · 距书包 0.5m</div>
                            </div>
                            <div class="device-toggle"></div>
                        </div>
                        <div class="device-item">
                            <div class="device-icon">📱</div>
                            <div class="device-info">
                                <div class="device-name">备用手机</div>
                                <div class="device-status">离线</div>
                            </div>
                            <div class="device-toggle off"></div>
                        </div>
                    </div>
                    <div class="usage-stats">
                        <div class="section-header" style="margin-bottom:15px;">
                            <span class="section-title">📊 用眼数据</span>
                        </div>
                        <div class="stat-grid">
                            <div class="stat-item">
                                <div class="stat-value">2.5h</div>
                                <div class="stat-label">今日屏幕使用</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">15</div>
                                <div class="stat-label">护眼提醒次数</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">4</div>
                                <div class="stat-label">完成番茄钟</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">良好</div>
                                <div class="stat-label">台灯光线</div>
                            </div>
                        </div>
                    </div>
                    <div class="alert-card" style="background:#e3f2fd;border-left:4px solid #2196f3;">
                        <div style="display:flex;align-items:center;">
                            <span style="font-size:24px;margin-right:12px;">💡</span>
                            <div>
                                <div style="font-size:14px;color:#333;font-weight:600;">护眼提示</div>
                                <div style="font-size:12px;color:#666;margin-top:3px;">建议每使用电子设备25分钟后，让眼睛休息5分钟，远眺窗外放松眼部肌肉。</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设备管理页面 -->
            <div id="page-device" class="page">
                <div class="page-header">
                    <span class="back-btn" onclick="showPage('home')">←</span>
                    <span class="page-title">设备管理</span>
                </div>
                <div class="page-content">
                    <div class="device-manager-card">
                        <div class="current-device">
                            <div class="device-avatar">🎒</div>
                            <div class="device-details">
                                <h4>智能安全防护书包 Pro</h4>
                                <p>序列号: SMB-2026-0524-XXXX</p>
                            </div>
                        </div>
                        <div class="device-actions">
                            <div class="device-action" onclick="showToast('查找设备中...')">
                                <div class="device-action-icon">🔍</div>
                                <span>查找设备</span>
                            </div>
                            <div class="device-action" onclick="showToast('电量: 85%')">
                                <div class="device-action-icon">🔋</div>
                                <span>电量</span>
                            </div>
                            <div class="device-action" onclick="showToast('请在设备端确认解绑')">
                                <div class="device-action-icon">🔗</div>
                                <span>解绑</span>
                            </div>
                        </div>
                    </div>
                    <div class="settings-list">
                        <div class="settings-item" onclick="showToast('打开固件更新')">
                            <div class="settings-icon">🔄</div>
                            <div class="settings-text">固件更新</div>
                            <div class="settings-arrow">›</div>
                        </div>
                        <div class="settings-item" onclick="showToast('打开定位设置')">
                            <div class="settings-icon">📍</div>
                            <div class="settings-text">定位设置</div>
                            <div class="settings-arrow">›</div>
                        </div>
                        <div class="settings-item" onclick="showToast('打开提醒设置')">
                            <div class="settings-icon">🔔</div>
                            <div class="settings-text">提醒设置</div>
                            <div class="settings-arrow">›</div>
                        </div>
                        <div class="settings-item" onclick="showToast('打开护眼参数')">
                            <div class="settings-icon">👁️</div>
                            <div class="settings-text">护眼参数</div>
                            <div class="settings-arrow">›</div>
                        </div>
                        <div class="settings-item" onclick="showToast('打开围栏设置')">
                            <div class="settings-icon">🛡️</div>
                            <div class="settings-text">围栏灵敏度</div>
                            <div class="settings-arrow">›</div>
                        </div>
                        <div class="settings-item" onclick="showToast('打开SOS设置')">
                            <div class="settings-icon">🆘</div>
                            <div class="settings-text">SOS求助设置</div>
                            <div class="settings-arrow">›</div>
                        </div>
                        <div class="settings-item" onclick="showToast('打开关于页面')">
                            <div class="settings-icon">ℹ️</div>
                            <div class="settings-text">关于设备</div>
                            <div class="settings-arrow">›</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="showPage('home')">
                <div class="nav-icon">🏠</div>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('location')">
                <div class="nav-icon">📍</div>
                <span>定位</span>
            </div>
            <div class="nav-item" onclick="showPage('health')">
                <div class="nav-icon">❤️</div>
                <span>健康</span>
            </div>
            <div class="nav-item" onclick="showPage('eye')">
                <div class="nav-icon">👁️</div>
                <span>护眼</span>
            </div>
            <div class="nav-item" onclick="showPage('device')">
                <div class="nav-icon">🎒</div>
                <span>设备</span>
            </div>
        </div>

        <!-- 围栏详情弹窗 -->
        <div id="fenceModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-icon" id="modalIcon">🏫</div>
                    <div class="modal-title" id="modalTitle">学校区域</div>
                </div>
                <div class="modal-info">
                    <div class="modal-row">
                        <span class="modal-label">状态</span>
                        <span class="modal-value" id="modalStatus">围栏内 · 已启用</span>
                    </div>
                    <div class="modal-row">
                        <span class="modal-label">范围</span>
                        <span class="modal-value">半径 300 米</span>
                    </div>
                    <div class="modal-row">
                        <span class="modal-label">提醒方式</span>
                        <span class="modal-value">进入/离开时提醒</span>
                    </div>
                    <div class="modal-row">
                        <span class="modal-label">最后触发</span>
                        <span class="modal-value" id="modalLast">今天 08:15 进入</span>
                    </div>
                </div>
                <button class="modal-btn" onclick="closeModal()">编辑围栏</button>
                <div class="modal-close" onclick="closeModal()">取消</div>
            </div>
        </div>

        <!-- Toast提示 -->
        <div id="toast" class="toast"></div>
    </div>

    <script>
        // 页面切换
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            // 显示目标页面
            document.getElementById('page-' + pageId).classList.add('active');
            
            // 更新底部导航
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(item => item.classList.remove('active'));
            
            const pageToNav = {
                'home': 0,
                'location': 1,
                'health': 2,
                'eye': 3,
                'device': 4,
                'safety': 0,
                'sos': 0
            };
            
            if (pageToNav[pageId] !== undefined) {
                navItems[pageToNav[pageId]].classList.add('active');
            }
            
            // 滚动到顶部
            document.querySelector('.screen').scrollTop = 0;
        }

        // 显示围栏详情弹窗
        function showFenceModal(type) {
            const modal = document.getElementById('fenceModal');
            const data = {
                school: { icon: '🏫', title: '学校区域', status: '围栏内 · 已启用', last: '今天 08:15 进入' },
                home: { icon: '🏠', title: '家庭区域', status: '围栏内 · 已启用', last: '昨天 18:30 离开' },
                training: { icon: '📚', title: '培训机构', status: '围栏外 · 已禁用', last: '本周未触发' }
            };
            
            const info = data[type] || data.school;
            document.getElementById('modalIcon').textContent = info.icon;
            document.getElementById('modalTitle').textContent = info.title;
            document.getElementById('modalStatus').textContent = info.status;
            document.getElementById('modalLast').textContent = info.last;
            
            modal.classList.add('show');
        }

        // 关闭弹窗
        function closeModal() {
            document.getElementById('fenceModal').classList.remove('show');
        }

        // 点击弹窗背景关闭
        document.getElementById('fenceModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // 显示Toast提示
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }

        // 切换围栏开关
        document.querySelectorAll('.fence-toggle').forEach(toggle => {
            toggle.addEventListener('click', function(e) {
                e.stopPropagation();
                this.classList.toggle('off');
            });
        });

        // 切换设备开关
        document.querySelectorAll('.device-toggle').forEach(toggle => {
            toggle.addEventListener('click', function(e) {
                e.stopPropagation();
                this.classList.toggle('off');
            });
        });
    </script>
</body>
</html>