web: updated pages
This commit is contained in:
parent
5953046a78
commit
edc8aee587
10 changed files with 1853 additions and 60 deletions
1450
web/package-lock.json
generated
Normal file
1450
web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
6
web/package.json
Normal file
6
web/package.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.0.6",
|
||||
"tailwindcss": "^4.0.6"
|
||||
}
|
||||
}
|
||||
|
|
@ -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
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
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
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
BIN
web/public/img/Shannon.jpg
(Stored with Git LFS)
Normal file
Binary file not shown.
|
|
@ -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]">
|
||||
<h1 class="text-2xl font-bold pb-2">SYNOPSIS</h1>
|
||||
<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
|
||||
compassion, critical thinking, and resource management skills. The objective is to
|
||||
sort individuals from diverse backgrounds based on their specific needs and direct
|
||||
them to the appropriate sectors for assistance. This game tests players compassion
|
||||
and learning when to step up and help others in need. The experience is both
|
||||
demanding and rewarding, as players navigate the complexities of helping others
|
||||
while ensuring that no one is left behind.
|
||||
</h2>
|
||||
<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
|
||||
compassion, critical thinking, and resource management skills. The objective is to
|
||||
sort individuals from diverse backgrounds based on their specific needs and direct
|
||||
them to the appropriate sectors for assistance. This game tests players compassion
|
||||
and learning when to step up and help others in need. The experience is both
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue