Project_template.Rhtml

<html>

<head>
  
<meta charset="UTF-8">
<!--begin.rcode echo=FALSE
n.products <- seq(1,prod_x_page)
reviews$reviewTime <- as.Date(reviews$reviewTime, format = "%m %d, %Y")
products <- sample(unique(reviews$asin), prod_x_page, replace = FALSE)
reviews_byItem <- reviews %>% group_by(asin) %>% filter(asin %in% products)

end.rcode-->

<!--begin.rcode echo=FALSE
head_title <- paste('<title>WebScraping-page', page_no,'</title>', sep="")
end.rcode-->

<!--begin.rcode results='asis', echo=FALSE
cat(unique(head_title))
end.rcode-->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'>
   <style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: #435158;
  font-family: "Open Sans", sans-serif;
}

.wrapper {
  max-width: 1000px;
  margin: 0 auto 48px;
  padding: 0 12px;
}
.wrapper:before, .wrapper:after {
  content: "";
  display: table;
}
.wrapper:after {
  clear: both;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #171c1e;
  transform: translateZ(0);
  z-index: 2;
}
nav .wrapper {
  margin-bottom: 0;
}

.menu {
  position: relative;
  width: 60px;
  height: 48px;
  float: left;
  border-left: 1px solid #242c2f;
  border-right: 1px solid #242c2f;
}
.menu__icon, .menu__icon:before, .menu__icon:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 24px;
  height: 2px;
  background-color: white;
}
.menu__icon:before {
  top: -14px;
}
.menu__icon:after {
  bottom: -14px;
}

.cart {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cart p {
  display: inline-block;
  position: relative;
  margin-bottom: 0;
  color: white;
  padding: 12px;
}
.cart__price, .cart__items {
  display: flex;
}
.cart__price .text, .cart__items .text {
  font-size: 12px;
  line-height: 24px;
  text-transform: uppercase;
  padding-right: 0;
}
.cart__price .total, .cart__items .total {
  font-size: 20px;
  font-weight: 700;
}
.cart__price .total {
  padding-left: 10px;
  margin-left: 6px;
}
.cart__price .total:before {
  content: "$";
  position: absolute;
  top: 8px;
  left: 0;
  font-size: 12px;
  font-weight: normal;
  margin-right: 2px;
}
.cart__items {
  background-color: #E5467E;
}

.introduction {
  color: white;
  padding-top: 110px;
}

h1 {
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  margin-bottom: 12px;
}

.products {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 6px;
  max-width: 1000px;
  margin: 0 auto 48px;
}

.product {
  position: relative;
  display: flex;
  padding: 6px;
  white-space: normal;
  transition: transform 0.1s ease-out;
  width: 100%;
}
@media (min-width: 550px) {
  .product {
    width: 50%;
  }
}
@media (min-width: 850px) {
  .product {
    width: 33.33%;
  }
}
.product:hover {
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 48px -24px;
}
.product__content {
  position: relative;
  padding: 24px 24px 74px;
  background: white;
  white-space: normal;
  transition: transform 0.1s ease-out;
}
.product__content:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: #d5dbdf;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.product__content.is-purchased:before {
  opacity: 0.9;
}

h2 {
  position: relative;
  font-size: 22px;
  line-height: 24px;
  margin-bottom: 8px;
}

p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 12px;
}
p.price {
  position: relative;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  padding: 2px 8px;
  color: white;
  background-color: #8c9fa8;
  border-radius: 2px;
}
.is-purchased p.price {
  background-color: #d91f60;
}

.features {
  list-style-type: disc;
  margin-left: 18px;
  font-size: 16px;
  line-height: 22px;
}
.features li {
  margin-bottom: 6px;
}


.is-purchased button {
  transform: translateY(2px);
  overflow: hidden;
  background-color: #d91f60;
  box-shadow: #f29fbc 0 1px 0, #801239 0 2px 0;
}
.is-purchased button:before {
  border-left: 1px solid #f29fbc;
  background-color: #ad184d;
}
.is-purchased button:after {
  transform: rotate(0);
}
.is-purchased button:active {
  transform: translateY(4px);
  box-shadow: #f29fbc 0 1px 0, #801239 0 0 0;
}

.icon__check {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: -24px;
  width: 80px;
  height: 80px;
  background-color: white;
  border: 8px solid #435158;
  border-radius: 100%;
  transform: scale(0);
}
.icon__check:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: -6px;
  width: 12px;
  height: 28px;
  border-right: 8px solid #435158;
  border-bottom: 8px solid #435158;
  transform: rotate(45deg);
}
.is-purchased .icon__check {
  -webkit-animation: bounceIn 0.4s ease-out forwards;
          animation: bounceIn 0.4s ease-out forwards;
}

.big-spender {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(229, 70, 126, 0.9);
  color: white;
  text-align: center;
  transform: translateZ(0);
  opacity: 0;
  transition: opacity 0.2s 0.21s ease-out;
  z-index: 1;
}
.big-spender .wrapper {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.big-spender h1 {
  display: inline-block;
}
.big-spender .close {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  background-color: #d91f60;
  border-radius: 4px;
}
.big-spender .close:hover {
  background-color: #ad184d;
}
.big-spender.is-visible {
  opacity: 1;
  top: 0;
}
.big-spender.is-visible .wrapper {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.41s;
}

@-webkit-keyframes bounceIn {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(2);
  }
  40% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(2);
  }
  40% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}
  </style>
</head>

<body>
<!-- Nav Bar (menu + Cart) -->
<nav>
  <div class="wrapper">
    <div class="menu">
      <div class="menu__icon"></div>
    </div>
    <div class="cart">
      <div class="cart__price">
        <p class="text">Cart Total</p>
        <p class="total">0.00</p>
      </div>
      <div class="cart__items">
        <p class="text">Items</p>
        <p class="total">0</p>
      </div>
    </div>
  </div>
</nav>

<!-- Introduction text -->
<div class="introduction">
  <div class="wrapper">
    <h1>Welcome to e-commerce</h1>
    <p>Welcome to our super sweet products page. You like it, you buy it! Click the "Add this product" button to add it to your cart. If you got that fliff, why not buy them all? You're worth it! Treat yourself!</p>
  </div>
</div>

  <!-- Product List -->
<ul class="products">
<!--begin.rcode results='asis', echo=FALSE
  for (product in products) {
    allreviews <- reviews_byItem[reviews_byItem$asin == paste0(product), ]
    
   cat( paste0('<li class="product">',
        '  <div class="product__wrapper">',       
        '  <div class="product__content">',
        '    <h2>', product, '</h2>',
        '    <p class="price"> $', product, '</p>',
        '    <p>A great description that explains what this product is all about. Here\'s what you get!</p>',
        '    <div class="features">',
        (function() {
          html = '';
          for (i in 1:length(allreviews$reviewText)) {
            reviewId = paste0(product, '-review', i)
            html = paste0(html, '<div class="review-container" data-product-id="',product,'" id="', reviewId, '" style="display: ', ifelse(i == 1, 'block', 'none'), ';">',
                              '<p class="review"><strong>', allreviews$reviewTime[i], ':</strong> ', allreviews$reviewText[i], '</p>',
                              '<p class="rating">Rating: <strong>', allreviews$overall[i], '</strong></p><hr>',
                            '</div>');
          }
          return(html);
        })(),
        '</div>', 
        '</div>', 
        '<div class="product__buttons" style="text-align: center;">',
        '<button onclick="showPreviousReview(',"'",product,"'",', 1)">Previous Review</button>',
        '<button onclick="showNextReview(',"'",product,"'",', 1)">Next Review</button>',
        '</div>',
        '</div>',
        '</li>'
    ))
  }
end.rcode-->

</ul>

<script>
    // Create an object to store currentReviewIndex for each product
    var currentReviewIndices = {};

    function showPreviousReview(productId) {
        var reviews = document.querySelectorAll('.review-container[data-product-id="' + productId + '"]');
        if (!currentReviewIndices[productId]) {
            currentReviewIndices[productId] = 0;
        }
        reviews[currentReviewIndices[productId]].style.display = 'none';
        currentReviewIndices[productId] = (currentReviewIndices[productId] - 1 + reviews.length) % reviews.length;
        reviews[currentReviewIndices[productId]].style.display = 'block';
    }

    function showNextReview(productId) {
        var reviews = document.querySelectorAll('.review-container[data-product-id="' + productId + '"]');
        if (!currentReviewIndices[productId]) {
            currentReviewIndices[productId] = 0;
        }
        reviews[currentReviewIndices[productId]].style.display = 'none';
        currentReviewIndices[productId] = (currentReviewIndices[productId] + 1) % reviews.length;
        reviews[currentReviewIndices[productId]].style.display = 'block';
    }
</script>



</body>
</html>