Stap 4: BootStap
Nu moet je de VR gaan maar als je op zoek naar wat meer kleur toevoegen aan uw UI, is het nu de tijd die je kunt doen. Ik gebruikte bootstrap om het ontwerp van de Gebruikersinterface.
<!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"> <meta name="description" content=""> <meta name="author" content=""> <title>VR</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="jumbotron.css" rel="stylesheet"> <script src="js/ie-emulation-modes-warning.js"></script> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="member.php">HeliSmart</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="blah.html">VR Reality</a></li> </li> </ul> </div> </div> </nav> <div class="jumbotron hidden-sm hidden-xs" style="padding-bottom:200px;"> <div class="container"> <h2> <b>Sorry</b> </h2> <p>This can be only viewed in the a <b>Mobile phone</b>, Make sure you have also have java enabled. </p> <p><b>Contact US</b> if you think everything is fine.</p> </div> </div> <div class="jumbotron hidden-md hidden-lg" style="padding-bottom:200px;"> <div class="container"> <h2><b>Works best in a VR viewer.</b></h2> <div class="container"> <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info" > <div class="panel-heading"> <div class="panel-title">Enter Video Url</div> </div> <div style="padding-top:30px" class="panel-body" > <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="text" class="form-control" id="url" value="" placeholder="URL"> </div> </div> <a href="#" class="btn btn-success" onclick="sparkSetPos()" Style="margin:15px;margin-top:0px;">Connect</a> </div> </div> </div> </div> <iframe id="frame1"src="#" width="49%" height="100%" style="margin:none;"></iframe> <iframe id="frame2"src="#" width="50%" height="100%" id="right"></iframe> <script type="text/javascript"> function sparkSetPos(obj) { document.getElementById("frame1").src=document.getElementById("url").value; document.getElementById("frame2").src=document.getElementById("url").value; } </script> <footer> <p>© LameFreaks 2015</p> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> <script src="js/ie10-viewport-bug-workaround.js"></script> </body> </html><br>