feat(app/web): add index.html [skip ci]

source/app/web/statics/index.html

@@ -21,11 +21,62 @@
           <a href="https://github.com/lowlighter/metrics">Metrics {{ version }}</a>
         </header>
 
-        <main>
-          <section class="container center">
-            Hi
-          </section>
-        </main>
+        <section class="container" v-if="modes.includes('embed')">
+          <div class="search app">
+            <div class="about">
+              <h2>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.134 1.535C9.722 2.562 8.16 4.057 6.889 5.312 5.8 6.387 5.041 7.401 4.575 8.294a3.745 3.745 0 00-3.227 1.054c-.43.431-.69 1.066-.86 1.657a11.982 11.982 0 00-.358 1.914A21.263 21.263 0 000 15.203v.054l.75-.007-.007.75h.054a14.404 14.404 0 00.654-.012 21.243 21.243 0 001.63-.118c.62-.07 1.3-.18 1.914-.357.592-.17 1.226-.43 1.657-.861a3.745 3.745 0 001.055-3.217c.908-.461 1.942-1.216 3.04-2.3 1.279-1.262 2.764-2.825 3.775-4.249.501-.706.923-1.428 1.125-2.096.2-.659.235-1.469-.368-2.07-.606-.607-1.42-.55-2.069-.34-.66.213-1.376.646-2.076 1.155zm-3.95 8.48a3.76 3.76 0 00-1.19-1.192 9.758 9.758 0 011.161-1.607l1.658 1.658a9.853 9.853 0 01-1.63 1.142zM.742 16l.007-.75-.75.008A.75.75 0 00.743 16zM12.016 2.749c-1.224.89-2.605 2.189-3.822 3.384l1.718 1.718c1.21-1.205 2.51-2.597 3.387-3.833.47-.662.78-1.227.912-1.662.134-.444.032-.551.009-.575h-.001V1.78c-.014-.014-.112-.113-.548.027-.432.14-.995.462-1.655.942zM1.62 13.089a19.56 19.56 0 00-.104 1.395 19.55 19.55 0 001.396-.104 10.528 10.528 0 001.668-.309c.526-.151.856-.325 1.011-.48a2.25 2.25 0 00-3.182-3.182c-.155.155-.329.485-.48 1.01a10.515 10.515 0 00-.309 1.67z"></path></svg>
+                Create your own metrics
+              </h2>
+              <small>
+                Choose among dozens of plugins and hundreds of options to craft your own custom metrics infographics. Preview renders and auto-generate a configuration file!
+              </small>
+            </div>
+            <div class="inputs">
+              <input type="text" v-model="user2" @keyup.enter="embed">
+              <button @click="embed">
+                Let's start!
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <section class="container" v-if="modes.includes('insights')">
+          <div class="search app">
+            <div class="about">
+              <h2>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
+                Search a GitHub user
+              </h2>
+              <small>
+                Display rankings, highlights, contributions, repositories, user reactions, stars, commits history, used languages and recent activity from any user account!
+              </small>
+            </div>
+            <div class="inputs">
+              <input type="text" v-model="user1" @keyup.enter="insights">
+              <button @click="insights">
+                Search user!
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <section class="container">
+          <div class="search">
+            <div class="about">
+              <small class="warning mb1" v-if="preview">
+                Metrics insights are rendered by <a href="https://metrics.lecoq.io/">metrics.lecoq.io</a> in preview mode.<br>
+                Any backend editions won't be reflected but client-side rendering can still be tested.
+              </small>
+              <div class="warning mb1" v-if="(!requests.rest.remaining)||(!requests.graphql.remaining)">
+                This web instance has run out of GitHub API requests.
+                Please wait until {{ rlreset }} to generate metrics again.
+              </div>
+              <small :class="{'error-text':(!requests.rest.remaining)||(!requests.graphql.remaining)}">Remaining GitHub requests: {{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL</small>
+              <small>Send feedback on <a href="https://github.com/lowlighter/metrics/discussions" target="_blank">GitHub discussions</a>!</small>
+            </div>
+          </div>
+        </section>
 
         <footer>
           <a href="https://github.com/lowlighter/metrics">Repository</a>