296 lines
7.8 KiB
HTML
296 lines
7.8 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', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #333;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10000;
|
||
}
|
||
|
||
.modal-container {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
max-width: 600px;
|
||
width: 90%;
|
||
text-align: center;
|
||
position: relative;
|
||
animation: modalFadeIn 0.5s ease-out;
|
||
}
|
||
|
||
@keyframes modalFadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.8) translateY(-50px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1) translateY(0);
|
||
}
|
||
}
|
||
|
||
.close-btn {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 20px;
|
||
background: none;
|
||
border: none;
|
||
font-size: 24px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
padding: 5px;
|
||
border-radius: 50%;
|
||
width: 35px;
|
||
height: 35px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
background: #f0f0f0;
|
||
color: #666;
|
||
}
|
||
|
||
.rest-icon {
|
||
font-size: 4rem;
|
||
margin-bottom: 20px;
|
||
animation: bounce 2s infinite;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
40% {
|
||
transform: translateY(-10px);
|
||
}
|
||
60% {
|
||
transform: translateY(-5px);
|
||
}
|
||
}
|
||
|
||
.rest-title {
|
||
font-size: 2.5rem;
|
||
color: #4a5568;
|
||
margin-bottom: 15px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.rest-subtitle {
|
||
font-size: 1.2rem;
|
||
color: #718096;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.timer-display {
|
||
font-size: 3rem;
|
||
color: #667eea;
|
||
font-weight: bold;
|
||
margin-bottom: 30px;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.activity-section {
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 25px;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.activity-title {
|
||
font-size: 1.3rem;
|
||
color: #4a5568;
|
||
margin-bottom: 15px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.activity-suggestion {
|
||
font-size: 1.1rem;
|
||
color: #2d3748;
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
|
||
.saying-section {
|
||
background: linear-gradient(135deg, #ffeaa7, #fab1a0);
|
||
border-radius: 12px;
|
||
padding: 25px;
|
||
margin-bottom: 25px;
|
||
color: #2d3748;
|
||
}
|
||
|
||
.saying-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.saying-content {
|
||
font-size: 1.1rem;
|
||
font-style: italic;
|
||
line-height: 1.6;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.saying-author {
|
||
font-size: 0.9rem;
|
||
color: #666;
|
||
text-align: right;
|
||
}
|
||
|
||
.actions {
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #e2e8f0;
|
||
color: #4a5568;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #cbd5e0;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 6px;
|
||
background: #e2e8f0;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
border-radius: 3px;
|
||
transition: width 1s ease;
|
||
}
|
||
|
||
.loading-spinner {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid #f3f3f3;
|
||
border-top: 2px solid #667eea;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="modal-overlay" id="modalOverlay">
|
||
<div class="modal-container">
|
||
<button class="close-btn" id="closeBtn" title="ESC키로 닫기">×</button>
|
||
|
||
<div class="rest-icon">🧘♀️</div>
|
||
<h1 class="rest-title">휴식 시간입니다!</h1>
|
||
<p class="rest-subtitle">열심히 일한 당신, 잠시 휴식을 취하세요</p>
|
||
|
||
<div class="timer-display" id="timerDisplay">05:00</div>
|
||
|
||
<div class="activity-section">
|
||
<h3 class="activity-title">💡 추천 활동</h3>
|
||
<div class="activity-suggestion" id="activitySuggestion">
|
||
<div class="loading-spinner"></div>
|
||
활동을 불러오는 중...
|
||
</div>
|
||
</div>
|
||
|
||
<div class="saying-section">
|
||
<h3 class="saying-title">
|
||
<span>✨</span>
|
||
<span>타냐의 한마디</span>
|
||
<span>✨</span>
|
||
</h3>
|
||
<div class="saying-content" id="sayingContent">
|
||
<div class="loading-spinner"></div>
|
||
어록을 불러오는 중...
|
||
</div>
|
||
<div class="saying-author" id="sayingAuthor"></div>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<button class="btn btn-secondary" id="skipBtn">휴식 건너뛰기</button>
|
||
</div>
|
||
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="rest-modal.js"></script>
|
||
</body>
|
||
</html> |