html opzet / introductie rouwtaken

#20 update / fix
lisavanmansom · Sep 30, 2024 · c433e76 · c433e76
1 parent 1d6c71d
commit c433e76
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 54 deletions.
diff --git a/my-app/src/app.html b/my-app/src/app.html
@@ -1,10 +1,12 @@
 <!doctype html>
-<html lang="en">
+<html lang="nl">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Drop & Heal</title>
 		%sveltekit.head%
+		<link rel="stylesheet" href="%sveltekit.assets%/css/global.css">
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

diff --git a/my-app/src/lib/meshgrad-blue.svelte b/my-app/src/lib/meshgrad-blue.svelte
@@ -1,12 +1,6 @@
-<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>
+<img src="/gradients/Meshgrad-blue.png" alt="" width="100" height="100" />
+
 
 <style>
-    svg {width: 13em; height: 13em;}
+    img {width: 13em; height: 13em;}
 </style>
diff --git a/my-app/src/lib/meshgrad-green.svelte b/my-app/src/lib/meshgrad-green.svelte
@@ -1,12 +1,6 @@
-<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>
+<img src="/gradients/Meshgrad-green.png" alt="" width="100" height="100" />
 
+
 <style>
-    svg {width: 13em; height: 13em;}
-</style>
+    img {width: 13em; height: 13em;}
+</style>
diff --git a/my-app/src/lib/meshgrad-pink.svelte b/my-app/src/lib/meshgrad-pink.svelte
@@ -1,12 +1,6 @@
-<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>
+<img src="/gradients/Meshgrad-pink.png" alt="" width="100" height="100" />
 
+
 <style>
-    svg {width: 13em; height: 13em;}
+    img {width: 13em; height: 13em;}
 </style>
diff --git a/my-app/src/lib/meshgrad-red.svelte b/my-app/src/lib/meshgrad-red.svelte
@@ -1,12 +1,6 @@
-<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>
+<img src="/gradients/Meshgrad-red.png" alt="" width="100" height="100" />
 
+
 <style>
-    svg {width: 13em; height: 13em;}
+    img {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,66 +1,73 @@
 <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';
+    	import MeshgradBlue from '$lib/meshgrad-blue.svelte';
+        import MeshgradRed from '$lib/meshgrad-red.svelte';
+        import MeshgradGreen from '$lib/meshgrad-green.svelte';
+        import MeshgradPink from '$lib/meshgrad-pink.svelte';
+        import ArrowL from '$lib/arrow-l.svelte';
+        import ArrowR from '$lib/arrow-r.svelte';
 
 </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>
+        <h2>Rouwtaak <em>1</em></h2>
         <h3>Het verlies aanvaarden</h3>
         <p>Ontdek hoe je de realiteit van het verlies kunt omarmen.</p>
         <MeshgradBlue />
 
+        <div aria-busy="true" aria-describedby="progress-bar"></div>
+        <progress value="20" max="100"></progress>
+
         <a href="#rt-2">
             <ArrowR /></a>
     </section>
 
     <section id="rt-2">
-        <h2>Rouwtaak 2</h2>
+        <h2>Rouwtaak <em>2</em></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 />
 
+        <div aria-busy="true" aria-describedby="progress-bar"></div>
+        <progress value="40" max="100"></progress>
+
         <a href="#rt-1">
             <ArrowL /></a>
         <a href="#rt-3">
             <ArrowR /></a>
     </section>
 
     <section id="rt-3">
-        <h2>Rouwtaak 3</h2>
+        <h2>Rouwtaak <em>3</em></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 />
 
+        <div aria-busy="true" aria-describedby="progress-bar"></div>
+        <progress value="60" max="100"></progress>
+
         <a href="#rt-2">
             <ArrowL /></a>
         <a href="#rt-4">
             <ArrowR /></a>
     </section>
 
     <section id="rt-4">
-        <h2>Rouwtaak 4</h2>
+        <h2>Rouwtaak <em>4</em></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 />
 
+        <div aria-busy="true" aria-describedby="progress-bar"></div>
+        <progress value="80" max="100"></progress>
+
         <a href="#rt-3">
             <ArrowL /></a>
-        <a href="#">
+        <a href="#rt-3">
             <ArrowR /></a>
 
     </section>
@@ -70,4 +77,12 @@
 
 <style>
     
+    h1, h2 {
+        font-family: Calvino;
+    }
+
+    em {
+        font-family: dm-serif;
+    }
+
 </style>
diff --git a/my-app/static/css/global.css b/my-app/static/css/global.css
@@ -6,6 +6,9 @@
     --rt-3: #6E9158;
     --rt-4: #7C6097;
 
+    --borderc-2: #B26161;
+    --borderc-4: #9279A9;
+
   }
 
   @font-face {

diff --git a/my-app/static/gradients/Meshgrad-blue.png b/my-app/static/gradients/Meshgrad-blue.png
diff --git a/my-app/static/gradients/Meshgrad-green.png b/my-app/static/gradients/Meshgrad-green.png
diff --git a/my-app/static/gradients/Meshgrad-pink.png b/my-app/static/gradients/Meshgrad-pink.png
diff --git a/my-app/static/gradients/Meshgrad-red.png b/my-app/static/gradients/Meshgrad-red.png