Merge pull request #23 from huythai855/feature/login-animation

Feature/login animation
huythai855 · Aug 6, 2023 · 9b16bfa · 9b16bfa
2 parents db0b73f + 54519d2
commit 9b16bfa
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 16 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,13 +8,16 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
     "bootstrap": "^5.3.1",
+
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.14.2",
     "react-router-dom": "^6.14.2",
+
     "react-scripts": "^5.0.1",
     "react-strap": "^0.0.1",
+
     "reactstrap": "^9.2.0",
     "web-vitals": "^2.1.4"
   },

diff --git a/frontend/src/AppRouter.js b/frontend/src/AppRouter.js
@@ -7,7 +7,10 @@ import Rankings from "./pages/Rankings/Rankings";
 import Learn from './pages/Learn/Learn';
 import Forum from './pages/Forum/Forum';
 import Coursepath from './pages/Course/Coursepath';
+
+import Quiz from "./pages/Lesson/Quiz/Quiz";
 import Flashcard from './pages/Learn/Flashcard/Flashcard';
+
 import CourseDetail from './pages/Course/CourseDetail';
 import Quiz from "./pages/Lesson/Quiz/Quiz";
 

diff --git a/frontend/src/pages/Lesson/Quiz/Quiz.css b/frontend/src/pages/Lesson/Quiz/Quiz.css
@@ -80,8 +80,8 @@
         font-weight: bolder;
         font-family: Montserrat, ui-sans-serif;
         top: 10px;
-        padding-left: 80px;
-        width: 730px;
+        left: 80px;
+
     }
 }
 
@@ -97,8 +97,7 @@
         font-weight: bolder;
         font-family: Montserrat, ui-sans-serif;
         top: 10px;
-        padding-left: 80px;
-        width: 730px;
+        left: 80px;
     }
 }
 
@@ -113,8 +112,7 @@
         font-weight: bolder;
         font-family: Montserrat, ui-sans-serif;
         top: 10px;
-        padding-left: 80px;
-        width: 730px;
+        left: 80px;
     }
 }
 
@@ -124,16 +122,15 @@
     position: absolute;
     top: 191px;
     width: 730px;
-    background-size: 100px;
+
     .text{
         font-size: 40px;
         font-weight: bolder;
         font-family: Montserrat, ui-sans-serif;
-        top: 10px;       /*10*/
-        padding-left: 80px;
-        width: 730px;
+        top: 10px;
+        left: 80px;
+
     }
-}
 
 .wrong{
     background-color: #e80808;

diff --git a/frontend/src/pages/Lesson/Quiz/Quiz.js b/frontend/src/pages/Lesson/Quiz/Quiz.js
@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from 'react';
+
 import "./Quiz.css";
 import bg from "../../../assets/Quiz/backquiz.png";
 import opA from '../../../assets/Quiz/optiona.png';
@@ -7,6 +8,10 @@ import opC from '../../../assets/Quiz/optionc.png';
 import opD from '../../../assets/Quiz/optiond.png';
 import logo from '../../../assets/logo.png';
 
+
+function Quiz () {
+    let ansStatus = ['none','none', 'none','none'];
+
 import axios from 'axios';
 import { Link, useParams } from 'react-router-dom';
 
@@ -71,16 +76,40 @@ function Quiz () {
                     <img className="logo" alt="Logo" src={logo} />
                     <div className="quiz-sys">
                         <div className="overlap-group">
+
+                            <div className="quiz">
+                                <div className="OptionA">
+                                    <div className={ansStatus[0] === 'none' ? 'none' : (ansStatus[0] === 'correct' ? 'correct' : 'wrong')}>
+                                        <img className="option-a" alt="Option a" src={opA}/>
+                                        <p className="text">Đây là đáp án A</p>
+
                             <div className="quiz" onClick={handleClick}>
                                 <div className="OptionA" >
                                     <div className={ansStatus[0] === 'none' ? 'none' : (ansStatus[0] === 'correct' ? 'correct' : 'wrong')} >
                                         <p id="A" className="text"> Đây là đáp án A</p>
                                         <img id ="A" className="option-a" alt="Option a" src={opA} />
+
                                     </div>
                                 </div>
 
                                 <div className="OptionB">
                                     <div className={ansStatus[1] === 'none' ? 'none' : (ansStatus[1] === 'correct' ? 'correct' : 'wrong')}>
+
+                                        <img className="option-b" alt="Option b" src={opB} />
+                                        <p className="text">Đây là đáp án B</p>
+                                    </div>
+                                </div>
+                                <div className="OptionC">
+                                    <div className={ansStatus[1] === 'none' ? 'none' : (ansStatus[2] === 'correct' ? 'correct' : 'wrong')}>
+                                        <img className="option-c" alt="Option c" src={opC} />
+                                        <p className="text">Đây là đáp án C</p>
+                                    </div>
+                                </div>
+                                <div className="OptionD">
+                                    <div className={ansStatus[1] === 'none' ? 'none' : (ansStatus[3] === 'correct' ? 'correct' : 'wrong')}>
+                                        <img className="option-d" alt="Option d" src={opD} />
+                                        <p className="text">Đây là đáp án D</p>
+
                                         <img id="B" className="option-b" alt="Option b" src={opB} />
                                         <p id="B" className="text">Đây là đáp án B</p>
                                     </div>

diff --git a/frontend/src/pages/Login/Login.css b/frontend/src/pages/Login/Login.css
@@ -1,3 +1,66 @@
+/* styles.css */
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Adjust the color and opacity */
+    opacity: 0; /* Initial opacity */
+    pointer-events: none; /* Allow interactions with underlying elements */
+    transition: opacity 0.3s ease-in-out;
+  }
+
+.overlay.active {
+    opacity: 1; /* Opacity when active */
+    pointer-events: auto; /* Disable interactions with underlying elements */
+  }
+
+
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to { 
+        transform: rotate(360deg);
+    }
+}
+
+
+ @-webkit-keyframes rotate {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to { 
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+.load {
+	width: 100px;
+	height: 100px;
+	margin: 110px auto 0;
+	border:solid 10px #f1dbf0;
+	border-radius: 50%;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	 -webkit-transition: all 0.5s ease-in;
+    -webkit-animation-name:             rotate; 
+    -webkit-animation-duration:         1.0s; 
+    -webkit-animation-iteration-count:  infinite;
+    -webkit-animation-timing-function: linear;
+
+    	 transition: all 0.5s ease-in;
+    animation-name:             rotate; 
+    animation-duration:         1.0s; 
+    animation-iteration-count:  infinite;
+    animation-timing-function: linear; 
+}
+
+
+
+
 .wrongPass {
     display: none;
     color: red;

diff --git a/frontend/src/pages/Login/Login.js b/frontend/src/pages/Login/Login.js
@@ -3,13 +3,14 @@ import axios from 'axios';
 import Logo from '../../assets/logoname.png'
 import './Login.css'
 import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
-import { Form, FormGroup, Label, Input, Button, Col } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, Col } from 'reactstrap';
 
 
 function Login({ history }) {
   const [email, setEmail] = useState(''); // Khởi tạo trạng thái cho tên người dùng
   const [password, setPassword] = useState(''); // Khởi tạo trạng thái cho mật khẩu người dùng
   const [data, setData] = useState({"status": "unreceived"}); // Khởi tạo trạng thái cho lỗi
+  const [showLoadingAnimation, setShowLoadingAnimation] = useState(false); // Khởi tạo trạng thái cho animation
   let errorHappened = false;
   const errorHappenedRef = useRef(errorHappened);
   // TODO: add logic change for isVisible
@@ -57,6 +58,8 @@ function Login({ history }) {
   };
 
   const handleSubmit = async (event) => {
+    setShowLoadingAnimation(true);
+
     await event.preventDefault();
 
     axios.get(`http://localhost:3000/api/login?email=${email}&password=${password}`)
@@ -103,6 +106,9 @@ function Login({ history }) {
               * Sai tên đăng nhập hoặc mật khẩu
             </div>
 
+            <div className={`overlay ${showLoadingAnimation ? 'active' : ''}`}></div>
+            <div className={`load ${showLoadingAnimation ? 'visible' : 'hidden'}`}></div>
+
             <FormGroup row>
               <Col sm={{ size: 6, offset: 3 }}>
                 <Button className='buttonClass' color="primary" type="submit">Đăng nhập</Button>
@@ -112,12 +118,9 @@ function Login({ history }) {
           </Form>
         </div>
 
-
-        {/* <Link to='/homepage'>
-          <button>LOGIN</button>
-        </Link> */}
       </section>
 
+
     </div>
   );
 }