From 1570debdf291147783c83281f13fcf99f30244b8 Mon Sep 17 00:00:00 2001 From: ryan Date: Sat, 15 Feb 2025 21:04:47 +0800 Subject: [PATCH] web: starting on profile --- web/about.html | 72 ++++++++++++++++++++++++++++---- web/index.html | 35 ++++++++++------ web/main.css | 102 ++++++++++++++++++++++++++++++++++++++++++++-- web/profile.html | 104 +++++++++++++++++++++++++++++++++++++++++++++++ web/profile.js | 21 ++++++++++ 5 files changed, 311 insertions(+), 23 deletions(-) create mode 100644 web/profile.html create mode 100644 web/profile.js diff --git a/web/about.html b/web/about.html index ae7985f..e812760 100644 --- a/web/about.html +++ b/web/about.html @@ -5,24 +5,80 @@ Solace Of Service - + - - + diff --git a/web/index.html b/web/index.html index b67ae09..1c651a7 100644 --- a/web/index.html +++ b/web/index.html @@ -5,21 +5,21 @@ Solace Of Service - + - +

Profile

 + +

SYSTEM REQUIREMENTS

-
- picture of a meta quest 2 +
+ picture of a meta quest 2
-

Minimum

-
    +

    Minimum

    +
    • OS: Meta Horizon OS
    • Chipset: Qualcomm Snapdragon XR2.
    • GPU: Qualcomm Adreno 650.
      • @@ -82,6 +86,13 @@
+ +
+

Download Now

+ Click here for download +

diff --git a/web/main.css b/web/main.css index ef89110..7dfa117 100644 --- a/web/main.css +++ b/web/main.css @@ -521,18 +521,33 @@ } } @layer utilities { + .absolute { + position: absolute; + } .fixed { position: fixed; } .top-0 { top: calc(var(--spacing) * 0); } + .top-\[50\%\] { + top: 50%; + } .right-0 { right: calc(var(--spacing) * 0); } .left-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 { margin-left: calc(var(--spacing) * 10); } @@ -548,15 +563,36 @@ .h-40 { height: calc(var(--spacing) * 40); } + .h-60 { + height: calc(var(--spacing) * 60); + } + .h-\[30vw\] { + height: 30vw; + } .h-fit { height: fit-content; } + .h-full { + height: 100%; + } .h-screen { height: 100vh; } .w-2\/3 { 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 { width: fit-content; } @@ -566,6 +602,17 @@ .w-screen { 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-direction: column; } @@ -578,9 +625,12 @@ .self-center { align-self: center; } - .border-b-4 { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 4px; + .rounded-md { + border-radius: var(--radius-md); + } + .border-2 { + border-style: var(--tw-border-style); + border-width: 2px; } .border-black { border-color: var(--color-black); @@ -606,9 +656,15 @@ line-height: 1.5rem; font-weight: 400; } + .bg-slate-200 { + background-color: var(--color-slate-200); + } .p-1 { padding: calc(var(--spacing) * 1); } + .px-1 { + padding-inline: calc(var(--spacing) * 1); + } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } @@ -618,9 +674,15 @@ .px-\[15vw\] { padding-inline: 15vw; } + .py-4 { + padding-block: calc(var(--spacing) * 4); + } .py-8 { padding-block: calc(var(--spacing) * 8); } + .py-10 { + padding-block: calc(var(--spacing) * 10); + } .pt-28 { padding-top: calc(var(--spacing) * 28); } @@ -630,6 +692,9 @@ .pb-10 { padding-bottom: calc(var(--spacing) * 10); } + .text-center { + text-align: center; + } .text-justify { text-align: justify; } @@ -637,10 +702,26 @@ font-size: var(--text-2xl); 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 { --tw-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 { to { @@ -668,6 +749,21 @@ 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 { syntax: "*"; inherits: false; diff --git a/web/profile.html b/web/profile.html new file mode 100644 index 0000000..b5c0ef9 --- /dev/null +++ b/web/profile.html @@ -0,0 +1,104 @@ + + + + + + Solace Of Service + + + + +
+ product logo + +
+
+ + Login +
+
+
+
+
+
+ +
+ + + Login +
+
+
+
+
+
+ +
+ +
+

+
+ + + diff --git a/web/profile.js b/web/profile.js new file mode 100644 index 0000000..07b1032 --- /dev/null +++ b/web/profile.js @@ -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") + +} +