clean up and modified style

This commit is contained in:
Olivier Lambert
2012-12-26 13:53:49 +01:00
parent 1b83a15b25
commit 38a2fa9cd1
3 changed files with 297 additions and 164 deletions

140
src/www/admin.php Normal file
View File

@@ -0,0 +1,140 @@
<?php
require(__DIR__.'/../bootstrap.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Xen Orchestra</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- styles -->
<link href="../deps/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../deps/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../deps/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="index.php">Xen Orchestra</a><a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href=""><i class="icon-cloud"></i> Pool <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-reorder"></i> Server <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-bolt"></i> Vm <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li><a href="#"><i class="icon-file"></i> Templates</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-hdd"></i> Storage <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="admin.php"><i class="icon-wrench"></i> Admin</a></li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon-signin"></i> Log In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input class="span2" type="text" placeholder="User">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i></span>
<input class="span2" type="password" placeholder="Password"></input><br/><br/>
</div>
<button type="submit" class="btn btn-info"><i class="icon-signin icon-small"></i> Log In</button>
</form>
</div>
</ul>
<form class="navbar-search pull-right" action="">
<input class="search-query" type="text" placeholder="Search">
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
<!-- end of navbar -->
<div class="container">
<div class="span4 well">
<div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#item1" data-toggle="collapse"> Users </a> </div>
<div id="item1" class="collapse in">
<div class="accordion-inner"> Lorem Ipsum Dolor sit amet</div>
<div class="accordion-inner"> Lorem Ipsum Dolor sit amet</div>
<div class="accordion-inner"> Lorem Ipsum Dolor sit amet</div>
</div></div>
<div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" href="#item2" data-toggle="collapse"> Hosts </a> </div>
<div id="item2" class="collapse in">
<div class="accordion-inner"> Lorem Ipsum Dolor sit amet </div>
</div></div>
<div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" href="#item3" data-toggle="collapse"> Alerts </a> </div>
<div id="item3" class="collapse in">
<div class="accordion-inner"> Lorem Ipsum Dolor sit amet </div>
</div></div>
</div>
</div> <!-- /container -->
<footer class="footer" style="background-color:#c2c2c2">
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../deps/js/jquery.js"></script>
<script src="../deps/bootstrap/js/bootstrap.js"></script>
</body>
</html>

View File

@@ -8,7 +8,8 @@
background-color: #eee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border-radius: 6px;
border: 1px solid #ddd;
}
.leaderboard h1 {
font-size: 40px;
@@ -23,11 +24,12 @@
line-height: 27px;
}
.span4 {
background-color: #eee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/*.span4 {
background-color: #eee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
//border: 1px solid #ddd;
}
.span4 h2 {
@@ -35,5 +37,11 @@
}
.span4 p {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
*/
.center {
text-align: center;
margin: 1em;
}

View File

@@ -4,164 +4,149 @@ require(__DIR__.'/../bootstrap.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Xen Orchestra</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<head>
<meta charset="utf-8">
<title>Xen Orchestra</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- styles -->
<link href="../deps/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../deps/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../deps/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">
</head>
<!-- Le styles -->
<link href="../deps/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../deps/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="index.php">Xen Orchestra</a><a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href=""><i class="icon-cloud"></i> Pool <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-reorder"></i> Server <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-bolt"></i> Vm <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li><a href="#"><i class="icon-file"></i> Templates</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-hdd"></i> Storage <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="admin.php"><i class="icon-wrench"></i> Admin</a></li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon-signin"></i> Log In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input class="span2" type="text" placeholder="User">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i></span>
<input class="span2" type="password" placeholder="Password"></input><br/><br/>
</div>
<button type="submit" class="btn btn-info"><i class="icon-signin icon-small"></i> Log In</button>
</form>
</div>
</ul>
<form class="navbar-search pull-right" action="">
<input class="search-query" type="text" placeholder="Search">
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
<!-- end of navbar -->
<div class="row-fluid">
<div class="span11">
<h1 class="center">Welcome on XO!</h1>
<p class="center">It seems you don't have any connected host.<br/>Add an XCP host or a Pool master, and start to use the magic of Xen Orchestra.</p><br/>
<p class="center"><a class="btn btn-success btn-large"><i class="icon-plus"></i> Add server</a></p>
</div>
</div>
<br/><br/>
<div class="row-fluid">
<div class="span3 offset1 well">
<h2>Need help?</h2>
<p>If you don't know how to start, please read the README first. Then, if you have further questions, please read the FAQ on the project website.
</p><br/>
<p class="center"><a class="btn btn-info btn-large" data-toggle="modal" href="#infos" ><i class="icon-info-sign"></i> Readme</a></p>
</div>
<div class="span4 well">
<h2>About us</h2>
<p>We are the team behind XO, we are Vates! (a french company specialized in Open Source products). We offer commercial support for Xen and Xen Orchestra. Don't be affraid, this project is Open Source, everyone is welcome aboard!</p><br/>
<p class="center"><a class="btn btn-large" href="http://vates.fr"><i class="icon-circle-arrow-right"></i> Go on our website!</a></p>
</div>
<div class="span3 well">
<h2>Get involved!</h2>
<p>You want a specific feature in XO? Report a bug? Go to our project website and get involved in the project!</p><br/>
<p class="center"><a class="btn btn-success btn-large" href="http://xen-orchestra.com"><i class="icon-beaker"></i> Project page</a></p>
</div>
</div>
<div class="modal hide fade" id="infos">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3>Initial configuraton</h3>
</div>
<div class="modal-body">
<p>Please add an XCP server or a Pool master. For this, click on the "Let's go" button on the main screen. Otherwise, you can do the same thing by using the top menu ("Server" then "Add").</p>
</div>
<div class="modal-footer">
<a class="btn btn-info" data-dismiss="modal">Close</a>
</div>
</div>
<link rel="stylesheet" href="../deps/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Xen Orchestra</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"></a>
<div class="nav-collapse collapse">
<ul class="nav">
<!--<li class="active"><a href="#">Home</a></li>-->
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-hdd"></i> Vm <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li><a href="#"><i class="icon-file"></i> Templates</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-reorder"></i> Server <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-cloud"></i> Pool <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-reorder"></i> List</a></li>
<li><a href="#"><i class="icon-plus"></i> Add new...</a></li>
<li><a href="#"><i class="icon-cog"></i> Manage</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-wrench"></i> Options...</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="#pools"><i class="icon-wrench"></i> Admin</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="/users/sign_up">Register</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Log In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input class="span2" type="text" placeholder="User">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i></span>
<input class="span2" type="password" placeholder="Password"></input><br/><br/>
</div>
<button type="submit" class="btn btn-info"><i class="icon-signin icon-small"></i> Log In</button>
</form>
</ul>
<form class="navbar-search pull-right" action="">
<input class="search-query" type="text" placeholder="Search">
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="leaderboard">
<h1>Welcome on XO!</h1>
<p>Add an XCP host or a Pool master, and start to use the magic of Xen Orchestra.</p>
<p><a class="btn btn-success btn-large"><i class="icon-magic"></i> Let's go!</a></p>
</div>
<div class="row">
<div class="span4">
<h2>Todo</h2>
<p>
<ul class="unstyled">
<li><i class="icon-ok"></i> Add a single server or a pool master</li>
<li><i class="icon-ok"></i> Add or Edit users</li>
<li><i class="icon-ok"></i> Add or Edit VM</li>
</ul>
</p>
<p><a class="btn btn-info btn-large" href="#"><i class="icon-info-sign"></i> Learn more</a></p>
</div>
<div class="span4">
<h2>Get involved!</h2>
<p>Go to our GitHub page and get involved in the project!</p>
<p><a class="btn btn-success btn-large" href="#"><i class="icon-beaker"></i> Project page</a></p>
</div>
<div class="span4">
<h2>Who we are?</h2>
<p>We are Vates!</p>
<p><a class="btn btn-large" href="#"><i class="icon-circle-arrow-right"></i> Go on our website!</a></p>
</div>
</div>
<div class="modal hide fade" id="infos">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3>Initial configuraton</h3>
</div>
<div class="modal-body">
<p>Please add a XCP server or a Pool master.</p>
</div>
<div class="modal-footer"> <a class="btn btn-info" data-dismiss="modal">Close</a> </div>
</div>
<a class="btn btn-info" data-toggle="modal" href="#infos" ><i class="icon-info-sign"></i> Initial configuration</a>
</div> <!-- /container -->
<footer class="footer" style="background-color:#c2c2c2">
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../deps/js/jquery.js"></script>
<script src="../deps/bootstrap/js/bootstrap.js"></script>
</body>
<!-- JS Placed at the end of the document so the pages load faster -->
<script src="../deps/js/jquery.js"></script>
<script src="../deps/bootstrap/js/bootstrap.js"></script>
</body>
</html>