<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虚拟智能手机</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
padding: 20px;
}
.phone-container {
position: relative;
width: 360px;
height: 700px;
background: #000;
border-radius: 40px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
overflow: hidden;
border: 12px solid #111;
}
.phone-screen {
position: relative;
width: 100%;
height: 100%;
background: #111;
border-radius: 30px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.status-bar {
display: flex;
justify-content: space-between;
padding: 10px 20px;
color: white;
font-size: 14px;
background: rgba(0, 0, 0, 0.3);
}
.time {
font-weight: 600;
}
.status-icons {
display: flex;
gap: 5px;
}
.screen-content {
flex: 1;
overflow: hidden;
position: relative;
}
.home-screen {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.app-icon {
display: flex;
flex-direction: column;
align-items: center;
color: white;
text-decoration: none;
font-size: 12px;
}
.app-icon i {
font-size: 30px;
margin-bottom: 5px;
background: rgba(255, 255, 255, 0.2);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
backdrop-filter: blur(10px);
}
.app-icon span {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dock {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 25px;
background: rgba(255, 255, 255, 0.2);
padding: 10px 25px;
border-radius: 30px;
backdrop-filter: blur(10px);
}
.app-screen {
display: none;
flex-direction: column;
height: 100%;
background: white;
}
.app-header {
display: flex;
align-items: center;
padding: 15px;
background: #f8f9fa;
border-bottom: 1px solid #eee;
}
.back-btn {
background: none;
border: none;
font-size: 20px;
margin-right: 15px;
cursor: pointer;
}
.app-title {
font-size: 18px;
font-weight: 600;
}
.browser-content {
flex: 1;
display: flex;
flex-direction: column;
}
.url-bar {
display: flex;
padding: 10px;
background: #f8f9fa;
border-bottom: 1px solid #eee;
}
.url-input {
flex: 1;
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 20px;
font-size: 14px;
}
.browser-frame {
flex: 1;
border: none;
}
.settings-content {
flex: 1;
overflow-y: auto;
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.setting-item:last-child {
border-bottom: none;
}
.setting-label {
font-size: 16px;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.notification-center {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
flex-direction: column;
z-index: 100;
}
.notification-header {
padding: 20px;
color: white;
font-size: 20px;
font-weight: 600;
text-align: center;
}
.notifications {
flex: 1;
overflow-y: auto;
padding: 0 20px;
}
.notification {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 15px;
margin-bottom: 10px;
color: white;
}
.notification-title {
font-weight: 600;
margin-bottom: 5px;
}
.notification-content {
font-size: 14px;
opacity: 0.8;
}
.close-notification {
position: absolute;
top: 20px;
right: 20px;
color: white;
font-size: 20px;
cursor: pointer;
}
.app-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.calculator-screen {
background: #111;
color: white;
padding: 20px;
text-align: right;
font-size: 36px;
height: 100px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.calculator-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 20px;
flex: 1;
}
.calc-btn {
padding: 20px;
font-size: 20px;
border: none;
border-radius: 10px;
background: #333;
color: white;
cursor: pointer;
}
.calc-btn.operator {
background: #ff9500;
}
.calc-btn.equals {
background: #ff9500;
}
.calc-btn.clear {
background: #a5a5a5;
}
.camera-screen {
display: flex;
flex-direction: column;
height: 100%;
background: #000;
}
.camera-viewfinder {
flex: 1;
background: linear-gradient(45deg, #0f2027, #203a43, #2c5364);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
.camera-controls {
padding: 20px;
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(0, 0, 0, 0.7);
}
.shutter-btn {
width: 70px;
height: 70px;
border-radius: 50%;
background: white;
border: 5px solid #aaa;
cursor: pointer;
}
.gallery-screen {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
padding: 10px;
height: 100%;
overflow-y: auto;
}
.gallery-item {
aspect-ratio: 1/1;
background: #ddd;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #777;
}
.music-player {
display: flex;
flex-direction: column;
height: 100%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.album-art {
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 30px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
}
.song-info {
text-align: center;
margin-bottom: 30px;
}
.song-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 5px;
}
.song-artist {
font-size: 18px;
opacity: 0.8;
}
.progress-container {
padding: 0 30px;
margin-bottom: 30px;
}
.progress-bar {
height: 5px;
background: rgba(255, 255, 255, 0.3);
border-radius: 5px;
margin-bottom: 5px;
}
.progress {
height: 100%;
background: white;
border-radius: 5px;
width: 30%;
}
.time-info {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.player-controls {
display: flex;
justify-content: center;
gap: 30px;
padding: 20px;
}
.control-btn {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
.play-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
color: #764ba2;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.weather-screen {
padding: 30px;
color: white;
background: linear-gradient(135deg, #74b9ff, #0984e3);
height: 100%;
}
.weather-header {
text-align: center;
margin-bottom: 30px;
}
.weather-icon {
font-size: 80px;
margin-bottom: 10px;
}
.temperature {
font-size: 60px;
font-weight: 300;
}
.location {
font-size: 24px;
opacity: 0.9;
}
.weather-details {
display: flex;
justify-content: space-around;
margin-top: 40px;
}
.detail-item {
text-align: center;
}
.detail-value {
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.detail-label {
font-size: 14px;
opacity: 0.8;
}
.home-indicator {
height: 5px;
width: 130px;
background: white;
border-radius: 5px;
margin: 10px auto;
cursor: pointer;
}
.navigation-bar {
display: flex;
justify-content: space-around;
padding: 15px 0;
background: rgba(0, 0, 0, 0.8);
}
.nav-btn {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="phone-container">
<div class="phone-screen">
<div class="status-bar">
<div class="time" id="current-time">9:41</div>
<div class="status-icons">
<i class="fas fa-signal"></i>
<i class="fas fa-wifi"></i>
<i class="fas fa-battery-three-quarters"></i>
</div>
</div>
<div class="screen-content">
<!-- 主屏幕 -->
<div class="home-screen" id="home-screen">
<a href="#" class="app-icon" data-app="phone">
<i class="fas fa-phone"></i>
<span>电话</span>
</a>
<a href="#" class="app-icon" data-app="messages">
<i class="fas fa-comment"></i>
<span>信息</span>
</a>
<a href="#" class="app-icon" data-app="camera">
<i class="fas fa-camera"></i>
<span>相机</span>
</a>
<a href="#" class="app-icon" data-app="photos">
<i class="fas fa-images"></i>
<span>照片</span>
</a>
<a href="#" class="app-icon" data-app="weather">
<i class="fas fa-cloud-sun"></i>
<span>天气</span>
</a>
<a href="#" class="app-icon" data-app="calculator">
<i class="fas fa-calculator"></i>
<span>计算器</span>
</a>
<a href="#" class="app-icon" data-app="music">
<i class="fas fa-music"></i>
<span>音乐</span>
</a>
<a href="#" class="app-icon" data-app="settings">
<i class="fas fa-cog"></i>
<span>设置</span>
</a>
<a href="#" class="app-icon" data-app="browser">
<i class="fas fa-globe"></i>
<span>浏览器</span>
</a>
<a href="#" class="app-icon" data-app="maps">
<i class="fas fa-map-marker-alt"></i>
<span>地图</span>
</a>
<a href="#" class="app-icon" data-app="notes">
<i class="fas fa-sticky-note"></i>
<span>备忘录</span>
</a>
<a href="#" class="app-icon" data-app="calendar">
<i class="fas fa-calendar"></i>
<span>日历</span>
</a>
<div class="dock">
<a href="#" class="app-icon" data-app="phone">
<i class="fas fa-phone"></i>
</a>
<a href="#" class="app-icon" data-app="messages">
<i class="fas fa-comment"></i>
</a>
<a href="#" class="app-icon" data-app="safari">
<i class="fas fa-globe"></i>
</a>
<a href="#" class="app-icon" data-app="music">
<i class="fas fa-music"></i>
</a>
</div>
</div>
<!-- 浏览器应用 -->
<div class="app-screen" id="browser-app">
<div class="app-header">
<button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
<div class="app-title">浏览器</div>
</div>
<div class="browser-content">
<div class="url-bar">
<input type="text" class="url-input" value="https://www.example.com" placeholder="搜索或输入网址">
</div>
<iframe class="browser-frame" src="about:blank"></iframe>
</div>
</div>
<!-- 设置应用 -->
<div class="app-screen" id="settings-app">
<div class="app-header">
<button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
<div class="app-title">设置</div>
</div>
<div class="settings-content">
<div class="setting-item">
<div class="setting-label">飞行模式</div>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="setting-label">WiFi</div>
<label class="toggle-switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="setting-label">蓝牙</div>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="setting-label">勿扰模式</div>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="setting-label">定位服务</div>
<label class="toggle-switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="setting-label">蜂窝数据</div>
<label class="toggle-switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="setting-label">亮度</div>
<input type="range" min="0" max="100" value="70">
</div>
<div class="setting-item">
<div class="setting-label">音量</div>
<input type="range" min="0" max="100" value="80">
</div>
<div class="setting-item">
<div class="setting-label">壁纸</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="setting-item">
<div class="setting-label">显示与亮度</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="setting-item">
<div class="setting-label">声音与触感</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="setting-item">
<div class="setting-label">通用</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<!-- 计算器应用 -->
<div class="app-screen" id="calculator-app">
<div class="app-header">
<button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
<div class="app-title">计算器</div>
</div>
<div class="calculator-screen" id="calc-screen">0</div>
<div class="calculator-buttons">
<button class="calc-btn clear" onclick="clearCalc()">C</button>
<button class="calc-btn" onclick="appendToCalc('/')">/</button>
<button class="calc-btn" onclick="appendToCalc('*')">×</button>
<button class="calc-btn" onclick="deleteLast()">⌫</button>
<button class="calc-btn" onclick="appendToCalc('7')">7</button>
<button class="calc-btn" onclick="appendToCalc('8')">8</button>
<button class="calc-btn" onclick="appendToCalc('9')">9</button>
<button class="calc-btn operator" onclick="appendToCalc('-')">-</button>
<button class="calc-btn" onclick="appendToCalc('4')">4</button>
<button class="calc-btn" onclick="appendToCalc('5')">5</button>
<button class="calc-btn" onclick="appendToCalc('6')">6</button>
<button class="calc-btn operator" onclick="appendToCalc('+')">+</button>
<button class="calc-btn" onclick="appendToCalc('1')">1</button>
<button class="calc-btn" onclick="appendToCalc('2')">2</button>
<button class="calc-btn" onclick="appendToCalc('3')">3</button>
<button class="calc-btn equals" onclick="calculate()" rowspan="2">=</button>
<button class="calc-btn" onclick="appendToCalc('0')" colspan="2">0</button>
<button class="calc-btn" onclick="appendToCalc('.')">.</button>
</div>
</div>
<!-- 相机应用 -->
<div class="app-screen" id="camera-app">
<div class="app-header">
<button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
<div class="app-title">相机</div>
</div>
<div class="camera-screen">
<div class="camera-viewfinder">
<i class="fas fa-camera"></i>
</div>
<div class="camera-controls">
<i class="fas fa-sync-alt nav-btn"></i>
<div class="shutter-btn"></div>
<i class="fas fa-images nav-btn"></i>
</div>
</div>
</div>
<!-- 照片应用 -->
<div class="app-screen" id="photos-app">
<div class="app-header">
<button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
<div class="app-title">照片</div>
</div>
<div class="gallery-screen">
<div class="gallery-item"><i class="fas fa-mountain"></i></div>
<div class="gallery-item"><i class="fas fa-city"></i></div>
<div class="gallery-item"><i class="fas fa-tree"></i></div>
<div class="gallery-item"><i class="fas fa-cat"></i></div>
<div class="gallery-item"><i class="fas fa-dog"></i></div>
<div class="gallery-item"><i class="fas fa-car"></i></div>
<div class="gallery-item"><i class="fas fa-coffee"></i></div>
<div class="gallery-item"><i class="fas fa-utensils"></i></div>
<div class="gallery-item"><i class="fas fa-book"></i></div>
</div>
</div>
<!-- 音乐应用 -->
<div class="app-screen" id="music-app">
<div class="app-header">
<button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
<div class="app-title">音乐</div>
</div>
<div class="music-player">
<div class="album-art">
<i class="fas fa-music"></i>
</div>
<div class="song-info">
<div class="song-title">虚拟歌曲</div>
<div class="song-artist">虚拟艺术家</div>
</div>
<div class="progress-container">
<div class="progress-bar">
<div class="progress"></div>
</div>
<div class="time-info">
<span>1:23</span>
<span>4:56</span>
</div>
</div>
<div class="player-controls">
<button class="control-btn"><i class="fas fa-step-backward"></i></button>
<button class="control-btn play-btn"><i class="fas fa-play"></i></button>
<button class="control-btn"><i class="fas fa-step-forward"></i></button>
</div>
</div>
</div>
<!-- 天气应用 -->
<div class="app-screen" id="weather-app">
<div class="app-header">
<button class="back-btn" onclick="closeApp()"><i class="fas fa-arrow-left"></i></button>
<div class="app-title">天气</div>
</div>
<div class="weather-screen">
<div class="weather-header">
<div class="weather-icon"><i class="fas fa-sun"></i></div>
<div class="temperature">26°</div>
<div class="location">北京</div>
</div>
<div class="weather-details">
<div class="detail-item">
<div class="detail-value">28°</div>
<div class="detail-label">最高</div>
</div>
<div class="detail-item">
<div class="detail-value">19°</div>
<div class="detail-label">最低</div>
</div>
<div class="detail-item">
<div class="detail-value">65%</div>
<div class="detail-label">湿度</div>
</div>
</div>
</div>
</div>
</div>
<div class="home-indicator" onclick="showHomeScreen()"></div>
<div class="navigation-bar">
<button class="nav-btn" onclick="showNotificationCenter()"><i class="fas fa-bell"></i></button>
<button class="nav-btn" onclick="showHomeScreen()"><i class="fas fa-home"></i></button>
<button class="nav-btn"><i class="fas fa-user"></i></button>
</div>
</div>
<!-- 通知中心 -->
<div class="notification-center" id="notification-center">
<div class="notification-header">通知中心</div>
<div class="close-notification" onclick="closeNotificationCenter()"><i class="fas fa-times"></i></div>
<div class="notifications">
<div class="notification">
<div class="notification-title">新消息</div>
<div class="notification-content">您有一条新信息来自朋友</div>
</div>
<div class="notification">
<div class="notification-title">天气提醒</div>
<div class="notification-content">今天天气晴朗，适合外出</div>
</div>
<div class="notification">
<div class="notification-title">系统更新</div>
<div class="notification-content">有新的系统更新可用</div>
</div>
<div class="notification">
<div class="notification-title">日历提醒</div>
<div class="notification-content">下午3点会议提醒</div>
</div>
<div class="notification">
<div class="notification-title">音乐</div>
<div class="notification-content">您喜欢的歌曲已添加到播放列表</div>
</div>
</div>
</div>
</div>
<script>
// 更新时间
function updateTime() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
document.getElementById('current-time').textContent = `${hours}:${minutes}`;
}
setInterval(updateTime, 60000);
updateTime();
// 应用图标点击事件
document.querySelectorAll('.app-icon').forEach(icon => {
icon.addEventListener('click', function(e) {
e.preventDefault();
const app = this.getAttribute('data-app');
openApp(app);
});
});
// 打开应用
function openApp(appName) {
document.getElementById('home-screen').style.display = 'none';
document.getElementById(`${appName}-app`).style.display = 'flex';
}
// 关闭应用
function closeApp() {
document.querySelectorAll('.app-screen').forEach(screen => {
screen.style.display = 'none';
});
document.getElementById('home-screen').style.display = 'grid';
}
// 显示主屏幕
function showHomeScreen() {
document.querySelectorAll('.app-screen').forEach(screen => {
screen.style.display = 'none';
});
document.getElementById('home-screen').style.display = 'grid';
closeNotificationCenter();
}
// 显示通知中心
function showNotificationCenter() {
document.getElementById('notification-center').style.display = 'flex';
}
// 关闭通知中心
function closeNotificationCenter() {
document.getElementById('notification-center').style.display = 'none';
}
// 计算器功能
let calcDisplay = document.getElementById('calc-screen');
let currentInput = '0';
let operator = null;
let previousInput = null;
function appendToCalc(value) {
if (currentInput === '0' && value !== '.') {
currentInput = value;
} else {
currentInput += value;
}
calcDisplay.textContent = currentInput;
}
function clearCalc() {
currentInput = '0';
operator = null;
previousInput = null;
calcDisplay.textContent = currentInput;
}
function deleteLast() {
currentInput = currentInput.toString().slice(0, -1);
if (currentInput === '') currentInput = '0';
calcDisplay.textContent = currentInput;
}
function calculate() {
if (operator && previousInput !== null) {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
switch (operator) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operator = null;
previousInput = null;
calcDisplay.textContent = currentInput;
}
}
// 相机快门按钮点击效果
document.querySelector('.shutter-btn').addEventListener('click', function() {
this.style.transform = 'scale(0.9)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 100);
});
</script>
</body>
</html>
index.html
index.html