init: add initial project files for Mi Home smart home interface clone
This commit is contained in:
shenghuo2
178
index.html
Normal file
178
index.html
Normal file
@ -0,0 +1,178 @@
|
||||
<!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="styles/main.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 主页面 - 设备控制界面 -->
|
||||
<div class="container" id="home-page">
|
||||
<!-- 顶部导航 -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<span class="home-name">shenghuo2的家</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<i class="fas fa-comment-dots"></i>
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 房间导航 -->
|
||||
<nav class="room-nav">
|
||||
<div class="room-tabs">
|
||||
<span class="room-tab active">全屋</span>
|
||||
<span class="room-tab">出租屋</span>
|
||||
<span class="room-tab">十五中</span>
|
||||
<span class="room-tab">客厅</span>
|
||||
<span class="room-tab">卧室</span>
|
||||
</div>
|
||||
<i class="fas fa-bars home-menu-icon"></i>
|
||||
</nav>
|
||||
|
||||
<!-- 空气质量 -->
|
||||
<div class="air-quality">
|
||||
<span>空气质量 4</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
|
||||
<!-- 设备网格 -->
|
||||
<div class="device-grid">
|
||||
<!-- 手机红外遥控器 -->
|
||||
<div class="device-card">
|
||||
<div class="device-icon">
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
</div>
|
||||
<div class="device-name">手机红外遥控器</div>
|
||||
<div class="device-status">手机 | 设备离线</div>
|
||||
</div>
|
||||
|
||||
<!-- 万能遥控器 -->
|
||||
<div class="device-card">
|
||||
<div class="device-icon">
|
||||
<i class="fas fa-satellite-dish"></i>
|
||||
</div>
|
||||
<div class="device-name">万能遥控器</div>
|
||||
<div class="device-status">设备离线 | 长期离线</div>
|
||||
</div>
|
||||
|
||||
<!-- 空调 -->
|
||||
<div class="device-card">
|
||||
<div class="device-icon">
|
||||
<div class="ac-icon"></div>
|
||||
</div>
|
||||
<div class="device-name">空调</div>
|
||||
<div class="device-status">卧室 | 设备离线</div>
|
||||
</div>
|
||||
|
||||
<!-- 客厅空调 -->
|
||||
<div class="device-card">
|
||||
<div class="device-icon">
|
||||
<div class="ac-icon"></div>
|
||||
</div>
|
||||
<div class="device-name">客厅空调</div>
|
||||
<div class="device-status">客厅 | 设备离线</div>
|
||||
</div>
|
||||
|
||||
<!-- 盒子 -->
|
||||
<div class="device-card">
|
||||
<div class="device-icon">
|
||||
<i class="fas fa-tv"></i>
|
||||
</div>
|
||||
<div class="device-name">盒子</div>
|
||||
<div class="device-status">客厅 | 设备离线</div>
|
||||
</div>
|
||||
|
||||
<!-- 投影仪 -->
|
||||
<div class="device-card">
|
||||
<div class="device-icon">
|
||||
<i class="fas fa-video"></i>
|
||||
</div>
|
||||
<div class="device-name">投影仪</div>
|
||||
<div class="device-status">客厅 | 设备离线</div>
|
||||
</div>
|
||||
|
||||
<!-- 卧室空调 -->
|
||||
<div class="device-card">
|
||||
<div class="device-icon">
|
||||
<div class="ac-icon"></div>
|
||||
</div>
|
||||
<div class="device-name">卧室空调</div>
|
||||
<div class="device-status">卧室 | 设备离线</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能插座2 蓝牙网关版 -->
|
||||
<div class="device-card active">
|
||||
<div class="device-icon">
|
||||
<i class="fas fa-plug"></i>
|
||||
</div>
|
||||
<div class="device-name">智能插座2 蓝牙网关版</div>
|
||||
<div class="device-status">出租屋</div>
|
||||
<div class="power-button">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 温湿度计 -->
|
||||
<div class="sensor-grid">
|
||||
<div class="sensor-card">
|
||||
<div class="sensor-icon">
|
||||
<span class="temp-display">26°</span>
|
||||
</div>
|
||||
<div class="sensor-name">温湿度计</div>
|
||||
<div class="sensor-status">客厅</div>
|
||||
<div class="bluetooth-icon">
|
||||
<i class="fab fa-bluetooth-b"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sensor-card">
|
||||
<div class="sensor-icon">
|
||||
<span class="temp-display">26.5°</span>
|
||||
<span class="humidity-display">60%</span>
|
||||
</div>
|
||||
<div class="sensor-name">日博士温湿度计-卫生间</div>
|
||||
<div class="sensor-status">十五中 | 16.8°C 39%</div>
|
||||
<div class="bluetooth-icon">
|
||||
<i class="fab fa-bluetooth-b"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item active">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>米家</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="location.href='smart.html'">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>智能</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="location.href='product.html'">
|
||||
<i class="fas fa-star"></i>
|
||||
<span>产品</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="location.href='mall.html'">
|
||||
<i class="fas fa-shopping-bag"></i>
|
||||
<span>商城</span>
|
||||
</div>
|
||||
<div class="nav-item" onclick="location.href='profile.html'">
|
||||
<i class="fas fa-user"></i>
|
||||
<span>我的</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user