Hugging Face's logo

Spaces:
Omid7
/
esp32-command-center
Running

App Files Community
Omid7 commited on
Commit
3324270
·
verified ·
1 Parent(s): d7834a0

ESP32 dashboard

Browse files
Files changed (7) hide show
  1. README.md +8 -5
  2. components/footer.js +59 -0
  3. components/navbar.js +101 -0
  4. index.html +249 -19
  5. script.js +35 -0
  6. settings.html +144 -0
  7. style.css +43 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Esp32 Command Center
3
- emoji: 📈
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: ESP32 Command Center 🚀
3
+ colorFrom: blue
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,59 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background: #1a202c;
8
+ color: white;
9
+ padding: 1.5rem 2rem;
10
+ text-align: center;
11
+ margin-top: 2rem;
12
+ }
13
+ .container {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: center;
19
+ }
20
+ .links {
21
+ display: flex;
22
+ gap: 1.5rem;
23
+ margin-bottom: 1rem;
24
+ }
25
+ a {
26
+ color: #a0aec0;
27
+ text-decoration: none;
28
+ transition: color 0.2s;
29
+ font-size: 0.875rem;
30
+ }
31
+ a:hover {
32
+ color: white;
33
+ }
34
+ .copyright {
35
+ color: #718096;
36
+ font-size: 0.875rem;
37
+ }
38
+ .version {
39
+ color: #4a5568;
40
+ font-size: 0.75rem;
41
+ margin-top: 0.5rem;
42
+ }
43
+ </style>
44
+ <footer>
45
+ <div class="container">
46
+ <div class="links">
47
+ <a href="/about">About</a>
48
+ <a href="/docs">Documentation</a>
49
+ <a href="/privacy">Privacy</a>
50
+ <a href="/contact">Contact</a>
51
+ </div>
52
+ <p class="copyright">&copy; ${new Date().getFullYear()} ESP32 Command Center. All rights reserved.</p>
53
+ <p class="version">Firmware v2.1.4 | Dashboard v1.0.0</p>
54
+ </div>
55
+ </footer>
56
+ `;
57
+ }
58
+ }
59
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
8
+ padding: 1rem 2rem;
9
+ display: flex;
10
+ justify-content: space-between;
11
+ align-items: center;
12
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
13
+ }
14
+ .logo {
15
+ color: white;
16
+ font-weight: bold;
17
+ font-size: 1.25rem;
18
+ display: flex;
19
+ align-items: center;
20
+ }
21
+ .logo-icon {
22
+ margin-right: 0.5rem;
23
+ }
24
+ ul {
25
+ display: flex;
26
+ gap: 1.5rem;
27
+ list-style: none;
28
+ margin: 0;
29
+ padding: 0;
30
+ }
31
+ a {
32
+ color: white;
33
+ text-decoration: none;
34
+ font-weight: 500;
35
+ display: flex;
36
+ align-items: center;
37
+ transition: opacity 0.2s;
38
+ }
39
+ a:hover {
40
+ opacity: 0.9;
41
+ }
42
+ .nav-icon {
43
+ margin-right: 0.5rem;
44
+ width: 18px;
45
+ height: 18px;
46
+ }
47
+ .theme-toggle {
48
+ background: rgba(255, 255, 255, 0.2);
49
+ border: none;
50
+ color: white;
51
+ padding: 0.5rem;
52
+ border-radius: 0.375rem;
53
+ cursor: pointer;
54
+ display: flex;
55
+ align-items: center;
56
+ transition: background 0.2s;
57
+ }
58
+ .theme-toggle:hover {
59
+ background: rgba(255, 255, 255, 0.3);
60
+ }
61
+ </style>
62
+ <nav>
63
+ <a href="/" class="logo">
64
+ <i data-feather="cpu" class="logo-icon"></i>
65
+ ESP32 Command Center
66
+ </a>
67
+ <ul>
68
+ <li><a href="/"><i data-feather="home" class="nav-icon"></i> Dashboard</a></li>
69
+ <li><a href="/settings.html"><i data-feather="settings" class="nav-icon"></i> Settings</a></li>
70
+ <li>
71
+ <button class="theme-toggle" id="themeToggle">
72
+ <i data-feather="moon" class="nav-icon"></i>
73
+ </button>
74
+ </li>
75
+ </ul>
76
+ </nav>
77
+ `;
78
+
79
+ // Theme toggle functionality
80
+ const themeToggle = this.shadowRoot.getElementById('themeToggle');
81
+ themeToggle.addEventListener('click', () => {
82
+ const html = document.documentElement;
83
+ html.classList.toggle('dark');
84
+
85
+ const isDark = html.classList.contains('dark');
86
+ localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
87
+
88
+ // Update icon
89
+ const icon = themeToggle.querySelector('i');
90
+ icon.setAttribute('data-feather', isDark ? 'sun' : 'moon');
91
+ feather.replace();
92
+ });
93
+
94
+ // Set initial icon based on theme
95
+ const html = document.documentElement;
96
+ const icon = this.shadowRoot.querySelector('#themeToggle i');
97
+ icon.setAttribute('data-feather', html.classList.contains('dark') ? 'sun' : 'moon');
98
+ feather.replace();
99
+ }
100
+ }
101
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,249 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ESP32 Command Center</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: {
19
+ 500: '#6366f1',
20
+ 600: '#4f46e5',
21
+ },
22
+ secondary: {
23
+ 500: '#8b5cf6',
24
+ 600: '#7c3aed',
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ </head>
32
+ <body class="bg-gray-100 dark:bg-gray-900 min-h-screen">
33
+ <custom-navbar></custom-navbar>
34
+
35
+ <main class="container mx-auto px-4 py-8">
36
+ <!-- Status Overview -->
37
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
38
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center">
39
+ <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900 mr-4">
40
+ <i data-feather="wifi" class="text-primary-600 dark:text-primary-400 w-6 h-6"></i>
41
+ </div>
42
+ <div>
43
+ <p class="text-gray-500 dark:text-gray-400 text-sm">WiFi Status</p>
44
+ <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Connected</h3>
45
+ </div>
46
+ </div>
47
+
48
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center">
49
+ <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 mr-4">
50
+ <i data-feather="cpu" class="text-green-600 dark:text-green-400 w-6 h-6"></i>
51
+ </div>
52
+ <div>
53
+ <p class="text-gray-500 dark:text-gray-400 text-sm">CPU Usage</p>
54
+ <h3 class="text-xl font-semibold text-gray-800 dark:text-white">42%</h3>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center">
59
+ <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 mr-4">
60
+ <i data-feather="hard-drive" class="text-blue-600 dark:text-blue-400 w-6 h-6"></i>
61
+ </div>
62
+ <div>
63
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Memory</p>
64
+ <h3 class="text-xl font-semibold text-gray-800 dark:text-white">64%</h3>
65
+ </div>
66
+ </div>
67
+
68
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex items-center">
69
+ <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 mr-4">
70
+ <i data-feather="thermometer" class="text-purple-600 dark:text-purple-400 w-6 h-6"></i>
71
+ </div>
72
+ <div>
73
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Temperature</p>
74
+ <h3 class="text-xl font-semibold text-gray-800 dark:text-white">32°C</h3>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Main Content -->
80
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
81
+ <!-- Sensor Data Chart -->
82
+ <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
83
+ <div class="flex justify-between items-center mb-4">
84
+ <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Sensor Data</h2>
85
+ <div class="flex space-x-2">
86
+ <button class="px-3 py-1 bg-primary-500 text-white rounded-md text-sm">Live</button>
87
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md text-sm">1h</button>
88
+ <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md text-sm">24h</button>
89
+ </div>
90
+ </div>
91
+ <canvas id="sensorChart" height="300"></canvas>
92
+ </div>
93
+
94
+ <!-- Device Controls -->
95
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
96
+ <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Device Controls</h2>
97
+
98
+ <div class="space-y-4">
99
+ <div class="flex justify-between items-center">
100
+ <div>
101
+ <h3 class="font-medium text-gray-700 dark:text-gray-300">LED Strip</h3>
102
+ <p class="text-sm text-gray-500 dark:text-gray-400">Living Room</p>
103
+ </div>
104
+ <label class="relative inline-flex items-center cursor-pointer">
105
+ <input type="checkbox" value="" class="sr-only peer" checked>
106
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div>
107
+ </label>
108
+ </div>
109
+
110
+ <div class="flex justify-between items-center">
111
+ <div>
112
+ <h3 class="font-medium text-gray-700 dark:text-gray-300">Smart Plug</h3>
113
+ <p class="text-sm text-gray-500 dark:text-gray-400">Kitchen</p>
114
+ </div>
115
+ <label class="relative inline-flex items-center cursor-pointer">
116
+ <input type="checkbox" value="" class="sr-only peer">
117
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div>
118
+ </label>
119
+ </div>
120
+
121
+ <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
122
+ <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-2">LED Brightness</h3>
123
+ <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
124
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
125
+ <span>0%</span>
126
+ <span>50%</span>
127
+ <span>100%</span>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
132
+ <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Motor Speed</h3>
133
+ <input type="range" min="0" max="100" value="40" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
134
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
135
+ <span>0%</span>
136
+ <span>50%</span>
137
+ <span>100%</span>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Logs -->
144
+ <div class="lg:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
145
+ <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">System Logs</h2>
146
+ <div class="overflow-y-auto max-h-64">
147
+ <div class="space-y-2">
148
+ <div class="flex items-start">
149
+ <div class="flex-shrink-0 h-2 w-2 rounded-full bg-green-500 mt-2 mr-3"></div>
150
+ <div>
151
+ <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Device connected - 10:42 AM</p>
152
+ <p class="text-xs text-gray-500 dark:text-gray-400">ESP32 connected to WiFi network</p>
153
+ </div>
154
+ </div>
155
+ <div class="flex items-start">
156
+ <div class="flex-shrink-0 h-2 w-2 rounded-full bg-blue-500 mt-2 mr-3"></div>
157
+ <div>
158
+ <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Temperature reading - 10:40 AM</p>
159
+ <p class="text-xs text-gray-500 dark:text-gray-400">Living Room: 22.4°C</p>
160
+ </div>
161
+ </div>
162
+ <div class="flex items-start">
163
+ <div class="flex-shrink-0 h-2 w-2 rounded-full bg-yellow-500 mt-2 mr-3"></div>
164
+ <div>
165
+ <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Warning: High CPU - 10:38 AM</p>
166
+ <p class="text-xs text-gray-500 dark:text-gray-400">CPU usage reached 85%</p>
167
+ </div>
168
+ </div>
169
+ <div class="flex items-start">
170
+ <div class="flex-shrink-0 h-2 w-2 rounded-full bg-blue-500 mt-2 mr-3"></div>
171
+ <div>
172
+ <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Humidity reading - 10:35 AM</p>
173
+ <p class="text-xs text-gray-500 dark:text-gray-400">Living Room: 45%</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </main>
181
+
182
+ <custom-footer></custom-footer>
183
+
184
+ <script src="components/navbar.js"></script>
185
+ <script src="components/footer.js"></script>
186
+ <script src="script.js"></script>
187
+ <script>
188
+ feather.replace();
189
+
190
+ // Initialize chart
191
+ const ctx = document.getElementById('sensorChart').getContext('2d');
192
+ const sensorChart = new Chart(ctx, {
193
+ type: 'line',
194
+ data: {
195
+ labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '00:00'],
196
+ datasets: [
197
+ {
198
+ label: 'Temperature (°C)',
199
+ data: [22, 21, 20, 22, 25, 26, 24, 23, 22],
200
+ borderColor: '#6366f1',
201
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
202
+ tension: 0.4,
203
+ fill: true
204
+ },
205
+ {
206
+ label: 'Humidity (%)',
207
+ data: [45, 46, 48, 42, 40, 38, 42, 44, 45],
208
+ borderColor: '#8b5cf6',
209
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
210
+ tension: 0.4,
211
+ fill: true
212
+ }
213
+ ]
214
+ },
215
+ options: {
216
+ responsive: true,
217
+ plugins: {
218
+ legend: {
219
+ position: 'top',
220
+ labels: {
221
+ color: '#6b7280'
222
+ }
223
+ }
224
+ },
225
+ scales: {
226
+ y: {
227
+ beginAtZero: false,
228
+ grid: {
229
+ color: 'rgba(229, 231, 235, 0.2)'
230
+ },
231
+ ticks: {
232
+ color: '#6b7280'
233
+ }
234
+ },
235
+ x: {
236
+ grid: {
237
+ color: 'rgba(229, 231, 235, 0.2)'
238
+ },
239
+ ticks: {
240
+ color: '#6b7280'
241
+ }
242
+ }
243
+ }
244
+ }
245
+ });
246
+ </script>
247
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
248
+ </body>
249
+ </html>
script.js ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Shared functionality for ESP32 dashboard
2
+
3
+ // Theme switcher functionality
4
+ document.addEventListener('DOMContentLoaded', () => {
5
+ // Check for saved theme preference or use system preference
6
+ if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
7
+ document.documentElement.classList.add('dark');
8
+ } else {
9
+ document.documentElement.classList.remove('dark');
10
+ }
11
+ });
12
+
13
+ // Simulate real-time data updates
14
+ setInterval(() => {
15
+ const cpuElement = document.querySelector('h3:contains("CPU Usage")').nextElementSibling;
16
+ const randomCpu = Math.floor(Math.random() * 20) + 30; // 30-50%
17
+ cpuElement.textContent = `${randomCpu}%`;
18
+ }, 5000);
19
+
20
+ // Toggle switches functionality
21
+ document.addEventListener('DOMContentLoaded', () => {
22
+ document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
23
+ checkbox.addEventListener('change', (e) => {
24
+ const device = e.target.closest('div').querySelector('h3').textContent;
25
+ console.log(`${device} turned ${e.target.checked ? 'on' : 'off'}`);
26
+ });
27
+ });
28
+
29
+ document.querySelectorAll('input[type="range"]').forEach(range => {
30
+ range.addEventListener('input', (e) => {
31
+ const control = e.target.closest('div').querySelector('h3').textContent;
32
+ console.log(`${control} adjusted to ${e.target.value}%`);
33
+ });
34
+ });
35
+ });
settings.html ADDED
@@ -0,0 +1,144 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Settings - ESP32 Command Center</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-gray-100 dark:bg-gray-900 min-h-screen">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="container mx-auto px-4 py-8">
16
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
17
+ <div class="border-b border-gray-200 dark:border-gray-700 px-6 py-4">
18
+ <h2 class="text-xl font-semibold text-gray-800 dark:text-white">ESP32 Settings</h2>
19
+ </div>
20
+
21
+ <div class="divide-y divide-gray-200 dark:divide-gray-700">
22
+ <!-- WiFi Settings -->
23
+ <div class="p-6">
24
+ <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4 flex items-center">
25
+ <i data-feather="wifi" class="mr-2"></i> WiFi Configuration
26
+ </h3>
27
+
28
+ <div class="space-y-4">
29
+ <div>
30
+ <label for="ssid" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SSID</label>
31
+ <input type="text" id="ssid" name="ssid" value="MyHomeWiFi"
32
+ class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
33
+ </div>
34
+
35
+ <div>
36
+ <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
37
+ <input type="password" id="password" name="password" value="********"
38
+ class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
39
+ </div>
40
+
41
+ <div class="flex items-center">
42
+ <input type="checkbox" id="dhcp" name="dhcp" checked
43
+ class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
44
+ <label for="dhcp" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Use DHCP</label>
45
+ </div>
46
+
47
+ <div class="grid grid-cols-2 gap-4">
48
+ <div>
49
+ <label for="ip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">IP Address</label>
50
+ <input type="text" id="ip" name="ip" value="192.168.1.100"
51
+ class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
52
+ </div>
53
+ <div>
54
+ <label for="gateway" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Gateway</label>
55
+ <input type="text" id="gateway" name="gateway" value="192.168.1.1"
56
+ class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Device Settings -->
63
+ <div class="p-6">
64
+ <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4 flex items-center">
65
+ <i data-feather="settings" class="mr-2"></i> Device Configuration
66
+ </h3>
67
+
68
+ <div class="space-y-4">
69
+ <div>
70
+ <label for="deviceName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Device Name</label>
71
+ <input type="text" id="deviceName" name="deviceName" value="Living Room ESP32"
72
+ class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
73
+ </div>
74
+
75
+ <div>
76
+ <label for="timezone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Timezone</label>
77
+ <select id="timezone" name="timezone"
78
+ class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
79
+ <option>UTC</option>
80
+ <option selected>Europe/London</option>
81
+ <option>America/New_York</option>
82
+ <option>Asia/Tokyo</option>
83
+ </select>
84
+ </div>
85
+
86
+ <div class="flex items-center">
87
+ <input type="checkbox" id="ota" name="ota" checked
88
+ class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
89
+ <label for="ota" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Enable OTA Updates</label>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Sensor Settings -->
95
+ <div class="p-6">
96
+ <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4 flex items-center">
97
+ <i data-feather="thermometer" class="mr-2"></i> Sensor Configuration
98
+ </h3>
99
+
100
+ <div class="space-y-4">
101
+ <div>
102
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sensor Polling Interval</label>
103
+ <input type="range" min="1" max="60" value="5" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer">
104
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
105
+ <span>1s</span>
106
+ <span>30s</span>
107
+ <span>60s</span>
108
+ </div>
109
+ </div>
110
+
111
+ <div>
112
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Temperature Offset (°C)</label>
113
+ <input type="number" id="tempOffset" name="tempOffset" value="0.0" step="0.1" min="-5" max="5"
114
+ class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
115
+ </div>
116
+
117
+ <div>
118
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Humidity Offset (%)</label>
119
+ <input type="number" id="humidityOffset" name="humidityOffset" value="0.0" step="0.5" min="-10" max="10"
120
+ class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 flex justify-end space-x-3">
127
+ <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
128
+ Cancel
129
+ </button>
130
+ <button class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
131
+ Save Settings
132
+ </button>
133
+ </div>
134
+ </div>
135
+ </main>
136
+
137
+ <custom-footer></custom-footer>
138
+
139
+ <script src="components/navbar.js"></script>
140
+ <script src="components/footer.js"></script>
141
+ <script src="script.js"></script>
142
+ <script>feather.replace();</script>
143
+ </body>
144
+ </html>
style.css CHANGED
@@ -1,28 +1,53 @@
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles for ESP32 dashboard */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
+
4
  body {
5
+ font-family: 'Inter', sans-serif;
6
+ transition: background-color 0.3s ease;
7
+ }
8
+
9
+ /* Custom scrollbar */
10
+ ::-webkit-scrollbar {
11
+ width: 6px;
12
+ height: 6px;
13
+ }
14
+
15
+ ::-webkit-scrollbar-track {
16
+ background: rgba(0, 0, 0, 0.1);
17
+ border-radius: 10px;
18
+ }
19
+
20
+ ::-webkit-scrollbar-thumb {
21
+ background: rgba(0, 0, 0, 0.2);
22
+ border-radius: 10px;
23
+ }
24
+
25
+ ::-webkit-scrollbar-thumb:hover {
26
+ background: rgba(0, 0, 0, 0.4);
27
  }
28
 
29
+ .dark ::-webkit-scrollbar-track {
30
+ background: rgba(255, 255, 255, 0.1);
 
31
  }
32
 
33
+ .dark ::-webkit-scrollbar-thumb {
34
+ background: rgba(255, 255, 255, 0.2);
 
 
 
35
  }
36
 
37
+ .dark ::-webkit-scrollbar-thumb:hover {
38
+ background: rgba(255, 255, 255, 0.4);
 
 
 
 
39
  }
40
 
41
+ /* Animation for status cards */
42
+ .status-card {
43
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
44
  }
45
+
46
+ .status-card:hover {
47
+ transform: translateY(-2px);
48
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
49
+ }
50
+
51
+ .dark .status-card:hover {
52
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
53
+ }