{"id":9,"date":"2026-05-21T22:50:24","date_gmt":"2026-05-21T13:50:24","guid":{"rendered":"https:\/\/studywithmei.com\/?page_id=9"},"modified":"2026-05-21T22:57:02","modified_gmt":"2026-05-21T13:57:02","slug":"timer-pop","status":"publish","type":"page","link":"https:\/\/studywithmei.com\/?page_id=9","title":{"rendered":"Pop \u30bf\u30a4\u30de\u30fc"},"content":{"rendered":"\n<div class=\"swm-app\" id=\"swm-pop\" style=\"--bg:#fff8e7;--accent:#ff6b6b;--text:#333333;--sub:#888888;--surface:rgba(255,255,255,0.78);--border:rgba(255,107,107,0.22)\">\n<style>\n\n.swm-app*{box-sizing:border-box;margin:0;padding:0}\n.swm-app{\n  background:var(--bg);color:var(--text);\n  font-family:system-ui,-apple-system,sans-serif;\n  min-height:82vh;padding:1.5rem 1rem 3rem;\n  display:flex;flex-direction:column;align-items:center;gap:1.4rem;\n  width:100%;\n}\n.swm-app .ad-zone{\n  width:100%;max-width:728px;min-height:90px;\n  border:1px dashed rgba(128,128,128,0.3);border-radius:8px;\n  display:flex;align-items:center;justify-content:center;\n  color:rgba(128,128,128,0.5);font-size:0.8rem;\n}\n.swm-app .nav-row{\n  width:100%;max-width:500px;\n  display:flex;align-items:center;justify-content:space-between;gap:.5rem;\n  flex-wrap:wrap;\n}\n.swm-app .back-link{color:var(--sub);font-size:.85rem;text-decoration:none}\n.swm-app .back-link:hover{color:var(--accent)}\n.swm-app .theme-name{font-size:1.05rem;font-weight:700;color:var(--accent);letter-spacing:.04em;flex:1;text-align:center}\n.swm-app .lang-sw{display:flex;gap:.35rem;align-items:center}\n.swm-app .lang-btn{\n  background:transparent;border:none;cursor:pointer;\n  font-size:.8rem;font-weight:600;color:var(--sub);\n  padding:.22rem .4rem;border-radius:4px;font-family:inherit;\n}\n.swm-app .lang-btn:hover{color:var(--text)}\n.swm-app .lang-btn.active{color:var(--accent);background:rgba(128,128,128,.1)}\n.swm-app .lang-sep{color:rgba(128,128,128,.4);font-size:.85rem}\n\n.swm-app .timer-card{\n  background:var(--surface);border:1px solid var(--border);\n  border-radius:20px;padding:2.2rem 1.8rem;\n  width:100%;max-width:500px;\n  display:flex;flex-direction:column;align-items:center;gap:1.4rem;\n  box-shadow:0 4px 24px rgba(0,0,0,.1);\n}\n.swm-app .circle-wrap{\n  position:relative;\n  width:clamp(200px,55vw,250px);height:clamp(200px,55vw,250px);\n}\n.swm-app .timer-svg{width:100%;height:100%;transform:rotate(-90deg)}\n.swm-app .tc-bg{fill:none;stroke:var(--border);stroke-width:8}\n.swm-app .tc-fg{\n  fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;\n  stroke-dasharray:502.65;stroke-dashoffset:0;\n}\n.swm-app .time-display{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  font-family:'SF Mono','Menlo','Roboto Mono',monospace;\n  font-size:clamp(2.2rem,7vw,3.2rem);font-weight:700;color:var(--text);letter-spacing:2px;\n}\n@keyframes swm-flash{0%,100%{color:var(--text)}50%{color:var(--accent)}}\n.swm-app .time-display.flash{animation:swm-flash .5s ease-in-out 4}\n\n.swm-app .time-input{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center}\n.swm-app .time-input input[type=number]{\n  width:4rem;text-align:center;padding:.4rem .2rem;\n  border:1.5px solid var(--border);border-radius:8px;\n  background:var(--surface);color:var(--text);\n  font-family:'SF Mono','Menlo',monospace;font-size:1.05rem;font-weight:600;\n  -moz-appearance:textfield;appearance:textfield;\n}\n.swm-app .time-input input::-webkit-inner-spin-button{display:none}\n.swm-app .time-input input:focus{outline:none;border-color:var(--accent)}\n.swm-app .time-unit{font-size:.88rem;color:var(--sub)}\n.swm-app .time-colon{font-size:1.2rem;font-weight:700;color:var(--sub)}\n\n.swm-app button{font-family:inherit;cursor:pointer}\n.swm-app .btn{\n  padding:.6rem 1.4rem;border-radius:50px;font-size:.92rem;\n  font-weight:600;border:none;transition:all .2s ease;letter-spacing:.02em;\n}\n.swm-app .btn:active{transform:scale(.96)}\n.swm-app .btn:disabled{opacity:.38;cursor:not-allowed;transform:none}\n.swm-app .btn-start{background:var(--accent);color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.2)}\n.swm-app .btn-start:hover:not(:disabled){filter:brightness(1.1)}\n.swm-app .btn-pause,.swm-app .btn-reset{\n  background:var(--surface);color:var(--text);border:1.5px solid var(--border);\n}\n.swm-app .btn-pause:hover:not(:disabled),.swm-app .btn-reset:hover:not(:disabled){border-color:var(--accent)}\n.swm-app .btn-set{\n  background:transparent;color:var(--accent);border:1.5px solid var(--accent);\n  padding:.38rem .9rem;font-size:.85rem;\n}\n.swm-app .btn-set:hover{background:var(--accent);color:#fff}\n.swm-app .btn-fs{\n  background:transparent;color:var(--sub);border:1.5px solid var(--border);\n  font-size:.82rem;padding:.38rem 1rem;\n}\n.swm-app .btn-fs:hover{color:var(--text);border-color:var(--accent)}\n\n.swm-app .ctrl-row{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}\n.swm-app .alarm-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}\n.swm-app .alarm-label{font-size:.85rem;color:var(--sub)}\n.swm-app .alarm-btns{display:flex;gap:.35rem}\n.swm-app .alarm-btn{\n  padding:.28rem .8rem;border-radius:50px;font-size:.82rem;font-weight:500;\n  background:var(--surface);color:var(--sub);border:1.5px solid var(--border);\n  transition:all .2s ease;cursor:pointer;font-family:inherit;\n}\n.swm-app .alarm-btn:hover{border-color:var(--accent);color:var(--text)}\n.swm-app .alarm-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}\n\n.swm-app .session-info{display:flex;align-items:baseline;gap:.4rem;font-size:.9rem;color:var(--sub)}\n.swm-app .ses-count{font-family:'SF Mono','Menlo',monospace;font-size:1.6rem;font-weight:700;color:var(--accent);line-height:1}\n\n.swm-app .ja,.swm-app .en{display:none}\n.swm-app.lang-ja .ja{display:inline}\n.swm-app.lang-en .en{display:inline}\n.swm-app:not(.lang-ja):not(.lang-en) .ja{display:inline}\n\n@media(max-width:480px){\n  .swm-app .timer-card{padding:1.4rem .9rem}\n  .swm-app .btn{padding:.52rem .95rem;font-size:.86rem}\n  .swm-app .ctrl-row{gap:.45rem}\n}\n\n<\/style>\n\n<div class=\"ad-zone ad-top\"><!-- AdSense\uff08\u4e0a\u90e8\uff09--><\/div>\n\n<div class=\"nav-row\">\n  <a class=\"back-link\" href=\"\/\"><span class=\"ja\">\u2190 \u30c6\u30fc\u30de\u4e00\u89a7<\/span><span class=\"en\">\u2190 Themes<\/span><\/a>\n  <span class=\"theme-name\"><span class=\"ja\">\u30dd\u30c3\u30d7<\/span><span class=\"en\">Pop<\/span><\/span>\n  <div class=\"lang-sw\">\n    <button class=\"lang-btn\" data-lang=\"ja\">\u65e5\u672c\u8a9e<\/button>\n    <span class=\"lang-sep\">|<\/span>\n    <button class=\"lang-btn\" data-lang=\"en\">EN<\/button>\n  <\/div>\n<\/div>\n\n<div class=\"timer-card\">\n  <div class=\"circle-wrap\">\n    <svg class=\"timer-svg\" viewBox=\"0 0 200 200\">\n      <circle class=\"tc-bg\" cx=\"100\" cy=\"100\" r=\"80\"\/>\n      <circle class=\"tc-fg\" id=\"swm-fg-pop\" cx=\"100\" cy=\"100\" r=\"80\" stroke-dasharray=\"502.65\" stroke-dashoffset=\"0\"\/>\n    <\/svg>\n    <div class=\"time-display\" id=\"swm-disp-pop\">25:00<\/div>\n  <\/div>\n\n  <div class=\"time-input\">\n    <input id=\"swm-m-pop\" type=\"number\" value=\"25\" min=\"0\" max=\"99\">\n    <label for=\"swm-m-pop\" class=\"time-unit\"><span class=\"ja\">\u5206<\/span><span class=\"en\">min<\/span><\/label>\n    <span class=\"time-colon\">:<\/span>\n    <input id=\"swm-s-pop\" type=\"number\" value=\"0\" min=\"0\" max=\"59\">\n    <label for=\"swm-s-pop\" class=\"time-unit\"><span class=\"ja\">\u79d2<\/span><span class=\"en\">sec<\/span><\/label>\n    <button class=\"btn btn-set\" id=\"swm-set-pop\"><span class=\"ja\">\u8a2d\u5b9a<\/span><span class=\"en\">Set<\/span><\/button>\n  <\/div>\n\n  <div class=\"ctrl-row\">\n    <button class=\"btn btn-start\" id=\"swm-start-pop\"><span class=\"ja\">\u30b9\u30bf\u30fc\u30c8<\/span><span class=\"en\">Start<\/span><\/button>\n    <button class=\"btn btn-pause\" id=\"swm-pause-pop\" disabled><span class=\"ja\">\u4e00\u6642\u505c\u6b62<\/span><span class=\"en\">Pause<\/span><\/button>\n    <button class=\"btn btn-reset\" id=\"swm-reset-pop\"><span class=\"ja\">\u30ea\u30bb\u30c3\u30c8<\/span><span class=\"en\">Reset<\/span><\/button>\n  <\/div>\n\n  <div class=\"alarm-row\">\n    <span class=\"alarm-label\"><span class=\"ja\">\ud83d\udd14 \u30a2\u30e9\u30fc\u30e0<\/span><span class=\"en\">\ud83d\udd14 Alarm<\/span><\/span>\n    <div class=\"alarm-btns\">\n      <button class=\"alarm-btn active\" data-alarm=\"bell\"><span class=\"ja\">\u30d9\u30eb<\/span><span class=\"en\">Bell<\/span><\/button>\n      <button class=\"alarm-btn\" data-alarm=\"chime\"><span class=\"ja\">\u30c1\u30e3\u30a4\u30e0<\/span><span class=\"en\">Chime<\/span><\/button>\n      <button class=\"alarm-btn\" data-alarm=\"beep\"><span class=\"ja\">\u30d3\u30fc\u30d7<\/span><span class=\"en\">Beep<\/span><\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"session-info\">\n    <span><span class=\"ja\">\u672c\u65e5\u306e\u30bb\u30c3\u30b7\u30e7\u30f3<\/span><span class=\"en\">Today&#8217;s Sessions<\/span><\/span>\n    <strong class=\"ses-count\" id=\"swm-ses-pop\">0<\/strong>\n    <span class=\"ja\">\u56de<\/span>\n  <\/div>\n\n  <button class=\"btn btn-fs\" id=\"swm-fs-pop\"><span class=\"ja\">\u5168\u753b\u9762<\/span><span class=\"en\">Fullscreen<\/span><\/button>\n<\/div>\n\n<div class=\"ad-zone ad-bottom\"><!-- AdSense\uff08\u4e0b\u90e8\uff09--><\/div>\n\n<script>\n\n(function(){\n'use strict';\nvar ROOT=document.getElementById('swm-pop');\nvar CIRC=502.65;\nvar SESKEY='swm_ses_'+new Date().toISOString().slice(0,10);\nvar total=25*60,rem=25*60,running=false,alarm='bell',tid=null;\n\nfunction $(id){return document.getElementById(id);}\nvar dispEl=$('swm-disp-pop'), fgEl=$('swm-fg-pop'),\n    sesEl=$('swm-ses-pop'), startBtn=$('swm-start-pop'),\n    pauseBtn=$('swm-pause-pop'), resetBtn=$('swm-reset-pop'),\n    setBtn=$('swm-set-pop'), fsBtn=$('swm-fs-pop'),\n    mInp=$('swm-m-pop'), sInp=$('swm-s-pop');\n\nfunction pad(n){return(n<10?'0':'')+n;}\nfunction fmt(s){return pad(Math.floor(s\/60))+':'+pad(s%60);}\nfunction getSes(){return parseInt(localStorage.getItem(SESKEY)||'0',10);}\nfunction incSes(){var n=getSes()+1;localStorage.setItem(SESKEY,n);return n;}\n\nfunction render(){\n  dispEl.textContent=fmt(rem);\n  fgEl.style.strokeDashoffset=total>0?CIRC*(1-rem\/total):CIRC;\n  sesEl.textContent=getSes();\n  startBtn.disabled=running;\n  pauseBtn.disabled=!running;\n}\n\n\/* Audio *\/\nvar actx=null;\nfunction getCtx(){\n  if(!actx)actx=new(window.AudioContext||window.webkitAudioContext)();\n  if(actx.state==='suspended')actx.resume();\n  return actx;\n}\nfunction playBell(){\n  var c=getCtx(),o=c.createOscillator(),g=c.createGain();\n  o.connect(g);g.connect(c.destination);\n  o.frequency.setValueAtTime(880,c.currentTime);\n  o.frequency.exponentialRampToValueAtTime(440,c.currentTime+1.8);\n  g.gain.setValueAtTime(0.7,c.currentTime);\n  g.gain.exponentialRampToValueAtTime(0.001,c.currentTime+1.8);\n  o.start();o.stop(c.currentTime+1.8);\n}\nfunction playChime(){\n  var c=getCtx();\n  [523.25,659.25,783.99,1046.5].forEach(function(f,i){\n    var o=c.createOscillator(),g=c.createGain();\n    o.connect(g);g.connect(c.destination);o.frequency.value=f;\n    var t=c.currentTime+i*0.28;\n    g.gain.setValueAtTime(0.5,t);g.gain.exponentialRampToValueAtTime(0.001,t+0.9);\n    o.start(t);o.stop(t+0.9);\n  });\n}\nfunction playBeep(){\n  var c=getCtx();\n  for(var i=0;i<3;i++){\n    var o=c.createOscillator(),g=c.createGain();\n    o.type='square';o.connect(g);g.connect(c.destination);o.frequency.value=880;\n    var t=c.currentTime+i*0.38;\n    g.gain.setValueAtTime(0.25,t);g.gain.setValueAtTime(0.001,t+0.18);\n    o.start(t);o.stop(t+0.2);\n  }\n}\nfunction playAlarm(){\n  try{if(alarm==='bell')playBell();else if(alarm==='chime')playChime();else playBeep();}\n  catch(e){console.warn('[SWM]',e);}\n}\n\n\/* Timer *\/\nfunction start(){\n  if(running||rem<=0)return;\n  running=true;render();\n  tid=setInterval(function(){\n    rem--;\n    if(rem<=0){rem=0;clearInterval(tid);running=false;onDone();}\n    else render();\n  },1000);\n}\nfunction pause(){if(!running)return;clearInterval(tid);running=false;render();}\nfunction reset(){\n  clearInterval(tid);running=false;rem=total;\n  fgEl.style.transition='none';\n  fgEl.style.strokeDashoffset='0';\n  dispEl.classList.remove('flash');\n  setTimeout(function(){fgEl.style.transition='';},50);\n  render();\n}\nfunction onDone(){\n  playAlarm();\n  var n=incSes();sesEl.textContent=n;\n  dispEl.textContent='00:00';\n  dispEl.classList.add('flash');\n  setTimeout(function(){dispEl.classList.remove('flash');},2400);\n  render();\n}\nfunction setTime(){\n  var m=parseInt((mInp||{}).value||'25',10),s=parseInt((sInp||{}).value||'0',10);\n  if(isNaN(m)||isNaN(s))return;\n  if(running)pause();\n  total=m*60+s;rem=total;\n  fgEl.style.transition='none';fgEl.style.strokeDashoffset='0';\n  setTimeout(function(){fgEl.style.transition='';},50);\n  render();\n}\n\n\/* Language *\/\nvar LKEY='swm_lang';\nfunction applyLang(lang){\n  localStorage.setItem(LKEY,lang);\n  ROOT.classList.remove('lang-ja','lang-en');\n  ROOT.classList.add('lang-'+lang);\n  ROOT.querySelectorAll('.lang-btn').forEach(function(b){\n    b.classList.toggle('active',b.dataset.lang===lang);\n  });\n}\n\n\/* Fullscreen *\/\nfunction toggleFs(){\n  if(!document.fullscreenElement)\n    document.documentElement.requestFullscreen().catch(function(){});\n  else document.exitFullscreen();\n}\n\n\/* Event bindings *\/\nstartBtn.addEventListener('click',start);\npauseBtn.addEventListener('click',pause);\nresetBtn.addEventListener('click',reset);\nif(setBtn)setBtn.addEventListener('click',setTime);\nif(fsBtn)fsBtn.addEventListener('click',toggleFs);\n[mInp,sInp].forEach(function(el){\n  if(el)el.addEventListener('keydown',function(e){if(e.key==='Enter')setTime();});\n});\nROOT.querySelectorAll('.alarm-btn').forEach(function(btn){\n  btn.addEventListener('click',function(){\n    ROOT.querySelectorAll('.alarm-btn').forEach(function(b){b.classList.remove('active');});\n    btn.classList.add('active');alarm=btn.dataset.alarm;playAlarm();\n  });\n});\nROOT.querySelectorAll('.lang-btn').forEach(function(btn){\n  btn.addEventListener('click',function(){applyLang(btn.dataset.lang);});\n});\ndocument.addEventListener('keydown',function(e){\n  if(e.code==='Space'&#038;&#038;e.target.tagName!=='INPUT'&#038;&#038;e.target.tagName!=='BUTTON'){\n    e.preventDefault();if(running)pause();else start();\n  }\n});\n\n\/* Init *\/\napplyLang(localStorage.getItem(LKEY)||'ja');\nrender();\n})();\n\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u2190 \u30c6\u30fc\u30de\u4e00\u89a7\u2190 Themes \u30dd\u30c3\u30d7Pop \u65e5\u672c\u8a9e | EN 25:00 \u5206min : \u79d2sec \u8a2d\u5b9aSet \u30b9\u30bf\u30fc\u30c8Start \u4e00\u6642\u505c\u6b62Pause \u30ea\u30bb\u30c3\u30c8Reset \ud83d\udd14 \u30a2\u30e9\u30fc\u30e0\ud83d\udd14 Alarm \u30d9\u30ebBell \u30c1\u30e3\u30a4 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/studywithmei.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studywithmei.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/studywithmei.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/studywithmei.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studywithmei.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":1,"href":"https:\/\/studywithmei.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/studywithmei.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/studywithmei.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}