Spaces:

openfree
/

bubyjy

Running

App Files Files Community

bubyjy / index.html

openfree

Upload index.html with huggingface_hub

962a2bd verified over 1 year ago

raw

history blame contribute delete

6.23 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>회원관리 시스템</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	body {
	background: #f5f5f5;
	padding: 20px;
	}

	.container {
	max-width: 1200px;
	margin: 0 auto;
	background: white;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}

	h1 {
	color: #333;
	margin-bottom: 30px;
	text-align: center;
	}

	.form-group {
	margin-bottom: 15px;
	}

	label {
	display: block;
	margin-bottom: 5px;
	color: #555;
	}

	input {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	}

	button {
	background: #4CAF50;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	margin-right: 10px;
	}

	button:hover {
	background: #45a049;
	}

	.search-section {
	margin: 20px 0;
	padding: 20px;
	background: #f9f9f9;
	border-radius: 4px;
	}

	.member-list {
	margin-top: 20px;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	}

	th, td {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	}

	th {
	background: #f5f5f5;
	color: #333;
	}

	tr:hover {
	background: #f9f9f9;
	}

	.error {
	color: red;
	font-size: 14px;
	margin-top: 5px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>회원관리 시스템</h1>

	<form id="memberForm">
	<div class="form-group">
	<label for="memberId">회원번호</label>
	<input type="text" id="memberId" required>
	</div>
	<div class="form-group">
	<label for="name">이름</label>
	<input type="text" id="name" required>
	</div>
	<div class="form-group">
	<label for="age">나이</label>
	<input type="number" id="age" required>
	</div>
	<div class="form-group">
	<label for="phone">핸드폰번호</label>
	<input type="tel" id="phone" required>
	</div>
	<div class="form-group">
	<label for="email">이메일주소</label>
	<input type="email" id="email" required>
	</div>
	<div class="form-group">
	<label for="address">주소</label>
	<input type="text" id="address" required>
	</div>
	<div class="form-group">
	<label for="note">비고</label>
	<input type="text" id="note">
	</div>
	<button type="submit">등록</button>
	</form>

	<div class="search-section">
	<div class="form-group">
	<label for="searchName">이름으로 검색</label>
	<input type="text" id="searchName">
	</div>
	<button onclick="searchMembers()">검색</button>
	</div>

	<div class="member-list">
	<table>
	<thead>
	<tr>
	<th>회원번호</th>
	<th>이름</th>
	<th>나이</th>
	<th>핸드폰번호</th>
	<th>이메일주소</th>
	<th>주소</th>
	<th>비고</th>
	</tr>
	</thead>
	<tbody id="memberTableBody">
	</tbody>
	</table>
	</div>
	</div>

	<script>
	let members = [];

	document.getElementById('memberForm').addEventListener('submit', function(e) {
	e.preventDefault();

	const member = {
	memberId: document.getElementById('memberId').value,
	name: document.getElementById('name').value,
	age: document.getElementById('age').value,
	phone: document.getElementById('phone').value,
	email: document.getElementById('email').value,
	address: document.getElementById('address').value,
	note: document.getElementById('note').value
	};

	members.push(member);
	updateTable();
	this.reset();
	});

	function searchMembers() {
	const searchName = document.getElementById('searchName').value.toLowerCase();
	const filteredMembers = members.filter(member =>
	member.name.toLowerCase().includes(searchName)
	);
	updateTable(filteredMembers);
	}

	function updateTable(data = members) {
	const tableBody = document.getElementById('memberTableBody');
	tableBody.innerHTML = '';

	data.forEach(member => {
	const row = document.createElement('tr');
	row.innerHTML = `
	<td>${member.memberId}</td>
	<td>${member.name}</td>
	<td>${member.age}</td>
	<td>${member.phone}</td>
	<td>${member.email}</td>
	<td>${member.address}</td>
	<td>${member.note}</td>
	`;
	tableBody.appendChild(row);
	});
	}
	</script>
	</body>
	</html>