<pre class=" language-c" data-slot-rendered-content="true" style="border: 0px; margin-top: 0.5em; margin-bottom: 20px; padding: 1em; background: rgb(245, 242, 240); font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; font-size: 18px; line-height: 1.5; overflow: auto; max-width: 100%; text-shadow: rgb(255, 255, 255) 0px 1px; word-break: normal; overflow-wrap: normal; tab-size: 4; hyphens: none; max-height: 40em;">
   <code class=" language-c" style="border: 0px; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 1em; line-height: 1.5; font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; background: 0px 0px; text-shadow: rgb(255, 255, 255) 0px 1px; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 4; hyphens: none;"><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">// Create AsyncWebServer object on port 80</span>
AsyncWebServer <span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">server</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">80</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">// Create an Event Source on /events</span>
AsyncEventSource <span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">events</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"/events"</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">// Timer variables</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">unsigned</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">long</span> lastTime <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">0</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">unsigned</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">long</span> timerDelay <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">30000</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">// Create a sensor object</span>
Adafruit_BME280 bme<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">// BME280 connect to ESP32 I2C (GPIO 21 = SDA, GPIO 22 = SCL)</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">float</span> temperature<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">float</span> humidity<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">float</span> pressure<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">// Init BME280</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">void</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">initBME</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">if</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">!</span>bme<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">begin</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">0x76</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>
    Serial<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">println</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"Could not find a valid BME280 sensor, check wiring!"</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">while</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">1</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">void</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">getSensorReadings</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>
  temperature <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span> bme<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">readTemperature</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">// Convert temperature to Fahrenheit</span><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">//temperature = 1.8 * bme.readTemperature() + 32;</span>
  humidity <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span> bme<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">readHumidity</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span>
  pressure <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span> bme<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">readPressure</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">100.0F</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">// Initialize WiFi</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">void</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">initWiFi</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>
    WiFi<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">mode</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>WIFI_STA<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span>
    WiFi<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">begin</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>ssid<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">,</span> password<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span>
    Serial<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">print</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"Connecting to WiFi .."</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">while</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>WiFi<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">status</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">!=</span> WL_CONNECTED<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>
        Serial<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">print</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">'.'</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">delay</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">1000</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span>
    Serial<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">println</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>WiFi<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">localIP</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span>
String <span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">processor</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">const</span> String<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&amp;</span> var<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">getSensorReadings</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token comment" style="border: 0px; margin: 0px; padding: 0px; list-style-type: none; color: #708090;">//Serial.println(var);</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">if</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>var <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">==</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"TEMPERATURE"</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">return</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">String</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>temperature<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">else</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">if</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>var <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">==</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"HUMIDITY"</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">return</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">String</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>humidity<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">else</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">if</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>var <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">==</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"PRESSURE"</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">return</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">String</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>pressure<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">return</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">String</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">const</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">char</span> index_html<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">[</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">]</span> PROGMEM <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span> R"<span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">rawliteral</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">!</span>DOCTYPE HTML<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>html<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>head<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>title<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span>ESP Web Server<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>title<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>meta name<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"viewport"</span> content<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"width=device-width, initial-scale=1"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>link rel<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"stylesheet"</span> href<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"https://use.fontawesome.com/releases/v5.7.2/css/all.css"</span> integrity<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"</span> crossorigin<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"anonymous"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>link rel<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"icon"</span> href<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"data:,"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>style<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span>
    html <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>font<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>family<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> Arial<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> display<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">inline</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>block<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> text<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>align<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> center<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span>
    p <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span> font<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>size<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">1.2</span>rem<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span>
    body <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>  margin<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">0</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span>topnav <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span> overflow<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> hidden<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> background<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>color<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> #<span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">50</span>B8B4<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> color<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> white<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> font<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>size<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">1</span>rem<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span>content <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span> padding<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">20</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span>card <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span> background<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>color<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> white<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> box<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>shadow<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">2</span>px <span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">2</span>px <span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">12</span>px <span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">1</span>px <span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">rgba</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">140</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">,</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">140</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">,</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">140</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">,</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">.5</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span>cards <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span> max<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>width<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">800</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> margin<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">0</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">auto</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> display<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> grid<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> grid<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>gap<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">2</span>rem<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> grid<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>template<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>columns<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">repeat</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">auto</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>fit<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">,</span><span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">minmax</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">200</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">,</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">1f</span>r<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span>reading <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span> font<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>size<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">1.4</span>rem<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>style<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>head<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>body<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>div class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"topnav"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>h1<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span>BME280 WEB <span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">SERVER</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span>SSE<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>h1<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>div<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>div class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"content"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>div class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"cards"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>div class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"card"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>i class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"fas fa-thermometer-half"</span> style<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"color:#059e8a;"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>i<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span> TEMPERATURE<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>span class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"reading"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>span id<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"temp"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">%</span>TEMPERATURE<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">%</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>span<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&amp;</span>deg<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span>C<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>span<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>div<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>div class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"card"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>i class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"fas fa-tint"</span> style<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"color:#00add6;"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>i<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span> HUMIDITY<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>span class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"reading"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>span id<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"hum"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">%</span>HUMIDITY<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">%</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>span<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&amp;</span>percnt<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>span<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>div<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>div class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"card"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>i class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"fas fa-angle-double-down"</span> style<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"color:#e1e437;"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>i<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span> PRESSURE<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>span class<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"reading"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>span id<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"pres"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">%</span>PRESSURE<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">%</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>span<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span> hPa<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>span<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>p<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>div</code>
   </pre>