Interactgenics Final Report 20bce1496 1609 1816

CSE4015 HUMAN COMPUTER INTERACTION
REPORT ON
INTERACTGENICS
Submitted By
ANIKET BHUWANIA 20BCE1496

SHREYA S NAIR 20BCE1609
SHILPAN PAWAN SINGH 20BCE1816
B. Tech CSE
Submitted to
Prof. Premanand V
(SCOPE, VIT CHENNAI)
VIT Chennai
Vandalur - Kelambakkam Road, Chennai - 600127
ABSTRACT
Interactgenics, a combination of the word’s interaction and genics, which means producing interaction,
serves as the name of our project. Enhancing human computer interaction is the fundamental goal of
our endeavour.
The majority of the online calculators that are now accessible need the user to click, input using a
keyboard, or touch the screen in order to obtain results, which can be tedious. As a result, we have
developed a new concept in which a system will be developed that will enable users to utilise "voice"
commands to operate an online calculator.
Since no two people are exactly the same in terms of their physical and mental capacities, we will be
developing a system that can be used by all types of users.
Therefore, our technology will make it simple for them to utilize the calculator, regardless of their
abilities.
Additionally, we would aim to incorporate several languages into voice navigation to make it simpler
and more efficient than current voice models.
INTRODUCTION
Nowadays, the majority of websites need users to click, enter using a keyboard, or touch the screen to
navigate, which can be tedious. As a result, we have developed a new concept: developing a system
that would enable users to navigate websites using "voice" commands.
The solution we're creating can be included into various website types, increasing user-computer
interaction and decreasing the amount of time users need to spend learning the user interface (UI).
Since no two people are exactly the same in terms of their physical and mental capacities, we will be
developing a system that can be used by all types of users.
Speech navigation would support other languages to make it more user-friendly and efficient than the
speech models used now, which are primarily based on English. Due to the fact that no two people are
exactly alike in terms of their physical and mental skills, we will design a system that can be used by
all different types of users. Because of this, regardless of their skill, they will be able to use the
calculator easily thanks to our technology.
EXISTING SYSTEMS
Most of the currently accessible online calculators need the user to click, input using a keyboard, or
touch the screen in order to obtain results, which can be tedious.
As a result, we have come up with a new concept: developing a system that would enable users to
utilize "voice" commands to operate an online calculator.
Most of the websites currently in existence require users to navigate a webpage, which might be
tedious, you can click, text using a keyboard, or touch the screen.
Making it difficult for many users to operate the calculator effectively.
PROBLEM STATEMENT
● Keyboard Issues
• Typing becomes a frustrating issue very fast.

• certain keys stop functioning
• Inadequate key press response time
● Mouse Issue
• Mouse Cursor Freezes

• Uneven Mouse Pointer Behaviour
● Health Issues
• Long-term keyboard and mouse use can result in conditions such as carpal tunnel syndrome,
shoulder, arm, wrist.
• Hand overuse injuries, poor posture, eyestrain, and pain in the muscles and joints.
● Traditional online calculators
• When using a keyboard or mouse, input needs human effort.

INTRODUCTION TO PROPOSED MODEL
In a novel idea we have developed, a system will be created that will allow users to utilize "voice"
commands to control an online calculator. Many of the currently available online calculators need the
user to click, type using a keyboard, or touch the screen in order to get results, which can be time-
consuming. Therefore, in a novel idea we have developed, a system will be created that will allow
users to utilize "voice" commands to control an online calculator.
Speech navigation would include a variety of languages to make it easier to use and more effective
than present voice models, which are mostly based on English. We will create a system that can be
used by all different sorts of users because no two persons are exactly alike in terms of their physical
and mental capabilities. Because of this, our technology will make it simple for them to use the
calculator, regardless of their ability.
” Speech to Text “module will be used to convert voice command of user into text then the input will
be processed to give desired result to user. The output of mathematical operation will be displayed on
screen and it will be dictated as well with the help of “Text to Speech” module.
PROPOSED SOLUTION
• The website can be used by a user using voice commands even if they have no prior knowledge
of the calculator.
• There is no need to worry about the lifespan of the keyboard and mouse, which eliminates the
needless expense of purchasing new ones.
• Users only need to utilize voice instructions from their own comfortable position to operate the
calculator with ease and without making any additional physical effort.
• We can make the voice command feature multilingual in order to improve it even more and
help people from other groups.
COMPONENTS OF THE MODEL
1. SPEECH TO TEXT (VOICE RECOGNITION)

2. TEXT TO SPEECH MODULE
3. JAVASCRIPT FUNCTIONS
• Stringsplit
• Numbers
• Clearfield
• Speakresult
• Calculator
• Degrees_to_radian
• solveTrignometricequation
• computeLogarithmicproblem
4. HTML
5. CSS
6. BOOTSTRAP
BLOCK DIAGRAM
FIG 1. BLOCK DIAGRAM
The user chooses the sort of calculator they want to use. Depending on the command type, the user
enters instructions that are then transformed via speech-to-text into mathematical expressions and
shown in the transcript box.
The mathematical expression is then evaluated on the backend using various JavaScript functions after
being obtained from the user.
The use of JS functions allows for the execution of mathematical operations such as arithmetic and
trigonometric calculations. The results of the prior command are then displayed on the screen. The
output will be offered in both text and voice formats. The user will also be dictated the finished text
when the text to speech module is used.
DESCRIPTION OF THE COMPONENTS
1. Speech to Text (Voice Recognition): It is a module that helps to convert speech to text. It can
recognize a wide variety of languages and related dialects. We can use this by pressing the
microphone icon to start converting voice to text.
2. Text to Speech Module: It narrates text to the user via voice commands. It is a voice
synthesizer that can translate a stream of digital text into speech that sounds authentic in
multiple languages. Pitch, speaking speed, and word emphasis can all be changed dynamically
in speech and voice.
3. JavaScript functions: To perform various mathematical calculations such as arithmetic
operations as well as trigonometry calculations.
• Calculator- This is the main function of the program that will perform various
operations. In this project we have kept two main types of operations i.e. Arithmetic
and Trigonometric operations.
• Numbers- This function will extract the operators from the input provided by the user.
• Clearfield- Once the result is calculated, the user can clear the field for the next
operation to be performed.
• Speakresult- This function will convert the text to speech and give the output result.
• String Split- This function will split the string into the array which will help us to find
the operators and operands to perform further calculations
• Degree_to_radian- This function will convert the trigonometric degree given by the
user in degrees to radian which will be further used to solve the trigonometric
equations.
• solveTrignometricequation- This function is used to take the input from the user and
then return the trigonometric solution of the given input by the user.
• computeLogarithmicproblem- This function is used to take the input from the user
and then return the logarithmic solution of the given input by the user.
WORKING MECHANISMS
Voice commands given by the user will be converted to text and then it will be sent to script. JS
functions are created to perform mathematical operations which includes arithmetic, trigonometric and
logarithmic operations. Then the output of given command will be displayed on screen. The output
will be given in the form of text as well as voice. The resultant text will be dictated also to the user
with the help of text to speech module.
For example, if the user says sin30 then the corresponding text will be displayed in the textbox and it
will be sent to script to evaluate and in return the system will say 0.5 as its output and the resultant text
will also be displayed on screen along with the audio.
Another example. If the user says sin90 + cos90 then the output will be displayed as 1 as well as it will
be narrated by the model.
FLOW DIAGRAM
FIG 2. FLOW DIAGRAM

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>HCI</title>
<meta content="" name="description">
<meta content="" name="keywords">
<link href="assets/img/favicon.png" rel="icon">

<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,7
00,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Satisfy"
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/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<header id="header" class="fixed-top d-flex justify-content-center align-items-center

header-transparent">

<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>

<li><a class="nav-link scrollto" href="#services">Calculator</a></li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
</header>


<section id="hero">
<div class="hero-container">


<span style="font-size:149px">INTERACTGENICS</span>
<h2 style="font-size:20px">Welcome to our website</h2>
<a href="#about" class="btn-scroll scrollto" title="Scroll Down"><i class="bx bx-
chevron-down"></i></a>
</div>
</section>
<main id="main">


<section id="about" class="about">
<div class="container">
<div class="section-title">
<span>About our website</span>
<h2>About our website</h2>
<p>The name of our project is Interactgenics which is a combination of two
words Interaction and genics which
means producing interaction. The main objective of our initiative is to
enhance human computer interaction.
Majority of the online calculators available now require user to click, type
via keyboard or touch on screen
to get the results which can be monotonous. So, we have come up with a
different idea of creating a system
that will allow user to use the online calculator using "speech" commands.
The system which we are going to develop can be integrated into different
kinds of websites which will
thereby increase human- computer interaction and also it will save time of
user spent in understanding the
UI. We will be creating a system that can be accessed by different kinds of
users as everyone does not have
same physical and mental capabilities.
So, our system will allow them to easily use the calculator irrespective of
their capabilities.
Moreover,we would work to make voice navigation easy and effective compared
to voice models used nowadays by
incorporating multiple languages.</p>
</div>
<div class="row">
<div class="image col-lg-4 d-flex align-items-stretch justify-content-center
justify-content-lg-start"></div>
<div class="col-lg-8 d-flex flex-column align-items-stretch">
<div class="content ps-lg-4 d-flex flex-column justify-content-center">
<div class="row">
</div>
<div class="row mt-n4">
<div class="col-md-6 mt-5 d-md-flex align-items-md-stretch">
<div class="count-box">
<span data-purecounter-start="0" data-purecounter-end="4" data-
purecounter-duration="1"
class="purecounter"></span>
<p><strong>Simple Calculation</strong><br>eg-
:Add,Subtract,Multiply,Divide...</p>
</div>
</div>

<p><strong>Trignometric Calculation</strong><br>
eg-: cos x, sin x, tan x, cosin x, sec x, cot x ....
</p>
</div>
</div>

<p><strong>Logarithmic Calculation</strong>
<br>
eg-: log base 2(x), log base 10(x) ....
</p>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</section>


<section id="services" class="services">
<span>Voice Calculator</span>
<h2>Voice Calculator</h2>
<p>Provide voice commands or text commands in transcript</p>
</div>
<div class="row">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title" style="text-align: center;">Voice and Text
Calculator</h3>
<form action="/" method="post">
<div class="mt-4" id="div_language">
<h4 class="mb-3 text-dark lang">Select Language</h4>
<select class="form-select bg-secondary text-light"
id="select_language"
onchange="updateCountry()"></select>
<select class="form-select bg-secondary text-light mt-2"
id="select_dialect"></select>
<select class="form-select bg-secondary text-light mt-2"
id="operation_type">

<option value="Logarithmic base 10 operations">Logarithmic base
10 operations Calculator</option>
</select>
</div>
<h4 class="mt-4 text-dark">Transcript</h4>
<div class="p-3" style="border: 1px solid gray; height: 300px;

border-radius: 8px;">
<textarea id="final" cols="80" rows="10" name="tfinal"></textarea>
</div>
<div class="mt-4" style="text-align:center">
<input type="button" class="btn btn-success" id="start"
value="Start"></input>
<input type="button" id="stop" class="btn btn-danger"
value="Stop"></input>
<button type="button" class="btn btn-primary"
onclick="calculator()">Submit</button>
<button type="button" class="btn btn-primary"
onclick="clearfield()">Clear</button>
<p id="status" class="lead mt-3"
style="display: none;color: black;font-family: 'Lucida Sans',
'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-
serif;font-size: 24px;">
Listenting ...</p>
</div>
</form>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title" style="text-align:center;">Output</h2>
<select id='voiceList'></select> <br><br>
<input id='txtInput' /> <br><br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>


<section id="contact" class="contact">
<span>Contact Us</span>
<h2>SUPPORT</h2>
<p>In case of any queries you can reach out to us on any of the platforms.</p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-12">
<div class="info-box">
<i class="bx bx-share-alt"></i>
<h3>Social Profiles</h3>
<div class="social-links">
<a href="https://www.google.com/" class="twitter" target="_blank"><i
class="bi bi-twitter"></i></a>
<a href="https://www.google.com/" class="facebook"
target="_blank"><i
class="bi bi-facebook"></i></a>
<a href="https://www.google.com/" class="instagram"
target="_blank"><i
class="bi bi-instagram"></i></a>
<a href="https://www.google.com/" class="google-plus"
target="_blank"><i
class="bi bi-skype"></i></a>
<a href="https://www.google.com/" class="linkedin"
target="_blank"><i
class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<div class="info-box mt-4">
<i class="bx bx-envelope"></i>
<h3>Email Us</h3>
<p>supportinteractgenics@gmail.com</p>
</div>
</div>
<div class="info-box mt-4">
<i class="bx bx-phone-call"></i>
<h3>Call Us</h3>
<p>+91 9431390300</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<form action="forms/contact.php" method="post" role="form" class="php-email-
form">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name"
placeholder="Your Name" required>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" id="email"
placeholder="Your Email" required>
</div>
</div>
<div class="form-group mt-3">
<input type="text" class="form-control" name="subject" id="subject"
placeholder="Subject" required>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" rows="6"
placeholder="Message" required></textarea>
</div>
<div class="my-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</section>
</main>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i

class="bi bi-arrow-up-short"></i></a>


<script src="speechrec.js"></script>
<script src="lng.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.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/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.7.2/math.min.js"></script>
<script>
var txtInput = document.querySelector('#txtInput');
var voiceList = document.querySelector('#voiceList');
var btnSpeak = document.querySelector('#btnSpeak');
var synth = window.speechSynthesis;
var voices = [];
PopulateVoices();
if (speechSynthesis !== undefined) {
speechSynthesis.onvoiceschanged = PopulateVoices;
}
function speakresult() {
var toSpeak = new SpeechSynthesisUtterance(txtInput.value);
var selectedVoiceName = voiceList.selectedOptions[0].getAttribute('data-name');
voices.forEach((voice) => {
if (voice.name === selectedVoiceName) {
toSpeak.voice = voice;
}
});
synth.speak(toSpeak);
}
function PopulateVoices() {
voices = synth.getVoices();
var selectedIndex = voiceList.selectedIndex < 0 ? 0 : voiceList.selectedIndex;
voiceList.innerHTML = '';
voices.forEach((voice) => {
var listItem = document.createElement('option');
listItem.textContent = voice.name;
listItem.setAttribute('data-lang', voice.lang);
listItem.setAttribute('data-name', voice.name);
voiceList.appendChild(listItem);
});
voiceList.selectedIndex = selectedIndex;
}
</script>
<script>
// code for clear button

function clearfield() {
const textarea = document.getElementById('final');
textarea.value = '';
}
// code to split the string and get all possible words from the string
function stringsplit(strinput) {
var myarray = strinput.split("");
return myarray;
}
function stringsplits(strinput) {
var myarray = strinput.split(" ");
return myarray;
}
// to convert the degree into radian for the trignometric operations

function degrees_to_radian(radians) {
var pi = Math.PI;
return radians * (pi / 180);
}
// for all possible arithmetic equations using bodmas rule

function solveEquation(equation) {
// Replace "x" with "*" for multiplication
equation = equation.replace(/x/g, '*');
try {
const result = eval(equation);
if (!isFinite(result)) {
return "Invalid equation";
}
return result;
}
catch (error) {
}
}
// to solve the trignometric equations

function solveTrigonometryEquation(equation) {
try {
// Define a regular expression to match trigonometric functions without
parentheses
const regex = /(\b(sin|cos|tan)\s+(\d+(\.\d+)?))(\s+|$)/g;
// Replace trigonometric function expressions with their evaluated values

equation = equation.replace(regex, function (match, fullExpression, func, angle)
{
const radians = parseFloat(angle) * (Math.PI / 180); // Convert degrees to
radians
switch (func) {
case 'sin':
return Math.sin(radians);
case 'cos':
return Math.cos(radians);
case 'tan':
return Math.tan(radians);
case 'cosin':
return 1/Math.sin(radians);
case 'sec':
return 1/Math.cos(radians);
case 'cot':
return 1/Math.tan(radians);
default:
return fullExpression;
}
});
// Evaluate the expression

const result = eval(equation);
// Check for NaN or Infinity results

if (!isFinite(result)) {
}
return result;
}
catch (error) {
}
}
// integration
// logarithmic
function computeLogarithmicProblem(input) {
try {
// Replace natural language expressions with their mathematical equivalents
input = input.replace(/log of/gi, "");
// Split the input into parts

const parts = input.split("base");
if (parts.length !== 2) {
throw new Error("Invalid input format");
}
const base = parseFloat(parts[1].trim());

const value = parseFloat(parts[0].trim());
if (isNaN(base) || isNaN(value) || base <= 0 || base === 1 || value <= 0) {

throw new Error("Invalid input values");
}
// Calculate the logarithm using the JavaScript Math.log() function

const result = Math.log(value) / Math.log(base);
return result;
} catch (error) {
return "Invalid input or unable to compute";
}
}
function calculator() {
var value = document.getElementById("final").value;
var optype = document.getElementById("operation_type").value;
if (optype == "Arithemetic") {
const solution = solveEquation(value);
document.getElementById("txtInput").value = solution;
}
else if (optype == "Trignometric operations"){

const solution = solveTrigonometryEquation(value);
}
else if (optype == "Trignometric") {

var str = stringsplits(value);
// regex to extract number

let matches = value.match(/(\d+)/);
switch (str[0]) {
case "sin":
document.getElementById("txtInput").value =
Math.sin(degrees_to_radian(Number(matches[0])));
break;
case "cos":
Math.cos(degrees_to_radian(Number(matches[0])));
break;
case "tan":
Math.tan(degrees_to_radian(Number(matches[0])));
break;
case "cosin":
document.getElementById("txtInput").value = 1 /
Math.sin(degrees_to_radian(Number(matches[0])));
break;
case "sec":
Math.cos(degrees_to_radian(Number(matches[0])));
break;
case "cot":
Math.tan(degrees_to_radian(Number(matches[0])));
break;
default:
document.getElementById("txtInput").value = "Unable to understand! Please
try again";
break;
}
}
else if (optype == "Logarithmic calculator") {
// say input like log of 8 base 2
const solution = computeLogarithmicProblem(value);

// var str = stringsplits(value);

// // regex to extract number
// let matches = value.match(/(\d+)/);
// document.getElementById("txtInput").value = Math.log10(matches[0]);
// else if (optype == "Logarithmic base 2") {

// var str = stringsplits(value);
// // regex to extract number

// let matches = value.match(/(\d+)/);
// document.getElementById("txtInput").value = Math.log2(matches[0]);
// }
else if (optype == "Logarithmic base 2 operations") {

let matches = value.match(/\d+/g);
// console.log(matches);
// console.log(matches[1]);
if(str[2]=="+"){
if(str.length == 5){
document.getElementById("txtInput").value = Math.log2(matches[0]) +
Math.log2(matches[1]);
}
else{
if(str[0]=="log"){
Math.round(matches[1]);
}
else{
document.getElementById("txtInput").value = Math.round(matches[0]) +
}
}
}
else if(str[2]=="-"){
document.getElementById("txtInput").value = Math.log2(matches[0]) -
}
else{
if(str[0]=="log"){
}
else{
document.getElementById("txtInput").value = Math.round(matches[0]) -
}
}
}
else if(str[2]=="*" || str[2]=="x" || str2[2]=="X"){
document.getElementById("txtInput").value = Math.log2(matches[0]) *
}
else{
if(str[0]=="log"){
}
else{
document.getElementById("txtInput").value = Math.round(matches[0]) *
}
}
}
else if(str[2]=="/"){
document.getElementById("txtInput").value = Math.log2(matches[0]) /
}
else{
if(str[0]=="log"){
}
else{
document.getElementById("txtInput").value = Math.round(matches[0]) /
}
}
}
else if (optype == "Logarithmic base 10 operations") {


let matches = value.match(/\d+/g);
// console.log(matches);
// console.log(matches[1]);
if(str[2]=="+"){
}
else{
if(str[0]=="log"){
}
else{
document.getElementById("txtInput").value = Math.round(matches[0]) +
}
}
}
else if(str[2]=="-"){
}
else{
if(str[0]=="log"){
}
else{
document.getElementById("txtInput").value = Math.round(matches[0]) -
}
}
}
else if(str[2]=="*" || str[2]=="x" || str2[2]=="X"){
}
else{
if(str[0]=="log"){
}
else{
document.getElementById("txtInput").value = Math.round(matches[0]) *
}
}
}
else if(str[2]=="/"){
}
else{
if(str[0]=="log"){
}
else{
document.getElementById("txtInput").value = Math.round(matches[0]) /
}
}
}
if (document.getElementById("txtInput").value != '') {
speakresult();
}
}
</script>


<script src="assets/js/main.js"></script>
</body>
</html>
STYLES.CSS
/**
* Template Name: Laura - v4.9.1
* Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
color: #444444;
}
a {
color: #ffb727;
text-decoration: none;
}
a:hover {
color: #ffc85a;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
background: #ffb727;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 28px;
color: #fff;
line-height: 0;
}
.back-to-top:hover {
background: #ffc550;
color: #fff;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
z-index: 997;
transition: all 0.5s;
height: 80px;
background: rgba(25, 28, 31, 0.8);
}
#header.header-transparent {
background: transparent;
}
#header.header-scrolled {
height: 60px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
justify-content: space-between;
padding: 10px 15px;
color: #fff;
white-space: nowrap;
transition: 0.3s;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #ffb727;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 4px;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 14px;
text-transform: none;
font-weight: 400;
color: #3b434a;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover,

.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
color: #ffb727;
}
.navbar .dropdown:hover>ul {
opacity: 1;
top: 100%;
}
.navbar .dropdown .dropdown ul {

top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover>ul {

opacity: 1;
top: 0;
left: 100%;
}
@media (max-width: 1366px) {

.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover>ul {

left: -100%;
}
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}

.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
transition: 0.3s;
z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a,
.navbar-mobile a:focus {
padding: 10px 20px;
font-size: 14px;
color: #3b434a;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #ffb727;
}
.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
background: #fff;
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover,

.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
color: #ffb727;
}
.navbar-mobile .dropdown>.dropdown-active {
display: block;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
width: 100%;
height: 100vh;
background: url("../img/sample.jpg") top right;
background-size: cover;
position: relative;
}
#hero:before {
content: "";
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#hero .hero-container {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 15px;
}
#hero h1 {
margin: 0 0 10px 0;
font-size: 64px;
font-family: "Satisfy", serif;
color: #fff;
}
#hero h2 {
color: #eee;
margin-bottom: 50px;
font-size: 13px;
font-weight: 500;
}
#hero .btn-scroll {
transition: 0.4s;
color: rgba(255, 255, 255, 0.6);
animation: up-down 1s ease-in-out infinite alternate-reverse both;
}
#hero .btn-scroll i {
font-size: 48px;
}
#hero .btn-scroll:hover {
color: #ffb727;
}
@media (min-width: 1024px) {

#hero {
background-attachment: fixed;
}
}

#hero h1 {
font-size: 40px;
}
#hero h2 {
text-align: center;
}
}
@-webkit-keyframes up-down {
0% {
transform: translateY(5px);
}
100% {
transform: translateY(-5px);
}
}
@keyframes up-down {
0% {
transform: translateY(5px);
}
100% {
transform: translateY(-5px);
}
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
padding: 60px 0;
}
.section-bg {
background-color: white;
}
.section-title {
text-align: center;
padding: 30px 0;
position: relative;
}
.section-title h2 {
font-size: 32px;
font-weight: 700;
padding-bottom: 0;
color: #3b434a;
position: relative;
z-index: 2;
}
.section-title span {
position: absolute;
top: 30px;
color: #eef0f2;
left: 0;
right: 0;
z-index: 1;
font-weight: 700;
font-size: 52px;
line-height: 0;
}
.section-title p {
margin-bottom: 0;
position: relative;
z-index: 2;
}

.section-title h2 {
font-size: 28px;
}
.section-title span {
font-size: 38px;
}
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 20px 0;
background-color: #f4f5f6;
min-height: 40px;
margin-top: 78px;
}

.breadcrumbs {
margin-top: 60px;
}
}
.breadcrumbs h2 {
font-size: 24px;
font-weight: 300;
margin: 0;
}

.breadcrumbs h2 {
margin: 0 0 10px 0;
}
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
}
.breadcrumbs ol li+li {
padding-left: 10px;
}
.breadcrumbs ol li+li::before {
display: inline-block;
padding-right: 10px;
color: #6c757d;
content: "/";
}

.breadcrumbs .d-flex {
display: block !important;
}
.breadcrumbs ol {
display: block;
}
.breadcrumbs ol li {
}
}
/*--------------------------------------------------------------
# About Me
--------------------------------------------------------------*/
.about .content h3 {
font-weight: 700;
font-size: 26px;
color: #3b434a;
}
.about .content ul {
list-style: none;
padding: 0;
}
.about .content ul li {
display: flex;
}
.about .content ul strong {

margin-right: 10px;
}
.about .content ul i {
font-size: 16px;
margin-right: 5px;
color: #ffb727;
line-height: 0;
}
.about .content p:last-child {

margin-bottom: 0;
}
.about .content .count-box {

width: 100%;
}
.about .content .count-box i {

display: block;
font-size: 36px;
color: #ffb727;
float: left;
line-height: 0;
}
.about .content .count-box span {

font-size: 36px;
line-height: 30px;
display: block;
font-weight: 700;
color: #3b434a;
margin-left: 50px;
}
.about .content .count-box p {

padding: 15px 0 0 0;
margin: 0 0 0 50px;
font-size: 14px;
color: #5d6a75;
}
.about .content .count-box a {

font-weight: 600;
display: block;
margin-top: 20px;
color: #5d6a75;
font-size: 15px;
transition: ease-in-out 0.3s;
}
.about .content .count-box a:hover {

color: #82909c;
}
.about .image {
background: url("../img/sample2.jpeg") bottom right;
height: 300px;
width:300px
}
.about .skills-content {
margin-top: 30px;
}
.about .skills-content .progress {

height: 60px;
display: block;
background: none;
border-radius: 0;
}
.about .skills-content .progress .skill {

padding: 10px 0;
margin: 0 0 6px 0;
display: block;
font-weight: 700;
color: #3b434a;
}
.about .skills-content .progress .skill .val {

float: right;
font-style: normal;
}
.about .skills-content .progress-bar-wrap {

background: #e6e8eb;
}
.about .skills-content .progress-bar {

width: 1px;
height: 10px;
transition: 0.9s;
background-color: #ffb727;
}
/*--------------------------------------------------------------
# My Resume
--------------------------------------------------------------*/
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
color: #3b434a;
}
.resume .resume-item {
padding: 0 0 20px 20px;
margin-top: -2px;
border-left: 2px solid #82909c;
position: relative;
}
.resume .resume-item h4 {
line-height: 18px;
font-size: 16px;
font-weight: 700;
color: #ffb727;
}
.resume .resume-item h5 {
font-size: 16px;
background: #eef0f2;
padding: 5px 15px;
font-weight: 600;
}
.resume .resume-item ul {
padding-left: 20px;
}
.resume .resume-item ul li {
padding-bottom: 10px;
}
.resume .resume-item:last-child {
padding-bottom: 0;
}
.resume .resume-item::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
left: -9px;
top: 0;
background: #fff;
border: 2px solid #82909c;
}
/*--------------------------------------------------------------
# My Services
--------------------------------------------------------------*/
.services .icon-box {
padding: 30px;
position: relative;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
transition: all 0.3s ease-in-out;
text-align: center;
border: 1px solid #fff;
}
.services .icon {
margin: 0 auto 20px auto;
padding-top: 17px;
text-align: center;
border-radius: 50%;
width: 72px;
height: 72px;
background: #fff4df;
}
.services .icon i {
font-size: 36px;
line-height: 1;
color: #ffb727;
}
.services .title {
font-weight: 700;
font-size: 18px;
}
.services .title a {
color: #111;
transition: 0.3s;
}
.services .description {
font-size: 15px;
line-height: 28px;
margin-bottom: 0;
}
.services .icon-box:hover {
border-color: #ffb727;
}
.services .icon-box:hover .title a {

color: #ffb727;
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials {
padding: 80px 0;
background: url("../img/testimonials-bg.jpg") no-repeat;
background-position: center center;
position: relative;
}
.testimonials::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.testimonials .section-header {
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonials .testimonial-item {
text-align: center;
color: #fff;
}
.testimonials .testimonial-item .testimonial-img {

width: 100px;
border-radius: 50%;
border: 6px solid rgba(255, 255, 255, 0.15);
margin: 0 auto;
}
.testimonials .testimonial-item h3 {
font-size: 20px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #fff;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #ddd;
margin: 0 0 15px 0;
}
.testimonials .testimonial-item .quote-icon-left,

.testimonials .testimonial-item .quote-icon-right {
color: rgba(255, 255, 255, 0.4);
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {

left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
right: -5px;
position: relative;
top: 10px;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 auto 15px auto;
color: #eee;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {

width: 12px;
height: 12px;
opacity: 1;
background-color: rgba(255, 255, 255, 0.4);
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {

}
@media (min-width: 992px) {

.testimonials .testimonial-item p {
width: 80%;
}
}
/*--------------------------------------------------------------
# My Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
list-style: none;
}
.portfolio #portfolio-flters li {
cursor: pointer;
margin: 0 10px 10px 10px;
font-size: 15px;
font-weight: 600;
line-height: 1;
padding: 7px 10px;
color: #444444;
border: 2px solid #fff;
}
.portfolio #portfolio-flters li:hover,

.portfolio #portfolio-flters li.filter-active {
color: #f3a200;
}
.portfolio .portfolio-item {
}
.portfolio .portfolio-item .portfolio-img {

overflow: hidden;
}
.portfolio .portfolio-item .portfolio-img img {

}
.portfolio .portfolio-item .portfolio-info {

opacity: 0;
position: absolute;
left: 15px;
bottom: 0;
z-index: 3;
right: 15px;
transition: all ease-in-out 0.3s;
padding: 10px 15px;
}
.portfolio .portfolio-item .portfolio-info h4 {

font-size: 18px;
color: #fff;
font-weight: 600;
color: #fff;
margin-bottom: 0px;
}
.portfolio .portfolio-item .portfolio-info p {

color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin-bottom: 0;
}
.portfolio .portfolio-item .portfolio-info .preview-link,

.portfolio .portfolio-item .portfolio-info .details-link {
position: absolute;
right: 40px;
font-size: 24px;
top: calc(50% - 18px);
color: #fff;
transition: 0.3s;
}
.portfolio .portfolio-item .portfolio-info .preview-link:hover,

.portfolio .portfolio-item .portfolio-info .details-link:hover {
color: #ffc041;
}
.portfolio .portfolio-item .portfolio-info .details-link {

right: 10px;
}
.portfolio .portfolio-item:hover .portfolio-img img {

transform: scale(1.2);
}
.portfolio .portfolio-item:hover .portfolio-info {

opacity: 1;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding-top: 40px;
}
.portfolio-details .portfolio-details-slider img {

width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {

margin-top: 20px;
position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-

bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #ffb727;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-

bullet-active {
}
.portfolio-details .portfolio-info {
padding: 30px;
box-shadow: 0px 0 30px rgba(59, 67, 74, 0.08);
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
border-bottom: 1px solid #eee;
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li+li {
margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
}
.portfolio-details .portfolio-description p {
padding: 0;
}
/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
padding: 20px;
background: #fff;
text-align: center;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.pricing h3 {
font-weight: 400;
margin: -20px -20px 20px -20px;
padding: 20px 15px;
font-size: 16px;
font-weight: 600;
color: #777777;
background: #f8f8f8;
}
.pricing h4 {
font-size: 36px;
color: #ffb727;
font-weight: 600;
font-family: "Open Sans", sans-serif;
}
.pricing h4 sup {
font-size: 20px;
top: -12px;
left: -3px;
}
.pricing h4 span {
color: #bababa;
font-size: 16px;
font-weight: 300;
}
.pricing ul {
padding: 0;
list-style: none;
color: #444444;
text-align: center;
line-height: 20px;
font-size: 14px;
}
.pricing ul li {
}
.pricing ul i {
color: #ffb727;
font-size: 18px;
padding-right: 4px;
}
.pricing ul .na {
color: #ccc;
text-decoration: line-through;
}
.pricing .btn-wrap {
margin: 20px -20px -20px -20px;
padding: 20px 15px;
background: #f8f8f8;
text-align: center;
}
.pricing .btn-buy {
padding: 8px 35px;
border-radius: 4px;
color: #fff;
transition: none;
font-size: 14px;
font-weight: 400;
font-weight: 600;
transition: 0.3s;
}
.pricing .btn-buy:hover {
background: #ffc85a;
}
.pricing .featured h3 {
color: #fff;
}
.pricing .advanced {
width: 200px;
position: absolute;
top: 18px;
right: -68px;
transform: rotate(45deg);
z-index: 1;
font-size: 14px;
padding: 1px 0 3px 0;
color: #fff;
}
/*--------------------------------------------------------------
# Contact Me
--------------------------------------------------------------*/
.contact .info-box {
color: #444444;
text-align: center;
box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
padding: 20px 0 30px 0;
}
.contact .info-box i.bx {

font-size: 24px;
color: #ffb727;
border-radius: 50%;
padding: 15px;
background: #fff6e4;
}
.contact .info-box h3 {
font-size: 20px;
color: #777777;
font-weight: 700;
margin: 10px 0;
}
.contact .info-box p {
padding: 0;
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.contact .social-links {
margin-top: 15px;
display: flex;
justify-content: center;
}
.contact .social-links a {
font-size: 18px;
color: #687683;
line-height: 1;
margin: 0 8px;
transition: 0.3s;
padding: 14px;
border: 1px solid #dde1e4;
}
.contact .social-links a:hover {
color: #fff;
}
.contact .php-email-form {
box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
padding: 27px;
}
.contact .php-email-form .validate {

display: none;
color: red;
margin: 0 0 15px 0;
font-weight: 400;
font-size: 13px;
}
.contact .php-email-form .error-message {

display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .error-message br+br {

margin-top: 25px;
}
.contact .php-email-form .sent-message {

display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .loading {

display: none;
background: #fff;
text-align: center;
padding: 15px;
}
.contact .php-email-form .loading:before {

content: "";
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input,

.contact .php-email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
}
.contact .php-email-form input::focus,

.contact .php-email-form textarea::focus {
}
.contact .php-email-form input {

padding: 10px 15px;
}
.contact .php-email-form textarea {

padding: 12px 15px;
}
.contact .php-email-form button[type=submit] {

border: 0;
padding: 10px 24px;
color: #fff;
transition: 0.4s;
border-radius: 5px;
}
.contact .php-email-form button[type=submit]:hover {

background: #ffc85a;
}
@-webkit-keyframes animate-loading {
0% {
}
100% {
}
}
@keyframes animate-loading {
0% {
}
100% {
}
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
background: url("../img/footer-bg.jpg") top center no-repeat;
color: #fff;
font-size: 14px;
text-align: center;
padding: 80px 0;
position: relative;
}
#footer::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#footer .container {
position: relative;
}
#footer h3 {
font-size: 36px;
font-weight: 700;
color: #fff;
position: relative;
padding: 0;
margin: 0 0 15px 0;
}
#footer p {
font-size: 15;
font-style: italic;
padding: 0;
margin: 0 0 40px 0;
}
#footer .social-links {
margin: 0 0 40px 0;
}
#footer .social-links a {
font-size: 18px;
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}
#footer .social-links a:hover {
background: #f3a200;
color: #fff;
}
#footer .copyright {
margin: 0 0 5px 0;
}
#footer .credits {
font-size: 13px;
}
MAIN.JS
/**
* Template Name: Laura - v4.9.1
* Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
(function() {
"use strict";
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all)
if (selectEl) {
if (all) {
selectEl.forEach(e => e.addEventListener(type, listener))
} else {
selectEl.addEventListener(type, listener)
}
}
}
/**
* Easy on scroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener('scroll', listener)
}
/**
* Navbar links active state on scroll
*/
let navbarlinks = select('#navbar .scrollto', true)
const navbarlinksActive = () => {
let position = window.scrollY + 200
navbarlinks.forEach(navbarlink => {
if (!navbarlink.hash) return
let section = select(navbarlink.hash)
if (!section) return
if (position >= section.offsetTop && position <= (section.offsetTop +
section.offsetHeight)) {
navbarlink.classList.add('active')
} else {
navbarlink.classList.remove('active')
}
})
}
window.addEventListener('load', navbarlinksActive)
onscroll(document, navbarlinksActive)
/**
* Scrolls to an element with header offset
*/
const scrollto = (el) => {
let header = select('#header')
let offset = header.offsetHeight
if (!header.classList.contains('header-scrolled')) {
offset -= 20
}
let elementPos = select(el).offsetTop

window.scrollTo({
top: elementPos - offset,
behavior: 'smooth'
})
}
/**
* Toggle .header-scrolled class to #header when page is scrolled
*/
let selectHeader = select('#header')
if (selectHeader) {
const headerScrolled = () => {
if (window.scrollY > 100) {
selectHeader.classList.add('header-scrolled')
} else {
selectHeader.classList.remove('header-scrolled')
}
}
window.addEventListener('load', headerScrolled)
onscroll(document, headerScrolled)
}
/**
* Back to top button
*/
let backtotop = select('.back-to-top')
if (backtotop) {
const toggleBacktotop = () => {
if (window.scrollY > 100) {
backtotop.classList.add('active')
} else {
backtotop.classList.remove('active')
}
}
window.addEventListener('load', toggleBacktotop)
onscroll(document, toggleBacktotop)
}
/**
* Mobile nav toggle
*/
on('click', '.mobile-nav-toggle', function(e) {
select('#navbar').classList.toggle('navbar-mobile')
this.classList.toggle('bi-list')
this.classList.toggle('bi-x')
})
/**
* Mobile nav dropdowns activate
*/
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)
/**
* Scrool with ofset on links with a class name .scrollto
*/
on('click', '.scrollto', function(e) {
if (select(this.hash)) {
e.preventDefault()
let navbar = select('#navbar')

if (navbar.classList.contains('navbar-mobile')) {
navbar.classList.remove('navbar-mobile')
let navbarToggle = select('.mobile-nav-toggle')
navbarToggle.classList.toggle('bi-list')
navbarToggle.classList.toggle('bi-x')
}
scrollto(this.hash)
}
}, true)
/**
* Scroll with ofset on page load with hash links in the url
*/
window.addEventListener('load', () => {
if (window.location.hash) {
if (select(window.location.hash)) {
scrollto(window.location.hash)
}
}
});
/**
* Skills animation
*/
let skilsContent = select('.skills-content');
if (skilsContent) {
new Waypoint({
element: skilsContent,
offset: '80%',
handler: function(direction) {
let progress = select('.progress .progress-bar', true);
progress.forEach((el) => {
el.style.width = el.getAttribute('aria-valuenow') + '%'
});
}
})
}
/**
* Testimonials slider
*/
new Swiper('.testimonials-slider', {
speed: 600,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
/**
* Porfolio isotope and filter
*/
window.addEventListener('load', () => {
let portfolioContainer = select('.portfolio-container');
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item'
});
let portfolioFilters = select('#portfolio-flters li', true);
on('click', '#portfolio-flters li', function(e) {

e.preventDefault();
portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active');
});
this.classList.add('filter-active');
portfolioIsotope.arrange({
filter: this.getAttribute('data-filter')
});
}, true);
}
});
/**
* Initiate portfolio lightbox
*/
const portfolioLightbox = GLightbox({
selector: '.portfolio-lightbox'
});
/**
* Portfolio details slider
*/
new Swiper('.portfolio-details-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
/**
* Initiate Pure Counter
*/
new PureCounter();
})()
OUTPUT
ARITHMETIC OPERATION:
TRIGNOMETRIC CALCULATOR:
TRIGNOMETRIC OPERATIONS CALCULATOR:

LOGARITHMIC CALCULATOR:
LOGARITHMIC BASE2 OPERATIONS:
LOGARITHMIC BASE10 OPERATIONS:

CONCLUSION
The system developed can be integrated into various websites to perform calculations in less time
and it can be used by different users irrespective of their cognitive abilities. The Multilingual feature
used will allow users from different countries of the world to use the system effectively in the
language they are comfortable with. Mathematical calculations such as arithmetic and trigonometric
operations can be done quickly by this system unlike conventional systems which require the user to
type the input. Thus, making our system efficient to use. UI of the system developed is easy to use
and understand. Hence, it will not cause any trouble for users to access it. The system is developed
keeping in mind the mental model of users. This will allow users to use the system frequently when
required rather than switching to other systems which thereby indicates user’s satisfaction and
fulfilment of user’s requirements.
REFERENCES
• SPEECH TO TEXT
o https://cloud.ibm.com/apidocs/speech-to-text
o https://cloud.google.com/speech-to-text/docs
• TEXT TO SPEECH
o https://cloud.google.com/text-to-speech
o https://murf.ai/text-to-speech
• JAVASCRIPT DOCUMENTATION
o https://devdocs.io/javascript-json/
o Method definitions - JavaScript | MDN (mozilla.org)
• BOOTSTRAP
o https://bootstrapdocs.com/v3.3.0/docs/getting-started/
o https://bootstrapdocs.com/v3.3.0/docs/components/
o https://bootstrapdocs.com/v3.3.0/docs/css/

Interactgenics Final Report 20bce1496 1609 1816

Uploaded by

Copyright:

Available Formats

You might also like

Interactgenics Final Report 20bce1496 1609 1816

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Interactgenics Final Report 20bce1496 1609 1816

Uploaded by

Copyright:

Available Formats

CSE4015 HUMAN COMPUTER INTERACTION

ANIKET BHUWANIA 20BCE1496

Making it difficult for many users to operate the calculator effectively.

• Typing becomes a frustrating issue very fast.

• Mouse Cursor Freezes

● Traditional online calculators

• When using a keyboard or mouse, input needs human effort.

1. SPEECH TO TEXT (VOICE RECOGNITION)

FIG 1. BLOCK DIAGRAM

DESCRIPTION OF THE COMPONENTS

FIG 2. FLOW DIAGRAM

<link href="assets/img/favicon.png" rel="icon">

<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="assets/css/style.css" rel="stylesheet">

<header id="header" class="fixed-top d-flex justify-content-center align-items-center

<div class="col-md-6 mt-5 d-md-flex align-items-md-stretch">

<div class="col-md-6 mt-5 d-md-flex align-items-md-stretch">

<!-- <div class="col-md-6 mt-5 d-md-flex align-items-md-stretch">

<!-- drop down options for all possible calculations to be done --

<option value="Arithemetic">Arithemetic Calculator</option>

<div class="p-3" style="border: 1px solid gray; height: 300px;

</main>

<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i

// code for clear button

// to convert the degree into radian for the trignometric operations

// for all possible arithmetic equations using bodmas rule

// to solve the trignometric equations

// Replace trigonometric function expressions with their evaluated values

// Evaluate the expression

// Check for NaN or Infinity results

// Split the input into parts

const base = parseFloat(parts[1].trim());

if (isNaN(base) || isNaN(value) || base <= 0 || base === 1 || value <= 0) {

// Calculate the logarithm using the JavaScript Math.log() function

else if (optype == "Trignometric operations"){

else if (optype == "Trignometric") {

// regex to extract number

else if (optype == "Logarithmic calculator") {

// say input like log of 8 base 2

const solution = computeLogarithmicProblem(value);

// var str = stringsplits(value);

// else if (optype == "Logarithmic base 2") {

// // regex to extract number

else if (optype == "Logarithmic base 2 operations") {

else if (optype == "Logarithmic base 10 operations") {

// regex to extract number

.navbar .dropdown ul a:hover,

.navbar .dropdown .dropdown ul {

.navbar .dropdown .dropdown:hover>ul {

@media (max-width: 1366px) {

.navbar .dropdown .dropdown:hover>ul {