feat(pets): updates pets view

app/pets/routes.py

@@ -4,4 +4,8 @@ from app.services.pet_service import PetService
 
 @bp.route('/')
 def index():
-    return render_template("pets/index.html", options=PetService.get_options(request))
+    return render_template(
+        "pets/index.html", 
+        options=PetService.get_options(request), 
+        pagination_result=PetService.get_pets(request)
+        )

app/static/css/pets.css

@@ -0,0 +1,75 @@
+.fliping-card {
+    flex: initial;
+    position: relative;
+    height: 200px;
+    width: 200px;
+    -moz-perspective: 200rem;
+    perspective: 200rem;
+}
+
+.fliping-card__side {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.8s ease;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    -webkit-backface-visibility: hidden; /* We don't want to see the back part of the element. */
+    backface-visibility: hidden; /* We don't want to see the back part of the element. */
+    border-radius: var(--bs-border-radius);
+    overflow: hidden; /* The image is overflowing the parent. */
+    box-shadow: 0 2rem 6rem rgba(#000, 0.15);
+}
+
+.fliping-card__side--back {
+    border: 1px solid #c0c0c0;
+    color: white;
+    height: 100%;
+    transform: rotateY(180deg);
+}
+
+.fliping-card__side--back-male {
+    background-color: #0d6efd;
+}
+
+.fliping-card__side--back-female {
+    background-color: #fd0d99;
+}
+
+.fliping-card:hover .fliping-card__side--back {
+    transform: rotateY(0);
+}
+
+.fliping-card:hover .fliping-card__side--front {
+    transform: rotateY(-180deg);
+}
+
+@media only screen and (max-width: 575px), only screen and (hover: none) {
+    .fliping-card {
+        height: 350px;
+        -moz-perspective: none;
+        perspective: none;
+    }
+
+    .fliping-card__side {
+        height: auto;
+        position: relative;
+        box-shadow: none;
+    }
+    .fliping-card__side--front {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom: 0px;
+    }
+    .fliping-card:hover .fliping-card__side--front {
+        transform: rotateY(0);
+    }
+    .fliping-card__side--back {
+        border: 0px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        transform: rotateY(0);
+    }
+}

app/templates/pets/index.html

@@ -1,14 +1,16 @@
 {% extends "layout/layout.html" %}
+{% from "paginator/paginator.html" import paginator %}
 {% block title %} Home {% endblock %}
 {% block head %} 
   {{ super() }}
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/pets.css') }}">
 {% endblock %} 
 {% block content %}
 <div class="pets container">
     <div class="row px-2">
-        <div class="card py-4 my-4">
+        <div class="card py-4 mb-3 mb-md-0 mt-4">
             <div class="col-12">
-                <form action="" method="get">
+                <form method="get" id="filters">
                     <div class="row">
                         <div class="col-12 col-md-3 col-lg-3 mb-3 mb-lg-0">
                             <select aria-label="type select field" class="form-select" name="type">
@@ -67,10 +69,42 @@
                 </form>
             </div>
         </div>
-
     </div>
-    <div class="row">
-        <h1>This is pets!</h1>
+    <div class="row justify-content-start">
+        {% for pet in pagination_result.items %}
+            <div class="col-6 col-sm-4 col-md-4 col-lg-3 mt-3 mt-md-5">
+                <div class="fliping-card img-fluid mx-auto">
+                    <div class="fliping-card__side fliping-card__side--front">
+                        <img alt="pet" width="200" height="200" src="{{ url_for('static', filename=pet.img_src) }}" class="img-fluid">
+                    </div>
+                    <div class="fliping-card__side fliping-card__side--back 
+                    {%if pet.sex == 'M' %}
+                    {{'fliping-card__side--back-male'}}
+                    {% else %}
+                    {{'fliping-card__side--back-female'}}
+                    {% endif %}"
+                    >
+                        <ul class="list-unstyled text-center mt-3">
+                            <li>Name: {{pet.name}}</li>
+                            <li>Age: {{pet.age}}, Sex: {{pet.sex}}</li>
+                            <li>W: {{pet.weight}}lbs., H: {{pet.height}}ft.</li>
+                            <li>Location: {{pet.location}}</li>
+                            <li>Ask for adoption!</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+    <div class="row justify-content-center">
+        {{  
+            paginator(pagination_result.page,
+            pagination_result.pages,
+            pagination_result.has_prev,
+            pagination_result.has_next,
+            pagination_result.prev_num,
+            pagination_result.next_num )
+        }}
     </div>
 </div>
 <script src="{{ url_for('static', filename='js/pets-filter.js') }}"></script>