From ab656c7b794fcdf689f80e25cb77ca53b474ba7c Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Sat, 14 Dec 2024 17:39:41 +0900 Subject: [PATCH 01/22] Feature: Upload challenge_success 80% --- .../templates/challenge_success 80%.html | 207 ++++++++++++++++++ 1 file changed, 207 insertions(+) create mode 100644 src/main/resources/templates/challenge_success 80%.html diff --git a/src/main/resources/templates/challenge_success 80%.html b/src/main/resources/templates/challenge_success 80%.html new file mode 100644 index 0000000..83557f7 --- /dev/null +++ b/src/main/resources/templates/challenge_success 80%.html @@ -0,0 +1,207 @@ + + + + + + + + + My Framer Site + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+

+ Drinking 2L of water +

+
+
+

+ D-DAY +

+
+
+
+
+

+ Out of 50 days of challenges, +

+

+ 40 days of challenges are successful +

+
+
+

+ 10/19, 2024 - 12/7, 2024 +

+
+
+

+ 80% success +

+

+ rate achieved! +

+
+
+

+ If the result is unsatisfactory, you can try again! +

+
+
+
+
+
+ + + + + + + + From 0c9d68de8690b3a6371ca6fb901c59d48f253f32 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Sat, 14 Dec 2024 17:40:54 +0900 Subject: [PATCH 02/22] Feature: Upload challenge_success 100% --- .../templates/challenge_success 100%.html | 204 ++++++++++++++++++ 1 file changed, 204 insertions(+) create mode 100644 src/main/resources/templates/challenge_success 100%.html diff --git a/src/main/resources/templates/challenge_success 100%.html b/src/main/resources/templates/challenge_success 100%.html new file mode 100644 index 0000000..51b2fdf --- /dev/null +++ b/src/main/resources/templates/challenge_success 100%.html @@ -0,0 +1,204 @@ + + + + + + + + + My Framer Site + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+

+ Drinking 2L of water +

+
+
+

+ D-DAY +

+
+
+
+
+

+ Out of 50 days of challenges, +

+

+ 50 days of challenges are successful +

+
+
+

+ 10/19, 2024 - 12/7, 2024 +

+
+
+

+ 100% success rate achieved! +

+
+
+

Congratulations!

+
+
+
+
+
+ + + + + + + + From 265681c6b1dc26758116dd55ff032d4f90e6e40b Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Sat, 14 Dec 2024 17:42:50 +0900 Subject: [PATCH 03/22] Feature: Upload challenge record 50days --- .../templates/challenge_record50.html | 1453 +++++++++++++++++ 1 file changed, 1453 insertions(+) create mode 100644 src/main/resources/templates/challenge_record50.html diff --git a/src/main/resources/templates/challenge_record50.html b/src/main/resources/templates/challenge_record50.html new file mode 100644 index 0000000..ad33968 --- /dev/null +++ b/src/main/resources/templates/challenge_record50.html @@ -0,0 +1,1453 @@ + + + + + + + + + My Framer Site + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+

+ Drinking 2L of water +

+
+
+

+ D-1 +

+
+
+
+
+
+
+

+ The 50-day challenge +

+

+ from October 19, 2024 +

+

+ to December 7, 2024 +

+
+
+
+
+
+

DAY 40

+
+
+
+ +
+
+
+
+

DAY 39

+
+
+
+ +
+
+
+
+

DAY 38

+
+
+
+ +
+
+
+
+

DAY 37

+
+
+
+ +
+
+
+
+

DAY 36

+
+
+
+ +
+
+
+
+

DAY 35

+
+
+
+ +
+
+
+
+

DAY 34

+
+
+
+ +
+
+
+
+

DAY 33

+
+
+
+ +
+
+
+
+

DAY 32

+
+
+
+ +
+
+
+
+

DAY 31

+
+
+
+ +
+
+
+
+
+
+

DAY 30

+
+
+
+ +
+
+
+
+

DAY 29

+
+
+
+ +
+
+
+
+

DAY 28

+
+
+
+ +
+
+
+
+

DAY 27

+
+
+
+ +
+
+
+
+

DAY 26

+
+
+
+ +
+
+
+
+

DAY 25

+
+
+
+ +
+
+
+
+

DAY 24

+
+
+
+ +
+
+
+
+

DAY 23

+
+
+
+ +
+
+
+
+

DAY 22

+
+
+
+ +
+
+
+
+

DAY 21

+
+
+
+ +
+
+
+
+
+
+

DAY 20

+
+
+
+ +
+
+
+
+

DAY 19

+
+
+
+ +
+
+
+
+

DAY 18

+
+
+
+ +
+
+
+
+

DAY 17

+
+
+
+ +
+
+
+
+

DAY 16

+
+
+
+ +
+
+
+
+

DAY 15

+
+
+
+ +
+
+
+
+

DAY 14

+
+
+
+ +
+
+
+
+

DAY 13

+
+
+
+ +
+
+
+
+

DAY 12

+
+
+
+ +
+
+
+
+

DAY 11

+
+
+
+ +
+
+
+
+
+
+

DAY 10

+
+
+
+ +
+
+
+
+

DAY 9

+
+
+
+ +
+
+
+
+

DAY 8

+
+
+
+ +
+
+
+
+

DAY 7

+
+
+
+ +
+
+
+
+

DAY 6

+
+
+
+ +
+
+
+
+

DAY 5

+
+
+
+ +
+
+
+
+

DAY 4

+
+
+
+ +
+
+
+
+

DAY 3

+
+
+
+ +
+
+
+
+

DAY 2

+
+
+
+ +
+
+
+
+

DAY 1

+
+
+
+ +
+
+
+
+
+
+

DAY 50

+
+
+
+
+
+

DAY 49

+
+
+
+
+ +
+
+
+
+
+

DAY 48

+
+
+
+ +
+
+
+
+

DAY 47

+
+
+
+ +
+
+
+
+

DAY 46

+
+
+
+ +
+
+
+
+

DAY 45

+
+
+
+ +
+
+
+
+

DAY 44

+
+
+
+ +
+
+
+
+

DAY 43

+
+
+
+ +
+
+
+
+

DAY 42

+
+
+
+ +
+
+
+
+

DAY 41

+
+
+
+ +
+
+
+
+
+
+
+
+ + + + + + + + From 5fe5a716b2acd7e9ec009b9daa18be239e29c0b3 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 21:42:13 +0900 Subject: [PATCH 04/22] Delete src/main/resources/templates/challenge_record50.html --- .../templates/challenge_record50.html | 1453 ----------------- 1 file changed, 1453 deletions(-) delete mode 100644 src/main/resources/templates/challenge_record50.html diff --git a/src/main/resources/templates/challenge_record50.html b/src/main/resources/templates/challenge_record50.html deleted file mode 100644 index ad33968..0000000 --- a/src/main/resources/templates/challenge_record50.html +++ /dev/null @@ -1,1453 +0,0 @@ - - - - - - - - - My Framer Site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
- -
-
-
-
-

- Drinking 2L of water -

-
-
-

- D-1 -

-
-
-
-
-
-
-

- The 50-day challenge -

-

- from October 19, 2024 -

-

- to December 7, 2024 -

-
-
-
-
-
-

DAY 40

-
-
-
- -
-
-
-
-

DAY 39

-
-
-
- -
-
-
-
-

DAY 38

-
-
-
- -
-
-
-
-

DAY 37

-
-
-
- -
-
-
-
-

DAY 36

-
-
-
- -
-
-
-
-

DAY 35

-
-
-
- -
-
-
-
-

DAY 34

-
-
-
- -
-
-
-
-

DAY 33

-
-
-
- -
-
-
-
-

DAY 32

-
-
-
- -
-
-
-
-

DAY 31

-
-
-
- -
-
-
-
-
-
-

DAY 30

-
-
-
- -
-
-
-
-

DAY 29

-
-
-
- -
-
-
-
-

DAY 28

-
-
-
- -
-
-
-
-

DAY 27

-
-
-
- -
-
-
-
-

DAY 26

-
-
-
- -
-
-
-
-

DAY 25

-
-
-
- -
-
-
-
-

DAY 24

-
-
-
- -
-
-
-
-

DAY 23

-
-
-
- -
-
-
-
-

DAY 22

-
-
-
- -
-
-
-
-

DAY 21

-
-
-
- -
-
-
-
-
-
-

DAY 20

-
-
-
- -
-
-
-
-

DAY 19

-
-
-
- -
-
-
-
-

DAY 18

-
-
-
- -
-
-
-
-

DAY 17

-
-
-
- -
-
-
-
-

DAY 16

-
-
-
- -
-
-
-
-

DAY 15

-
-
-
- -
-
-
-
-

DAY 14

-
-
-
- -
-
-
-
-

DAY 13

-
-
-
- -
-
-
-
-

DAY 12

-
-
-
- -
-
-
-
-

DAY 11

-
-
-
- -
-
-
-
-
-
-

DAY 10

-
-
-
- -
-
-
-
-

DAY 9

-
-
-
- -
-
-
-
-

DAY 8

-
-
-
- -
-
-
-
-

DAY 7

-
-
-
- -
-
-
-
-

DAY 6

-
-
-
- -
-
-
-
-

DAY 5

-
-
-
- -
-
-
-
-

DAY 4

-
-
-
- -
-
-
-
-

DAY 3

-
-
-
- -
-
-
-
-

DAY 2

-
-
-
- -
-
-
-
-

DAY 1

-
-
-
- -
-
-
-
-
-
-

DAY 50

-
-
-
-
-
-

DAY 49

-
-
-
-
- -
-
-
-
-
-

DAY 48

-
-
-
- -
-
-
-
-

DAY 47

-
-
-
- -
-
-
-
-

DAY 46

-
-
-
- -
-
-
-
-

DAY 45

-
-
-
- -
-
-
-
-

DAY 44

-
-
-
- -
-
-
-
-

DAY 43

-
-
-
- -
-
-
-
-

DAY 42

-
-
-
- -
-
-
-
-

DAY 41

-
-
-
- -
-
-
-
-
-
-
-
- - - - - - - - From 3d7074242166729c648b7371b16b5b148a739d92 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 21:52:45 +0900 Subject: [PATCH 05/22] Delete src/main/resources/templates/challenge_success 100%.html --- .../templates/challenge_success 100%.html | 204 ------------------ 1 file changed, 204 deletions(-) delete mode 100644 src/main/resources/templates/challenge_success 100%.html diff --git a/src/main/resources/templates/challenge_success 100%.html b/src/main/resources/templates/challenge_success 100%.html deleted file mode 100644 index 51b2fdf..0000000 --- a/src/main/resources/templates/challenge_success 100%.html +++ /dev/null @@ -1,204 +0,0 @@ - - - - - - - - - My Framer Site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-

- Drinking 2L of water -

-
-
-

- D-DAY -

-
-
-
-
-

- Out of 50 days of challenges, -

-

- 50 days of challenges are successful -

-
-
-

- 10/19, 2024 - 12/7, 2024 -

-
-
-

- 100% success rate achieved! -

-
-
-

Congratulations!

-
-
-
-
-
- - - - - - - - From 57f7932423f366c033aca05e4d39b2ba66fb0968 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 21:52:54 +0900 Subject: [PATCH 06/22] Delete src/main/resources/templates/challenge_success 80%.html --- .../templates/challenge_success 80%.html | 207 ------------------ 1 file changed, 207 deletions(-) delete mode 100644 src/main/resources/templates/challenge_success 80%.html diff --git a/src/main/resources/templates/challenge_success 80%.html b/src/main/resources/templates/challenge_success 80%.html deleted file mode 100644 index 83557f7..0000000 --- a/src/main/resources/templates/challenge_success 80%.html +++ /dev/null @@ -1,207 +0,0 @@ - - - - - - - - - My Framer Site - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-

- Drinking 2L of water -

-
-
-

- D-DAY -

-
-
-
-
-

- Out of 50 days of challenges, -

-

- 40 days of challenges are successful -

-
-
-

- 10/19, 2024 - 12/7, 2024 -

-
-
-

- 80% success -

-

- rate achieved! -

-
-
-

- If the result is unsatisfactory, you can try again! -

-
-
-
-
-
- - - - - - - - From 7c74a2110d31b586ec669420325437e575689c32 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:30:41 +0900 Subject: [PATCH 07/22] Feature: Upload Challenge_End_Page with comments --- .../resources/templates/Challenge_Endpage.css | 117 ++++++++++++++++++ .../templates/Challenge_Endpage.html | 43 +++++++ .../resources/templates/Challenge_Endpage.js | 43 +++++++ 3 files changed, 203 insertions(+) create mode 100644 src/main/resources/templates/Challenge_Endpage.css create mode 100644 src/main/resources/templates/Challenge_Endpage.html create mode 100644 src/main/resources/templates/Challenge_Endpage.js diff --git a/src/main/resources/templates/Challenge_Endpage.css b/src/main/resources/templates/Challenge_Endpage.css new file mode 100644 index 0000000..6293d70 --- /dev/null +++ b/src/main/resources/templates/Challenge_Endpage.css @@ -0,0 +1,117 @@ +/* 전체 페이지 스타일 */ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #f1f3f9; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} + +/* 홈버튼 스타일 */ +header { + position: absolute; + top: 10px; + left: 10px; +} + +#homeButton { + padding: 10px 20px; + font-size: 16px; + background-color: #6FD1C5; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#homeButton:hover { + background-color: #5BAA9D; +} + +/* 중앙 컨테이너 */ +main { + text-align: center; + width: 100%; + max-width: 600px; +} + +/* 상단 제목 */ +.header-container h2 { + font-size: 22px; + color: #333; + margin-bottom: 10px; +} + +.header-container h1 { + font-size: 48px; + color: #555; + font-weight: bold; + margin: 5px 0; +} + +.dates { + font-size: 16px; + color: #757575; + margin-bottom: 30px; +} + +/* 성공률 박스 */ +.success-box { + position: relative; + background-color: white; + border-radius: 15px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + padding: 30px; + margin: 0 auto; + text-align: center; + max-width: 400px; +} + +.blue-gradient-circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + background: radial-gradient(circle, rgba(181, 214, 249, 0.7), transparent); + border-radius: 50%; + z-index: 0; + filter: blur(15px); +} + +.challenge-text { + font-size: 16px; + color: #555; + margin: 10px 0; + position: relative; + z-index: 1; +} + +.success-text { + position: relative; + z-index: 1; + font-size: 28px; + font-weight: bold; + color: #000; + margin: 20px 0 10px; +} + +.message { + font-size: 14px; + color: #888; + margin-top: 10px; + position: relative; + z-index: 1; +} + +.message.success-message { + color: #28a745; /* 초록색 */ + font-size: 26px; + font-weight: bold; + margin-top: 20px; +} diff --git a/src/main/resources/templates/Challenge_Endpage.html b/src/main/resources/templates/Challenge_Endpage.html new file mode 100644 index 0000000..d6caa70 --- /dev/null +++ b/src/main/resources/templates/Challenge_Endpage.html @@ -0,0 +1,43 @@ + + + + + + Challenge Success Rate + + + + +
+ +
+ +
+ +
+

Your Challenge

+

D - N/A

+

N/A - N/A

+
+ + +
+
+

+ Out of 50 days of challenges, +

+

+ 0 days of challenges are successful +

+ + +
0.00% success
+ + +

+
+
+ + + + diff --git a/src/main/resources/templates/Challenge_Endpage.js b/src/main/resources/templates/Challenge_Endpage.js new file mode 100644 index 0000000..8480ea5 --- /dev/null +++ b/src/main/resources/templates/Challenge_Endpage.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", () => { + const challengeId = localStorage.getItem("challenge_id"); // Get the challenge ID + + if (!challengeId) { + alert("No challenge selected."); + return; + } + + // Fetch challenge data from API + fetch(`/api/v1/challenges/${challengeId}`) + .then(response => { + if (!response.ok) { + throw new Error("Failed to fetch challenge data."); + } + return response.json(); + }) + .then(data => { + // Destructure data from the API + const { title, duration, start_date, finished_at, count, remaining_days, progress_rate } = data; + + // Update the DOM with challenge data + document.getElementById("challengeTitle").textContent = title || "Your Challenge"; + document.getElementById("remainingDays").textContent = remaining_days || "N/A"; + document.getElementById("challengeDates").textContent = `${start_date || "N/A"} - ${finished_at || "N/A"}`; + document.getElementById("totalDays").textContent = duration || 0; + document.getElementById("completedDays").textContent = count || 0; + document.getElementById("successRate").textContent = `${progress_rate || 0}% success`; + + // Conditional success message + const messageElement = document.getElementById("resultMessage"); + if (parseFloat(progress_rate) === 100) { + messageElement.textContent = "Congratulations!"; + messageElement.classList.add("success-message"); + } else { + messageElement.innerHTML = `If the result is unsatisfactory, you can try again!`; + messageElement.classList.remove("success-message"); + } + }) + .catch(error => { + console.error("Error fetching challenge data:", error); + alert("Failed to load data from the server."); + }); +}); From f9d3d331c8276d706297fb8ef246ce3f0ca87161 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:33:37 +0900 Subject: [PATCH 08/22] Feature: Check Challenge Details --- .../templates/Challenge_Details_Check.css | 114 ++++++++++++++++++ .../templates/Challenge_Details_Check.html | 47 ++++++++ .../templates/Challenge_Details_Check.js | 99 +++++++++++++++ 3 files changed, 260 insertions(+) create mode 100644 src/main/resources/templates/Challenge_Details_Check.css create mode 100644 src/main/resources/templates/Challenge_Details_Check.html create mode 100644 src/main/resources/templates/Challenge_Details_Check.js diff --git a/src/main/resources/templates/Challenge_Details_Check.css b/src/main/resources/templates/Challenge_Details_Check.css new file mode 100644 index 0000000..2f98503 --- /dev/null +++ b/src/main/resources/templates/Challenge_Details_Check.css @@ -0,0 +1,114 @@ +/* 전체 페이지 스타일 */ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #F8FAFD; +} + +/* 홈 버튼 스타일 */ +header { + position: absolute; + top: 20px; + left: 20px; +} + +#homeButton { + padding: 10px 20px; + font-size: 16px; + background-color: #6FD1C5; + color: #FFF; + border: none; + border-radius: 6px; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + transition: transform 0.2s, box-shadow 0.2s; +} + +#homeButton:hover { + transform: translateY(-3px); + box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); +} + +/* 메인 컨테이너: 왼쪽과 오른쪽 배치 */ +.main-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1000px; + margin: 80px auto 20px; + padding: 0 20px; +} + +.left-section { + text-align: left; + flex: 1; +} + +.left-section h2 { + font-size: 2rem; + font-weight: bold; + color: #333; +} + +.left-section h1 { + font-size: 3rem; + color: #6FD1C5; + margin: 10px 0; +} + +.right-section { + text-align: right; + flex: 1; +} + +.right-section p { + font-size: 1.2rem; + color: #555; + margin: 5px 0; +} + +.challenge-days { + font-size: 1.8rem; + font-weight: bold; + color: #444; +} + +.challenge-dates { + font-size: 1.5rem; + font-weight: bold; + color: #555; +} + +/* 챌린지 일별 버튼 스타일 */ +.challenge-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 15px; + padding: 20px; + max-width: 800px; + margin: 0 auto; +} + +.challenge-box { + background-color: #FFFFFF; + border: 2px solid #DDDDDD; + border-radius: 10px; + padding: 15px; + text-align: center; + font-weight: bold; + color: #333; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.2s, box-shadow 0.2s; +} + +.challenge-box:hover { + transform: translateY(-5px); + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); +} + +.challenge-box.checked { + background-color: #6FD1C5; + color: #FFFFFF; +} diff --git a/src/main/resources/templates/Challenge_Details_Check.html b/src/main/resources/templates/Challenge_Details_Check.html new file mode 100644 index 0000000..1312de4 --- /dev/null +++ b/src/main/resources/templates/Challenge_Details_Check.html @@ -0,0 +1,47 @@ + + + + + + Challenge Page + + + + +
+ +
+ + +
+ +
+

Your Challenge

+

D - N/A

+
+ + +
+

+ The 50 days challenge +

+

+ from N/A +

+

+ to N/A +

+
+
+ + +
+ +
+
+
+ + + diff --git a/src/main/resources/templates/Challenge_Details_Check.js b/src/main/resources/templates/Challenge_Details_Check.js new file mode 100644 index 0000000..1a9eff2 --- /dev/null +++ b/src/main/resources/templates/Challenge_Details_Check.js @@ -0,0 +1,99 @@ +document.addEventListener("DOMContentLoaded", () => { + const challengeContainer = document.getElementById("challenge-container"); + + // 로컬 스토리지에서 challenge_id 가져오기 + const challengeId = localStorage.getItem("challenge_id"); + if (!challengeId) { + alert("챌린지를 선택하지 않았습니다."); + return; + } + + // API 호출로 챌린지 데이터 가져오기 + fetch(`/api/v1/challenges/${challengeId}`) + .then(response => { + if (!response.ok) { + throw new Error("Failed to fetch challenge data"); + } + return response.json(); + }) + .then(data => { + if (data.success) { + const { challengeTitle, totalDays, startDate, endDate, dayStatuses } = data; + + // DOM 업데이트 + document.getElementById("challengeTitle").textContent = challengeTitle || "Your Challenge"; + document.getElementById("challengeDays").textContent = `${totalDays} days`; + document.getElementById("startDate").textContent = startDate || "N/A"; + document.getElementById("endDate").textContent = endDate || "N/A"; + + const today = new Date(); + let remainingDays = "N/A"; + if (endDate) { + const end = new Date(endDate); + if (!isNaN(end.getTime())) { + remainingDays = Math.max(Math.ceil((end - today) / (1000 * 60 * 60 * 24)), 0); + } + } + document.getElementById("remainingDays").textContent = `D - ${remainingDays}`; + + // 챌린지 칸 생성 + renderChallengeBoxes(dayStatuses, challengeContainer); + + // 챌린지 종료 시 성공률 페이지로 이동 + if (remainingDays === 0) { + calculateAndRedirect(dayStatuses); + } + } else { + alert("챌린지 데이터를 불러오는 데 실패했습니다."); + } + }) + .catch(error => { + console.error("Error fetching challenge data:", error); + alert("서버에서 데이터를 가져오지 못했습니다."); + }); +}); + +function renderChallengeBoxes(dayStatuses, container) { + container.innerHTML = ""; // 기존 내용 초기화 + dayStatuses.forEach((status) => { + const dayBox = document.createElement("div"); + dayBox.classList.add("challenge-box"); + dayBox.textContent = `DAY ${status.day}`; + if (status.isCompleted) dayBox.classList.add("checked"); + + // 상태 반전 및 업데이트 + dayBox.addEventListener("click", () => { + status.isCompleted = !status.isCompleted; + dayBox.classList.toggle("checked"); + + // 서버 업데이트 + fetch(`/api/v1/challenges/${challengeId}/day/${status.day}`, { + method: 'PUT', + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ isCompleted: status.isCompleted }) + }); + }); + + container.appendChild(dayBox); + }); +} + +function calculateAndRedirect(dayStatuses) { + const completedDays = dayStatuses.filter(status => status.isCompleted).length; + const totalDays = dayStatuses.length; + + const successRate = ((completedDays / totalDays) * 100).toFixed(2); + + // 성공률 페이지로 데이터 전송 + fetch('/api/v1/challenges/success', { + method: 'POST', + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ completedDays, totalDays, successRate }) + }).then(() => { + window.location.href = "success.html"; // 성공률 페이지로 이동 + }); +} From b0534245a573d04aaffc6ff5406a48ee548b7450 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:41:46 +0900 Subject: [PATCH 09/22] Delete src/main/resources/templates/Challenge_Details_Check.css --- .../templates/Challenge_Details_Check.css | 114 ------------------ 1 file changed, 114 deletions(-) delete mode 100644 src/main/resources/templates/Challenge_Details_Check.css diff --git a/src/main/resources/templates/Challenge_Details_Check.css b/src/main/resources/templates/Challenge_Details_Check.css deleted file mode 100644 index 2f98503..0000000 --- a/src/main/resources/templates/Challenge_Details_Check.css +++ /dev/null @@ -1,114 +0,0 @@ -/* 전체 페이지 스타일 */ -body { - margin: 0; - padding: 0; - font-family: Arial, sans-serif; - background-color: #F8FAFD; -} - -/* 홈 버튼 스타일 */ -header { - position: absolute; - top: 20px; - left: 20px; -} - -#homeButton { - padding: 10px 20px; - font-size: 16px; - background-color: #6FD1C5; - color: #FFF; - border: none; - border-radius: 6px; - cursor: pointer; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); - transition: transform 0.2s, box-shadow 0.2s; -} - -#homeButton:hover { - transform: translateY(-3px); - box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); -} - -/* 메인 컨테이너: 왼쪽과 오른쪽 배치 */ -.main-container { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 1000px; - margin: 80px auto 20px; - padding: 0 20px; -} - -.left-section { - text-align: left; - flex: 1; -} - -.left-section h2 { - font-size: 2rem; - font-weight: bold; - color: #333; -} - -.left-section h1 { - font-size: 3rem; - color: #6FD1C5; - margin: 10px 0; -} - -.right-section { - text-align: right; - flex: 1; -} - -.right-section p { - font-size: 1.2rem; - color: #555; - margin: 5px 0; -} - -.challenge-days { - font-size: 1.8rem; - font-weight: bold; - color: #444; -} - -.challenge-dates { - font-size: 1.5rem; - font-weight: bold; - color: #555; -} - -/* 챌린지 일별 버튼 스타일 */ -.challenge-container { - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: 15px; - padding: 20px; - max-width: 800px; - margin: 0 auto; -} - -.challenge-box { - background-color: #FFFFFF; - border: 2px solid #DDDDDD; - border-radius: 10px; - padding: 15px; - text-align: center; - font-weight: bold; - color: #333; - cursor: pointer; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - transition: transform 0.2s, box-shadow 0.2s; -} - -.challenge-box:hover { - transform: translateY(-5px); - box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); -} - -.challenge-box.checked { - background-color: #6FD1C5; - color: #FFFFFF; -} From 0d5758a89019695deaad805ef11f0cb26f4eeb09 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:41:54 +0900 Subject: [PATCH 10/22] Delete src/main/resources/templates/Challenge_Details_Check.html --- .../templates/Challenge_Details_Check.html | 47 ------------------- 1 file changed, 47 deletions(-) delete mode 100644 src/main/resources/templates/Challenge_Details_Check.html diff --git a/src/main/resources/templates/Challenge_Details_Check.html b/src/main/resources/templates/Challenge_Details_Check.html deleted file mode 100644 index 1312de4..0000000 --- a/src/main/resources/templates/Challenge_Details_Check.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - Challenge Page - - - - -
- -
- - -
- -
-

Your Challenge

-

D - N/A

-
- - -
-

- The 50 days challenge -

-

- from N/A -

-

- to N/A -

-
-
- - -
- -
-
-
- - - From ebe7f34e36a8a6ae1625c884a024b4d45feabc0b Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:42:03 +0900 Subject: [PATCH 11/22] Delete src/main/resources/templates/Challenge_Details_Check.js --- .../templates/Challenge_Details_Check.js | 99 ------------------- 1 file changed, 99 deletions(-) delete mode 100644 src/main/resources/templates/Challenge_Details_Check.js diff --git a/src/main/resources/templates/Challenge_Details_Check.js b/src/main/resources/templates/Challenge_Details_Check.js deleted file mode 100644 index 1a9eff2..0000000 --- a/src/main/resources/templates/Challenge_Details_Check.js +++ /dev/null @@ -1,99 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const challengeContainer = document.getElementById("challenge-container"); - - // 로컬 스토리지에서 challenge_id 가져오기 - const challengeId = localStorage.getItem("challenge_id"); - if (!challengeId) { - alert("챌린지를 선택하지 않았습니다."); - return; - } - - // API 호출로 챌린지 데이터 가져오기 - fetch(`/api/v1/challenges/${challengeId}`) - .then(response => { - if (!response.ok) { - throw new Error("Failed to fetch challenge data"); - } - return response.json(); - }) - .then(data => { - if (data.success) { - const { challengeTitle, totalDays, startDate, endDate, dayStatuses } = data; - - // DOM 업데이트 - document.getElementById("challengeTitle").textContent = challengeTitle || "Your Challenge"; - document.getElementById("challengeDays").textContent = `${totalDays} days`; - document.getElementById("startDate").textContent = startDate || "N/A"; - document.getElementById("endDate").textContent = endDate || "N/A"; - - const today = new Date(); - let remainingDays = "N/A"; - if (endDate) { - const end = new Date(endDate); - if (!isNaN(end.getTime())) { - remainingDays = Math.max(Math.ceil((end - today) / (1000 * 60 * 60 * 24)), 0); - } - } - document.getElementById("remainingDays").textContent = `D - ${remainingDays}`; - - // 챌린지 칸 생성 - renderChallengeBoxes(dayStatuses, challengeContainer); - - // 챌린지 종료 시 성공률 페이지로 이동 - if (remainingDays === 0) { - calculateAndRedirect(dayStatuses); - } - } else { - alert("챌린지 데이터를 불러오는 데 실패했습니다."); - } - }) - .catch(error => { - console.error("Error fetching challenge data:", error); - alert("서버에서 데이터를 가져오지 못했습니다."); - }); -}); - -function renderChallengeBoxes(dayStatuses, container) { - container.innerHTML = ""; // 기존 내용 초기화 - dayStatuses.forEach((status) => { - const dayBox = document.createElement("div"); - dayBox.classList.add("challenge-box"); - dayBox.textContent = `DAY ${status.day}`; - if (status.isCompleted) dayBox.classList.add("checked"); - - // 상태 반전 및 업데이트 - dayBox.addEventListener("click", () => { - status.isCompleted = !status.isCompleted; - dayBox.classList.toggle("checked"); - - // 서버 업데이트 - fetch(`/api/v1/challenges/${challengeId}/day/${status.day}`, { - method: 'PUT', - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ isCompleted: status.isCompleted }) - }); - }); - - container.appendChild(dayBox); - }); -} - -function calculateAndRedirect(dayStatuses) { - const completedDays = dayStatuses.filter(status => status.isCompleted).length; - const totalDays = dayStatuses.length; - - const successRate = ((completedDays / totalDays) * 100).toFixed(2); - - // 성공률 페이지로 데이터 전송 - fetch('/api/v1/challenges/success', { - method: 'POST', - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ completedDays, totalDays, successRate }) - }).then(() => { - window.location.href = "success.html"; // 성공률 페이지로 이동 - }); -} From 6e62b5764d6d26bbee5cf6a07f0b52d679c84243 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:42:13 +0900 Subject: [PATCH 12/22] Delete src/main/resources/templates/Challenge_Endpage.css --- .../resources/templates/Challenge_Endpage.css | 117 ------------------ 1 file changed, 117 deletions(-) delete mode 100644 src/main/resources/templates/Challenge_Endpage.css diff --git a/src/main/resources/templates/Challenge_Endpage.css b/src/main/resources/templates/Challenge_Endpage.css deleted file mode 100644 index 6293d70..0000000 --- a/src/main/resources/templates/Challenge_Endpage.css +++ /dev/null @@ -1,117 +0,0 @@ -/* 전체 페이지 스타일 */ -body { - margin: 0; - padding: 0; - font-family: Arial, sans-serif; - background-color: #f1f3f9; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; -} - -/* 홈버튼 스타일 */ -header { - position: absolute; - top: 10px; - left: 10px; -} - -#homeButton { - padding: 10px 20px; - font-size: 16px; - background-color: #6FD1C5; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; -} - -#homeButton:hover { - background-color: #5BAA9D; -} - -/* 중앙 컨테이너 */ -main { - text-align: center; - width: 100%; - max-width: 600px; -} - -/* 상단 제목 */ -.header-container h2 { - font-size: 22px; - color: #333; - margin-bottom: 10px; -} - -.header-container h1 { - font-size: 48px; - color: #555; - font-weight: bold; - margin: 5px 0; -} - -.dates { - font-size: 16px; - color: #757575; - margin-bottom: 30px; -} - -/* 성공률 박스 */ -.success-box { - position: relative; - background-color: white; - border-radius: 15px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); - padding: 30px; - margin: 0 auto; - text-align: center; - max-width: 400px; -} - -.blue-gradient-circle { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 200px; - height: 200px; - background: radial-gradient(circle, rgba(181, 214, 249, 0.7), transparent); - border-radius: 50%; - z-index: 0; - filter: blur(15px); -} - -.challenge-text { - font-size: 16px; - color: #555; - margin: 10px 0; - position: relative; - z-index: 1; -} - -.success-text { - position: relative; - z-index: 1; - font-size: 28px; - font-weight: bold; - color: #000; - margin: 20px 0 10px; -} - -.message { - font-size: 14px; - color: #888; - margin-top: 10px; - position: relative; - z-index: 1; -} - -.message.success-message { - color: #28a745; /* 초록색 */ - font-size: 26px; - font-weight: bold; - margin-top: 20px; -} From 7eff5d561b03ff761f38680a9ca9e4856dcf8535 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:42:21 +0900 Subject: [PATCH 13/22] Delete src/main/resources/templates/Challenge_Endpage.html --- .../templates/Challenge_Endpage.html | 43 ------------------- 1 file changed, 43 deletions(-) delete mode 100644 src/main/resources/templates/Challenge_Endpage.html diff --git a/src/main/resources/templates/Challenge_Endpage.html b/src/main/resources/templates/Challenge_Endpage.html deleted file mode 100644 index d6caa70..0000000 --- a/src/main/resources/templates/Challenge_Endpage.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - Challenge Success Rate - - - - -
- -
- -
- -
-

Your Challenge

-

D - N/A

-

N/A - N/A

-
- - -
-
-

- Out of 50 days of challenges, -

-

- 0 days of challenges are successful -

- - -
0.00% success
- - -

-
-
- - - - From c9943cf9fa670ad6d18694b00a0f986ff94970c5 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:42:30 +0900 Subject: [PATCH 14/22] Delete src/main/resources/templates/Challenge_Endpage.js --- .../resources/templates/Challenge_Endpage.js | 43 ------------------- 1 file changed, 43 deletions(-) delete mode 100644 src/main/resources/templates/Challenge_Endpage.js diff --git a/src/main/resources/templates/Challenge_Endpage.js b/src/main/resources/templates/Challenge_Endpage.js deleted file mode 100644 index 8480ea5..0000000 --- a/src/main/resources/templates/Challenge_Endpage.js +++ /dev/null @@ -1,43 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const challengeId = localStorage.getItem("challenge_id"); // Get the challenge ID - - if (!challengeId) { - alert("No challenge selected."); - return; - } - - // Fetch challenge data from API - fetch(`/api/v1/challenges/${challengeId}`) - .then(response => { - if (!response.ok) { - throw new Error("Failed to fetch challenge data."); - } - return response.json(); - }) - .then(data => { - // Destructure data from the API - const { title, duration, start_date, finished_at, count, remaining_days, progress_rate } = data; - - // Update the DOM with challenge data - document.getElementById("challengeTitle").textContent = title || "Your Challenge"; - document.getElementById("remainingDays").textContent = remaining_days || "N/A"; - document.getElementById("challengeDates").textContent = `${start_date || "N/A"} - ${finished_at || "N/A"}`; - document.getElementById("totalDays").textContent = duration || 0; - document.getElementById("completedDays").textContent = count || 0; - document.getElementById("successRate").textContent = `${progress_rate || 0}% success`; - - // Conditional success message - const messageElement = document.getElementById("resultMessage"); - if (parseFloat(progress_rate) === 100) { - messageElement.textContent = "Congratulations!"; - messageElement.classList.add("success-message"); - } else { - messageElement.innerHTML = `If the result is unsatisfactory, you can try again!`; - messageElement.classList.remove("success-message"); - } - }) - .catch(error => { - console.error("Error fetching challenge data:", error); - alert("Failed to load data from the server."); - }); -}); From 0314527a6cf5784fb8b689e595fdcafbc5f41726 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:51:46 +0900 Subject: [PATCH 15/22] Feature: Check Challenge Details UI --- .../templates/Challenge_Details_Check.css | 114 ++++++++++++++++++ .../templates/Challenge_Details_Check.html | 47 ++++++++ .../templates/Challenge_Details_Check.js | 99 +++++++++++++++ 3 files changed, 260 insertions(+) create mode 100644 src/main/resources/templates/Challenge_Details_Check.css create mode 100644 src/main/resources/templates/Challenge_Details_Check.html create mode 100644 src/main/resources/templates/Challenge_Details_Check.js diff --git a/src/main/resources/templates/Challenge_Details_Check.css b/src/main/resources/templates/Challenge_Details_Check.css new file mode 100644 index 0000000..2f98503 --- /dev/null +++ b/src/main/resources/templates/Challenge_Details_Check.css @@ -0,0 +1,114 @@ +/* 전체 페이지 스타일 */ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #F8FAFD; +} + +/* 홈 버튼 스타일 */ +header { + position: absolute; + top: 20px; + left: 20px; +} + +#homeButton { + padding: 10px 20px; + font-size: 16px; + background-color: #6FD1C5; + color: #FFF; + border: none; + border-radius: 6px; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + transition: transform 0.2s, box-shadow 0.2s; +} + +#homeButton:hover { + transform: translateY(-3px); + box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); +} + +/* 메인 컨테이너: 왼쪽과 오른쪽 배치 */ +.main-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1000px; + margin: 80px auto 20px; + padding: 0 20px; +} + +.left-section { + text-align: left; + flex: 1; +} + +.left-section h2 { + font-size: 2rem; + font-weight: bold; + color: #333; +} + +.left-section h1 { + font-size: 3rem; + color: #6FD1C5; + margin: 10px 0; +} + +.right-section { + text-align: right; + flex: 1; +} + +.right-section p { + font-size: 1.2rem; + color: #555; + margin: 5px 0; +} + +.challenge-days { + font-size: 1.8rem; + font-weight: bold; + color: #444; +} + +.challenge-dates { + font-size: 1.5rem; + font-weight: bold; + color: #555; +} + +/* 챌린지 일별 버튼 스타일 */ +.challenge-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 15px; + padding: 20px; + max-width: 800px; + margin: 0 auto; +} + +.challenge-box { + background-color: #FFFFFF; + border: 2px solid #DDDDDD; + border-radius: 10px; + padding: 15px; + text-align: center; + font-weight: bold; + color: #333; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.2s, box-shadow 0.2s; +} + +.challenge-box:hover { + transform: translateY(-5px); + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); +} + +.challenge-box.checked { + background-color: #6FD1C5; + color: #FFFFFF; +} diff --git a/src/main/resources/templates/Challenge_Details_Check.html b/src/main/resources/templates/Challenge_Details_Check.html new file mode 100644 index 0000000..1312de4 --- /dev/null +++ b/src/main/resources/templates/Challenge_Details_Check.html @@ -0,0 +1,47 @@ + + + + + + Challenge Page + + + + +
+ +
+ + +
+ +
+

Your Challenge

+

D - N/A

+
+ + +
+

+ The 50 days challenge +

+

+ from N/A +

+

+ to N/A +

+
+
+ + +
+ +
+
+
+ + + diff --git a/src/main/resources/templates/Challenge_Details_Check.js b/src/main/resources/templates/Challenge_Details_Check.js new file mode 100644 index 0000000..1a9eff2 --- /dev/null +++ b/src/main/resources/templates/Challenge_Details_Check.js @@ -0,0 +1,99 @@ +document.addEventListener("DOMContentLoaded", () => { + const challengeContainer = document.getElementById("challenge-container"); + + // 로컬 스토리지에서 challenge_id 가져오기 + const challengeId = localStorage.getItem("challenge_id"); + if (!challengeId) { + alert("챌린지를 선택하지 않았습니다."); + return; + } + + // API 호출로 챌린지 데이터 가져오기 + fetch(`/api/v1/challenges/${challengeId}`) + .then(response => { + if (!response.ok) { + throw new Error("Failed to fetch challenge data"); + } + return response.json(); + }) + .then(data => { + if (data.success) { + const { challengeTitle, totalDays, startDate, endDate, dayStatuses } = data; + + // DOM 업데이트 + document.getElementById("challengeTitle").textContent = challengeTitle || "Your Challenge"; + document.getElementById("challengeDays").textContent = `${totalDays} days`; + document.getElementById("startDate").textContent = startDate || "N/A"; + document.getElementById("endDate").textContent = endDate || "N/A"; + + const today = new Date(); + let remainingDays = "N/A"; + if (endDate) { + const end = new Date(endDate); + if (!isNaN(end.getTime())) { + remainingDays = Math.max(Math.ceil((end - today) / (1000 * 60 * 60 * 24)), 0); + } + } + document.getElementById("remainingDays").textContent = `D - ${remainingDays}`; + + // 챌린지 칸 생성 + renderChallengeBoxes(dayStatuses, challengeContainer); + + // 챌린지 종료 시 성공률 페이지로 이동 + if (remainingDays === 0) { + calculateAndRedirect(dayStatuses); + } + } else { + alert("챌린지 데이터를 불러오는 데 실패했습니다."); + } + }) + .catch(error => { + console.error("Error fetching challenge data:", error); + alert("서버에서 데이터를 가져오지 못했습니다."); + }); +}); + +function renderChallengeBoxes(dayStatuses, container) { + container.innerHTML = ""; // 기존 내용 초기화 + dayStatuses.forEach((status) => { + const dayBox = document.createElement("div"); + dayBox.classList.add("challenge-box"); + dayBox.textContent = `DAY ${status.day}`; + if (status.isCompleted) dayBox.classList.add("checked"); + + // 상태 반전 및 업데이트 + dayBox.addEventListener("click", () => { + status.isCompleted = !status.isCompleted; + dayBox.classList.toggle("checked"); + + // 서버 업데이트 + fetch(`/api/v1/challenges/${challengeId}/day/${status.day}`, { + method: 'PUT', + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ isCompleted: status.isCompleted }) + }); + }); + + container.appendChild(dayBox); + }); +} + +function calculateAndRedirect(dayStatuses) { + const completedDays = dayStatuses.filter(status => status.isCompleted).length; + const totalDays = dayStatuses.length; + + const successRate = ((completedDays / totalDays) * 100).toFixed(2); + + // 성공률 페이지로 데이터 전송 + fetch('/api/v1/challenges/success', { + method: 'POST', + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ completedDays, totalDays, successRate }) + }).then(() => { + window.location.href = "success.html"; // 성공률 페이지로 이동 + }); +} From 6255c59cb9d167adf32f3c461fb555ddb3c22475 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:53:30 +0900 Subject: [PATCH 16/22] Edit Challenge_Details_Check.css --- src/main/resources/templates/Challenge_Details_Check.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/main/resources/templates/Challenge_Details_Check.css b/src/main/resources/templates/Challenge_Details_Check.css index 2f98503..6a24562 100644 --- a/src/main/resources/templates/Challenge_Details_Check.css +++ b/src/main/resources/templates/Challenge_Details_Check.css @@ -1,4 +1,3 @@ -/* 전체 페이지 스타일 */ body { margin: 0; padding: 0; @@ -6,7 +5,6 @@ body { background-color: #F8FAFD; } -/* 홈 버튼 스타일 */ header { position: absolute; top: 20px; @@ -30,7 +28,6 @@ header { box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); } -/* 메인 컨테이너: 왼쪽과 오른쪽 배치 */ .main-container { display: flex; justify-content: space-between; @@ -80,7 +77,6 @@ header { color: #555; } -/* 챌린지 일별 버튼 스타일 */ .challenge-container { display: grid; grid-template-columns: repeat(5, 1fr); From ae1cf4c6d9142c8ac3938fc1f50ef5d6b434babc Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:54:01 +0900 Subject: [PATCH 17/22] Edit Challenge_Details_Check.html --- src/main/resources/templates/Challenge_Details_Check.html | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/main/resources/templates/Challenge_Details_Check.html b/src/main/resources/templates/Challenge_Details_Check.html index 1312de4..ae2bb17 100644 --- a/src/main/resources/templates/Challenge_Details_Check.html +++ b/src/main/resources/templates/Challenge_Details_Check.html @@ -7,20 +7,16 @@ -
-
-

Your Challenge

D - N/A

-

The 50 days challenge @@ -34,9 +30,7 @@

D - N/A

-
-
From 2110aabbdcf7dafc0d06b60fd126e99dca6ccbbb Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:55:10 +0900 Subject: [PATCH 18/22] Edit Challenge_Details_Check.js --- .../templates/Challenge_Details_Check.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/main/resources/templates/Challenge_Details_Check.js b/src/main/resources/templates/Challenge_Details_Check.js index 1a9eff2..d62c0ab 100644 --- a/src/main/resources/templates/Challenge_Details_Check.js +++ b/src/main/resources/templates/Challenge_Details_Check.js @@ -1,14 +1,12 @@ document.addEventListener("DOMContentLoaded", () => { const challengeContainer = document.getElementById("challenge-container"); - // 로컬 스토리지에서 challenge_id 가져오기 const challengeId = localStorage.getItem("challenge_id"); if (!challengeId) { alert("챌린지를 선택하지 않았습니다."); return; } - // API 호출로 챌린지 데이터 가져오기 fetch(`/api/v1/challenges/${challengeId}`) .then(response => { if (!response.ok) { @@ -20,7 +18,6 @@ document.addEventListener("DOMContentLoaded", () => { if (data.success) { const { challengeTitle, totalDays, startDate, endDate, dayStatuses } = data; - // DOM 업데이트 document.getElementById("challengeTitle").textContent = challengeTitle || "Your Challenge"; document.getElementById("challengeDays").textContent = `${totalDays} days`; document.getElementById("startDate").textContent = startDate || "N/A"; @@ -36,37 +33,33 @@ document.addEventListener("DOMContentLoaded", () => { } document.getElementById("remainingDays").textContent = `D - ${remainingDays}`; - // 챌린지 칸 생성 renderChallengeBoxes(dayStatuses, challengeContainer); - // 챌린지 종료 시 성공률 페이지로 이동 if (remainingDays === 0) { calculateAndRedirect(dayStatuses); } } else { - alert("챌린지 데이터를 불러오는 데 실패했습니다."); + alert("Failed to retrieve challenge data."); } }) .catch(error => { console.error("Error fetching challenge data:", error); - alert("서버에서 데이터를 가져오지 못했습니다."); + alert("Failed to get data from the server."); }); }); function renderChallengeBoxes(dayStatuses, container) { - container.innerHTML = ""; // 기존 내용 초기화 + container.innerHTML = ""; dayStatuses.forEach((status) => { const dayBox = document.createElement("div"); dayBox.classList.add("challenge-box"); dayBox.textContent = `DAY ${status.day}`; if (status.isCompleted) dayBox.classList.add("checked"); - // 상태 반전 및 업데이트 dayBox.addEventListener("click", () => { status.isCompleted = !status.isCompleted; dayBox.classList.toggle("checked"); - // 서버 업데이트 fetch(`/api/v1/challenges/${challengeId}/day/${status.day}`, { method: 'PUT', headers: { @@ -86,7 +79,6 @@ function calculateAndRedirect(dayStatuses) { const successRate = ((completedDays / totalDays) * 100).toFixed(2); - // 성공률 페이지로 데이터 전송 fetch('/api/v1/challenges/success', { method: 'POST', headers: { @@ -94,6 +86,6 @@ function calculateAndRedirect(dayStatuses) { }, body: JSON.stringify({ completedDays, totalDays, successRate }) }).then(() => { - window.location.href = "success.html"; // 성공률 페이지로 이동 + window.location.href = "success.html"; }); } From 0ad5d16f98cb52b333834a2a86573ec1c0d7eb37 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:56:01 +0900 Subject: [PATCH 19/22] Edit Challenge_Details_Check.js --- src/main/resources/templates/Challenge_Details_Check.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/resources/templates/Challenge_Details_Check.js b/src/main/resources/templates/Challenge_Details_Check.js index d62c0ab..eb0751d 100644 --- a/src/main/resources/templates/Challenge_Details_Check.js +++ b/src/main/resources/templates/Challenge_Details_Check.js @@ -3,7 +3,7 @@ document.addEventListener("DOMContentLoaded", () => { const challengeId = localStorage.getItem("challenge_id"); if (!challengeId) { - alert("챌린지를 선택하지 않았습니다."); + alert("You didn't select a challenge."); return; } From 1df337e4fa64730e0bfc93f4c66c3c2096d99a24 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:57:02 +0900 Subject: [PATCH 20/22] Create Challenge_End_Page.css --- .../templates/Challenge_End_Page.css | 112 ++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 src/main/resources/templates/Challenge_End_Page.css diff --git a/src/main/resources/templates/Challenge_End_Page.css b/src/main/resources/templates/Challenge_End_Page.css new file mode 100644 index 0000000..7f24fb0 --- /dev/null +++ b/src/main/resources/templates/Challenge_End_Page.css @@ -0,0 +1,112 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #f1f3f9; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} + +header { + position: absolute; + top: 10px; + left: 10px; +} + +#homeButton { + padding: 10px 20px; + font-size: 16px; + background-color: #6FD1C5; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#homeButton:hover { + background-color: #5BAA9D; +} + +main { + text-align: center; + width: 100%; + max-width: 600px; +} + +.header-container h2 { + font-size: 22px; + color: #333; + margin-bottom: 10px; +} + +.header-container h1 { + font-size: 48px; + color: #555; + font-weight: bold; + margin: 5px 0; +} + +.dates { + font-size: 16px; + color: #757575; + margin-bottom: 30px; +} + +.success-box { + position: relative; + background-color: white; + border-radius: 15px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + padding: 30px; + margin: 0 auto; + text-align: center; + max-width: 400px; +} + +.blue-gradient-circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + background: radial-gradient(circle, rgba(181, 214, 249, 0.7), transparent); + border-radius: 50%; + z-index: 0; + filter: blur(15px); +} + +.challenge-text { + font-size: 16px; + color: #555; + margin: 10px 0; + position: relative; + z-index: 1; +} + +.success-text { + position: relative; + z-index: 1; + font-size: 28px; + font-weight: bold; + color: #000; + margin: 20px 0 10px; +} + +.message { + font-size: 14px; + color: #888; + margin-top: 10px; + position: relative; + z-index: 1; +} + +.message.success-message { + color: #28a745; /* 초록색 */ + font-size: 26px; + font-weight: bold; + margin-top: 20px; +} From 29eae70d9b23fab4ea62140f15511b8d1a61170b Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:57:48 +0900 Subject: [PATCH 21/22] Create Challenge_End_Page --- .../templates/Challenge_Endpage.html | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/main/resources/templates/Challenge_Endpage.html diff --git a/src/main/resources/templates/Challenge_Endpage.html b/src/main/resources/templates/Challenge_Endpage.html new file mode 100644 index 0000000..d6caa70 --- /dev/null +++ b/src/main/resources/templates/Challenge_Endpage.html @@ -0,0 +1,43 @@ + + + + + + Challenge Success Rate + + + + +
+ +
+ +
+ +
+

Your Challenge

+

D - N/A

+

N/A - N/A

+
+ + +
+
+

+ Out of 50 days of challenges, +

+

+ 0 days of challenges are successful +

+ + +
0.00% success
+ + +

+
+
+ + + + From 066dcea40a33c4afdd876a0dd941809b424c68f4 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:59:12 +0900 Subject: [PATCH 22/22] Create Challenge_End_Page --- .../resources/templates/Challenge_Endpage.js | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/main/resources/templates/Challenge_Endpage.js diff --git a/src/main/resources/templates/Challenge_Endpage.js b/src/main/resources/templates/Challenge_Endpage.js new file mode 100644 index 0000000..8480ea5 --- /dev/null +++ b/src/main/resources/templates/Challenge_Endpage.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", () => { + const challengeId = localStorage.getItem("challenge_id"); // Get the challenge ID + + if (!challengeId) { + alert("No challenge selected."); + return; + } + + // Fetch challenge data from API + fetch(`/api/v1/challenges/${challengeId}`) + .then(response => { + if (!response.ok) { + throw new Error("Failed to fetch challenge data."); + } + return response.json(); + }) + .then(data => { + // Destructure data from the API + const { title, duration, start_date, finished_at, count, remaining_days, progress_rate } = data; + + // Update the DOM with challenge data + document.getElementById("challengeTitle").textContent = title || "Your Challenge"; + document.getElementById("remainingDays").textContent = remaining_days || "N/A"; + document.getElementById("challengeDates").textContent = `${start_date || "N/A"} - ${finished_at || "N/A"}`; + document.getElementById("totalDays").textContent = duration || 0; + document.getElementById("completedDays").textContent = count || 0; + document.getElementById("successRate").textContent = `${progress_rate || 0}% success`; + + // Conditional success message + const messageElement = document.getElementById("resultMessage"); + if (parseFloat(progress_rate) === 100) { + messageElement.textContent = "Congratulations!"; + messageElement.classList.add("success-message"); + } else { + messageElement.innerHTML = `If the result is unsatisfactory, you can try again!`; + messageElement.classList.remove("success-message"); + } + }) + .catch(error => { + console.error("Error fetching challenge data:", error); + alert("Failed to load data from the server."); + }); +});