web: updated pages

web/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.6",
+    "tailwindcss": "^4.0.6"
+  }
+}

web/public/about.html

@@ -23,15 +23,22 @@
 			</nav>
 		</header>
 		<div class="h-20"></div>
-		<section class="flex justify-center py-10 px-[15vw] flex-col">
+		<section class="flex justify-center py-10 px-[15vw] flex-row">
 			<img
 				src="./img/SSLR_CompanyLogo.png"
 				alt="Logo Of SSLR"
-				class="py-4 h-[30vw] w-[30vw] self-center"
+				class="py-4 h-[30vw] w-[30vw] self-start"
 			/>
-			<h1 class="font-bold text-4xl text-center">About SSLR</h1>
+			<img
+			src="./img/SOS_Logo_WBG.png"
+			alt="Logo Of Our Game"
+			class="py-4 h-[30vw] w-[30vw] self-end"
+			/>
+			
 		</section>
 		<section class="section-colour h-fit w-full py-10 px-[15vw]">
+			<h1 class="font-bold text-4xl text-center">About SSLR</h1>
+			<br>
 			<h2>
 				"Sweet Starry Lil’ Rabbits" is a name born from the shared initials of our four
 				founders—Sai, Shannon, Livinia, and Ryan. Our name reflects not only who we are
@@ -51,36 +58,34 @@
 		<section class="h-fit w-full y py-8 px-[15vw]">
 			<h1 class="text-2xl font-bold pb-2">WHO ARE WE</h1>
 			<div class="flex">
-				<article class="w-[20%] mx-[2.5%]">
+				<article class="w-[35%]  mx-[2.5%]">
-					<h1>Shannon</h1>
+					<h1 class= "font-bold">Shannon</h1>
-					<img src="" alt="picture of Shannon" />
+					<img class="aspect-auto rounded-full w-60 h-60" src="./img/Shannon.jpg" alt="picture of Shannon" />
-					<h2><b>Roles:</b>Scrum Master,Art Director, Assistant Level Designer</h2>
+					<h2><b>Roles: </b>Scrum Master,Art Director, Assistant Level Designer</h2>
 				</article>
-				<article class="w-[20%] mx-[2.5%]">
+				<article class="w-[35%] mx-[2.5%]">
-					<h1>Ryan</h1>
+					<h1 class="font-bold">Ryan</h1>
-					<img src="" alt="picture of Ryan" />
+					<img class="aspect-auto rounded-full" src="./img/Ryan.jpg" alt="picture of Ryan" />
 					<h2>
-						<b>Roles:</b>Product Owner, Lead Web Developer , Assistant Game Develope
+						<b>Roles: </b>Product Owner, Lead Web Developer , Assistant Game Develope
 					</h2>
 				</article>
-				<article class="w-[20%] mx-[2.5%]">
+				<article class="w-[35%] mx-[2.5%]">
-					<h1>Sai</h1>
+					<h1 class="font-bold">Sai</h1>
-					<img src="" alt="picture of Sai" />
+					<img class="aspect-auto rounded-full" src="./img/Sai.jpg" alt="picture of Sai" />
 					<h2>
-						<b>Roles:</b>Lead Game Designer, Marketing Lead, Assistant Web Developer
+						<b>Roles:  </b>Lead Game Designer, Marketing Lead, Assistant Web Developer
 					</h2>
 				</article>
-				<article class="w-[20%] mx-[2.5%]">
+				<article class="w-[30%] mx-[2.5%]">
-					<h1>Livinia</h1>
+					<h1 class="font-bold">Livinia</h1>
-					<img src="" alt="picture of Livinia" />
+					<img class="aspect-auto rounded-full" src="./img/Livinia.jpg" alt="picture of Livinia" />
 					<h2>
-						<b>Roles:</b>Lead Game Developer, UI/UX Lead, Assistant Graphic Designer
+						<b>Roles: </b>Lead Game Developer, UI/UX Lead, Assistant Graphic Designer
 					</h2>
 				</article>
 			</div>
 		</section>
-		<footer class="secondary-colour h-40">
+		
-			<h2></h2>
-		</footer>
 	</body>
 </html>

web/public/index.html

@@ -24,21 +24,26 @@
 			<img
 				src="./img/gameSSPlaceholder.jpg"
 				alt="image of game"
-				class="w-2/3 aspect-video"
+				class="w-2/3 aspect-video"	
 			/>
 		</section>
-		<section class="section-colour h-fit w-full py-8 px-[15vw]">
+		<section class="section-colour h-fit w-full py-10 pr-[7vw] pl-28">
-			<h1 class="text-2xl font-bold pb-2">SYNOPSIS</h1>
+			<h1 class="text-2xl font-bold pb-2 px-37">SYNOPSIS</h1>
-			<h2>
+			<div class="flex flex-row">
-				In Solace of Service, players step into the role of an administrator at a busy
+				<img width="150" src="./img/SOS_Logo_WBG.png" alt="SSLR Logo"/>
-				social service center, where each day presents a new challenge that tests their
+				<h2>
-				compassion, critical thinking, and resource management skills. The objective is to
+					In Solace of Service, players step into the role of an administrator at a busy
-				sort individuals from diverse backgrounds based on their specific needs and direct
+					social service center, where each day presents a new challenge that tests their
-				them to the appropriate sectors for assistance. This game tests players compassion
+					compassion, critical thinking, and resource management skills. The objective is to
-				and learning when to step up and help others in need. The experience is both
+					sort individuals from diverse backgrounds based on their specific needs and direct
-				demanding and rewarding, as players navigate the complexities of helping others
+					them to the appropriate sectors for assistance. This game tests players compassion
-				while ensuring that no one is left behind.
+					and learning when to step up and help others in need. The experience is both
-			</h2>
+					demanding and rewarding, as players navigate the complexities of helping others
+					while ensuring that no one is left behind.
+				</h2>
+				
+			</div>
+			
 		</section>
 		<section class="h-fit w-full y py-8 px-[15vw]">
 			<h1 class="text-2xl font-bold pb-2">OUR GOAL</h1>
@@ -75,13 +80,17 @@
 					alt="picture of a meta quest 2"
 					class="h-full aspect-video"
 				/>
-				<div class="px-2.5">
+				<div class="px-15">
-					<h2 class="font-bold">Minimum</h2>
+					<h2 class="font-bold text-[25px]">Minimum</h2>
 					<ul>
-						<li>OS: Meta Horizon OS</li>
+						<br>
-						<li>Chipset: Qualcomm Snapdragon XR2.</li>
+						<li class="text-[25px]">OS: Meta Horizon OS</li>
-						<li>GPU: Qualcomm Adreno 650.</li>
+						<br>
-						<li>RAM: 6 GB</li>
+						<li class="text-[25px]">Chipset: Qualcomm Snapdragon XR2.</li>
+						<br>
+						<li class="text-[25px]">GPU: Qualcomm Adreno 650.</li>
+						<br>
+						<li class="text-[25px]">RAM: 6 GB</li>
 					</ul>
 				</div>
 			</div>
@@ -93,8 +102,7 @@
 				>Click here for download</a
 			>
 		</section>
-		<footer class="secondary-colour h-40">
+		
-			<h2></h2>
+		
-		</footer>
 	</body>
 </html>

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,
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Liberation Mono", "Courier New", monospace;
+      "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,12 +327,9 @@
     --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),
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-      0 2px 4px -2px 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-lg: 0 10px 15px -3px 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);
-      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);
@@ -521,12 +518,18 @@
   }
 }
 @layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
   .absolute {
     position: absolute;
   }
   .fixed {
     position: fixed;
   }
+  .relative {
+    position: relative;
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -542,9 +545,24 @@
   .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);
   }
@@ -557,21 +575,86 @@
   .flex {
     display: flex;
   }
+  .hidden {
+    display: none;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .table {
+    display: table;
+  }
+  .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\%\] {
+    height: 60%;
+  }
+  .h-\[60\] {
+    height: 60;
+  }
   .h-fit {
     height: fit-content;
   }
@@ -581,21 +664,63 @@
   .h-screen {
     height: 100vh;
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
   .w-3\/4 {
     width: calc(3/4 * 100%);
   }
+  .w-25 {
+    width: calc(var(--spacing) * 25);
+  }
+  .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;
   }
@@ -605,36 +730,76 @@
   .w-screen {
     width: 100vw;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .translate-\[-50\%\] {
     --tw-translate-x: -50%;
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
   .cursor-pointer {
     cursor: pointer;
   }
   .cursor-text {
     cursor: text;
   }
+  .resize {
+    resize: both;
+  }
   .flex-col {
     flex-direction: column;
   }
+  .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;
   }
+  .self-end {
+    align-self: flex-end;
+  }
+  .self-start {
+    align-self: flex-start;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .border-2 {
     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);
   }
@@ -665,21 +830,90 @@
   .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);
   }
@@ -689,15 +923,36 @@
   .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;
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
   .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);
+  }
   .text-center {
     text-align: center;
   }
@@ -712,13 +967,39 @@
     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;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .file\:mr-4 {
     &::file-selector-button {
       margin-right: calc(var(--spacing) * 4);
@@ -810,6 +1091,31 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateX(0);
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateY(0);
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateZ(0);
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewX(0);
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewY(0);
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -819,3 +1125,8 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

web/public/profile.html

@@ -106,14 +106,15 @@
 			</form>
 		</dialog>
 		<section class="h-fit w-full py-10 px-[15vw]">
-			<b>Profile</b>
+			<img src="./img/SSLR_CopyrightLogo.png" alt="Logo Of SSLR" class="py-20 " />
-			<img src="" class="" alt="Profile picture" />
+			<b hidden>Profile</b>
-			<h1><b>Name:</b></h1>
+			<img hidden src="" class="" alt="Profile picture" />
-			<h1><b>Score:</b></h1>
+			<h1 hidden><b>Name:</b></h1>
-			<h1><b>Days Played:</b></h1>
+			<h1 hidden><b>Score:</b></h1>
-			<h1><b>Customers Helped Correct:</b></h1>
+			<h1 hidden><b>Days Played:</b></h1>
-			<h1><b>Customers Helped Wrongly:</b></h1>
+			<h1 hidden><b>Customers Helped Correct:</b></h1>
-			<h1><b>Accuracy:</b></h1>
+			<h1 hidden><b>Customers Helped Wrongly:</b></h1>
+			<h1 hidden><b>Accuracy:</b></h1>
 		</section>
 
 		<script  src="./profile.js"></script>