409 lines
13 KiB
HTML
409 lines
13 KiB
HTML
|
<!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;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 배경 애니메이션 요소 */
|
||
|
|
.bg-animation {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.floating-circle {
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
animation: float 6s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle1 { width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s; }
|
||
|
|
.circle2 { width: 120px; height: 120px; top: 60%; left: 80%; animation-delay: 2s; }
|
||
|
|
.circle3 { width: 60px; height: 60px; top: 80%; left: 20%; animation-delay: 4s; }
|
||
|
|
|
||
|
|
@keyframes float {
|
||
|
|
0%, 100% { transform: translateY(0px) scale(1); opacity: 0.7; }
|
||
|
|
50% { transform: translateY(-20px) scale(1.1); opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 메인 컨테이너 */
|
||
|
|
.kiosk-container {
|
||
|
|
background: rgba(255, 255, 255, 0.15);
|
||
|
|
backdrop-filter: blur(20px);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
border-radius: 32px;
|
||
|
|
padding: 60px 80px;
|
||
|
|
text-align: center;
|
||
|
|
box-shadow:
|
||
|
|
0 8px 32px 0 rgba(31, 38, 135, 0.37),
|
||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||
|
|
width: 90vw;
|
||
|
|
max-width: 800px;
|
||
|
|
min-height: 80vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
animation: slideUp 0.8s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideUp {
|
||
|
|
from { opacity: 0; transform: translateY(50px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 헤더 */
|
||
|
|
.header {
|
||
|
|
margin-bottom: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hospital-logo {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
|
|
border-radius: 20px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 0 auto 30px;
|
||
|
|
box-shadow: 0 10px 30px rgba(79, 172, 254, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hospital-logo::before {
|
||
|
|
content: "🏥";
|
||
|
|
font-size: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
color: white;
|
||
|
|
font-size: 2.8rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
color: rgba(255, 255, 255, 0.9);
|
||
|
|
font-size: 1.3rem;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 버튼 컨테이너 */
|
||
|
|
.button-container {
|
||
|
|
display: flex;
|
||
|
|
gap: 40px;
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-top: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 메인 버튼 스타일 */
|
||
|
|
.patient-button {
|
||
|
|
background: rgba(255, 255, 255, 0.2);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
|
|
border-radius: 24px;
|
||
|
|
padding: 50px 60px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
min-width: 280px;
|
||
|
|
text-decoration: none;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.patient-button::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: -100%;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
|
|
transition: left 0.6s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.patient-button:hover::before {
|
||
|
|
left: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.patient-button:hover {
|
||
|
|
transform: translateY(-8px) scale(1.02);
|
||
|
|
box-shadow:
|
||
|
|
0 20px 50px rgba(0, 0, 0, 0.15),
|
||
|
|
0 0 0 1px rgba(255, 255, 255, 0.4);
|
||
|
|
border-color: rgba(255, 255, 255, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.patient-button:active {
|
||
|
|
transform: translateY(-4px) scale(0.98);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 새환자 버튼 */
|
||
|
|
.new-patient {
|
||
|
|
background: linear-gradient(135deg, rgba(46, 213, 115, 0.8) 0%, rgba(0, 184, 148, 0.8) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.new-patient:hover {
|
||
|
|
background: linear-gradient(135deg, rgba(46, 213, 115, 0.9) 0%, rgba(0, 184, 148, 0.9) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 기존환자 버튼 */
|
||
|
|
.existing-patient {
|
||
|
|
background: linear-gradient(135deg, rgba(52, 152, 219, 0.8) 0%, rgba(155, 89, 182, 0.8) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.existing-patient:hover {
|
||
|
|
background: linear-gradient(135deg, rgba(52, 152, 219, 0.9) 0%, rgba(155, 89, 182, 0.9) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 버튼 아이콘 */
|
||
|
|
.button-icon {
|
||
|
|
font-size: 4rem;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 버튼 텍스트 */
|
||
|
|
.button-text {
|
||
|
|
color: white;
|
||
|
|
font-size: 1.8rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-desc {
|
||
|
|
color: rgba(255, 255, 255, 0.9);
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 하단 정보 */
|
||
|
|
.footer-info {
|
||
|
|
margin-top: 50px;
|
||
|
|
color: rgba(255, 255, 255, 0.8);
|
||
|
|
font-size: 1rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-time {
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-text {
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 반응형 디자인 */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.kiosk-container {
|
||
|
|
padding: 40px 30px;
|
||
|
|
width: 95vw;
|
||
|
|
min-height: 90vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 2.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-container {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 30px;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.patient-button {
|
||
|
|
min-width: 100%;
|
||
|
|
max-width: 400px;
|
||
|
|
padding: 40px 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-icon {
|
||
|
|
font-size: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-text {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-info {
|
||
|
|
flex-direction: column;
|
||
|
|
text-align: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 접근성 향상 */
|
||
|
|
.patient-button:focus {
|
||
|
|
outline: 3px solid #FFD700;
|
||
|
|
outline-offset: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 로딩 애니메이션 */
|
||
|
|
.loading {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
color: white;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinner {
|
||
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
||
|
|
border-radius: 50%;
|
||
|
|
border-top: 3px solid white;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
animation: spin 1s linear infinite;
|
||
|
|
margin: 0 auto 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
0% { transform: rotate(0deg); }
|
||
|
|
100% { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 배경 애니메이션 -->
|
||
|
|
<div class="bg-animation">
|
||
|
|
<div class="floating-circle circle1"></div>
|
||
|
|
<div class="floating-circle circle2"></div>
|
||
|
|
<div class="floating-circle circle3"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 키오스크 메인 화면 -->
|
||
|
|
<div class="kiosk-container">
|
||
|
|
<div class="header">
|
||
|
|
<div class="hospital-logo"></div>
|
||
|
|
<h1 class="title">병원 접수</h1>
|
||
|
|
<p class="subtitle">환자 유형을 선택해 주세요<br>해당하는 버튼을 터치해 주시기 바랍니다</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="button-container">
|
||
|
|
<a href="#" class="patient-button new-patient" onclick="handleSelection('new')">
|
||
|
|
<span class="button-icon">👤➕</span>
|
||
|
|
<div class="button-text">신규 환자</div>
|
||
|
|
<div class="button-desc">처음 내원하시는 분<br>신규 등록이 필요합니다</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="patient-button existing-patient" onclick="handleSelection('existing')">
|
||
|
|
<span class="button-icon">👤✓</span>
|
||
|
|
<div class="button-text">기존 환자</div>
|
||
|
|
<div class="button-desc">이전에 내원하신 분<br>진료카드를 준비해 주세요</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer-info">
|
||
|
|
<div class="current-time" id="currentTime"></div>
|
||
|
|
<div class="help-text">도움이 필요하시면 안내데스크로 문의해 주세요</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 로딩 화면 -->
|
||
|
|
<div class="loading" id="loadingScreen">
|
||
|
|
<div class="spinner"></div>
|
||
|
|
<div>접수 화면으로 이동 중...</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 현재 시간 표시
|
||
|
|
function updateTime() {
|
||
|
|
const now = new Date();
|
||
|
|
const timeString = now.toLocaleString('ko-KR', {
|
||
|
|
year: 'numeric',
|
||
|
|
month: 'long',
|
||
|
|
day: 'numeric',
|
||
|
|
hour: '2-digit',
|
||
|
|
minute: '2-digit',
|
||
|
|
weekday: 'long'
|
||
|
|
});
|
||
|
|
document.getElementById('currentTime').textContent = timeString;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 페이지 로드 시 시간 업데이트 및 1분마다 갱신
|
||
|
|
updateTime();
|
||
|
|
setInterval(updateTime, 60000);
|
||
|
|
|
||
|
|
// 버튼 선택 처리
|
||
|
|
function handleSelection(type) {
|
||
|
|
// 로딩 화면 표시
|
||
|
|
document.getElementById('loadingScreen').style.display = 'block';
|
||
|
|
|
||
|
|
// 실제 구현에서는 여기서 다음 화면으로 이동
|
||
|
|
setTimeout(() => {
|
||
|
|
if (type === 'new') {
|
||
|
|
alert('신규 환자 등록 화면으로 이동합니다.\n\n필요한 서류:\n- 신분증\n- 보험카드');
|
||
|
|
// 실제로는 window.location.href = 'new-patient.html';
|
||
|
|
} else {
|
||
|
|
alert('기존 환자 접수 화면으로 이동합니다.\n\n필요한 준비물:\n- 진료카드 또는 주민등록번호\n- 보험카드');
|
||
|
|
// 실제로는 window.location.href = 'existing-patient.html';
|
||
|
|
}
|
||
|
|
document.getElementById('loadingScreen').style.display = 'none';
|
||
|
|
}, 1500);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 키보드 접근성 지원
|
||
|
|
document.addEventListener('keydown', function(e) {
|
||
|
|
if (e.key === '1') {
|
||
|
|
handleSelection('new');
|
||
|
|
} else if (e.key === '2') {
|
||
|
|
handleSelection('existing');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 터치 피드백 효과
|
||
|
|
document.querySelectorAll('.patient-button').forEach(button => {
|
||
|
|
button.addEventListener('touchstart', function() {
|
||
|
|
this.style.transform = 'scale(0.95)';
|
||
|
|
});
|
||
|
|
|
||
|
|
button.addEventListener('touchend', function() {
|
||
|
|
this.style.transform = '';
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 화면 절전 방지 (Wake Lock API)
|
||
|
|
if ('wakeLock' in navigator) {
|
||
|
|
navigator.wakeLock.request('screen').catch(err => {
|
||
|
|
console.log('Wake lock failed:', err);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|