hariomkushwaha/core.html

## core.html
<!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">
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {

  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #34495e;
  /*color: #fff;*/
}
h1 {
  text-align: center;
  margin: 2rem 0;
  font-size: 2.5rem;
}

.accordion {
  width: 90%;
  max-width: 1000px;
  margin: 26rem auto;
}
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "\002B";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "\2212";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  font-size: 20px;
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media(max-width:767px) {
  html {
    font-size: 14px;
  }
}

.mera{
    text-align: center;
    padding: 20px;
    font-size: 20px;
}

body {
  background: #222032;
}

.box {
  position: absolute;
  top: 30%;
  left: 50%;
}

.object {
  display: flex;
  flex: 0 1 100%;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}

.outline {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 8px solid #B5A4A4;
  animation: pulse 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  position: absolute;
}

.button {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #50CDDD;
  box-shadow: 0px 0px 80px #0084F9;
  position: absolute;
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0;
    border: 65px solid #0B3082;
  }
  50% {
    border: solid #A3FFC2;
    opacity: 0.8;
  }

   90% {
    transform: scale(3.2);
    opacity: 0.2;
    border: 3px solid #2E3CFF;
  }
  100% {
    transform: scale(3.3);
    opacity: 0;
    border: 1px solid #7A89FF;
  }
}

#delayed {
  animation-delay: 1.5s;
}

#circlein {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #6BD6E1;
  box-shadow: 0px -2px 15px #E0FF94;
  position: absolute;
}

.mic-icon {
  height: 60px;
  position: absolute;
  margin: 21px;
}
.nav {
  list-style-type: none;
  margin: -8px;
 /* padding: 0;*/
  overflow: hidden;
  background-color: #333;
  /*position: absolute;*/
}

.na {
  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: #6b99df;
}


</style>
</head>
<body>
<ul class="nav">
  <li class="na"><a href="{% url 'profill'%}">Home</a></li>
  <li class="na"><a href="{% url 'jira'%}">Jira</a></li>
  <li class="na"><a href="{% url 'Confluence'%}">Confluence</a></li>
  <li class="na"><a href="{% url 'Github'%}">Github</a></li>
  <li class="na"><a href="{% url 'mailsearcher'%}">Email</a></li>

  <li style="float:right"><a class="active" href="{% url 'index'%}">Logout</a></li>
</ul>

<div class="box">
   <div class="object">
      <div class="outline">
      </div>
      <div class="outline" id="delayed">
      </div>
      <div class="button">
      </div>
      <div class="button" id="circlein"><a href="listen">
        <svg class="mic-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" style="fill:#1E2D70">
<g><path d="M500,683.8c84.6,0,153.1-68.6,153.1-153.1V163.1C653.1,78.6,584.6,10,500,10c-84.6,0-153.1,68.6-153.1,153.1v367.5C346.9,615.2,415.4,683.8,500,683.8z M714.4,438.8v91.9C714.4,649,618.4,745,500,745c-118.4,0-214.4-96-214.4-214.4v-91.9h-61.3v91.9c0,141.9,107.2,258.7,245,273.9v124.2H346.9V990h306.3v-61.3H530.6V804.5c137.8-15.2,245-132.1,245-273.9v-91.9H714.4z"/></g>
</svg>
      </a></div>
   </div>
</div>

<div class="accordion">
  <div class="accordion-item">
    <div class="mera"><h2>All Result</h2>

     {{output all search result}}


<canvas id="buyers" width="600" height="400"></canvas>
        <!-- pie chart canvas element -->
        <canvas id="countries" width="600" height="400"></canvas>
        <!-- bar chart canvas element -->
        <canvas id="income" width="600" height="400"></canvas>

    </div>

  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Jira
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        {{output jira}}
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Confluence
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
          {{output confluence}}
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Github
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        {{output github}}
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Bitbucket
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        {{output bitbucket}}
      </div>
    </div>
  </div>
</div>

 <script>
const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

accordionItemHeaders.forEach(accordionItemHeader => {
  accordionItemHeader.addEventListener("click", event => {

    // Uncomment in case you only want to allow for the display of only one collapsed item at a time!

    // const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
    // if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
    //   currentlyActiveAccordionItemHeader.classList.toggle("active");
    //   currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
    // }

    accordionItemHeader.classList.toggle("active");
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if(accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    }
    else {
      accordionItemBody.style.maxHeight = 0;
    }

  });
});
</script>

<!-- <script>
var oilCanvas = document.getElementById("oilChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;

var oilData = {
    labels: [
        "Saudi Arabia",
        "Russia",
        "Iraq",

    ],
    datasets: [
        {
            data: [23,56,20],
            backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#611122"
            ]
        }]
};

var pieChart = new Chart(oilCanvas, {
  type: 'pie',
  data: oilData
});

</script> -->
<script>
            // line chart data
            var buyerData = {
                labels : ["Jira","Confluence","Github"],
                datasets : [
                {
                    fillColor : "rgba(172,194,132,0.4)",
                    strokeColor : "#ACC26D",
                    pointColor : "#fff",
                    pointStrokeColor : "#9DB86D",
                    data : [1,2,3]
                }
            ]
            }
            // get line chart canvas
            var buyers = document.getElementById('buyers').getContext('2d');
            // draw line chart
            new Chart(buyers).Line(buyerData);
            // pie chart data
            var pieData = [
                {
                    value: 10,
                    color:"#878BB6",
                    label:"jira"
                },
                {
                    value : 40,
                    color : "#4ACAB4",
                    label:"jira"

                },
                {
                    value : 10,
                    color : "#FF8153",
                    label:"jira"
                }

            ];
            // var labels =[
            //   "Saudi Arabia",
            //     "Russia",
            //     "Iraq"
            // ];

            // pie chart options
            var pieOptions = {
                 segmentShowStroke : true,
                 animateScale : true
            }

            // get pie chart canvas
            var countries= document.getElementById("countries").getContext("2d");
            // draw pie chart
            new Chart(countries).Pie(pieData,pieOptions);
            // bar chart data
            var barData = {
                labels : ["Jira","Confluence","Github"],
                datasets : [
                    {
                        fillColor : "#48A497",
                        strokeColor : "#48A4D1",
                        data : [1,2,3]
                    }
                    // {
                    //     fillColor : "rgba(73,188,170,0.4)",
                    //     strokeColor : "rgba(72,174,209,0.4)",
                    //     data : [364,504,605,400,345,320]
                    // }
                ]
            }
            // get bar chart canvas
            var income = document.getElementById("income").getContext("2d");
            // draw bar chart
            new Chart(income).Bar(barData);
        </script>


</body>
</html>
	<!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">
	<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
	<style>
	@import url('https://fonts.googleapis.com/css?family=Montserrat');

	* {

	box-sizing: border-box;
	}
	body {
	font-family: 'Montserrat', sans-serif;
	background-color: #34495e;
	/color: #fff;/
	}
	h1 {
	text-align: center;
	margin: 2rem 0;
	font-size: 2.5rem;
	}

	.accordion {
	width: 90%;
	max-width: 1000px;
	margin: 26rem auto;
	}
	.accordion-item {
	background-color: #fff;
	color: #111;
	margin: 1rem 0;
	border-radius: 0.5rem;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
	}
	.accordion-item-header {
	padding: 0.5rem 3rem 0.5rem 1rem;
	min-height: 3.5rem;
	line-height: 1.25rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
	}
	.accordion-item-header::after {
	content: "\002B";
	font-size: 2rem;
	position: absolute;
	right: 1rem;
	}
	.accordion-item-header.active::after {
	content: "\2212";
	}
	.accordion-item-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	}
	.accordion-item-body-content {
	font-size: 20px;
	padding: 1rem;
	line-height: 1.5rem;
	border-top: 1px solid;
	border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
	}

	@media(max-width:767px) {
	html {
	font-size: 14px;
	}
	}

	.mera{
	text-align: center;
	padding: 20px;
	font-size: 20px;
	}

	body {
	background: #222032;
	}

	.box {
	position: absolute;
	top: 30%;
	left: 50%;
	}

	.object {
	display: flex;
	flex: 0 1 100%;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	}

	.outline {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 8px solid #B5A4A4;
	animation: pulse 3s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	position: absolute;
	}

	.button {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #50CDDD;
	box-shadow: 0px 0px 80px #0084F9;
	position: absolute;
	}

	@keyframes pulse {
	0% {
	transform: scale(0);
	opacity: 0;
	border: 65px solid #0B3082;
	}
	50% {
	border: solid #A3FFC2;
	opacity: 0.8;
	}

	90% {
	transform: scale(3.2);
	opacity: 0.2;
	border: 3px solid #2E3CFF;
	}
	100% {
	transform: scale(3.3);
	opacity: 0;
	border: 1px solid #7A89FF;
	}
	}

	#delayed {
	animation-delay: 1.5s;
	}

	#circlein {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #6BD6E1;
	box-shadow: 0px -2px 15px #E0FF94;
	position: absolute;
	}

	.mic-icon {
	height: 60px;
	position: absolute;
	margin: 21px;
	}
	.nav {
	list-style-type: none;
	margin: -8px;
	/* padding: 0;*/
	overflow: hidden;
	background-color: #333;
	/position: absolute;/
	}

	.na {
	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: #6b99df;
	}


	</style>
	</head>
	<body>
	<ul class="nav">
	<li class="na"><a href="{% url 'profill'%}">Home</a></li>
	<li class="na"><a href="{% url 'jira'%}">Jira</a></li>
	<li class="na"><a href="{% url 'Confluence'%}">Confluence</a></li>
	<li class="na"><a href="{% url 'Github'%}">Github</a></li>
	<li class="na"><a href="{% url 'mailsearcher'%}">Email</a></li>

	<li style="float:right"><a class="active" href="{% url 'index'%}">Logout</a></li>
	</ul>

	<div class="box">
	<div class="object">
	<div class="outline">
	</div>
	<div class="outline" id="delayed">
	</div>
	<div class="button">
	</div>
	<div class="button" id="circlein"><a href="listen">
	<svg class="mic-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" style="fill:#1E2D70">
	<g><path d="M500,683.8c84.6,0,153.1-68.6,153.1-153.1V163.1C653.1,78.6,584.6,10,500,10c-84.6,0-153.1,68.6-153.1,153.1v367.5C346.9,615.2,415.4,683.8,500,683.8z M714.4,438.8v91.9C714.4,649,618.4,745,500,745c-118.4,0-214.4-96-214.4-214.4v-91.9h-61.3v91.9c0,141.9,107.2,258.7,245,273.9v124.2H346.9V990h306.3v-61.3H530.6V804.5c137.8-15.2,245-132.1,245-273.9v-91.9H714.4z"/></g>
	</svg>
	</a></div>
	</div>
	</div>

	<div class="accordion">
	<div class="accordion-item">
	<div class="mera"><h2>All Result</h2>

	{{output all search result}}





	<canvas id="buyers" width="600" height="400"></canvas>
	<!-- pie chart canvas element -->
	<canvas id="countries" width="600" height="400"></canvas>
	<!-- bar chart canvas element -->
	<canvas id="income" width="600" height="400"></canvas>

	</div>

	</div>
	<div class="accordion-item">
	<div class="accordion-item-header">
	Jira
	</div>
	<div class="accordion-item-body">
	<div class="accordion-item-body-content">
	{{output jira}}
	</div>
	</div>
	</div>
	<div class="accordion-item">
	<div class="accordion-item-header">
	Confluence
	</div>
	<div class="accordion-item-body">
	<div class="accordion-item-body-content">
	{{output confluence}}
	</div>
	</div>
	</div>
	<div class="accordion-item">
	<div class="accordion-item-header">
	Github
	</div>
	<div class="accordion-item-body">
	<div class="accordion-item-body-content">
	{{output github}}
	</div>
	</div>
	</div>
	<div class="accordion-item">
	<div class="accordion-item-header">
	Bitbucket
	</div>
	<div class="accordion-item-body">
	<div class="accordion-item-body-content">
	{{output bitbucket}}
	</div>
	</div>
	</div>
	</div>

	<script>
	const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

	accordionItemHeaders.forEach(accordionItemHeader => {
	accordionItemHeader.addEventListener("click", event => {

	// Uncomment in case you only want to allow for the display of only one collapsed item at a time!

	// const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
	// if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
	// currentlyActiveAccordionItemHeader.classList.toggle("active");
	// currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
	// }

	accordionItemHeader.classList.toggle("active");
	const accordionItemBody = accordionItemHeader.nextElementSibling;
	if(accordionItemHeader.classList.contains("active")) {
	accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
	}
	else {
	accordionItemBody.style.maxHeight = 0;
	}

	});
	});
	</script>

	<!-- <script>
	var oilCanvas = document.getElementById("oilChart");

	Chart.defaults.global.defaultFontFamily = "Lato";
	Chart.defaults.global.defaultFontSize = 18;

	var oilData = {
	labels: [
	"Saudi Arabia",
	"Russia",
	"Iraq",

	],
	datasets: [
	{
	data: [23,56,20],
	backgroundColor: [
	"#FF6384",
	"#63FF84",
	"#611122"
	]
	}]
	};

	var pieChart = new Chart(oilCanvas, {
	type: 'pie',
	data: oilData
	});

	</script> -->
	<script>
	// line chart data
	var buyerData = {
	labels : ["Jira","Confluence","Github"],
	datasets : [
	{
	fillColor : "rgba(172,194,132,0.4)",
	strokeColor : "#ACC26D",
	pointColor : "#fff",
	pointStrokeColor : "#9DB86D",
	data : [1,2,3]
	}
	]
	}
	// get line chart canvas
	var buyers = document.getElementById('buyers').getContext('2d');
	// draw line chart
	new Chart(buyers).Line(buyerData);
	// pie chart data
	var pieData = [
	{
	value: 10,
	color:"#878BB6",
	label:"jira"
	},
	{
	value : 40,
	color : "#4ACAB4",
	label:"jira"

	},
	{
	value : 10,
	color : "#FF8153",
	label:"jira"
	}

	];
	// var labels =[
	// "Saudi Arabia",
	// "Russia",
	// "Iraq"
	// ];

	// pie chart options
	var pieOptions = {
	segmentShowStroke : true,
	animateScale : true
	}

	// get pie chart canvas
	var countries= document.getElementById("countries").getContext("2d");
	// draw pie chart
	new Chart(countries).Pie(pieData,pieOptions);
	// bar chart data
	var barData = {
	labels : ["Jira","Confluence","Github"],
	datasets : [
	{
	fillColor : "#48A497",
	strokeColor : "#48A4D1",
	data : [1,2,3]
	}
	// {
	// fillColor : "rgba(73,188,170,0.4)",
	// strokeColor : "rgba(72,174,209,0.4)",
	// data : [364,504,605,400,345,320]
	// }
	]
	}
	// get bar chart canvas
	var income = document.getElementById("income").getContext("2d");
	// draw bar chart
	new Chart(income).Bar(barData);
	</script>


	</body>
	</html>