From bae54a9df4a50fec9576895624f0f474d7816764 Mon Sep 17 00:00:00 2001
From: mo khan <mo@mokhan.ca>
Date: Mon, 28 Apr 2025 14:49:02 -0600
Subject: feat: add a header and a footer

---
 public/application.js |  2 +-
 public/index.html     | 40 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

(limited to 'public')

diff --git a/public/application.js b/public/application.js
index ba478a8..7c27a6b 100644
--- a/public/application.js
+++ b/public/application.js
@@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
     },
     computed: {
       heading: function() {
-        return this.sparkles.length == 0 ? "No Sparkles Sent" : "Recent Sparkles";
+        return this.sparkles.length == 0 ? "Nothing to see here" : "Recent";
       },
       recentSparkles: function() {
         return this.sparkles.reverse();
diff --git a/public/index.html b/public/index.html
index c918c7e..f35ab5d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,17 @@
     </header>
 
     <main id="app" class="container">
-      <h1>${ heading }</h1>
+      <div class="grid">
+        <div>&nbsp;</div>
+        <div>
+          <hgroup>
+            <h2>Share your gratitude</h2>
+            <p>Sparkle someone with praise</p>
+          </hgroup>
+        </div>
+        <div>&nbsp;</div>
+      </div>
+
       <article v-for="sparkle in recentSparkles">
         <header>
           <img :src="sparkle.author.picture" :alt="sparkle.author.username">
@@ -28,6 +38,32 @@
       </article>
     </main>
 
-    <footer></footer>
+    <footer>
+      <div class="container">
+        <div class="grid">
+          <div>
+            <p> <strong>Why?</strong> </p>
+            <small> SparkleLab is a lightweight service designed to explore modern access control models within GitLab, while doing something fun: helping GitLab team members show appreciation for each other. </small>
+          </div>
+          <aside>
+            <nav>
+              <ul>
+                <li> <strong>About</strong> </li>
+                <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled#-sparklelab" class="secondary">README</a></li>
+              </ul>
+            </nav>
+          </aside>
+          <aside>
+            <nav>
+              <ul>
+                <li><strong>Contribute</strong></li>
+                <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled" class="secondary">Code</a></li>
+                <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled/-/issues " class="secondary">Issues</a></li>
+              </ul>
+            </nav>
+          </aside>
+        </div>
+      </div>
+    </footer>
   </body>
 </html>
-- 
cgit v1.2.3