Skip to content

2
2021-060
Commit 11493e36 authored by Dhananjaya Jayashanka's avatar Dhananjaya Jayashanka
Browse files
Options

added file uploader ui

parent e06e68bc
Hide whitespace changes
Inline Side-by-side
Showing with 644 additions and 0 deletions
UI/fileUploaderFinal.html 0 → 100644
View file @ 11493e36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>File Uploader</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: OnePage - v4.3.0
* Template URL: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
<meta name="description"
content="Responsive sidebar template with sliding effect and dropdown menu based on bootstrap 3" />
<title>Sidebar template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="style-sideBar.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example {
margin: 20px;
}
.choose_file {
margin: 20px;
}
#div3 {
animation-timing-function: ease-in;
}
@keyframes mymove {
from {
left: 100px;
}
to {
left: 400px;
}
}
body {
animation: transitionIn 2s;
}
@keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
</style>
<script>
$(document).ready(function () {
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function () {
$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function () {
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function () {
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', serif;
/* background: #eee */
}
.content {
width: 420px;
}
.ratings {
/* background-color: #fff; */
padding: 54px;
/* border: 1px solid rgba(0, 0, 0, 0.1); */
/* box-shadow: 0px 10px 10px #E0E0E0 */
}
.product-rating {
font-size: 50px
}
.stars i {
font-size: 18px;
color: #28a745
}
.rating-text {
margin-top: 10px
}
.navbar-default{background:#3285D1;border-color: #3285D1;}
/* .navbar-default .navbar-nav > li > a{color:#FFF;}
.nav > li > a{margin:15px; font-size: 17px; color:#FFF;} */
.nav .open > a, .nav .open > a:hover,
.nav .open > a:focus,
.nav > li > a:hover, .nav > li > a:focus{background-color:transparent !important;}
.navbar-brand{
margin: 15px !important;
padding: 13px !important;
/* color: #fff !important; */
font-size: 2em !important;
font-weight: bold !Important;
}
.navbar-toggle{margin-top:20px !important;}
/* .dropdown-menu{background:#fff !important;} */
.navbar-login
{
width: 350px;
padding: 10px;
padding-bottom: 0px;
}
.navbar-login-session
{
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
}
.icon-size
{
font-size: 87px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular-route.js"></script>
<script src="application.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center justify-content-between">
<h1 class="logo"><a href="index.html">SPEECH MASTER</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto " href="score report.html">Score</a></li>
<li><a class="nav-link scrollto" href="reportFinal.html">Reports</a></li>
<li><a class="nav-link scrollto" href="#">Feedbacks</a></li>
<li><a class="nav-link scrollto" href="#">Contribute</a></li>
<!-- <li class="dropdown"><a href="#"><span>Customized Analysis</span> <i class="bi bi-chevron-down"></i></a>
<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Expressions</a></li>
<li><a href="#">Grammar</a></li>
<li><a href="#">Flow of the speech</a></li>
</ul>
</li> -->
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<!-- <li><a class="getstarted scrollto" href="#about">Get Started</a></li> -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span> 
<strong>User</strong>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login">
<div class="row">
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size">
</span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>User</strong></p>
<p class="text-left small">justdemo@gmail.com</p>
<p class="text-left">
<a href="#" class="btn btn-primary btn-block btn-sm">Logout</a>
</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
<a href="#" class="btn btn-primary btn-block">My Profile</a>
<a href="#" class="btn btn-danger btn-block">Change Password</a>
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
<div id="hero" class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<main class="page-content">
<div class="container-fluid">
<br><br><br><br><br>
<h1 class="text-center">SPEECH MASTER</h1>
<br>
<div id="div1" style="position: relative;
animation: mymove 5s infinite;">
<h5>Upload your speech here!</h5>
</div>
<div class="choose_file">
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" onchange="angular.element(this).scope().selectAudioFile(this)">
<label class="custom-file-label" for="customFile">{{audioFile ? audioFile.name+' File chosen':'Choose audio file'}}</label>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile2" onchange="angular.element(this).scope().selectVideoFile(this)">
<label class="custom-file-label" for="customFile2">{{audioFile ? audioFile.name+' File chosen':'Choose video file'}}</label>
</div>
</form>
</div>
<div class="d-flex justify-content-center pt-3 pb-3">
<form id="labnol" method="get" action="http://www.labnol.org">
<div class="speech">
<input type="text" name="s" id="transcript" placeholder="Say the topic of speech" ng-model="topic" />
<img onclick="startDictation()" src="https://i.imgur.com/cHidSVu.gif" />
</div>
</form>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="exampleFormControlTextarea1">Audio text</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" ng-model="audioText"></textarea>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-primary" ng-click="processTheSpeech()">
Continue
<div class="spinner-border text-center" role="status" ng-if="loading">
<span class="sr-only">Loading...</span>
</div>
</button>
</div>
<hr />
<div class="d-flex justify-content-center">
<div class="content text-center">
<div class="ratings"> <span class="product-rating">4.6</span><span>/5</span>
<div class="stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
<div class="rating-text"> <span>46 ratings & 15 reviews</span> </div>
</div>
</div>
</div>
<!-- <div class="bs-example">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse"
data-target="#collapseOne">1. What is Speech Master?</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language
for
describing the structure of web pages. <a
href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn
more.</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse"
data-target="#collapseTwo">2. Is this free?</button>
</h2>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
data-parent="#accordionExample">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and
easier web development. It is a collection of CSS and HTML conventions. <a
href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/"
target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse"
data-target="#collapseThree">3. What are services we can get from here?</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-parent="#accordionExample">
<div class="card-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style
properties for a given HTML element such as colors, backgrounds, fonts etc. <a
href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn
more.</a></p>
</div>
</div>
</div>
</div>
</div> -->
</main>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
Emotion
</div>
<div class="card-body">
<h5 class="card-title">Emotion throughout the video</h5>
<p class="card-text">Score: {{emotionScore}}</p>
<div>
<canvas id="myChart"></canvas>
</div>
<hr>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
Content Analyzing
</div>
<div class="card-body">
<h5 class="card-title">Identify ocer complex words</h5>
<p class="card-text">Score: {{clearnerssWordsResponse.score}}</p>
<p class="card-text">{{clearnerssWordsResponse.message}}</p>
<hr>
<h5 class="card-title">Identify over complex sentences</h5>
<p class="card-text">Score: {{clearnerssSentenceResponse.score}}</p>
<p class="card-text">{{clearnerssSentenceResponse.message}}</p>
<hr>
<h5 class="card-title">Count the total number of characters in the speech</h5>
<p class="card-text">Score: {{conclusionResponse.score}}</p>
<p class="card-text">{{conclusionResponse.message}}</p>
<hr>
<h5 class="card-title">identify best uses for introduction</h5>
<p class="card-text">Score: {{commentsResponse.score}}</p>
<p class="card-text"><span ng-repeat="comment in commentsResponse.message track by $index">{{comment}}</span></p>
<hr>
<h5 class="card-title">Identify questions that user used in introduction</h5>
<p class="card-text">Score: {{questionsResponse.score}}</p>
<p class="card-text"><span ng-repeat="comment in questionsResponse.message track by $index">{{comment}}</span></p>
<hr>
<h5 class="card-title">Count the total number of characters in the speech</h5>
<p class="card-text">Score: {{introductionFuncResponse.score}}</p>
<p class="card-text">{{introductionFuncResponse.message}}</p>
<hr>
<h5 class="card-title">identify best uses for introduction</h5>
<p class="card-text">Score: {{introductionFuncResponse.score}}</p>
<p class="card-text">{{introductionFuncResponse.message}}</p>
<hr>
<h5 class="card-title">Identify questions that user used in introduction</h5>
<p class="card-text">Score: {{introductionBestUsesFuncResponse.score}}</p>
<p class="card-text"><span ng-repeat="comment in introductionBestUsesFuncResponse.message track by $index">{{comment}}</span></p>
<hr>
<h5 class="card-title">Keyword count</h5>
<p class="card-text">Score: {{keywordExtractionResponse.score}}</p>
<p class="card-text"><span ng-repeat="comment in keywordExtractionResponse.message track by $index">{{comment}}</span></p>
<hr>
<h5 class="card-title">Synonyms</h5>
<p class="card-text">Score: {{synonymsFunctionResponse.score}}</p>
<p class="card-text">{{synonymsFunctionResponse.message}}</p>
<hr>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col">
<div class="card">
<div class="card-header">
Flows of the speech
</div>
<div class="card-body">
<h5 class="card-title">Double words</h5>
<p class="card-text">Score: {{doubleWordsFuncResponse.score}}</p>
<p class="card-text">{{doubleWordsFuncResponse.message}}</p>
<hr>
<h5 class="card-title">Filler Word in your Speech</h5>
<hr>
<h5 class="card-title">Pause count</h5>
<p class="card-text">Score: {{countPausesResponse.score}}</p>
<p class="card-text">{{countPausesResponse.message}}</p>
<hr>
<h5 class="card-title">Filler words count</h5>
<p class="card-text">Score: {{countFillerWordsResponse.score}}</p>
<p class="card-text">{{countFillerWordsResponse.message}}</p>
<hr>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col">
<div class="card">
<div class="card-header">
Grammar
</div>
<div class="card-body">
<h5 class="card-title">Grammar</h5>
<p class="card-text">Score: {{grammarFuncResponse.score}}</p>
<p class="card-text"><span ng-repeat="comment in grammarFuncResponse.message track by $index">{{comment}}</span></p>
<hr>
<h5 class="card-title">GingerIt</h5>
<h5 class="card-title text-primary">Corrections</h5>
<p class="card-text">Score: {{gingerItParseResponse.score}}</p>
<p class="card-text" ng-repeat="comment in gingerItParseResponse.message.corrections track by $index">{{comment.correct}} | {{comment.definition}} | {{comment.text}}</p>
<p class="card-text">{{gingerItParseResponse.message.result}}</p>
<p class="card-text">{{gingerItParseResponse.message.text}}</p>
<hr>
</div>
</div>
</div>
</div>
</div>
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 footer-contact">
<h3>SPEECH MASTER</h3>
<p>
SLIIT Mabalbe<br />
<br /><br />
<strong>Phone:</strong> +94 705694853<br />
<strong>Email:</strong> janithaalas@gmail.com<br />
</p>
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Useful Links</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Home</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">About us</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Services</a>
</li>
<li>
<i class="bx bx-chevron-right"></i>
<a href="#">Terms of service</a>
</li>
<li>
<i class="bx bx-chevron-right"></i>
<a href="#">Privacy policy</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Our Services</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Content Analyzing</a>
</li>
<li>
<i class="bx bx-chevron-right"></i>
<a href="#">Facial Expressions Analyzing</a>
</li>
<li>
<i class="bx bx-chevron-right"></i>
<a href="#">Grammer Checking</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Filler Words Tracking</a>
</li>
<li>
<i class="bx bx-chevron-right"></i>
<a href="#">Customized Report</a>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-6 footer-newsletter">
<h4>Join Our Newsletter</h4>
<p>
Tamen quem nulla quae legam multos aute sint culpa legam noster
magna
</p>
<form action="" method="post">
<input type="email" name="email" /><input type="submit" value="Subscribe" />
</form>
</div>
</div>
</div>
</div>
<div class="container d-md-flex py-4">
<div class="me-md-auto text-center text-md-start">
<div class="copyright">
&copy; Copyright <strong><span>SPEECH MASTER</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/ -->
Designed by <a href="https://www.sliit.lk/">SLIIT 2017 Batch</a>
</div>
</div>
<div class="social-links text-center text-md-right pt-3 pt-md-0">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
</footer>
<!-- End Footer -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
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