mleku/flotilla
1
1
Fork 0
mirror of https://github.com/coracle-social/flotilla.git synced 2025-12-10 02:47:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add about page

Browse Source
This commit is contained in:
Jon Staab
2024-08-23 15:43:35 -07:00
parent 1edf7f9f02
commit 8dac345fc4
10 changed files with 110 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.css
View File

@@ -43,9 +43,7 @@
}
.card2 {
padding: 1rem;
background-color: oklch(var(--b2) / 1);
border-radius: var(--rounded-box, 1rem);
@apply p-6 bg-base-100 text-base-content rounded-box;
}
.column {

5
src/assets/icons/Code 2.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 11L17.6965 12.5268C19.239 13.9151 20.0103 14.6093 20.0103 15.5C20.0103 16.3907 19.239 17.0849 17.6965 18.4732L16 20" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<path d="M13.9868 5L11.9934 12.5L10 20" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8.00001 4.82959L6.30354 6.35641C4.76098 7.74471 3.9897 8.43886 3.9897 9.32959C3.9897 10.2203 4.76098 10.9145 6.30354 12.3028L8.00001 13.8296" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 608 B

5
src/assets/icons/Earth.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/>
<path d="M6 4.71053C6.78024 5.42105 8.38755 7.36316 8.57481 9.44737C8.74984 11.3955 10.0357 12.9786 12 13C12.7549 13.0082 13.5183 12.4629 13.5164 11.708C13.5158 11.4745 13.4773 11.2358 13.417 11.0163C13.3331 10.7108 13.3257 10.3595 13.5 10C14.1099 8.74254 15.3094 8.40477 16.2599 7.72186C16.6814 7.41898 17.0659 7.09947 17.2355 6.84211C17.7037 6.13158 18.1718 4.71053 17.9377 4" stroke="#1C274C" stroke-width="1.5"/>
<path d="M22 13C21.6706 13.931 21.4375 16.375 17.7182 16.4138C17.7182 16.4138 14.4246 16.4138 13.4365 18.2759C12.646 19.7655 13.1071 21.3793 13.4365 22" stroke="#1C274C" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 780 B

7
src/assets/icons/Headphones Round.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 17V12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12V17" stroke="#1C274C" stroke-width="1.5"/>
<path d="M22 15.5V17.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<path d="M2 15.5V17.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8 13.8446C8 13.0802 8 12.698 7.82526 12.4323C7.73733 12.2985 7.62061 12.188 7.4844 12.1095C7.21371 11.9535 6.84812 11.9896 6.11694 12.0617C4.88487 12.1831 4.26884 12.2439 3.82737 12.5764C3.60394 12.7448 3.41638 12.9593 3.27646 13.2067C3 13.6955 3 14.3395 3 15.6276V17.1933C3 18.4685 3 19.1061 3.28198 19.5986C3.38752 19.7829 3.51981 19.9491 3.67416 20.0913C4.08652 20.4714 4.68844 20.5901 5.89227 20.8275C6.73944 20.9945 7.16302 21.078 7.47564 20.9021C7.591 20.8372 7.69296 20.7493 7.77572 20.6434C8 20.3565 8 19.9078 8 19.0104V13.8446Z" stroke="#1C274C" stroke-width="1.5"/>
<path d="M16 13.8446C16 13.0802 16 12.698 16.1747 12.4323C16.2627 12.2985 16.3794 12.188 16.5156 12.1095C16.7863 11.9535 17.1519 11.9896 17.8831 12.0617C19.1151 12.1831 19.7312 12.2439 20.1726 12.5764C20.3961 12.7448 20.5836 12.9593 20.7235 13.2067C21 13.6955 21 14.3395 21 15.6276V17.1933C21 18.4685 21 19.1061 20.718 19.5986C20.6125 19.7829 20.4802 19.9491 20.3258 20.0913C19.9135 20.4714 19.3116 20.5901 18.1077 20.8275C17.2606 20.9945 16.837 21.078 16.5244 20.9021C16.409 20.8372 16.307 20.7493 16.2243 20.6434C16 20.3565 16 19.9078 16 19.0104V13.8446Z" stroke="#1C274C" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

5
src/assets/icons/Info Square.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/>
<path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="#1C274C" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 568 B

3
src/assets/icons/Pen.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3601 4.07866L15.2869 3.15178C16.8226 1.61607 19.3125 1.61607 20.8482 3.15178C22.3839 4.68748 22.3839 7.17735 20.8482 8.71306L19.9213 9.63993M14.3601 4.07866C14.3601 4.07866 14.4759 6.04828 16.2138 7.78618C17.9517 9.52407 19.9213 9.63993 19.9213 9.63993M14.3601 4.07866L5.83882 12.5999C5.26166 13.1771 4.97308 13.4656 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.32181 19.8021M19.9213 9.63993L11.4001 18.1612C10.8229 18.7383 10.5344 19.0269 10.2162 19.2751C9.84082 19.5679 9.43469 19.8189 9.00498 20.0237C8.6407 20.1973 8.25352 20.3263 7.47918 20.5844L4.19792 21.6782M4.19792 21.6782L3.39584 21.9456C3.01478 22.0726 2.59466 21.9734 2.31063 21.6894C2.0266 21.4053 1.92743 20.9852 2.05445 20.6042L2.32181 19.8021M4.19792 21.6782L2.32181 19.8021" stroke="#1C274C" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 964 B

10
src/lib/components/Icon.svelte
View File

@@ -9,6 +9,10 @@
import cx from 'classnames'
import {switcher} from "@welshman/lib"
import AddSquare from "@assets/icons/Add Square.svg?dataurl"
import Code2 from "@assets/icons/Code 2.svg?dataurl"
import Earth from "@assets/icons/Earth.svg?dataurl"
import Pen from "@assets/icons/Pen.svg?dataurl"
import HeadphonesRound from "@assets/icons/Headphones Round.svg?dataurl"
import AddCircle from "@assets/icons/Add Circle.svg?dataurl"
import AltArrowDown from "@assets/icons/Alt Arrow Down.svg?dataurl"
import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl"
@@ -33,6 +37,7 @@
import HandPills from "@assets/icons/Hand Pills.svg?dataurl"
import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
import InfoSquare from "@assets/icons/Info Square.svg?dataurl"
import Key from "@assets/icons/Key.svg?dataurl"
import LinkRound from "@assets/icons/Link Round.svg?dataurl"
import Login from "@assets/icons/Login.svg?dataurl"
@@ -62,6 +67,10 @@
const data = switcher(icon, {
"add-square": AddSquare,
"code-2": Code2,
"earth": Earth,
"pen": Pen,
"headphones-round": HeadphonesRound,
"add-circle": AddCircle,
"alt-arrow-down": AltArrowDown,
"alt-arrow-right": AltArrowRight,
@@ -86,6 +95,7 @@
"hand-pills": HandPills,
"home-smile": HomeSmile,
"info-circle": InfoCircle,
"info-square": InfoSquare,
key: Key,
"link-round": LinkRound,
login: Login,

2
src/lib/components/Link.svelte
View File

@@ -8,7 +8,7 @@
<a
{href}
{...$$props}
class={cx($$props.class, "cursor-pointer text-primary underline")}
class={cx($$props.class, "cursor-pointer")}
rel={external ? "noopener noreferer" : ""}
target={external ? "_blank" : ""}>
<slot />

5
src/routes/settings/+layout.svelte
View File

@@ -18,6 +18,11 @@
<Icon icon="settings" /> Settings
</SecondaryNavItem>
</div>
<div in:fly|local>
<SecondaryNavItem href="/settings/about">
<Icon icon="info-square" /> About
</SecondaryNavItem>
</div>
<div in:fly|local={{delay: 50}}>
<SecondaryNavItem class="text-error hover:text-error" on:click={logout}>
<Icon icon="exit" /> Log Out

68
src/routes/settings/about/+page.svelte Normal file
View File

@@ -0,0 +1,68 @@
<script lang="ts">
import Link from "@lib/components/Link.svelte"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
const hash = import.meta.env.VITE_BUILD_HASH
const nprofile =
"nprofile1qqsf03c2gsmx5ef4c9zmxvlew04gdh7u94afnknp33qvv3c94kvwxgspz4mhxue69uhhyetvv9ujuerpd46hxtnfduhsz9rhwden5te0wfjkcctev93xcefwdaexwtcpzdmhxue69uhhqatjwpkx2urpvuhx2ue0vamm57"
const hodlbodPubkey = "97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322"
</script>
<div class="hero min-h-screen bg-base-200">
<div class="hero-content">
<div class="column content gap-6">
<p class="text-center text-3xl">Thanks for using</p>
<h1 class="mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
<div class="card2 shadow-2xl flex flex-col gap-2 text-center">
<h3 class="text-xl sm:h-12">Support development</h3>
<p class="sm:h-16">Funds will be used to support development.</p>
<Button class="btn btn-primary">
Zap the Developer
</Button>
</div>
<div class="card2 shadow-2xl flex flex-col gap-2 text-center">
<h3 class="text-xl sm:h-12">Get in touch</h3>
<p class="sm:h-16">Having problems? Let us know by filing an issue.</p>
<Link
external
class="btn btn-primary"
href="https://github.com/coracle-social/flotilla/issues/new">
Open an Issue
</Link>
</div>
</div>
<div class="flex flex-col gap-4">
<p class="text-center">
Built with 💜 by
<span class="text-primary">
@<Link external href="https://njump.me/{nprofile}" class="link">hodlbod</Link>
</span>
</p>
<div class="flex justify-center gap-4">
<div class="tooltip" data-tip="Source Code">
<Link external href="https://github.com/coracle-social/flotilla">
<Icon icon="code-2" />
</Link>
</div>
<div class="tooltip" data-tip="About the Developer">
<Link external href="https://coracle.tools">
<Icon icon="earth" />
</Link>
</div>
<div class="tooltip" data-tip="Dev Blog">
<Link external href={`https://yakihonne.com/users/${nprofile}`}>
<Icon icon="pen" />
</Link>
</div>
<div class="tooltip" data-tip="Podcast">
<Link external href="https://tgfb.com/podcasts/thank-god-for-nostr/">
<Icon icon="headphones-round" />
</Link>
</div>
</div>
</div>
</div>
</div>
</div>