Updated to better images

7 years ago · f91b772c32
parent ce9d6b3c41
commit f91b772c32
3 changed files with 481 additions and 463 deletions
--- a/README.md
+++ b/README.md
@ -53,16 +53,16 @@ Apply the [Arduino core](https://github.com/esp8266/Arduino) of the ESP8266 Comm

 Most simple approach to applying AutoConnect for the existing sketches, follow the below steps.

-<img src="docs/images/BeforeAfter.svg" width="800">
+<img src="mkdocs/images/beforeafter.png">

 ## More usages and Documentation

-The documentation is available on https://Hieromon.github.io/AutoConnect, here are some shortcuts:
+Full documentation is available on https://Hieromon.github.io/AutoConnect, some quick links at the list:

- [Installation](https://hieromon.github.io/AutoConnect/index.html#installation).
- [Getting started](https://hieromon.github.io/AutoConnect/gettingstarted/index.html).
- [Usage the Library](https://hieromon.github.io/AutoConnect/usage/index.html).
- [API reference](https://hieromon.github.io/AutoConnect/api/index.html).
+- The [Installation](https://hieromon.github.io/AutoConnect/index.html#installation) is the installation procedure and requirements for the library.
+- [Getting started](https://hieromon.github.io/AutoConnect/gettingstarted/index.html) with the most simple sketch for using AutoConnect.
+- The [Usage the Library](https://hieromon.github.io/AutoConnect/usage/index.html) quides to using the library correctly.
+- The [API reference](https://hieromon.github.io/AutoConnect/api/index.html) describes the AutoConnect functions specification.
 - [FAQ](https://hieromon.github.io/AutoConnect/faq/index.html).

 ## License
--- a/mkdocs/images/BeforeAfter.svg
+++ b/mkdocs/images/BeforeAfter.svg
@ -8,9 +8,9 @@
   xmlns="http://www.w3.org/2000/svg"
   id="svg8"
   version="1.1"
-   viewBox="0 0 278.12582 198.967"
-   height="198.967mm"
-   width="278.12582mm">
+   viewBox="0 0 196.63957 182.99508"
+   height="182.99507mm"
+   width="196.63957mm">
  <defs
     id="defs2">
    <marker
@ -107,509 +107,527 @@
    </rdf:RDF>
  </metadata>
  <g
-     transform="translate(189.96632,-40.023319)"
+     transform="translate(39.78823,-45.773269)"
     id="layer1">
+    <g
+       transform="translate(147.66531,3.5499426)"
+       id="layer1-8">
      <path
-       id="path2172"
-       style="fill:none;stroke:#000000;stroke-width:0.0264583px"
-       d="M -184.95309,50.036549 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29166,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29166,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29166,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29166,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29166,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29166,-183.953771 V 233.99032 M -94.994761,50.036549 V 233.99032 M -89.703095,50.036549 V 233.99032 M -84.411427,50.036549 V 233.99032 m 5.29167,-183.953771 V 233.99032 m 5.29166,-183.953771 V 233.99032 m 5.29167,-183.953771 V 233.99032 M -184.95309,50.036549 h 120.162153 m -120.162153,5.291667 h 120.162153 m -120.162153,5.291666 h 120.162153 m -120.162153,5.291667 h 120.162153 m -120.162153,5.291666 h 120.162153 m -120.162153,5.291666 h 120.162153 m -120.162153,5.291667 h 120.162153 m -120.162153,5.291666 h 120.162153 m -120.162153,5.291667 h 120.162153 m -120.162153,5.291666 h 120.162153 m -120.162153,5.291673 h 120.162153 m -120.162153,5.29166 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29166 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29166 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29166 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29166 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29166 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29166 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29166 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29167 h 120.162153 m -120.162153,5.29166 h 120.162153 m -120.162153,5.29167 h 120.162153" />
+         id="path2315-6"
+         style="fill:none;stroke:#000000;stroke-width:0.026;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.49803922"
+         d="M -80.290968,53.521296 V 220.21829 m 5.29167,-166.696994 V 220.21829 m 5.29167,-166.696994 V 220.21829 m 5.29166,-166.696994 V 220.21829 m 5.29167,-166.696994 V 220.21829 m 5.29166,-166.696994 V 220.21829 m 5.29167,-166.696994 V 220.21829 m 5.29167,-166.696994 V 220.21829 m 5.29166,-166.696994 V 220.21829 m 5.29167,-166.696994 V 220.21829 M -27.374294,53.521296 V 220.21829 m 5.29166,-166.696994 V 220.21829 m 5.29167,-166.696994 V 220.21829 m 5.29167,-166.696994 V 220.21829 M -6.2076337,53.521296 V 220.21829 M -0.91596368,53.521296 V 220.21829 M -80.290968,53.521296 H 4.1860363 M -80.290968,58.812963 H 4.1860363 M -80.290968,64.104628 H 4.1860363 M -80.290968,69.396301 H 4.1860363 m -84.4770043,5.29166 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29166 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 M -80.290968,101.1463 H 4.1860363 m -84.4770043,5.29166 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 M -80.290968,117.0213 H 4.1860363 m -84.4770043,5.29165 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29166 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29166 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29166 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29166 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29166 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29167 H 4.1860363 m -84.4770043,5.29166 H 4.1860363" />
      <path
-       id="path2172-5"
-       style="fill:none;stroke:#000000;stroke-width:0.0264583px"
-       d="M -37.002571,50.036548 V 233.99032 M -31.710922,50.036548 V 233.99032 m 5.29163,-183.953772 V 233.99032 M -21.127639,50.036548 V 233.99032 m 5.29167,-183.953772 V 233.99032 m 5.29166,-183.953772 V 233.99032 M -5.2526417,50.036548 V 233.99032 M 0.03901526,50.036548 V 233.99032 M 5.3306817,50.036548 V 233.99032 M 10.622349,50.036548 V 233.99032 M 15.914009,50.036548 V 233.99032 M 21.205679,50.036548 V 233.99032 M 26.497349,50.036548 V 233.99032 M 31.789009,50.036548 V 233.99032 M 37.08068,50.036548 V 233.99032 M 42.37235,50.036548 V 233.99032 M 47.66401,50.036548 V 233.99032 M 52.95568,50.036548 V 233.99032 M 58.247344,50.036548 V 233.99032 M 63.539013,50.036548 V 233.99032 M 68.830683,50.036548 V 233.99032 M 74.122348,50.036548 V 233.99032 M 79.414019,50.036548 V 233.99032 M -37.002571,50.036548 H 83.15951 M -37.002571,55.328215 H 83.15951 M -37.002571,60.619881 H 83.15951 M -37.002571,65.911548 H 83.15951 M -37.002571,71.203214 H 83.15951 M -37.002571,76.494881 H 83.15951 M -37.002571,81.786548 H 83.15951 M -37.002571,87.078215 H 83.15951 M -37.002571,92.369881 H 83.15951 M -37.002571,97.661546 H 83.15951 M -37.002571,102.95322 H 83.15951 m -120.162081,5.29166 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29166 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29166 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29166 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29166 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29166 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29166 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29166 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29167 H 83.15951 m -120.162081,5.29166 H 83.15951 m -120.162081,5.29167 H 83.15951" />
+         id="path2315"
+         style="fill:none;stroke:#000000;stroke-width:0.026;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.49803922"
+         d="M -182.44054,53.5214 V 220.21839 M -177.14887,53.5214 V 220.21839 M -171.8572,53.5214 v 166.69699 m 5.29166,-166.69699 v 166.69699 m 5.29167,-166.69699 v 166.69699 m 5.29166,-166.69699 v 166.69699 m 5.29167,-166.69699 v 166.69699 m 5.29167,-166.69699 v 166.69699 m 5.29166,-166.69699 v 166.69699 m 5.29167,-166.69699 v 166.69699 m 5.29167,-166.69699 v 166.69699 m 5.29166,-166.69699 v 166.69699 m 5.29167,-166.69699 v 166.69699 m 5.29167,-166.69699 v 166.69699 m 5.29166,-166.69699 v 166.69699 m 5.29167,-166.69699 v 166.69699 m -79.375,-166.69699 h 84.476996 m -84.476996,5.291666 h 84.476996 m -84.476996,5.291666 h 84.476996 m -84.476996,5.291667 h 84.476996 m -84.476996,5.291666 h 84.476996 m -84.476996,5.291666 h 84.476996 m -84.476996,5.291667 h 84.476996 m -84.476996,5.291666 h 84.476996 m -84.476996,5.291667 h 84.476996 m -84.476996,5.291669 h 84.476996 m -84.476996,5.29166 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29166 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29166 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29166 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29166 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29166 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29166 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29166 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29167 h 84.476996 m -84.476996,5.29166 h 84.476996" />
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.23333311px;line-height:1.25;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
         x="-179.95392"
         y="58.437435"
         id="text817"><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="58.437435"
           x="-179.95392"
-         id="tspan1920"><tspan
-   id="tspan1982"
-   style="fill:#669900">#include </tspan>&lt;<tspan
-   id="tspan1984"
-   style="font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:'monospace Italic'">ESP8266WiFi.h</tspan>&gt;</tspan><tspan
+           id="tspan2030"><tspan
+   id="tspan2338"
+   style="fill:#669900">#include</tspan> &lt;<tspan
+   id="tspan2332"
+   style="font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:'monospace Italic'">ESP8266WiFi</tspan>.h&gt;</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="63.729103"
           x="-179.95392"
-         id="tspan1922"><tspan
-   id="tspan1986"
-   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:monospace;fill:#669900">#include</tspan> &lt;<tspan
-   id="tspan1988"
-   style="font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:'monospace Italic'">ESP8266WebServer.h</tspan>&gt;</tspan><tspan
+           id="tspan2032"><tspan
+   id="tspan2336"
+   style="fill:#669900">#include</tspan> &lt;<tspan
+   id="tspan2334"
+   style="font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:monospace;-inkscape-font-specification:'monospace Italic'">ESP8266WebServer</tspan>.h&gt;</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="69.020767"
           x="-179.95392"
-         id="tspan1924"></tspan><tspan
+           id="tspan2034" /><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="74.312431"
           x="-179.95392"
-         id="tspan1926"></tspan><tspan
+           id="tspan2036" /><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="79.604103"
           x="-179.95392"
-         id="tspan1928"><tspan
-   id="tspan2058"
+           id="tspan2038"><tspan
+   id="tspan2340"
   style="fill:#ff6600">ESP8266WebServer</tspan> Server;</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="84.895767"
           x="-179.95392"
-         id="tspan1930"></tspan><tspan
+           id="tspan2040" /><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="90.187431"
           x="-179.95392"
-         id="tspan1932"></tspan><tspan
+           id="tspan2042" /><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="95.479103"
           x="-179.95392"
-         id="tspan1934"><tspan
-   id="tspan1992"
+           id="tspan2044"><tspan
+   id="tspan2344"
   style="fill:#3366cc">void</tspan> rootPage() {</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="100.77077"
           x="-179.95392"
-         id="tspan1936">  <tspan
-   id="tspan1994"
+           id="tspan2046">  <tspan
+   id="tspan2350"
   style="fill:#3366cc">char</tspan> content[] = <tspan
-   id="tspan1996"
+   id="tspan2346"
   style="fill:#003399">&quot;Hello, world&quot;</tspan>;</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="106.06243"
           x="-179.95392"
-         id="tspan1938">  Server.<tspan
-   id="tspan1998"
+           id="tspan2048">  Server.<tspan
+   id="tspan2352"
   style="fill:#ff6600">send</tspan>(200, <tspan
-   id="tspan2000"
+   id="tspan2348"
   style="fill:#003399">&quot;text/plain&quot;</tspan>, content);</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="111.3541"
           x="-179.95392"
-         id="tspan1940">}</tspan><tspan
+           id="tspan2050">}</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="116.64577"
           x="-179.95392"
-         id="tspan1942"></tspan><tspan
+           id="tspan2052" /><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="121.93743"
           x="-179.95392"
-         id="tspan1944"><tspan
-   id="tspan2002"
+           id="tspan2054"><tspan
+   id="tspan2354"
   style="fill:#3366cc">void</tspan> <tspan
-   id="tspan2004"
+   id="tspan2356"
   style="fill:#808080">setup</tspan>() {</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="127.2291"
           x="-179.95392"
-         id="tspan1946">  <tspan
-   id="tspan2010"
+           id="tspan2056">  <tspan
+   id="tspan2358"
   style="fill:#ff6600">delay</tspan>(1000);</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="132.52077"
           x="-179.95392"
-         id="tspan1948">  <tspan
-   id="tspan2012"
+           id="tspan2058">  <tspan
+   id="tspan2360"
   style="fill:#ff6600">Serial</tspan>.<tspan
-   id="tspan2014"
+   id="tspan2362"
   style="fill:#ff6600">begin</tspan>(115200);</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="137.81242"
           x="-179.95392"
-         id="tspan1950">  <tspan
-   id="tspan2018"
+           id="tspan2060">  <tspan
+   id="tspan2366"
   style="fill:#ff6600">Serial</tspan>.<tspan
-   id="tspan2016"
+   id="tspan2364"
   style="fill:#ff6600">println</tspan>();</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="143.1041"
           x="-179.95392"
-         id="tspan1952"></tspan><tspan
+           id="tspan2062" /><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="148.39577"
           x="-179.95392"
-         id="tspan1954">  <tspan
-   id="tspan2020"
+           id="tspan2064">  <tspan
+   id="tspan2368"
   style="fill:#ff6600">WiFi</tspan>.<tspan
-   id="tspan2022"
+   id="tspan2370"
   style="fill:#ff6600">begin</tspan>(<tspan
-   id="tspan2024"
+   id="tspan2372"
   style="fill:#003399">&quot;ssid&quot;</tspan>, <tspan
-   id="tspan2026"
+   id="tspan2374"
   style="fill:#003399">&quot;pass&quot;</tspan>);</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="153.68742"
           x="-179.95392"
-         id="tspan1956">  <tspan
-   id="tspan2028"
+           id="tspan2066">  <tspan
+   id="tspan2378"
   style="fill:#808080">while</tspan> (<tspan
-   id="tspan2030"
-   style="fill:#ff6600">WiFi</tspan>.<tspan
-   id="tspan2032"
-   style="fill:#ff6600">status</tspan>() != WL_CONNECTED) {</tspan><tspan
+   id="tspan2376"
+   style="fill:#ff6600">WiFi</tspan>.status() != WL_CONNECTED) {</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="158.9791"
           x="-179.95392"
-         id="tspan1958">    <tspan
-   id="tspan2034"
+           id="tspan2068">    <tspan
+   id="tspan2380"
   style="fill:#ff6600">delay</tspan>(100);</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="164.27077"
           x="-179.95392"
-         id="tspan1960">  }</tspan><tspan
+           id="tspan2070">  }</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="169.56242"
           x="-179.95392"
-         id="tspan1962"></tspan><tspan
+           id="tspan2072" /><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="174.8541"
           x="-179.95392"
-         id="tspan1964">  Server.<tspan
-   id="tspan2036"
+           id="tspan2074">  Server.<tspan
+   id="tspan2382"
   style="fill:#ff6600">on</tspan>(<tspan
-   id="tspan2038"
+   id="tspan2384"
   style="fill:#003399">&quot;/&quot;</tspan>, rootPage);</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="180.14577"
           x="-179.95392"
-         id="tspan1966">  Server.<tspan
-   id="tspan2040"
+           id="tspan2076">  Server.<tspan
+   id="tspan2386"
   style="fill:#ff6600">begin</tspan>();</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="185.43742"
           x="-179.95392"
-         id="tspan1968">  <tspan
-   id="tspan2042"
+           id="tspan2078">  <tspan
+   id="tspan2388"
   style="fill:#ff6600">Serial</tspan>.<tspan
-   id="tspan2044"
+   id="tspan2390"
   style="fill:#ff6600">println</tspan>(<tspan
-   id="tspan2046"
-   style="fill:#003399">&quot;WiFi connected: &quot;</tspan> +</tspan><tspan
+   id="tspan2392"
+   style="fill:#003399">&quot;Web server started:&quot;</tspan> +</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="190.7291"
           x="-179.95392"
-         id="tspan1970">                 <tspan
-   id="tspan2048"
-   style="fill:#ff6600">WiFi</tspan>.<tspan
-   id="tspan2050"
-   style="fill:#ff6600">localIP</tspan>().toString());</tspan><tspan
+           id="tspan2080">              <tspan
+   id="tspan2394"
+   style="fill:#ff6600">WiFi</tspan>.localIP().toString());</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="196.02077"
           x="-179.95392"
-         id="tspan1972">}</tspan><tspan
+           id="tspan2082">}</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="201.31242"
           x="-179.95392"
-         id="tspan1974"></tspan><tspan
+           id="tspan2084" /><tspan
+           style="font-size:3.17499995px;line-height:0"
           y="206.6041"
           x="-179.95392"
-         id="tspan1976"><tspan
-           id="tspan2054"
-           style="fill:#3366cc"></tspan></tspan><tspan
-         id="tspan2154"
-         y="211.89577"
-         x="-179.95392"><tspan
-           id="tspan2156"
-           style="fill:#3366cc"></tspan></tspan><tspan
-         id="tspan2159"
-         y="217.18742"
-         x="-179.95392"><tspan
-   id="tspan2161"
+           id="tspan2090"><tspan
+   id="tspan2434"
   style="fill:#3366cc">void</tspan> <tspan
-   id="tspan2056"
+   id="tspan2436"
   style="fill:#808080">loop</tspan>() {</tspan><tspan
-         y="222.4791"
+           style="font-size:3.17499995px;line-height:0"
+           y="211.89577"
           x="-179.95392"
-         id="tspan1978">  Server.<tspan
-   id="tspan2052"
+           id="tspan2092">  Server.<tspan
+   id="tspan2438"
   style="fill:#ff6600">handleClient</tspan>();</tspan><tspan
-         y="227.77075"
+           style="font-size:3.17499995px;line-height:0"
+           y="217.18742"
           x="-179.95392"
-         id="tspan1980">}</tspan></text>
+           id="tspan2094">}</tspan></text>
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.23333311px;line-height:1.25;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
-       x="-31.92449"
-       y="58.966602"
+         x="-77.797623"
+         y="58.444054"
         id="text817-4"><tspan
-         y="58.966602"
-         x="-31.92449"
-         id="tspan2088"><tspan
-   id="tspan2191"
-   style="fill:#669900">#include </tspan>&lt;<tspan
-   id="tspan2199"
-   style="-inkscape-font-specification:'monospace Italic';font-family:monospace;font-weight:normal;font-style:italic;font-stretch:normal;font-variant:normal">ESP8266WiFi.h</tspan>&gt;</tspan><tspan
-         y="64.25827"
-         x="-31.92449"
-         id="tspan2090"><tspan
-   id="tspan2193"
-   style="fill:#669900">#include</tspan> &lt;<tspan
-   id="tspan2205"
-   style="-inkscape-font-specification:'monospace Italic';font-family:monospace;font-weight:normal;font-style:italic;font-stretch:normal;font-variant:normal">ESP8266WebServer.h</tspan>&gt;</tspan><tspan
-         y="69.549934"
-         x="-31.92449"
-         id="tspan2092"><tspan
-   id="tspan2195"
-   style="fill:#669900">#include</tspan> &lt;<tspan
-   id="tspan2207"
-   style="-inkscape-font-specification:'monospace Italic';font-family:monospace;font-weight:normal;font-style:italic;font-stretch:normal;font-variant:normal">AutoConnect.h</tspan>&gt;</tspan><tspan
-         y="74.841599"
-         x="-31.92449"
-         id="tspan2094"></tspan><tspan
-         y="80.13327"
-         x="-31.92449"
-         id="tspan2096"><tspan
-   id="tspan2209"
+           style="font-size:3.17499995px;line-height:0"
+           y="58.444054"
+           x="-77.797623"
+           id="tspan1964"><tspan
+   id="tspan2440"
+   style="fill:#669900">#include</tspan> &lt;ESP8266WiFi.h&gt;</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="63.735722"
+           x="-77.797623"
+           id="tspan1966"><tspan
+   id="tspan2442"
+   style="fill:#669900">#include</tspan> &lt;ESP8266WebServer.h&gt;</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="69.02739"
+           x="-77.797623"
+           id="tspan1968"><tspan
+   id="tspan2444"
+   style="fill:#669900">#include</tspan> &lt;AutoConnect.h&gt;</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="74.319054"
+           x="-77.797623"
+           id="tspan1970" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="79.610718"
+           x="-77.797623"
+           id="tspan1972"><tspan
+   id="tspan2446"
   style="fill:#ff6600">ESP8266WebServer</tspan> Server;</tspan><tspan
-         y="85.424934"
-         x="-31.92449"
-         id="tspan2098"><tspan
-   id="tspan2211"
+           style="font-size:3.17499995px;line-height:0"
+           y="84.902382"
+           x="-77.797623"
+           id="tspan1974"><tspan
+   id="tspan2448"
   style="fill:#ff6600">AutoConnect</tspan>      Portal(Server);</tspan><tspan
-         y="90.716599"
-         x="-31.92449"
-         id="tspan2100"></tspan><tspan
-         y="96.00827"
-         x="-31.92449"
-         id="tspan2102"><tspan
-   id="tspan2213"
-   style="fill:#808080">void</tspan> rootPage() {</tspan><tspan
-         y="101.29993"
-         x="-31.92449"
-         id="tspan2104">  <tspan
-   id="tspan2215"
+           style="font-size:3.17499995px;line-height:0"
+           y="90.194054"
+           x="-77.797623"
+           id="tspan1976" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="95.485718"
+           x="-77.797623"
+           id="tspan1978"><tspan
+   id="tspan2450"
+   style="fill:#3366cc">void</tspan> rootPage() {</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="100.77738"
+           x="-77.797623"
+           id="tspan1980">  <tspan
+   id="tspan2452"
   style="fill:#3366cc">char</tspan> content[] = <tspan
-   id="tspan2219"
+   id="tspan2456"
   style="fill:#003399">&quot;Hello, world&quot;</tspan>;</tspan><tspan
-         y="106.5916"
-         x="-31.92449"
-         id="tspan2106">  Server.<tspan
-   id="tspan2217"
+           style="font-size:3.17499995px;line-height:0"
+           y="106.06905"
+           x="-77.797623"
+           id="tspan1982">  Server.<tspan
+   id="tspan2454"
   style="fill:#ff6600">send</tspan>(200, <tspan
-   id="tspan2221"
+   id="tspan2458"
   style="fill:#003399">&quot;text/plain&quot;</tspan>, content);</tspan><tspan
-         y="111.88326"
-         x="-31.92449"
-         id="tspan2108">}</tspan><tspan
-         y="117.17493"
-         x="-31.92449"
-         id="tspan2110"></tspan><tspan
-         y="122.4666"
-         x="-31.92449"
-         id="tspan2112"><tspan
-   id="tspan2223"
+           style="font-size:3.17499995px;line-height:0"
+           y="111.36072"
+           x="-77.797623"
+           id="tspan1984">}</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="116.65238"
+           x="-77.797623"
+           id="tspan1986" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="121.94405"
+           x="-77.797623"
+           id="tspan1988"><tspan
+   id="tspan2414"
   style="fill:#3366cc">void</tspan> <tspan
-   id="tspan2227"
+   id="tspan2416"
   style="fill:#808080">setup</tspan>() {</tspan><tspan
-         y="127.75826"
-         x="-31.92449"
-         id="tspan2114">  <tspan
-   id="tspan2229"
+           style="font-size:3.17499995px;line-height:0"
+           y="127.23572"
+           x="-77.797623"
+           id="tspan1990">  <tspan
+   id="tspan2418"
   style="fill:#ff6600">delay</tspan>(1000);</tspan><tspan
-         y="133.04993"
-         x="-31.92449"
-         id="tspan2116">  <tspan
-   id="tspan2231"
+           style="font-size:3.17499995px;line-height:0"
+           y="132.52739"
+           x="-77.797623"
+           id="tspan1992">  <tspan
+   id="tspan2420"
   style="fill:#ff6600">Serial</tspan>.<tspan
-   id="tspan2233"
+   id="tspan2424"
   style="fill:#ff6600">begin</tspan>(115200);</tspan><tspan
-         y="138.3416"
-         x="-31.92449"
-         id="tspan2118">  <tspan
-   id="tspan2235"
+           style="font-size:3.17499995px;line-height:0"
+           y="137.81905"
+           x="-77.797623"
+           id="tspan1994">  <tspan
+   id="tspan2422"
   style="fill:#ff6600">Serial</tspan>.<tspan
-   id="tspan2237"
+   id="tspan2426"
   style="fill:#ff6600">println</tspan>();</tspan><tspan
-         y="143.63327"
-         x="-31.92449"
-         id="tspan2120"></tspan><tspan
-         y="148.92493"
-         x="-31.92449"
-         id="tspan2122"></tspan><tspan
-         y="154.2166"
-         x="-31.92449"
-         id="tspan2124"></tspan><tspan
-         y="159.50827"
-         x="-31.92449"
-         id="tspan2126"></tspan><tspan
-         y="164.79993"
-         x="-31.92449"
-         id="tspan2128"></tspan><tspan
-         y="170.0916"
-         x="-31.92449"
-         id="tspan2130"></tspan><tspan
-         y="175.38327"
-         x="-31.92449"
-         id="tspan2132">  Server.<tspan
-   id="tspan2239"
+           style="font-size:3.17499995px;line-height:0"
+           y="143.11072"
+           x="-77.797623"
+           id="tspan1996" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="148.40239"
+           x="-77.797623"
+           id="tspan1998" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="153.69405"
+           x="-77.797623"
+           id="tspan2000" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="158.98572"
+           x="-77.797623"
+           id="tspan2002" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="164.27737"
+           x="-77.797623"
+           id="tspan2004" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="169.56905"
+           x="-77.797623"
+           id="tspan2006" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="174.86072"
+           x="-77.797623"
+           id="tspan2008">  Server.<tspan
+   id="tspan2406"
   style="fill:#ff6600">on</tspan>(<tspan
-   id="tspan2241"
+   id="tspan2408"
   style="fill:#003399">&quot;/&quot;</tspan>, rootPage);</tspan><tspan
-         y="180.67493"
-         x="-31.92449"
-         id="tspan2134">  <tspan
-   id="tspan2257"
-   style="fill:#3366cc">boolean</tspan> r = Portal.<tspan
-   id="tspan2243"
+           style="font-size:3.17499995px;line-height:0"
+           y="180.15237"
+           x="-77.797623"
+           id="tspan2010">  Portal.<tspan
+   id="tspan2410"
   style="fill:#ff6600">begin</tspan>();</tspan><tspan
-         y="185.9666"
-         x="-31.92449"
-         id="tspan2136">  <tspan
-   id="tspan2245"
-   style="fill:#808080">if</tspan> (r) {</tspan><tspan
-         y="191.25826"
-         x="-31.92449"
-         id="tspan2138">    <tspan
-   id="tspan2247"
+           style="font-size:3.17499995px;line-height:0"
+           y="185.44405"
+           x="-77.797623"
+           id="tspan2014">  <tspan
+   id="tspan2400"
   style="fill:#ff6600">Serial</tspan>.<tspan
-   id="tspan2249"
+   id="tspan2398"
   style="fill:#ff6600">println</tspan>(<tspan
-   id="tspan2251"
-   style="fill:#003399">&quot;WiFi connected: &quot;</tspan> +</tspan><tspan
-         y="196.54993"
-         x="-31.92449"
-         id="tspan2140">                 <tspan
-   id="tspan2253"
-   style="fill:#ff6600">WiFi</tspan>.<tspan
-   id="tspan2255"
-   style="fill:#ff6600">localIP</tspan>().toString());</tspan><tspan
-         y="201.8416"
-         x="-31.92449"
-         id="tspan2142">  }</tspan><tspan
-         y="207.13326"
-         x="-31.92449"
-         id="tspan2144">}</tspan><tspan
-         y="212.42493"
-         x="-31.92449"
-         id="tspan2146"></tspan><tspan
-         y="217.7166"
-         x="-31.92449"
-         id="tspan2148"><tspan
-   id="tspan2259"
+   id="tspan2396"
+   style="fill:#003399">&quot;Web server started:&quot;</tspan> + </tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="190.73572"
+           x="-77.797623"
+           id="tspan2018">               <tspan
+   id="tspan2412"
+   style="fill:#ff6600">WiFi</tspan>.localIP().toString());</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="196.02737"
+           x="-77.797623"
+           id="tspan2020">}</tspan><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="201.31905"
+           x="-77.797623"
+           id="tspan2022" /><tspan
+           style="font-size:3.17499995px;line-height:0"
+           y="206.61072"
+           x="-77.797623"
+           id="tspan2024"><tspan
+   id="tspan2428"
   style="fill:#3366cc">void</tspan> <tspan
-   id="tspan2261"
+   id="tspan2430"
   style="fill:#808080">loop</tspan>() {</tspan><tspan
-         y="223.00826"
-         x="-31.92449"
-         id="tspan2150">  Portal.<tspan
-   id="tspan2263"
+           style="font-size:3.17499995px;line-height:0"
+           y="211.90237"
+           x="-77.797623"
+           id="tspan2026">  Portal.<tspan
+   id="tspan2432"
   style="fill:#ff6600">handleClient</tspan>();</tspan><tspan
-         y="228.29993"
-         x="-31.92449"
-         id="tspan2152">}</tspan></text>
+           style="font-size:3.17499995px;line-height:0"
+           y="217.19405"
+           x="-77.797623"
+           id="tspan2028">}</tspan></text>
      <text
         xml:space="preserve"
         style="font-style:normal;font-weight:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
-       x="-136.61319"
-       y="47.824837"
+         x="-145.07974"
+         y="50.99984"
         id="text8720"><tspan
           id="tspan8718"
-         x="-136.61319"
-         y="47.824837"
-         style="font-size:6.3499999px;stroke-width:0.26458332">Before</tspan></text>
+           x="-145.07974"
+           y="50.99984"
+           style="font-size:4.93888903px;stroke-width:0.26458332">Before</tspan></text>
      <text
         xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#cc0000;fill-opacity:0.5884476;stroke:none;stroke-width:0.26458332"
-       x="-65.795631"
-       y="69.901192"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#003399;fill-opacity:0.5884476;stroke:none;stroke-width:0.26458332;"
+         x="-104.55894"
+         y="69.372025"
         id="text4947"><tspan
           id="tspan4945"
-         x="-65.795631"
-         y="69.901192"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#cc0000;fill-opacity:0.5884476;stroke-width:0.26458332">Insert</tspan></text>
+           x="-104.55894"
+           y="69.372025"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#003399;fill-opacity:0.5884476;stroke-width:0.26458332;">Insert</tspan></text>
      <text
         xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#cc0000;fill-opacity:0.5884476;stroke:none;stroke-width:0.26458332"
-       x="-65.795631"
-       y="85.708183"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#003399;fill-opacity:0.5884476;stroke:none;stroke-width:0.26458332;"
+         x="-104.55894"
+         y="85.179016"
         id="text4947-7"><tspan
           id="tspan4945-8"
-         x="-65.795631"
-         y="85.708183"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#cc0000;fill-opacity:0.5884476;stroke-width:0.26458332">Insert</tspan></text>
+           x="-104.55894"
+           y="85.179016"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#003399;fill-opacity:0.5884476;stroke-width:0.26458332;">Insert</tspan></text>
      <path
-       style="display:inline;opacity:1;fill:#cc0000;fill-opacity:0.5884476;stroke:#000000;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
+         style="display:inline;opacity:1;fill:#003399;fill-opacity:0.5884476;stroke:#000000;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
         id="path8601"
-       d="m -36.00955,83.447853 -5.300459,3.260004 V 80.18785 Z" />
+         d="m -80.856438,83.447853 -5.300459,3.260004 V 80.18785 Z" />
      <path
-       style="display:inline;opacity:1;fill:#cc0000;fill-opacity:0.5884476;stroke:#000000;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
+         style="display:inline;opacity:1;fill:#003399;fill-opacity:0.5884476;stroke:#000000;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
         id="path8601-8"
-       d="m -36.00955,67.640873 -5.300459,3.260004 V 64.38087 Z" />
+         d="m -80.856438,67.640873 -5.300459,3.260004 V 64.38087 Z" />
      <path
-       style="display:inline;fill:none;stroke:#ff0000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2, 2;stroke-dashoffset:0;stroke-opacity:0.58823529"
-       d="M -33.718647,70.588461 H 30.67994"
+         style="display:inline;fill:none;stroke:#003399;stroke-width:0.88;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.76,0.88;stroke-dashoffset:0;stroke-opacity:0.58823529"
+         d="m -77.507201,70.059294 h 45.903536"
         id="path8701" />
      <path
-       style="display:inline;fill:none;stroke:#ff0000;stroke-width:1.15039361;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.30078721, 2.30078721;stroke-dashoffset:0;stroke-opacity:0.58823529"
-       d="M -34.077897,86.89278 H 51.1476"
+         style="display:inline;fill:none;stroke:#003399;stroke-width:0.88;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.76,0.88;stroke-dashoffset:0;stroke-opacity:0.58823529"
+         d="m -77.866451,85.834446 h 60.63188"
         id="path8701-6" />
      <text
         xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#cc0000;fill-opacity:0.58823529;stroke:none;stroke-width:0.26458332"
-       x="-63.445457"
-       y="157.57935"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#003399;fill-opacity:0.58823529;stroke:none;stroke-width:0.26458332;"
+         x="-90.962158"
+         y="156.75723"
         id="text4947-7-7"><tspan
           id="tspan4945-8-3"
-         x="-63.445457"
-         y="157.57935"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#cc0000;fill-opacity:0.58823529;stroke-width:0.26458332">Remove</tspan></text>
+           x="-90.962158"
+           y="156.75723"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#003399;fill-opacity:0.58823529;stroke-width:0.26458332;">Remove</tspan></text>
      <path
-       style="display:inline;opacity:1;fill:#cc0000;fill-opacity:0.58823529;stroke:#000000;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
+         style="display:inline;opacity:1;fill:#003399;fill-opacity:0.58823529;stroke:none;stroke-width:0.034;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
         id="path8601-2"
-       d="m -65.309973,154.97999 -5.300459,3.26001 v -6.52001 z" />
+         d="m -92.128228,154.97999 -5.300459,3.26001 v -6.52001 z" />
      <path
-       style="display:inline;fill:none;stroke:#ff0000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2, 2;stroke-dashoffset:0;stroke-opacity:0.58823529"
-       d="m -177.86664,141.31207 v 27.45676 h 104.210893 v -27.20715 z"
+         style="display:inline;fill:none;stroke:#003399;stroke-width:0.91645706;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.83291411, 1.83291411;stroke-dashoffset:0;stroke-opacity:0.58823529"
+         d="m -178.99241,143.23968 v 24.27983 h 79.594422 V 143.4604 Z"
         id="path8699" />
      <path
-       style="display:inline;fill:none;stroke:#cc0000;stroke-width:1.13;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58823529"
-       d="M -84.132747,179.15988 H -133.17417"
+         style="display:inline;opacity:1;fill:none;stroke:#003399;stroke-width:0.88;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58823529"
+         d="M -86.136974,179.15988 H -141.12544"
         id="path8682" />
      <text
         xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#cc0000;fill-opacity:0.58823529;stroke:none;stroke-width:0.26458332"
-       x="-76.145477"
-       y="180.94493"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#003399;fill-opacity:0.58823529;stroke:none;stroke-width:0.26458332;"
+         x="-108.76884"
+         y="177.24081"
         id="text4947-7-7-1"><tspan
           id="tspan4945-8-3-2"
-         x="-76.145477"
-         y="180.94493"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#cc0000;fill-opacity:0.58823529;stroke-width:0.26458332">Replace</tspan></text>
+           x="-108.76884"
+           y="177.24081"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#003399;fill-opacity:0.58823529;stroke-width:0.26458332;">Replace</tspan></text>
      <path
-       style="display:inline;opacity:1;fill:#cc0000;fill-opacity:0.58823529;stroke:#000000;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
-       id="path8601-2-1"
-       d="m -78.899053,179.17113 -5.300459,3.26001 v -6.52001 z" />
-    <path
-       style="display:inline;opacity:1;fill:#cc0000;fill-opacity:0.58823529;stroke:#000000;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
+         style="display:inline;opacity:1;fill:#003399;fill-opacity:0.58823529;stroke:none;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
         id="path8601-2-1-2"
-       d="m -30.70137,179.17113 -5.300459,3.26001 v -6.52001 z" />
-    <path
-       style="display:inline;fill:none;stroke:#cc0000;stroke-width:1.13;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58823529"
-       d="m -35.948027,179.25868 h -8.68119"
-       id="path8682-3" />
+         d="m -80.856438,179.17113 -5.300459,3.26001 v -6.52001 z" />
      <path
-       style="display:inline;fill:none;stroke:#ff0000;stroke-width:1.14999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.3, 2.3;stroke-dashoffset:0;stroke-opacity:0.58823529"
-       d="m -174.93936,181.53228 h 37.67539"
+         style="display:inline;fill:none;stroke:#003399;stroke-width:0.88;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.76,0.88;stroke-dashoffset:0;stroke-opacity:0.58823529"
+         d="m -175.9977,181.00311 h 11.62328"
         id="path8701-6-3" />
      <path
-       style="display:inline;fill:none;stroke:#ff0000;stroke-width:1.14999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.3, 2.3;stroke-dashoffset:0;stroke-opacity:0.58823529"
-       d="M -27.052337,181.53228 H 41.94874"
+         style="display:inline;fill:none;stroke:#003399;stroke-width:0.88;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.76,0.88;stroke-dashoffset:0;stroke-opacity:0.58823529"
+         d="M -74.015893,181.05546 H -62.07686"
         id="path8701-6-3-0" />
      <path
-       style="display:inline;fill:none;stroke:#cc0000;stroke-width:1.13;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58823529"
-       d="M -84.091357,221.39293 H -118.39171"
+         style="display:inline;fill:none;stroke:#003399;stroke-width:0.88;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58823529"
+         d="M -86.152364,210.80953 H -128.31409"
         id="path8682-0" />
      <text
         xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#cc0000;fill-opacity:0.58823529;stroke:none;stroke-width:0.26458332"
-       x="-76.104088"
-       y="223.17807"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;display:inline;fill:#003399;fill-opacity:0.58823529;stroke:none;stroke-width:0.26458332;"
+         x="-108.76881"
+         y="208.89076"
         id="text4947-7-7-1-1"><tspan
           id="tspan4945-8-3-2-6"
-         x="-76.104088"
-         y="223.17807"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#cc0000;fill-opacity:0.58823529;stroke-width:0.26458332">Replace</tspan></text>
-    <path
-       style="display:inline;opacity:1;fill:#cc0000;fill-opacity:0.58823529;stroke:#000000;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
-       id="path8601-2-1-1"
-       d="m -78.857653,221.40418 -5.300459,3.26001 v -6.52001 z" />
+           x="-108.76881"
+           y="208.89076"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.58611107px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#003399;fill-opacity:0.58823529;stroke-width:0.26458332;">Replace</tspan></text>
      <path
-       style="display:inline;opacity:1;fill:#cc0000;fill-opacity:0.58823529;stroke:#000000;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
+         style="display:inline;opacity:1;fill:#003399;fill-opacity:0.58823529;stroke:none;stroke-width:0.03373705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:markers stroke fill"
         id="path8601-2-1-2-6"
-       d="m -30.659979,221.40418 -5.300459,3.26001 v -6.52001 z" />
+         d="m -80.856438,210.82078 -5.300459,3.26001 v -6.52001 z" />
      <path
-       style="display:inline;fill:none;stroke:#cc0000;stroke-width:1.13000011;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58823529"
-       d="m -35.906636,221.49173 h -8.681191"
-       id="path8682-3-5" />
-    <path
-       style="display:inline;fill:none;stroke:#ff0000;stroke-width:1.14999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.3, 2.3;stroke-dashoffset:0;stroke-opacity:0.58823529"
-       d="m -174.89797,224.5564 h 15.35838"
+         style="display:inline;fill:none;stroke:#003399;stroke-width:0.88;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.76, 0.88000000000000000;stroke-dashoffset:0;stroke-opacity:0.58823529"
+         d="m -175.95631,212.87316 h 13.88168"
         id="path8701-6-3-3" />
      <text
         xml:space="preserve"
         style="font-style:normal;font-weight:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
-       x="12.34372"
-       y="47.84034"
+         x="-43.61565"
+         y="51.013618"
         id="text8720-4"><tspan
           id="tspan8718-5"
-         x="12.34372"
-         y="47.84034"
-         style="font-size:6.3499999px;stroke-width:0.26458332">After</tspan></text>
+           x="-43.61565"
+           y="51.013618"
+           style="font-size:4.93888903px;stroke-width:0.26458332">After</tspan></text>
      <path
-       style="display:inline;opacity:1;fill:none;stroke:#ff0000;stroke-width:1.14999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.3, 2.3;stroke-dashoffset:0;stroke-opacity:0.58823529"
-       d="m -27.010942,224.5564 h 15.680831"
+         style="display:inline;opacity:1;fill:none;stroke:#003399;stroke-width:0.88;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.76, 0.88000000000000000;stroke-dashoffset:0;stroke-opacity:0.58823529"
+         d="m -73.445331,212.91466 h 12.468034"
         id="path8701-6-3-0-1" />
    </g>
+  </g>
 </svg>
--- a/mkdocs/images/beforeafter.png
+++ b/mkdocs/images/beforeafter.png