feat(gui): add footer component to homepage layout
- commit
- 11c50276c17286d5531da932bbcfaa9ec0d5c3fb
- author
- bamen · · 2025-09-20 13:26 UTC
- parent
- 35b7cc8
- signature
- unsigned
1 file · +76 -0
A gui/src/components/Footer.svelte +76 -0
| @@ -0,0 +1,76 @@ | |||
| 1 | + | <script lang="ts"> | |
| 2 | + | const openGithub = () => { | |
| 3 | + | window.open("https://github.com/bnema/dumber", "_blank"); | |
| 4 | + | }; | |
| 5 | + | </script> | |
| 6 | + | ||
| 7 | + | <footer class="footer"> | |
| 8 | + | <div class="footer-separator"></div> | |
| 9 | + | <div class="footer-content"> | |
| 10 | + | <div class="footer-text"> | |
| 11 | + | <span class="footer-name">Dumber Browser</span> | |
| 12 | + | <span class="footer-dot">•</span> | |
| 13 | + | <button class="footer-link" onclick={openGithub}> | |
| 14 | + | View on GitHub | |
| 15 | + | </button> | |
| 16 | + | </div> | |
| 17 | + | </div> | |
| 18 | + | </footer> | |
| 19 | + | ||
| 20 | + | <style> | |
| 21 | + | .footer { | |
| 22 | + | margin-top: 1rem; | |
| 23 | + | width: 100%; | |
| 24 | + | } | |
| 25 | + | ||
| 26 | + | .footer-separator { | |
| 27 | + | height: 2px; | |
| 28 | + | background: #404040; | |
| 29 | + | } | |
| 30 | + | ||
| 31 | + | .footer-content { | |
| 32 | + | display: flex; | |
| 33 | + | justify-content: center; | |
| 34 | + | align-items: center; | |
| 35 | + | padding: 1rem 0; | |
| 36 | + | } | |
| 37 | + | ||
| 38 | + | .footer-text { | |
| 39 | + | display: flex; | |
| 40 | + | align-items: center; | |
| 41 | + | gap: 0.75rem; | |
| 42 | + | font-size: 0.85rem; | |
| 43 | + | color: #888; | |
| 44 | + | } | |
| 45 | + | ||
| 46 | + | .footer-name { | |
| 47 | + | color: #aaa; | |
| 48 | + | font-weight: 500; | |
| 49 | + | } | |
| 50 | + | ||
| 51 | + | .footer-dot { | |
| 52 | + | color: #666; | |
| 53 | + | } | |
| 54 | + | ||
| 55 | + | .footer-link { | |
| 56 | + | background: none; | |
| 57 | + | border: none; | |
| 58 | + | color: #0066cc; | |
| 59 | + | text-decoration: none; | |
| 60 | + | cursor: pointer; | |
| 61 | + | font-size: 0.85rem; | |
| 62 | + | padding: 0; | |
| 63 | + | transition: color 0.2s ease; | |
| 64 | + | } | |
| 65 | + | ||
| 66 | + | .footer-link:hover { | |
| 67 | + | color: #4d94ff; | |
| 68 | + | text-decoration: underline; | |
| 69 | + | } | |
| 70 | + | ||
| 71 | + | .footer-link:focus { | |
| 72 | + | outline: 1px solid #0066cc; | |
| 73 | + | outline-offset: 2px; | |
| 74 | + | border-radius: 2px; | |
| 75 | + | } | |
| 76 | + | </style> | |
| @@ -0,0 +1,76 @@ | |||||
| 1 | + | <script lang="ts"> | |||
| 2 | + | const openGithub = () => { | |||
| 3 | + | window.open("https://github.com/bnema/dumber", "_blank"); | |||
| 4 | + | }; | |||
| 5 | + | </script> | |||
| 6 | + | ||||
| 7 | + | <footer class="footer"> | |||
| 8 | + | <div class="footer-separator"></div> | |||
| 9 | + | <div class="footer-content"> | |||
| 10 | + | <div class="footer-text"> | |||
| 11 | + | <span class="footer-name">Dumber Browser</span> | |||
| 12 | + | <span class="footer-dot">•</span> | |||
| 13 | + | <button class="footer-link" onclick={openGithub}> | |||
| 14 | + | View on GitHub | |||
| 15 | + | </button> | |||
| 16 | + | </div> | |||
| 17 | + | </div> | |||
| 18 | + | </footer> | |||
| 19 | + | ||||
| 20 | + | <style> | |||
| 21 | + | .footer { | |||
| 22 | + | margin-top: 1rem; | |||
| 23 | + | width: 100%; | |||
| 24 | + | } | |||
| 25 | + | ||||
| 26 | + | .footer-separator { | |||
| 27 | + | height: 2px; | |||
| 28 | + | background: #404040; | |||
| 29 | + | } | |||
| 30 | + | ||||
| 31 | + | .footer-content { | |||
| 32 | + | display: flex; | |||
| 33 | + | justify-content: center; | |||
| 34 | + | align-items: center; | |||
| 35 | + | padding: 1rem 0; | |||
| 36 | + | } | |||
| 37 | + | ||||
| 38 | + | .footer-text { | |||
| 39 | + | display: flex; | |||
| 40 | + | align-items: center; | |||
| 41 | + | gap: 0.75rem; | |||
| 42 | + | font-size: 0.85rem; | |||
| 43 | + | color: #888; | |||
| 44 | + | } | |||
| 45 | + | ||||
| 46 | + | .footer-name { | |||
| 47 | + | color: #aaa; | |||
| 48 | + | font-weight: 500; | |||
| 49 | + | } | |||
| 50 | + | ||||
| 51 | + | .footer-dot { | |||
| 52 | + | color: #666; | |||
| 53 | + | } | |||
| 54 | + | ||||
| 55 | + | .footer-link { | |||
| 56 | + | background: none; | |||
| 57 | + | border: none; | |||
| 58 | + | color: #0066cc; | |||
| 59 | + | text-decoration: none; | |||
| 60 | + | cursor: pointer; | |||
| 61 | + | font-size: 0.85rem; | |||
| 62 | + | padding: 0; | |||
| 63 | + | transition: color 0.2s ease; | |||
| 64 | + | } | |||
| 65 | + | ||||
| 66 | + | .footer-link:hover { | |||
| 67 | + | color: #4d94ff; | |||
| 68 | + | text-decoration: underline; | |||
| 69 | + | } | |||
| 70 | + | ||||
| 71 | + | .footer-link:focus { | |||
| 72 | + | outline: 1px solid #0066cc; | |||
| 73 | + | outline-offset: 2px; | |||
| 74 | + | border-radius: 2px; | |||
| 75 | + | } | |||
| 76 | + | </style> | |||