<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content="ESP8266/ESP32 WLAN configuration at run time with web interface"> <link rel="canonical" href="https://Hieromon.github.io/AutoConnect/menu.html"> <meta name="author" content="Hieromon Ikasamo"> <meta name="lang:clipboard.copy" content="Copy to clipboard"> <meta name="lang:clipboard.copied" content="Copied to clipboard"> <meta name="lang:search.language" content="en"> <meta name="lang:search.pipeline.stopwords" content="True"> <meta name="lang:search.pipeline.trimmer" content="True"> <meta name="lang:search.result.none" content="No matching documents"> <meta name="lang:search.result.one" content="1 matching document"> <meta name="lang:search.result.other" content="# matching documents"> <meta name="lang:search.tokenizer" content="[\s\-]+"> <link rel="shortcut icon" href="assets/images/favicon.png"> <meta name="generator" content="mkdocs-1.0.4, mkdocs-material-3.3.0"> <title>AutoConnect menu - AutoConnect for ESP8266/ESP32</title> <link rel="stylesheet" href="assets/stylesheets/application.572ca0f0.css"> <link rel="stylesheet" href="assets/stylesheets/application-palette.22915126.css"> <meta name="theme-color" content="#3f51b5"> <script src="assets/javascripts/modernizr.962652e9.js"></script> <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono"> <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style> <link rel="stylesheet" href="assets/fonts/material-icons.css"> <link rel="stylesheet" href="css/paragraph.css"> <link rel="stylesheet" href="css/extra.css"> <script async src="https://www.googletagmanager.com/gtag/js?id=None"></script> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","None")</script> </head> <body dir="ltr" data-md-color-primary="indigo" data-md-color-accent="indigo"> <svg class="md-svg"> <defs> <svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448" id="__github"> <path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75 19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360 304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25 2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75 1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75 0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5 46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z" /> </svg> </defs> </svg> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> <label class="md-overlay" data-md-component="overlay" for="__drawer"></label> <a href="#where-the-from" tabindex="1" class="md-skip"> Skip to content </a> <header class="md-header" data-md-component="header"> <nav class="md-header-nav md-grid"> <div class="md-flex"> <div class="md-flex__cell md-flex__cell--shrink"> <a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-header-nav__button md-logo"> <img src="images/arduino-logo.svg" width="24" height="24"> </a> </div> <div class="md-flex__cell md-flex__cell--shrink"> <label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label> </div> <div class="md-flex__cell md-flex__cell--stretch"> <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title"> <span class="md-header-nav__topic"> AutoConnect for ESP8266/ESP32 </span> <span class="md-header-nav__topic"> AutoConnect menu </span> </div> </div> <div class="md-flex__cell md-flex__cell--shrink"> <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label> <div class="md-search" data-md-component="search" role="dialog"> <label class="md-search__overlay" for="__search"></label> <div class="md-search__inner" role="search"> <form class="md-search__form" name="search"> <input type="text" class="md-search__input" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active"> <label class="md-icon md-search__icon" for="__search"></label> <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">  </button> </form> <div class="md-search__output"> <div class="md-search__scrollwrap" data-md-scrollfix> <div class="md-search-result" data-md-component="result"> <div class="md-search-result__meta"> Type to start searching </div> <ol class="md-search-result__list"></ol> </div> </div> </div> </div> </div> </div> <div class="md-flex__cell md-flex__cell--shrink"> <div class="md-header-nav__source"> <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github"> <div class="md-source__icon"> <svg viewBox="0 0 24 24" width="24" height="24"> <use xlink:href="#__github" width="24" height="24"></use> </svg> </div> <div class="md-source__repository"> Hieromon/AutoConnect </div> </a> </div> </div> </div> </nav> </header> <div class="md-container"> <nav class="md-tabs" data-md-component="tabs"> <div class="md-tabs__inner md-grid"> <ul class="md-tabs__list"> <li class="md-tabs__item"> <a href="index.html" title="Overview" class="md-tabs__link md-tabs__link--active"> Overview </a> </li> <li class="md-tabs__item"> <a href="acintro.html" title="Custom Web pages" class="md-tabs__link"> Custom Web pages </a> </li> <li class="md-tabs__item"> <a href="api.html" title="Library APIs" class="md-tabs__link"> Library APIs </a> </li> <li class="md-tabs__item"> <a href="howtoembed.html" title="Examples" class="md-tabs__link"> Examples </a> </li> </ul> </div> </nav> <main class="md-main"> <div class="md-main__inner md-grid" data-md-component="container"> <div class="md-sidebar md-sidebar--primary" data-md-component="navigation"> <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--primary" data-md-level="0"> <label class="md-nav__title md-nav__title--site" for="__drawer"> <a href="https://Hieromon.github.io/AutoConnect/" title="AutoConnect for ESP8266/ESP32" class="md-nav__button md-logo"> <img src="images/arduino-logo.svg" width="48" height="48"> </a> AutoConnect for ESP8266/ESP32 </label> <div class="md-nav__source"> <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-source="github"> <div class="md-source__icon"> <svg viewBox="0 0 24 24" width="24" height="24"> <use xlink:href="#__github" width="24" height="24"></use> </svg> </div> <div class="md-source__repository"> Hieromon/AutoConnect </div> </a> </div> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="index.html" title="Overview" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="gettingstarted.html" title="Getting started" class="md-nav__link"> Getting started </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc"> <label class="md-nav__link md-nav__link--active" for="__toc"> AutoConnect menu </label> <a href="menu.html" title="AutoConnect menu" class="md-nav__link md-nav__link--active"> AutoConnect menu </a> <nav class="md-nav md-nav--secondary"> <label class="md-nav__title" for="__toc">Table of contents</label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="#where-the-from" title=" Where the from" class="md-nav__link"> Where the from </a> </li> <li class="md-nav__item"> <a href="#right-on-top" title=" Right on top" class="md-nav__link"> Right on top </a> </li> <li class="md-nav__item"> <a href="#configure-new-ap" title=" Configure new AP" class="md-nav__link"> Configure new AP </a> </li> <li class="md-nav__item"> <a href="#open-ssids" title=" Open SSIDs" class="md-nav__link"> Open SSIDs </a> </li> <li class="md-nav__item"> <a href="#disconnect" title=" Disconnect" class="md-nav__link"> Disconnect </a> </li> <li class="md-nav__item"> <a href="#reset" title=" Reset..." class="md-nav__link"> Reset... </a> </li> <li class="md-nav__item"> <a href="#custom-menu-items" title=" Custom menu items" class="md-nav__link"> Custom menu items </a> </li> <li class="md-nav__item"> <a href="#home" title=" HOME" class="md-nav__link"> HOME </a> </li> <li class="md-nav__item"> <a href="#extend-autoconnect-menu-with-your-sketches" title=" Extend AutoConnect menu with your sketches" class="md-nav__link"> Extend AutoConnect menu with your sketches </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="basicusage.html" title="Basic usage" class="md-nav__link"> Basic usage </a> </li> <li class="md-nav__item"> <a href="advancedusage.html" title="Advanced usage" class="md-nav__link"> Advanced usage </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6"> <label class="md-nav__link" for="nav-6"> Custom Web pages </label> <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> <label class="md-nav__title" for="nav-6"> Custom Web pages </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="acintro.html" title="Custom Web pages with AutoConnect" class="md-nav__link"> Custom Web pages with AutoConnect </a> </li> <li class="md-nav__item"> <a href="acelements.html" title="AutoConnectElements" class="md-nav__link"> AutoConnectElements </a> </li> <li class="md-nav__item"> <a href="acjson.html" title="Custom Web pages with JSON" class="md-nav__link"> Custom Web pages with JSON </a> </li> <li class="md-nav__item"> <a href="achandling.html" title="Handling the custom Web pages" class="md-nav__link"> Handling the custom Web pages </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7"> <label class="md-nav__link" for="nav-7"> Library APIs </label> <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> <label class="md-nav__title" for="nav-7"> Library APIs </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="api.html" title="AutoConnect API" class="md-nav__link"> AutoConnect API </a> </li> <li class="md-nav__item"> <a href="apiaux.html" title="AutoConnectAux API" class="md-nav__link"> AutoConnectAux API </a> </li> <li class="md-nav__item"> <a href="apiconfig.html" title="AutoConnectConfig API" class="md-nav__link"> AutoConnectConfig API </a> </li> <li class="md-nav__item"> <a href="apielements.html" title="AutoConnectElements API" class="md-nav__link"> AutoConnectElements API </a> </li> <li class="md-nav__item"> <a href="apiextra.html" title="Something extra" class="md-nav__link"> Something extra </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8"> <label class="md-nav__link" for="nav-8"> Examples </label> <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> <label class="md-nav__title" for="nav-8"> Examples </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="howtoembed.html" title="How to embed" class="md-nav__link"> How to embed </a> </li> <li class="md-nav__item"> <a href="datatips.md" title="Tips for data retrieval" class="md-nav__link"> Tips for data retrieval </a> </li> <li class="md-nav__item"> <a href="menuize.html" title="Constucting menu" class="md-nav__link"> Constucting menu </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="faq.html" title="FAQ" class="md-nav__link"> FAQ </a> </li> <li class="md-nav__item"> <a href="changelog.html" title="Change log" class="md-nav__link"> Change log </a> </li> <li class="md-nav__item"> <a href="license.html" title="License" class="md-nav__link"> License </a> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component="toc"> <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--secondary"> <label class="md-nav__title" for="__toc">Table of contents</label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="#where-the-from" title=" Where the from" class="md-nav__link"> Where the from </a> </li> <li class="md-nav__item"> <a href="#right-on-top" title=" Right on top" class="md-nav__link"> Right on top </a> </li> <li class="md-nav__item"> <a href="#configure-new-ap" title=" Configure new AP" class="md-nav__link"> Configure new AP </a> </li> <li class="md-nav__item"> <a href="#open-ssids" title=" Open SSIDs" class="md-nav__link"> Open SSIDs </a> </li> <li class="md-nav__item"> <a href="#disconnect" title=" Disconnect" class="md-nav__link"> Disconnect </a> </li> <li class="md-nav__item"> <a href="#reset" title=" Reset..." class="md-nav__link"> Reset... </a> </li> <li class="md-nav__item"> <a href="#custom-menu-items" title=" Custom menu items" class="md-nav__link"> Custom menu items </a> </li> <li class="md-nav__item"> <a href="#home" title=" HOME" class="md-nav__link"> HOME </a> </li> <li class="md-nav__item"> <a href="#extend-autoconnect-menu-with-your-sketches" title=" Extend AutoConnect menu with your sketches" class="md-nav__link"> Extend AutoConnect menu with your sketches </a> </li> </ul> </nav> </div> </div> </div> <div class="md-content"> <article class="md-content__inner md-typeset"> <h1>AutoConnect menu</h1> <div class="admonition info"> <p class="admonition-title">Luxbar</p> <p>The AutoConnect menu is developed using the <a href="https://github.com/balzss/luxbar">LuxBar</a> which is licensed under the MIT License. See the <a href="license.html">License</a>.</p> </div> <h2 id="where-the-from"><i class="fa fa-external-link"></i> Where the from<a class="headerlink" href="#where-the-from" title="Permanent link">¶</a></h2> <p>The AutoConnect menu appears when you access the <strong>AutoConnect root path</strong>. It is assigned "<strong>/_ac</strong>" located on the <em>local IP address</em> of ESP8266/ESP32 module by default. This location can be changed in the sketch. The following screen will appear at access to <code>http://{localIP}/_ac</code> as the root path. This is the statistics of the current WiFi connection. You can access the menu from the here, to invoke it tap <i class="fa fa-bars"></i> at right on top. (e.g. <code>http://192.168.244.1/_ac</code> for SoftAP mode.)</p> <p><img src="./images/ac.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" /></p> <div class="admonition note"> <p class="admonition-title">What's the local IP?</p> <p>A local IP means Local IP at connection established or SoftAP's IP.</p> </div> <h2 id="right-on-top"><i class="fa fa-bars"></i> Right on top<a class="headerlink" href="#right-on-top" title="Permanent link">¶</a></h2> <p>Currently, AutoConnect supports four menus. Undermost menu as "HOME" returns to the home path of its sketch.</p> <ul> <li><strong>Configure new AP</strong>: Configure SSID and Password for new access point.</li> <li><strong>Open SSIDs</strong>: Opens the past SSID which has been established connection from EEPROM.</li> <li><strong>Disconnect</strong>: Disconnects current connection.</li> <li><strong>Reset...</strong>: Rest the ESP8266/ESP32 module.</li> <li><strong>HOME</strong>: Return to user home page.</li> </ul> <p><img src="./images/menu.png" style="width:280px;" /></p> <h2 id="configure-new-ap"><i class="fa fa-bars"></i> Configure new AP<a class="headerlink" href="#configure-new-ap" title="Permanent link">¶</a></h2> <p>Scan all available access point in the vicinity and display it. Strength and security of the detected AP are marked. The <i class="fa fa-lock"></i> is indicated for the SSID that needs a security key. "<strong>Hidden:</strong>" means the number of hidden SSIDs discovered.<br /> Enter SSID and Passphrase and tap "<strong>apply</strong>" to starts WiFi connection. </p> <p><img src="./images/newap.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" /></p> <h2 id="open-ssids"><i class="fa fa-bars"></i> Open SSIDs<a class="headerlink" href="#open-ssids" title="Permanent link">¶</a></h2> <p>Once it was established WiFi connection, its SSID and password will be saved in EEPROM of ESP8266/ESP32 automatically. The <strong>Open SSIDs</strong> menu reads the saved SSID credentials from the EEPROM. The stored credential data are listed by the SSID as shown below. Its label is a clickable button. Tap the SSID button, starts WiFi connection it.</p> <p><img src="./images/open.png" style="border-style:solid;border-width:1px;border-color:lightgrey;width:280px;" /></p> <h2 id="disconnect"><i class="fa fa-bars"></i> Disconnect<a class="headerlink" href="#disconnect" title="Permanent link">¶</a></h2> <p>Disconnect ESP8266/ESP32 from the current connection. It can also reset the ESP8266/ESP32 automatically after disconnection by instructing with using <a href="api.html#autoreset">API</a> in the sketch.</p> <p>After tapping "Disconnect", you will not be able to reach the AutoConnect menu. Once disconnected, you will need to set the SSID again for connecting the WLAN. </p> <h2 id="reset"><i class="fa fa-bars"></i> Reset...<a class="headerlink" href="#reset" title="Permanent link">¶</a></h2> <p>Reset the ESP8266/ESP32 module, it will start rebooting. After rebooting complete, the ESP8266/ESP32 module begins establishing the previous connection with WIFI_STA mode, and <em>esp8266ap</em> or <em>esp32ap</em> of an access point will disappear from WLAN.</p> <p><img src="./images/resetting.png" style="width:280px;" /></p> <div class="admonition warning"> <p class="admonition-title">Not every ESP8266 module will be rebooted normally</p> <p>The Reset menu is using the <strong>ESP.reset()</strong> function for ESP8266. This is an almost hardware reset. In order to resume the sketch normally, the <a href="https://github.com/esp8266/esp8266-wiki/wiki/Boot-Process#esp-boot-modes">state of GPIO0</a> is important. Since this depends on the circuit implementation for each module, not every module will be rebooted normally. See also <a href="faq.html#hang-up-after-reset">FAQ</a>.</p> </div> <h2 id="custom-menu-items"><i class="fa fa-bars"></i> Custom menu items<a class="headerlink" href="#custom-menu-items" title="Permanent link">¶</a></h2> <p>The menu items of the custom Web page line up at the below in the AutoConnect menu if the custom Web pages are joined. Details for <a href="acintro.html#custom-web-pages-in-autoconnectmenu">Custom Web pages in AutoConnect menu</a>.</p> <h2 id="home"><i class="fa fa-bars"></i> HOME<a class="headerlink" href="#home" title="Permanent link">¶</a></h2> <p>A <strong>HOME</strong> item located at the bottom of the menu list is a link to the home path. The URI as the home path is <code>/</code> by default, and it is defined by <code>AUTOCONNECT_HOMEURI</code> with <strong>AutoConnectDefs.h</strong> file.</p> <div class="codehilite" style="background: #272822"><pre style="line-height: 125%"><span></span><span style="color: #75715e">#define AUTOCONNECT_HOMEURI "/"</span> </pre></div> <p>You can change the HOME path using the AutoConnect API. The <a href="api.html#home"><strong>AutoConnect::home</strong></a> function sets the URI as a link of the HOME item of the AutoConnect menu.</p> <h2 id="extend-autoconnect-menu-with-your-sketches"><i class="fa fa-bars"></i> Extend AutoConnect menu with your sketches<a class="headerlink" href="#extend-autoconnect-menu-with-your-sketches" title="Permanent link">¶</a></h2> <p>The AutoConnect menu can contain custom items of your own sketch. It works for the custom Web pages by <a href="acintro.html">AutoConnectAux</a>, addition to the request handler for ESP8266WebServer class that is registered by the ESP8266WebServer::on function or WebServer::on for ESP32. That is, you can make it as a menu item to invoke a legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as <a href="https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser">FSBrowser</a> to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.</p> <div style="float:left;width:auto;height:420px;"><img style="width:auto;height:420px;" src="./images/fsbmenu.png"></div> <p><img style="margin-left:70px;width:auto;height:420px;" src="./images/fsbmenu_expand.png"></p> <p>The procedure to extend the AutoConnect menu is described in the <a href="advancedusage.html#cast-items-of-your-sketch-own-into-the-autoccnnect-menu">Advanced usage section</a>.</p> </article> </div> </div> </main> <footer class="md-footer"> <div class="md-footer-nav"> <nav class="md-footer-nav__inner md-grid"> <a href="gettingstarted.html" title="Getting started" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev"> <div class="md-flex__cell md-flex__cell--shrink"> <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i> </div> <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"> <span class="md-flex__ellipsis"> <span class="md-footer-nav__direction"> Previous </span> Getting started </span> </div> </a> <a href="basicusage.html" title="Basic usage" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next"> <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"> <span class="md-flex__ellipsis"> <span class="md-footer-nav__direction"> Next </span> Basic usage </span> </div> <div class="md-flex__cell md-flex__cell--shrink"> <i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i> </div> </a> </nav> </div> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-footer-copyright"> <div class="md-footer-copyright__highlight"> Copyright © 2018-2019 Hieromon Ikasamo </div> powered by <a href="https://www.mkdocs.org">MkDocs</a> and <a href="https://squidfunk.github.io/mkdocs-material/"> Material for MkDocs</a> </div> <div class="md-footer-social"> <link rel="stylesheet" href="assets/fonts/font-awesome.css"> <a href="https://github.com/Hieromon" class="md-footer-social__link fa fa-github"></a> <a href="https://twitter.com/hieromon" class="md-footer-social__link fa fa-twitter"></a> </div> </div> </div> </footer> </div> <script src="assets/javascripts/application.a353778b.js"></script> <script>app.initialize({version:"1.0.4",url:{base:"."}})</script> <script src="js/gifffer.min.js"></script> </body> </html>