Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Settings - ESP32 Command Center</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-gray-900 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="border-b border-gray-200 dark:border-gray-700 px-6 py-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white">ESP32 Settings</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200 dark:divide-gray-700"> | |
| <!-- WiFi Settings --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4 flex items-center"> | |
| <i data-feather="wifi" class="mr-2"></i> WiFi Configuration | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="ssid" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SSID</label> | |
| <input type="text" id="ssid" name="ssid" value="MyHomeWiFi" | |
| 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"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label> | |
| <input type="password" id="password" name="password" value="********" | |
| 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"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="dhcp" name="dhcp" checked | |
| class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700"> | |
| <label for="dhcp" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Use DHCP</label> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="ip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">IP Address</label> | |
| <input type="text" id="ip" name="ip" value="192.168.1.100" | |
| 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"> | |
| </div> | |
| <div> | |
| <label for="gateway" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Gateway</label> | |
| <input type="text" id="gateway" name="gateway" value="192.168.1.1" | |
| 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"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Device Settings --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4 flex items-center"> | |
| <i data-feather="settings" class="mr-2"></i> Device Configuration | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="deviceName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Device Name</label> | |
| <input type="text" id="deviceName" name="deviceName" value="Living Room ESP32" | |
| 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"> | |
| </div> | |
| <div> | |
| <label for="timezone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Timezone</label> | |
| <select id="timezone" name="timezone" | |
| 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"> | |
| <option>UTC</option> | |
| <option selected>Europe/London</option> | |
| <option>America/New_York</option> | |
| <option>Asia/Tokyo</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="maxTemp" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Max Temperature (°C)</label> | |
| <input type="number" id="maxTemp" name="maxTemp" value="30" min="0" max="100" | |
| 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"> | |
| </div> | |
| <div> | |
| <label for="minHumidity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Min Humidity (%)</label> | |
| <input type="number" id="minHumidity" name="minHumidity" value="30" min="0" max="100" | |
| 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"> | |
| </div> | |
| <div> | |
| <label for="reportInterval" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Report Interval (min)</label> | |
| <input type="number" id="reportInterval" name="reportInterval" value="15" min="1" max="1440" | |
| 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"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="ota" name="ota" checked | |
| class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700"> | |
| <label for="ota" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Enable OTA Updates</label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sensor Settings --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4 flex items-center"> | |
| <i data-feather="thermometer" class="mr-2"></i> Sensor Configuration | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sensor Polling Interval</label> | |
| <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"> | |
| <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> | |
| <span>1s</span> | |
| <span>30s</span> | |
| <span>60s</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Temperature Offset (°C)</label> | |
| <input type="number" id="tempOffset" name="tempOffset" value="0.0" step="0.1" min="-5" max="5" | |
| 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"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Humidity Offset (%)</label> | |
| <input type="number" id="humidityOffset" name="humidityOffset" value="0.0" step="0.5" min="-10" max="10" | |
| 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"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 flex justify-end space-x-3"> | |
| <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"> | |
| Cancel | |
| </button> | |
| <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"> | |
| Save Settings | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |