<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>出会い広場 - マッチング</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
background: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #ff4d6d;
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
label {
display: block;
margin-top: 10px;
}
input, textarea, select {
width: 100%;
padding: 10px;
margin-top: 5px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
margin-top: 15px;
background: #ff4d6d;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
.user-card {
background: #fff0f3;
padding: 10px;
margin-bottom: 10px;
border-radius: 6px;
display: flex;
align-items: center;
}
.user-card img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 15px;
object-fit: cover;
}
@media (max-width: 600px) {
.user-card {
flex-direction: column;
align-items: flex-start;
}
.user-card img {
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<header>出会い広場</header>
<div class="container">
<h2>プロフィール登録</h2>
<form id="profileForm">
<label>ニックネーム</label>
<input type="text" id="nickname" required>
<label>プロフィール画像URL</label>
<input type="url" id="avatar" placeholder="https://example.com/avatar.jpg">
<label>年齢</label>
<input type="number" id="age" required>
<label>性別</label>
<select id="gender">
<option value="男性">男性</option>
<option value="女性">女性</option>
<option value="その他">その他</option>
</select>
<label>自己紹介</label>
<textarea id="bio" rows="3" required></textarea>
<button type="submit">登録する</button>
</form>
</div>
<div class="container">
<h2>ユーザー一覧</h2>
<label>性別で絞り込む:</label>
<select id="filterGender">
<option value="すべて">すべて</option>
<option value="男性">男性</option>
<option value="女性">女性</option>
<option value="その他">その他</option>
</select>
<div id="userList" style="margin-top:20px;"></div>
</div>
<script>
const form = document.getElementById('profileForm');
const userList = document.getElementById('userList');
const filterGender = document.getElementById('filterGender');
let users = [];
form.addEventListener('submit', function(e) {
e.preventDefault();
const user = {
nickname: document.getElementById('nickname').value,
age: document.getElementById('age').value,
gender: document.getElementById('gender').value,
bio: document.getElementById('bio').value,
avatar: document.getElementById('avatar').value || 'https://via.placeholder.com/80'
};
users.push(user);
form.reset();
renderUsers();
});
filterGender.addEventListener('change', renderUsers);
function renderUsers() {
const filter = filterGender.value;
userList.innerHTML = '';
users
.filter(user => filter === 'すべて' || user.gender === filter)
.forEach(user => {
const card = document.createElement('div');
card.className = 'user-card';
card.innerHTML = `
<img src="${user.avatar}" alt="avatar">
<div>
<strong>${user.nickname}</strong>（${user.age}歳・${user.gender}）<br>
<p>${user.bio}</p>
</div>
`;
userList.appendChild(card);
});
}
</script>
</body>
</html>
