Year of the City: 2274. Carousel begins.

BorisTheBrave · Oct 27, 2018 · 63bb3b7 · 63bb3b7
1 parent a0299e0
commit 63bb3b7
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 9 deletions.
diff --git a/docs/articles/gallery.md b/docs/articles/gallery.md
@@ -29,12 +29,12 @@ Some examples post processing applied to them, either using <a href="https://eph
 </figure>
 
 <figure>
-<a href="../images/columns_out.png"><img src="../images/columns_out.png"/></a>
+<a href="https://github.com/BorisTheBrave/DeBroglie/blob/master/samples/docs/columns.json"><img src="../images/columns_out.png"/></a>
 <figcaption>Simple voxel example. <a href="https://github.com/sylefeb/VoxModSynth">Inspired by VoxModSynth</a></figcaption>
 </figure>
 
 <figure>
-<a href="../images/hexmini_out.png"><img src="../images/hexmini_out.png"/></a>
+<a href="https://github.com/BorisTheBrave/DeBroglie/blob/master/samples/docs/hexmini.json"><img src="../images/hexmini_out.png"/></a>
 <figcaption>Generate hexagonal layouts. <a href="http://opengameart.org/content/pixel-hex-tilesets-enhanced">Tiles by pixel32</a></figcaption>
 </figure>
 

diff --git a/docs/index.md b/docs/index.md
@@ -6,6 +6,7 @@ _disableBreadcrumb: true
 _disableToc: true
 _gitContribute: false
 ---
+
 <div class="container">
 
   <div class="jumbotron">
@@ -31,19 +32,87 @@ _gitContribute: false
     </div>
   </div>
 
-
+  <div class="row">
+    <div class="col-md-8 col-md-offset-2 text-center">
+      <style>
+      .carousel-indicators li {
+          border-color: #BBBBBB;
+          background-color: #444444;
+      }
+      .carousel-indicators .active {
+          background-color: #999999;
+      }
+      .item {
+          position: relative;
+          height:100%;
+      }
+      .carousel-inner img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translateY(-50%) translateX(-50%);
+      }
+      </style>
+      <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="8000">
+        <!-- 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>
+          <li data-target="#carousel" data-slide-to="4"></li>
+          <li data-target="#carousel" data-slide-to="5"></li>
+        </ol>
+        <!-- Wrapper for slides -->
+        <div class="carousel-inner" role="listbox" style="width:100%; height: 320px !important;">
+          <div class="item active">
+            <a href="https://github.com/BorisTheBrave/DeBroglie/blob/master/samples/platformer/platformer.json">
+            <video src="images/platformer.webm" autoplay loop width="640" height="320"
+                style="background-color: #55b4ff">
+            </video>
+            </a>
+          </div>
+          <div class="item">
+            <a href="https://github.com/BorisTheBrave/DeBroglie/blob/master/samples/castle/castle.json">
+            <video src="images/castle_fixed.webm" autoplay loop>
+            </a>
+          </div>
+          <div class="item">
+            <a href="https://github.com/BorisTheBrave/DeBroglie/blob/master/samples/grass/map.json"><video src="images/rotation.webm" autoplay loop></video></a>
+          </div>
+          <div class="item">
+            <a href="https://github.com/BorisTheBrave/DeBroglie/blob/master/samples/docs/columns.json"><img src="images/columns_out.png"/></a>
+          </div>
+          <div class="item">
+            <a href="https://github.com/BorisTheBrave/DeBroglie/blob/master/samples/docs/hexmini.json"><img src="images/hexmini_out.png"/></a>
+          </div>
+          <div class="item">
+            <a href="https://github.com/BorisTheBrave/DeBroglie/blob/master/samples/mxgmn/circles.json">
+            <video src="images/circles.webm" autoplay loop>
+            </a>
+          </div>
+        </div>
+        <!-- Controls -->
+        <a class="left carousel-control" data-target="#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" data-target="#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>
+  </div>
+
   <div class="row">
     <div class="col-md-8 col-md-offset-2 text-center">
       <section>
         <h2>Features</h2>
         <h3>Generate tile maps using the WFC algorithm</h3>
-        <a href="https://github.com/BorisTheBrave/DeBroglie/blob/master/samples/grass/map.json"><video src="images/rotation.webm" autoplay loop></video></a>
         <h3><a href="articles/features.md#topology">2d, 3d and hexagonal generation</a></h3>
-        <a href="images/columns_out.png"><img src="images/columns_out.png"/></a>
-        <a href="images/hexmini_out.png"><img src="images/hexmini_out.png"/></a>
-        <h3>Constraint generation to only connected paths</h3>
-        <img src="images/pathway_overlapping_path.png">
-        <h3>Backtracking support for tough-to-generate setups</h3>
+        <h3><a href="articles/features.md#path">Constraint generation to only connected paths</a></h3>
+        <h3><a href="articles/features.md#backtracking">Backtracking support for tough-to-generate setups</a></h3>
       </section>
     </div>
   </div>