Created
August 1, 2020 18:16
-
-
Save hariomkushwaha/f5cb604880bed17e23f038ba454e1b7e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<link rel="shortcut icon" href="https://www.betterbuys.com/wp-content/uploads/2016/08/IPM-Global-logo.png"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
body { | |
font-family: "Lato", sans-serif; | |
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQLyWMfGxRsGGn3x3NnTRk2AsEX3ts8qf7jMjcC4ViAQM65bufh"); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
} | |
ul { | |
list-style-type: none; | |
margin: -8px; | |
/* padding: 0;*/ | |
overflow: hidden; | |
background-color: #333; | |
} | |
li { | |
float: left; | |
} | |
li a { | |
display: block; | |
color: white; | |
text-align: center; | |
padding: 14px 16px; | |
text-decoration: none; | |
} | |
li a:hover:not(.active) { | |
background-color: #111; | |
} | |
.active { | |
background-color: #111; | |
} | |
/*<!--.sidenav {--> | |
<!-- height: 100%;--> | |
<!-- width: 0;--> | |
<!-- position: fixed;--> | |
<!-- z-index: 1;--> | |
<!-- background-color: #111;--> | |
<!-- overflow-x: hidden;--> | |
<!-- transition: 0.5s;--> | |
<!-- padding-top: 60px;--> | |
<!--}--> | |
<!--.sidenav a {--> | |
<!-- padding: 8px 8px 8px 32px;--> | |
<!-- text-decoration: none;--> | |
<!-- font-size: 25px;--> | |
<!-- color: #818181;--> | |
<!-- display: block;--> | |
<!-- transition: 0.3s;--> | |
<!--}--> | |
<!--.sidenav a:hover {--> | |
<!-- color: #f1f1f1;--> | |
<!--}--> | |
<!--.sidenav .closebtn {--> | |
<!-- position: absolute;--> | |
<!-- right: 25px;--> | |
<!-- font-size: 36px;--> | |
<!-- margin-left: 50px;--> | |
<!--}--> | |
<!--@media screen and (max-height: 450px) {--> | |
<!-- .sidenav {padding-top: 15px;}--> | |
<!-- .sidenav a {font-size: 18px;}--> | |
<!--}-->*/ | |
/*search*/ | |
.search-container{ | |
width: 490px; | |
display: block; | |
margin: 0 auto; | |
border-radius: 9px; | |
} | |
input.search-bar{ | |
margin: 0 -70px; | |
width: 100%; | |
height: 45px; | |
padding: 0 50px; | |
font-size: 1rem; | |
border: 1px solid #D0CFCE; | |
outline: none; | |
border-radius: 25px; | |
&:focus{ | |
border: 1px solid #008ABF; | |
transition: 0.35s ease; | |
color: #008ABF; | |
&::-webkit-input-placeholder{ | |
transition: opacity 0.45s ease; | |
opacity: 0; | |
} | |
&::-moz-placeholder { | |
transition: opacity 0.45s ease; | |
opacity: 0; | |
} | |
&:-ms-placeholder { | |
transition: opacity 0.45s ease; | |
opacity: 0; | |
} | |
} | |
} | |
.search-icon{ | |
position: relative; | |
float: right; | |
width: 75px; | |
height: 75px; | |
top: -62px; | |
right: 51px; | |
} | |
.bg-image { | |
/* The image used */ | |
/* Add the blur effect */ | |
filter: blur(8px); | |
-webkit-filter: blur(8px); | |
/* Full height */ | |
height: 100%; | |
/* Center and scale the image nicely */ | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
} | |
/* Position text in the middle of the page/image */ | |
.bg-text { | |
/* Fallback color */ | |
background-image: linear-gradient(to bottom, rgba(0,102,255,0.8), rgba(0,0,0,1)); /* Black w/opacity/see-through */ | |
color: white; | |
font-weight: bold; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
z-index: -1; | |
width: 100%; | |
height:100%; | |
/*padding: 20px;*/ | |
text-align:left; | |
} | |
</style> | |
</head> | |
<body onload="getArgs({{args}}); getOutput({{output}})"> | |
<ul> | |
<li><a href="{% url 'profill'%}">Home</a></li> | |
<li><a href="{% url 'jira'%}">Jira</a></li> | |
<li><a href="{% url 'Confluence'%}">Confluence</a></li> | |
<li><a href="{% url 'Github'%}">Github</a></li> | |
<li><a href="{% url 'mailsearcher'%}">Email</a></li> | |
<li style="float:right"><a class="active" href="{% url 'index'%}">Logout</a></li> | |
</ul> | |
<div class="bg-image"></div> | |
<div class="bg-text"> | |
<div id="mySidenav" class="sidenav"> | |
</div> | |
<div style="margin-top: 100px; margin-left:20px;"> | |
<img src="https://cdn.freebiesupply.com/logos/large/2x/jira-logo-black-and-white.png" style="width: 415px; max-height: 250px;margin-left: 540px; padding-bottom: 37px;margin-top: 22px; "> | |
<form id="labnol" class="search-container" action="{%url 'jira_search'%}" method="POST" > | |
{% csrf_token %} | |
<input type="text" class="search-bar" placeholder="What can I help you with today?" name="query" id="transcript"> | |
<input type="text" class="search-bar" placeholder="params for query" name="params" id="params"> | |
<!-- <a href="listen"> --><img class="search-icon" onclick="startDictation()" src="https://webstockreview.net/images/microphone-clipart-logo-10.png" style=" width: 90PX; | |
height: 42px; | |
top: -45px; | |
left: 50px;"><!-- </a> --> | |
<a href="search"><img class="search-icon" src="http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon.png" style="float:left;left: -83px;"></a> | |
</form> | |
<br> | |
<!-- <form id="getargs" class="search-container" action="{%url 'jira_search'%}" method="POST" > | |
{% csrf_token %} | |
</form> --> | |
</div> | |
<div style="text-align: center;"> | |
{{output}} | |
</div> | |
</div> | |
<script> | |
function startDictation() { | |
if (window.hasOwnProperty('webkitSpeechRecognition')) { | |
var recognition = new webkitSpeechRecognition(); | |
recognition.continuous = true; | |
recognition.interimResults = false; | |
recognition.lang = "en-US"; | |
recognition.start(); | |
recognition.onresult = function(e) { | |
document.getElementById('transcript').value | |
= e.results[0][0].transcript; | |
recognition.stop(); | |
document.getElementById('labnol').submit(); | |
}; | |
recognition.onerror = function(e) { | |
recognition.stop(); | |
} | |
} | |
} | |
function speechToText() { | |
var text; | |
if (window.hasOwnProperty('webkitSpeechRecognition')) { | |
var recognition = new webkitSpeechRecognition(); | |
recognition.continuous = true; | |
recognition.interimResults = false; | |
recognition.lang = "en-US"; | |
recognition.start(); | |
recognition.onresult = function(e) { | |
text= e.results[0][0].transcript; | |
recognition.stop(); | |
}; | |
return text; | |
recognition.onerror = function(e) { | |
recognition.stop(); | |
} | |
} | |
} | |
function getOutput(output){ | |
var msg = new SpeechSynthesisUtterance(); | |
msg.text = output; | |
window.speechSynthesis.speak(msg); | |
} | |
function getArgs(args){ | |
var params={}; | |
if(args.length>0){ | |
var msg = new SpeechSynthesisUtterance(); | |
for(i=0;i<=args.length;i++){ | |
msg.text = "What is "+args[i]; | |
window.speechSynthesis.speak(msg); | |
params[args[i]] = speechToText(); | |
} | |
document.getElementById('params').value | |
=params; | |
document.getElementById('labnol').submit(); | |
}; | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment