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 <[email protected]>

19 files changed, 183 insertions, 97 deletions

diff --git a/footer.php b/footer.php
deleted file mode 100644
index 7f9c351..0000000
--- a/footer.php
+++ /dev/null
@@ -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
-?>
\ No newline at end of file
diff --git a/mainstyle.css b/mainstyle.css
index 946044e..8501b84 100644
--- a/mainstyle.css
+++ b/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;*/
diff --git a/media/screenshots/large/Blu256-deKorator-autumn.png b/media/screenshots/large/Blu256-deKorator-autumn.png
new file mode 100644
index 0000000..38c6bd4
--- /dev/null
+++ b/media/screenshots/large/Blu256-deKorator-autumn.png
diff --git a/media/screenshots/large/Nikolaus_Klepp_6.jpg b/media/screenshots/large/Nikolaus_Klepp_6.jpg
new file mode 100644
index 0000000..7383835
--- /dev/null
+++ b/media/screenshots/large/Nikolaus_Klepp_6.jpg
diff --git a/media/screenshots/large/R14-0-13-full-screenshot-BSD.png b/media/screenshots/large/R14-0-13-full-screenshot-BSD.png
new file mode 100644
index 0000000..867bcb3
--- /dev/null
+++ b/media/screenshots/large/R14-0-13-full-screenshot-BSD.png
diff --git a/media/screenshots/large/R14-1-0-michele2-TDE.png b/media/screenshots/large/R14-1-0-michele2-TDE.png
new file mode 100644
index 0000000..bc7b5e5
--- /dev/null
+++ b/media/screenshots/large/R14-1-0-michele2-TDE.png
diff --git a/media/screenshots/large/R14-1-0-philippe.png b/media/screenshots/large/R14-1-0-philippe.png
new file mode 100644
index 0000000..496ddd2
--- /dev/null
+++ b/media/screenshots/large/R14-1-0-philippe.png
diff --git a/media/screenshots/large/TDE-screen1.png b/media/screenshots/large/TDE-screen1.png
new file mode 100644
index 0000000..5796a57
--- /dev/null
+++ b/media/screenshots/large/TDE-screen1.png
diff --git a/media/screenshots/large/TDE-screen2.jpg b/media/screenshots/large/TDE-screen2.jpg
new file mode 100644
index 0000000..9364257
--- /dev/null
+++ b/media/screenshots/large/TDE-screen2.jpg
diff --git a/media/screenshots/large/Thierry_de_Coulon_2.jpg b/media/screenshots/large/Thierry_de_Coulon_2.jpg
new file mode 100644
index 0000000..e981432
--- /dev/null
+++ b/media/screenshots/large/Thierry_de_Coulon_2.jpg
diff --git a/media/screenshots/large/tde1.png b/media/screenshots/large/tde1.png
deleted file mode 100644
index f566168..0000000
--- a/media/screenshots/large/tde1.png
+++ /dev/null
diff --git a/media/screenshots/large/tde2.png b/media/screenshots/large/tde2.png
deleted file mode 100644
index 74b40fa..0000000
--- a/media/screenshots/large/tde2.png
+++ /dev/null
diff --git a/media/screenshots/large/tde4.png b/media/screenshots/large/tde4.png
deleted file mode 100644
index 0300e2d..0000000
--- a/media/screenshots/large/tde4.png
+++ /dev/null
diff --git a/media/screenshots/large/tde4_mainpage.png b/media/screenshots/large/tde4_mainpage.png
deleted file mode 100644
index a0b2354..0000000
--- a/media/screenshots/large/tde4_mainpage.png
+++ /dev/null
diff --git a/media/screenshots/large/tde5.png b/media/screenshots/large/tde5.png
deleted file mode 100644
index b172605..0000000
--- a/media/screenshots/large/tde5.png
+++ /dev/null
diff --git a/screenshots.css b/screenshots.css
index 52c8ed5..a9e90be 100644
--- a/screenshots.css
+++ b/screenshots.css
@@ -1,7 +1,75 @@
-    .sc_img_holder  {float: left;
-                    margin: 5px 5px 5px 0px;
-                    padding: 5px 5px 5px 0px;}
-    .sc_img         {clear: both;
-                    margin-bottom: 5px;}
-    .sc_txt         {display: inline;
-                    text-align: center;}
\ No newline at end of file
+/* Rounded screenshot images */
+img
+{
+  border-radius: 8px;
+}
+
+/* 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}
+}
diff --git a/screenshots.js b/screenshots.js
index 89b75a0..8b5967b 100644
--- a/screenshots.js
+++ b/screenshots.js
@@ -1,15 +1,37 @@
-    hs.registerOverlay({
-        html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
-        position: 'top right',
-        fade: 2 // fading the semi-transparent overlay looks bad in IE
-    });
+let slideIndex = 1;
+showSlides(slideIndex);
 
-    hs.wrapperClassName = 'borderless';
-    hs.graphicsDir = 'highslide/graphics/';
-    hs.align = 'center';
-    hs.transitions = ['expand', 'crossfade'];
-    hs.outlineType = 'rounded-white';
-    hs.fadeInOut = true;
-    hs.showCredits = false; 
-    hs.numberPosition = 'caption';
-    hs.dimmingOpacity = 0.75;
+function plusSlides(n)
+{
+  showSlides(slideIndex += n);
+}
+
+function currentSlide(n)
+{
+  showSlides(slideIndex = n);
+}
+
+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";
+}
diff --git a/screenshots.php b/screenshots.php
index 373683c..a7a2e94 100644
--- a/screenshots.php
+++ b/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
-distributions. If you have a particularly interesting Trinity desktop and
-would like to see it displayed here, please <a href="mailinglist.php">contact us</a>.</p>
+ <!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images -->
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/R14-1-0-michele2-TDE.png" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/Blu256-deKorator-autumn.png" style="width:100%">
+  </div>
+
+  <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="mySlides fade">
+    <img src="media/screenshots/large/R14-0-13-full-screenshot-BSD.png" style="width:100%">
+  </div>
+
+  <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="mySlides fade">
+    <img src="media/screenshots/large/Thierry_de_Coulon_2.jpg" style="width:100%">
+  </div>
+
+  <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>
+
+  <!-- Next and previous buttons -->
+  <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>
 
-<p>
-<script type="text/javascript" src="highslide/highslide.js"></script>
 <script type="text/javascript" src="screenshots.js"></script>
 
-<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">
-            <a href="media/screenshots/large/tde3.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde3.png"></a>
-        </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>
-    </div>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde5.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde5.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde6.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde6.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-</DIV>
-<div CLASS="clearall"></div>
-</p>
-
-<p>More screenshots from members of our community can be found in the community section
-of <a href="https://wiki.trinitydesktop.org/Community_Screenshots">our wiki</a>.</p>
+
+<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();
diff --git a/tde-head-and-foot.php b/tde-head-and-foot.php
index ff615e0..7d1642d 100644
--- a/tde-head-and-foot.php
+++ b/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");