<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이온2 숙제 체크리스트 (Light)</title>
<style>
:root {
--bg-color: #f8f9fa;
--card-bg: #ffffff;
--text-main: #212529;
--text-sub: #868e96;
--border-color: #e9ecef;
--accent-color: #6741d9;
/* 중요도별 색상 */
--prio-high-bg: #fff5f5;
--prio-high-border: #ffc9c9;
--prio-high-text: #fa5252;
--prio-low-opacity: 0.7;
}
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
margin: 0;
padding: 20px;
line-height: 1.5;
}
.container {
max-width: 600px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
}
h1 {
color: var(--accent-color);
margin-bottom: 5px;
font-weight: 800;
}
.reset-info {
font-size: 0.9rem;
color: var(--text-sub);
}
.section {
background-color: var(--card-bg);
border-radius: 16px;
padding: 20px;
margin-bottom: 24px;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.03);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(--border-color);
}
h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
}
.btn-reset {
background-color: #f1f3f5;
color: #495057;
border: none;
padding: 6px 14px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.2s;
}
.btn-reset:hover {
background-color: #e9ecef;
color: #212529;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: flex;
align-items: center;
padding: 14px 10px;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
border-radius: 8px;
transition: background-color 0.2s;
margin-bottom: 4px;
}
li:last-child {
border-bottom: none;
margin-bottom: 0;
}
li:hover {
background-color: #f8f9fa;
}
li.priority-high {
background-color: var(--prio-high-bg);
border: 1px solid var(--prio-high-border);
}
li.priority-high .badge {
background-color: var(--prio-high-text);
color: white;
}
li.priority-low {
opacity: var(--prio-low-opacity);
background-color: #fdfdfd;
}
li.priority-low .badge {
background-color: #dee2e6;
color: #495057;
}
.badge {
font-size: 0.7rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
margin-right: 8px;
background-color: #4c6ef5;
color: white;
display: inline-block;
min-width: 30px;
text-align: center;
}
input[type="checkbox"] {
appearance: none;
width: 22px;
height: 22px;
border: 2px solid #adb5bd;
border-radius: 6px;
margin-right: 16px;
cursor: pointer;
position: relative;
flex-shrink: 0;
background-color: white;
transition: all 0.2s;
}
input[type="checkbox"]:checked {
background-color: var(--accent-color);
border-color: var(--accent-color);
}
input[type="checkbox"]:checked::after {
content: '✔';
position: absolute;
color: white;
font-size: 14px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.task-content {
flex-grow: 1;
}
.task-title {
font-weight: 600;
font-size: 1rem;
display: flex;
align-items: center;
}
.sub-text {
display: block;
font-size: 0.85rem;
color: var(--text-sub);
margin-top: 4px;
}
input[type="checkbox"]:checked + .task-content {
opacity: 0.5;
text-decoration: line-through;
}
@media (max-width: 480px) {
body { padding: 15px; }
li { padding: 12px 8px; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>AION 2 체크리스트</h1>
<p class="reset-info">초기화: 매일/매주 수요일 오전 05:00</p>
</header>
<div class="section">
<div class="section-header">
<h2>일일 숙제 (Daily)</h2>
<button class="btn-reset" onclick="resetChecklist('daily')">초기화</button>
</div>
<ul id="daily-list">
<li class="priority-high">
<input type="checkbox" id="d1">
<div class="task-content">
<div class="task-title"><span class="badge">필수</span>사명: 임무 5회</div>
<span class="sub-text">★ '어포,오드에너지' 1순위</span>
</div>
</li>
<li class="priority-high">
<input type="checkbox" id="d3">
<div class="task-content">
<div class="task-title"><span class="badge">필수</span>원정/초월 소진</div>
<span class="sub-text">05시/13시/21시 충전 / 우선 순위 1위(원정↔초월)</span>
</div>
</li>
<li>
<input type="checkbox" id="d7">
<div class="task-content">
<div class="task-title"><span class="badge">권장</span>이벤트 아이템 변환하기</div>
<span class="sub-text">일일 제한 횟수 확인 및 변환 (까먹지 말기)</span>
</div>
</li>
<li>
<input type="checkbox" id="d4">
<div class="task-content">
<div class="task-title"><span class="badge">권장</span>악몽 던전</div>
<span class="sub-text">입장권 소모 그냥 후순위(아리엘/지켈석상)</span>
</div>
</li>
<li>
<input type="checkbox" id="d2">
<div class="task-content">
<div class="task-title"><span class="badge">권장</span>보급 의뢰: 긴급 1회</div>
<span class="sub-text">제작/파밍 재료 납품 (어비스 포인트)</span>
</div>
</li>
<li>
<input type="checkbox" id="d6">
<div class="task-content">
<div class="task-title"><span class="badge">권장</span>시공의 균열 참여</div>
<span class="sub-text">3시간 간격(2시/5시/8시/11시) (펫작/데바니온/허리띠)</span>
</div>
</li>
<li class="priority-low">
<input type="checkbox" id="d5">
<div class="task-content">
<div class="task-title"><span class="badge">선택</span>검은 구름 무역단 확인</div>
<span class="sub-text">키나 상품(펫/외형) 확인</span>
</div>
</li>
<li class="priority-low">
<input type="checkbox" id="d5">
<div class="task-content">
<div class="task-title"><span class="badge">선택</span>일일 100만 키나</div>
<span class="sub-text">쥰내 시간 남을때만 가자</span>
</div>
</li>
</ul>
</div>
<div class="section">
<div class="section-header">
<h2> 주간 숙제 (Weekly)</h2>
<button class="btn-reset" onclick="resetChecklist('weekly')">초기화</button>
</div>
<ul id="weekly-list">
<li class="priority-high">
<input type="checkbox" id="w3">
<div class="task-content">
<div class="task-title"><span class="badge">필수</span>각성전 / 토벌전</div>
<span class="sub-text">★ 마석, 돌파석, 아리엘, 실렌(용돈) 파밍</span>
</div>
</li>
<li class="priority-high">
<input type="checkbox" id="w1">
<div class="task-content">
<div class="task-title"><span class="badge">필수</span>일일 던전 7회</div>
<span class="sub-text">강화석/펫작 (한번에 몰아서 가능(왠만하면 그냥 몰아서))</span>
</div>
</li>
<li>
<input type="checkbox" id="w6">
<div class="task-content">
<div class="task-title"><span class="badge">권장</span>오드 에너지 변환 및 구매</div>
<span class="sub-text">시간없어도 만들어두기(얘는 월요일 초기화)</span>
</div>
</li>
<li>
<input type="checkbox" id="w4">
<div class="task-content">
<div class="task-title"><span class="badge">권장</span>보급 의뢰: 주간 1회</div>
<span class="sub-text">대량 어비스 포인트 획득</span>
</div>
</li>
<li class="priority-low">
<input type="checkbox" id="w2">
<div class="task-content">
<div class="task-title"><span class="badge">선택</span>사명: 지령 12회</div>
<span class="sub-text">귀찮으면 패스</span>
</div>
</li>
<li class="priority-low">
<input type="checkbox" id="w5">
<div class="task-content">
<div class="task-title"><span class="badge">선택</span>어비스(하층) 7시간</div>
<span class="sub-text">시간 없으면 패스</span>
</div>
</li>
</ul>
</div>
</div>
<footer>
만든이 <span class="credit">네몬: 백세인생</span>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(box => {
// 부르는거
const savedState = localStorage.getItem(box.id);
if (savedState === 'true') {
box.checked = true;
}
// 상태변경 저장
box.addEventListener('change', () => {
localStorage.setItem(box.id, box.checked);
});
});
document.querySelectorAll('li').forEach(item => {
item.addEventListener('click', (e) => {
if (e.target.tagName !== 'INPUT' && !e.target.closest('label')) {
const checkbox = item.querySelector('input[type="checkbox"]');
checkbox.checked = !checkbox.checked;
checkbox.dispatchEvent(new Event('change'));
}
});
});
});
function resetChecklist(type) {
const msg = type === 'daily' ? '일일 숙제를 초기화하시겠습니까?' : '주간 숙제를 초기화하시겠습니까?';
if (!confirm(msg)) return;
const selector = type === 'daily' ? '#daily-list input[type="checkbox"]' : '#weekly-list input[type="checkbox"]';
document.querySelectorAll(selector).forEach(box => {
box.checked = false;
localStorage.setItem(box.id, 'false');
});
}
</script>
</body>
</html>
댐배
