add more pages and why statement

app.py

@@ -26,13 +26,22 @@ def home(blocked: bool):
     return render_template('home.html')
 
 
-@app.route('/product')
+@app.route('/products/1')
 @protected_endpoint
-def product(blocked: bool):
+def product1(blocked: bool):
     if blocked:
         return render_template('blocked.html')
 
-    return render_template('product.html')
+    return render_template('product1.html')
+
+
+@app.route('/products/2')
+@protected_endpoint
+def product2(blocked: bool):
+    if blocked:
+        return render_template('blocked.html')
+
+    return render_template('product2.html')
 
 @app.route('/subscribe')
 def subscribed():

templates/home.html

@@ -42,7 +42,9 @@
           <h1>A real, not-fake website</h1>
           <h2>Please navigate around the site as you normally would.</h2>
         </hgroup>
-        <p><a href="/product" role="button">View Product</a></p>
+
+        <p><a href="/products/1" role="button">View Product 1</a></p>
+        <p><a href="/products/2" role="button">View Product 2</a></p>
       </header>
     </div><!-- ./ Hero -->
 
@@ -51,11 +53,15 @@ <h2>Please navigate around the site as you normally would.</h2>
       <div class="grid">
 
         <section>
-          <hgroup>
-            <h2>Ut sit amet sem ut velit</h2>
-            <h3>Quisque mi est</h3>
-          </hgroup>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis est vel velit bibendum ultrices. Sed aliquam tortor vel odio fermentum ullamcorper eu vitae neque. Sed non diam at tellus venenatis viverra. Vestibulum et leo laoreet arcu tempor eleifend venenatis ac leo. Pellentesque euismod justo sed nisl sollicitudin varius. Duis venenatis nisl sit amet ante rutrum posuere. Etiam nec ullamcorper leo, sed placerat mauris.</p>
+          <h2>Why does this site exist?</h2>
+          <p>
+            Because this field is somewhat 'secretive,' i.e. sharing bot protection strategies and datasets is giving
+            the bad actors an edge on the competition, there isn't much publicly available data for me to draw on.
+            So, after reading a few research papers, I created a simple webpage to collect some of my own statistics. Navigating this page helps
+            give me human-like behavior to extrapolate on to ultimately land on a hopefully robust feature set. Thank you
+            for helping me! The pages to check are the 'product pages' above as well as the subscribe
+            form at the bottom of the page. Visiting each one a few times throughout the day will help me toward my goal!
+          </p>
           <figure>
             <img src="/img/photo-1.jpeg" alt="Architecture">
             <figcaption>Image from me</figcaption>
@@ -67,17 +73,17 @@ <h3>Sed purus sapien, porta a cursus sed, maximus et metus.</h3>
         </section>
 
         <aside>
-          <a href="#" aria-label="Example" onclick="event.preventDefault()"><img src="https://source.unsplash.com/T5nXYXCf50I/1500x750" alt="Architecture"></a>
+          <a href="#" aria-label="Example" onclick="event.preventDefault()"><img src="/img/photo2.jpeg" alt="Architecture"></a>
           <p>
             <a href="#" onclick="event.preventDefault()">Donec sit amet</a><br>
             <small>Class aptent taciti sociosqu ad litora torquent per conubia nostra</small>
           </p>
-          <a href="#" aria-label="Example" onclick="event.preventDefault()"><img src="https://source.unsplash.com/tb4heMa-ZRo/1500x750" alt="Architecture"></a>
+          <a href="#" aria-label="Example" onclick="event.preventDefault()"><img src="/img/photo3.jpeg" alt="Architecture"></a>
           <p>
             <a href="#" onclick="event.preventDefault()">Suspendisse potenti</a><br>
             <small>Proin non condimentum tortor. Donec in feugiat sapien.</small>
           </p>
-          <a href="#" aria-label="Example" onclick="event.preventDefault()"><img src="https://source.unsplash.com/Ru3Ap8TNcsk/1500x750" alt="Architecture"></a>
+          <a href="#" aria-label="Example" onclick="event.preventDefault()"><img src="/img/photo4.jpeg" alt="Architecture"></a>
           <p>
             <a href="#" onclick="event.preventDefault()">Nullam lobortis placerat aliquam</a><br>
             <small>Maecenas vitae nibh blandit dolor commodo egestas vel eget neque. Praesent semper justo orci, vel imperdiet mi auctor in.</small>
@@ -93,7 +99,7 @@ <h3>Sed purus sapien, porta a cursus sed, maximus et metus.</h3>
         <article>
           <hgroup>
             <h2>Subscribe</h2>
-            <h3>Litora torquent per conubia nostra</h3>
+            <h3>I am not recording any names or emails from this -- but do fill it out to submit the form!</h3>
           </hgroup>
             <form class="grid" action="/subscribe">
               <input type="text" id="firstname" name="firstname" placeholder="First name" aria-label="First name" required>

templates/product1.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/css/pico.min.css">
+    <title>A product</title>
+  </head>
+  <body>
+    <main class="container">
+      <p><a href="/" role="button">Back</a></p>
+      <h1>Jordan 1 Retro High</h1>
+      <figure>
+        <img src="/img/shoe.jpeg">
+        <figcaption>Jordan 1 Retro High in White University Blue Black</figcaption>
+      </figure>
+      <p>
+        Jordan Brand paid homage to MJ’s alma mater with the Air Jordan 1 High University Blue. The University Blue colorway is prominent in the Jordan 1’s history. The first UNC-inspired Jordan 1 dates back to 1985 when the Jordan 1 debuted. Since then, there have been numerous iterations of the UNC 1, most recently the Jordan 1 Retro High Fearless UNC To Chicago. Jumpman is building off of its past and switching it up this week with a new iteration.
+
+The upper of the Air Jordan 1 High University Blue is composed of a white and black tumbled leather upper with University Blue Durabuck overlays. Following traditional Jordan 1 detailing, a Nike Air woven label is located on the tongue and an Air Jordan Wings Logo is printed on the ankle. A white midsole and University Blue outsole complete rejuvenated classic.
+
+The Air Jordan 1 High University Blue released in March of 2021 and retailed for $170.
+      </p>
+    </main>
+    <!-- Footer -->
+    <footer class="container">
+      <small>Built with <a href="https://picocss.com">Pico</a> • <a href="https://github.com/picocss/examples/tree/master/company/">Source code</a></small>
+    </footer><!-- ./ Footer -->
+  </body>
+</html>

templates/product2.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/css/pico.min.css">
+    <title>A product</title>
+  </head>
+  <body>
+    <main class="container">
+      <p><a href="/" role="button">Back</a></p>
+      <h1>Nike Air Max 1/97</h1>
+      <figure>
+        <img src="/img/sw.jpeg">
+        <figcaption>Nike Air Max 1/97 in LIGHT BLUE FURY/LEMON WASH</figcaption>
+      </figure>
+      <p>
+        The Air Max 97/1 Sean Wotherspoon is a perfect example of what Kevin Garnett was talking about when he yelled that “ANYTHING IS POSSIBLEEE!!” This ultra-special Nike Air Max 97/1 was originally part of a Nike design contest that Sean entered and ended up winning. Reportedly inspired by Sean’s love for vintage Nike hats from the 1980s, this shoe features both the upper of the Air Max 97 and the sole unit of the Air Max 1, a killer combo. The shoe also has a unique colorful corduroy upper with frayed edges, a truly one-of-a-kind look, with velour from toe to heel. These grails dropped on Air Max day 2018 (March 26th) and retailed at $160. If you’re an Air Max fan, these are a pair that is a must have in your collection and one that will be sure to turn heads. This no accessories version comes with an extra lace set only.
+      </p>
+    </main>
+    <!-- Footer -->
+    <footer class="container">
+      <small>Built with <a href="https://picocss.com">Pico</a> • <a href="https://github.com/picocss/examples/tree/master/company/">Source code</a></small>
+    </footer><!-- ./ Footer -->
+  </body>
+</html>

templates/subscribed.html

@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="css/pico.min.css">
-    <link rel="stylesheet" href="css/subscribed.css">
+    <link rel="stylesheet" href="/css/pico.min.css">
+    <link rel="stylesheet" href="/css/subscribed.css">
     <title>Subscribed!</title>
   </head>
   <body>