<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>cv_image_suit</title>
	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- Font-->
	<link rel="stylesheet" type="text/css" href="static/css2/nunito-font.css">
	<!-- Main Style Css -->
    <link rel="stylesheet" href="static/css2/style.css"/>
    <style>
 #loading {
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 9999999999;
			overflow: hidden;
			background: rgba(255, 255, 255, 0.7);
		}
		.loader {
			border: 8px solid #f3f3f3;
			border-top: 8px solid #363e75;
			border-radius: 50%;
			width: 60px;
			height: 60px;
			left: 50%;
			margin-left: -4em;
			display: block;
			animation: spin 2s linear infinite;
		}
		.loader,
		.loader:after {display: block;position: absolute;top: 50%;margin-top: -4.05em;}
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
    </style>
</head>
<body class="form-v9">
	<div class="page-content">
		<div class="form-v9-content" style="background-image: url('static/assets/img/form-v9.jpg')">

			<form class="form-detail" action="/predict_all" method="post" onsubmit="loading();">

				<center>
                    {% for e in error %}
                        {{e}}
                    {% endfor %}
                </center>
				<h2>Configure Below Parameters</h2>

				<div>
                   <div>
                        <label for="PRED"> Provide Directory to prediction files:</label>
						<input type="text" name="PRED" id="PRED" class="input-text" placeholder="PREDICTION DIR" required>
					</div>
				</div>

			    <div class="form-row-last">
					<h1>Click Here To Predict !</h1>
					<input type="submit" name="register" class="register" value="Predict">
				</div>
				<div class="form-row-last">
					<h1>Click Here To Download Results !</h1>
					<a href="/download2" download style="color:white">Download</a>
				</div>
			</form>
            <center>
                <div id="loading"><div class="loader"></div>
                </div>
            </center>
		</div>

	</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
	$("#loading").hide();
	});
function loading(){
    $("#loading").show();
}

</script>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>


