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..6a24562 --- /dev/null +++ b/src/main/resources/templates/Challenge_Details_Check.css @@ -0,0 +1,110 @@ +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..ae2bb17 --- /dev/null +++ b/src/main/resources/templates/Challenge_Details_Check.html @@ -0,0 +1,41 @@ + + + + + + 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..eb0751d --- /dev/null +++ b/src/main/resources/templates/Challenge_Details_Check.js @@ -0,0 +1,91 @@ +document.addEventListener("DOMContentLoaded", () => { + const challengeContainer = document.getElementById("challenge-container"); + + const challengeId = localStorage.getItem("challenge_id"); + if (!challengeId) { + alert("You didn't select a challenge."); + return; + } + + 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; + + 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("Failed to retrieve challenge data."); + } + }) + .catch(error => { + console.error("Error fetching challenge data:", error); + alert("Failed to get data from the server."); + }); +}); + +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"; + }); +} 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; +} 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."); + }); +});