@brief HTML content for the OTA upload page @return Pointer to static HTML string
| 88 | /// @brief HTML content for the OTA upload page |
| 89 | /// @return Pointer to static HTML string |
| 90 | const char* getOtaHtmlPage() { |
| 91 | return R"html( |
| 92 | <!DOCTYPE html> |
| 93 | <html> |
| 94 | <head> |
| 95 | <meta charset="UTF-8"> |
| 96 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 97 | <title>FastLED OTA Update</title> |
| 98 | <style> |
| 99 | body { |
| 100 | font-family: Arial, sans-serif; |
| 101 | max-width: 600px; |
| 102 | margin: 50px auto; |
| 103 | padding: 20px; |
| 104 | background-color: #f0f0f0; |
| 105 | } |
| 106 | .container { |
| 107 | background-color: white; |
| 108 | padding: 30px; |
| 109 | border-radius: 8px; |
| 110 | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| 111 | } |
| 112 | h1 { |
| 113 | color: #333; |
| 114 | margin-top: 0; |
| 115 | } |
| 116 | .info { |
| 117 | background-color: #e3f2fd; |
| 118 | padding: 15px; |
| 119 | border-radius: 4px; |
| 120 | margin-bottom: 20px; |
| 121 | border-left: 4px solid #2196F3; |
| 122 | } |
| 123 | form { |
| 124 | margin-top: 20px; |
| 125 | } |
| 126 | input[type="file"] { |
| 127 | display: block; |
| 128 | margin: 15px 0; |
| 129 | padding: 10px; |
| 130 | width: 100%; |
| 131 | box-sizing: border-box; |
| 132 | } |
| 133 | button { |
| 134 | background-color: #4CAF50; |
| 135 | color: white; |
| 136 | padding: 12px 30px; |
| 137 | border: none; |
| 138 | border-radius: 4px; |
| 139 | cursor: pointer; |
| 140 | font-size: 16px; |
| 141 | width: 100%; |
| 142 | } |
| 143 | button:hover { |
| 144 | background-color: #45a049; |
| 145 | } |
| 146 | button:disabled { |
| 147 | background-color: #cccccc; |