Skip to content

Instantly share code, notes, and snippets.

@hariomkushwaha

hariomkushwaha/jiraNew.html

Created August 2, 2020 07:30
Show Gist options
  • Save hariomkushwaha/8d6b6229f7512ff5557bf2cb2fdb16a7 to your computer and use it in GitHub Desktop.
Save hariomkushwaha/8d6b6229f7512ff5557bf2cb2fdb16a7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jiraNew.html
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="https://www.betterbuys.com/wp-content/uploads/2016/08/IPM-Global-logo.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@2.9.3/introjs.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@2.9.3/themes/introjs-modern.min.css">
<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;
}
.hold-me{max-width:50px;border: 1px solid black;
border-radius: 30px;
padding: 10px;
margin: 0 auto;
text-align: center;
box-shadow: 0px 6px 20px 1px #00000063;
background-color: white;
margin-bottom: 15px;
cursor: pointer;}
.hold-me:hover {
box-shadow: 0px 6px 20px 1px #3F51B5;
border: 1px solid #3F51B5;
}
</style>
</head>
<body>
<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 %}
<img class="search-icon hold-me" onclick="startDictation()" src="https://image.flaticon.com/icons/svg/26/26312.svg" style=" width: 90PX;
height: 42px;
top: -9px;
left: -215px;">
<input type="text" class="search-bar" placeholder="What can I help you with today?" name="query" id="transcript">
<!-- <a href="listen"> --><!-- </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>
</div>
<div style="text-align: center;">
{{output}}
</div>
</div>
<!-- speech to text -->
<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();
}
}
}
</script>
<!-- Website tour -->
<!-- /* removing bullets coz it was building some unwanted blocks */ -->
<!-- .introjs-bullets {
display: none; -->
<!-- } -->
<script src="https://cdn.jsdelivr.net/npm/intro.js@2.9.3/intro.min.js"></script>
<script>
const intro = introJs()
intro.setOptions({
steps: [{
element:'.step-one',
intro: `Here, you can query about Confluence. Click on Mic to get started.`
},
]
})
intro.start();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment