Rosanne DiMesio : Add screenshot carousel to front page

[Jeremy Newman]

Module: appdb
Branch: master
Commit: 182447af5e49e13e903734ebb82e1efdb072af05
URL:    http://source.winehq.org/git/appdb.git/?a=commit;h=182447af5e49e13e903734ebb82e1efdb072af05

Author: Rosanne DiMesio <dimesio at earthlink.net>
Date:   Thu Aug 31 14:36:38 2017 -0500

Add screenshot carousel to front page

Signed-off-by: Rosanne DiMesio <dimesio at earthlink.net>
Signed-off-by: Jeremy Newman <jnewman at codeweavers.com>

---

 css/styles.css              |   5 ++++
 images/eveonline.jpg        | Bin 0 -> 69858 bytes
 images/falloutnv.jpg        | Bin 0 -> 70037 bytes
 images/goggalaxy.jpg        | Bin 0 -> 69163 bytes
 images/matlab.jpg           | Bin 0 -> 76130 bytes
 images/metatrader5.jpg      | Bin 0 -> 128684 bytes
 images/outlook2010.jpg      | Bin 0 -> 46640 bytes
 images/photoshopcc2015.jpg  | Bin 0 -> 31937 bytes
 images/reason.jpg           | Bin 0 -> 107342 bytes
 images/sims3.jpg            | Bin 0 -> 66462 bytes
 images/skyrim_specialed.jpg | Bin 0 -> 102001 bytes
 images/steam.jpg            | Bin 0 -> 66903 bytes
 images/wizard101.jpg        | Bin 0 -> 117375 bytes
 index.php                   |  62 +++++++++++++++++++++++++++++++++++++-------
 14 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index dcde735..be5eef0 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -68,6 +68,11 @@ a.btn, a.btn:visited {
     overflow: auto;
 }
 
+.carousel-control.left, 
+.carousel-control.right {
+    background-image: none
+}
+
 /*
   =====================================================================================================================
    PAGE LAYOUT
diff --git a/images/eveonline.jpg b/images/eveonline.jpg
new file mode 100644
index 0000000..2e336a8
Binary files /dev/null and b/images/eveonline.jpg differ
diff --git a/images/falloutnv.jpg b/images/falloutnv.jpg
new file mode 100644
index 0000000..6ade796
Binary files /dev/null and b/images/falloutnv.jpg differ
diff --git a/images/goggalaxy.jpg b/images/goggalaxy.jpg
new file mode 100644
index 0000000..6291efd
Binary files /dev/null and b/images/goggalaxy.jpg differ
diff --git a/images/matlab.jpg b/images/matlab.jpg
new file mode 100644
index 0000000..b5c41ed
Binary files /dev/null and b/images/matlab.jpg differ
diff --git a/images/metatrader5.jpg b/images/metatrader5.jpg
new file mode 100644
index 0000000..480e157
Binary files /dev/null and b/images/metatrader5.jpg differ
diff --git a/images/outlook2010.jpg b/images/outlook2010.jpg
new file mode 100644
index 0000000..3ebf42a
Binary files /dev/null and b/images/outlook2010.jpg differ
diff --git a/images/photoshopcc2015.jpg b/images/photoshopcc2015.jpg
new file mode 100644
index 0000000..bd9a50d
Binary files /dev/null and b/images/photoshopcc2015.jpg differ
diff --git a/images/reason.jpg b/images/reason.jpg
new file mode 100644
index 0000000..8270e8f
Binary files /dev/null and b/images/reason.jpg differ
diff --git a/images/sims3.jpg b/images/sims3.jpg
new file mode 100644
index 0000000..0872e31
Binary files /dev/null and b/images/sims3.jpg differ
diff --git a/images/skyrim_specialed.jpg b/images/skyrim_specialed.jpg
new file mode 100644
index 0000000..29446ac
Binary files /dev/null and b/images/skyrim_specialed.jpg differ
diff --git a/images/steam.jpg b/images/steam.jpg
new file mode 100644
index 0000000..365c391
Binary files /dev/null and b/images/steam.jpg differ
diff --git a/images/wizard101.jpg b/images/wizard101.jpg
new file mode 100644
index 0000000..23d8844
Binary files /dev/null and b/images/wizard101.jpg differ
diff --git a/index.php b/index.php
index 71e32b4..b63b55d 100644
--- a/index.php
+++ b/index.php
@@ -98,12 +98,10 @@ apidb_header("Wine Application Database");
 
 ?>
 
-<div class="row">
-    <div class="col-md-6 col-lg-8">
-
 <h1 class="whq-app-title">Welcome</h1>
-
-<p>This is the Wine Application Database (AppDB). Here you can get information on application
+    <div class="row">
+        <div class="col-md-6">
+            <p>This is the Wine Application Database (AppDB). Here you can get information on application
 compatibility with Wine.</p>
 
 <?php
@@ -173,10 +171,56 @@ else
 
     echo "</p>\n";
 ?>
-
-</div>
-    <div class="col-md-6 col-lg-4">
-        <img src="images/appdb_montage.jpg" class="fill-width" alt="Wine AppDB">
+        </div>
+
+        <div id="carouselScreenshots" class="carousel slide container col-md-6" data-ride="carousel">
+            <div class="carousel-inner" style="margin-bottom:10px">
+                <div class="item active">
+                    <img src="images/steam.jpg" alt="First slide">
+                </div>
+                <div class="item">
+                    <img src="images/outlook2010.jpg" alt="Second slide">
+                </div>
+                <div class="item">
+                    <img src="images/eveonline.jpg" alt="Third slide">
+                </div>
+                <div class="item">
+                    <img src="images/photoshopcc2015.jpg" alt="Fourth slide">
+                </div>
+                <div class="item">
+                    <img src="images/falloutnv.jpg" alt="Fifth slide">
+                </div>
+                <div class="item">
+                    <img src="images/reason.jpg" alt="Sixth slide">
+                </div>
+                <div class="item">
+                    <img src="images/skyrim_specialed.jpg" alt="Seventh slide">
+                </div>
+                <div class="item">
+                    <img src="images/goggalaxy.jpg" alt="Eighth slide">
+                </div>
+                <div class="item">
+                    <img src="images/wizard101.jpg" alt="Ninth slide">
+                </div>
+                <div class="item">
+                    <img src="images/matlab.jpg" alt="Tenth slide">
+                </div>
+                <div class="item">
+                    <img src="images/sims3.jpg" alt="Eleventh slide">
+                </div>
+                <div class="item">
+                    <img src="images/metatrader5.jpg" alt="Twelfth slide">
+                </div>
+            </div>   
+            <a class="left carousel-control" href="#carouselScreenshots" data-slide="prev">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="right carousel-control" href="#carouselScreenshots" data-slide="next">
+                <span class="glyphicon glyphicon-chevron-right"></span>
+                <span class="sr-only">Next</span>
+            </a>
+        </div> 
     </div>
 </div>