Untitled

<!doctype html>
<html>

	<head>
		<meta name="viewport" content=width = device-width, initial-scale=1">
		<title>Bootstrap Layouts</title>


		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
		<!--header -->


		<div class="jumbotron">
			<div class="container">
				<div class="page-title">
					<h1 class="text-center">Influenza A Host Predictor</h1>
					<h5 class="text-center"> This platform gives the host prediction of a H1 or H5 hemagglutinin strain using Support Vector Machine</h5>
				</div>
			</div>
		</div>
	</head>

	<body>

		<header>
			<!--navigational bar -->
			<div class="navbar navbar-static-top" role="banner">
				<div class="container-fluid">
	  				<div class="navbar-inner">

	    				<!--menu buttons-->
	   					<ul class="nav nav-tabs">
	      					<li><a data-toggle="tab" href="#about">About</a></li>
	      					<li><a data-toggle="tab" href="#submit">Submit</a></li>
	      					<li><a data-toggle="tab" href="#analyse">Analyse</a></li>
	    				</ul>

	    				<!--contents in menu buttons -->
	    				<div class="tab-content">
	    					<!--About page-->
  							<div id="about" class="tab-pane fade in active">
    							<h3>About</h3>


	    						<div class="container-fluid">
									<div class="row">
										<div class="col-sm-push-3 ">
											<h4>Influenza Host Tropism</h4>
											Influenza A is virus that cause respiratory diseases to infected hosts.
											</div>

										<div class="col-sm-push-3 ">
											<h4>Column2</h4>
											NANANANAANNNANANANANANAJDJJSJDJSJSJDJDJDJDJCJDCJDCJSCDCJDCJSDJCDJCJDCJDSCJSEEYAYAYAYAYA
										</div>
										<div class="col-sm-push-3 ">
											<h4>Column3</h4>
											NANANANAANNNANANANANANAJDJJSJDJSJSJDJDJDJDJCJDCJDCJSCDCJDCJSDJCDJCJDCJDSCJSEEJJJJJJJJJJJJJJJJJJJJ
										</div>
										<div class="col-sm-push-3 ">
											<h4>Column4</h4>
											NANANANAANNNANANANANANAJDJJSJDJSJSJDJDJDJDJCJDCJDCJSCDCJDCJSDJCDJCJDCJDSCJSEEBLAHBLAH
										</div>
									</div>
								</div>
							</div>


  							<div id="submit" class="tab-pane fade">

    							<h3>Submit</h3>

                                    <form method="POST" action= "/InfluenzaProj/sequence">
  										<div class="form-group">
    										<label class="form-control-label" for="formGroupExampleInput">Input Sequence</label>

    										<input type="text" class="form-control" placeholder="Please input sequence here" id="formGroupExampleInput" name="sequenceIn" >

  										</div>
                                        <button type="submit" class="btn btn-success btn-sm" style="float:right;" role="button">Submit Sequence</button>
                                    </form><br>

                                    <p>Your sequence is {{ sequenceIn }}</p>
                                    <p></p>
    							    <div class="progress">
  									    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete</div>
								    </div>
  							</div>
  							<div id="analyse" class="tab-pane fade">
    							<h3>Analyse</h3>
    							<p>Some content in menu 2.</p>
  							</div>
						</div>
	  				</div>
	  			</div>
			</div>

		</header>


		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
					<h4>Column1</h4>
					NANANANAANNNANANANANANAJDJJSJDJSJSJDJDJDJDJCJDCJDCJSCDCJDCJSDJCDJCJDCJDSCJSEE
				</div>

				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
					<h4>Column2</h4>
					NANANANAANNNANANANANANAJDJJSJDJSJSJDJDJDJDJCJDCJDCJSCDCJDCJSDJCDJCJDCJDSCJSEEYAYAYAYAYA
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
					<h4>Column3</h4>
					NANANANAANNNANANANANANAJDJJSJDJSJSJDJDJDJDJCJDCJDCJSCDCJDCJSDJCDJCJDCJDSCJSEEJJJJJJJJJJJJJJJJJJJJ
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
					<h4>Column4</h4>
					NANANANAANNNANANANANANAJDJJSJDJSJSJDJDJDJDJCJDCJDCJSCDCJDCJSDJCDJCJDCJDSCJSEEBLAHBLAH
				</div>
			</div>
		</div>

		<div class="container">
			<div class="page-header">
				<h1>Bootstrap Tutorial</h1>
			</div>
			<div class="jumbotron">
				<p>hello my name ss</p>
				<p>
					<a href="#" class="btn btn-default btn-lg" role="button"> More Info </a>
					<button type="submit" class="btn btn-danger" role="button">Button</button>
					<input type="button" value="Info" class="btn btn-info">
					<button type="submit" class="btn btn-primary btn-sm" role="button">Primary</button>
					<button type="submit" class="btn btn-success btn-sm" role="button">Success</button>
					<button type="submit" class="btn btn-warning btn-lg" role="button">Warning</button>

					<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary</button>


				</p>


			</div>
		</div>
		<!-- Latest compiled and minified JavaScript -->

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


	</body>
</html>