1220 lines
40 KiB
HTML
1220 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>XSynergy - AR远程协作APP设计原型</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Source Han Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
background: #f5f5f5;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* Color Variables */
|
||
:root {
|
||
--primary: #0A7CFF;
|
||
--secondary: #F0F8FF;
|
||
--accent: #FFD700;
|
||
--danger: #FF4D4F;
|
||
--success: #52C41A;
|
||
--text-primary: #333333;
|
||
--text-secondary: #888888;
|
||
--text-white: #FFFFFF;
|
||
}
|
||
|
||
.phone-container {
|
||
width: 375px;
|
||
height: 812px;
|
||
background: white;
|
||
border-radius: 30px;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.screen {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: none;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.screen.active {
|
||
display: flex;
|
||
}
|
||
|
||
.status-bar {
|
||
height: 44px;
|
||
background: var(--text-primary);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
color: white;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.nav-controls {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 10px;
|
||
z-index: 1000;
|
||
background: rgba(255,255,255,0.9);
|
||
padding: 10px;
|
||
border-radius: 20px;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.nav-btn {
|
||
padding: 8px 16px;
|
||
border: 1px solid var(--primary);
|
||
background: white;
|
||
color: var(--primary);
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.nav-btn.active {
|
||
background: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
/* Login Screen */
|
||
.login-screen {
|
||
padding: 60px 32px;
|
||
text-align: center;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: var(--primary);
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.input-group {
|
||
margin-bottom: 24px;
|
||
text-align: left;
|
||
}
|
||
|
||
.input-field {
|
||
width: 100%;
|
||
height: 48px;
|
||
padding: 0 16px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
background: #f8f9fa;
|
||
font-size: 16px;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.input-field:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.code-input-group {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
.code-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.code-btn {
|
||
height: 48px;
|
||
padding: 0 16px;
|
||
background: var(--primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.primary-btn {
|
||
width: 100%;
|
||
height: 48px;
|
||
background: var(--primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
margin: 32px 0;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.primary-btn:hover {
|
||
background: #0066cc;
|
||
}
|
||
|
||
.checkbox-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin: 16px 0;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.links {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.link {
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Dashboard */
|
||
.dashboard {
|
||
flex: 1;
|
||
padding: 20px;
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
.greeting {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: var(--text-primary);
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.action-section {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.large-btn {
|
||
width: 100%;
|
||
height: 60px;
|
||
background: var(--primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.large-btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.secondary-btn {
|
||
width: 100%;
|
||
height: 48px;
|
||
background: white;
|
||
color: var(--primary);
|
||
border: 2px solid var(--primary);
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
margin-bottom: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.text-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--primary);
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.meeting-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
margin-bottom: 12px;
|
||
position: relative;
|
||
}
|
||
|
||
.meeting-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.meeting-meta {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-badge {
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
background: var(--accent);
|
||
color: var(--text-primary);
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.join-btn {
|
||
width: 100%;
|
||
height: 36px;
|
||
background: var(--success);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
margin-top: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Bottom Tab Bar */
|
||
.bottom-tabs {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 80px;
|
||
background: white;
|
||
border-top: 1px solid #e0e0e0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
cursor: pointer;
|
||
color: var(--text-secondary);
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.tab-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
background: currentColor;
|
||
mask-size: contain;
|
||
mask-repeat: no-repeat;
|
||
mask-position: center;
|
||
}
|
||
|
||
.tab-icon.home { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 12 2-2m0 0 7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E"); }
|
||
.tab-icon.contacts { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E"); }
|
||
.tab-icon.history { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E"); }
|
||
.tab-icon.profile { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E"); }
|
||
|
||
.tab-label {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* AR Session Screen */
|
||
.ar-session {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.camera-view {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(45deg, #2196f3, #21cbf3);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.ar-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.top-bar {
|
||
position: absolute;
|
||
top: 44px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60px;
|
||
background: rgba(0,0,0,0.5);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.session-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: white;
|
||
}
|
||
|
||
.timer {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.network-status {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: var(--success);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.hangup-btn {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: var(--danger);
|
||
border: none;
|
||
border-radius: 50%;
|
||
color: white;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.video-pip {
|
||
position: absolute;
|
||
top: 120px;
|
||
right: 20px;
|
||
width: 120px;
|
||
height: 160px;
|
||
background: rgba(0,0,0,0.8);
|
||
border-radius: 12px;
|
||
border: 2px solid white;
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.bottom-controls {
|
||
position: absolute;
|
||
bottom: 40px;
|
||
left: 20px;
|
||
right: 20px;
|
||
height: 80px;
|
||
background: rgba(0,0,0,0.7);
|
||
border-radius: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.control-btn {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: rgba(255,255,255,0.2);
|
||
color: white;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.control-btn:hover {
|
||
background: rgba(255,255,255,0.3);
|
||
}
|
||
|
||
.control-btn.active {
|
||
background: var(--primary);
|
||
}
|
||
|
||
/* AR Annotations */
|
||
.ar-annotation {
|
||
position: absolute;
|
||
background: var(--accent);
|
||
color: var(--text-primary);
|
||
padding: 8px 12px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
}
|
||
|
||
.annotation-1 { top: 200px; left: 50px; }
|
||
.annotation-2 { top: 400px; right: 60px; }
|
||
.annotation-3 { bottom: 200px; left: 80px; }
|
||
|
||
/* History Screen */
|
||
.history-screen {
|
||
flex: 1;
|
||
padding: 20px;
|
||
padding-bottom: 100px;
|
||
}
|
||
|
||
.search-bar {
|
||
width: 100%;
|
||
height: 40px;
|
||
padding: 0 16px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 20px;
|
||
background: #f8f9fa;
|
||
font-size: 14px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.history-item {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
margin-bottom: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.history-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.history-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.history-date {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.participants {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.history-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
height: 36px;
|
||
border: 1px solid var(--primary);
|
||
background: white;
|
||
color: var(--primary);
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.action-btn.primary {
|
||
background: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
/* Contact Screen */
|
||
.contact-screen {
|
||
flex: 1;
|
||
padding: 20px;
|
||
padding-bottom: 100px;
|
||
}
|
||
|
||
.org-tree {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.org-item {
|
||
background: white;
|
||
border-radius: 8px;
|
||
margin-bottom: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.org-header {
|
||
padding: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
border-left: 4px solid var(--primary);
|
||
}
|
||
|
||
.org-name {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.member-count {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.members-list {
|
||
display: none;
|
||
background: var(--secondary);
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.members-list.expanded {
|
||
display: block;
|
||
}
|
||
|
||
.member-item {
|
||
padding: 12px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.member-item:hover {
|
||
background: rgba(10, 124, 255, 0.1);
|
||
}
|
||
|
||
.member-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.member-name {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.member-role {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* Profile Screen */
|
||
.profile-screen {
|
||
flex: 1;
|
||
padding: 20px;
|
||
padding-bottom: 100px;
|
||
}
|
||
|
||
.profile-header {
|
||
text-align: center;
|
||
padding: 40px 0;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.profile-avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
margin: 0 auto 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.profile-name {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.profile-role {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.profile-menu {
|
||
list-style: none;
|
||
}
|
||
|
||
.menu-item {
|
||
background: white;
|
||
border-radius: 8px;
|
||
margin-bottom: 8px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.menu-link {
|
||
display: block;
|
||
padding: 16px;
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.logout-btn {
|
||
width: 100%;
|
||
height: 48px;
|
||
background: white;
|
||
color: var(--danger);
|
||
border: 2px solid var(--danger);
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
margin-top: 32px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Empty State */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.empty-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: #f0f0f0;
|
||
border-radius: 50%;
|
||
margin: 0 auto 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32px;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.empty-action {
|
||
background: var(--primary);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="phone-container">
|
||
<!-- Login Screen -->
|
||
<div class="screen active" id="login">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<span>100%</span>
|
||
</div>
|
||
<div class="login-screen">
|
||
<div class="logo">XSynergy</div>
|
||
<div class="input-group">
|
||
<input type="tel" class="input-field" placeholder="手机号">
|
||
</div>
|
||
<div class="input-group">
|
||
<div class="code-input-group">
|
||
<input type="text" class="input-field code-input" placeholder="验证码">
|
||
<button class="code-btn">获取验证码</button>
|
||
</div>
|
||
</div>
|
||
<button class="primary-btn" onclick="switchScreen('dashboard')">登录</button>
|
||
<div class="checkbox-group">
|
||
<input type="checkbox" id="remember">
|
||
<label for="remember">记住我</label>
|
||
</div>
|
||
<div class="links">
|
||
<a href="#" class="link">忘记密码</a>
|
||
<a href="#" class="link">SSO登录</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dashboard Screen -->
|
||
<div class="screen" id="dashboard">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<span>100%</span>
|
||
</div>
|
||
<div class="dashboard">
|
||
<div class="greeting">你好，李明</div>
|
||
<div class="action-section">
|
||
<button class="large-btn" onclick="switchScreen('ar-session')">发起协作</button>
|
||
<button class="secondary-btn">加入协作</button>
|
||
<button class="text-btn">预约协作</button>
|
||
</div>
|
||
<div class="section-title">今日预约</div>
|
||
<div class="meeting-card">
|
||
<div class="status-badge">即将开始</div>
|
||
<div class="meeting-title">设备检修会议</div>
|
||
<div class="meeting-meta">14:30 - 15:30 | 发起人：王工</div>
|
||
<button class="join-btn">立即加入</button>
|
||
</div>
|
||
<div class="meeting-card">
|
||
<div class="meeting-title">项目评审会议</div>
|
||
<div class="meeting-meta">16:00 - 17:00 | 发起人：张总</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-tabs">
|
||
<div class="tab-item active" onclick="switchTab('dashboard')">
|
||
<div class="tab-icon home"></div>
|
||
<span class="tab-label">首页</span>
|
||
</div>
|
||
<div class="tab-item" onclick="switchTab('contacts')">
|
||
<div class="tab-icon contacts"></div>
|
||
<span class="tab-label">通讯录</span>
|
||
</div>
|
||
<div class="tab-item" onclick="switchTab('history')">
|
||
<div class="tab-icon history"></div>
|
||
<span class="tab-label">历史</span>
|
||
</div>
|
||
<div class="tab-item" onclick="switchTab('profile')">
|
||
<div class="tab-icon profile"></div>
|
||
<span class="tab-label">我的</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AR Session Screen -->
|
||
<div class="screen" id="ar-session">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<span>100%</span>
|
||
</div>
|
||
<div class="ar-session">
|
||
<div class="camera-view"></div>
|
||
<div class="ar-overlay">
|
||
<div class="ar-annotation annotation-1">检查这里</div>
|
||
<div class="ar-annotation annotation-2">注意温度</div>
|
||
<div class="ar-annotation annotation-3">更换部件</div>
|
||
</div>
|
||
<div class="top-bar">
|
||
<div class="session-info">
|
||
<div class="timer">15:32</div>
|
||
<div class="network-status"></div>
|
||
</div>
|
||
<button class="hangup-btn" onclick="switchScreen('dashboard')">✕</button>
|
||
</div>
|
||
<div class="video-pip"></div>
|
||
<div class="bottom-controls">
|
||
<button class="control-btn">🎤</button>
|
||
<button class="control-btn">📹</button>
|
||
<button class="control-btn active">✏️</button>
|
||
<button class="control-btn">📤</button>
|
||
<button class="control-btn">⋯</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- History Screen -->
|
||
<div class="screen" id="history">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<span>100%</span>
|
||
</div>
|
||
<div class="history-screen">
|
||
<input type="text" class="search-bar" placeholder="搜索会议主题或参会人">
|
||
<div class="history-item">
|
||
<div class="history-header">
|
||
<div class="history-title">设备检修指导</div>
|
||
<div class="history-date">今天 14:30</div>
|
||
</div>
|
||
<div class="participants">
|
||
<div class="avatar">李</div>
|
||
<div class="avatar">王</div>
|
||
<div class="avatar">张</div>
|
||
</div>
|
||
<div class="history-actions">
|
||
<button class="action-btn">回放</button>
|
||
<button class="action-btn primary">查看纪要</button>
|
||
</div>
|
||
</div>
|
||
<div class="history-item">
|
||
<div class="history-header">
|
||
<div class="history-title">新员工培训</div>
|
||
<div class="history-date">昨天 09:15</div>
|
||
</div>
|
||
<div class="participants">
|
||
<div class="avatar">陈</div>
|
||
<div class="avatar">赵</div>
|
||
</div>
|
||
<div class="history-actions">
|
||
<button class="action-btn">回放</button>
|
||
<button class="action-btn">查看纪要</button>
|
||
</div>
|
||
</div>
|
||
<div class="history-item">
|
||
<div class="history-header">
|
||
<div class="history-title">安全检查会议</div>
|
||
<div class="history-date">2天前 16:00</div>
|
||
</div>
|
||
<div class="participants">
|
||
<div class="avatar">孙</div>
|
||
<div class="avatar">周</div>
|
||
<div class="avatar">吴</div>
|
||
<div class="avatar">+2</div>
|
||
</div>
|
||
<div class="history-actions">
|
||
<button class="action-btn">回放</button>
|
||
<button class="action-btn">查看纪要</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-tabs">
|
||
<div class="tab-item" onclick="switchTab('dashboard')">
|
||
<div class="tab-icon home"></div>
|
||
<span class="tab-label">首页</span>
|
||
</div>
|
||
<div class="tab-item" onclick="switchTab('contacts')">
|
||
<div class="tab-icon contacts"></div>
|
||
<span class="tab-label">通讯录</span>
|
||
</div>
|
||
<div class="tab-item active" onclick="switchTab('history')">
|
||
<div class="tab-icon history"></div>
|
||
<span class="tab-label">历史</span>
|
||
</div>
|
||
<div class="tab-item" onclick="switchTab('profile')">
|
||
<div class="tab-icon profile"></div>
|
||
<span class="tab-label">我的</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Contacts Screen -->
|
||
<div class="screen" id="contacts">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<span>100%</span>
|
||
</div>
|
||
<div class="contact-screen">
|
||
<input type="text" class="search-bar" placeholder="搜索姓名/部门/职位">
|
||
<div class="org-tree">
|
||
<div class="org-item">
|
||
<div class="org-header" onclick="toggleOrgItem(this)">
|
||
<div class="org-name">技术部</div>
|
||
<div class="member-count">12人 ›</div>
|
||
</div>
|
||
<div class="members-list">
|
||
<div class="member-item">
|
||
<div class="avatar">李</div>
|
||
<div class="member-info">
|
||
<div class="member-name">李明</div>
|
||
<div class="member-role">高级工程师</div>
|
||
</div>
|
||
</div>
|
||
<div class="member-item">
|
||
<div class="avatar">王</div>
|
||
<div class="member-info">
|
||
<div class="member-name">王强</div>
|
||
<div class="member-role">技术专家</div>
|
||
</div>
|
||
</div>
|
||
<div class="member-item">
|
||
<div class="avatar">张</div>
|
||
<div class="member-info">
|
||
<div class="member-name">张伟</div>
|
||
<div class="member-role">工程师</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="org-item">
|
||
<div class="org-header" onclick="toggleOrgItem(this)">
|
||
<div class="org-name">运营部</div>
|
||
<div class="member-count">8人 ›</div>
|
||
</div>
|
||
<div class="members-list">
|
||
<div class="member-item">
|
||
<div class="avatar">陈</div>
|
||
<div class="member-info">
|
||
<div class="member-name">陈静</div>
|
||
<div class="member-role">运营经理</div>
|
||
</div>
|
||
</div>
|
||
<div class="member-item">
|
||
<div class="avatar">赵</div>
|
||
<div class="member-info">
|
||
<div class="member-name">赵磊</div>
|
||
<div class="member-role">运营专员</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="org-item">
|
||
<div class="org-header" onclick="toggleOrgItem(this)">
|
||
<div class="org-name">销售部</div>
|
||
<div class="member-count">15人 ›</div>
|
||
</div>
|
||
<div class="members-list">
|
||
<div class="member-item">
|
||
<div class="avatar">孙</div>
|
||
<div class="member-info">
|
||
<div class="member-name">孙丽</div>
|
||
<div class="member-role">销售总监</div>
|
||
</div>
|
||
</div>
|
||
<div class="member-item">
|
||
<div class="avatar">周</div>
|
||
<div class="member-info">
|
||
<div class="member-name">周华</div>
|
||
<div class="member-role">销售经理</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-tabs">
|
||
<div class="tab-item" onclick="switchTab('dashboard')">
|
||
<div class="tab-icon home"></div>
|
||
<span class="tab-label">首页</span>
|
||
</div>
|
||
<div class="tab-item active" onclick="switchTab('contacts')">
|
||
<div class="tab-icon contacts"></div>
|
||
<span class="tab-label">通讯录</span>
|
||
</div>
|
||
<div class="tab-item" onclick="switchTab('history')">
|
||
<div class="tab-icon history"></div>
|
||
<span class="tab-label">历史</span>
|
||
</div>
|
||
<div class="tab-item" onclick="switchTab('profile')">
|
||
<div class="tab-icon profile"></div>
|
||
<span class="tab-label">我的</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Profile Screen -->
|
||
<div class="screen" id="profile">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<span>100%</span>
|
||
</div>
|
||
<div class="profile-screen">
|
||
<div class="profile-header">
|
||
<div class="profile-avatar">李</div>
|
||
<div class="profile-name">李明</div>
|
||
<div class="profile-role">技术部 · 高级工程师</div>
|
||
</div>
|
||
<ul class="profile-menu">
|
||
<li class="menu-item">
|
||
<a href="#" class="menu-link">个人资料</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="#" class="menu-link">设置</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="#" class="menu-link">帮助与反馈</a>
|
||
</li>
|
||
<li class="menu-item">
|
||
<a href="#" class="menu-link">关于我们</a>
|
||
</li>
|
||
</ul>
|
||
<button class="logout-btn" onclick="switchScreen('login')">退出登录</button>
|
||
</div>
|
||
<div class="bottom-tabs">
|
||
<div class="tab-item" onclick="switchTab('dashboard')">
|
||
<div class="tab-icon home"></div>
|
||
<span class="tab-label">首页</span>
|
||
</div>
|
||
<div class="tab-item" onclick="switchTab('contacts')">
|
||
<div class="tab-icon contacts"></div>
|
||
<span class="tab-label">通讯录</span>
|
||
</div>
|
||
<div class="tab-item" onclick="switchTab('history')">
|
||
<div class="tab-icon history"></div>
|
||
<span class="tab-label">历史</span>
|
||
</div>
|
||
<div class="tab-item active" onclick="switchTab('profile')">
|
||
<div class="tab-icon profile"></div>
|
||
<span class="tab-label">我的</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Empty State Example -->
|
||
<div class="screen" id="empty">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<span>100%</span>
|
||
</div>
|
||
<div class="empty-state">
|
||
<div class="empty-icon">📅</div>
|
||
<div class="empty-text">暂无预约会议，发起一个吧！</div>
|
||
<button class="empty-action">发起协作</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navigation Controls -->
|
||
<div class="nav-controls">
|
||
<button class="nav-btn active" onclick="switchScreen('login')">登录</button>
|
||
<button class="nav-btn" onclick="switchScreen('dashboard')">主页</button>
|
||
<button class="nav-btn" onclick="switchScreen('ar-session')">AR协作</button>
|
||
<button class="nav-btn" onclick="switchScreen('history')">历史</button>
|
||
<button class="nav-btn" onclick="switchScreen('contacts')">通讯录</button>
|
||
<button class="nav-btn" onclick="switchScreen('profile')">我的</button>
|
||
</div>
|
||
|
||
<script>
|
||
let currentScreen = 'login';
|
||
let currentTab = 'dashboard';
|
||
|
||
function switchScreen(screenId) {
|
||
// Hide all screens
|
||
document.querySelectorAll('.screen').forEach(screen => {
|
||
screen.classList.remove('active');
|
||
});
|
||
|
||
// Show target screen
|
||
document.getElementById(screenId).classList.add('active');
|
||
currentScreen = screenId;
|
||
|
||
// Update nav buttons
|
||
document.querySelectorAll('.nav-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
document.querySelector(`[onclick="switchScreen('${screenId}')"]`).classList.add('active');
|
||
}
|
||
|
||
function switchTab(tabId) {
|
||
switchScreen(tabId);
|
||
currentTab = tabId;
|
||
|
||
// Update tab bar for the current screen
|
||
const currentScreenElement = document.getElementById(tabId);
|
||
if (currentScreenElement) {
|
||
const tabItems = currentScreenElement.querySelectorAll('.tab-item');
|
||
tabItems.forEach(item => item.classList.remove('active'));
|
||
|
||
const targetTab = currentScreenElement.querySelector(`[onclick="switchTab('${tabId}')"]`);
|
||
if (targetTab) {
|
||
targetTab.classList.add('active');
|
||
}
|
||
}
|
||
}
|
||
|
||
function toggleOrgItem(header) {
|
||
const membersList = header.nextElementSibling;
|
||
const isExpanded = membersList.classList.contains('expanded');
|
||
|
||
// Close all other items
|
||
document.querySelectorAll('.members-list').forEach(list => {
|
||
list.classList.remove('expanded');
|
||
});
|
||
|
||
// Toggle current item
|
||
if (!isExpanded) {
|
||
membersList.classList.add('expanded');
|
||
header.querySelector('.member-count').innerHTML = header.querySelector('.member-count').innerHTML.replace('›', '⌄');
|
||
} else {
|
||
header.querySelector('.member-count').innerHTML = header.querySelector('.member-count').innerHTML.replace('⌄', '›');
|
||
}
|
||
}
|
||
|
||
// Add some interactive animations
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Add click animations to buttons
|
||
document.querySelectorAll('button, .tab-item, .member-item').forEach(element => {
|
||
element.addEventListener('click', function() {
|
||
this.style.transform = 'scale(0.95)';
|
||
setTimeout(() => {
|
||
this.style.transform = 'scale(1)';
|
||
}, 150);
|
||
});
|
||
});
|
||
|
||
// Simulate AR annotations movement
|
||
setInterval(() => {
|
||
const annotations = document.querySelectorAll('.ar-annotation');
|
||
annotations.forEach(annotation => {
|
||
const randomX = Math.random() * 10 - 5;
|
||
const randomY = Math.random() * 10 - 5;
|
||
annotation.style.transform = `translate(${randomX}px, ${randomY}px)`;
|
||
});
|
||
}, 3000);
|
||
|
||
// Auto-hide AR controls demonstration
|
||
let controlsTimeout;
|
||
const arSession = document.getElementById('ar-session');
|
||
const controls = arSession.querySelector('.bottom-controls');
|
||
|
||
arSession.addEventListener('click', function() {
|
||
controls.style.opacity = '1';
|
||
clearTimeout(controlsTimeout);
|
||
controlsTimeout = setTimeout(() => {
|
||
controls.style.opacity = '0.7';
|
||
}, 5000);
|
||
});
|
||
});
|
||
|
||
// Simulate real-time updates
|
||
setInterval(() => {
|
||
const timer = document.querySelector('.timer');
|
||
if (timer && currentScreen === 'ar-session') {
|
||
const currentTime = timer.textContent.split(':');
|
||
let minutes = parseInt(currentTime[0]);
|
||
let seconds = parseInt(currentTime[1]);
|
||
|
||
seconds++;
|
||
if (seconds >= 60) {
|
||
seconds = 0;
|
||
minutes++;
|
||
}
|
||
|
||
timer.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||
}
|
||
}, 1000);
|
||
</script>
|
||
</body>
|
||
</html> |