-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathkontrol.html
More file actions
156 lines (148 loc) · 6.94 KB
/
kontrol.html
File metadata and controls
156 lines (148 loc) · 6.94 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AgriSmart - Kontrol Sistem</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="kontrol.css">
</head>
<body>
<!-- Floating Leaves Background -->
<div id="leaves-container"></div>
<div class="container">
<div class="header">
<div class="logo-container">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='%232c7a2c' opacity='0.8'/><path fill='%23ffffff' d='M50 20 Q70 50 50 80 Q30 50 50 20 Z'/><circle cx='50' cy='50' r='15' fill='%23ffffff'/><path fill='%232c7a2c' d='M50 35 Q55 50 50 65 Q45 50 50 35 Z'/></svg>"
alt="AgriSmart Logo" class="logo">
<h1>Kontrol Sistem</h1>
</div>
<p>Manajemen Perangkat dan Otomasi</p>
<div class="nav-container">
<ul class="nav-links">
<li><a href="index.html">Dashboard</a></li>
<li><a href="monitoring.html">Monitoring</a></li>
<li><a href="kontrol.html" class="active">Kontrol</a></li>
<li><a href="laporan.html">Laporan</a></li>
<li><a href="pengaturan.html">Pengaturan</a></li>
</ul>
</div>
</div>
<!-- Camera Live Feed Panel -->
<div class="control-panel camera-panel">
<h3><i class="fas fa-camera"></i> Live Camera Feed</h3>
<div class="camera-container">
<div class="camera-wrapper">
<img id="camera-stream" src="" alt="Camera Stream" class="camera-feed">
<div class="camera-overlay" id="camera-status">
<i class="fas fa-spinner fa-spin"></i>
<p>Connecting to camera...</p>
</div>
<div class="camera-timestamp" id="camera-timestamp">
<i class="fas fa-clock"></i> <span id="timestamp-text">--:--:--</span>
</div>
</div>
<div class="camera-controls">
<button class="btn btn-camera" onclick="refreshCamera()">
<i class="fas fa-sync-alt"></i> Refresh
</button>
<button class="btn btn-camera" onclick="captureSnapshot()">
<i class="fas fa-camera"></i> Capture
</button>
<button class="btn btn-camera" id="stream-toggle" onclick="toggleStream()">
<i class="fas fa-pause"></i> Pause
</button>
</div>
<div class="camera-info">
<div class="info-item">
<strong>Resolution:</strong> <span id="camera-resolution">640x480</span>
</div>
<div class="info-item">
<strong>FPS:</strong> <span id="camera-fps">--</span>
</div>
<div class="info-item">
<strong>Status:</strong> <span id="stream-status" class="status-badge status-connecting">Connecting</span>
</div>
</div>
</div>
</div>
<div class="control-panel">
<h3><i class="fas fa-tint"></i> Kontrol Penyiraman</h3>
<div class="control-item">
<div>
<strong>Mode Otomatis</strong>
<p>Penyiraman berdasarkan kelembaban tanah</p>
</div>
<div class="toggle-switch" data-control="auto-watering" onclick="toggleControl(this, 'auto-watering')"></div>
</div>
<div class="control-item">
<div>
<strong>Jadwal Penyiraman</strong>
<p>Pagi: 06:00, Sore: 17:00</p>
</div>
<div class="toggle-switch" data-control="scheduled-watering" onclick="toggleControl(this, 'scheduled-watering')"></div>
</div>
<div class="control-item">
<div>
<strong>Penyiraman Manual</strong>
<p>Kontrol langsung untuk semua area</p>
</div>
<button class="btn" id="manual-watering-btn" onclick="manualWatering()">
<i class="fas fa-play"></i> Mulai Penyiraman
</button>
</div>
</div>
<div class="control-panel">
<h3><i class="fas fa-leaf"></i> Kontrol Pemupukan</h3>
<div class="control-item">
<div>
<strong>Sistem Pemupukan Otomatis</strong>
<p>Berdasarkan analisis pH dan nutrisi</p>
</div>
<div class="toggle-switch" onclick="toggleControl(this)"></div>
</div>
<div class="control-item">
<div>
<strong>Jadwal Pemupukan</strong>
<p>Setiap 3 hari sekali</p>
</div>
<div class="toggle-switch active" onclick="toggleControl(this)"></div>
</div>
<div class="control-item">
<div>
<strong>Pemupukan Manual</strong>
<p>Kontrol langsung aplikasi pupuk</p>
</div>
<button class="btn" onclick="manualFertilizing()">
<i class="fas fa-play"></i> Mulai Pemupukan
</button>
</div>
</div>
<div class="control-panel">
<h3><i class="fas fa-thermometer-half"></i> Kontrol Lingkungan</h3>
<div class="control-item">
<div>
<strong>Ventilasi Greenhouse</strong>
<p>Kontrol suhu dan sirkulasi udara</p>
</div>
<div class="toggle-switch active" onclick="toggleControl(this)"></div>
</div>
<div class="control-item">
<div>
<strong>Shading System</strong>
<p>Perlindungan dari sinar matahari berlebih</p>
</div>
<div class="toggle-switch" onclick="toggleControl(this)"></div>
</div>
<div class="control-item">
<div>
<strong>Heating System</strong>
<p>Pemanas untuk suhu malam hari</p>
</div>
<div class="toggle-switch" onclick="toggleControl(this)"></div>
</div>
</div>
</div>
<script src="kontrol.js"></script>
</body>
</html>