Merge pull request #58 from leebaok/homepage-v2

[home page] new home page of docklet
This commit is contained in:
leebaok 2016-04-17 15:00:43 +08:00
commit 471a7a80a4
13 changed files with 282 additions and 114 deletions

1
.gitignore vendored
View File

@ -5,3 +5,4 @@ __temp
*~
.DS_Store
docklet.conf
home.html

View File

@ -39,7 +39,9 @@ apt-get install -y etcd
which configurable-http-proxy &>/dev/null || npm install -g configurable-http-proxy
which configurable-http-proxy &>/dev/null || { echo "Error: install configurable-http-proxy failed, you should try again" && exit 1; }
echo ""
[[ -f conf/docklet.conf ]] || { echo "Generating docklet.conf from template" && cp conf/docklet.conf.template conf/docklet.conf; }
[[ -f web/templates/home.html ]] || { echo "Generating HomePage from home.template" && cp web/templates/home.template web/templates/home.html; }
echo ""
echo "All preparation installations are done."
@ -56,7 +58,7 @@ echo "you will get a dicectory structure like"
echo " /opt/docklet/local/basefs/etc "
echo " /opt/docklet/local/basefs/bin "
echo " /opt/docklet/local/basefs/..."
echo " "
echo "you may want to custom home page of docklet. Please modify web/templates/home.html"
echo "Next, make sure exim4 can deliver mail out. To enable, run:"
echo "dpkg-reconfigure exim4-config"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 480 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

View File

@ -1,113 +1,139 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Docklet | Home</title>
<link rel="shortcut icon" href="/static/img/favicon.ico">
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/animate.css/2.0/animate.min.css" rel="stylesheet">
<link href="/static/css/docklet.css" rel="stylesheet">
<style type="text/css">
h1 { font-weight: 400 }
h2 { font-weight: 300 }
.underline { border-bottom : 1px solid #FFFFFF }
a:link {text-decoration: none }
</style>
</head>
<body style="background-color:#FFFFFF">
<div class="navbar navbar-fixed-top" role="navigation" style="border:none !important; background: #F3F3F3; opacity:0.9">
<div class="container">
<div class="row" style="padding-top:8px; padding-bottom:5px;">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<img src="/static/img/logoname.png" style="width:100%">
</div>
<div class="col-lg-1 col-lg-offset-8 col-md-1 col-md-offset-8 col-sm-2 col-sm-offset-4 col-xs-4 col-xs-offset-0" style="padding-left:0px">
<a href="/login/"><button type="button" class="btn btn-outline-success btn-block">Login</button></a>
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-4" style="padding-left:0px">
<a href="/dashboard_guest/"><button type="button" class="btn btn-outline-success btn-block">Try</button></a>
</div>
</div>
</div>
</div>
<!-- <div class="container" style="width:100%"> -->
<div class="container">
<div class="row" style="margin-top: 100px; margin-bottom:50px; margin-left:0px; margin-right:0px; background: #FFFFFF">
<img src="/static/img/home.png" style="width:100%">
</div>
<div class="row docklet-red-block" style="padding-top:100px; padding-bottom:100px">
<div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-1 col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<img src="/static/img/workspace.png" style="width:100%">
</div>
<div class="col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-8 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<h1>Workspace = Cluster+Service+Data</h1>
<h2>Package service and data based on virtual cluster as virtual compute environment for your work. This is your Workspace !</h2>
</div>
</div>
<div class="row docklet-green-block" style="padding-top:100px; padding-bottom:100px">
<div class="col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-8 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<h1>Click and Go</h1>
<h2>Distributed or single node ? Never mind !
Click it just like start an app on your smart phone, and your workspace is
ready for you.</h2>
</div>
<div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-1 col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<img src="/static/img/app.png" style="width:100%">
</div>
</div>
<div class="row docklet-yellow-block" style="padding-top:100px; padding-bottom:100px">
<div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-1 col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<img src="/static/img/web.png" style="width:100%">
</div>
<div class="col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-8 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<h1>All in Web</h1>
<h2>All you need is a web browser.
Compute in web, code in web, plot in web, anything in web !
You can get to work anytime and anywhere by internet.</h2>
</div>
</div>
<div class="row docklet-blue-block" style="padding-top:100px; padding-bottom:100px">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12 col-xs-offset-0">
<h2>Now, &nbsp jupyter / python3 / matplotlib / sklearn /scipy / numpy / pandas / latex is ready for you</h2>
<h2>And, &nbsp more workspaces are coming for your <span class="underline">data processing</span> / <span class="underline">data mining</span> / <span class="underline">machine learning</span> work</h2>
<br/>
<a href="/login/"><button type="button" class="btn btn-lg btn-outline-warning">Get to Started</button></a>
<span>&nbsp&nbsp&nbsp</span>
<a href="/dashboard_guest/"><button type="button" class="btn btn-lg btn-outline-warning">Have a Try</button></a>
</div>
</div>
<div class="row">
<p class="m-t"> <small>Copyright&copy;&nbsp;2016 <a href="http://docklet.unias.org">UniAS</a>@<a href="http://www.sei.pku.edu.cn"> SEI, PKU</a></small> </p>
</div>
</div>
<!-- Mainly scripts -->
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Docklet | Home</title>
<link rel="shortcut icon" href="/static/img/favicon.ico">
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
a.linkbtn, a.linkbtn:visited, a.linkbtn:active{
color:white;
padding:8px;
}
a.linkbtn:hover{
color:white;
text-decoration:none;
border-bottom: 1px solid white;
}
.navbar-custom-top{
background:transparent;
position:absolute;
z-index:1030;
left:0px;
right:0px;
}
</style>
</head>
<body>
<div class="navbar navbar-custom-top" role="navigation">
<div class="container">
<div class="row" style="font-size:16px; color:white; padding:16px">
<div class="pull-right" >
<a class="linkbtn" href="http://docklet.unias.org/docklet-book/userguide/_book/">Document</a>
&centerdot;
<a class="linkbtn" href="/login/" >Sign In</a>
</div>
<div>
<a class="linkbtn" href="http://docklet.unias.org"><strong>Docklet Cloud OS</strong></a>
</div>
</div>
</div>
</div>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="box-shadow:0px 2px 10px 0px black">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/static/img/home/cloud.png" alt="Cloud OS" style="min-height:600px">
<div class="container">
<div class="carousel-caption">
<h1>Cloud OS</h1>
<p class="lead">Cloud OS for your cloud Apps.</p>
<br>
</div>
</div>
</div>
<div class="item">
<img src="/static/img/home/workspace.png" alt="Cloud Workspace" style="min-height:600px">
<div class="container">
<div class="carousel-caption">
<h1>Cloud Workspace</h1>
<p class="lead">Workspace in cloud, all your work in cloud.</p>
<br>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<div class="container" style="margin-top:60px">
<div class="row">
<div class="col-lg-6 col-lg-offset-1 col-md-7 col-md-offset-0 col-sm-7 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<h2>Workspace=Cluster+Service+Data</h2>
<br/>
<p class="lead">Package service and data based on virtual cluster as virtual compute environment for your work.
<br> This is your Workspace !</p>
</div>
<div class="col-lg-3 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-0 col-xs-10 col-xs-offset-1">
<img src="/static/img/home/app-workspace.png" alt="feature-workspace" width="100%">
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-3 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-0 col-xs-10 col-xs-offset-1">
<img src="/static/img/home/app-dist.png" alt="feature-app" width="100%">
</div>
<div class="col-lg-6 col-lg-offset-1 col-md-7 col-md-offset-0 col-sm-7 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<h2>Click and Go</h2>
<br/>
<p class="lead">Distributed or single node ? Never mind !
Click it just like start an app on your smart phone, and your workspace is ready for you.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6 col-lg-offset-1 col-md-7 col-md-offset-0 col-sm-7 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<h2>All in Web</h2>
<br/>
<p class="lead">All you need is a web browser. Compute in web, code in web, plot in web, anything in web !
You can get to work anytime and anywhere by internet.</p>
</div>
<div class="col-lg-3 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-0 col-xs-10 col-xs-offset-1">
<img src="/static/img/home/app-web.png" alt="feature-web" width="100%">
</div>
</div>
<hr>
<footer>
<p class="pull-right">Powered by <a href="http://docklet.unias.org" style="color:blue">Docklet</a></p>
<p>&copy; SEI, PKU</p>
</footer>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

139
web/templates/home.template Executable file
View File

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Docklet | Home</title>
<link rel="shortcut icon" href="/static/img/favicon.ico">
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
a.linkbtn, a.linkbtn:visited, a.linkbtn:active{
color:white;
padding:8px;
}
a.linkbtn:hover{
color:white;
text-decoration:none;
border-bottom: 1px solid white;
}
.navbar-custom-top{
background:transparent;
position:absolute;
z-index:1030;
left:0px;
right:0px;
}
</style>
</head>
<body>
<div class="navbar navbar-custom-top" role="navigation">
<div class="container">
<div class="row" style="font-size:16px; color:white; padding:16px">
<div class="pull-right" >
<a class="linkbtn" href="http://docklet.unias.org/docklet-book/userguide/_book/">Document</a>
&centerdot;
<a class="linkbtn" href="/login/" >Sign In</a>
</div>
<div>
<a class="linkbtn" href="http://docklet.unias.org"><strong>Docklet Cloud OS</strong></a>
</div>
</div>
</div>
</div>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="box-shadow:0px 2px 10px 0px black">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/static/img/home/cloud.png" alt="Cloud OS" style="min-height:600px">
<div class="container">
<div class="carousel-caption">
<h1>Cloud OS</h1>
<p class="lead">Cloud OS for your cloud Apps.</p>
<br>
</div>
</div>
</div>
<div class="item">
<img src="/static/img/home/workspace.png" alt="Cloud Workspace" style="min-height:600px">
<div class="container">
<div class="carousel-caption">
<h1>Cloud Workspace</h1>
<p class="lead">Workspace in cloud, all your work in cloud.</p>
<br>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<div class="container" style="margin-top:60px">
<div class="row">
<div class="col-lg-6 col-lg-offset-1 col-md-7 col-md-offset-0 col-sm-7 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<h2>Workspace=Cluster+Service+Data</h2>
<br/>
<p class="lead">Package service and data based on virtual cluster as virtual compute environment for your work.
<br> This is your Workspace !</p>
</div>
<div class="col-lg-3 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-0 col-xs-10 col-xs-offset-1">
<img src="/static/img/home/app-workspace.png" alt="feature-workspace" width="100%">
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-3 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-0 col-xs-10 col-xs-offset-1">
<img src="/static/img/home/app-dist.png" alt="feature-app" width="100%">
</div>
<div class="col-lg-6 col-lg-offset-1 col-md-7 col-md-offset-0 col-sm-7 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<h2>Click and Go</h2>
<br/>
<p class="lead">Distributed or single node ? Never mind !
Click it just like start an app on your smart phone, and your workspace is ready for you.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6 col-lg-offset-1 col-md-7 col-md-offset-0 col-sm-7 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<h2>All in Web</h2>
<br/>
<p class="lead">All you need is a web browser. Compute in web, code in web, plot in web, anything in web !
You can get to work anytime and anywhere by internet.</p>
</div>
<div class="col-lg-3 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-0 col-xs-10 col-xs-offset-1">
<img src="/static/img/home/app-web.png" alt="feature-web" width="100%">
</div>
</div>
<hr>
<footer>
<p class="pull-right">Powered by <a href="http://docklet.unias.org" style="color:blue">Docklet</a></p>
<p>&copy; SEI, PKU</p>
</footer>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>