메이플 타이머 업댓안되서 불편해서 업뎃되기 전에 임시로 쓸만한거
<div class="wrap">
<header>
<h1>메이플 <span>알림</span> 타이머</h1>
<span class="pill" id="sharePill">화면 공유 꺼짐</span>
<div class="hd-actions">
<label class="vol" for="vol">소리 <input id="vol" type="range" min="0" max="1" step="0.05"></label>
<label class="vol" for="voice"><input id="voice" type="checkbox"> 음성</label>
<button class="ghost" id="testBtn">소리 테스트</button>
<button id="pipBtn">미니 창</button>
<button class="primary" id="shareBtn">화면 공유 시작</button>
</div>
</header>
<div class="grid">
<section class="panel">
<h2>게임 화면 <small>드래그해서 감지할 아이콘을 고르세요</small></h2>
<div class="stage" id="stage">
<canvas id="pv"></canvas>
<div class="pickbar" id="pickBar" hidden><span>화면에서 룬을 클릭하세요</span><button type="button" id="pickCancel">취소</button></div>
<div class="empty" id="stageEmpty">
<div>게임 화면을 공유하면 여기에 보여요</div>
<button class="primary" id="shareBtn2">화면 공유 시작</button>
</div>
</div>
<ul class="steps">
<li><b>1</b> 화면 공유에서 메이플 창 선택</li>
<li><b>2</b> 스킬·버프 아이콘이나 미니맵을 드래그</li>
<li><b>3</b> 알림 방식 고르고 추가</li>
</ul>
<div class="sel" id="selBox" hidden>
<canvas id="zoom" width="132" height="132"></canvas>
<div class="sel-form">
<input type="text" id="selName" placeholder="이름 (예: 오리진 스킬)" maxlength="20">
<div class="seg" role="group" aria-label="알림 방식">
<button type="button" data-mode="match" aria-pressed="true">지금 모습으로 돌아오면</button>
<button type="button" data-mode="change" aria-pressed="false">지금 모습에서 바뀌면</button>
<button type="button" data-mode="color" aria-pressed="false">룬이 나타나면</button>
</div>
<div class="colrow" id="colRow" hidden>
<span class="sw" id="selSw"></span><span id="selColTxt">룬 색</span>
<button type="button" class="sm" id="pickSel">화면에서 룬 색 찍기</button>
</div>
<div class="tiny muted" id="modeHint"></div>
<div class="row">
<div class="nudge" aria-label="위치 조정">
<span></span><button data-n="0,-1" title="위로">↑</button><span></span>
<button data-n="-1,0" title="왼쪽">←</button><button data-n="0,1" title="아래로">↓</button><button data-n="1,0" title="오른쪽">→</button>
</div>
<div class="row">
<button class="sm" data-s="-2" title="작게">－ 크기</button>
<button class="sm" data-s="2" title="크게">＋ 크기</button>
</div>
</div>
<div class="row">
<button class="primary" id="addW">감지 추가</button>
<button class="ghost" id="cancelSel">취소</button>
</div>
</div>
</div>
</section>
<div style="display:flex;flex-direction:column;gap:16px;min-width:0">
<section class="panel">
<h2>감지 알림 <small>화면을 보고 알려줘요</small></h2>
<div class="list" id="wList"></div>
</section>
<section class="panel">
<h2>반복 타이머 <small>시간 되면 알려줘요</small></h2>
<div class="list" id="tList"></div>
</section>
<section class="panel">
<h2>최근 알림</h2>
<ul class="log" id="log"></ul>
</section>
</div>
</div>
<p class="tiny muted" style="margin:0">v1.1 · 2026-10-26 Claude와 만든 개인용 도구. 모든 처리는 이 PC 브라우저 안에서만 해요. 화면은 어디에도 전송되지 않아요. 미니 창이 게임 위에 보이려면 메이플을 창 모드나 전체 창 모드로 실행하세요.</p>
</div>
<div id="toast" role="status"></div>
<video id="vid" muted playsinline hidden></video>
<div class="wrap">
<header>
<h1>메이플 <span>알림</span> 타이머</h1>
<span class="pill" id="sharePill">화면 공유 꺼짐</span>
<div class="hd-actions">
<label class="vol" for="vol">소리 <input id="vol" type="range" min="0" max="1" step="0.05"></label>
<label class="vol" for="voice"><input id="voice" type="checkbox"> 음성</label>
<button class="ghost" id="testBtn">소리 테스트</button>
<button id="pipBtn">미니 창</button>
<button class="primary" id="shareBtn">화면 공유 시작</button>
</div>
</header>
<div class="grid">
<section class="panel">
<h2>게임 화면 <small>드래그해서 감지할 아이콘을 고르세요</small></h2>
<div class="stage" id="stage">
<canvas id="pv"></canvas>
<div class="pickbar" id="pickBar" hidden><span>화면에서 룬을 클릭하세요</span><button type="button" id="pickCancel">취소</button></div>
<div class="empty" id="stageEmpty">
<div>게임 화면을 공유하면 여기에 보여요</div>
<button class="primary" id="shareBtn2">화면 공유 시작</button>
</div>
</div>
<ul class="steps">
<li><b>1</b> 화면 공유에서 메이플 창 선택</li>
<li><b>2</b> 스킬·버프 아이콘이나 미니맵을 드래그</li>
<li><b>3</b> 알림 방식 고르고 추가</li>
</ul>
<div class="sel" id="selBox" hidden>
<canvas id="zoom" width="132" height="132"></canvas>
<div class="sel-form">
<input type="text" id="selName" placeholder="이름 (예: 오리진 스킬)" maxlength="20">
<div class="seg" role="group" aria-label="알림 방식">
<button type="button" data-mode="match" aria-pressed="true">지금 모습으로 돌아오면</button>
<button type="button" data-mode="change" aria-pressed="false">지금 모습에서 바뀌면</button>
<button type="button" data-mode="color" aria-pressed="false">룬이 나타나면</button>
</div>
<div class="colrow" id="colRow" hidden>
<span class="sw" id="selSw"></span><span id="selColTxt">룬 색</span>
<button type="button" class="sm" id="pickSel">화면에서 룬 색 찍기</button>
</div>
<div class="tiny muted" id="modeHint"></div>
<div class="row">
<div class="nudge" aria-label="위치 조정">
<span></span><button data-n="0,-1" title="위로">↑</button><span></span>
<button data-n="-1,0" title="왼쪽">←</button><button data-n="0,1" title="아래로">↓</button><button data-n="1,0" title="오른쪽">→</button>
</div>
<div class="row">
<button class="sm" data-s="-2" title="작게">－ 크기</button>
<button class="sm" data-s="2" title="크게">＋ 크기</button>
</div>
</div>
<div class="row">
<button class="primary" id="addW">감지 추가</button>
<button class="ghost" id="cancelSel">취소</button>
</div>
</div>
</div>
</section>
<div style="display:flex;flex-direction:column;gap:16px;min-width:0">
<section class="panel">
<h2>감지 알림 <small>화면을 보고 알려줘요</small></h2>
<div class="list" id="wList"></div>
</section>
<section class="panel">
<h2>반복 타이머 <small>시간 되면 알려줘요</small></h2>
<div class="list" id="tList"></div>
</section>
<section class="panel">
<h2>최근 알림</h2>
<ul class="log" id="log"></ul>
</section>
</div>
</div>
<p class="tiny muted" style="margin:0">v1.1 · 2026-10-26 Claude와 만든 개인용 도구. 모든 처리는 이 PC 브라우저 안에서만 해요. 화면은 어디에도 전송되지 않아요. 미니 창이 게임 위에 보이려면 메이플을 창 모드나 전체 창 모드로 실행하세요.</p>
</div>
<div id="toast" role="status"></div>
<video id="vid" muted playsinline hidden></video>
최강행운
