diff --git a/app/views/confirmation/index.php b/app/views/confirmation/index.php
index 121586506c1663df64cdb639dba2c8f29c02fb33..a401c7abbe9c13abdec8e2745a9f2ce6b21a5969 100644
--- a/app/views/confirmation/index.php
+++ b/app/views/confirmation/index.php
@@ -1,17 +1,51 @@
<div class="conf">
<div class="container conf-container">
- <h1 class="font-bold text-xl text-blue-purple-gradient">
- <?= $data['isSuccess'] ?>
- </h1>
- <h1 class="font-bold text-xl text-blue-purple-gradient">
- <?= $data['gems'] ?>
- </h1>
- <img src="http://192.168.0.11:5000/image/?filename=<?= $data['merch']['image'] ?>" alt="merch-image" class="merch-image">
- <h1 class="font-bold text-xl text-blue-purple-gradient">
- <?= $data['merch']['name'] ?>
- </h1>
- <h1 class="font-bold text-xl text-blue-purple-gradient">
- <?= $data['merch']['price'] ?>
- </h1>
+ <? if ($data['isSuccess'] == 1): ?>
+ <h1 class="font-bold text-xl text-blue-purple-gradient">
+ Purchase Successful!
+ </h1>
+ <? else: ?>
+ <h1 class="font-bold text-xl text-red">
+ Purchase Failed!
+ </h1>
+ <? endif; ?>
+ <div class="conf-items">
+ <div class="merch-item"
+ style="background-image: url('http://192.168.0.11:5000/image/?filename=<?= $data['merch']['image'] ?>');">
+ <div class="merch-image"></div>
+ <div class="merch-details">
+ <div class="merch-name">
+ <?= $data['merch']['name'] ?>
+ </div>
+ <div class="merch-desc">
+ <?= $data['merch']['desc'] ?>
+ </div>
+ <? if ($data['isSuccess'] == 1): ?>
+ <div class="merch-price">
+ -
+ <?= $data['merch']['price'] ?> Gems
+ </div>
+ <? endif; ?>
+ <? if ($data['isSuccess'] == 0): ?>
+ <div class="merch-price">
+ Insufficient Gems
+ </div>
+ <? endif; ?>
+ " <button class="buy-button" name="backMerch" onclick=goBack()>Back</button>
+ "
+ </div>
+ </div>
+ </div>
+ <div class="font-bold">
+ Your total gems:
+ <span class="result-text">
+ <?= $data['gems'] ?>
+ </span>
+ </div>
</div>
-</div>
\ No newline at end of file
+</div>
+<script>
+ function goBack() {
+ window.location.href = 'http://localhost:8008/merchandise';
+ }
+</script>
\ No newline at end of file
diff --git a/app/views/header/index.php b/app/views/header/index.php
index 5121dfe8e88bd5b042cf3482f3d5372b56d0da88..5f8efe78a0e71914a2387326f7a088538014d35d 100644
--- a/app/views/header/index.php
+++ b/app/views/header/index.php
@@ -32,5 +32,6 @@
<link rel="stylesheet" href="/public/css/question.css">
<link rel="stylesheet" href="/public/css/merchandise.css">
<link rel="stylesheet" href="/public/css/transaction.css">
+ <link rel="stylesheet" href="/public/css/confirm.css">
</head>
<body>
\ No newline at end of file
diff --git a/app/views/merchandise/index.php b/app/views/merchandise/index.php
index 63c6338cb32e51bfad05a3e388411e7e2e3dd4ef..91bf63d0e5f85efff6f282e8406a0c7a24bb8810 100644
--- a/app/views/merchandise/index.php
+++ b/app/views/merchandise/index.php
@@ -27,7 +27,7 @@
<?= $merch['desc'] ?>
</div>
<div class="merch-price">
- <?= $merch['price'] ?>
+ <?= $merch['price'] ?> Gems
</div>
<div>
<form action="../../../api/merch/buy.php" method="post">
diff --git a/app/views/result/index.php b/app/views/result/index.php
index f9e4e9e3685ae7b3d9794fb9203cbe556af79944..c4f9805480f37c0e0dcb48d3e74d33dd635c38b8 100644
--- a/app/views/result/index.php
+++ b/app/views/result/index.php
@@ -7,12 +7,11 @@
</h1>
<div class="result-content">
<h1 class="font-bold">
- Your Score:
- <span class="result-text"> <?= $data['score'] ?> </span>
+ Your Score: <?= $data['score'] ?>
</h1>
<? if ($data['isDone'] == ""): ?>
<div class="font-bold">
- Gems earned: <span class="result-text"> +
+ Gems earned: <span class="result-text-green"> +
<?= $data['score'] ?> </span>
</div>
<div class="font-bold">
diff --git a/public/css/confirm.css b/public/css/confirm.css
new file mode 100644
index 0000000000000000000000000000000000000000..8bf36962fe057c71addf1e1384770ec873c6676d
--- /dev/null
+++ b/public/css/confirm.css
@@ -0,0 +1,24 @@
+.conf {
+ width: 100%;
+ padding-top: 120px;
+ display: flex;
+ /* align-items: center; */
+ justify-content: center;
+ padding-bottom: 60px;
+ min-height: 100vh;
+}
+
+.conf .conf-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 50px;
+}
+
+.conf .conf-container h1 {
+ text-align: center;
+}
+
+.text-red {
+ color: var(--red);
+}
\ No newline at end of file
diff --git a/public/css/question.css b/public/css/question.css
index 5e054b3ffca43b55a65719b4e6253447ff278c7f..c6eea3dc626f7ddd54e932fcdbc2150e5e55388a 100644
--- a/public/css/question.css
+++ b/public/css/question.css
@@ -134,10 +134,14 @@
text-align: end;
}
-.result .result-content .result-text {
+.result-text {
color: var(--orange);
}
+.result .result-content .result-text-green {
+ color: #2AAA8A;
+}
+
@media (max-width: 1000px) {
.result .result-header {