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():
return render_template('textToSign.html')
@app.route('/textToSign/response/', methods=['POST'])
def response():
return render_template('about.html')
@app.route('/contactUs')
def contactUs():
return render_template('contactUs.html')
......
static/css/style.css
View file @ 7b5f4eba
......@@ -110,10 +110,10 @@ h6,
/* Button style */
.btn {
font-size: 16px;
font-size: 14px;
font-family: "Poppins", sans-serif;
text-transform: capitalize;
padding: 15px 40px;
padding: 10px 35px;
border-radius: 0;
font-weight: 500;
border: 0;
......@@ -181,7 +181,7 @@ h6,
}
.btn-primary:active::before {
height: 80%;
height: 60%;
}
.btn-primary:hover {
......@@ -254,20 +254,6 @@ body {
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,
ul {
list-style-type: none;
......@@ -1015,5 +1001,3 @@ link:focus,
.filter-controls li:hover {
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>
<html lang="zxx">
......@@ -27,8 +36,8 @@
<link href="static/css/style.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="static/images/favicon.png" type="image/x-icon">
<link rel="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/EasyTalkFavicon_v1.png" type="image/x-icon">
</head>
......@@ -39,7 +48,7 @@
<div class="navigation w-100">
<div class="container">
<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"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
......@@ -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 text-white h3 font-secondary @@nasted"></li>
</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>
......@@ -95,10 +104,8 @@
<div class="container">
<div class="row">
<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">ABOUT OUR JOURNY</h2>
<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>
<h2 class="section-title text-center" style="margin-top: -5%;">ABOUT OUR JOURNY</h2>
<p></p>
</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>
<html lang="zxx">
......@@ -27,8 +37,8 @@
<link href="static/css/style.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="static/images/favicon.png" type="image/x-icon">
<link rel="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/EasyTalkFavicon_v1.png" type="image/x-icon">
</head>
......@@ -39,7 +49,7 @@
<div class="navigation w-100">
<div class="container">
<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"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
......@@ -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 text-white h3 font-secondary @@nasted"></li>
</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>
......@@ -95,25 +105,23 @@
<div class="container">
<div class="row">
<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 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="#">
<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="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>
<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>
</div>
<div class="col-lg-5">
<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 class="col-lg-2 mb-4 mb-lg-0"></div>
</div>
</div>
</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>
<html lang="zxx">
......@@ -78,42 +88,39 @@
<section class="hero-section overlay bg-cover" data-background="static/images/banner/banner-1.jpg">
<div class="container">
<div class="hero-slider">
<!-- slider item -->
<!-- slider item 1 -->
<div class="hero-slider-item">
<div class="row">
<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>
<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
tempor
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="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".7">Apply now</a>
<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">
Welcome to the newest trending of Sign Language Communication!!
</p>
</div>
</div>
</div>
<!-- slider item -->
<!-- slider item 2-->
<div class="hero-slider-item">
<div class="row">
<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>
<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
tempor
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="fadeOutUp" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".7">Apply now</a>
<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">
Try us! You can translate sign language to your verbal language through us.
</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>
</div>
</div>
</div>
<!-- slider item -->
<!-- slider item 3-->
<div class="hero-slider-item">
<div class="row">
<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>
<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
tempor
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>
<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">We are offering you a chance to learn sign language easily through our translator</p>
<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>
</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>
<html lang="zxx">
......@@ -27,8 +37,8 @@
<link href="static/css/style.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="static/images/favicon.png" type="image/x-icon">
<link rel="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/EasyTalkFavicon_v1.png" type="image/x-icon">
</head>
......@@ -40,7 +50,7 @@
<div class="navigation w-100">
<div class="container">
<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"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
......@@ -82,29 +92,29 @@
<div class="col-md-8">
<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 text-white h3 font-secondary "></li>
</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>
</section>
<!-- /page title -->
<!-- about -->
<!-- SSL Translator -->
<section class="section">
<div class="container">
<div class="row">
<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">ABOUT OUR JOURNY</h2>
<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>
<form id="cameraForm" class="justify-content-center">
<div class="text-center">
<button type="submit" class="btn btn-primary mb-2" id="userButtonInput" style="height: 75%;">Open My Webcamera</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- /about -->
<!-- /SSL Translator -->
<!-- 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>
<html lang="zxx">
......@@ -25,7 +34,7 @@
<!-- Main Stylesheet -->
<link href="static/css/style.css" rel="stylesheet">
<!--Favicon-->
<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">
......@@ -80,39 +89,36 @@
<div class="row">
<div class="col-md-8">
<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 text-white h3 font-secondary @@nasted"></li>
<li class="list-inline-item"><a class="h2 text-primary font-secondary" href="textToSign">English to SSL Translator</a></li>
</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>
</section>
<!-- /page title -->
<!-- about -->
<!-- Text Translator -->
<section class="section">
<div class="container">
<div class="row">
<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">
<p class="botText">
<span
>Welcome to Text to Sign Convertor.
<br />
Enter the sentence you need to translate into SSL</span
>
<span>Enter the sentence you need to translate into SSL</span>
</p>
</div>
<form id="userForm">
<br/>
<form id="userForm" class="justify-content-center">
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Enter Your Text</label>
<input type="text" class="form-control-mb-2" id="inlineFormInput" placeholder="Enter any text"/>
<div class="col-auto" id="userInput">
<label class="sr-only" for="userTextInput">Enter Your Text</label>
<input type="text" class="form-control-mb-2" id="userTextInput" placeholder="Enter any text" style="height: 80%; width:100%"/>
</div>
<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>
</form>
......@@ -120,7 +126,7 @@
</div>
</div>
</section>
<!-- /about -->
<!-- /Text Translator -->
<!-- footer -->
......@@ -168,9 +174,35 @@
<script src="static/js/script.js"></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>
</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