added the html

README.md

@@ -1,38 +1 @@
-# create-svelte
+Helpdesk Interface for MPE employees
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/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.

src/components/layout/Header.svelte

@@ -0,0 +1,3 @@
+<header class="w-full flex flex-row p-5">
+    <img class="h-20 flex" src="https://www.mpe.ca/wp-content/uploads/2022/06/MPE_final-logo_CMYK-AnEnglobeCompany.png" alt="MPE Logo">
+</header>

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
     import "../app.css";
-</script>
+  </script>
   
-<slot />
+  <slot />

src/routes/+page.svelte

@@ -1,2 +1,52 @@
-<h1>Welcome to SvelteKit</h1>
+<script>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+  import Header from '../components/layout/Header.svelte';
+
+  console.log("%c Made with \u2764 by your IT team", "color: white; font-size: 15px; background-color: cyan; padding: 10px;");
+
+  let name = '';
+  let body = '';
+
+  const handleSubmit = async (event) => {
+    event.preventDefault(); // Prevent the form from submitting and refreshing the page
+
+    const postData = {
+      name,
+      body
+    };
+
+    try {
+      const response = await fetch('http://helpdeskapi.mpe.ca/api/message', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(postData)
+      });
+
+      if (response.ok) {
+        console.log('POST request successful');
+      } else {
+        console.error('Error:', response.status);
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+</script>
+
+<Header />
+
+<div class="flex flex-col w-full items-center align-middle">
+    <form class="bg-green p-20 flex flex-col rounded-xl border-2 shadow-xl md:w-1/2 sm:w-full" on:submit={handleSubmit}>
+        <div class="flex flex-col items-center w-full">
+            <h1 class="fle font-sans text-3xl">MPE Helpdesk</h1>
+        </div>
+        <label class="block mb-2">Name:</label>
+        <input id="name" class="border border-gray-300 rounded-md py-2 px-4 mb-4 w-full" type="text" placeholder="Enter your full name here:" bind:value={name}/>
+        <label class="block mb-2">Question/Issue:</label>
+        <textarea id="body" class="border border-gray-300 rounded-md py-2 px-4 mb-4 w-full h-60" placeholder="Enter your question/issue here:" bind:value={body}></textarea>
+        <div class="w-full flex flex-row justify-end">
+            <input class="bg-blue-600 rounded-md w-1/3 text-white p-3 shadow-xl hover:bg-blue-800" type="submit" name="submit" id="submit" value="Submit"/>
+        </div>
+    </form>
+</div>