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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Document</title>
|
<title>Solace Of Service</title>
|
||||||
<link rel="stylesheet" href="main.css">
|
<link rel="stylesheet" href="./main.css" />
|
||||||
</head>
|
<link rel="icon" type="image/x-icon" href="./img/favicon.png" />
|
||||||
<body>
|
</head>
|
||||||
|
<body class="h-screen w-screen main-colour">
|
||||||
</body>
|
<nav
|
||||||
</html>
|
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;
|
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 {
|
@keyframes spin {
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
|
|
@ -547,3 +668,12 @@
|
||||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
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