Spaces:
Running
Running
File size: 9,740 Bytes
3324270 08e1c9a 3324270 08e1c9a 3324270 | 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 | <!DOCTYPE html>
<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="space-y-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 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> |