diff --git a/instance/database.db b/instance/database.db
index ae0fc4db3e8efed7621e63a9c1ff8d54c760a9c9..4ecb35b6738983767d24c447a815d93e7e3ace54 100644
Binary files a/instance/database.db and b/instance/database.db differ
diff --git a/store/static/assets/coffee_banner.png b/store/static/assets/coffee_banner.png
index 4b5e89b0d33dd49eb2e44447cc58e560a49cec39..6fdfb64a56f563cace533a0841b90092d7a2fc8c 100644
Binary files a/store/static/assets/coffee_banner.png and b/store/static/assets/coffee_banner.png differ
diff --git a/store/static/css/styles.css b/store/static/css/styles.css
index a057daef41ca4eba4c09d0c041daa52ab3bb350b..b948912e61cc199ff909dcd362da7152e8b539b8 100644
--- a/store/static/css/styles.css
+++ b/store/static/css/styles.css
@@ -219,3 +219,25 @@ scroll p {
transform: scale(1.2, 1.2);
z-index: 6;
}
+
+.checkout-button {
+ text-align: center;
+ font-size: 24px;
+ height: 50px;
+ margin: 10px 10px;
+ padding: 0px 20px;
+}
+
+@media (max-width: 800px) {
+ .product-page-picture {
+ height: 300px;
+ width: 100%;
+ }
+}
+
+@media (min-width: 801px) {
+ .product-page-picture {
+ height: 400px;
+ width: 100%;
+}
+}
diff --git a/store/static/img/coffee_banner.png b/store/static/img/coffee_banner.png
index 4b5e89b0d33dd49eb2e44447cc58e560a49cec39..6fdfb64a56f563cace533a0841b90092d7a2fc8c 100644
Binary files a/store/static/img/coffee_banner.png and b/store/static/img/coffee_banner.png differ
diff --git a/store/templates/checkout.html b/store/templates/checkout.html
index 8314786333abc480b73d4384285056af40d60e7a..de0ff122a6e22ad5e8f631a2d92e302f1f3cfe52 100644
--- a/store/templates/checkout.html
+++ b/store/templates/checkout.html
@@ -30,7 +30,7 @@
<div class="btn-clear hidden-right">clear</div>
</div>
</div>
- <div style='height: 80px;margin:10px 30px;background: #00c0ff'>
+ <div style='height: 80px;margin:20px 30px;background: #00c0ff'>
<div class="d-flex" style="width: 80%;margin:auto">
<div style="height: 60px;margin-left:150px;width: auto;padding: 5px">
<div style="margin-top: 14px;font-size: 24px">
@@ -42,7 +42,7 @@
</div>
</div>
</div>
- <div style='height: 80px;margin:10px 30px;background: #00c0ff'>
+ <div style='height: 80px;margin:20px 30px;background: #00c0ff'>
<div class="d-flex" style="width: 80%;margin:auto">
<div style="height: 60px;margin-left:160px;width: auto;padding: 5px">
<div style="margin-top: 14px;font-size: 24px">
@@ -56,9 +56,9 @@
</div>
<div style="margin:10px;text-align: center">
{% if user.is_authnticated %}
- <button class="red-button" type="button" onclick="checkoutUser()">SUBMIT</button>
+ <button class="red-button checkout-button" type="button" onclick="checkoutUser()">SUBMIT</button>
{% else %}
- <button class="red-button" type="button" onclick="checkoutAnon()">SUBMIT</button>
+ <button class="red-button checkout-button" type="button" onclick="checkoutAnon()">SUBMIT</button>
{% endif %}
</div>
</div>
diff --git a/store/templates/creamer.html b/store/templates/creamer.html
index 522e7c72a3007d116110557388993cee91531250..5e20bb3e2bbca83c59970de91e622786216fc069 100644
--- a/store/templates/creamer.html
+++ b/store/templates/creamer.html
@@ -1,18 +1,85 @@
{% extends "base.html" %} {% block title %}Home{% endblock %} {% block page %}
- <h1 align="center">Home</h1>
- <img src="./static/assets/creamer.png" alt="AlphaMart Logo" width="20%" height="20%">
- <form method="POST">
- <div class="form-group">
- <label for="{{ product.shorthand }}"></label>
- <button type="submit" name="product" value="{{ product.shorthand }}" class="btn btn-primary">{{ product.name }}</button>
- </div>
-</form>
+
+ <div class="container py-4 py-xl-5">
+ <div class="row mb-5">
+ <div class="col-md-8 col-xl-6 text-center mx-auto" style="background: #ffd200;">
+ <h2 style="font-family: RamaGothicEW01;font-weight: bold;letter-spacing: 2px;font-size: 48px;text-shadow: 3px 3px #ffffff;color: #ff2e00;margin-bottom: 0px;">{{ product.name }}</h2>
+ </div>
+ </div>
+ <div>
+ <div class="main-yellow">
+ <div>
+
+ </div>
+ </div>
+ </div>
+
+ <div class="row gy-4 row-cols-1 row-cols-md-1 row-cols-xl-1" style="margin-bottom: 25px;">
+ <div class="col">
+ <div class="card" style="border-radius: 0px;background: #ffd200;border-width: 0px;">
+ <div class="fit-cover product-page-picture" style="display: inline;background: #ffffff;text-align: center;position: relative">
+ <img class="fit-cover" style="height: auto;width: auto;max-height: 400px;max-width: 330px;top: 0;left: 0;bottom: 0;right: 0;margin: auto;position: absolute" src="../static/img/{{ product.shorthand }}.png">
+ </div>
+ <div class="card-body p-4" style="text-align: center">
+ <h4 class="card-title" style="font-family: RamaGothicEW01;font-weight: bold;color: #1728b8;">{{ (product.name).upper() }} - £{{ "{0:.2f}".format(product.price / 100) }}</h4>
+ <p class="card-text" style="font-family: RamaGothicEW01;letter-spacing: 0px;font-size: 20px;">Some text about {{ product.shorthand }} yada yada yada it is awesome</p>
+ <p class="card-text" style="font-family: RamaGothicEW01;letter-spacing: 0px;font-size: 20px;">Environmental Impact: {{ product.envImpact }}/10</p>
+ <div class="d-flex" style="text-align: center;">
+ <div style="margin:auto;font-size: 32px">
+ <label for="{{ product.shorthand }}"></label>
+ {% if user.is_authenticated %}
+ <form method='POST'>
+ <button class="btn btn-primary red-button" type="submit" name="product" value="{{ product.shorthand }}" style="background: #ff2e00;font-size: 28px;border-radius: 0px;width: 130px;padding: 5px 5px;border-style: none;">ADD <img src="../static/img/cart_w.svg" style="width: 20%;"></button>
+ </form>
+ {% else %}
+ <button class="btn btn-primary red-button" type="button" onclick='addToBasket("{{ product.shorthand }}", "{{ product.price }}", "")' style="background: #ff2e00;font-size: 28px;border-radius: 0px;width: 130px;padding: 5px 5px;border-style: none;">ADD <img src="../static/img/cart_w.svg" style="width: 20%;"></button>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row gy-4 row-cols-1 row-cols-md-2 row-cols-xl-3" style="margin-bottom: 25px;">
+ {% for review in product.reviews %}
+ <div class="col">
+ <div class="card" style="border-radius: 0px;background: #ffd200;border-width: 0px;">
+ <h2 style="font-family: RamaGothicEW01;margin-top:10px;text-align: center;font-weight: bold;letter-spacing: 2px;font-size: 24px;text-shadow: 3px 3px #ffffff;color: #ff2e00;margin-bottom: 0px;">
+ Review By:
+ {% if users.query.filter_by(id=review.user_id).first() %}
+ {{ users.query.filter_by(id=review.user_id).first().name }}
+ {% endif %}
+ </h2>
+ <div class="card-body p-4">
+ <h4 class="card-title" style="font-family: RamaGothicEW01;font-weight: bold;color: #1728b8;">{{ (product.name).upper() }} - £{{ "{0:.2f}".format(product.price / 100) }}</h4>
+ <p class="card-text" style="font-family: RamaGothicEW01;letter-spacing: 0px;font-size: 20px;">Some text about {{ product.shorthand }} yada yada yada it is awesome</p>
+ <div class="d-flex" style="text-align: left;">
+ <label for="{{ product.shorthand }}"></label>
+ {% if user.is_authenticated %}
+ <form method='POST'>
+ <button class="btn btn-primary red-button" type="submit" name="product" value="{{ products[0].shorthand }}" style="background: #ff2e00;border-radius: 0px;width: 130px;padding: 5px 5px;border-style: none;">ADD <img src="../static/img/cart_w.svg" style="width: 20%;"></button>
+ </form>
+ {% else %}
+ <button class="btn btn-primary red-button" type="button" onclick='addToBasket("{{ product.shorthand }}", "{{ product.price }}", "")' style="background: #ff2e00;border-radius: 0px;width: 130px;padding: 5px 5px;border-style: none;">ADD <img src="../static/img/cart_w.svg" style="width: 20%;"></button>
+ {% endif %}
+ <button class="btn btn-primary red-button" type="button" style="background: #ff2e00;border-style: none;width: 130px;position: absolute;right: 25px;border-radius: 0px;">VIEW ITEM <img src="../static/img/arrow_w.svg" style="width: 20%;margin-bottom: 2px;"></button>
+ </div>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+
+
+
+
{% for review in product.reviews %}
<li>
Review by
{% if users.query.filter_by(id=review.user_id).first() %}
{{ users.query.filter_by(id=review.user_id).first().name }}
- {% endif %}
+ {% endif %}
<br/>
Rating: {{ review.rating }}
<br/>
diff --git a/store/templates/home.html b/store/templates/home.html
index f52773005a388ef9861fe32c89a806bf844ace71..d10d86f3d34b913b6891a787d3597d3fe519edd7 100644
--- a/store/templates/home.html
+++ b/store/templates/home.html
@@ -1,32 +1,30 @@
{% extends "base.html" %} {% block title %}AlphaMart{% endblock %} {% block page %}
<div style="background: #00c0ff;">
- <div class="simple-slider" style="width: 100%;height:200px">
- <div class="swiper-container" style="width: 100%;height:200px" >
- <div class="swiper-wrapper" style="width: 100%;height:200px">
- <div class="swiper-slide .carousel-item" style="background:#ff0000 center center / cover no-repeat;">
- <div style="width: 100%;height: 200px;text-align: center;position: relative">
- <img src="{{ url_for('static', filename='img/coursework_ad_f1.png') }}" class="align-bottom" style="height: auto;width: auto;max-height: 200px;max-width: 100%;top: 0;left: 0;bottom: 0;right: 0;margin: auto;position: absolute">
- </div>
- </div>
- <div class="swiper-slide" style="background: #120b0b center center / cover no-repeat;">
- <div style="width: 100%;height: 200px;text-align: center;position: relative">
- <img src="{{ url_for('static', filename='img/Memorabilia_Merchant.gif') }}" class="align-bottom" style="height: auto;width: auto;max-height: 200px;max-width: 100%;top: 0;left: 0;bottom: 0;right: 0;margin: auto;position: absolute">
- </div>
- </div>
- <div class="swiper-slide" style="background:#ffffff center center / cover no-repeat;">
- <div style="width: 100%;height: 200px;text-align: center;position: relative">
- <img src="{{ url_for('static', filename='img/coursework_ad_f1.png') }}" class="align-bottom" style="height: auto;width: auto;max-height: 200px;max-width: 100%;top: 0;left: 0;bottom: 0;right: 0;margin: auto;position: absolute">
- </div>
- </div>
+ <div class="simple-slider" style="width: 100%;height:200px">
+ <div class="swiper-container" style="width: 100%;height:200px" >
+ <div class="swiper-wrapper" style="width: 100%;height:200px">
+ <div class="swiper-slide .carousel-item" style="background:#ff0000 center center / cover no-repeat;">
+ <div style="width: 100%;height: 200px;text-align: center;position: relative">
+ <img src="{{ url_for('static', filename='img/coursework_ad_f1.png') }}" class="align-bottom" style="height: auto;width: auto;max-height: 200px;max-width: 100%;top: 0;left: 0;bottom: 0;right: 0;margin: auto;position: absolute">
+ </div>
+ </div>
+ <div class="swiper-slide" style="background: #120b0b center center / cover no-repeat;">
+ <div style="width: 100%;height: 200px;text-align: center;position: relative">
+ <img src="{{ url_for('static', filename='img/Memorabilia_Merchant.gif') }}" class="align-bottom" style="height: auto;width: auto;max-height: 200px;max-width: 100%;top: 0;left: 0;bottom: 0;right: 0;margin: auto;position: absolute">
+ </div>
+ </div>
+ <div class="swiper-slide background-blur-img" style='background-image: url("../static/img/coffee_banner_bg.png")'>
+ <div style="width: 100%;height: 200px;text-align: center;position: relative">
+ <img src="{{ url_for('static', filename='img/coffee_banner.png') }}" class="align-bottom" style="height: auto;width: auto;max-height: 200px;max-width: 100%;top: 0;left: 0;bottom: 0;right: 0;margin: auto;position: absolute">
+ </div>
+ </div>
+ </div>
+ <div class="swiper-pagination"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-button-next"></div>
</div>
- <div class="swiper-pagination"></div>
- <div class="swiper-button-prev"></div>
- <div class="swiper-button-next"></div>
</div>
- </div>
-
-
<div class="container py-4 py-xl-5">
<div class="row mb-5">
<div class="col-md-8 col-xl-6 text-center mx-auto" style="background: #ffd200;">