Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
2
2023-191
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
2023-191
2023-191
Commits
648cc0c2
Commit
648cc0c2
authored
Aug 25, 2023
by
it20118068
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Update CSS
parent
7644473b
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
92 additions
and
15 deletions
+92
-15
Frontend/src/pages/VocalTraining.jsx
Frontend/src/pages/VocalTraining.jsx
+38
-14
Frontend/src/styles/videoToSign.css
Frontend/src/styles/videoToSign.css
+5
-1
Frontend/src/styles/vocalTraining.css
Frontend/src/styles/vocalTraining.css
+49
-0
No files found.
Frontend/src/pages/VocalTraining.jsx
View file @
648cc0c2
...
...
@@ -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"
>
×
</
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
View file @
648cc0c2
...
...
@@ -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
View file @
648cc0c2
...
...
@@ -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
);
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment