feature: better layouts

frontend/src/lib/components/UserMenu.svelte

@@ -149,7 +149,7 @@
 		padding-inline: 1.5rem;
 		padding-top: 0.75rem;
 		padding-bottom: 0.25rem;
-		color: var(--colorBlue0);
+		color: var(--colorGreen0);
 		font-weight: 600;
 	}
 

frontend/src/lib/css/navigationLink.module.css

@@ -2,6 +2,7 @@
 	transition-duration: 50ms;
 	transition-property: text-decoration-color;
 	transition-timing-function: ease-out;
+	cursor: pointer;
 	padding-block: 0.75rem;
 	color: var(--colorOrange0);
 	font-weight: 600;
@@ -24,8 +25,14 @@
 	}
 }
 
-.withIcon {
+.withIconLeft {
 	display: inline-grid;
 	grid-template-columns: max-content 1fr;
 	column-gap: 0.5rem;
 }
+
+.withIconRight {
+	display: inline-grid;
+	grid-template-columns: 1fr max-content;
+	column-gap: 0.5rem;
+}

frontend/src/lib/swissGrid.ts

@@ -0,0 +1,45 @@
+const getDecimalDegreesFromSeconds = (totalSeconds: number) => {
+	let totalSeconds_ = totalSeconds
+	const hours = Math.floor(totalSeconds_ / 3600)
+	totalSeconds_ = totalSeconds_ % 3600
+	const minutes = Math.floor(totalSeconds_ / 60)
+	totalSeconds_ = totalSeconds_ % 60
+	const seconds = totalSeconds_
+	const decimal = hours + minutes / 60 + seconds / 3600
+
+	console.debug(hours, minutes, seconds)
+
+	return decimal
+}
+
+const { pow } = Math
+/**
+ * converts swiss grid coordinates to decimal latitude and longitude that can be used with embedded maps
+ *
+ * based on the approximate formula of 3.4 in
+ * - https://backend.swisstopo.admin.ch/fileservice/sdweb-docs-prod-swisstopoch-files/files/2023/11/14/ea9cbbd6-9583-4a39-8bdf-15fc6a1c2fad.pdf
+ * - via https://www.swisstopo.admin.ch/de/schweizerische-kartenprojektionen
+ */
+export const getDecimalLatitudeLongitude = (swissGridCoordinates: { E: number; N: number }) => {
+	const X = swissGridCoordinates.N / 1_000_000 - 0.2
+	const Y = swissGridCoordinates.E / 1_000_000 - 0.6
+
+	const a1 =
+		4.72973056 + 0.7925714 * X + 0.132812 * pow(X, 2) + 0.0255 * pow(X, 3) + 0.0048 * pow(X, 4)
+	const a3 = -0.04427 - 0.0255 * X - 0.0096 * pow(X, 2)
+	const a5 = 0.00096
+	const lambda = 2.67825 + a1 * Y + a3 * pow(Y, 3) + a5 * pow(Y, 5)
+
+	const p0 = 3.23864877 * X - 0.0025486 * pow(X, 2) - 0.013245 * pow(X, 3) + 0.000048 * pow(X, 4)
+	const p2 = -0.27135379 - 0.0450442 * X - 0.007553 * pow(X, 2) - 0.00146 * pow(X, 3)
+	const p4 = 0.002442 + 0.00132 * X
+	const phi = 16.902866 + p0 + p2 * pow(Y, 2) + p4 * pow(Y, 4)
+
+	const latitude = getDecimalDegreesFromSeconds(phi * 10000)
+	const longitude = getDecimalDegreesFromSeconds(lambda * 10000)
+
+	return {
+		latitude,
+		longitude,
+	}
+}

frontend/src/app.css → frontend/src/reset.css

@@ -78,3 +78,9 @@ h6 {
 #__next {
 	isolation: isolate;
 }
+
+ul,
+ol {
+	padding: 0;
+	list-style-type: none;
+}

frontend/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state'
-	import '../app.css'
+	import '../reset.css'
 	import '$lib/css/colors.css'
 	import containerStyles from '$lib/css/container.module.css'
 	import navigationLinkStyles from '$lib/css/navigationLink.module.css'

frontend/src/routes/+page.svelte

@@ -1,61 +1,30 @@
 <script lang="ts">
-	import NftTile from '$lib/components/NftTile.svelte'
+	import containerStyles from '$lib/css/container.module.css'
+	import MissionTeaser from './MissionTeaser.svelte'
 
 	let { data } = $props()
 </script>
 
-<main>
-	<div class="grain"></div>
-
-	<div class="content-wrapper">
-		<div class="cards-grid">
-			{#if !data.nfts.length}
-				<p>No NFTs have been minted yet.</p>
-			{:else}
-				{#each data.nfts as nft}
-					<a href="/certificates/{nft.serialNumber}" class="certificateLink">
-						<NftTile {...nft} />
-					</a>
-				{/each}
-			{/if}
-		</div>
-	</div>
+<main class={containerStyles.container}>
+	<h1>Missions</h1>
+
+	{#if !data.nfts.length}
+		<p>No NFTs have been minted yet.</p>
+	{:else}
+		<ul class="missionList">
+			{#each data.nfts as nft}
+				<li>
+					<MissionTeaser {...nft.certificate} serialNumber={nft.serialNumber} />
+				</li>
+			{/each}
+		</ul>
+	{/if}
 </main>
 
 <style>
-	.content-wrapper {
+	.missionList {
 		display: grid;
-		position: relative;
-		gap: 64px;
-		z-index: 2;
-		padding: 5rem 3rem 3rem 3rem;
-	}
-
-	@media (min-width: 1024px) {
-		.content-wrapper {
-			margin-right: 32px;
-		}
-	}
-
-	.cards-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-		align-items: start;
 		gap: 2rem;
-	}
-
-	.certificateLink {
-		display: block;
-		transition-duration: 200ms;
-		transition-property: scale;
-		transition-timing-function: ease-out;
-		color: inherit;
-		text-decoration: none;
-
-		@media (hover: hover) {
-			&:hover {
-				scale: 1.03;
-			}
-		}
+		margin-top: 2rem;
 	}
 </style>

frontend/src/routes/MissionTeaser.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import navigationLinkStyles from '$lib/css/navigationLink.module.css'
+	import type { BidiCertificate } from '$lib/certificate'
+	import Details from 'lucide-svelte/icons/arrow-right'
+	import type { Nft } from '$lib/nft'
+
+	let {
+		typeOfNaturalObject,
+		dateOfWork,
+		typeOfWork,
+		serialNumber,
+	}: Pick<BidiCertificate, 'typeOfNaturalObject' | 'dateOfWork' | 'typeOfWork'> &
+		Pick<Nft, 'serialNumber'> = $props()
+</script>
+
+<figure class="missionTeaser">
+	<h2>{typeOfNaturalObject}</h2>
+
+	<time datetime={dateOfWork}>{new Date(dateOfWork).toLocaleDateString()}</time>
+
+	<p>{typeOfWork}</p>
+
+	<a
+		href="/certificates/{serialNumber}"
+		class="detailsLink {navigationLinkStyles.navigationLink} {navigationLinkStyles.withIconRight}"
+	>
+		Details
+
+		<Details aria-hidden="true" />
+	</a>
+</figure>

frontend/src/routes/certificates/[serialNumber]/+page.svelte

@@ -1,16 +1,77 @@
 <script lang="ts">
 	import containerStyles from '$lib/css/container.module.css'
+	import navigationLinkStyles from '$lib/css/navigationLink.module.css'
 	import { contractId, nftTokenId } from '$lib/deployment.js'
 	import HashConnectLoader from '$lib/hashconnect/HashConnectLoader.svelte'
 	import { associateWithToken } from '$lib/hedera/collection/associate'
 	import { claimNftWithExecutor } from '$lib/hedera/collection/claim.js'
+	import { getDecimalLatitudeLongitude } from '$lib/swissGrid.js'
+	import Claim from 'lucide-svelte/icons/file-down'
+	import Associate from 'lucide-svelte/icons/handshake'
 
 	let { data } = $props()
+
+	const decimalLatitudeLongitude = $derived(
+		getDecimalLatitudeLongitude({
+			E: data.nft.certificate.swissGridE,
+			N: data.nft.certificate.swissGridN,
+		}),
+	)
+	const mapSearchParams = $derived.by(() => {
+		const urlSearchParams = new URLSearchParams()
+		const bbox = `${
+			decimalLatitudeLongitude.longitude - 0.01
+		},${decimalLatitudeLongitude.latitude - 0.01},${
+			decimalLatitudeLongitude.longitude + 0.01
+		},${decimalLatitudeLongitude.latitude + 0.01}`
+		urlSearchParams.set('bbox', bbox)
+
+		const marker = `${decimalLatitudeLongitude.latitude},${decimalLatitudeLongitude.longitude}`
+		urlSearchParams.set('marker', marker)
+
+		return urlSearchParams
+	})
 </script>
 
 <main class={containerStyles.container}>
-	<h1>{data.nft.name} #{data.nft.serialNumber}</h1>
+	<h1>{data.nft.certificate.typeOfNaturalObject}</h1>
+
+	<time datetime={data.nft.certificate.dateOfWork}>
+		{new Date(data.nft.certificate.dateOfWork).toLocaleDateString()}
+	</time>
+	<p>{data.nft.certificate.typeOfWork}</p>
+
+	<p>Operations manager: {data.nft.certificate.operationsManager}</p>
+
+	<h2>Effect on biodiversity</h2>
+	<p>{data.nft.certificate.effectOnBiodiversity}</p>
+
+	<h2>Location</h2>
+
+	<p>
+		Coordinates
+
+		{data.nft.certificate.swissGridE?.toLocaleString()} / {data.nft.certificate.swissGridN?.toLocaleString()}
+	</p>
+
+	<figure>
+		<iframe
+			title="{data.nft.certificate.typeOfWork} on the map"
+			width="100%"
+			height="auto"
+			src="https://www.openstreetmap.org/export/embed.html?{mapSearchParams.toString()}"
+			class="map"
+		></iframe>
+		<small>
+			<a
+				href="https://www.openstreetmap.org/#map=8/{decimalLatitudeLongitude.latitude}/{decimalLatitudeLongitude.longitude}"
+			>
+				View on OpenStreetMap
+			</a>
+		</small>
+	</figure>
 
+	<h2>NFT</h2>
 	<HashConnectLoader>
 		{#snippet withAccountInformation({ hashConnect })}
 			{#if hashConnect.accountInformation.hasAssociatedWithToken}
@@ -23,8 +84,11 @@
 							executeTransaction: hashConnect.session.executeTransaction,
 						})
 					}}
+					class="{navigationLinkStyles.navigationLink} {navigationLinkStyles.withIconRight}"
 				>
-					Claim
+					Claim this NFT
+
+					<Claim aria-hidden="true" />
 				</button>
 			{:else}
 				<button
@@ -38,29 +102,29 @@
 						hashConnect.accountInformation.hasAssociatedWithToken =
 							associateWithTokenResult.hasAssociatedWithToken
 					}}
+					class="{navigationLinkStyles.navigationLink} {navigationLinkStyles.withIconRight}"
 				>
 					Associate with BIDI
+
+					<Associate aria-hidden="true" />
 				</button>
 			{/if}
 		{/snippet}
 	</HashConnectLoader>
 
 	<img src={data.nft.imageUrl} alt="Image of certificate #{data.nft.serialNumber}" />
-
-	<p>{new Date(data.nft.certificate.dateOfWork).toLocaleDateString()}</p>
-	<p>{data.nft.certificate.swissGridE} / {data.nft.certificate.swissGridN}</p>
-	<p>{data.nft.certificate.operationsManager}</p>
-	<p>{data.nft.certificate.typeOfNaturalObject}</p>
-	<p>{data.nft.certificate.typeOfWork}</p>
-	<p>{data.nft.certificate.effectOnBiodiversity}</p>
 </main>
 
 <style>
-	h1 {
-		padding-top: 3rem;
-	}
-
 	img {
 		margin-top: 1rem;
 	}
+
+	h2 {
+		margin-top: 2rem;
+	}
+
+	.map {
+		aspect-ratio: 1;
+	}
 </style>

frontend/src/routes/certificates/[serialNumber]/+page.ts

@@ -14,6 +14,6 @@ export const load = async ({ fetch, params }) => {
 
 	return {
 		nft,
-		metadataTitle: `${nft.name} #${nft.serialNumber} - BIDI`,
+		metadataTitle: `${nft.certificate.typeOfNaturalObject} - BIDI`,
 	}
 }

frontend/src/routes/dashboard/+layout.svelte

@@ -15,11 +15,11 @@
 	<nav>
 		<a
 			href="/dashboard/mint"
-			class="{navigationLinkStyles.navigationLink} {navigationLinkStyles.withIcon}"
+			class="{navigationLinkStyles.navigationLink} {navigationLinkStyles.withIconRight}"
 		>
-			<CreateCertificate aria-hidden="true" />
-
 			Create certificate
+
+			<CreateCertificate aria-hidden="true" />
 		</a>
 	</nav>
 
@@ -84,7 +84,7 @@
 		display: grid;
 		grid-auto-flow: column;
 		align-items: center;
-		color: var(--colorBlue0);
+		color: var(--colorGreen0);
 		font-weight: 600;
 	}