<!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>