<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Aurous</title>

    <link href="assets/css/vendor/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/vendor/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/vendor/material-icons.css" rel="stylesheet">
    <link href="assets/css/vendor/jquery.flipster.css" rel="stylesheet">
    <link href="assets/css/vendor/bootstrap-slider.css" rel="stylesheet">
    <link href="assets/css/vendor/alertify.default.css" rel="stylesheet">
	<link href="assets/css/vendor/alertify.core.css" rel="stylesheet">
    
	<link href="assets/css/main.css" rel="stylesheet">

    <link href="http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700" rel="stylesheet" type="text/css">

</head>
<body class="wizard">

<div class="wrapper">

<!-- Main START -->
<div class="main">
<div class="">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">

    <!-- Navbar START -->
    <div id="titlebar">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-brand">
                    <img alt="Aurous" src="assets/img/sidebar-logo.png">
                </div>
                <ul class="nav navbar-nav navbar-right btn-window">
                    <li><a id="minimize-app" href="#"><img src="assets/img/top-minus.png" alt=""></a></li>
                    <li><a id="maximize-app" href="#"><img src="assets/img/top-square.png" alt=""></a></li>
                    <li class="close-app"><a id="close-app" href="#"><img src="assets/img/top-close.png" alt=""></a></li>
                </ul>
            </div>
        </nav>      
    </div>

    <!-- Navbar END -->

    <!-- Viewport START -->
    <div class="viewport">

		<div id="particles-js"></div>

		<div class="logo text-center">
			<img src="assets/img/sidebar-logo.png" alt="">
		</div>
   	
    	<div class="box">
    		<div class="content">
				<div class="text-center">
				</div>
				<form id="commentForm" method="get" action="" class="form-horizontal">
					<div id="rootwizard">
						<ul class="nav nav-pills wizard">
							<li><a href="#tab1" data-toggle="tab">Welcome</a></li>
<!--							<li><a href="#tab2" data-toggle="tab">Aurous Account</a></li>-->
							<li><a href="#tab2" data-toggle="tab">Authorization</a></li>
							<li><a href="#tab3" data-toggle="tab">Scan</a></li>
							<li><a href="#tab4" data-toggle="tab">Final</a></li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane" id="tab1">
								<h1>Welcome to Aurous</h1>
								<p>Thank you for alpha testing Aurous. This installation wizard is short and get you all set up for the use.</p>
								<p>Click next to continue.</p>

							</div>
<!--							<div class="tab-pane aurousaccount" id="tab2">
								<div class="text-center">
									<h1>Aurous Account</h1>
									<p>Register a new account or Sign In if you already created an account.</p>
								</div>
								<div class="row">
									<div class="col-sm-6">
										<div id="registerForm">
											<h2>Register</h2>
											<p>Create new Aurous Account.</p>
											<div class="control-group">
												<div class="controls">
													<input type="text" id="usernamefield" name="usernamefield" class="required username form-control" placeholder="Username">
												</div>
											</div>

											<div class="control-group">
												<div class="controls">
													<input type="email" id="emailfield" name="emailfield" class="required email form-control" placeholder="Email">
												</div>
											</div>
											<div class="control-group">
												<div class="controls">
													<input type="password" id="passwordfield" name="passwordfield" class="required password form-control" placeholder="Password">
												</div>
											</div>
											<div class="control-group">
												<div class="controls">
													<input type="password" id="repeatpasswordfield" name="repeatpasswordfield" class="required repeatpassword form-control" placeholder="Repeat Password">
												</div>
											</div>
											<button class="btn btn-primary btn-form">Register a new Aurous Account</button>
										</div>
									</div>
									<div class="col-sm-6">
										<div id="signInForm">
											<h2>Sign In</h2>
											<p>If you have pre-existing Aurous Account.</p>
											<div class="control-group">
												<div class="controls">
													<input type="text" id="usernamefield" name="usernamefield" class="required username form-control" placeholder="Username">
												</div>
											</div>
											<div class="control-group">
												<div class="controls">
													<input type="password" id="passwordfield" name="passwordfield" class="required password form-control" placeholder="Password">
												</div>
											</div>
											<button class="btn btn-primary btn-form">Sign In</button>
										</div>
									</div>
								</div>
							</div>
-->
							<div class="tab-pane tab-vk" id="tab2">
								<div class="text-center">
									<h1>VK Authorization</h1>
									<p>Would you like to authorize your VK account to use their music search engine?</p>
									<button class="btn btn-primary btn-vk">Authorize VK</button>
									<button class="btn btn-default">Skip</button>
								</div>
							</div>
                            <div class="tab-pane tab-scan" id="tab3">
                                <div class="scan-overlay" style="display:none;">
                                    <p>Scanning media, please wait ...</p>
                                    <a href="" class="btn btn-default">Skip</a>
                                </div>
								<div class="text-center">
									<h1>Music Scan</h1>
									<p>Add or remove paths for local library scan.</p>
									<div class="settings-paths">
										<div class="row">
											<div class="col-xs-11">
												<div class="select-paths">
													<select id="scanPathSelector" class="form-control" size="6">
													</select>
												</div>
											</div>
											<div class="col-xs-1">
												<input type="file" id="addFolder" class="hidden" /> 
												<label for="addFolder" class="btn btn-success btn-sm"><i class="fa fa-plus"></i></label>
												<label id="removeFolder" class="btn btn-danger btn-sm"><i class="fa fa-minus"></i></label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="tab-pane tab-scan" id="tab4">
								<div class="text-center">
									<h1>Enjoy your Aurous Experience</h1>
									<p>Thank you for testing our client.</p>
									<button class="btn btn-primary">Continue to Aurous</button>
								</div>
							</div>
							<ul class="pager wizard">
								<li class="previous first" style="display:none;"><a href="#">First</a></li>
								<li class="previous"><a href="#">Previous</a></li>
                                <li class="next last" style="display:none;"><a href="#">Last</a></li>
                                <li class="next"><a href="#">Next</a></li>
                                <li class="right scan primary" style="display:none;"><a href="#">Scan</a></li>
                                <li class="right skip" style="display:none;"><a href="#">Skip</a></li>
							</ul>
						</div>
					</div>
				</form>

    		</div>
    	</div>
    </div><!-- Viewport END -->
</div> <!-- col-xs-12 END -->
</div> <!-- row END -->
</div> <!-- container-fluid END -->
</div>
</div>
<!-- Main END -->

</div> <!-- wrapper -->

<script src="assets/js/deps/jquery-1.11.3.min.js"></script>
<script src="assets/js/deps/jquery.validate.min.js"></script>
<script src="assets/js/deps/bootstrap.min.js"></script>
<script src="assets/js/deps/bootstrap-slider.js"></script>
<script type="text/javascript" src="assets/js/deps/browser.js"></script>
<script type="text/javascript" src="assets/js/deps/many.js"></script>
<script type="text/javascript" src="assets/js/app/plugins.js"></script>
<script type="text/javascript" src="assets/js/deps/moment.min.js"></script>
<script type="text/javascript" src="assets/js/deps/alertify.min.js"></script>
<script src="assets/js/deps/jquery.bootstrap.wizard.js"></script>
<script src="assets/js/app/wizard.js"></script>
<script src="assets/js/deps/particles.js"></script>
<script>
	particlesJS.load('particles-js', 'assets/js/deps/particlesjs-config.json', function() {
		console.log('callback - particles.js config loaded');
	});
</script>

</body>
</html>