web: home page almost done
This commit is contained in:
parent
70f65d5ea2
commit
cf4a4e6394
12 changed files with 298 additions and 12 deletions
30
web/about.html
Normal file
30
web/about.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!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/favicon.png" />
|
||||
</head>
|
||||
<body class="h-screen w-screen main-colour">
|
||||
<nav
|
||||
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" />
|
||||
<div 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="#" 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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<footer class="secondary-colour h-40">
|
||||
<h2></h2>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
web/img/SOS_Logo_WBG.png
(Stored with Git LFS)
Normal file
BIN
web/img/SOS_Logo_WBG.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
web/img/SOS_ProductLogo.png
(Stored with Git LFS)
Normal file
BIN
web/img/SOS_ProductLogo.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
web/img/SSLR_CompanyLogo.png
(Stored with Git LFS)
Normal file
BIN
web/img/SSLR_CompanyLogo.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
web/img/SSLR_CopyrightLogo.png
(Stored with Git LFS)
Normal file
BIN
web/img/SSLR_CopyrightLogo.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
web/img/SSLR_Signature.png
(Stored with Git LFS)
Normal file
BIN
web/img/SSLR_Signature.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
web/img/favicon.png
(Stored with Git LFS)
Normal file
BIN
web/img/favicon.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
web/img/gameSSPlaceholder.jpg
(Stored with Git LFS)
Normal file
BIN
web/img/gameSSPlaceholder.jpg
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
web/img/meta-quest2.jpeg
(Stored with Git LFS)
Normal file
BIN
web/img/meta-quest2.jpeg
(Stored with Git LFS)
Normal file
Binary file not shown.
|
|
@ -1,12 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<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/favicon.png" />
|
||||
</head>
|
||||
<body class="h-screen w-screen main-colour">
|
||||
<nav
|
||||
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" />
|
||||
<div 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="./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>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="flex justify-center pb-10 pt-28 px-[15vw]">
|
||||
<img
|
||||
src="./img/gameSSPlaceholder.jpg"
|
||||
alt="image of game"
|
||||
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>
|
||||
<section class="h-fit w-full y py-8 px-[15vw]">
|
||||
<h1 class="text-2xl font-bold pb-2">OUR GOAL</h1>
|
||||
<h2>
|
||||
Our goal with this project is to create an impactful and meaningful experience
|
||||
that goes beyond traditional gameplay. We aim to spread awareness about
|
||||
Singapore's diverse social services, which are often underappreciated or
|
||||
misunderstood. By immersing players in scenarios where they must identify various
|
||||
needs and match them with the right services, we strive to foster not just
|
||||
knowledge but a sense of empathy for those who rely on these essential resources.
|
||||
We believe that through engaging gameplay and thoughtful storytelling, users can
|
||||
better grasp the challenges faced by those in need and the importance of social
|
||||
services in supporting them.
|
||||
</h2>
|
||||
</section>
|
||||
<section class="section-colour h-fit w-full px-[15vw] py-8">
|
||||
<h1 class="text-2xl font-bold pb-2">WHY VR</h1>
|
||||
<h2>
|
||||
Utilising the immersive power of virtual reality, the game creates a realistic and
|
||||
engaging experience, allowing the players to be absorbed into it. Players are able
|
||||
to feel present in the social service centre as they can move about, interacting
|
||||
with the game - conversing with the NPCs, signing and stamping paperwork, and
|
||||
stepping into the pond. This hands-on approach enhances engagement, making
|
||||
learning intuitive and impactful. The use of the Meta Quest series ensures
|
||||
seamless player interaction and accessibility, bringing the educational and
|
||||
empathy-driven elements to life.
|
||||
</h2>
|
||||
</section>
|
||||
<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>
|
||||
<div class="flex h-fit">
|
||||
<img src="./img/meta-quest2.jpeg" alt="picture of a meta quest 2" class="h-" />
|
||||
<div class="px-2.5">
|
||||
<h2 class="font-bold">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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="secondary-colour h-40">
|
||||
<h2></h2>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1 +1,26 @@
|
|||
@import "tailwindcss";
|
||||
@import "tailwindcss";
|
||||
|
||||
|
||||
|
||||
@utility main-colour {
|
||||
background-color: #c6cdd9;
|
||||
color: #030a01;
|
||||
font-size: 1rem; /* 16px */
|
||||
line-height: 1.5rem; /* 24px */
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@utility secondary-colour {
|
||||
background-color: #677a90;
|
||||
color: #f8f9fb;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem; /* 24px */
|
||||
line-height: 2rem; /* 32px */
|
||||
}
|
||||
@utility section-colour {
|
||||
background-color: #f2cd81;
|
||||
color: #030a01;
|
||||
font-size: 1rem; /* 16px */
|
||||
line-height: 1.5rem; /* 24px */
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
|
|||
132
web/main.css
132
web/main.css
|
|
@ -520,7 +520,128 @@
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
@layer utilities;
|
||||
@layer utilities {
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.right-0 {
|
||||
right: calc(var(--spacing) * 0);
|
||||
}
|
||||
.left-0 {
|
||||
left: calc(var(--spacing) * 0);
|
||||
}
|
||||
.ml-10 {
|
||||
margin-left: calc(var(--spacing) * 10);
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.aspect-video {
|
||||
aspect-ratio: var(--aspect-video);
|
||||
}
|
||||
.h-20 {
|
||||
height: calc(var(--spacing) * 20);
|
||||
}
|
||||
.h-40 {
|
||||
height: calc(var(--spacing) * 40);
|
||||
}
|
||||
.h-fit {
|
||||
height: fit-content;
|
||||
}
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
.w-2\/3 {
|
||||
width: calc(2/3 * 100%);
|
||||
}
|
||||
.w-fit {
|
||||
width: fit-content;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.self-center {
|
||||
align-self: center;
|
||||
}
|
||||
.border-b-4 {
|
||||
border-bottom-style: var(--tw-border-style);
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
.border-black {
|
||||
border-color: var(--color-black);
|
||||
}
|
||||
.main-colour {
|
||||
background-color: #c6cdd9;
|
||||
color: #030a01;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.secondary-colour {
|
||||
background-color: #677a90;
|
||||
color: #f8f9fb;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.section-colour {
|
||||
background-color: #f2cd81;
|
||||
color: #030a01;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.p-1 {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
.px-2\.5 {
|
||||
padding-inline: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
.px-4 {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
.px-\[15vw\] {
|
||||
padding-inline: 15vw;
|
||||
}
|
||||
.py-8 {
|
||||
padding-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
.pt-28 {
|
||||
padding-top: calc(var(--spacing) * 28);
|
||||
}
|
||||
.pb-2 {
|
||||
padding-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
.pb-10 {
|
||||
padding-bottom: calc(var(--spacing) * 10);
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
.text-2xl {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
|
|
@ -547,3 +668,12 @@
|
|||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue