Revamp screenshot page and add horizontal file before the page footer.

Code inspired by https://www.w3schools.com/howto/howto_js_slideshow.asp

Signed-off-by: Michele Calgaro <michele.calgaro@yahoo.it>

footer.php

@@ -1,22 +0,0 @@
-<?php
-	// (c) 2014 Trinity Desktop Project
-	// All Rights Reserved
-	// Authors: Elizabeth Liddell, Timothy Pearson, and Calvin Morrison
-
-	function doFooter(){
-		echo('                        <!--end content-->');
-		date_default_timezone_set('UTC');   #else the interpreter whines
-		echo('                        <P ID="copyright">&copy; 2010-' . date('Y') . ' Trinity Desktop Project');
-	
-?>
-				</DIV>
-				</DIV>
-			</DIV>
-			</DIV>
-		</DIV>
-		</BODY>
-		</HTML>
-	
-<?php
-	} #end of doFooter
-?>

mainstyle.css

@@ -1,3 +1,5 @@
+hr.footer {border-top: 0px solid black;}
+
 BODY        {background-color:white;
             /*font-family:"Times New Roman", "Libre Serif", serif; font-size:12pt;*/
             /*font-family:"Arial", "Libre Sans", sans-serif; font-size:10pt;*/

screenshots.css

@@ -1,7 +1,75 @@
-    .sc_img_holder  {float: left;
+/* Rounded screenshot images */
-                    margin: 5px 5px 5px 0px;
+img
-                    padding: 5px 5px 5px 0px;}
+{
-    .sc_img         {clear: both;
+  border-radius: 8px;
-                    margin-bottom: 5px;}
+}
-    .sc_txt         {display: inline;
+
-                    text-align: center;}
+/* Slideshow container */
+.slideshow-container {
+  max-width: 90%;
+  position: relative;
+  margin: auto;
+}
+
+/* Hide the images by default */
+.mySlides {
+  border-radius: 8px;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 10px 10px 0;
+  user-select: none;
+  background-color: rgba(0,0,0,0.0);
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 10px 0 0 10px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  color: white;
+  background-color: rgba(0,0,0,0.25);
+  text-decoration: none;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+  cursor: pointer;
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+	background-color: #AAC4E3;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+
+.active, .dot:hover {
+	background-color: #01306F;
+}
+
+/* Fading animation */
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+  border-radius: 20px;
+}
+
+@keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
+}

screenshots.js

@@ -1,15 +1,37 @@
-    hs.registerOverlay({
+let slideIndex = 1;
-        html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
+showSlides(slideIndex);
-        position: 'top right',
-        fade: 2 // fading the semi-transparent overlay looks bad in IE
-    });
 
-    hs.wrapperClassName = 'borderless';
+function plusSlides(n)
-    hs.graphicsDir = 'highslide/graphics/';
+{
-    hs.align = 'center';
+  showSlides(slideIndex += n);
-    hs.transitions = ['expand', 'crossfade'];
+}
-    hs.outlineType = 'rounded-white';
+
-    hs.fadeInOut = true;
+function currentSlide(n)
-    hs.showCredits = false; 
+{
-    hs.numberPosition = 'caption';
+  showSlides(slideIndex = n);
-    hs.dimmingOpacity = 0.75;
+}
+
+function showSlides(n)
+{
+  let i;
+  let slides = document.getElementsByClassName("mySlides");
+  let dots = document.getElementsByClassName("dot");
+  if (n > slides.length)
+	{
+		slideIndex = 1
+	}
+  if (n < 1)
+	{
+		slideIndex = slides.length
+	}
+  for (i = 0; i < slides.length; i++)
+	{
+    slides[i].style.display = "none";
+  }
+  for (i = 0; i < dots.length; i++)
+	{
+    dots[i].className = dots[i].className.replace(" active", "");
+  }
+  slides[slideIndex-1].style.display = "block";
+  dots[slideIndex-1].className += " active";
+}

screenshots.php

@@ -7,63 +7,78 @@ include("tde-head-and-foot.php");
 doHeader("TDE Screenshots", "Main", "Screenshots");
 ?>
 
-<p>This page contains screenshots of the Trinity running under various Linux
+ <!-- Slideshow container -->
-distributions. If you have a particularly interesting Trinity desktop and
+<div class="slideshow-container">
-would like to see it displayed here, please <a href="mailinglist.php">contact us</a>.</p>
 
-<p>
+  <!-- Full-width images -->
-<script type="text/javascript" src="highslide/highslide.js"></script>
+  <div class="mySlides fade">
-<script type="text/javascript" src="screenshots.js"></script>
+    <img src="media/screenshots/large/R14-1-0-michele2-TDE.png" style="width:100%">
-
-<DIV>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde1.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde1.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde2.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde2.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
   </div>
-    <div class="sc_img_holder">
+
-        <div class="sc_img">
+  <div class="mySlides fade">
-            <a href="media/screenshots/large/tde3.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde3.png"></a>
+    <img src="media/screenshots/large/Blu256-deKorator-autumn.png" style="width:100%">
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde4.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde4.png"></a>
   </div>
-        <div class="sc_txt">
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/TDE-screen1.png" style="width:100%">
   </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/tde3.png" style="width:100%">
   </div>
-    <div class="sc_img_holder">
+
-        <div class="sc_img">
+  <div class="mySlides fade">
-            <a href="media/screenshots/large/tde5.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde5.png"></a>
+    <img src="media/screenshots/large/R14-0-13-full-screenshot-BSD.png" style="width:100%">
   </div>
-        <div class="sc_txt">
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/TDE-screen2.jpg" style="width:100%">
   </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/R14-1-0-philippe.png" style="width:100%">
   </div>
-    <div class="sc_img_holder">
+
-        <div class="sc_img">
+  <div class="mySlides fade">
-            <a href="media/screenshots/large/tde6.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde6.png"></a>
+    <img src="media/screenshots/large/Thierry_de_Coulon_2.jpg" style="width:100%">
   </div>
-        <div class="sc_txt">
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/Nikolaus_Klepp_6.jpg" style="width:100%">
   </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/tde6.png" style="width:100%">
   </div>
-</DIV>
-<div CLASS="clearall"></div>
-</p>
 
-<p>More screenshots from members of our community can be found in the community section
+  <!-- Next and previous buttons -->
-of <a href="https://wiki.trinitydesktop.org/Community_Screenshots">our wiki</a>.</p>
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br/>
+
+<!-- The dots/circles -->
+<div style="text-align:center">
+  <span class="dot" onclick="currentSlide(1)"></span>
+  <span class="dot" onclick="currentSlide(2)"></span>
+  <span class="dot" onclick="currentSlide(3)"></span>
+  <span class="dot" onclick="currentSlide(4)"></span>
+  <span class="dot" onclick="currentSlide(5)"></span>
+  <span class="dot" onclick="currentSlide(6)"></span>
+  <span class="dot" onclick="currentSlide(7)"></span>
+  <span class="dot" onclick="currentSlide(8)"></span>
+  <span class="dot" onclick="currentSlide(9)"></span>
+  <span class="dot" onclick="currentSlide(10)"></span>
+</div>
+
+<script type="text/javascript" src="screenshots.js"></script>
+
+
+<br/>
+<p>See more screenshots <a href="https://wiki.trinitydesktop.org/Community_Screenshots">from our community members</a> on the Wiki.</p>
+
+<p>If you would like to submit a screenshot, please reach out on our <a href="mailinglist.php">mailing lists</a>.</p>
+<br/>
 
 <?php
     doFooter();

tde-head-and-foot.php

@@ -98,6 +98,7 @@
 
 
 		echo('			<!--end content-->'."\n");
+		echo('			<hr class="footer" />'."\n");
 		date_default_timezone_set('UTC');   #else the interpreter whines
 		echo('			<P ID="copyright">&copy; 2010-' . date('Y') . ' Trinity Desktop Project</P>'."\n");