added in stock background

frontend/assets/style.css

@@ -59,7 +59,7 @@ body {
     }
 }
 
-.store-cards {
+.cards {
     height: 100%;
     width: 100%;
     display: flex;
@@ -70,6 +70,10 @@ body {
     overflow: auto;
 }
 
+#stores {
+    display: none;
+}
+
 .card {
     background-color: rgba(255, 255, 255, 0.5);
     width: 10em;
@@ -81,6 +85,15 @@ body {
     padding: 1em;
 }
 
+#listings .card {
+    background-color: rgba(255, 0, 0, 0.5);
+}
+
+#listings .in-stock {
+    background-color: rgba(125, 255, 125, 0.5);
+}
+
+
 .card-image {
     width: 100%;
     aspect-ratio: 1/1;

frontend/index.html

@@ -15,13 +15,22 @@
             </div>
             <input name="{{ .SearchInputName }}" type="text" class="grid-item" class="search" placeholder="{{ .SearchPlaceholder }}" />
 
-            <div class="store-cards">
+            <div class="cards" id="stores">
                 {{range $Store := .Stores }}
                 <a target="_blank" href="{{ $Store.Url }}" class="card">
                     <h3>{{ $Store.Name }}</h3>
                 </a>
                 {{- end }}
             </div>
+
+            <div class="cards" id="listings">
+                {{range $Listing := .Listings }}
+                <a target="_blank" href="{{ $Listing.Url }}" class="card {{ if $Listing.InStock }}in-stock{{ end }}">
+                    <h3>{{ $Listing.ProductName }}</h3>
+                    <p>{{ $Listing.StoreName }} - {{ $Listing.Price }}</p>
+                </a>
+                {{- end }}
+            </div>
         </form>
 
         <script>