fdnd-task · TristanKatte · Nov 12, 2024 · Nov 14, 2024 · Nov 14, 2024 · Nov 14, 2024
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ad Frontend Design & Development - Agency
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/content/CONTENT.md b/content/CONTENT.md
@@ -0,0 +1 @@
+In deze folder kunnen teksten en visuals voor de web app geplaatst worden
diff --git a/design/community-drops.png b/design/community-drops.png
diff --git a/design/emotioneel-verder-gaan.png b/design/emotioneel-verder-gaan.png
diff --git a/design/verder-in-verandering.png b/design/verder-in-verandering.png
diff --git a/docs/INSTRUCTIONS.md b/docs/INSTRUCTIONS.md
diff --git a/docs/opdrachtomschrijving.png b/docs/opdrachtomschrijving.png
diff --git a/my-app/.gitignore b/my-app/.gitignore
@@ -0,0 +1,22 @@
+node_modules
+package-lock.json
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/my-app/.npmrc b/my-app/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/my-app/README.md b/my-app/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/my-app/package.json b/my-app/package.json
@@ -0,0 +1,25 @@
+{
+	"name": "my-app",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"svelte": "^5.2.2",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"agora-rtm-sdk": "^2.2.0",
+		"express": "^4.21.1",
+		"socket.io": "^4.8.1",
+		"socket.io-client": "^4.8.1",
+		"uuid": "^11.0.3"
+	}
+}
diff --git a/my-app/src/app.html b/my-app/src/app.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<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>
+	</body>
+</html>
diff --git a/my-app/src/lib/arrow-l.svelte b/my-app/src/lib/arrow-l.svelte
@@ -0,0 +1,12 @@
+
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>previous page</title>
+<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: 1.5em; height: 1.5em; }
+
+</style>
diff --git a/my-app/src/lib/arrow-r.svelte b/my-app/src/lib/arrow-r.svelte
@@ -0,0 +1,11 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>next page</title>
+    <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: 1.5em; height: 1.5em; }
+
+</style>
diff --git a/my-app/src/lib/blurgrad-blue.svelte b/my-app/src/lib/blurgrad-blue.svelte
@@ -0,0 +1,26 @@
+<img src="/gradients/Meshgrad-blue.png" alt="" width="100" height="100" class="blurred-image" />
+
+
+<style>
+    .blurred-image {
+        position: absolute;
+        background-color: rgb(107, 139, 255);
+        width: 300px;
+        height: 300px;
+        filter: blur(100px) brightness(1.4);
+        opacity: 0.8;
+        z-index: 0;
+        top: -120px;
+        right: -100px;
+    }
+
+    .blurred-image::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        filter: blur(300px);
+        z-index: 0;
+    }
+</style>
diff --git a/my-app/src/lib/blurgrad-green.svelte b/my-app/src/lib/blurgrad-green.svelte
@@ -0,0 +1,25 @@
+<img src="/gradients/Meshgrad-green.png" alt="" width="100" height="100" class="blurred-image"/>
+
+
+<style>
+    .blurred-image {
+        position: absolute;
+        background-color: rgba(255, 158, 31, 0.608);
+        width: 400px;
+        height: 400px;
+        filter: blur(200px) brightness(1.4);
+        opacity: 0.8;
+        z-index: 1;
+        left: -140px;
+    }
+
+    .blurred-image::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        filter: blur(400px);
+        z-index: 0;
+    }
+</style>
diff --git a/my-app/src/lib/blurgrad-pink.svelte b/my-app/src/lib/blurgrad-pink.svelte
@@ -0,0 +1,26 @@
+<img src="/gradients/Meshgrad-pink.png" alt="" width="100" height="100" class="blurred-image" />
+
+
+<style>
+    .blurred-image {
+        background-color: rgba(45, 45, 255, 0.872);
+        position: absolute;
+        width: 300px;
+        height: 300px;
+        filter: blur(200px) brightness(1.7);
+        right: -80px;
+        bottom: 180px;
+        opacity: 0.8;
+        z-index: 1;
+    }
+
+    .blurred-image::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        filter: blur(200px);
+        z-index: 0;
+    }
+</style>
diff --git a/my-app/src/lib/blurgrad-red.svelte b/my-app/src/lib/blurgrad-red.svelte
@@ -0,0 +1,25 @@
+<img src="/gradients/Meshgrad-red.png" alt="" width="100" height="100" class="blurred-image"/>
+
+
+<style>
+    .blurred-image {
+        position: absolute;
+        width: 400px;
+        height: 400px;
+        filter: blur(150px) brightness(1.4);
+        opacity: 0.8;
+        z-index: 0;
+        bottom: -160px;
+        right: -70px;
+    }
+
+    .blurred-image::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        filter: blur(300px);
+        z-index: 0;
+    }
+</style>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		In deze folder kunnen teksten en visuals voor de web app geplaatst worden