Ryan/SSLR
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

web: starting on profile

Browse source
This commit is contained in:
ryan 2025-02-15 21:04:47 +08:00
parent 8e8ae9257f
commit 1570debdf2
5 changed files with 311 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
web/about.html
View file

@ -5,24 +5,80 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Solace Of Service</title> <title>Solace Of Service</title>
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
<link rel="icon" type="image/x-icon" href="./img/favicon.png" /> <link rel="icon" type="image/x-icon" href="./img/SOS_Logo_WBG.png" />
</head> </head>
<body class="h-screen w-screen main-colour"> <body class="h-screen w-screen main-colour">
<nav <header class="flex w-full h-20 secondary-colour fixed top-0 left-0 right-0">
class="flex w-full h-20 secondary-colour fixed top-0 left-0 right-0 border-b-4 border-black"
>
<img src="./img/SOS_Logo_WBG.png" alt="product logo" class="p-1 ml-10" /> <img src="./img/SOS_Logo_WBG.png" alt="product logo" class="p-1 ml-10" />
<div class="w-full flex justify-around"> <nav class="w-full flex justify-around">
<a href="./index.html" class="px-4 text-justify h-fit w-fit self-center" <a href="./index.html" class="px-4 text-justify h-fit w-fit self-center"
><h1>Home</h1></a ><h1>Home</h1></a
> >
<a href="#" class="px-4 text-justify h-fit w-fit self-center" <a href="#" class="px-4 text-justify h-fit w-fit self-center"
><h1>About SSLR</h1></a ><h1>About SSLR</h1></a
> >
<a href="#" class="px-4 text-justify h-fit w-fit self-center"><h1>Profile</h1></a> <a href="./profile.html" class="px-4 text-justify h-fit w-fit self-center"
</div> ><h1>Profile</h1></a
>
</nav> </nav>
</header>
<div class="h-20"></div>
<section class="flex justify-center py-10 px-[15vw] flex-col">
<img
src="./img/SSLR_CompanyLogo.png"
alt="Logo Of SSLR"
class="py-4 h-[30vw] w-[30vw] self-center"
/>
<h1 class="font-bold text-4xl text-center">About SSLR</h1>
</section>
<section class="section-colour h-fit w-full py-10 px-[15vw]">
<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
but also the spirit we want to bring to the world: a blend of sweetness,
imagination, and individuality.
<br />
<br />
As a close-knit group of friends who came together with a shared vision of
creating something extraordinary, we chose "Sweet Starry Lil’ Rabbits" because it
captures our playful and welcoming personalities while standing out as uniquely
memorable. It’s a name that symbolizes our friendship, creativity, and desire to
build experiences that feel comforting and inspiring, hoping to invite others into
a world of warmth, wonder, and connection—qualities that define both our company
and our dynamic as a team.
</h2>
</section>
<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>
<article class="w-[20%] mx-[2.5%]">
<h1>Ryan</h1>
<img src="" alt="picture of Ryan" />
<h2>
<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" />
<h2>
<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" />
<h2>
<b>Roles:</b>Lead Game Developer, UI/UX Lead, Assistant Graphic Designer
</h2>
</article>
</div>
</section>
<footer class="secondary-colour h-40"> <footer class="secondary-colour h-40">
<h2></h2> <h2></h2>
</footer> </footer>

29
web/index.html
View file

@ -5,21 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Solace Of Service</title> <title>Solace Of Service</title>
<link rel="stylesheet" href="./main.css" /> <link rel="stylesheet" href="./main.css" />
<link rel="icon" type="image/x-icon" href="./img/favicon.png" /> <link rel="icon" type="image/x-icon" href="./img/SOS_Logo_WBG.png" />
</head> </head>
<body class="h-screen w-screen main-colour"> <body class="h-screen w-screen main-colour">
<nav <header class="flex w-full h-20 secondary-colour fixed top-0 left-0 right-0">
class="flex w-full h-20 secondary-colour fixed top-0 left-0 right-0 border-b-4 border-black"
>
<img src="./img/SOS_Logo_WBG.png" alt="product logo" class="p-1 ml-10" /> <img src="./img/SOS_Logo_WBG.png" alt="product logo" class="p-1 ml-10" />
<div class="w-full flex justify-around"> <nav class="w-full flex justify-around">
<a href="#" class="px-4 text-justify h-fit w-fit self-center"><h1>Home</h1></a> <a href="#" class="px-4 text-justify h-fit w-fit self-center"><h1>Home</h1></a>
<a href="./about.html" class="px-4 text-justify h-fit w-fit self-center" <a href="./about.html" class="px-4 text-justify h-fit w-fit self-center"
><h1>About SSLR</h1></a ><h1>About SSLR</h1></a
> >
<a href="#" class="px-4 text-justify h-fit w-fit self-center"><h1>Profile</h1></a> <a href="./profile.html" class="px-4 text-justify h-fit w-fit self-center"
</div> ><h1>Profile</h1></a
>
</nav> </nav>
</header>
<section class="flex justify-center pb-10 pt-28 px-[15vw]"> <section class="flex justify-center pb-10 pt-28 px-[15vw]">
<img <img
src="./img/gameSSPlaceholder.jpg" src="./img/gameSSPlaceholder.jpg"
@ -69,8 +69,12 @@
</section> </section>
<section class="h-fit w-full px-[15vw] py-8 flex flex-col"> <section class="h-fit w-full px-[15vw] py-8 flex flex-col">
<h1 class="text-2xl font-bold pb-2 w-full">SYSTEM REQUIREMENTS</h1> <h1 class="text-2xl font-bold pb-2 w-full">SYSTEM REQUIREMENTS</h1>
<div class="flex h-fit"> <div class="flex h-60">
<img src="./img/meta-quest2.jpeg" alt="picture of a meta quest 2" class="h-" /> <img
src="./img/meta-quest2.jpeg"
alt="picture of a meta quest 2"
class="h-full aspect-video"
/>
<div class="px-2.5"> <div class="px-2.5">
<h2 class="font-bold">Minimum</h2> <h2 class="font-bold">Minimum</h2>
<ul> <ul>
@ -82,6 +86,13 @@
</div> </div>
</div> </div>
</section> </section>
<section class="h-fit w-full px-[15vw] py-8 flex flex-col section-colour">
<h1 class="text-2xl font-bold pb-2 w-full">Download Now</h1>
<a href="./assets/app.apk" download="Solace_Of_Service.apk"
>Click here for download</a
>
</section>
<footer class="secondary-colour h-40"> <footer class="secondary-colour h-40">
<h2></h2> <h2></h2>
</footer> </footer>

102
web/main.css
View file

@ -521,18 +521,33 @@
} }
} }
@layer utilities { @layer utilities {
.absolute {
position: absolute;
}
.fixed { .fixed {
position: fixed; position: fixed;
} }
.top-0 { .top-0 {
top: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0);
} }
.top-\[50\%\] {
top: 50%;
}
.right-0 { .right-0 {
right: calc(var(--spacing) * 0); right: calc(var(--spacing) * 0);
} }
.left-0 { .left-0 {
left: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0);
} }
.left-\[50\%\] {
left: 50%;
}
.mx-\[2\.5\%\] {
margin-inline: 2.5%;
}
.my-2 {
margin-block: calc(var(--spacing) * 2);
}
.ml-10 { .ml-10 {
margin-left: calc(var(--spacing) * 10); margin-left: calc(var(--spacing) * 10);
} }
@ -548,15 +563,36 @@
.h-40 { .h-40 {
height: calc(var(--spacing) * 40); height: calc(var(--spacing) * 40);
} }
.h-60 {
height: calc(var(--spacing) * 60);
}
.h-\[30vw\] {
height: 30vw;
}
.h-fit { .h-fit {
height: fit-content; height: fit-content;
} }
.h-full {
height: 100%;
}
.h-screen { .h-screen {
height: 100vh; height: 100vh;
} }
.w-2\/3 { .w-2\/3 {
width: calc(2/3 * 100%); width: calc(2/3 * 100%);
} }
.w-3\/4 {
width: calc(3/4 * 100%);
}
.w-\[20\%\] {
width: 20%;
}
.w-\[30vw\] {
width: 30vw;
}
.w-\[40vw\] {
width: 40vw;
}
.w-fit { .w-fit {
width: fit-content; width: fit-content;
} }
@ -566,6 +602,17 @@
.w-screen { .w-screen {
width: 100vw; width: 100vw;
} }
.translate-\[-50\%\] {
--tw-translate-x: -50%;
--tw-translate-y: -50%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.cursor-pointer {
cursor: pointer;
}
.cursor-text {
cursor: text;
}
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
@ -578,9 +625,12 @@
.self-center { .self-center {
align-self: center; align-self: center;
} }
.border-b-4 { .rounded-md {
border-bottom-style: var(--tw-border-style); border-radius: var(--radius-md);
border-bottom-width: 4px; }
.border-2 {
border-style: var(--tw-border-style);
border-width: 2px;
} }
.border-black { .border-black {
border-color: var(--color-black); border-color: var(--color-black);
@ -606,9 +656,15 @@
line-height: 1.5rem; line-height: 1.5rem;
font-weight: 400; font-weight: 400;
} }
.bg-slate-200 {
background-color: var(--color-slate-200);
}
.p-1 { .p-1 {
padding: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 1);
} }
.px-1 {
padding-inline: calc(var(--spacing) * 1);
}
.px-2\.5 { .px-2\.5 {
padding-inline: calc(var(--spacing) * 2.5); padding-inline: calc(var(--spacing) * 2.5);
} }
@ -618,9 +674,15 @@
.px-\[15vw\] { .px-\[15vw\] {
padding-inline: 15vw; padding-inline: 15vw;
} }
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-8 { .py-8 {
padding-block: calc(var(--spacing) * 8); padding-block: calc(var(--spacing) * 8);
} }
.py-10 {
padding-block: calc(var(--spacing) * 10);
}
.pt-28 { .pt-28 {
padding-top: calc(var(--spacing) * 28); padding-top: calc(var(--spacing) * 28);
} }
@ -630,6 +692,9 @@
.pb-10 { .pb-10 {
padding-bottom: calc(var(--spacing) * 10); padding-bottom: calc(var(--spacing) * 10);
} }
.text-center {
text-align: center;
}
.text-justify { .text-justify {
text-align: justify; text-align: justify;
} }
@ -637,10 +702,26 @@
font-size: var(--text-2xl); font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height)); line-height: var(--tw-leading, var(--text-2xl--line-height));
} }
.text-4xl {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.font-bold { .font-bold {
--tw-font-weight: var(--font-weight-bold); --tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
.backdrop\:opacity-75 {
&::backdrop {
opacity: 75%;
}
}
.hover\:bg-slate-200 {
&:hover {
@media (hover: hover) {
background-color: var(--color-slate-200);
}
}
}
} }
@keyframes spin { @keyframes spin {
to { to {
@ -668,6 +749,21 @@
animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
} }
} }
@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style { @property --tw-border-style {
syntax: "*"; syntax: "*";
inherits: false; inherits: false;

104
web/profile.html Normal file
View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Solace Of Service</title>
<link rel="stylesheet" href="main.css" />
<link rel="icon" type="image/x-icon" href="./img/SOS_Logo_WBG.png" />
</head>
<body class="h-screen w-screen main-colour">
<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">
<a href="./index.html" class="px-4 text-justify h-fit w-fit self-center"
><h1>Home</h1></a
>
<a href="./about.html" class="px-4 text-justify h-fit w-fit self-center"
><h1>About SSLR</h1></a
>
<a href="#" class="px-4 text-justify h-fit w-fit self-center"><h1>Profile</h1></a>
</nav>
</header>
<div class="h-20"></div>
<dialog
id="signInDialog"
class="section-colour w-[40vw] absolute top-[50%] left-[50%] translate-[-50%] backdrop:opacity-75 backdrop:bg-zinc800"
>
<b>Login</b>
<form>
<label for="email">Email:</label><br />
<input
type="email"
name="email"
id="email"
class="cursor-text border-2 w-3/4 rounded-md bg-slate-200"
/><br />
<label for="password">Password:</label><br />
<input
type="password"
name="password"
id="password"
class="cursor-text border-2 w-3/4 rounded-md bg-slate-200"
/><br />
<button
autofocus
type="submit"
id="SignInSubmit"
class="cursor-pointer px-1 border-2 my-2 main-colour border-black rounded-md hover:bg-slate-200"
>
SignIn</button
><br />
<button
id="signinToSignup"
type="button"
class="cursor-pointer px-1 my-2 rounded-md"
>
Dont have an account? Click here to create one.
</button>
</form>
</dialog>
<dialog
open
id="signDialog"
class="section-colour w-[40vw] absolute top-[50%] left-[50%] translate-[-50%] backdrop:opacity-75 backdrop:bg-zinc800"
>
<b>Login</b>
<form>
<label for="email">Email:</label><br />
<input
type="email"
name="email"
id="email"
class="cursor-text border-2 w-3/4 rounded-md bg-slate-200"
/><br />
<label for="password">Password:</label><br />
<input
type="password"
name="password"
id="password"
class="cursor-text border-2 w-3/4 rounded-md bg-slate-200"
/><br />
<button
autofocus
type="submit"
id="SignInSubmit"
class="cursor-pointer px-1 border-2 my-2 main-colour border-black rounded-md hover:bg-slate-200"
>
SignIn</button
><br />
<button
id="signinToSignup"
type="button"
class="cursor-pointer px-1 my-2 rounded-md"
>
Dont have an account? Click here to create one.
</button>
</form>
</dialog>
<footer class="secondary-colour h-40">
<h2></h2>
</footer>
<script type="module" src="./profile.js"></script>
</body>
</html>

21
web/profile.js Normal file
View file

@ -0,0 +1,21 @@
const signInDialog = document.getElementById("signInDialog");
const signUpDialog = document.getElementById("signUpDialog");
document.addEventListener("DOMContentLoaded", (event) => {});
function ShowSignIn() {
// signUpDialog.close();
signInDialog.showModal();
console.log("sign in showed");
}
function ShowSignUp() {
signInDialog.close()
signUpDialog.showModal()
console.log("sign up showed")
}