add verify page

src/routes/verify/+page.svelte

@@ -0,0 +1,98 @@
+<script>
+    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+    
+
+    import { DoubleBounce } from 'svelte-loading-spinners';
+
+    let message = 'Verifying';
+    let showCheck = false;
+    let messageDiv;
+    let visible = true;
+
+    function test(){
+        grecaptcha.ready(function() {
+          grecaptcha.execute('6LdvDa4pAAAAAAT3LQR-kngSzbbpWbfpRwAdxcVM', {action: 'submit'}).then(function(token) {
+              // Add your logic to submit to your backend server here.
+            return token;
+          });
+        });
+    }
+
+    onMount(() => {
+        // message = 'Verifying'
+        const param1Value = $page.url.searchParams.get('token');
+        test();
+        message = 'Done';
+        visible = false;
+        showCheck = true;
+        // messageDiv.style.backgroundColor = 'green';
+    });
+</script>
+
+<svelte:head>
+    <script src="https://www.google.com/recaptcha/api.js?render=6LdvDa4pAAAAAAT3LQR-kngSzbbpWbfpRwAdxcVM"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+</svelte:head>
+<style>
+    :root {
+        --text: #d6d6d6;
+        --background: #101014;
+        --primary: #0084ff;
+        --secondary: #1b2c42;
+        --accent: #577db2;
+    }
+
+    .main {
+        font-family: "Montserrat", sans-serif;
+        background-color: var(--background);
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        width: 100vw;
+    }
+
+    .verify-cont{
+        width: 100vw;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .header{
+        color: var(--text);
+    }
+
+
+    .material-symbols-outlined {
+        color: green;
+        font-size: 100px;
+        font-variation-settings:
+            'FILL' 0,
+            'wght' 400,
+            'GRAD' 200,
+            'opsz' 48
+    }
+
+    .status-cont{
+        width: 100px;
+        height: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
+
+<div class="main">
+    <div class="verify-cont" bind:this={messageDiv}>
+        <h1 class="header">{message}</h1>   
+            <div class="status-cont">
+                <div class="material-symbols-outlined" style="display: {showCheck ? '' : 'none'};">check_circle</div> 
+                {#if visible}
+                    <DoubleBounce size="85" color="#0084ff" unit="px" duration="1s" />
+                {/if}
+            </div> 
+    </div>
+</div>