Beautifying the index page

.gitignore

@@ -1,4 +1,5 @@
 *.pyc
+.DS_Store
 build
 *.db
 tmp

panoramix/templates/appbuilder/baselayout.html

@@ -24,6 +24,8 @@
         {% block content_fluid %}
         {% endblock %}
     </div>
+    {% block uncontained %}
+    {% endblock %}
 
     {% block footer %}
         <footer>

panoramix/templates/index.html

@@ -1,17 +1,132 @@
 {% extends "appbuilder/base.html" %}
 
-{% block content %}
-<div class="container">
-  <div class="jumbotron">
-      <img width="250" class="pull-left" src="/static/tux_panoramix.png">
-      <h1>Panoramix</h1>
-      <p>
-        an interactive data visualization platform
-      </p>
-      <div class="clear">
+{% block head_css %}
+{{super()}}
+<style>
+  .carousel img {
+    max-height: 500px;
+  }
+  .carousel-caption{
+    background: rgba(0,0,0,0.5);
+    border-radius: 20px;   
+    margin-bottom: 100px;
+  }
+  .carousel-inner > .item > img {
+    margin: 0 auto;
+  }
+  div.navbar {
+    margin: 0px;
+  }
+  .carousel-indicators li {
+    background-color: #AAA;
+    border: 1px solid black;
+  }
+
+  .carousel-indicators .active {
+    background-color: #000;
+    border: 5px solid black;
+  }
+</style>
+{% endblock %}
+
+{% block uncontained %}
+<div id="carousel" style="height: 500px;" class="carousel slide" data-ride="carousel">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    <li data-target="#carousel" data-slide-to="0" class="active"></li>
+    <li data-target="#carousel" data-slide-to="1"></li>
+    <li data-target="#carousel" data-slide-to="2"></li>
+    <li data-target="#carousel" data-slide-to="3"></li>
+  </ol>
+
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner" role="listbox">
+    <div class="item active text-center">
+      <img src="{{ url_for("static", filename="dash.png") }}">
+      <div class="carousel-caption">
+        <div>
+          <h1 style="font-size: 100px;">Panoramix</h1>
+          <p style="font-size: 30px;">
+            an interactive data visualization platform
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="item">
+      <img src="{{ url_for("static", filename="bubble.png") }}">
+      <div class="carousel-caption">
+        <h1>Explore your data
+        </h1>
+        <p>
+          Intuitively navigate your data while slicing, dicing, and
+          visualizing through a rich set of widgets
+        </p>
+      </div>
+    </div>
+    <div class="item">
+      <img src="{{ url_for("static", filename="dash.png") }}">
+      <div class="carousel-caption">
+        <h1>Create and share dashboards</h1>
+        <p>Assemble many data visualization "slices" into a rich collection</p>
+      </div>
     </div>
-  <div class="text-center">
+    <div class="item">
+      <img src="{{ url_for("static", filename="cloud.png") }}">
+      <div class="carousel-caption">
+        <h1>Extend</h1>
+        <p>Join the community and take part in extending the widget library</p>
+      </div>
+    </div>
+  </div>
+  <!-- Controls -->
+  <div>
+    <a class="left carousel-control" href="#carousel" 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="#carousel" role="button" data-slide="next">
+      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+    </a>
+  </div>
+</div>
+<hr/>
+<div class="container">
+  <div class="row text-center">
+    <div class="col-lg-4">
+      <img class="img-circle" src="{{ url_for('static', filename='cardash.jpg') }}" width="140" height="140">
+      <h2>Dashboards</h2>
+      <p>Browse the dashboards list</p>
+      <p><a class="btn btn-default" href="/dashboardmodelview/list/" role="button">
+        <i class="fa fa-dashboard"></i>
+      </a></p>
+    </div><!-- /.col-lg-4 -->
+    <div class="col-lg-4">
+      <img class="img-circle" src="{{ url_for('static', filename='slice.jpg') }}" width="140" height="140">
+      <h2>Slices</h2>
+      <p>"Slices" are individual views into a single dataset</p>
+      <p><a class="btn btn-default" href="/slicemodelview/list/" role="button">
+        <i class="fa fa-line-chart"></i>
+      </a></p>
+    </div><!-- /.col-lg-4 -->
+    <div class="col-lg-4">
+      <img class="img-circle" src="{{ url_for('static', filename='gallery.jpg') }}" alt="Generic placeholder image" width="140" height="140">
+      <h2>Galery</h2>
+      <p>Navigate through the growing set of visualizations</p>
+      <p><a class="btn btn-default" href="#" onclick="alert('Not ready yet!');" role="button">
+        <i class="fa fa-picture-o"></i>
+      </a></p>
+    </div><!-- /.col-lg-4 -->
   </div>
 </div>
 {% endblock %}
 
+{% block tail_js %}
+{{ super() }}
+<script>
+$( document ).ready(function() {
+  $('#carousel').carousel();
+  console.log($('#carousel'));
+});
+</script>
+{% endblock %}