contact

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": true
+}

src/components/aboutme.astro

@@ -1,7 +1,7 @@
 <script is:inline>
-  function closeWindow() {
-    document.getElementById("aboutme").style.display = "none";
-  }
+  // function closeWindow() {
+  //   document.getElementById("aboutme").style.display = "none";
+  // }
 
   function raiseUp() {
     let els = document.getElementsByClassName("window");
@@ -34,8 +34,8 @@
   <div id="aboutmeheader" class="title-bar">
     <div class="title-bar-text">About Me</div>
     <div class="title-bar-controls">
-      <button onclick="closeWindow()" aria-label="Minimize"></button>
-      <button onclick="closeWindow()" aria-label="Close"></button>
+      <button onclick="document.getElementById('aboutme').style.display = 'none'" aria-label="Minimize"></button>
+      <button onclick="document.getElementById('aboutme').style.display = 'none'" aria-label="Close"></button>
     </div>
   </div>
   <div class="window-body">

src/components/app.astro

@@ -5,7 +5,6 @@ let app = Astro.props.item;
 
 let itemName = app.name.replace(" ", "")
 
-
 ---
 
 <a id={itemName} data-id={app.name} href={app.link}>

src/components/contact.astro

@@ -0,0 +1,119 @@
+<script is:inline>
+	function raiseUpContact() {
+		let els = document.getElementsByClassName("window");
+
+		let elArray = Array.from(els);
+
+		// find the highest z-index
+		let highestIndex = 0;
+
+		for (let element in elArray) {
+			let zindex = parseInt(elArray[element].style.zIndex);
+			if (zindex > highestIndex) {
+				highestIndex = zindex;
+			}
+		}
+
+		// set the highest z-index plus one
+		document.getElementById("contact").style.zIndex = (
+			highestIndex + 1
+		).toString();
+	}
+</script>
+
+<div
+	id="contact"
+	class="window"
+	style="width: 70%; height: 45%; position: absolute; left: 15%; top: 22%; display: none;"
+	onclick="raiseUpContact()"
+>
+	<div id="contactheader" class="title-bar">
+		<div class="title-bar-text">Contact</div>
+		<div class="title-bar-controls">
+			<button
+				onclick="document.getElementById('contact').style.display = 'none'"
+				aria-label="Minimize"></button>
+			<button
+				onclick="document.getElementById('contact').style.display = 'none'"
+				aria-label="Close"></button>
+		</div>
+	</div>
+	<div class="window-body">
+		<div class="field-row-stacked">
+			<!-- prettier-ignore -->
+			<textarea
+          readonly
+          id="text20"
+          style="font-size: 25px; resize: none; padding: 10px; height: 37vh;"
+          >Email : simon@simo.ng
+Discord : s1monlol
+        </textarea>
+		</div>
+	</div>
+</div>
+
+<script is:inline>
+	dragElement(document.getElementById("contact"));
+
+	function dragElement(elmnt) {
+		var pos1 = 0,
+			pos2 = 0,
+			pos3 = 0,
+			pos4 = 0;
+
+		if (document.getElementById(elmnt.id + "header")) {
+			// If present, the header is where you move the DIV from:
+			document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+			document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
+		} else {
+			// Otherwise, move the DIV from anywhere inside the DIV:
+			elmnt.onmousedown = dragMouseDown;
+			elmnt.ontouchstart = dragMouseDown;
+		}
+
+		function dragMouseDown(e) {
+			// e.preventDefault();
+			raiseUpContact();
+			// Get the initial touch point for touch events
+			if (e.type == "touchstart") {
+				pos3 = e.touches[0].clientX;
+				pos4 = e.touches[0].clientY;
+			} else {
+				pos3 = e.clientX;
+				pos4 = e.clientY;
+			}
+			document.onmouseup = closeDragElement;
+			document.ontouchend = closeDragElement;
+			document.onmousemove = elementDrag;
+			document.ontouchmove = elementDrag;
+		}
+
+		function elementDrag(e) {
+			// e.preventDefault();
+			if (e.type == "touchmove") {
+				// Calculate the new cursor position for touch
+				pos1 = pos3 - e.touches[0].clientX;
+				pos2 = pos4 - e.touches[0].clientY;
+				pos3 = e.touches[0].clientX;
+				pos4 = e.touches[0].clientY;
+			} else {
+				// Calculate the new cursor position for mouse
+				pos1 = pos3 - e.clientX;
+				pos2 = pos4 - e.clientY;
+				pos3 = e.clientX;
+				pos4 = e.clientY;
+			}
+			// Set the element's new position
+			elmnt.style.top = elmnt.offsetTop - pos2 + "px";
+			elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
+		}
+
+		function closeDragElement() {
+			// Stop moving when mouse button or touch is released
+			document.onmouseup = null;
+			document.ontouchend = null;
+			document.onmousemove = null;
+			document.ontouchmove = null;
+		}
+	}
+</script>

src/pages/index.astro

@@ -15,16 +15,20 @@ import blog from "../assets/apps/blog.png";
 import contact from "../assets/apps/contact.png";
 import Redirect from "../components/redirect.astro";
 
-function raiseUpSpec(id) {
+import Contact from "../components/contact.astro"
+
+/** Raise up window with given ID */
+function raiseUpSpec(id: string) {
   let els = document.getElementsByClassName("window");
 
-  let elArray = Array.from(els);
+  let elArray = Array.from(els as HTMLCollectionOf<HTMLElement>);
+
+  
 
   // find the highest z-index
   let highestIndex = 0;
 
   for (let element in elArray) {
-    // @ts-ignore
     let zindex = parseInt(elArray[element].style.zIndex);
     if (zindex > highestIndex) {
       highestIndex = zindex;
@@ -58,7 +62,7 @@ let apps: app[] = [
     name: "About Me",
     logo: me.src,
     onclick: () => {
-      String(raiseUpSpec("aboutme"));
+      raiseUpSpec("aboutme");
       document.getElementById("aboutme").style.display = "block";
     },
     row: 1,
@@ -95,7 +99,7 @@ let apps: app[] = [
       document.getElementById("redirect").style.display = "block";
       document.getElementById("redirect").dataset.redirecturl =
         "https://github.com/s1monlol/";
-      String(updateRedirectMessage());
+      updateRedirectMessage()
     },
     row: 2,
   },
@@ -103,6 +107,10 @@ let apps: app[] = [
     name: "Contact",
     logo: contact.src,
     row: 2,
+    onclick: () => {
+      raiseUpSpec("contact");
+      document.getElementById("contact").style.display = "block";
+    },
   },
 ];
 
@@ -118,7 +126,7 @@ let clientFunctions: Function[] | String[] = [
 
 clientFunctions = clientFunctions.map((item) => String(item))
 
-apps = apps.map((item, index) => {
+apps = apps.map((item) => {
   item.onclick = String(item.onclick);
 
   return item;
@@ -140,7 +148,7 @@ apps = apps.map((item, index) => {
 
 <Aboutme />
 <Redirect />
-
+<Contact />
 <Taskbar />
 
 <script define:vars={{ apps, clientFunctions }}>

svelte.config.js

@@ -3,3 +3,4 @@ import { vitePreprocess } from '@astrojs/svelte';
 export default {
 	preprocess: vitePreprocess(),
 };
+

tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "astro/tsconfigs/base"
-}
+	"extends": "astro/tsconfigs/base"
+}