Spaces:
Running
Running
File size: 11,461 Bytes
3324270 a9143a5 3324270 a9143a5 3324270 a9143a5 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 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
<!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="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> |