add footer with bitcoin svg

This commit is contained in:
padreug 2025-02-02 18:13:03 +01:00
parent 145f59fb95
commit 8b8ae239a5
3 changed files with 223 additions and 2 deletions

View file

@ -1,13 +1,15 @@
<script setup lang="ts">
import Navbar from './components/layout/Navbar.vue'
import Footer from './components/layout/Footer.vue'
</script>
<template>
<div class="min-h-screen bg-background">
<div class="min-h-screen flex flex-col bg-background">
<Navbar />
<main>
<main class="flex-1">
<router-view></router-view>
</main>
<Footer />
</div>
</template>

172
src/assets/bitcoin.svg Normal file
View file

@ -0,0 +1,172 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="47.839275mm"
height="47.579643mm"
viewBox="0 0 47.839275 47.579643"
version="1.1"
id="svg5"
xml:space="preserve"
inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
sodipodi:docname="bitcoin.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="5.6568543"
inkscape:cx="-10.253048"
inkscape:cy="86.62058"
inkscape:window-width="3824"
inkscape:window-height="2003"
inkscape:window-x="8"
inkscape:window-y="40"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" /><defs
id="defs2"><inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : -100.92036 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="210 : -100.92036 : 1"
inkscape:persp3d-origin="105 : -150.42036 : 1"
id="perspective1661" /></defs><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-55.191568,-74.568447)"><ellipse
style="fill:#f7b83c;fill-opacity:1;stroke:none;stroke-width:0.9731;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers"
id="ellipse1801"
cx="79.111206"
cy="98.358269"
rx="23.919638"
ry="23.789822" /><ellipse
style="fill:#ffcd55;fill-opacity:1;stroke:none;stroke-width:0.848413;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers"
id="path1799"
cx="79.111206"
cy="98.358269"
rx="20.854713"
ry="20.741529" /><g
id="g9035"
transform="translate(-1.9351359)"><g
id="g6394"
transform="matrix(0.05941714,0,0,0.06234001,66.914594,83.733193)"
style="fill:#eeb94f;fill-opacity:1"><g
id="g6362"
style="fill:#eeb94f;fill-opacity:1">
<path
d="m 405.15545,248.92192 c -13.17897,-14.25807 -33.0662,-24.05151 -59.66054,-29.37431 33.86622,-14.45288 48.74911,-38.98292 44.663,-73.59411 -1.36601,-12.55074 -5.51182,-23.42812 -12.44698,-32.64811 -6.93994,-9.222 -17.24265,-18.92665 -29.56859,-26.733851 C 326.40266,75.417178 299.87135,71.850398 299.34113,71.806924 V -0.07086764 H 246.84504 V 69.809875 c -9.09045,0 -22.95359,0.189814 -41.58826,0.570442 V -0.07086764 H 152.75352 V 71.806924 c -7.50235,0.190814 -18.52361,0.287719 -33.06858,0.287719 L 65.420737,71.806924 v 46.778306 h 10.82677 c 17.273414,0 27.387183,6.46668 30.341313,19.39505 1.61681,67.95202 0,127.06089 0,196.80677 -1.81618,9.69553 -8.40625,14.54779 -19.771416,14.54779 h -28.83245 l -10.569908,52.19801 h 68.183784 c 4.31896,0 10.56514,0.048 18.75048,0.13387 8.18058,0.0959 14.31452,0.14386 18.40659,0.14386 v 72.73196 h 52.51162 v -71.8768 c 9.54301,0.19481 23.40617,0.28772 41.58827,0.28772 v 71.58908 h 52.49729 v -72.73196 c 31.04313,-1.9946 59.85923,-8.88053 85.16572,-26.17339 8.86716,-6.6495 19.0915,-19.75075 24.89707,-30.02072 5.78648,-10.26997 9.48451,-22.15436 11.07024,-35.65817 2.96725,-26.42419 -2.14934,-46.77231 -15.33066,-61.03638 z M 197.27368,130.20257 c 1.59168,0 15.08423,-0.048 22.47076,-0.14386 7.3901,-0.0979 13.52402,-0.19181 18.41017,-0.28772 4.88731,-0.0939 15.72346,-0.20807 23.82469,0.16643 49.79848,11.72702 42.17685,67.72478 0.3002,70.12018 -7.50235,0.28372 -24.51895,0.78157 -28.38056,0.87547 -3.86521,0.0939 -9.14776,0.0939 -15.85486,0 -6.7083,-0.0939 -19.62769,-0.14386 -20.76682,-0.14386 0,-1.78498 -0.004,-65.61995 -0.004,-70.58667 z m 74.2523,211.36504 c -3.76109,1.41153 -8.52572,1.91559 -16.03616,2.21157 -7.72443,0.27973 -14.27316,0.57277 -18.58971,0.57277 -4.31896,0 -9.77466,-0.0519 -16.36593,-0.14486 -6.59484,-0.0889 -24.26439,0.2946 -26.08415,0.2946 l -0.49839,-87.45775 c 0,0 20.68336,-0.52436 29.66278,-0.71818 8.98059,-0.19182 16.30621,-0.28073 21.98878,-0.28073 5.68141,0 14.83573,-0.19695 23.52915,0.85517 45.61292,10.53782 51.66667,67.26999 2.39363,84.66741 z"
id="path6360"
sodipodi:nodetypes="ccccccccccccccccsccsccsccccccccccccccccccssccccccccccccc"
style="fill:#eeb94f;fill-opacity:1;stroke-width:1.09219" />
</g><g
id="g6364"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6366"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6368"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6370"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6372"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6374"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6376"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6378"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6380"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6382"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6384"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6386"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6388"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6390"
style="fill:#eeb94f;fill-opacity:1">
</g><g
id="g6392"
style="fill:#eeb94f;fill-opacity:1">
</g></g><g
id="g1371"
transform="matrix(0.05941714,0,0,0.06234001,67.443761,83.733193)"
style="fill:#ffffff;fill-opacity:1"><g
id="g1317"
style="fill:#ffffff;fill-opacity:1">
<path
d="m 402.68748,246.86141 c -8.42574,-10.86594 -30.59823,-21.991 -57.19257,-27.3138 33.86622,-14.45288 48.74911,-38.98292 44.663,-73.59411 -1.36601,-12.55074 -5.51182,-23.42812 -12.44698,-32.64811 -6.93994,-9.222 -17.24265,-18.92665 -29.56859,-26.733851 C 326.40266,75.417178 299.87135,71.850398 299.34113,71.806924 V -0.07086764 H 246.84504 V 69.809875 c -9.09045,0 -22.95359,0.189814 -41.58826,0.570442 V -0.07086764 H 152.75352 V 71.806924 c -7.50235,0.190814 -18.52361,0.287719 -33.06858,0.287719 L 65.420737,71.806924 v 46.778306 h 10.82677 c 17.273414,0 27.387183,6.46668 30.341313,19.39505 1.61681,67.95202 0,127.06089 0,196.80677 -1.81618,9.69553 -8.40625,14.54779 -19.771416,14.54779 h -28.83245 l -10.569908,52.19801 h 68.183784 c 4.31896,0 10.56514,0.048 18.75048,0.13387 8.18058,0.0959 14.31452,0.14386 18.40659,0.14386 v 72.73196 h 52.51162 v -71.8768 c 9.54301,0.19481 23.40617,0.28772 41.58827,0.28772 v 71.58908 h 52.49729 v -72.73196 c 31.04313,-1.9946 57.5316,-3.26213 80.0424,-18.68901 30.42129,-19.42031 40.13462,-45.21538 39.96037,-77.79144 -0.76651,-28.48855 -6.3275,-46.7119 -16.66837,-58.46872 z M 197.27368,130.20257 c 1.59168,0 15.08423,-0.048 22.47076,-0.14386 7.3901,-0.0979 13.52402,-0.19181 18.41017,-0.28772 4.88731,-0.0939 15.72346,-0.20807 23.82469,0.16643 49.79848,11.72702 42.17685,67.72478 0.3002,70.12018 -7.50235,0.28372 -24.51895,0.78157 -28.38056,0.87547 -3.86521,0.0939 -9.14776,0.0939 -15.85486,0 -6.7083,-0.0939 -19.62769,-0.14386 -20.76682,-0.14386 0,-1.78498 -0.004,-65.61995 -0.004,-70.58667 z m 74.2523,211.36504 c -3.76109,1.41153 -8.52572,1.91559 -16.03616,2.21157 -7.72443,0.27973 -14.27316,0.57277 -18.58971,0.57277 -4.31896,0 -9.77466,-0.0519 -16.36593,-0.14486 -6.59484,-0.0889 -24.26439,0.2946 -26.08415,0.2946 l -0.49839,-87.45775 c 0,0 20.68336,-0.52436 29.66278,-0.71818 8.98059,-0.19182 16.30621,-0.28073 21.98878,-0.28073 5.68141,0 14.83573,-0.19695 23.52915,0.85517 45.61292,10.53782 51.66667,67.26999 2.39363,84.66741 z"
id="path1315"
sodipodi:nodetypes="ccccccccccccccccsccsccscccccccccccccccccssccccccccccccc"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.09219" />
</g><g
id="g1319"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1321"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1323"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1325"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1327"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1329"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1331"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1333"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1335"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1337"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1339"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1341"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1343"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1345"
style="fill:#ffffff;fill-opacity:1">
</g><g
id="g1347"
style="fill:#ffffff;fill-opacity:1">
</g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 9.1 KiB

View file

@ -0,0 +1,47 @@
<script setup lang="ts">
const currentYear = new Date().getFullYear()
</script>
<template>
<footer class="border-t mt-auto">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<!-- Powered by section -->
<div class="flex items-center space-x-2 text-sm text-muted-foreground">
<span>Powered by</span>
<img src="@/assets/bitcoin.svg" alt="Bitcoin" class="w-8 h-8" />
</div>
<!-- Copyright and Donate Button -->
<div class="flex items-center gap-4">
<span class="text-sm text-muted-foreground">
© {{ currentYear }}
</span>
<a
href="https://lnbits.atitlan.io/tipjar/3"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2"
>
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
</svg>
Donate
</a>
</div>
</div>
</div>
</footer>
</template>