新增注册（页面跳转）及登录（弹窗）功能

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;

index.html

@@ -45,26 +45,70 @@
         </div>
     </main>
 
-    
+
     <div class="upload-download-container">
         <h2>広告募集</h2>
-        
+
         <label id="fileInputLabel" for="fileInput">ファイルを選択してください</label>
         <input type="file" id="fileInput">
         <button id="uploadBtn">アップロード</button>
         <div id="uploadResult"></div>
 
-        
+
         <button id="downloadBtn">ダウンロード</button>
     </div>
 
     <div class="button-area text-center py-4">
-        <button id="goToRegister" class="btn-outline">会員登録</button>
+        <a href="register.html" id="goToRegister" class="btn-outline">会員登録</a>
         <button id="goToLogin" class="btn-outline">ログイン</button>
     </div>
 
-    
 
+<div id="loginModal" class="modal" style="display: none;">
+    <div class="modal-content">
+      <span id="closeLoginModal" class="close">&times;</span>
+      <h2>ログイン</h2>
+      <form id="loginForm">
+        <label for="loginEmail">メールアドレス（必須）</label>
+        <input type="email" id="loginEmail" required />
+  
+        <label for="loginPassword">パスワード（必須）</label>
+        <input type="password" id="loginPassword" required />
+  
+        <div class="modal-actions">
+          <button type="button" id="submitLogin">ログイン</button>
+          <button type="button" id="cancelLogin">キャンセル</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  
+
+<!-- <div id="registerModal" class="modal" style="display: none;">
+    <div class="modal-content">
+      <span id="closeRegisterModal" class="close">&times;</span>
+      <h2>会員登録</h2>
+      <form id="registerForm">
+        <label for="registerUsername">ユーザー名</label>
+        <input type="text" id="registerUsername" />
+  
+        <label for="registerEmail">メールアドレス</label>
+        <input type="email" id="registerEmail" required />
+  
+        <label for="registerPassword">パスワード</label>
+        <input type="password" id="registerPassword" required />
+  
+        <label for="registerConfirmPassword">パスワード</label>
+        <input type="password" id="registerConfirmPassword" required />
+  
+        <div class="modal-actions">
+          <button type="button" id="submitRegister">登録</button>
+          <button type="button" id="cancelRegister">キャンセル</button>
+        </div>
+      </form>
+    </div>
+  </div> -->
+  
 
     <script src="js/main.js"></script>
 </body>

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 = [

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('登録に失敗しました');
+        }
+    });
+});

register.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>ユーザー登録</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+    
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+    
+        h2 {
+            position: absolute;
+            top: 30px;
+            left: 40px;
+            margin: 0;
+            font-size: 26px;
+            color: #2c3e50;
+        }
+    
+        form {
+            background-color: white;
+            padding: 40px;
+            border-radius: 12px;
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 420px;
+        }
+    
+        label {
+            display: block;
+            margin-bottom: 6px;
+            font-weight: 600;
+            color: #34495e;
+        }
+    
+        input[type="text"],
+        input[type="email"],
+        input[type="password"] {
+            width: 100%;
+            padding: 12px 14px;
+            margin-bottom: 20px;
+            border: 1px solid #ccd6dd;
+            border-radius: 6px;
+            font-size: 16px;
+            transition: border-color 0.2s;
+        }
+    
+        input:focus {
+            border-color: #3498db;
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+        }
+    
+        button {
+            width: 100%;
+            padding: 12px;
+            background-color: #3498db;
+            color: white;
+            font-size: 16px;
+            font-weight: 600;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.1s;
+        }
+    
+        button:hover {
+            background-color: #2980b9;
+        }
+    
+        button:active {
+            transform: scale(0.98);
+        }
+    </style>
+    
+</head>
+<body>
+    <h2>ユーザー登録</h2>
+    <form id="registerForm">
+        <label for="registerUsername">ユーザー名:</label>
+        <input type="text" id="registerUsername"><br>
+
+        <label for="registerEmail">メールアドレス:</label>
+        <input type="email" id="registerEmail" required><br>
+
+        <label for="registerPassword">パスワード:</label>
+        <input type="password" id="registerPassword" required><br>
+
+        <label for="registerConfirmPassword">パスワード再入力:</label>
+        <input type="password" id="registerConfirmPassword" required><br>
+
+        <button type="button" id="submitRegister">登録</button>
+        
+    </form>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <script src="js/register.js"></script>
+</body>
+</html>