diff --git a/web/about.html b/web/about.html new file mode 100644 index 0000000..ae7985f --- /dev/null +++ b/web/about.html @@ -0,0 +1,30 @@ + + + + + + Solace Of Service + + + + + + + + + diff --git a/web/img/SOS_Logo_WBG.png b/web/img/SOS_Logo_WBG.png new file mode 100644 index 0000000..8576498 --- /dev/null +++ b/web/img/SOS_Logo_WBG.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c73c67660a50dfaa42facec112512430337472323d3e7633b7530b6e9c1a0a88 +size 104991 diff --git a/web/img/SOS_ProductLogo.png b/web/img/SOS_ProductLogo.png new file mode 100644 index 0000000..b5f249a --- /dev/null +++ b/web/img/SOS_ProductLogo.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:62a98a02db785a2b0ce48d16b2abc091d7a269b351704833f75d1a156ae66d21 +size 236101 diff --git a/web/img/SSLR_CompanyLogo.png b/web/img/SSLR_CompanyLogo.png new file mode 100644 index 0000000..00e5413 --- /dev/null +++ b/web/img/SSLR_CompanyLogo.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b87c9dc6c51fb77fa4c190b52f33236ab261944331c1292414cd4914f7543308 +size 1422174 diff --git a/web/img/SSLR_CopyrightLogo.png b/web/img/SSLR_CopyrightLogo.png new file mode 100644 index 0000000..6517846 --- /dev/null +++ b/web/img/SSLR_CopyrightLogo.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:56b99875dae9934edeb06e5b3a4e465ccc24fc806093acc560389582edc6b071 +size 21424 diff --git a/web/img/SSLR_Signature.png b/web/img/SSLR_Signature.png new file mode 100644 index 0000000..c6c212a --- /dev/null +++ b/web/img/SSLR_Signature.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f28555353bdb0488213c32c7782787fd7f67818ff1f110ef686fd5cdd74a460c +size 5534 diff --git a/web/img/favicon.png b/web/img/favicon.png new file mode 100644 index 0000000..1ca2e1a --- /dev/null +++ b/web/img/favicon.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f0a72731951b9ebb16d3b2eeefb28c1f7229198d4c8a6c539d9e8adc233da608 +size 78144 diff --git a/web/img/gameSSPlaceholder.jpg b/web/img/gameSSPlaceholder.jpg new file mode 100644 index 0000000..a114c5c --- /dev/null +++ b/web/img/gameSSPlaceholder.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:31ce8f2fded292fcd1bf09c16a6d43b893382bb0fec52e6a73533521b7324150 +size 61257 diff --git a/web/img/meta-quest2.jpeg b/web/img/meta-quest2.jpeg new file mode 100644 index 0000000..4b9a1d1 --- /dev/null +++ b/web/img/meta-quest2.jpeg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ccb73bd54b7dc3aed38bd8fe2733681a3c8945c264d64e3c02f013a2b5f42b24 +size 44680 diff --git a/web/index.html b/web/index.html index e29c889..b67ae09 100644 --- a/web/index.html +++ b/web/index.html @@ -1,12 +1,89 @@ - - - - Document - - - - - - \ No newline at end of file + + + + Solace Of Service + + + + + +
+ image of game +
+
+

SYNOPSIS

+

+ 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. +

+
+
+

OUR GOAL

+

+ 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. +

+
+
+

WHY VR

+

+ 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. +

+
+
+

SYSTEM REQUIREMENTS

+
+ picture of a meta quest 2 +
+

Minimum

+
    +
  • OS: Meta Horizon OS
    • +
  • Chipset: Qualcomm Snapdragon XR2.
    • +
  • GPU: Qualcomm Adreno 650.
    • +
  • RAM: 6 GB
    • +
+
+
+
+ + + diff --git a/web/input.css b/web/input.css index a461c50..2777883 100644 --- a/web/input.css +++ b/web/input.css @@ -1 +1,26 @@ -@import "tailwindcss"; \ No newline at end of file +@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; +} diff --git a/web/main.css b/web/main.css index 45b5f4c..ef89110 100644 --- a/web/main.css +++ b/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; +}