Skip to content
Snippets Groups Projects
Commit c4af1df4 authored by Xiemuqing Xiao's avatar Xiemuqing Xiao
Browse files

XXMQ

parent 35fe62c7
No related branches found
No related tags found
1 merge request!1Dev
Hide whitespace changes
Inline Side-by-side
Showing
with 234 additions and 21 deletions
src/main/java/uk/ac/cf/spring/demo/takeaway/index/IndexController.java
+ 28
− 1
View file @ c4af1df4
......@@ -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;
}
}
src/main/resources/static/css/index.css
+ 77
− 2
View file @ c4af1df4
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 */
}
src/main/resources/static/images/index-image-1.jpg 0 → 100644
+ 0
− 0
View file @ c4af1df4
src/main/resources/static/images/index-image-1.jpg

226 KiB

src/main/resources/static/images/index-image-2.jpg 0 → 100644
+ 0
− 0
View file @ c4af1df4
src/main/resources/static/images/index-image-2.jpg

258 KiB

src/main/resources/static/images/photo.jpg 0 → 100644
+ 0
− 0
View file @ c4af1df4
src/main/resources/static/images/photo.jpg

12.2 KiB

src/main/resources/templates/page/groupList.html
+ 38
− 2
View file @ c4af1df4
<!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
src/main/resources/templates/page/index.html
+ 28
− 10
View file @ c4af1df4
......@@ -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
src/main/resources/templates/page/itemList.html
+ 26
− 3
View file @ c4af1df4
<!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
src/main/resources/templates/page/personalInformation.html
+ 37
− 3
View file @ c4af1df4
<!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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment