lottie + MVP setup

alfrdkang · Feb 9, 2024 · 0341e28 · 0341e28
1 parent 686c59f
commit 0341e28
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -28,38 +28,46 @@ Not to mention, the 3D room feature provided by Bondee greatly aligns with what
 
 ### Existing Features
 
-#### Start Page
-- 
-
 #### Login Signup Pages
 - Account Login 
 - Account Signup
 
 #### Home/Main Page
-- 
+- 3D Room
+- 3D Avatar
+- Level
+- Navigation Bar
 
 #### Avatar Customisation Page
-- 
+- Avatar Customisation
+- Avatar Preview
+- Avatar Purchase
 
 #### Room Customisation Page
-- 
+- Room Customisation
+- Room Preview
+- Room Purchase
 
 #### Leaderboard Page
-- 
+- Leaderboard (Top 5 + User)
 
 #### Studying Page
-- 
+- Start Study Session
+- Preview Rewards Earned
+- Timer till session end
+- Timer Media Controls (Stop, Pause, Continue)
+- Anti Focus Detector
 
 #### Contact Page
-- Cognify Team (Name, Linkedin, Role)
+- Cognify Logo
+- Cognify Team (Name, Linkedin, Artstation, Github, Role)
 - Text input fields for name, email, message
 - Form Submission
 
 #### Dashboard Page
-- 
-
-#### Details Page
-- 
+- Change User
+- Change Email
+- View Statistics
 
 ### Features Left to Implement
 
@@ -141,12 +149,10 @@ Record Study Hours, Customise Avatar and Room, Compete with Others
 11. Github Repository
 12. Github Pages
 13. RestDB Database
+14. Media Queries
 
 
 ## Credits
-### Content/Media
-- 
-
 ### Acknoledgements
 - I received inspiration for this project from [Yeolpumta](https://apps.apple.com/us/app/ypt-yeolpumta/id1441909643), [Forest](https://www.forestapp.cc/), and [Bondee](https://bondee.com/main).
 

diff --git a/contact.html b/contact.html
@@ -38,7 +38,7 @@ <h1 class="xl:text-lg text-sm font-concert text-cream m-1">Project Manager, SCRU
               <h1 class="xl:text-4xl text-2xl font-concert text-cream m-1">Lim Wee Han</h1>
               <h1 class="xl:text-lg text-sm font-concert text-cream m-1">Lead 3D Modeller, Lead UI/UX Designer, Quality Assurance</h1>
               <div class="flex flex-row">
-                <a href="www.linkedin.com/in/lim-wee-han-324882249" target="_blank"><i class="fa-brands fa-linkedin text-cream m-2 text-2xl"></i></a>
+                <a href="https://www.linkedin.com/in/lim-wee-han-324882249" target="_blank"><i class="fa-brands fa-linkedin text-cream m-2 text-2xl"></i></a>
                 <a href="https://github.com/fi5hiey" target="_blank"><i class="fa-brands fa-github text-cream m-2 text-2xl"></i></a>
                 <a href="https://www.artstation.com/limweehan4" target="_blank"><i class="fa-brands fa-artstation text-cream m-2 text-2xl"></i></a>
               </div>

diff --git a/index.html b/index.html
@@ -10,7 +10,8 @@
   <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
   <link rel="manifest" href="favicon/site.webmanifest">
-  <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+  <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
+  <script src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
   <script type="importmap">
     {
       "imports": {
@@ -38,6 +39,7 @@ <h1 class="font-concert text-cream xl:text-8xl lg:text-5xl text-4xl m-12"><span
     </div>
     <div id="accountcontainer" class="lg:w-2/5 sm:w-1/2 w-screen h-screen bg-cream flex items-center justify-center flex-col">
       <div id="signuplogincontainer" class="flex w-full h-full items-center justify-center flex-col">
+        <dotlottie-player src="https://lottie.host/0386329e-841e-4f5c-be67-72549b1f981b/8Hi1EH0L3N.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>
         <h1 class="text-dblue text-5xl font-concert m-4">Welcome</h1>
         <div class="flex flex-row items-center w-4/5 lg:h-1/8">
           <div id="logintogglebutton" class="bg-orange font-concert w-1/2 h-full cursor-pointer hover:bg-dorange rounded-full flex items-center justify-center flex-row m-4">

diff --git a/js/index.js b/js/index.js
@@ -34,9 +34,6 @@ document.addEventListener("DOMContentLoaded", async function () {
         const data = await sendResponse.json()
         console.log(data)
 
-        //ERROR FIX: Login Fail no Error
-
-        //login validation
         for (let i = 0; i < data.length; i++) {
             if (data[i].email == email && data[i].password == password) {
                 console.log("Login Succesful!")
@@ -65,8 +62,6 @@ document.addEventListener("DOMContentLoaded", async function () {
         e.preventDefault()
         console.log('signup btn clicked')
 
-        //TODO throw errors if username or email is not unique in db
-        //TODO FIX: code runs even if fields are not filled 
         let username = document.getElementById("username").value;
         let email = document.getElementById("signupemail").value;
         let password = document.getElementById("signuppassword").value;

diff --git a/js/study.js b/js/study.js
@@ -100,8 +100,7 @@ function updateTimeDisplay() {
     localStorage.setItem('studysessionxp',(document.getElementById('hourslider').value)*10000)
     document.getElementById('studycontainer').classList.toggle('hidden')
     document.getElementById('studysessioncontainer').classList.toggle('hidden')
-    // updateTimeDisplay.refresh = setInterval(updateTime,1000)
-    endStudy() //change before submission
+    updateTimeDisplay.refresh = setInterval(updateTime,1000)
 }
 
 document.getElementById('startstudybtn').addEventListener('click', updateTimeDisplay)

diff --git a/main.html b/main.html
@@ -315,26 +315,26 @@ <h1 id="leveldisplay" class="text3xl font-concert text-cream m-4">Level: 1</h1>
       <div class="fixed inset-0 z-[99] w-screen overflow-hidden">
         <div class="flex h-screen items-end justify-end">
 
-          <div class="flex flex-row justify-center items-center transform overflow-hidden rounded-2xl bg-orange shadow-xl sm:my-8 w-2/5 h-2/5 m-8">
+          <div class="flex lg:flex-row flex-col justify-center items-center transform overflow-hidden rounded-2xl bg-orange shadow-xl sm:my-8 lg:w-2/5 w-full lg:h-2/5 h-3/4 m-8">
             <div class="flex flex-col h-full w-1/2">
               <div class="flex flex-row justify-center items-center h-1/2 m-12">
                 <div class="text-cream text-3xl font-concert">Studying!</div>
               </div>
               <div class="flex flex-row justify-center items-center h-1/2 m-12">
                 <div class="grid grid-flow-col gap-5 text-center auto-cols-max">
-                  <div class="flex flex-col text-cream font-concert text-3xl">
+                  <div class="flex flex-col text-cream font-concert lg:text-3xl text-xl">
                     <span id='sessionhours' class="font-concert text-6xl">
                       <span></span>
                     </span>
                     hours
                   </div> 
-                  <div class="flex flex-col text-cream font-concert text-3xl">
+                  <div class="flex flex-col text-cream font-concert lg:text-3xl text-xl">
                     <span id='sessionmins' class="font-concert text-6xl">
                       <span></span>
                     </span>
                     min
                   </div> 
-                  <div class="flex flex-col text-cream font-concert text-3xl">
+                  <div class="flex flex-col text-cream font-concert lg:text-3xl text-xl">
                     <span id='sessionsecs' class="font-concert text-6xl">
                       <span></span>
                     </span>
@@ -345,13 +345,13 @@ <h1 id="leveldisplay" class="text3xl font-concert text-cream m-4">Level: 1</h1>
             </div> 
             <div class="flex flex-col h-full w-1/2 flex justify-center items-end flex-col">
               <div id="continuestudybtn" class="hidden bg-cream font-concert w-4/5 h-full cursor-pointer hover:bg-dorange rounded-2xl flex items-center justify-center flex-row m-6">
-                <h1 class="text-db3ue font-concert lg:text-6xl md:text-2xl text-xl">Continue</h1>
+                <h1 class="text-dblue font-concert lg:text-6xl md:text-2xl text-xl">Continue</h1>
               </div>
               <div id="pausestudybtn" class="bg-cream font-concert w-4/5 h-full cursor-pointer hover:bg-dorange rounded-2xl flex items-center justify-center flex-row m-6">
-                <h1 class="text-db3ue font-concert lg:text-6xl md:text-2xl text-xl">Pause</h1>
+                <h1 class="text-dblue font-concert lg:text-6xl md:text-2xl text-xl">Pause</h1>
               </div>
               <div id="stopstudybtn" class="bg-cream font-concert w-4/5 h-full cursor-pointer hover:bg-dorange rounded-2xl flex items-center justify-center flex-row m-6">
-                <h1 class="text-db3ue font-concert lg:text-6xl md:text-2xl text-xl">Stop</h1>
+                <h1 class="text-dblue font-concert lg:text-6xl md:text-2xl text-xl">Stop</h1>
               </div>
             </div> 
           </div>