From 68cb20c2d5f6f606bf434e7ede8ae60ab9bcc5e0 Mon Sep 17 00:00:00 2001 From: ChloeChen0423 Date: Tue, 13 May 2025 17:14:19 +0900 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B3=A8=E5=86=8C=EF=BC=88?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=B7=B3=E8=BD=AC=EF=BC=89=E5=8F=8A=E7=99=BB?= =?UTF-8?q?=E5=BD=95=EF=BC=88=E5=BC=B9=E7=AA=97=EF=BC=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 101 +++++++++++++++++++++++++++++++++++++++ index.html | 54 +++++++++++++++++++-- js/main.js | 126 ++++++++++++++++++++++++++++++++++++++++++------- js/register.js | 38 +++++++++++++++ register.html | 112 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 409 insertions(+), 22 deletions(-) create mode 100644 js/register.js create mode 100644 register.html diff --git a/css/style.css b/css/style.css index 9584d04..f6ac86a 100644 --- a/css/style.css +++ b/css/style.css @@ -322,6 +322,107 @@ main.flex-fill { transform: translateY(-2px); } +.modal { + position: fixed; + z-index: 999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); + display: flex; + justify-content: center; + align-items: center; + } + + .modal-content { + background-color: #fff; + padding: 2rem; + width: 90%; + max-width: 400px; + border-radius: 12px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); + position: relative; + animation: fadeIn 0.3s ease-in-out; + } + + @keyframes fadeIn { + from { opacity: 0; transform: translateY(-20px); } + to { opacity: 1; transform: translateY(0); } + } + + .modal-content h2 { + margin-top: 0; + font-size: 1.5rem; + text-align: center; + color: #333; + } + + .modal-content label { + display: block; + margin: 1rem 0 0.3rem; + font-weight: 600; + color: #444; + } + + .modal-content input { + width: 100%; + padding: 0.6rem; + border: 1px solid #ccc; + border-radius: 6px; + box-sizing: border-box; + font-size: 1rem; + } + + .modal-actions { + margin-top: 1.5rem; + display: flex; + justify-content: space-between; + } + + .modal-actions button { + flex: 1; + margin: 0 0.3rem; + padding: 0.6rem; + border: none; + border-radius: 6px; + background-color: #5aa9fe; + color: white; + font-weight: bold; + cursor: pointer; + transition: background-color 0.2s ease; + } + + .modal-actions button:hover { + background-color: #0056b3; + } + + .modal-actions button#cancelLogin, + .modal-actions button#cancelRegister { + background-color: #ccc; + color: #333; + } + + .modal-actions button#cancelLogin:hover, + .modal-actions button#cancelRegister:hover { + background-color: #999; + } + + .close { + position: absolute; + top: 12px; + right: 16px; + font-size: 24px; + font-weight: bold; + color: #666; + cursor: pointer; + } + + .close:hover { + color: #000; + } + @media (max-width: 768px) { .slider-wrapper { flex-direction: column; diff --git a/index.html b/index.html index 64e5098..5de5554 100644 --- a/index.html +++ b/index.html @@ -45,26 +45,70 @@ - +

広告募集

- +
- +
- + 会員登録
- + + + + + diff --git a/js/main.js b/js/main.js index b32c5d1..0e10a0f 100644 --- a/js/main.js +++ b/js/main.js @@ -1,13 +1,13 @@ $(function () { $.ajax({ - url: "http://192.168.1.192:8085/dogs/pet", + url: "http://localhost:8080/inuhouse", type: "GET", success: function (dogs) { const $slider = $('#sliderContainer'); const slideWidth = 270; const centerOffset = 1; - + preloadImages(dogs.map(d => d.image), () => { // $('#sliderContainer').html(dogs.map(createSlideHTML).join('')); const slidesHTML = generateCarouselHTML(dogs); @@ -24,10 +24,10 @@ $(function () { $('.right-btn').on('click', function () { if ($slider.is(':animated')) return; - + currentIndex++; animateTo(currentIndex); - + if (currentIndex === totalSlides - 1) { // animateTo(currentIndex); requestAnimationFrame(() => { @@ -37,16 +37,16 @@ $(function () { }); }); } - + }); - + $('.left-btn').on('click', function () { if ($slider.is(':animated')) return; - + currentIndex--; animateTo(currentIndex); - + if (currentIndex === 0) { @@ -58,12 +58,12 @@ $(function () { }); }); } - + }); - + }); - + $('#uploadBtn').on('click', function () { const fileInput = $('#fileInput')[0]; const file = fileInput.files[0]; @@ -99,12 +99,104 @@ $(function () { a.click(); document.body.removeChild(a); }); - - - - - + + $(function () { + + $('#goToLogin').on('click', function () { + $('#loginModal').fadeIn(); + }); + + // $('#goToRegister').on('click', function () { + // $('#registerModal').fadeIn(); + // }); + + + $('#closeLoginModal, #cancelLogin').on('click', function () { + $('#loginModal').fadeOut(); + }); + + // $('#closeRegisterModal, #cancelRegister').on('click', function () { + // $('#registerModal').fadeOut(); + // }); + + + // $('#submitRegister').on('click', function () { + // const username = $('#registerUsername').val().trim(); + // const email = $('#registerEmail').val().trim(); + // const password = $('#registerPassword').val().trim(); + // const confirmPassword = $('#registerConfirmPassword').val().trim(); + + // if (!email || !password || !confirmPassword) { + // alert('必須項目をすべて入力してください'); + // return; + // } + + // if (password !== confirmPassword) { + // alert('パスワードが一致しません'); + // return; + // } + + // const requestData = { + // username: username || null, + // email: email, + // password: password + // }; + + // $.ajax({ + // url: 'http://192.168.1.192:8085/api/user/register', + // type: 'POST', + // contentType: 'application/json', + // data: JSON.stringify(requestData), + // success: function () { + // alert('登録成功！'); + // window.location.href = 'index.html'; + // $('#registerModal').fadeOut(); + // }, + // error: function () { + // alert('登録に失敗しました: '); + // } + // }); + // }); + + $('#submitLogin').on('click', function () { + const email = $('#loginEmail').val().trim(); + const password = $('#loginPassword').val().trim(); + + if (!email || !password) { + alert('メールアドレスとパスワードを入力してください'); + return; + } + + const requestData = { + email: email, + password: password + }; + + $.ajax({ + url: 'http://192.168.1.192:8085/api/user/login', + type: 'POST', + contentType: 'application/json', + data: JSON.stringify(requestData), + success: function (response) { + const token = response.token; + localStorage.setItem('authToken', token); + alert('ログイン成功！'); + window.location.href = 'index.html'; + $('#loginModal').fadeOut(); + }, + error: function () { + alert('ログインに失敗しました'); + } + }); + }); + + + }); + + + + function preloadImages(urls, callback) { let loaded = 0; urls.forEach(src => { @@ -136,7 +228,7 @@ $(function () { } function generateCarouselHTML(dogList) { - + if (!dogList || dogList.length === 0) return ''; const redundantList = [ diff --git a/js/register.js b/js/register.js new file mode 100644 index 0000000..e2925ff --- /dev/null +++ b/js/register.js @@ -0,0 +1,38 @@ +$('#submitRegister').on('click', function () { + console.log('クリックされました') + + const username = $('#registerUsername').val().trim(); + const email = $('#registerEmail').val().trim(); + const password = $('#registerPassword').val().trim(); + const confirmPassword = $('#registerConfirmPassword').val().trim(); + + if (!email || !password || !confirmPassword) { + alert('必須項目をすべて入力してください'); + return; + } + + if (password !== confirmPassword) { + alert('パスワードが一致しません'); + return; + } + + const requestData = { + username: username || null, + email: email, + password: password + }; + + $.ajax({ + url: 'http://192.168.1.192:8085/api/user/register', + type: 'POST', + contentType: 'application/json', + data: JSON.stringify(requestData), + success: function () { + // alert('登録成功！'); + window.location.href = 'index.html'; + }, + error: function () { + alert('登録に失敗しました'); + } + }); +}); diff --git a/register.html b/register.html new file mode 100644 index 0000000..8f07cea --- /dev/null +++ b/register.html @@ -0,0 +1,112 @@ + + + + + ユーザー登録 + + + + + +

ユーザー登録

+
+ +
+ + +
+ + +
+ + +
+ + + +
+ + + + +