Merge branch 'Idushan-K.A.S-DEV' into 'master'

Update CSS

See merge request !9

Frontend/src/pages/VocalTraining.jsx

@@ -103,31 +103,55 @@ function VocalTraining() {
             </div>
 
 
-            <div className="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+            <div className="modal fade main-modal-bg" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                 <div className="modal-dialog modal-dialog-centered modal-lg" role="document">
-                    <div className="modal-content">
+                    <div className="modal-content modal-bg">
                         <div className="modal-header">
-                            <h5 className="modal-title" id="exampleModalLongTitle">{selectedWord.name}</h5>
+                            {/* <h5 className="modal-title" id="exampleModalLongTitle">{selectedWord.name}</h5> */}
                             <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
                         <div class="modal-body">
                             <div>
-                                <button className ="btn" onClick={startRecording} disabled={isRecording}>
-                                    {isRecording ? "Recording..." : "Start Recording"}
-                                </button>
-                                <button className ="btn" onClick={playAudio} disabled={!audioUrl}>
-                                    Check Audio
-                                </button>
-                                <button className ="btn"  onClick={sendAudioToBackend} disabled={!audioBlob}>
-                                    Send Audio to Backend
-                                </button>
+                                <div className="modal-mini-card" >         
+                                    <div className="row col-md-12 d-flex justify-content-center align-items-center">
+                                        <img src={selectedWord.imgurl} alt="" />
+                                    </div>
+                                    <div className="row col-md-12 d-flex justify-content-center align-items-center">
+                                        <h1 style={{fontSize:'3rem'}}>{selectedWord.name}</h1>
+                                    </div>
+                                </div>
+                                <hr className="line"></hr>
+                                <div className="row col-md-12 d-flex justify-content-center align-items-center mt-4">
+                                    <audio controls>
+                                        <source src="horse.ogg" type="audio/ogg" />
+                                        <source src="horse.mp3" type="audio/mpeg" />
+                                        Your browser does not support the audio tag.
+                                    </audio>
+                                </div>
+                                <div className="row col-md-12 d-flex justify-content-center align-items-center mt-4">
+                                    <div className="col-md-4">
+                                        <button className ="btn video-btn" style={{width:"100%"}} onClick={startRecording} disabled={isRecording}>
+                                            {isRecording ? "Recording..." : "Start Recording"}
+                                        </button>
+                                    </div>
+                                    <div className="col-md-4">                                  
+                                        <button className ="btn video-btn" style={{width:"100%"}} onClick={playAudio} disabled={!audioUrl}>
+                                            Listen
+                                        </button>
+                                    </div>
+                                    <div className="col-md-4">
+                                        <button className ="btn video-btn" style={{width:"100%"}}  onClick={sendAudioToBackend} disabled={!audioBlob}>
+                                            Match
+                                        </button>                                       
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div class="modal-footer">
-                            <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
-                            <button type="button" className="btn btn-primary">Save changes</button>
+                            {/* <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
+                            <button type="button" className="btn btn-primary">Save changes</button> */}
                         </div>
                     </div>
                 </div>

Frontend/src/styles/videoToSign.css

@@ -62,6 +62,7 @@
 } */
 
 
+
 .result {
     /* background-image: url('../images/Wood.png'); */
     position: relative;
@@ -83,5 +84,8 @@
     /* height: 9vh; */
     height: 95%;
     color: aliceblue;
-    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.552), 0 10px 10px 0 rgba(0, 0, 0, 0.338); */
+    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

Frontend/src/styles/vocalTraining.css

@@ -64,8 +64,32 @@
     align-items: center;
     object-fit: cover;
 }
+/* Light Orange - #ff835a; */
+/* Dark Orange  #af2c00*/
+audio::-webkit-media-controls-panel {
+    background-color: #af2c00;
+  }
+  
+  audio::-webkit-media-controls-play-button {
+    background-color: #ff835a;
+    border-radius: 50%;
+  }
+  
+  audio::-webkit-media-controls-play-button:hover {
+    background-color: rgb(255, 255, 255);
+  }
 
+  audio::-webkit-media-controls-current-time-display {
+    color: #fff;
+  }
 
+  audio::-webkit-media-controls-time-remaining-display {
+    color: #fff;
+  }
+
+  audio::-webkit-media-controls-timeline-container{
+    color: #fff;
+  }
 
 
 .mini-card {
@@ -111,6 +135,31 @@
     background: #af2c00; 
   }
 
+.main-modal-bg {
+    background-color: #0c030098;
+    
+}
+  .modal-bg {
+    background-image: url('../images/Skulls.jpg');
+    background-color: rgb(253, 235, 214);
+   
+}
+
+.modal-mini-card {
+    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);
+}
+
+
+