-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
130 lines (120 loc) · 7.88 KB
/
Copy pathindex.html
File metadata and controls
130 lines (120 loc) · 7.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmartWater Demo Dashboard</title>
<style>
:root { --bg-color: #000000; --text-color: #ffffff; --secondary-text: #86868b; --card-bg: #1c1c1e; --accent-color: #007aff; --bolt-color: #32d74b; --emergency-color: #ff453a; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; }
body { background-color: var(--bg-color); color: var(--text-color); min-height: 100vh; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; padding-top: 5px; }
.top-nav { width: 100%; display: flex; align-items: center; padding: 15px 20px; margin-bottom: 0; position: relative; }
.menu-btn { cursor: pointer; z-index: 100; display: flex; flex-direction: column; gap: 5px; padding: 5px; }
.menu-btn span { display: block; width: 24px; height: 2px; background: white; border-radius: 2px; }
.side-menu { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(20px); z-index: 200; padding: 60px 24px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-right: 1px solid #333; }
.side-menu.active { left: 0; }
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 150; }
.profile-section h3 { font-size: 24px; font-weight: 700; margin-bottom: 25px; color: #fff; }
.stat-item { display: flex; justify-content: space-between; margin-bottom: 18px; font-size: 16px; font-weight: 500; }
.stat-value { color: var(--bolt-color); font-weight: 700; }
header h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; margin-left: 15px; }
.mascot-container { width: 300px; height: 300px; margin: 20px auto; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.mascot-image { width: 100%; height: 100%; object-fit: contain; }
.status-container { text-align: center; margin-bottom: 25px; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.status-text { font-size: 48px; font-weight: 700; letter-spacing: -1px; text-transform: uppercase; transition: color 0.3s ease; }
.status-card { background-color: var(--card-bg); width: 90%; max-width: 380px; border-radius: 22px; padding: 24px; display: flex; align-items: center; gap: 20px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.05); }
.product-image-placeholder { width: 90px; height: 90px; background: #2c2c2e; border-radius: 15px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.product-image { width: 100%; height: 100%; object-fit: cover; }
.status-info { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.status-label { font-size: 14px; color: var(--secondary-text); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.status-main-value { font-size: 22px; font-weight: 600; }
.streak-info { font-size: 15px; color: var(--bolt-color); font-weight: 500; margin-top: 2px; }
.emergency-indicator { color: var(--emergency-color); font-size: 13px; font-weight: 600; display: none; align-items: center; gap: 5px; }
.idle { color: var(--secondary-text); }
.watering { color: var(--accent-color); }
.emergency { color: var(--emergency-color); }
</style>
</head>
<body>
<div class="menu-overlay" id="overlay" onclick="toggleMenu()"></div>
<div class="side-menu" id="menu">
<div class="profile-section">
<h3>System Status</h3>
<div class="stat-item"><span>Watering Streak</span><span class="stat-value" id="sideStreak">12 Days 💧</span></div>
<div class="stat-item"><span>Cycles Today</span><span class="stat-value">8</span></div>
<div class="stat-item"><span>Health Score</span><span class="stat-value">98%</span></div>
<hr style="border: 0; border-top: 1px solid #333; margin: 20px 0;">
<div class="stat-item" style="color: var(--secondary-text);"><span>Firmware</span><span>v2.1.0</span></div>
</div>
</div>
<nav class="top-nav">
<div class="menu-btn" onclick="toggleMenu()"><span></span><span></span><span></span></div>
<header><h1>SmartWater</h1></header>
</nav>
<div class="mascot-container"><img id="petImage" class="mascot-image" src="Media/Normal1.png" alt="Pet Status"></div>
<div class="status-container">
<div class="status-text idle" id="statusHeader">Ready</div>
<div class="emergency-indicator" id="emergencyBadge">⚠️ SYSTEM ALERT</div>
</div>
<div class="status-card">
<div class="product-image-placeholder">
<img class="product-image" src="Media/SmartWaterBox.png" alt="SmartWater Controller">
</div>
<div class="status-info">
<span class="status-label">Operation Mode</span>
<span class="status-main-value" id="statusValue">STANDBY</span>
<span class="streak-info" id="streakDisplay">Watering Streak: 12 days</span>
</div>
</div>
<script>
const IDLE_ANIM = ["Media/Normal1.png", "Media/Normal2.png", "Media/Normal3.png"];
const WATERING_IMG = "Media/Watering.png";
const EMERGENCY_IMG = "Media/Emergency.png";
let demoState = 0; // 0: Normal, 1: Watering, 2: Emergency
let demoStartTime = Date.now();
let frameCount = 0;
function toggleMenu() {
document.getElementById('menu').classList.toggle('active');
document.getElementById('overlay').style.display = document.getElementById('menu').classList.contains('active') ? 'block' : 'none';
}
function updateDemo() {
const now = Date.now();
const elapsed = (now - demoStartTime) / 1000;
const petImg = document.getElementById('petImage');
const statusHeader = document.getElementById('statusHeader');
const statusValue = document.getElementById('statusValue');
const emerBadge = document.getElementById('emergencyBadge');
if (demoState === 0) { // NORMAL IDLE
// Loop frames every 0.25s
let frameIndex = Math.floor(now / 250) % IDLE_ANIM.length;
petImg.src = IDLE_ANIM[frameIndex];
statusHeader.innerText = "Ready";
statusHeader.className = "status-text idle";
statusValue.innerText = "STANDBY";
statusValue.className = "status-main-value idle";
emerBadge.style.display = "none";
if (elapsed >= 5) { demoState = 1; demoStartTime = now; }
}
else if (demoState === 1) { // WATERING
petImg.src = WATERING_IMG;
statusHeader.innerText = "Watering";
statusHeader.className = "status-text watering";
statusValue.innerText = "ACTIVE PUMP";
statusValue.className = "status-main-value watering";
emerBadge.style.display = "none";
if (elapsed >= 5) { demoState = 2; demoStartTime = now; }
}
else if (demoState === 2) { // EMERGENCY
petImg.src = EMERGENCY_IMG;
statusHeader.innerText = "Emergency";
statusHeader.className = "status-text emergency";
statusValue.innerText = "SHUTDOWN";
statusValue.className = "status-main-value emergency";
emerBadge.style.display = "flex";
if (elapsed >= 5) { demoState = 0; demoStartTime = now; }
}
}
setInterval(updateDemo, 50);
</script>
</body>
</html>