Update frontend

Frontend/src/App.js

@@ -13,6 +13,12 @@ import { useEffect, useState } from 'react';
 import Test from './pages/Test';
 import AudioToSign from './pages/AudioToSign';
 import VocalTraining from './pages/VocalTraining';
+import TextToSign from './pages/TextToSign';
+import MCQ from './pages/MCQ';
+import Lesson from './pages/Lesson';
+import LearningDashboard from './pages/LearningDashboard';
+import StartQuiz from './pages/StartQuiz';
+
 
 function App() {
     const[isLogged, setIsLogged] = useState(sessionStorage.getItem("isLogged"));
@@ -34,6 +40,11 @@ function App() {
                           <Route exact path='/sign-detection' element={<VideoToSign/>}/>
                           <Route exact path='/audio-to-sign' element={<AudioToSign/>}/>
                           <Route exact path='/vocal-training' element={<VocalTraining/>}/>
+                          <Route exact path='/text-to-sign' element={<TextToSign/>}/>
+                          <Route exact path= '/mcq' element={<MCQ/>}/>
+                          <Route exact path= '/lessons/:lessonId' element={<Lesson/>}/>
+                          <Route exact path= '/' element={<LearningDashboard/>}/>
+                          <Route exact path= '/startQuiz' element={<StartQuiz/>}/>
                         </Routes> 
                 
                 </div>
@@ -65,3 +76,6 @@ function App() {
 }
 
 export default App;
+
+
+

Frontend/src/styles/finalModal.css

+.quiz-modal {
+
+    width: 100%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.222), 0 10px 10px 0 rgba(0, 0, 0, 0.118);
+    
+}
+
+
+.quiz-modal-content {
+
+    width: 100%;
+    height: 85vh;
+    background-image: url('../images/final.jpg');
+    background-size: cover;
+    background-position: center;
+}
+
+.headingmodal {
+
+    font-weight: bolder;
+}
+
+.headingrow {
+
+    height: 15vh;
+    width: 100%;
+    margin-top: 30px;
+    text-align: center;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.bodyrow {
+
+    height: 70vh;
+    width: 100%;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.Bodypic {
+
+    width: 100%;
+    height: 550px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+/* .quizCard {
+
+    margin-top: 100px;
+    width: 500px;
+    height: 150px;
+    background-color: rgba(0, 0, 0, 0.3);
+    text-align: center;
+    color: black;
+    font-weight: 500;
+    padding: 10px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.552), 0 10px 10px 0 rgba(0, 0, 0, 0.338);
+
+} */
+
+.quizQuote {
+
+    font-weight: bolder;
+    
+}
+
+.quizeStartbtn {
+
+    width: 150px;
+    height: 40px;
+    border-radius: 20px;
+    background-color: brown;
+    font-weight: bolder;
+    border: 1px solid brown;
+    outline: brown;
+    color: white;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.552), 0 10px 10px 0 rgba(0, 0, 0, 0.338);
+    cursor: pointer;
+}
+
+.quizeStartbtn:hover {
+
+    background-color: rgb(86, 19, 19);
+    color: white;
+    border: 1px solid rgb(86, 19, 19);
+    outline: rgb(86, 19, 19);
+
+}
\ No newline at end of file

Frontend/src/styles/lesson.css

+.lessonContainer {
+
+    margin-top: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 95%;
+    height: 70vh;
+    background-color: rgb(249, 233, 226);
+    border-radius: 15px;
+    border: 3px solid #af2c00;
+}
+
+.headingLesson {
+
+    margin-top: 20px;
+    padding-left: 30px;
+    text-align: left;
+    margin-bottom: 20px;
+}
+
+/* .Lname {
+    font-weight: bolder;
+} */
+
+.cardParagraph {
+
+    margin-top: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 90%;
+    height: max-content;
+    background-color: rgb(244, 236, 236);
+    border-radius: 10px;
+    padding-bottom: 20px;
+    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.1);
+}
+
+.LessonParagraph {
+
+    text-align: justify;
+    padding-top: 20px;
+}
+
+.lesson {
+
+    margin-left: auto;
+    margin-right: auto;   
+    width: 90%;
+    text-align: justify;
+    font-size: 18px;
+    /* font-weight: bolder; */
+}
+
+.lessonImg {
+
+    text-align: center;
+    width: 100%;
+    height: 100%;
+}
+
+.LImage {
+
+    /* align-items: center; */
+    width: 20%;
+    height: 20%;
+    margin-top: 10px;
+    border: 3px solid #af2c00;
+    border-radius: 10px;
+}
+
+.LessonNavBtn {
+
+    display: flex;
+    justify-content: space-between;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.Lnavbtn {
+
+    width: 120px;
+    height: 40px;
+    font-size: 18px;
+    border: #af2c00;
+    border-radius: 20px;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    background-color: #af2c00;
+    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
+
+}
+
+.Lnavbtn:hover {
+
+    background-color: #ff835a;
+    color: black;
+    border: 1px solid #ff835a;
+    outline: none;
+}
\ No newline at end of file

Frontend/src/styles/lessonDashboard.css

+.dashboard-container {
+
+    width: 95%;
+    height: 75vh;
+    margin-right: auto;
+    margin-left: auto;
+    /* background-color: rgb(249, 233, 226); */
+    background-color: transparent;
+    margin-top: 20px;
+    padding-top: 10px;
+    margin-bottom: 20px;
+    /* border-radius: 10px; */
+    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid orangered;
+    border-radius: 1vw;
+    
+
+}
+
+.dashboard-row {
+
+    display: flex;
+    justify-content: space-between;
+}
+
+.dashboard-col {
+
+    margin-left: auto;
+    margin-right: auto;
+    width: 45%;
+    height: max-content;
+    /* background-color: blue; */
+}
+
+.col-heading {
+
+    text-align: center;
+}
+
+.headingname {
+
+    font-weight: bolder;
+}
+
+.dashboardCrad {
+
+    width: 95%;
+    height: 120px;
+    margin-top: 37px;
+    background-color: #af2c00;
+    border-radius: 20px;
+    border: 4px solid white;
+    /* box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.1); */
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.552), 0 10px 10px 0 rgba(0, 0, 0, 0.338);
+    cursor: pointer;
+    text-align: center;
+    padding-top: 40px;
+    /* margin-bottom: 30px; */
+    text-decoration: none;
+}
+
+.dashboardCrad:hover {
+
+    /* border: 5px solid #631900; */
+    background-color: #631900;
+}
+
+.cardheading {
+
+    margin-top: auto;
+    margin-bottom: auto;
+    font-weight: bolder;
+    color: white;
+}
\ No newline at end of file

Frontend/src/styles/mcq.css

+.mcq_cardContainer {
+
+    /* padding: 10px 10px 10px 20px; */
+    margin-top: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 95%;
+    height: 70vh;
+    background-color: rgb(249, 233, 226);
+    border-radius: 15px;
+    border: 3px solid #af2c00;
+}
+
+.question_row {
+
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 20px;
+    width: 90%;
+    height: max-content;
+    /* background-color: blue; */
+}
+
+.quesParagraph{
+
+    margin-top: 30px;
+}
+
+.paragraph {
+
+    text-align: justify;
+    /* font-weight: 500; */
+    font-size: 18px;
+    font-weight: bolder;
+}
+
+.answer_row {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 30px;
+    padding-top: 20px;
+    width: 90%;
+    height: 50%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.col {
+
+    width: 20%;
+    height: 75%;
+    /* background-color: blue; */
+}
+
+.img-box{
+
+    width: 100%;
+    height: 100%;
+    background-color: rgb(182, 182, 182);
+    border-radius: 7px;
+    cursor: pointer;
+}
+
+.imgButton {
+
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    border-color: #af2c00;
+    border-radius: 7px;
+}
+
+.imgButton:hover{
+
+    border: 4px solid #af2c00;
+}
+
+.img-ans{
+    width: 100%;
+    height: 100%;
+}
+
+.answerNo {
+
+    align-items: center;
+    text-align: center;
+    margin-top: 10px;
+    font-weight: 500;
+    /* margin-left: auto;
+    margin-right: auto; */
+}
+
+.ansNo {
+
+    font-size: 15px;
+}
+
+.answerNo:hover{
+    
+    font-weight: bold;
+    color: rgb(42, 3, 3);
+}
+
+.pageNavBtn {
+
+    margin-top: 5px;
+    width: 95%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.btn-row {
+
+    display: flex;
+    justify-content: space-between;
+}
+
+.btnNav{
+    
+    width: 120px;
+    height: 40px;
+    border-radius: 20px;
+    border: 3px solid white;
+    outline: rgb(137, 59, 59);
+    background-color: #af2c00;
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.btnNav:hover{
+
+    background-color: #ff835a;
+    color: black;
+    border: 1px solid #ff835a;
+    outline: none;
+}
+
+.hideButton{
+    display: none;
+}
\ No newline at end of file

Frontend/src/styles/startQuiz.css

+.quizCard {
+
+    width: 50%;
+    height: 90%;
+    /* background-color: black; */
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 15px;
+    margin-top: 25px;
+
+}
+
+.smallRow{
+
+    width: 100%;
+    height: 15%;
+    background-color: rgb(208, 132, 17);
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    text-align: center;
+
+}
+
+.quizHeading {
+
+    font-family: 'Acme';
+    font-weight: bolder;
+    padding-top: 20px;
+}
+
+.bigRow {
+
+    width: 100%;
+    height: 85%;
+    /* background-color: rgb(208, 132, 17); */
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+}
+
+.quizImag {
+
+    width: 80%;
+    height: 80%;
+    margin-left: 50px;
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+    /* box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.1); */
+    
+    
+}
\ No newline at end of file

Frontend/src/styles/textToSign.css

+.main-container {
+
+    width: 100%;
+    height: 85%;
+    margin-top: 10px;
+    /* background-color: aliceblue; */
+}
+
+.row_input {
+
+    width: 100%;
+    height: 40%;
+    /* background-color: darkgray; */
+    align-items: center;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.input-_Container {
+
+    height: 100%;
+    width: 90%;
+    /* background-color: white; */
+    display: flex;
+    justify-content: center;
+    margin-left: 20px;
+}
+
+.col-label {
+
+    width: 30%;
+    height: 100%;
+    /* background-color: aqua; */
+}
+
+.col-input {
+
+    width: 80%;
+    height: 100%;
+    /* background-color: antiquewhite; */
+}
+
+.col-btn {
+
+    width: 40%;
+    height: 100%;
+    /* background-color: rgb(171, 107, 23); */
+}
+
+.input_lb {
+
+    font-size: 45px;
+    font-weight: 500;
+    margin-top: 35%;
+    margin-left: 10px;
+}
+
+.txtarea {
+
+    width: 100%;
+    height: 120px;
+    /* background-color: aquamarine; */
+    margin-top: 10%;
+    border-radius: 10px;
+    padding: 30px;
+    font-size: 30px;
+    margin-left: 20px;
+    border: 3px solid;
+    border-color: #af2c00;
+    outline: none;
+    
+}
+
+.convertor-btn {
+
+    width: 170px;
+    height: 55px;
+    font-size: 25px;
+    border: 3px solid white;
+    background-color: #af2c00;
+    color: aliceblue;
+    border-radius: 20px;
+    margin-top: 32%;
+    margin-left: 35px;
+    outline: none;
+    cursor: pointer;
+    padding-bottom: 5px;
+
+}
+
+.convertor-btn:hover{
+ 
+    background-color: #631900;
+    outline: none;
+    border: 3px solid white;
+    color: white;
+    /* margin-left: 10px; */
+}
+
+.card-output {
+
+    width: 50%;
+    height: 320px;
+    border-radius: 2vw;
+    background-color: #af2c00;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 5px;
+}
+
+.output {
+
+    border-width: 2px;
+    border-color:#af2c00;
+    border-style: solid;
+    border-radius: 2vw;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.552), 0 10px 10px 0 rgba(0, 0, 0, 0.338);
+    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.336), 0 6px 20px 0 rgba(0, 0, 0, 0.082); */
+    /* box-shadow: 0 1px 10px 0 rgba(66, 66, 66, 0.336), 0 6px 20px 0 rgba(100, 100, 100, 0.082); */
+    height: 20vw;
+    width: 35vw;
+    background-image: url('../images/Skulls.jpg');
+    background-color: black;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 5px;
+}
+
+
+
+
+
+
+
+.input-label {
+
+    font-size: 30px;
+    font-weight: bolder;
+    color: black;
+    margin-left: 20px;
+    
+    
+}
+
+.input-text {
+
+    width: 400px;
+    height: 100px;
+    border: 2vw;
+    padding-top: 30px;
+    border-color: #af2c00;
+    font-size: 30px;
+    border-radius: 10px;
+}
+
+.convertorbtn {
+
+    font-size: 20px;
+    font-weight: bolder;
+    width: 120px;
+    color: white;
+    padding: 10px;
+    background-color: #af2c00;
+    border:none;
+    outline: none;
+    border-radius: 10px;
+    cursor: pointer;
+
+
+    /* margin-top: 20px; */
+
+}
+
+
+.text-to-sign-img {
+    padding: 2%;
+    background-color: #af2c00;
+    margin: 5%;
+    border-radius: 30px;
+    cursor: pointer;
+    color: white;
+    border-width: 2px;
+    border-color:#ffffff;
+    border-style: solid;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.552), 0 10px 10px 0 rgba(0, 0, 0, 0.338);
+}
\ No newline at end of file