seagulls/dogs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ChloeChen0423
2025-05-13 17:14:19 +09:00
parent 7c63f2f07b
commit 68cb20c2d5
5 changed files with 409 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
css/style.css
View File

@ -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;

54
index.html
View File

@ -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>

126
js/main.js
View File

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

38
js/register.js Normal file
View File

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

112
register.html Normal file
View File

@ -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>