web: updated pages

This commit is contained in:
sippy-thinks 2025-02-17 02:54:48 +08:00
parent 5953046a78
commit edc8aee587
10 changed files with 1853 additions and 60 deletions

1450
web/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

6
web/package.json Normal file
View file

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

View file

@ -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%]">
<h1>Shannon</h1>
<img src="" alt="picture of Shannon" />
<h2><b>Roles:</b>Scrum Master,Art Director, Assistant Level Designer</h2>
<article class="w-[35%] mx-[2.5%]">
<h1 class= "font-bold">Shannon</h1>
<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>
</article>
<article class="w-[20%] mx-[2.5%]">
<h1>Ryan</h1>
<img src="" alt="picture of Ryan" />
<article class="w-[35%] mx-[2.5%]">
<h1 class="font-bold">Ryan</h1>
<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%]">
<h1>Sai</h1>
<img src="" alt="picture of Sai" />
<article class="w-[35%] mx-[2.5%]">
<h1 class="font-bold">Sai</h1>
<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%]">
<h1>Livinia</h1>
<img src="" alt="picture of Livinia" />
<article class="w-[30%] mx-[2.5%]">
<h1 class="font-bold">Livinia</h1>
<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>

BIN
web/public/img/Livinia.jpg (Stored with Git LFS) Normal file

Binary file not shown.

BIN
web/public/img/Ryan.jpg (Stored with Git LFS) Normal file

Binary file not shown.

BIN
web/public/img/Sai.jpg (Stored with Git LFS) Normal file

Binary file not shown.

BIN
web/public/img/Shannon.jpg (Stored with Git LFS) Normal file

Binary file not shown.

View file

@ -27,8 +27,10 @@
class="w-2/3 aspect-video"
/>
</section>
<section class="section-colour h-fit w-full py-8 px-[15vw]">
<h1 class="text-2xl font-bold pb-2">SYNOPSIS</h1>
<section class="section-colour h-fit w-full py-10 pr-[7vw] pl-28">
<h1 class="text-2xl font-bold pb-2 px-37">SYNOPSIS</h1>
<div class="flex flex-row">
<img width="150" src="./img/SOS_Logo_WBG.png" alt="SSLR Logo"/>
<h2>
In Solace of Service, players step into the role of an administrator at a busy
social service center, where each day presents a new challenge that tests their
@ -39,6 +41,9 @@
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">
<h2 class="font-bold">Minimum</h2>
<div class="px-15">
<h2 class="font-bold text-[25px]">Minimum</h2>
<ul>
<li>OS: Meta Horizon OS</li>
<li>Chipset: Qualcomm Snapdragon XR2.</li>
<li>GPU: Qualcomm Adreno 650.</li>
<li>RAM: 6 GB</li>
<br>
<li class="text-[25px]">OS: Meta Horizon OS</li>
<br>
<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>

View file

@ -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", "Courier New", monospace;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "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,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),
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-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px 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-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);
@ -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;
}

View file

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