diff --git a/store/routes.py b/store/routes.py
index af7f173da9759fbc404eff65940a44c9921d7548..900bece74c88a772785fe8c9b7b4ab461c96eb8c 100644
--- a/store/routes.py
+++ b/store/routes.py
@@ -66,8 +66,9 @@ def get_user_id():
@app.route("/")
@app.route("/index")
def index():
+ repositories = Repository.query.all()
# If the title is unspecified then a default is used that is set in base.html
- return render_template("index.html", title="Home")
+ return render_template("index.html", title="Home", repositories=repositories)
@app.route("/basket")
diff --git a/store/static/_main.css b/store/static/_main.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..1b3d82142cf2c47ca433a30ca35415d659e66c09 100644
--- a/store/static/_main.css
+++ b/store/static/_main.css
@@ -0,0 +1,39 @@
+/* Adapted from: https://stackoverflow.com/questions/20007610/bootstrap-carousel-multiple-frames-at-once, Bootstrap 5 Multi-item Carousel Demo
+ Date: 13/04/2023*/
+/* Switch to single item display. */
+@media (max-width: 767px) {
+ .carousel-inner .carousel-item>div {
+ display: none;
+ }
+
+ .carousel-inner .carousel-item>div:first-child {
+ display: block;
+ }
+}
+
+/* Handles moving one item at a time when displaying multiple items. */
+@media (min-width: 768px) {
+
+ .carousel-inner .carousel-item-end.active,
+ .carousel-inner .carousel-item-next {
+ transform: translateX(25%);
+ }
+
+ .carousel-inner .carousel-item-start.active,
+ .carousel-inner .carousel-item-prev {
+ transform: translateX(-25%);
+ }
+}
+
+/* Get the carousel horizontal */
+.carousel-inner .carousel-item.active,
+.carousel-inner .carousel-item-next,
+.carousel-inner .carousel-item-prev {
+ display: flex;
+}
+
+/* Moves the entire line smoothly to the left. */
+.carousel-inner .carousel-item-end,
+.carousel-inner .carousel-item-start {
+ transform: translateX(0);
+}
\ No newline at end of file
diff --git a/store/templates/index.html b/store/templates/index.html
index 1dc5e829b93598987aae3a4398435414b28054c9..9a64c55bf4738615de80da2bc51e868c6a952c23 100644
--- a/store/templates/index.html
+++ b/store/templates/index.html
@@ -1,19 +1,91 @@
{%extends 'base.html' %}
-
{% block title %} Welcome! {% endblock %}
-
{% block content %}
- <br>
- <h1>Welcome to the Official Website of Antiques Online</h1>
- <br>
- <p>We maintain a large collection of fascinating Antiques and Collectibles to view on our Website.</p>
- <p>Click <a href="{{ url_for('items')}}">*HERE*</a> to view some of them.</p>
- <p>Hurry, they are very popular!</p>
- <br><br>
- <p>If you are new here, press <a href="{{ url_for('register')}}">*HERE*</a> to Register for an account</p>
- <br>
- <p>Returning Customers can Login <a href="{{ url_for('login')}}">*HERE*</a></p>
- <br>
-
+<div class="container">
+ <p class="my-5 ">
+ Antique's Online maintains a large collection of antiques and collectables stored in various repositories around
+ the
+ world. Our business sells these items through its online store and also through a variety of online auction
+ houses.
+ <br>
+ The below is an example of the collections our partner auction houses hold.
+ </p>
+</div>
+<!-- Adapted from: https://stackoverflow.com/questions/20007610/bootstrap-carousel-multiple-frames-at-once, Bootstrap 5 Multi-item Carousel Demo
+ Date: 13/04/2023
+Really want to completely redo this using card-groups, but for time saving measures this'll do.
+-->
+{% for repository in repositories %}
+<div class="container text-center my-3">
+ <!-- Ideally the name of the store should be here. -->
+ <h2 class="font-weight-light">ALTERNATE STORE {{loop.index}}</h2>
+ <div class="row mx-auto my-auto justify-content-center">
+ <div id="recipeCarousel{{loop.index}}" class="carousel slide" data-bs-ride="carousel">
+ <div class="carousel-inner" role="listbox">
+ <div class="carousel-item active justify-content-center">
+ <div class="col-md-3">
+ <div class="card">
+ <div class="card-img">
+ <img src="static\image_placeholder.png" class="img-fluid">
+ </div>
+ <!-- Feeling lazy, just hard cap the height. -->
+ <div class="card-body" style="height: 128px;">
+ <p class="card-text">{{ repository.items[0].description}}</p>
+ <a href="{{url_for('item_page', item_id = repository.items[0].id)}}"
+ class="btn btn-primary">View</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ {% for item in repository.items %}
+ <div class="carousel-item justify-content-center">
+ <div class="col-md-3">
+ <div class="card">
+ <div class="card-img">
+ <img src="static\image_placeholder.png" class="img-fluid"
+ style="width: 200px; height: 200px;">
+ </div>
+ <div class="card-body" style="height: 128px;">
+ <p class="card-text">{{ item.description}}</p>
+ <a href="{{url_for('item_page', item_id = item.id)}}" class="btn btn-primary">View</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ <!-- Controls for the carousel, href needs to be a unique id matching the carousel name.
+ This isn't perfect, there's some overlap with the "View" button.
+ -->
+ <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel{{loop.index}}" role="button"
+ data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ </a>
+ <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel{{loop.index}}" role="button"
+ data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ </a>
+ </div>
+ </div>
+</div>
+{% endfor %}
+
+<script>
+ // Clone the slides into divs.
+ let items = document.querySelectorAll('.carousel .carousel-item')
-{% endblock %}
+ items.forEach((el) => {
+ const minPerSlide = 4
+ let next = el.nextElementSibling
+ for (var i = 1; i < minPerSlide; i++) {
+ if (!next) {
+ // wrap carousel by using first child
+ next = items[0]
+ }
+ let cloneChild = next.cloneNode(true)
+ el.appendChild(cloneChild.children[0])
+ next = next.nextElementSibling
+ }
+ })
+</script>
+{% endblock %}
\ No newline at end of file