web: website is done functionally

web/public/input.css

@@ -1,5 +1,9 @@
 @import "tailwindcss";
 
+@utility profile-background{
+	background-color: #c6cdd9;
+	
+}
 
 
 @utility main-colour {

web/public/main.css

@@ -5,8 +5,8 @@
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Courier New", monospace;
+      "Liberation Mono", "Courier New", monospace;
     --color-red-50: oklch(0.971 0.013 17.38);
     --color-red-100: oklch(0.936 0.032 17.717);
     --color-red-200: oklch(0.885 0.062 18.334);
@@ -327,9 +327,12 @@
     --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+      0 8px 10px -6px rgb(0 0 0 / 0.1);
     --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
     --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
@@ -536,6 +539,9 @@
   .top-\[50\%\] {
     top: 50%;
   }
+  .top-\[55\%\] {
+    top: 55%;
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -545,24 +551,9 @@
   .left-\[50\%\] {
     left: 50%;
   }
-  .mx-5 {
-    margin-inline: calc(var(--spacing) * 5);
-  }
-  .mx-\[\%\] {
-    margin-inline: %;
-  }
-  .mx-\[1\%\] {
-    margin-inline: 1%;
-  }
   .mx-\[2\.5\%\] {
     margin-inline: 2.5%;
   }
-  .mx-\[5\%\] {
-    margin-inline: 5%;
-  }
-  .mx-\[15\%\] {
-    margin-inline: 15%;
-  }
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
@@ -590,70 +581,23 @@
   .aspect-auto {
     aspect-ratio: auto;
   }
-  .aspect-square {
-    aspect-ratio: 1 / 1;
-  }
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
-  .size-1 {
-    width: calc(var(--spacing) * 1);
-    height: calc(var(--spacing) * 1);
-  }
-  .size-1\.5 {
-    width: calc(var(--spacing) * 1.5);
-    height: calc(var(--spacing) * 1.5);
-  }
-  .h-2 {
-    height: calc(var(--spacing) * 2);
-  }
-  .h-2\.5 {
-    height: calc(var(--spacing) * 2.5);
-  }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
-  .h-25 {
-    height: calc(var(--spacing) * 25);
-  }
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
-  .h-50 {
-    height: calc(var(--spacing) * 50);
-  }
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
-  .h-500 {
-    height: calc(var(--spacing) * 500);
-  }
-  .h-\[2\.5\] {
-    height: 2.5;
-  }
-  .h-\[25\%\] {
-    height: 25%;
-  }
-  .h-\[25\] {
-    height: 25;
-  }
-  .h-\[2\] {
-    height: 2;
-  }
-  .h-\[30\%\] {
-    height: 30%;
-  }
   .h-\[30vw\] {
     height: 30vw;
   }
-  .h-\[60\%\] {
+  .h-\[90vh\] {
-    height: 60%;
+    height: 90vh;
-  }
-  .h-\[60\] {
-    height: 60;
   }
   .h-fit {
     height: fit-content;
@@ -676,51 +620,24 @@
   .w-3\/4 {
     width: calc(3/4 * 100%);
   }
-  .w-25 {
+  .w-40 {
-    width: calc(var(--spacing) * 25);
+    width: calc(var(--spacing) * 40);
   }
   .w-60 {
     width: calc(var(--spacing) * 60);
   }
-  .w-\[2\%\] {
-    width: 2%;
-  }
-  .w-\[20\%\] {
-    width: 20%;
-  }
   .w-\[30\%\] {
     width: 30%;
   }
-  .w-\[30\] {
-    width: 30;
-  }
   .w-\[30vw\] {
     width: 30vw;
   }
   .w-\[35\%\] {
     width: 35%;
   }
-  .w-\[3\] {
-    width: 3;
-  }
-  .w-\[15\%\] {
-    width: 15%;
-  }
-  .w-\[25\%\] {
-    width: 25%;
-  }
-  .w-\[25\\\\35\%\] {
-    width: 25\\35%;
-  }
   .w-\[40vw\] {
     width: 40vw;
   }
-  .w-\[60\%\] {
-    width: 60%;
-  }
-  .w-\[60\] {
-    width: 60;
-  }
   .w-fit {
     width: fit-content;
   }
@@ -756,24 +673,12 @@
   .flex-row {
     flex-direction: row;
   }
-  .flex-row-reverse {
-    flex-direction: row-reverse;
-  }
   .justify-around {
     justify-content: space-around;
   }
   .justify-center {
     justify-content: center;
   }
-  .justify-end {
-    justify-content: flex-end;
-  }
-  .justify-items-start {
-    justify-items: start;
-  }
-  .self-auto {
-    align-self: auto;
-  }
   .self-center {
     align-self: center;
   }
@@ -797,9 +702,6 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-amber-400 {
-    border-color: var(--color-amber-400);
-  }
   .border-black {
     border-color: var(--color-black);
   }
@@ -827,93 +729,30 @@
   .bg-slate-200 {
     background-color: var(--color-slate-200);
   }
+  .profile-background {
+    background-color: #c6cdd9;
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
-  .px-0 {
-    padding-inline: calc(var(--spacing) * 0);
-  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
-  .px-2 {
-    padding-inline: calc(var(--spacing) * 2);
-  }
-  .px-2\.5 {
-    padding-inline: calc(var(--spacing) * 2.5);
-  }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
   .px-5 {
     padding-inline: calc(var(--spacing) * 5);
   }
-  .px-6 {
-    padding-inline: calc(var(--spacing) * 6);
-  }
-  .px-10 {
-    padding-inline: calc(var(--spacing) * 10);
-  }
-  .px-14 {
-    padding-inline: calc(var(--spacing) * 14);
-  }
   .px-15 {
     padding-inline: calc(var(--spacing) * 15);
   }
-  .px-16 {
-    padding-inline: calc(var(--spacing) * 16);
-  }
-  .px-18 {
-    padding-inline: calc(var(--spacing) * 18);
-  }
-  .px-20 {
-    padding-inline: calc(var(--spacing) * 20);
-  }
-  .px-28 {
-    padding-inline: calc(var(--spacing) * 28);
-  }
-  .px-35 {
-    padding-inline: calc(var(--spacing) * 35);
-  }
   .px-37 {
     padding-inline: calc(var(--spacing) * 37);
   }
-  .px-38 {
-    padding-inline: calc(var(--spacing) * 38);
-  }
-  .px-40 {
-    padding-inline: calc(var(--spacing) * 40);
-  }
-  .px-\[-10\] {
-    padding-inline: -10;
-  }
-  .px-\[5vw\] {
-    padding-inline: 5vw;
-  }
-  .px-\[7vw\] {
-    padding-inline: 7vw;
-  }
-  .px-\[8vw\] {
-    padding-inline: 8vw;
-  }
   .px-\[15vw\] {
     padding-inline: 15vw;
   }
-  .px-\[20vw\] {
-    padding-inline: 20vw;
-  }
-  .px-\[30px\] {
-    padding-inline: 30px;
-  }
-  .px-\[30vw\] {
-    padding-inline: 30vw;
-  }
-  .px-\[vw\] {
-    padding-inline: vw;
-  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -923,18 +762,9 @@
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
-  .py-12 {
-    padding-block: calc(var(--spacing) * 12);
-  }
-  .py-20 {
-    padding-block: calc(var(--spacing) * 20);
-  }
   .pt-28 {
     padding-top: calc(var(--spacing) * 28);
   }
-  .pr-7 {
-    padding-right: calc(var(--spacing) * 7);
-  }
   .pr-\[7vw\] {
     padding-right: 7vw;
   }
@@ -944,12 +774,6 @@
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
-  .pl-15 {
-    padding-left: calc(var(--spacing) * 15);
-  }
-  .pl-25 {
-    padding-left: calc(var(--spacing) * 25);
-  }
   .pl-28 {
     padding-left: calc(var(--spacing) * 28);
   }
@@ -967,39 +791,30 @@
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
   .text-\[25px\] {
     font-size: 25px;
   }
-  .text-\[40px\] {
-    font-size: 40px;
-  }
-  .text-\[60px\] {
-    font-size: 60px;
-  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
-  .text-\[2\] {
-    color: 2;
-  }
-  .text-\[60\] {
-    color: 60;
-  }
   .uppercase {
     text-transform: uppercase;
   }
   .underline {
     text-decoration-line: underline;
   }
+  .opacity-40 {
+    opacity: 40%;
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
   .file\:mr-4 {
     &::file-selector-button {
       margin-right: calc(var(--spacing) * 4);

web/public/profile.html

@@ -8,7 +8,7 @@
 		<link rel="icon" type="image/x-icon" href="./img/SOS_Logo_WBG.png" />
 		<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
 	</head>
-	<body class="h-screen w-screen main-colour">
+	<body class="h-screen w-screen profile-background">
 		<header class="flex w-full h-20 secondary-colour fixed top-0 left-0 right-0">
 			<img src="./img/SOS_Logo_WBG.png" alt="product logo" class="p-1 ml-10" />
 			<nav class="w-full flex justify-around">
@@ -22,6 +22,11 @@
 			</nav>
 		</header>
 		<div class="h-20"></div>
+		<img
+			src="./img/SSLR_CopyrightLogo.png"
+			alt=""
+			class="h-[90vh] opacity-40 absolute top-[55%] left-[50%] translate-[-50%] select-none"
+		/>
 		<dialog
 			id="signInDialog"
 			class="section-colour px-5 w-[40vw] absolute top-[50%] left-[50%] translate-[-50%] backdrop:opacity-20 backdrop:bg-zinc800"
@@ -105,18 +110,17 @@
 				</button>
 			</form>
 		</dialog>
-		<section class="h-fit w-full py-10 px-[15vw]">
+		<section class="h-fit w-full py-10 px-[15vw] " hidden id="profile">
-			<img src="./img/SSLR_CopyrightLogo.png" alt="Logo Of SSLR" class="py-20 " />
+			<b>Profile</b>
-			<b hidden>Profile</b>
+			<img src="" class="" alt="Profile picture" />
-			<img hidden src="" class="" alt="Profile picture" />
+			<h1><b>Name:</b></h1>
-			<h1 hidden><b>Name:</b></h1>
+			<h1><b>Score:</b></h1>
-			<h1 hidden><b>Score:</b></h1>
+			<h1><b>Days Played:</b></h1>
-			<h1 hidden><b>Days Played:</b></h1>
+			<h1><b>Customers Helped Correct:</b></h1>
-			<h1 hidden><b>Customers Helped Correct:</b></h1>
+			<h1><b>Customers Helped Wrongly:</b></h1>
-			<h1 hidden><b>Customers Helped Wrongly:</b></h1>
+			<h1><b>Accuracy:</b></h1>
-			<h1 hidden><b>Accuracy:</b></h1>
 		</section>
 
-		<script  src="./profile.js"></script>
+		<script src="./profile.js"></script>
 	</body>
 </html>

web/public/profile.js

@@ -11,6 +11,15 @@ const signUpDialog = document.getElementById("signUpDialog");
 
 var uid = "";
 
+function userInfo(url, name, Score, daysPlayed, helpedCorrectly, helpedWrongly) {
+	this.url = url;
+	this.name = name;
+	this.Score = Score;
+	this.daysPlayed = daysPlayed;
+	this.helpedCorrectly = helpedCorrectly;
+	this.helpedWrongly = helpedWrongly;
+}
+
 document.addEventListener("DOMContentLoaded", (event) => {
 	Start();
 });
@@ -52,14 +61,32 @@ function closeDialog() {
 	signUpDialog.close();
 }
 async function Start() {
-	const { data } = await Supabase.auth.getSession();
+	const { data: authData } = await Supabase.auth.getSession();
-	console.log(data);
+	if (authData.session == null || authData.session == "") {
-	if (data.session == null || data.session == "") {
 		uid = "";
 		ShowSignUp();
-	} else {
+		return
-		uid = data.session.user.id;
 	}
+	uid=authData.session.user.id
+	console.log(authData.session.user.id);
+	const { data, error } = await Supabase.from("users").select().eq("uid", uid);
+	console.log(data);
+	if (error) {
+		console.error("Error getting data:", error.message);
+		return;
+	}
+	var tempData=data[0];
+	var temp = new userInfo(
+		tempData.profilePictureUrl,
+		tempData.displayName,
+		tempData.score,
+		tempData.daysPlayed,
+		tempData.customersHelpedWrongly,
+		tempData.customersHelpedCorrectly
+	);
+	closeDialog();
+	showData(temp)
+	
 }
 
 async function SignIn(email, password) {
@@ -77,13 +104,23 @@ async function SignIn(email, password) {
 
 	console.log("User signed in:", auth);
 	uid = auth.user.id;
-	const { data, error } = await Supabase.from("users").select();
+	const { data, error } = await Supabase.from("users").select().eq("uid", uid);
 	console.log(data);
 	if (error) {
 		console.error("Error getting data:", error.message);
 		return;
 	}
+	var tempData=data[0]
+	var temp = new userInfo(
+		tempData.profilePictureUrl,
+		tempData.displayName,
+		tempData.score,
+		tempData.daysPlayed,
+		tempData.customersHelpedWrongly,
+		tempData.customersHelpedCorrectly
+	);
 	closeDialog();
+	showData(temp)
 }
 
 async function SignUp(email, password, username, file) {
@@ -106,7 +143,6 @@ async function SignUp(email, password, username, file) {
 		console.error("Upload failed:", storeError.message);
 		return;
 	}
-
 	const publicUrlData = Supabase.storage.from("Avatar").getPublicUrl(fileName);
 	const publicUrl = publicUrlData.data.publicUrl;
 	console.log("Public URL:", publicUrl);
@@ -115,4 +151,36 @@ async function SignUp(email, password, username, file) {
 		displayName: username,
 		profilePictureUrl: publicUrl,
 	});
+	var temp=new userInfo(
+		publicUrl,
+		username,
+		0,
+		0,
+		0,
+		0,
+	)
+	showData(temp)
+}
+function showData(userInfo) {
+	const profile = document.getElementById("profile");
+	console.log(profile.outerHTML);
+	var Accuracy=(userInfo.helpedCorrectly / (userInfo.helpedCorrectly + userInfo.helpedWrongly)) *
+	100
+	if(Accuracy==NaN)
+	{
+		Accuracy=0
+	}
+
+	profile.outerHTML = `<section class="h-fit w-full py-10 px-[15vw] "  id="profile">
+			<b>Profile</b>
+			<img src="${userInfo.url}" class="h-40 w-40 rounded-full" alt="Profile picture" />
+			<h1><b>Name:</b>${userInfo.name}</h1>
+			<h1><b>Score:</b>${userInfo.Score}</h1>
+			<h1><b>Days Played:</b>${userInfo.daysPlayed}</h1>
+			<h1><b>Customers Helped Correct:</b>${userInfo.helpedCorrectly}</h1>
+			<h1><b>Customers Helped Wrongly:</b>${userInfo.helpedWrongly}</h1>
+			<h1><b>Accuracy:</b>${
+				Accuracy
+			}%</h1>
+		</section>`;
 }