Skip to content

2
2020-077
Commit 7b5f4eba authored by Manoj Kumar's avatar Manoj Kumar
Browse files
Options

Merge branch 'amashi_dev' into 'master' 

Completed product frontend interfaces with proper comments and coding-ethics

See merge request !48
parents 70cd3b15 ff9a26d6
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 92 deletions
app.py
View file @ 7b5f4eba
...@@ -25,6 +25,11 @@ def textToSignEngine(): ...@@ -25,6 +25,11 @@ def textToSignEngine():
return render_template('textToSign.html') return render_template('textToSign.html')
@app.route('/textToSign/response/', methods=['POST'])
def response():
return render_template('about.html')
@app.route('/contactUs') @app.route('/contactUs')
def contactUs(): def contactUs():
return render_template('contactUs.html') return render_template('contactUs.html')
......
static/css/style.css
View file @ 7b5f4eba
...@@ -110,10 +110,10 @@ h6, ...@@ -110,10 +110,10 @@ h6,
/* Button style */ /* Button style */
.btn { .btn {
font-size: 16px; font-size: 14px;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
text-transform: capitalize; text-transform: capitalize;
padding: 15px 40px; padding: 10px 35px;
border-radius: 0; border-radius: 0;
font-weight: 500; font-weight: 500;
border: 0; border: 0;
...@@ -181,7 +181,7 @@ h6, ...@@ -181,7 +181,7 @@ h6,
} }
.btn-primary:active::before { .btn-primary:active::before {
height: 80%; height: 60%;
} }
.btn-primary:hover { .btn-primary:hover {
...@@ -254,20 +254,6 @@ body { ...@@ -254,20 +254,6 @@ body {
color: #fff; color: #fff;
} }
/* preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffdc11;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
ol, ol,
ul { ul {
list-style-type: none; list-style-type: none;
...@@ -1015,5 +1001,3 @@ link:focus, ...@@ -1015,5 +1001,3 @@ link:focus,
.filter-controls li:hover { .filter-controls li:hover {
color: #ffbc3b; color: #ffbc3b;
} }
/*# sourceMappingURL=maps/style.css.map */
templates/about.html
View file @ 7b5f4eba
<!--
* The about.html file is created to implement the front-end of
* About Us page of EasyTalk
*
* @author Amashi Bastiansz | IT17143950
* @version 1.0
* @since 2020-10-01
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zxx"> <html lang="zxx">
...@@ -27,8 +36,8 @@ ...@@ -27,8 +36,8 @@
<link href="static/css/style.css" rel="stylesheet"> <link href="static/css/style.css" rel="stylesheet">
<!--Favicon--> <!--Favicon-->
<link rel="shortcut icon" href="static/images/favicon.png" type="image/x-icon"> <link rel="shortcut icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
<link rel="icon" href="static/images/favicon.png" type="image/x-icon"> <link rel="icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
</head> </head>
...@@ -39,7 +48,7 @@ ...@@ -39,7 +48,7 @@
<div class="navigation w-100"> <div class="navigation w-100">
<div class="container"> <div class="container">
<nav class="navbar navbar-expand-lg navbar-dark p-0"> <nav class="navbar navbar-expand-lg navbar-dark p-0">
<a class="navbar-brand" href="/"><img src="static/images/EasyTalkLogo.png" alt="logo"></a> <a class="navbar-brand" href="/"><img src="static/images/EasyTalkLogo_v3.png" alt="logo" style="zoom: 75%;"></a>
<button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation" <button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
...@@ -83,7 +92,7 @@ ...@@ -83,7 +92,7 @@
<li class="list-inline-item"><a class="h2 text-primary font-secondary" href="about">About Us</a></li> <li class="list-inline-item"><a class="h2 text-primary font-secondary" href="about">About Us</a></li>
<li class="list-inline-item text-white h3 font-secondary @@nasted"></li> <li class="list-inline-item text-white h3 font-secondary @@nasted"></li>
</ul> </ul>
<p class="text-lighten">Our courses offer a good compromise between the continuous assessment favoured by some universities and the emphasis placed on final exams by others.</p> <p class="text-lighten">Do you want to know us?? This is your chance!!</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -95,10 +104,8 @@ ...@@ -95,10 +104,8 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<img class="img-fluid w-100 mb-4" src="static/images/about/about-page.jpg" alt="about image"> <h2 class="section-title text-center" style="margin-top: -5%;">ABOUT OUR JOURNY</h2>
<h2 class="section-title">ABOUT OUR JOURNY</h2> <p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe ipsa illo quod veritatis, magni debitis fugiat dolore voluptates! Consequatur, aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat perferendis sint optio similique. Et amet magni facilis vero corporis quos.</p>
<p>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum a, facere fugit error accusamus est officiis vero in, nostrum laboriosam corrupti explicabo, cumque repudiandae deleniti perspiciatis quae consectetur enim. Laboriosam!</p>
</div> </div>
</div> </div>
</div> </div>
......
templates/contactUs.html
View file @ 7b5f4eba
<!--
* The contactUs.html file is created to implement the front-end of
* Contact page
*
* @author Amashi Bastiansz | IT17143950
* @version 1.0
* @since 2020-10-01
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zxx"> <html lang="zxx">
...@@ -27,8 +37,8 @@ ...@@ -27,8 +37,8 @@
<link href="static/css/style.css" rel="stylesheet"> <link href="static/css/style.css" rel="stylesheet">
<!--Favicon--> <!--Favicon-->
<link rel="shortcut icon" href="static/images/favicon.png" type="image/x-icon"> <link rel="shortcut icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
<link rel="icon" href="static/images/favicon.png" type="image/x-icon"> <link rel="icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
</head> </head>
...@@ -39,7 +49,7 @@ ...@@ -39,7 +49,7 @@
<div class="navigation w-100"> <div class="navigation w-100">
<div class="container"> <div class="container">
<nav class="navbar navbar-expand-lg navbar-dark p-0"> <nav class="navbar navbar-expand-lg navbar-dark p-0">
<a class="navbar-brand" href="/"><img src="static/images/EasyTalkLogo.png" alt="logo"></a> <a class="navbar-brand" href="/"><img src="static/images/EasyTalkLogo_v3.png" alt="logo" style="zoom: 75%;"></a>
<button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation" <button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
...@@ -83,7 +93,7 @@ ...@@ -83,7 +93,7 @@
<li class="list-inline-item"><a class="h2 text-primary font-secondary" href="contactUs">Contact Us</a></li> <li class="list-inline-item"><a class="h2 text-primary font-secondary" href="contactUs">Contact Us</a></li>
<li class="list-inline-item text-white h3 font-secondary @@nasted"></li> <li class="list-inline-item text-white h3 font-secondary @@nasted"></li>
</ul> </ul>
<p class="text-lighten">Do you have other questions? Don't worry, there aren't any dumb questions. Just fill out the form below and we'll get back to you as soon as possible.</p> <p class="text-lighten">Do you have other questions? Don't worry!! Just fill out the form below and we'll get back to you as soon as possible.</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -95,25 +105,23 @@ ...@@ -95,25 +105,23 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<h2 class="section-title">Contact Us</h2> <h2 class="section-title text-center" style="margin-top: -5%;">Contact Us</h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-7 mb-4 mb-lg-0"> <div class="col-lg-2 mb-4 mb-lg-0"></div>
<div class="col-lg-8 mb-4 mb-lg-0">
<form action="#"> <form action="#">
<input type="text" class="form-control mb-3" id="name" name="name" placeholder="Your Name"> <input type="text" class="form-control mb-3" id="name" name="name" placeholder="Your Name">
<input type="email" class="form-control mb-3" id="mail" name="mail" placeholder="Your Email"> <input type="email" class="form-control mb-3" id="mail" name="mail" placeholder="Your Email">
<input type="text" class="form-control mb-3" id="subject" name="subject" placeholder="Subject"> <input type="text" class="form-control mb-3" id="subject" name="subject" placeholder="Subject">
<textarea name="message" id="message" class="form-control mb-3" placeholder="Your Message"></textarea> <textarea name="message" id="message" class="form-control mb-3" placeholder="Your Message"></textarea>
<button type="submit" value="send" class="btn btn-primary">SEND MESSAGE</button> <div class="text-center">
<button type="submit" value="send" class="btn btn-primary">Send Message</button>
</div>
</form> </form>
</div> </div>
<div class="col-lg-5"> <div class="col-lg-2 mb-4 mb-lg-0"></div>
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit recusandae voluptates doloremque veniam temporibus porro culpa ipsa, nisi soluta minima saepe laboriosam debitis nesciunt. Dolore, labore. Accusamus nulla sed cum aliquid exercitationem debitis error harum porro maxime quo iusto aliquam dicta modi earum fugiat, vel possimus commodi, deleniti et veniam, fuga ipsum praesentium. Odit unde optio nulla ipsum quae obcaecati! Quod esse natus quibusdam asperiores quam vel, tempore itaque architecto ducimus expedita</p>
<a href="tel:+8802057843248" class="text-color h5 d-block">+880 20 5784 3248</a>
<a href="mailto:yourmail@email.com" class="mb-5 text-color h5 d-block">yourmail@email.com</a>
<p>71 Shelton Street<br>London WC2H 9JQ England</p>
</div>
</div> </div>
</div> </div>
</section> </section>
......
templates/homePage.html
View file @ 7b5f4eba
<!--
* The homePage.html file is created to implement the front-end of
* Home Page of EasyTalk
*
* @author Amashi Bastiansz | IT17143950
* @version 1.0
* @since 2020-10-01
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zxx"> <html lang="zxx">
...@@ -78,42 +88,39 @@ ...@@ -78,42 +88,39 @@
<section class="hero-section overlay bg-cover" data-background="static/images/banner/banner-1.jpg"> <section class="hero-section overlay bg-cover" data-background="static/images/banner/banner-1.jpg">
<div class="container"> <div class="container">
<div class="hero-slider"> <div class="hero-slider">
<!-- slider item -->
<!-- slider item 1 -->
<div class="hero-slider-item"> <div class="hero-slider-item">
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<h1 class="text-white" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".1">Your bright future is our mission</h1> <h1 class="text-white" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".1">EasyTalk, Your Translator for Sri Lankan Sign Language</h1>
<p class="text-muted mb-4" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <p class="text-muted mb-4" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".4">
tempor Welcome to the newest trending of Sign Language Communication!!
incididunt ut labore et </p>
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer</p>
<a href="contact.html" class="btn btn-primary" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".7">Apply now</a>
</div> </div>
</div> </div>
</div> </div>
<!-- slider item -->
<!-- slider item 2-->
<div class="hero-slider-item"> <div class="hero-slider-item">
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<h1 class="text-white" data-animation-out="fadeOutUp" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".1">Your bright future is our mission</h1> <h1 class="text-white" data-animation-out="fadeOutUp" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".1">Are you looking for a sign language translator?</h1>
<p class="text-muted mb-4" data-animation-out="fadeOutUp" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <p class="text-muted mb-4" data-animation-out="fadeOutUp" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".4">
tempor Try us! You can translate sign language to your verbal language through us.
incididunt ut labore et </p>
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer</p> <a href="signToText" class="btn btn-primary" data-animation-out="fadeOutUp" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".7">Let's Translate Signs</a>
<a href="contact.html" class="btn btn-primary" data-animation-out="fadeOutUp" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".7">Apply now</a>
</div> </div>
</div> </div>
</div> </div>
<!-- slider item -->
<!-- slider item 3-->
<div class="hero-slider-item"> <div class="hero-slider-item">
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<h1 class="text-white" data-animation-out="fadeOutDown" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".1">Your bright future is our mission</h1> <h1 class="text-white" data-animation-out="fadeOutDown" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".1">You can learn sign language by your own!</h1>
<p class="text-muted mb-4" data-animation-out="fadeOutDown" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <p class="text-muted mb-4" data-animation-out="fadeOutDown" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".4">We are offering you a chance to learn sign language easily through our translator</p>
tempor <a href="textToSign" class="btn btn-primary" data-animation-out="fadeOutDown" data-delay-out="5" data-duration-in=".3" data-animation-in="zoomIn" data-delay-in=".7">Let's Learn Sign Language</a>
incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer</p>
<a href="contact.html" class="btn btn-primary" data-animation-out="fadeOutDown" data-delay-out="5" data-duration-in=".3" data-animation-in="zoomIn" data-delay-in=".7">Apply now</a>
</div> </div>
</div> </div>
</div> </div>
......
templates/signToText.html
View file @ 7b5f4eba
<!--
* The signToText.html file is created to implement the front-end of
* SSL to English Translator
*
* @author Amashi Bastiansz | IT17143950
* @version 1.0
* @since 2020-10-01
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zxx"> <html lang="zxx">
...@@ -27,8 +37,8 @@ ...@@ -27,8 +37,8 @@
<link href="static/css/style.css" rel="stylesheet"> <link href="static/css/style.css" rel="stylesheet">
<!--Favicon--> <!--Favicon-->
<link rel="shortcut icon" href="static/images/favicon.png" type="image/x-icon"> <link rel="shortcut icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
<link rel="icon" href="static/images/favicon.png" type="image/x-icon"> <link rel="icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
</head> </head>
...@@ -40,7 +50,7 @@ ...@@ -40,7 +50,7 @@
<div class="navigation w-100"> <div class="navigation w-100">
<div class="container"> <div class="container">
<nav class="navbar navbar-expand-lg navbar-dark p-0"> <nav class="navbar navbar-expand-lg navbar-dark p-0">
<a class="navbar-brand" href="/"><img src="static/images/EasyTalkLogo.png" alt="logo"></a> <a class="navbar-brand" href="/"><img src="static/images/EasyTalkLogo_v3.png" alt="logo" style="zoom: 75%;"></a>
<button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation" <button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
...@@ -82,29 +92,29 @@ ...@@ -82,29 +92,29 @@
<div class="col-md-8"> <div class="col-md-8">
<ul class="list-inline custom-breadcrumb"> <ul class="list-inline custom-breadcrumb">
<li class="list-inline-item"><a class="h2 text-primary font-secondary" href="signToText">SSL to English Translator</a></li> <li class="list-inline-item"><a class="h2 text-primary font-secondary" href="signToText">SSL to English Translator</a></li>
<li class="list-inline-item text-white h3 font-secondary "></li>
</ul> </ul>
<p class="text-lighten">Our courses offer a good compromise between the continuous assessment favoured by some universities and the emphasis placed on final exams by others.</p> <p class="text-lighten">Translate Sri Lankan Sign Language to your language now!!</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- /page title --> <!-- /page title -->
<!-- about --> <!-- SSL Translator -->
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<img class="img-fluid w-100 mb-4" src="static/images/about/about-page.jpg" alt="about image"> <form id="cameraForm" class="justify-content-center">
<h2 class="section-title">ABOUT OUR JOURNY</h2> <div class="text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe ipsa illo quod veritatis, magni debitis fugiat dolore voluptates! Consequatur, aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat perferendis sint optio similique. Et amet magni facilis vero corporis quos.</p> <button type="submit" class="btn btn-primary mb-2" id="userButtonInput" style="height: 75%;">Open My Webcamera</button>
<p>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum a, facere fugit error accusamus est officiis vero in, nostrum laboriosam corrupti explicabo, cumque repudiandae deleniti perspiciatis quae consectetur enim. Laboriosam!</p> </div>
</form>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- /about --> <!-- /SSL Translator -->
<!-- footer --> <!-- footer -->
<footer> <footer>
......
templates/textToSign.html
View file @ 7b5f4eba
<!--
* The textToSign.html file is created to implement the front-end of
* English to SSL Translator
*
* @author Amashi Bastiansz | IT17143950
* @version 1.0
* @since 2020-10-01
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zxx"> <html lang="zxx">
...@@ -25,7 +34,7 @@ ...@@ -25,7 +34,7 @@
<!-- Main Stylesheet --> <!-- Main Stylesheet -->
<link href="static/css/style.css" rel="stylesheet"> <link href="static/css/style.css" rel="stylesheet">
<!--Favicon--> <!--Favicon-->
<link rel="shortcut icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon"> <link rel="shortcut icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
<link rel="icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon"> <link rel="icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
...@@ -80,39 +89,36 @@ ...@@ -80,39 +89,36 @@
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<ul class="list-inline custom-breadcrumb"> <ul class="list-inline custom-breadcrumb">
<li class="list-inline-item"><a class="h2 text-primary font-secondary" href="textToSign">English to Text Translator</a></li> <li class="list-inline-item"><a class="h2 text-primary font-secondary" href="textToSign">English to SSL Translator</a></li>
<li class="list-inline-item text-white h3 font-secondary @@nasted"></li>
</ul> </ul>
<p class="text-lighten">Our courses offer a good compromise between the continuous assessment favoured by some universities and the emphasis placed on final exams by others.</p> <br/>
<p class="text-lighten">Now you can translate any English text to SSL only by entering it here!!</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- /page title --> <!-- /page title -->
<!-- about --> <!-- Text Translator -->
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h2 class="section-title">Text to SSL Translator</h2> <h2 class="section-title text-center" style="margin-top: -5%;">Let's Start!!</h2>
<div id="chatbox"> <div id="chatbox">
<p class="botText"> <p class="botText">
<span <span>Enter the sentence you need to translate into SSL</span>
>Welcome to Text to Sign Convertor.
<br />
Enter the sentence you need to translate into SSL</span
>
</p> </p>
</div> </div>
<form id="userForm"> <br/>
<form id="userForm" class="justify-content-center">
<div class="form-row align-items-center"> <div class="form-row align-items-center">
<div class="col-auto"> <div class="col-auto" id="userInput">
<label class="sr-only" for="inlineFormInput">Enter Your Text</label> <label class="sr-only" for="userTextInput">Enter Your Text</label>
<input type="text" class="form-control-mb-2" id="inlineFormInput" placeholder="Enter any text"/> <input type="text" class="form-control-mb-2" id="userTextInput" placeholder="Enter any text" style="height: 80%; width:100%"/>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Send Sign</button> <button type="submit" class="btn btn-primary mb-2" id="userButtonInput" style="height: 75%;">Translate to Sign</button>
</div> </div>
</div> </div>
</form> </form>
...@@ -120,7 +126,7 @@ ...@@ -120,7 +126,7 @@
</div> </div>
</div> </div>
</section> </section>
<!-- /about --> <!-- /Text Translator -->
<!-- footer --> <!-- footer -->
...@@ -168,9 +174,35 @@ ...@@ -168,9 +174,35 @@
<script src="static/js/script.js"></script> <script src="static/js/script.js"></script>
<script> <script>
$("#inlineFormInput").keypress(function(e){ $("#userTextInput").keypress(function(e){
if(e.which == 13){
}) //getResponseSign();
}
});
$("userButtonInput").click(function(){
//getResponseSign();
});
$("#userForm").on("submit", function (e) {
var message = $("#textInput").val();
e.preventDefault();
$.ajax({
url: "http://127.0.0.1:5000/textToSign/response/",
data: JSON.stringify({ message: message }),
method: "POST",
contentType: "application/json",
success: function (message) {
var text = $("#userTextInput").val();
var userHtml = '<p class="userText"><span>' + text + "</span></p>";
$("#userTextInput").val("");
$("#chatbox").append(userHtml);
document
.getElementById("userInput")
.scrollIntoView({ block: "start", behavior: "smooth" });
},
});
});
</script> </script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment