diff options
| author | mo khan <mo@mokhan.ca> | 2025-04-28 14:49:02 -0600 |
|---|---|---|
| committer | mo khan <mo@mokhan.ca> | 2025-04-28 14:49:02 -0600 |
| commit | bae54a9df4a50fec9576895624f0f474d7816764 (patch) | |
| tree | 85fe04bb14e145709040eac0a0085367db18c336 /public | |
| parent | ea886371e485885d88bac685aab276e36ffedb4f (diff) | |
feat: add a header and a footer
Diffstat (limited to 'public')
| -rw-r--r-- | public/application.js | 2 | ||||
| -rw-r--r-- | public/index.html | 40 |
2 files changed, 39 insertions, 3 deletions
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> </div> + <div> + <hgroup> + <h2>Share your gratitude</h2> + <p>Sparkle someone with praise</p> + </hgroup> + </div> + <div> </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> |