<!DOCTYPE html>
<html>
<head>
	<link rel='stylesheet' type="text/css" href="{{ url_for('static',filename='styles/style.css') }}">
	<script src="{{url_for('static', filename='index.js')}}"></script>
	<title>inSPIRE-Interactive</title>
</head>
<body>	

    <!-- main page-->
	<div class = "page-wrapper">
	
		<!-- header -->
		{{ inspire_header|safe }}

		<!--second section -->

		<div class = "second-section">
			<div class = "second-section-center-left">
				<div class = "welcome-note">
					<p>Welcome to inSPIRE Interactive !</p>
				</div>
				<div class = "intro-inspire"> <p>
					inSPIRE-interactive is a simple, 
					webserver-based solution for you & your
					lab to reliably identify greater numbers
					of peptides from mass spec. experiments
					via inSPIRE and dive deeper into 
					immunopeptidomics experiments with inSPIRE-Pathogen.
					</p>
				</div>
				<div class = "buttons"> 
					<button type="button" class = "button-second-section"
						onclick="location.href='http://{{ server_address }}:5000/interact';"> 
						<p>&nbsp;&nbsp;&nbsp;&nbsp;GET STARTED					
						</p>
					</button>
					<button type="button" class = "button-second-section"
						onclick="window.location.href='#tutorial-video'"> 
						<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TUTORIAL					
						</p>
					</button>
				</div>
			</div>
			<div class = "second-section-center-right"> 
				<img src = "{{url_for('static', filename='plot_1.png')}}"
				class = "plot" 
				width = "90%">
			</div>
			
		</div>

		<!--Third section-->

		<div class = "third-section">
			<div class = "third-section-top">
				 <p> Why inSPIRE-Interactive? 
				 </p>
			</div>
		</div>
		<div class = "third-section">
			<div class = "third-section-bottom"> 
				<p>
					For any mass spectrometry analysis, sensitive
					and reliable identification is key to maximising 
					potential insights and discovery. The inSPIRE core 
					rescoring provides state-of-the-art identification,
					while inSPIRE-Pathogen allows you to find pathogen
					peptides in infected immunopeptidome samples.
					Further integrations can allow custom searches 
					to be run with MSFragger, binding affinity via 
					NetMHCpan, and quantification via Skyline to build 
					out your analysis ecosystem entirely within inSPIRE-interactive.
				</p>
			</div>
		</div>
		

		<!-- Fourth section-->

		<div class = "fourth-section">
			<div id = "tutorial-video" class = "fourth-section-left">
				<iframe  width="100%" height="100%" 
					src="https://www.youtube.com/embed/6wZtiu95zdY/?controls=1" frameBorder="0" allowfullscreen> 
				</iframe> 
			</div>
			<div class = "fourth-section-right">
				<p>
					Learn inSPIRE with<br>
					this tutorial. 
				</p>
			</div>
		</div>


	
		<!--footer-->

		{{ inspire_footer|safe }}
	</div>

</body>
</html>