From 5a323a8b41a0be26fcfc5e28ccb9d0294c0d5cd7 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:38:06 +0900 Subject: [PATCH 1/4] Feature: Upload Main Page UI --- src/main/resources/templates/Main_Page.css | 110 ++++++++++++++++++++ src/main/resources/templates/Main_Page.html | 52 +++++++++ src/main/resources/templates/Main_Page.js | 7 ++ 3 files changed, 169 insertions(+) create mode 100644 src/main/resources/templates/Main_Page.css create mode 100644 src/main/resources/templates/Main_Page.html create mode 100644 src/main/resources/templates/Main_Page.js diff --git a/src/main/resources/templates/Main_Page.css b/src/main/resources/templates/Main_Page.css new file mode 100644 index 0000000..5289ef0 --- /dev/null +++ b/src/main/resources/templates/Main_Page.css @@ -0,0 +1,110 @@ +/* 기존 스타일 유지 */ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #F8FAFD; + height: 100vh; + display: flex; + flex-direction: column; +} + +/* 메인 컨테이너 스타일 */ +.main-container { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + padding: 0 50px; + box-sizing: border-box; +} + +/* 왼쪽 섹션 */ +.left-section { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + flex: 1; + padding-left: 50px; +} + +.main-image-container { + margin-bottom: 20px; +} + +.main-image { + width: 200px; + height: auto; + animation: bounce 1.5s infinite; +} + +@keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +header #main-title { + font-size: 3rem; + font-weight: bold; + color: #333; + margin-top: 10px; /* Welcome 메시지와의 간격 조정 */ + opacity: 0; + animation: fadeIn 2s forwards; +} + +.user-welcome { + font-size: 1.5rem; + color: #555; + margin: 0; /* 위아래 여백 제거 */ + font-weight: bold; +} + +@keyframes fadeIn { + from { opacity: 0; transform: scale(0.8); } + to { opacity: 1; transform: scale(1); } +} + +/* 오른쪽 섹션 */ +.right-section { + display: flex; + justify-content: center; + align-items: center; + flex: 1; +} + +.button-container { + display: grid; + grid-template-rows: repeat(4, 1fr); + gap: 30px; + width: 300px; +} + +.button-container button { + background-color: #6FD1C5; + color: white; + border: none; + border-radius: 15px; + padding: 28px 33px; /* 버튼 내부 여백 확대 */ + font-size: 1.2rem; /* 글씨 크기 확대 */ + font-weight: bold; + cursor: pointer; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; +} + +.button-container button:hover { + background-color: navajowhite; + transform: scale(1.05); +} + +/* 푸터 스타일 */ +footer p { + font-size: 0.9rem; + color: #666; + position: absolute; + bottom: 10px; + right: 20px; + margin: 0; +} diff --git a/src/main/resources/templates/Main_Page.html b/src/main/resources/templates/Main_Page.html new file mode 100644 index 0000000..66a211f --- /dev/null +++ b/src/main/resources/templates/Main_Page.html @@ -0,0 +1,52 @@ + + + + + + Time-To-Do Main + + + + +
+ +
+
+ Time-To-Do Logo +
+
+ +

Hi, Guest!

+

Welcome to "Time-To-Do!"

+
+
+ + +
+
+ + + + +
+
+
+ + + + + + + + diff --git a/src/main/resources/templates/Main_Page.js b/src/main/resources/templates/Main_Page.js new file mode 100644 index 0000000..37ccbc1 --- /dev/null +++ b/src/main/resources/templates/Main_Page.js @@ -0,0 +1,7 @@ +// JSON 객체 저장 +const user = { id: "user123", nickname: "John" }; +localStorage.setItem("user", JSON.stringify(user)); + +// JSON 객체 불러오기 +const userData = JSON.parse(localStorage.getItem("user")); +console.log(userData.nickname); // "John" From e81727f0e2dcd65095ee90391efb4db5342d4a0c Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:40:28 +0900 Subject: [PATCH 2/4] Edit Main_Page.css --- src/main/resources/templates/Main_Page.css | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/main/resources/templates/Main_Page.css b/src/main/resources/templates/Main_Page.css index 5289ef0..8cc4e88 100644 --- a/src/main/resources/templates/Main_Page.css +++ b/src/main/resources/templates/Main_Page.css @@ -1,4 +1,3 @@ -/* 기존 스타일 유지 */ body { margin: 0; padding: 0; @@ -9,7 +8,6 @@ body { flex-direction: column; } -/* 메인 컨테이너 스타일 */ .main-container { display: flex; justify-content: space-between; @@ -19,7 +17,6 @@ body { box-sizing: border-box; } -/* 왼쪽 섹션 */ .left-section { display: flex; flex-direction: column; @@ -48,7 +45,7 @@ header #main-title { font-size: 3rem; font-weight: bold; color: #333; - margin-top: 10px; /* Welcome 메시지와의 간격 조정 */ + margin-top: 10px; opacity: 0; animation: fadeIn 2s forwards; } @@ -56,7 +53,7 @@ header #main-title { .user-welcome { font-size: 1.5rem; color: #555; - margin: 0; /* 위아래 여백 제거 */ + margin: 0; font-weight: bold; } @@ -65,7 +62,6 @@ header #main-title { to { opacity: 1; transform: scale(1); } } -/* 오른쪽 섹션 */ .right-section { display: flex; justify-content: center; @@ -85,8 +81,8 @@ header #main-title { color: white; border: none; border-radius: 15px; - padding: 28px 33px; /* 버튼 내부 여백 확대 */ - font-size: 1.2rem; /* 글씨 크기 확대 */ + padding: 28px 33px; + font-size: 1.2rem; font-weight: bold; cursor: pointer; text-align: center; @@ -99,7 +95,6 @@ header #main-title { transform: scale(1.05); } -/* 푸터 스타일 */ footer p { font-size: 0.9rem; color: #666; From 98ba3c268cf88f76d561db1ca753484d25343029 Mon Sep 17 00:00:00 2001 From: Yeeun Lee Date: Mon, 16 Dec 2024 22:41:00 +0900 Subject: [PATCH 3/4] Edit Main_Page.html --- src/main/resources/templates/Main_Page.html | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/main/resources/templates/Main_Page.html b/src/main/resources/templates/Main_Page.html index 66a211f..d6315ef 100644 --- a/src/main/resources/templates/Main_Page.html +++ b/src/main/resources/templates/Main_Page.html @@ -7,21 +7,17 @@ -
-
Time-To-Do Logo
-

Hi, Guest!

Welcome to "Time-To-Do!"

-
@@ -32,18 +28,14 @@

Welcome to "Time-To-Do!"

-

Developers: Lee Ji Won, Hong Min Ji, Song Seo Ha, Lee So Dam, Lee Ye Eun, Kim Ha Jin

-