Screenshots section on app pages (#24)

* Screenshots on app pages (only Rate at this moment)
* Screenshots scrolling with arrows

content/apps/rate.md

@@ -7,6 +7,7 @@ description = "— the indispensable companion for travelers, enables swift conv
 
 [extra]
 image = "apps/rate"
+screenshots = ["1.png","2.png","3.png","4.png","5.png","6.png","7.png","8.png"]
 policy = "privacy-policy"
 
 [[extra.releases]]

sass/_custom.scss

@@ -202,6 +202,66 @@ th[data-dir="desc"]::after {
   }
 }
 
+.slider {
+  overflow: hidden;
+  position: relative;
+  width: 100%; /* Adjust the width as needed */
+  margin: 0 auto;
+}
+
+.slides {
+  display: flex;
+  transition: transform 0.5s ease;
+}
+
+.slide {
+  flex: 0 0 33.333%; /* Display four slides in the view, adjust as needed */
+  box-sizing: border-box;
+  padding: 5px;
+}
+
+.slide img{
+  width: 100%;
+  border-radius: 15px;
+}
+
+button {
+  margin-top: 10px;
+}
+
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  padding: 10px;
+  margin-top: -22px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 5px;
+  border-radius: 3px 0 0 3px;
+}
+
+.prev {
+  left: 5px;
+  border-radius: 0 3px 3px 0;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
 .justify {
   text-align: justify;
   hyphens: auto;

static/js/main.js

@@ -13,6 +13,52 @@ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme')
 
 }
 
+if(window.location.pathname.includes('apps')){
+  const slider = document.querySelector('.slider');
+  const slides = document.querySelector('.slides');
+  const slideItems = document.querySelectorAll('.slide');
+  const prevBtn = document.querySelector('.prev');
+  const nextBtn = document.querySelector('.next');
+
+  let slidePosition = 0;
+  let slideWidth = slideItems[0].offsetWidth + parseInt(window.getComputedStyle(slideItems[0]).marginRight);
+
+  window.addEventListener("resize", ()=>{
+    slideWidth = slideItems[0].offsetWidth + parseInt(window.getComputedStyle(slideItems[0]).marginRight)
+    updateSlidePosition()
+  });
+
+  prevBtn.addEventListener('click', () => {
+    if (slidePosition > 0) {
+      slidePosition--;
+      updateSlidePosition();
+    }
+  });
+
+  nextBtn.addEventListener('click', () => {
+    if (slidePosition < slideItems.length - 3) { // Display 4 slides at a time
+      slidePosition++;
+      updateSlidePosition();
+    }
+  });
+
+  function updateSlidePosition() {
+    const offset = -slideWidth * slidePosition;
+    slides.style.transform = `translateX(${offset}px)`;
+  }
+
+}
+
+
+// window.addEventListener('load', (event) => {
+
+//   console.log('myVariable');
+
+//   // Access the value from the data attribute
+//   const myVariable = document.getElementById('myVariable').getAttribute('data-value');
+//   console.log(myVariable);
+//   });
+
 function setQueryParam(val){
   // Get the current URL's search parameters
 const urlParams = new URLSearchParams(window.location.search);
@@ -59,8 +105,6 @@ function copyWalletAddress(){
 }
 
 function openPopup(data) {
-  console.log(data)
-
   document.getElementById("myPopup").style.display = "block";
   const popupContent = document.getElementById("popupContent");
 

templates/apps/page.html

@@ -18,7 +18,7 @@
 <div class="wrap container" role="document">
   <div class="content">
     <div class="row justify-content-center">
-      <div class="col-sm-12 col-lg-10 col-xxl-8">
+      <div class="col-sm-12 col-lg-12 col-xxl-12">
         <article>
           <div class="col-sm-6 app-header">
             <h1>{{ page.title }}</h1>
@@ -27,6 +27,23 @@ <h1>{{ page.title }}</h1>
           <div class="lead">
             {{ page.content | safe }}
 
+            <h2>App Preview</h2>
+
+            {% if page.extra.screenshots %}
+              <div class="slider mb-4">
+                <div class="slides">
+
+                  {% for screenshot in page.extra.screenshots %}
+                    <div class="slide">
+                      <img src="/apps/{{page.title | lower }}/{{screenshot}}">
+                    </div>
+                  {% endfor %}
+                </div>
+                <span class="prev">&#10094;</span>
+                <span class="next">&#10095;</span>
+              </div>
+            {% endif %}
+
             {% for release in page.extra.releases %}
               {% set url = "https://github.com/" ~ release.repo %}
 
@@ -52,7 +69,6 @@ <h3>Encountered bugs or want a feature? Drop us a line below!</h3>
                 async>
             </script>
           </div>
-
           <div class="my-3">
             {% if page.extra.policy %}
                 <a href="{{page.extra.policy}}">Privacy Policy</a>