diff --git a/src/main/java/uk/ac/cf/spring/demo/takeaway/index/IndexController.java b/src/main/java/uk/ac/cf/spring/demo/takeaway/index/IndexController.java
index 44f59ab9125380d3fbed8a5493aa72ee86b39c42..0e157f65e0755f5b279f65cb486075549e7ce2ee 100644
--- a/src/main/java/uk/ac/cf/spring/demo/takeaway/index/IndexController.java
+++ b/src/main/java/uk/ac/cf/spring/demo/takeaway/index/IndexController.java
@@ -4,6 +4,8 @@ import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
+import java.util.List;
+
@Controller
public class IndexController {
@GetMapping("/index")
@@ -11,9 +13,34 @@ public class IndexController {
ModelAndView modelAndView = new ModelAndView("/page/index");
return modelAndView;
}
- @GetMapping("/index/groupList")
+ @GetMapping("/groupList")
public ModelAndView getGroupList() {
ModelAndView modelAndView = new ModelAndView("/page/groupList");
return modelAndView;
}
+ @GetMapping("/itemForm")
+ public ModelAndView getitemForm() {
+ ModelAndView modelAndView = new ModelAndView("/page/itemForm");
+ return modelAndView;
+ }
+// @GetMapping("/itemList")
+// public ModelAndView getitemList() {
+// ModelAndView modelAndView = new ModelAndView("/page/itemList");
+// return modelAndView;
+// }
+ @GetMapping("/itemList")
+ public ModelAndView getitemList() {
+ ModelAndView modelAndView = new ModelAndView("/page/itemList");
+
+ // Retrieve existing exchange items and add to the model
+ List<ExchangeItem> exchangeItems = ExchangeService.getInstance().getExchangeItems();
+ modelAndView.addObject("exchangeItems", exchangeItems);
+
+ return modelAndView;
+ }
+ @GetMapping("/personalInformation")
+ public ModelAndView personalInformation() {
+ ModelAndView modelAndView = new ModelAndView("/page/personalInformation");
+ return modelAndView;
+ }
}
diff --git a/src/main/resources/static/css/index.css b/src/main/resources/static/css/index.css
index f9d86c8f157b592f32662b8cb68c83250baff9f9..b168249f6d17383edc86bb7ca3134e5d0b131697 100644
--- a/src/main/resources/static/css/index.css
+++ b/src/main/resources/static/css/index.css
@@ -1,5 +1,5 @@
header{
- height: 90px;
+ height: 50px;
}
header div:nth-of-type(1){
@@ -15,4 +15,79 @@ header div:nth-of-type(2) ul li{
}
header div:nth-of-type(3){
float: right;
-}
\ No newline at end of file
+}
+body, html {
+ height: 100%;
+ margin: 0;
+ font-family: Arial, sans-serif; /* set fonts */
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 20px;
+ background-color: #98F5FF;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000; /* place header on top */
+}
+
+.logo-section img {
+ height: 50px; /* Logo height */
+}
+
+.nav ul {
+ list-style: none; /* cancel default list style */
+ padding: 0; /* cancel default padding */
+ margin: 0; /* cancel default margin */
+}
+
+.nav li {
+ display: inline; /* make list arranged in horizontal pattern */
+ margin: 0 15px; /* add left and right spacing */
+}
+
+.nav a {
+ text-decoration: none; /* remove underline */
+ color: #333; /* link color */
+}
+
+main {
+ padding-top: 100px; /* reserve space for fixed header */
+}
+
+.content h1 {
+ text-align: center; /* Center the heading */
+}
+
+.content p {
+ text-align: left; /* Left-align the paragraph */
+ padding: 20px; /* Inner padding for the paragraph */
+}
+/*.description-image {*/
+/* max-width: 100%; !* 使图片自适应宽度 *!*/
+/* height: auto; !* ä¿æŒæ¯”例 *!*/
+/*}*/
+.image-container {
+ display: flex; /* Use flexbox for layout */
+ justify-content: space-between; /* Space images apart */
+ padding: 20px; /* Optional padding around the container */
+}
+
+.image-container img {
+ max-width: 45%; /* Set a max width for images */
+ height: auto; /* Maintain aspect ratio */
+}
+
+.community {
+ margin-top: 100px;
+}
+
+table {
+ margin-top: 100px; /* Moves the table down by 100 pixels */
+}
+.user-info {
+ margin-top: 100px; /* Moves the table down by 100 pixels */
+}
diff --git a/src/main/resources/static/images/index-image-1.jpg b/src/main/resources/static/images/index-image-1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2af0080b0aa0ce51f3604a7eeeebc1be5a928a0e
Binary files /dev/null and b/src/main/resources/static/images/index-image-1.jpg differ
diff --git a/src/main/resources/static/images/index-image-2.jpg b/src/main/resources/static/images/index-image-2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..eccdff3a9e43100ef31d802f85b0df782c9a912a
Binary files /dev/null and b/src/main/resources/static/images/index-image-2.jpg differ
diff --git a/src/main/resources/static/images/photo.jpg b/src/main/resources/static/images/photo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dd46d85fbe5457749b7b6a44bf4b8fea45531625
Binary files /dev/null and b/src/main/resources/static/images/photo.jpg differ
diff --git a/src/main/resources/templates/page/groupList.html b/src/main/resources/templates/page/groupList.html
index 3aed9ee1c9987070b2ce790ef0982cfd880dd917..b1ef9f7f359498c2ebd30f97287aa310b2779f46 100644
--- a/src/main/resources/templates/page/groupList.html
+++ b/src/main/resources/templates/page/groupList.html
@@ -1,10 +1,46 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
+ <link rel="stylesheet" href="../../css/index.css">
+ <link rel="stylesheet" href="../../css/reset.css">
+ <script src="../static/lib/jquery.js"></script>
</head>
<body>
- <div>groupList</div>
+<header class="header">
+ <div class="logo-section">
+ <img th:src="@{/images/logo.jpg}" alt="Logo">
+ </div>
+ <nav class="nav">
+ <ul>
+ <li><a th:href="@{/index}">Index</a></li>
+ <li><a th:href="@{/groupList}">GroupList</a></li>
+ <li><a th:href="@{/itemForm}">Shelf Item</a></li>
+ <li><a th:href="@{/personalInformation}">Personal Information</a></li>
+ </ul>
+ </nav>
+</header>
+<body>
+ <div>Group List</div>
+ <div class="community" id="bridge-street-exchange">
+ <h2><a th:href="@{/itemList}">Bridge Street Exchange</a></h2>
+ <p>Bridge Street Exchange is a vibrant community hub where residents gather to share resources, ideas, and support one another. With a focus on collaboration and innovation, it offers various programs and events for all ages.</p>
+ </div>
+
+ <div class="community" id="city-heights">
+ <h2><a th:href="@{/itemList}">City Heights</a></h2>
+ <p>City Heights is known for its diverse population and rich cultural heritage. The community fosters inclusivity and offers numerous activities that celebrate the arts, food, and traditions of its residents.</p>
+ </div>
+
+ <div class="community" id="windsor-house">
+ <h2><a th:href="@{/itemList}">Windsor House</a></h2>
+ <p>Windsor House is a cozy community that emphasizes a strong sense of belonging. With a variety of social events and neighborhood gatherings, residents find it easy to connect and create lasting friendships.</p>
+ </div>
+
+ <div class="community" id="west-wing">
+ <h2><a th:href="@{/itemList}">West Wing</a></h2>
+ <p>West Wing is an emerging community focused on sustainability and environmental awareness. Residents are actively involved in green initiatives and work together to create a more sustainable living environment.</p>
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/page/index.html b/src/main/resources/templates/page/index.html
index b3f8316c730a467fcf87e9bd02ba1ac0f29ee514..f3deb788f29e21675229b63d5b4d0f40b8c9f7af 100644
--- a/src/main/resources/templates/page/index.html
+++ b/src/main/resources/templates/page/index.html
@@ -8,18 +8,36 @@
<script src="../static/lib/jquery.js"></script>
</head>
<body>
-<header class="safe">
- <div>
- <img th:src="@{/images/logo.jpg}" alt="Logo" width="50" height="50">
+<header class="header">
+ <div class="logo-section">
+ <img th:src="@{/images/logo.jpg}" alt="Logo">
</div>
- <div class="l">
+ <nav class="nav">
<ul>
- <li><a th:href="@{/index.html}">Index</a></li>
- <li><a th:href="@{/groupList.html}">GroupList</a></li>
- <li><a th:href="@{/itemForm.html}">ShelfItem</a></li>
- <li><a th:href="@{/personalInformation.html}">PersonalInformation</a></li>
+ <li><a th:href="@{/index}">Index</a></li>
+ <li><a th:href="@{/groupList}">GroupList</a></li>
+ <li><a th:href="@{/itemList}">Shelf Item</a></li>
+ <li><a th:href="@{/personalInformation}">Personal Information</a></li>
</ul>
- </div>
+ </nav>
</header>
-</body>
+<main>
+ <div class="content">
+ <h1>Welcome to our Swapping System</h1>
+ <p>
+ In a world increasingly focused on sustainability and minimalism, the idea of swapping goods has emerged as a practical and eco-friendly solution for individuals looking to declutter their lives. Our Community Swapping System is designed to facilitate the exchange of old items among community members, promoting a culture of reuse and connection.
+
+ This platform allows users to trade items they no longer need—whether clothing, electronics, furniture, or books—creating a vibrant marketplace of second-hand goods. By connecting people within local neighborhoods, we not only reduce waste but also foster community spirit and strengthen social ties.
+
+ Participants can easily list their items, browse available offerings, and negotiate swaps with others. The system encourages responsible consumption, helps individuals save money, and provides an opportunity to find new homes for beloved items that may no longer serve a purpose. Join us in building a sustainable community where giving and receiving becomes a shared experience, transforming the way we think about ownership and consumption. Together, we can make a difference—one swap at a time.
+ </p>
+
+ <div class="image-container">
+ <img th:src="@{/images/index-image-1.jpg}" alt="Left image" class="description-image">
+ <img th:src="@{/images/index-image-2.jpg}" alt="Right image" class="description-image">
+ </div>
+ </div>
+
+</main>
+
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/page/itemList.html b/src/main/resources/templates/page/itemList.html
index e44c4cec462c4d9e7d827e0492500464c79ee4f1..424becd049edd1c75625ceccefd1a572779d0330 100644
--- a/src/main/resources/templates/page/itemList.html
+++ b/src/main/resources/templates/page/itemList.html
@@ -1,26 +1,48 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
+ <link rel="stylesheet" href="../../css/index.css">
+ <link rel="stylesheet" href="../../css/reset.css">
+ <script src="../static/lib/jquery.js"></script>
</head>
+<body>
+<header class="header">
+ <div class="logo-section">
+ <img th:src="@{/images/logo.jpg}" alt="Logo">
+ </div>
+ <nav class="nav">
+ <ul>
+ <li><a th:href="@{/index}">Index</a></li>
+ <li><a th:href="@{/groupList}">GroupList</a></li>
+ <li><a th:href="@{/itemForm}">Shelf Item</a></li>
+ <li><a th:href="@{/personalInformation}">Personal Information</a></li>
+ </ul>
+ </nav>
+</header>
<body>
<div>itemList</div>
+ <div>
<table>
- <!--thead-->
+
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>description</th>
+ <th>exchangeOrNot</th>
+ <th>moneyOrNot</th>
</tr>
</thead>
- <!-- tbody -->
+
<tbody>
<tr th:each="exchangeItem,iStat : ${exchangeItems}">
<td th:text="${iStat.index}"></td>
<td th:text="${exchangeItem.name}"></td>
<td th:text="${exchangeItem.description}"></td>
+ <td th:text="${exchangeItem.exchangeOrNot}"></td>
+ <td th:text="${exchangeItem.moneyOrNot}"></td>
<td>
<button><a th:href="@{/exchange/{link} (link=${exchangeItem.id})}" style="text-decoration: none">
seeDetails
@@ -29,6 +51,7 @@
</tr>
</tbody>
</table>
+ </div>
<a href="/exchange/add"><button>add items</button></a>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/page/personalInformation.html b/src/main/resources/templates/page/personalInformation.html
index 4928f68280f0e903a5dc1812fd82c03caa18fa97..2ce4c80c1dde0c5cff4a145efbd326425e8b3e0e 100644
--- a/src/main/resources/templates/page/personalInformation.html
+++ b/src/main/resources/templates/page/personalInformation.html
@@ -1,10 +1,44 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
+ <link rel="stylesheet" href="../../css/index.css">
+ <link rel="stylesheet" href="../../css/reset.css">
+ <script src="../static/lib/jquery.js"></script>
</head>
<body>
- <div>personalInformation</div>
+<header class="header">
+ <div class="logo-section">
+ <img th:src="@{/images/logo.jpg}" alt="Logo">
+ </div>
+ <nav class="nav">
+ <ul>
+ <li><a th:href="@{/index}">Index</a></li>
+ <li><a th:href="@{/groupList}">GroupList</a></li>
+ <li><a th:href="@{/itemList}">Shelf Item</a></li>
+ <li><a th:href="@{/personalInformation}">Personal Information</a></li>
+ </ul>
+ </nav>
+</header>
+<body>
+<div class="user-info">
+ <h1>Personal Information</h1>
+ <p><strong>Name:</strong> Ian Cooper</p>
+ <img src="../../images/photo.jpg" alt="Ian Cooper" style="max-width: 200px; border-radius: 10px;">
+ <p><strong>Email:</strong> CooperIM@cardiff.ac.uk</p>
+ <p><strong>Phone:</strong> +44 29206 88798</p>
+ <p><strong>Address:</strong> Abacws, Room 2.64, Senghennydd Road, Cathays, Cardiff, CF24 4AG</p>
+
+ <h2>About Me</h2>
+ <p>I am a lecturer at the National Software Academy in the School of Computer Science and Informatics. My research interests include Distributed and High performance computing. And I have also been awarded grants for work on Augmented Conversation – using conversation to generate temporal search terms.</p>
+ <h2>Interests</h2>
+ <ul>
+ <li>Coding</li>
+ <li>Traveling</li>
+ <li>Reading</li>
+ <li>Photography</li>
+ </ul>
+</div>
</body>
-</html>
\ No newline at end of file
+</html>