메이플 타이머 업댓안되서 불편해서 업뎃되기 전에 임시로 쓸만한거




<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>