Code Display

Enter only the code you want to display:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Simple break tracker</title>
<style>
:root{
  --bg:#f3f5f7;--panel:#fff;--ink:#1a2433;--muted:#667385;--line:#dde3ea;
  --av:#1f9d68;--br:#d99a12;--mt:#3568d4;--aw:#7d8899;
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111826;--panel:#1a2338;--ink:#e9eef7;--muted:#9aa6ba;--line:#2b3750;
  --av:#3ccf91;--br:#f0b73a;--mt:#6e9bff;--aw:#8a96ab;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#111826;--panel:#1a2338;--ink:#e9eef7;--muted:#9aa6ba;--line:#2b3750;--av:#3ccf91;--br:#f0b73a;--mt:#6e9bff;--aw:#8a96ab;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.45;font-size:16px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--mt);outline-offset:2px}
.wrap{max-width:480px;margin:0 auto;padding:20px 16px 48px}
h1{font-size:20px;margin:0 0 14px}
h2{font-size:16px;margin:0 0 8px}
.lunch{--c:#b4488f}.available{--c:var(--av)}.break{--c:var(--br)}.meeting{--c:var(--mt)}.away{--c:var(--aw)}
.now{background:var(--c);color:#fff;border-radius:16px;padding:22px;text-align:center;margin-bottom:12px;transition:background .3s}
.now.break{color:#1a2433}
.now b{display:block;font-size:34px;line-height:1.1}
.now span{font-size:30px;font-variant-numeric:tabular-nums;opacity:.9}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.pick button{padding:14px 8px;border-radius:12px;border:2px solid var(--c);background:var(--panel);cursor:pointer;font-weight:600}
.pick button[aria-pressed="true"]{background:var(--c);color:#fff}
.pick .break[aria-pressed="true"]{color:#1a2433}
.sum{color:var(--muted);margin:0 0 16px;text-align:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row .g{flex:1;min-width:0}
.row.done .t{text-decoration:line-through;opacity:.55}
.m{color:var(--muted);font-size:14px}
.tag{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.x{border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px 8px}
form{display:flex;gap:8px;margin-top:10px}
input[type=text]{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
input[type=time]{padding:9px 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.add{padding:9px 14px;border-radius:8px;border:0;background:var(--ink);color:var(--panel);font-weight:600;cursor:pointer}
.empty{color:var(--muted);margin:0}
.pick button:last-child{grid-column:1/-1}
@media (prefers-color-scheme:dark){.lunch{--c:#e279bd}.now.lunch,.pick .lunch[aria-pressed="true"]{color:#1a2433}}
.twrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
tr.today td{font-weight:600}
td:first-child{white-space:nowrap}
th,td{text-align:right;padding:9px 4px;border-top:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
thead th{border-top:0;color:var(--muted);font-size:13px;font-weight:600}
tfoot td{font-weight:700;border-top:2px solid var(--ink)}
td .tag{display:inline-block;margin-right:8px}
.err{color:#c0392b;font-size:14px;min-height:1em;margin:6px 0 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Neumorphism */
:root{--bg:#e3e8ef;--panel:#e3e8ef;--line:#cdd4df;--sd:#b6bfcc;--sl:#ffffff;--ink:#222d40;--muted:#5a667a;
  --raise:7px 7px 16px var(--sd),-7px -7px 16px var(--sl);--rs:4px 4px 9px var(--sd),-4px -4px 9px var(--sl);
  --inset:inset 5px 5px 10px var(--sd),inset -5px -5px 10px var(--sl)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#252d3d;--panel:#252d3d;--line:#333d52;--sd:#171d29;--sl:#333f56;--ink:#e9eef7;--muted:#a3aec2}}
body{background:var(--bg)}
.wrap{padding:26px 22px 56px}
h1{font-size:22px}
.card{background:var(--bg);border:0;border-radius:24px;padding:20px;margin-bottom:22px;box-shadow:var(--raise)}
.now,.now.break,.now.lunch{background:var(--bg);color:var(--ink);border-radius:28px;padding:26px;box-shadow:var(--raise);margin-bottom:22px}
.now b::before{content:"";display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--c);margin-right:12px;vertical-align:middle;box-shadow:var(--inset),0 0 0 4px var(--bg),0 0 12px var(--c)}
.pick{gap:16px;margin-bottom:22px}
.pick button[data-s]{border:0;border-radius:18px;background:var(--bg);color:var(--ink);box-shadow:var(--rs);padding:16px 8px;transition:box-shadow .2s}
.pick button[data-s]::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:8px;opacity:.5}
.pick button[data-s][aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:var(--inset)}
.pick button[data-s][aria-pressed="true"]::before{opacity:1;box-shadow:0 0 8px var(--c)}
.pick button[data-s]:active,.add:active,.x:active{box-shadow:var(--inset)}
input[type=text],input[type=time]{background:var(--bg);border:0;border-radius:14px;padding:11px 12px;box-shadow:var(--inset)}
.add{background:var(--bg);color:var(--ink);border-radius:14px;padding:11px 16px;box-shadow:var(--rs)}
.x{width:34px;height:34px;padding:0;border-radius:50%;background:var(--bg);box-shadow:var(--rs);font-size:18px;line-height:1}
.twrap{border-radius:18px;padding:6px 12px;box-shadow:var(--inset)}
tfoot td{border-top:2px solid var(--line)}
.err{color:#b02a1c}
</style>
</head>
<body>
<div class="wrap">
  <h1 id="date">Today</h1>

<div class="now" id="now" aria-live="polite"><b id="label"></b><span id="timer"></span></div>
  <div class="pick" id="pick">
    <button class="available" data-s="available">Available</button>
    <button class="break" data-s="break">On break</button>
    <button class="lunch" data-s="lunch">Lunch</button>
    <button class="meeting" data-s="meeting">In meeting</button>
    <button class="away" data-s="away">Away</button>
  </div>
  <p class="sum" id="sum"></p>

<div class="card">
    <h2>Daily time summary</h2>
    <div class="twrap"><table>
      <thead><tr><th>Date</th><th>Available</th><th>Meetings</th><th>Breaks</th><th>Lunch</th></tr></thead>
      <tbody id="tbl"></tbody>
      <tfoot id="tfoot"></tfoot>
    </table></div>
  </div>

<div class="card">
    <h2>Today’s activity</h2>
    <div id="log"></div>
  </div>
</div>

var S;
    try { S = JSON.parse(localStorage.getItem(KEY)) } catch (e) { S = null }
    function fresh() { return { day: day(), cur: 'available', since: Date.now(), log: [], meetings: [] } }
    if (!S || !S.log) S = fresh();
    if (!S.hist) S.hist = [];
    function save() { try { localStorage.setItem(KEY, JSON.stringify(S)) } catch (e) { } }
    function totals(log, cur, since, until) {
      var t = { available: 0, meeting: 0, break: 0, lunch: 0, away: 0 };
      log.forEach(function (e) { t[e.s] += e.end - e.start });
      if (until > since) t[cur] += until - since;
      return t;
    }
    function roll() {
      if (S.day === day()) return;
      var d0 = new Date(S.day), endDay = new Date(d0.getFullYear(), d0.getMonth(), d0.getDate() + 1).getTime();
      var h = S.hist || []; h.push({ ts: d0.getTime(), t: totals(S.log, S.cur, S.since, endDay) });
      S = fresh(); S.hist = h; save(); render();
    }

function render() {
      $('now').className = 'now ' + S.cur;
      $('label').textContent = NAMES[S.cur];
      [].forEach.call($('pick').children, function (b) { b.setAttribute('aria-pressed', b.dataset.s === S.cur) });
      $('date').textContent = new Date().toLocaleDateString([], { weekday: 'long', day: 'numeric', month: 'long' });

var all = S.log.slice().reverse();
      all.unshift({ s: S.cur, start: S.since, end: null });
      $('log').innerHTML = all.map(function (e) {
        return '<div class="row ' + e.s + '"><i class="tag"></i><div class="g">' + NAMES[e.s] + '</div>'
          + '<div class="m">' + clock(e.start) + (e.end ? ' – ' + clock(e.end) + ' · ' + Math.max(1, Math.round((e.end - e.start) / 60000)) + ' min' : ' – now') + '</div></div>';
      }).join('');
      tick();
    }

function tick() {
      $('timer').textContent = dur(Date.now() - S.since);
      var bm = Math.round(breakMs() / 60000);
      $('sum').textContent = 'Break time today: ' + bm + ' min';
      renderTable();
    }

$('pick').addEventListener('click', function (e) { var b = e.target.closest('button'); if (b) setStatus(b.dataset.s) });

render();
    roll();
    setInterval(function () { roll(); tick() }, 1000);
  })();
</script>
</body>
</html>

Code Display

Screen Output