fixes #20

lisavanmansom · Sep 27, 2024 · 1d6c71d · 1d6c71d
1 parent 6d763b8
commit 1d6c71d
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 0 deletions.
diff --git a/my-app/src/lib/arrow-l.svelte b/my-app/src/lib/arrow-l.svelte
@@ -0,0 +1,7 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.561884 4.55426C0.315712 4.79623 0.3123 5.19194 0.554265 5.43812L4.49731 9.44973C4.73927 9.6959 5.13498 9.69931 5.38116 9.45735C5.62733 9.21539 5.63074 8.81967 5.38878 8.5735L1.88385 5.00762L5.44973 1.50269C5.6959 1.26073 5.69931 0.865016 5.45735 0.618844C5.21539 0.372671 4.81967 0.36926 4.5735 0.611224L0.561884 4.55426ZM15.0755 5.74636C15.4207 5.74934 15.7029 5.47194 15.7059 5.12678C15.7089 4.78161 15.4315 4.49939 15.0863 4.49641L15.0755 5.74636ZM0.994612 5.62498L15.0755 5.74636L15.0863 4.49641L1.00539 4.37502L0.994612 5.62498Z" fill="#F5F5F5"/>
+</svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
diff --git a/my-app/src/lib/arrow-r.svelte b/my-app/src/lib/arrow-r.svelte
@@ -0,0 +1,7 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.4381 4.55426C15.6843 4.79623 15.6877 5.19194 15.4457 5.43812L11.5027 9.44973C11.2607 9.6959 10.865 9.69931 10.6188 9.45735C10.3727 9.21539 10.3693 8.81967 10.6112 8.5735L14.1161 5.00762L10.5503 1.50269C10.3041 1.26073 10.3007 0.865016 10.5426 0.618844C10.7846 0.372671 11.1803 0.36926 11.4265 0.611224L15.4381 4.55426ZM0.924462 5.74636C0.579297 5.74934 0.297073 5.47194 0.294098 5.12678C0.291122 4.78161 0.568522 4.49939 0.913687 4.49641L0.924462 5.74636ZM15.0054 5.62498L0.924462 5.74636L0.913687 4.49641L14.9946 4.37502L15.0054 5.62498Z" fill="#F5F5F5"/>
+    </svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
diff --git a/my-app/src/lib/meshgrad-blue.svelte b/my-app/src/lib/meshgrad-blue.svelte
@@ -0,0 +1,12 @@
+<svg width="224" height="222" viewBox="0 0 224 222" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="224" height="222" fill="url(#pattern0_2_85)"/>
+    <defs>
+    <pattern id="pattern0_2_85" patternContentUnits="objectBoundingBox" width="1" height="1">
+    <use xlink:href="#image0_2_85" transform="scale(0.000824402 0.000831255)"/>
+    </pattern>
+    </defs>
+</svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
diff --git a/my-app/src/lib/meshgrad-green.svelte b/my-app/src/lib/meshgrad-green.svelte
@@ -0,0 +1,12 @@
+<svg width="213" height="258" viewBox="0 0 213 258" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.0671387" y="41.4482" width="160.143" height="223.596" transform="rotate(-15 0.0671387 41.4482)" fill="url(#pattern0_2_237)"/>
+<defs>
+<pattern id="pattern0_2_237" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2_237" transform="scale(0.00101215 0.000863558)"/>
+</pattern>
+</defs>
+</svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
diff --git a/my-app/src/lib/meshgrad-pink.svelte b/my-app/src/lib/meshgrad-pink.svelte
@@ -0,0 +1,12 @@
+<svg width="229" height="228" viewBox="0 0 229 228" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="228.089" width="227.744" height="228" transform="rotate(90 228.089 0)" fill="url(#pattern0_2_287)"/>
+<defs>
+<pattern id="pattern0_2_287" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2_287" transform="scale(0.000793651 0.000792393)"/>
+</pattern>
+</defs>
+</svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
diff --git a/my-app/src/lib/meshgrad-red.svelte b/my-app/src/lib/meshgrad-red.svelte
@@ -0,0 +1,12 @@
+<svg width="201" height="244" viewBox="0 0 201 244" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="200.941" height="244" fill="url(#pattern0_2_184)"/>
+<defs>
+<pattern id="pattern0_2_184" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2_184" transform="scale(0.00095511 0.000790514)"/>
+</pattern>
+</defs>
+</svg>
+
+<style>
+    svg {width: 13em; height: 13em;}
+</style>
diff --git a/my-app/src/routes/introduction-task/+page.svelte b/my-app/src/routes/introduction-task/+page.svelte
@@ -1,9 +1,69 @@
 <script>
+    	import MeshgradBlue from '$lib/meshgrad-blue';
+        import MeshgradRed from '$lib/meshgrad-red';
+        import MeshgradGreen from '$lib/meshgrad-green';
+        import MeshgradPink from '$lib/meshgrad-pink';
+        import ArrowL from '$lib/arrow-l';
+        import ArrowR from '$lib/arrow-r';
 
 </script>
 
 
 <main>
+    <header>
+        <h1>Introductie rouwtaken</h1>
+
+        <div aria-busy="true" aria-describedby="progress-bar"></div>
+        <progress id="progress-bar" value="20" max="100"></progress>
+
+    </header>
+
+    <section id="rt-1">
+        <h2>Rouwtaak 1</h2>
+        <h3>Het verlies aanvaarden</h3>
+        <p>Ontdek hoe je de realiteit van het verlies kunt omarmen.</p>
+        <MeshgradBlue />
+
+        <a href="#rt-2">
+            <ArrowR /></a>
+    </section>
+
+    <section id="rt-2">
+        <h2>Rouwtaak 2</h2>
+        <h3>De pijn doorvoelen</h3>
+        <p>Sta jezelf toe om de pijn te voelen en leer om deze op jouw manier te verwerken. </p>
+        <MeshgradRed />
+
+        <a href="#rt-1">
+            <ArrowL /></a>
+        <a href="#rt-3">
+            <ArrowR /></a>
+    </section>
+
+    <section id="rt-3">
+        <h2>Rouwtaak 3</h2>
+        <h3>Verder in verandering</h3>
+        <p>Vind jouw weg in een wereld die nu anders is door het verlies van je dierbare.</p>
+        <MeshgradGreen />
+
+        <a href="#rt-2">
+            <ArrowL /></a>
+        <a href="#rt-4">
+            <ArrowR /></a>
+    </section>
+
+    <section id="rt-4">
+        <h2>Rouwtaak 4</h2>
+        <h3>Emotioneel verder gaan</h3>
+        <p>Ontdek hoe je een nieuw pad kunt inslaan terwijl je het verlies een betekenisvolle plek geeft in je leven.</p>
+        <MeshgradPink />
+
+        <a href="#rt-3">
+            <ArrowL /></a>
+        <a href="#">
+            <ArrowR /></a>
+
+    </section>
 
 </main>