Skip to content

Add files via upload #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bssanyang wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add files via upload #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions img/PAT01.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/Logo.png" type="image/png">
<link rel="stylesheet" href="main.css">
<title>회원 가입 완료</title>
</head>
<body>

<nav class="top-nav">
<div class="nav-container">
<div class="logo-area">
<img src="img/logo.png" alt="Logo" class="logo">
<img src="img/letters.svg" alt="Letters" class="letters">
</div>
<div class="login-area">
<span class="login-text" id="loginText">로그인</span>
<span class="user-name" id="userName" style="display: none;">사용자 이름</span>
</div>
</div>
</nav>
<main class="main-content">
<div class="box1200">
<h1 class="title" style="margin-bottom: 32px;">EATS에 오신 것을 환영합니다</h1>



<!-- 추가된 텍스트와 이미지 -->
<div class="thank-you-message" style="text-align: center; margin-top: 32px;">
<p style="color: var(--Gray-700, #344054); font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px;">
아직 등록된 환자가 없습니다. 검사할 환자를 등록해주세요.
</p>
<img src="img/pat01.svg" alt="Join EATS" style="margin-top: 32px; display: block; margin-left: auto; margin-right: auto;">
</div>
<div class="box2">
<div class="button-container" style="margin-top: 32px;">
<button class="button-normal">로그인하러 가기</button>
</div></div>
</div>

</main>
</div>

</body>
</html>
287 changes: 287 additions & 0 deletions img/PAT02.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,287 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/Logo.png" type="image/png">
<link rel="stylesheet" href="main.css">
<title>환자 목록</title>
</head>
<body>

<nav class="top-nav">
<div class="nav-container">
<div class="logo-area">
<img src="img/logo.png" alt="Logo" class="logo">
<img src="img/letters.svg" alt="Letters" class="letters">
</div>
<div class="login-area">
<span class="login-text" id="loginText">로그인</span>
<span class="user-name" id="userName" style="display: none;">사용자 이름</span>
</div>
</div>
</nav>
<main class="table-content">
<div class="search-top">
<div class="input-container"><input type="text" class="search-patient" placeholder="환자 검색">
<img src="img/search.svg" alt="search" class="search-icon">
</div></div>
<div class="tablehead-container">
<div class="table-head"><span class="title-head">환자 목록</span> <button class="button-table" onclick="openRegisterModal()">환자 등록</button></div>
<div class="table-container"><div class="table">
<table>
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="th">검사 시행일</th>
<th class="th">환자 번호</th>
<th class="th">환자 이름</th>
<th class="th">성별</th>
<th class="th">나이</th>
<th class="th">상태</th>
<th class="th"></th>
</tr>
</thead>
<tbody>
<tr onclick="showDetails('123456')" class="status-critical">
<td class="td">검사 전</td>
<td class="td">842292</td>
<td class="td">이*화</td>
<td class="td">여</td>
<td class="td">2Y(24M)</td>
<td>
<div class="dropdown-container">
<span class="status-label">검사 준비</span>
<button onclick="toggleDropdown(event)" class="dropdown-button"><img src="img/chevron-down.svg"></button>
<ul class="dropdown-menu">
<li class="selected" onclick="changeStatus(this, '검사 준비')">검사 준비</li>
<li onclick="changeStatus(this, '등록됨')">등록됨</li>
</ul>
</div>
</td>
<td class="td"><button class="delete-button" onclick="openModal('홍길동', event)"><img src="img/trash.svg" class="button-delete"></button></td>
</tr>
</tr>
<tr>
<td class="td">검사 전</td>
<td class="td">621441</td>
<td class="td">임*정</td>
<td class="td">여</td>
<td class="td">3Y(40M)</td>
<td class="td">등록됨</td>
<td class="td"><button class="delete-button" onclick="openModal('임*정', event)"><img src="img/trash.svg" class="button-delete"></button></td>
</tr>
</tr>
<tr>
<td class="td">2024.11.22.</td>
<td class="td">33689111</td>
<td class="td">심*민</td>
<td class="td">남</td>
<td class="td">5Y</td>
<td class="td">등록됨</td>
<td class="td"><button class="delete-button" onclick="openModal('심*민', event)"><img src="img/trash.svg" class="button-delete"></button></td>
</tr>
</tr>
<tr>
<td class="td">2024.1.19</td>
<td class="td">872078</td>
<td class="td">현*빈</td>
<td class="td">남</td>
<td class="td">6Y</td>
<td class="td">검사 완료</td>
<td class="td"><button class="delete-button" onclick="openModal('현*빈', event)"><img src="img/trash.svg" class="button-delete"></button></td>
</tr>
</tr>
<tr>
<td class="td">2024.1.11</td>
<td class="td">373487373487</td>
<td class="td">이*민</td>
<td class="td">여</td>
<td class="td">10Y</td>
<td class="td">검사 완료</td>
<td class="td"><button class="delete-button" onclick="openModal('이*민', event)"><img src="img/trash.svg" class="button-delete"></button></td>
</tr>
</tbody>
</table>
<div class="pagination">
<!-- 이전 버튼 -->
<button class="page-btn prev-btn">
<img src="img/arrow-left.svg" alt="이전" class="arrow-icon">이전
</button>
<button class="page-btn" onclick="goToPage(1)">1</button>
<button class="page-btn" onclick="goToPage(2)">2</button>
<button class="page-btn" onclick="goToPage(3)">3</button>
<button class="page-btn">... </button>
<button class="page-btn" onclick="goToPage(8)">8</button>
<button class="page-btn" onclick="goToPage(9)">9</button>
<button class="page-btn" onclick="goToPage(10)">10</button>
<!-- 다음 버튼 -->
<button class="page-btn next-btn">다음 <img src="img/arrow-right.svg" alt="다음" class="arrow-icon">
</button>
</div>
</div>
</div>

</div>
</div>
</div>
</div>

</main>
</div>
<!-- 공통 모달 팝업 -->
<div id="delete-modal" class="modal">
<div class="modal-content">
<!-- 타이틀 -->
<h2 id="delete-title"></h2>
<!-- 본문 -->
<p id="delete-message">등록된 환자 정보가 완전히 삭제됩니다.</p>
<div class="modal-actions">

<button class="cancel-button" onclick="closeModal()">취소</button>
<button class="confirm-button" onclick="confirmDeleteAction()">삭제</button>
</div>
</div>
</div>

<div id="register-modal" class="modal">
<div class="modal-register">
<h2 id="register-title">환자 등록</h2>
<label class="input-label">환자 번호</label>
<input type="text" placeholder="환자 번호 입력" class="styled-input">
<label class="input-label">환자 이름</label>
<input type="text" placeholder="환자 이름 입력" class="styled-input">
<label class="input-label">성별</label>
<div class="button-group" role="group" aria-label="Gender selection">
<input type="radio" class="btn-check" name="gender" id="male" autocomplete="off">
<label class="btn gender-btn" for="male">남성</label>

<input type="radio" class="btn-check" name="gender" id="female" autocomplete="off">
<label class="btn gender-btn" for="female">여성</label>
</div>
<label class="input-label">생년월일</label>
<input type="date" class="styled-input">
<label class="input-label">메모 (선택)</label>
<input type="text" placeholder="메모 입력" class="styled-input">



<div class="modal-actions">
<button class="cancel-button" onclick="closeRegisterModal()">취소</button>
<button class="registerOnly-button" onclick="registerPatient()">등록</button>
<button class="confirm-button" onclick="registerPatient()">등록 및 검사준비</button>

</div>

</div></div>
<!-- JavaScript -->
<script>let currentDeleteName = ''; // 삭제 대상 이름 저장

// 모달 열기
function openModal(name) {
currentDeleteName = name; // 삭제 대상 이름 저장
document.getElementById('delete-title').textContent = `${name}님의 환자 정보를 삭제할까요?`; // 타이틀 업데이트
document.getElementById('delete-message').textContent = `등록된 환자 정보가 완전히 삭제됩니다.`; // 본문 메시지
document.getElementById('delete-modal').style.display = 'flex'; // 모달 표시

}

// 모달 닫기
function closeModal() {
document.getElementById('delete-modal').style.display = 'none'; // 모달 숨김
}

// 확인 버튼 클릭 시 동작
function confirmDeleteAction() {
alert(`${currentDeleteName}님의 환자 정보가 삭제되었습니다.`);
closeModal(); // 모달 숨김
}

function goToPage(pageNumber) {
console.log(`페이지 ${pageNumber}로 이동합니다.`);
// 여기에 페이지네이션 관련 로직 추가
}

// 환자 등록 모달 열기
function openRegisterModal() {
document.getElementById('register-modal').style.display = 'flex'; // 모달 표시
}

// 환자 등록 모달 닫기
function closeRegisterModal() {
document.getElementById('register-modal').style.display = 'none'; // 모달 숨김
}

// 환자 등록 확인
function registerPatient() {
const patientNumber = document.querySelector('#register-modal input[placeholder="환자 번호 입력"]').value;
const patientName = document.querySelector('#register-modal input[placeholder="환자 이름 입력"]').value;

if (patientNumber && patientName) {
alert(`환자 번호: ${patientNumber}, 환자 이름: ${patientName} 등록되었습니다.`);
closeRegisterModal();
} else {
alert('모든 필드를 입력하세요.');
}
}

// 테이블 행 클릭 시 상세 화면으로 이동
function showDetails(patientId) {
// 삭제 버튼이나 드롭다운 관련 클릭 시 이벤트 전파 차단
if (event.target.closest('.delete-button') || event.target.closest('.dropdown-container')) {
return;
}
// 상세 화면 URL로 이동
window.location.href = `/patient/details/${patientId}`;

}
// 삭제 버튼 클릭 시 모달 열기
function openModal(name, event) {
event.stopPropagation(); // 이벤트 전파 차단
currentDeleteName = name; // 삭제 대상 이름 저장
document.getElementById('delete-title').textContent = `${name}님의 환자 정보를 삭제할까요?`;
document.getElementById('delete-message').textContent = `등록된 환자 정보가 완전히 삭제됩니다.`;
document.getElementById('delete-modal').style.display = 'flex'; // 모달 표시
}
// 드롭다운 메뉴 토글
function toggleDropdown(event) {
event.stopPropagation(); // 클릭 이벤트 전파 방지
const container = event.target.closest('.dropdown-container');
container.classList.toggle('active');
}

// 상태값 변경
function changeStatus(element, newStatus) {
const container = element.closest('.dropdown-container');
const statusLabel = container.querySelector('.status-label');
const dropdownMenu = container.querySelector('.dropdown-menu');
statusLabel.textContent = newStatus; // 상태값 업데이트
container.classList.remove('active'); // 드롭다운 메뉴 닫기
}
// 모든 항목에서 'selected' 클래스 제거
dropdownMenu.querySelectorAll('li').forEach((item) => {
item.classList.remove('selected');
});
// 클릭한 항목에 'selected' 클래스 추가
element.classList.add('selected');
// 드롭다운 메뉴 닫기
container.classList.remove('active');
// 문서 외부 클릭 시 드롭다운 메뉴 닫기
document.addEventListener('click', () => {
document.querySelectorAll('.dropdown-container').forEach((container) => {
container.classList.remove('active');
});
});
</script>


</body>
</html>
Loading