<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iNeuron Vimeo Automation</title>
	<style>
		*{
		margin:0;
		padding:0;
		}
	body{
			
		background-image: url('/static/css/assets/img/img.jpeg');
		margin-top:40px;
		background-position:center;
		background-size:cover;
		font-family:sans-serif;
		}
	
		.regform{
				width:800px;
		background-color:rgb(0,0,0,0.6);
		margin:auto;
		color:#FFFFFF;
		padding:10px 0px 10px 0px;
		text-align:center;
		border-radius:15px 15px 0px 0px ;
		}  
		.main{
			background-color:rgb(0,0,0,0.5);
		width:800px;
		margin:auto;}
		
		form{
			padding:10px;
		
		} 
		
		#name{
			width:100%;
		height:100px;
		
		}  
		.name{
			margin-left:25px;	
		margin-top:10px;
		width: 125px;
				color: white;
				font-size: 18px;
				font-weight: 700;}
	.firstname{
			position: relative;
			left:200px;
			top:-37px;
			line-height: 40px;
			border-radius: 6px;
			padding: 0 22px;
			font-size: 16px;
			
			}
	.lastname{
			position: relative;
			left:417px;
			top:-80px;
			line-height: 40px;
			border-radius: 6px;
			padding: 0 22px;
			font-size: 16px;
			color:#555;       
						}  
	.firstlabel{
				position:relative;
				color:#E5E5E5;    
			text-transform: capitalize;
		font-size: 14px;
		left:203px;
		top:-45px;
		}   
	.lastlabel{
				position:relative;
		color:#E5E5E5;
		text-transform:capitalize;
		font-size:14px;
		left:492px;
		top:-76px;
		} 
	.company{
		position: relative;
		left:200px;
		top:-37px;
		line-height: 40px;
		border-radius: 6px;
		padding: 0 22px;
		font-size: 16px;
		color: #555;  }
	.email{
		position: relative;
		left:200px;
		top:-37px;
		line-height: 40px;
		border-radius: 6px;
		padding: 0 22px;
		font-size: 16px;
		color: #555;  
		}     
	
		.Code{
			position:relative;
		left:200px;
		top:-37px;
		line-height: 40px;
		width:95px;
			border-radius: 6px;
		padding: 0 22px;
		font-size: 16px;
		color: #555;  
		}
	.number{
			position:relative;
		left:200px;
		top:-37px;
		line-height: 40px;
		width:255px;
			border-radius: 6px;
		padding: 0 22px;
		font-size: 16px;
		color: #555; 
		}
	.area-code{
				position:relative;
			color:#E5E5E5;
			text-transform:capitalize;
			font-size:16px;
			left:54px;
			top:-4px;
		}
	.phone-number{
					position:relative;
			color:#E5E5E5;
			text-transform:capitalize;
			font-size:16px;
			left:-100px;
			top:-2px;
		}
	.option{
			position:relative;
		left:200px;
		top:-37px;
		line-height: 40px;
		width:532px;
		height:40px;
			border-radius: 6px;
		padding: 0 22px;
		font-size: 16px;
		color: #555; 
		outline:none;
		overflow:hidden;
		}    
		.option option{
					font-size:20px;
			}
		#coustomer{
					margin-left:25px;
		color:white;
		font-size:18px;
		
			} 
		.radio{
			display:inline-block;
		padding-right:70px;
		font-size:25px;
		margin-left:25px;
		margin-top:15px;
		color:white;
		}
		.radio input{
					width:20px;
		height:20px;
		border-radius:50%;
		cursor:pointer;
		outline:none;
		} 
		button{
		background-color:#3BAF9F;
		display:block;
		margin:20px 0px 0px 20px;
		text-align:center;
		border-radius:12px;
		border:2px solid #366473;
		padding:14px 110px;
		outline:none;
		color:white;
		cursor:pointer;
		transition:0.25px;
		} 
		button:hover{
					background-color:#5390F5;
		}  
	</style>
</head>
<body>
    <div class="regform">
        <h1>Vimeo Upload Videos</h1>
</div>
<div class="main">
    
        <form method="POST", action="/upload_engine">

			<h2 class="name">LEVEL</h2>
			<select class="option" name="level" id="level">
                <option disabled="disabled" selected="selected">--Select the level--</option>
                <option value="level0">Level 0</option>
                <option value="level1">Level 1</option>
            </select>


			<h2 class="name">ROOT FOLDER</h2>
			<select class="option" name="root" id="root">
                <option disabled="disabled" selected="selected">--Select ROOT folder--</option>
                <option value="one neuron">One Neuron</option>
                <option value="kids neuron">Kids Neuron</option>
            </select>
           
			<h2 class="name"> Your Video Folder Name: </h2>
			<input class="company" type="text" name="folder_name" id="folder_name" placeholder="write here..">

			<h2 class="name"> Your Video Path: </h2>
			<input class="company" type="text" name="v_path" id="v_path" placeholder="write here..">


            	<button type="submit">Start Uploading</button>
    
        </form>

			<form action="/" method="get">
					<button type="submit">Go Home</button>
				
							
		</form>
</div>
</body>
</html>