feat(demo): add the FAQ link to the demo site (#302)

Author: DenverCoder1

src/demo/css/style.css

@@ -247,6 +247,12 @@ input:focus:invalid {
   margin-top: 16px;
 }
 
+.top-bottom-split {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 /* tooltips */
 .btn.tooltip {
   display: flex;
@@ -301,3 +307,31 @@ textarea#exportedPhp {
   resize: vertical;
   height: 100px;
 }
+
+/* link underline effect */
+a.underline-hover {
+  position: relative;
+  text-decoration: none;
+  color: var(--text);
+  margin-top: 2em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+}
+.underline-hover::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0;
+  height: 1px;
+  background-color: var(--blue-light);
+  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+}
+@media (hover: hover) and (pointer: fine) {
+  .underline-hover:hover::before {
+    left: 0;
+    right: auto;
+    width: 100%;
+  }
+}

src/demo/index.php

@@ -143,21 +143,34 @@ function gtag() {
             </form>
         </div>
 
-        <div class="output">
-            <h2>Preview</h2>
-            <img alt="GitHub Readme Streak Stats" src="preview.php?user=" />
-            <p class="warning">
-                Note: The stats above are just examples and not from your GitHub profile.
-            </p>
-
-            <h2>Markdown</h2>
-            <div class="md">
-                <code></code>
+        <div class="output top-bottom-split">
+            <div class="top">
+                <h2>Preview</h2>
+                <img alt="GitHub Readme Streak Stats" src="preview.php?user=" />
+                <p class="warning">
+                    Note: The stats above are just examples and not from your GitHub profile.
+                </p>
+
+                <h2>Markdown</h2>
+                <div class="md">
+                    <code></code>
+                </div>
+
+                <button class="copy-button btn tooltip" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
+                    Copy To Clipboard
+                </button>
+            </div>
+            <div class="bottom">
+                <a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">
+                    Frequently Asked Questions
+                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+                        <g>
+                            <path fill="none" d="M0 0h24v24H0z"></path>
+                            <path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v9l-3.794-3.793-5.999 6-1.414-1.414 5.999-6L12 3h9z"></path>
+                        </g>
+                    </svg>
+                </a>
             </div>
-
-            <button class="copy-button btn tooltip" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
-                Copy To Clipboard
-            </button>
         </div>
     </div>