feat: added disclaimer to pictique's login screen.

Author: Sahil2004

platforms/pictique/package.json

@@ -56,6 +56,7 @@
 		"axios": "^1.6.7",
 		"moment": "^2.30.1",
 		"svelte-qrcode": "^1.0.1",
+		"svelte-qrcode-action": "^1.0.2",
 		"tailwind-merge": "^3.0.2"
 	}
 }

platforms/pictique/src/declaration.d.ts

@@ -1,4 +1,7 @@
-declare module 'svelte-qrcode' {
-	import { SvelteComponentTyped } from 'svelte';
-	export default class QRCode extends SvelteComponentTyped<{ value: string; size?: number }> {}
+declare module "svelte-qrcode" {
+    import { SvelteComponentTyped } from "svelte";
+    export default class QRCode extends SvelteComponentTyped<{
+        value: string;
+        size?: number;
+    }> {}
 }

platforms/pictique/src/routes/(auth)/auth/+page.svelte

@@ -4,6 +4,7 @@
 	import { Qr } from '$lib/ui';
 	import { apiClient, setAuthId, setAuthToken } from '$lib/utils';
 	import { onMount } from 'svelte';
+	import { qrcode } from 'svelte-qrcode-action';
 
 	let qrData: string;
 
@@ -37,14 +38,49 @@
 	class="align-center flex h-full w-full flex-col content-center items-center
     justify-center"
 >
+	<div class="mb-5 flex flex-col items-center gap-2">
+		<img src="/images/Logo.svg" alt="logo" class="w-30" />
+		<p>Connect Socially in the Metastate</p>
+	</div>
 	<div
-		class="h-max-[600px] bg-grey flex w-[300px] flex-col items-center gap-5
-        rounded-md p-5"
+		class="h-max-[600px] w-max-[400px] flex flex-col items-center gap-5 rounded-xl bg-[#F476481A] p-5"
 	>
-		<img src="/images/Logo.svg" alt="logo" />
-
-		<Qr data={qrData}></Qr>
-
-		<h1>Scan the QR to Login</h1>
+		<h2>Scan the QR code using your <b><u>eID App</u></b> to login</h2>
+		<article
+			class="overflow-hidden rounded-2xl"
+			use:qrcode={{
+				data: qrData,
+				width: 250,
+				height: 250,
+				margin: 12,
+				type: 'canvas',
+				dotsOptions: {
+					type: 'rounded',
+					color: '#fff'
+				},
+				backgroundOptions: {
+					gradient: {
+						type: 'linear',
+						rotation: 50,
+						colorStops: [
+							{ offset: 0, color: '#4D44EF' },
+							{ offset: 0.65, color: '#F35B5B' },
+							{ offset: 1, color: '#F7A428' }
+						]
+					}
+				}
+			}}
+		></article>
+		<p>
+			<span class="mb-1 block font-bold text-gray-600">The code is valid for 60 seconds</span>
+			<span class="block font-light text-gray-600">Please refresh the page if it expires</span
+			>
+		</p>
+		<p class="w-[350px] bg-white/60 p-4 leading-4 text-black/60">
+			You are entering Pictique - a social network built on the Web 3.0 Data Space (W3DS)
+			architecture. This system is designed around the principle of data-platform separation,
+			where all your personal content is stored in your own sovereign eVault, not on
+			centralised servers.
+		</p>
 	</div>
 </div>