focus-timer/log-page.php at main · msenese/focus-timer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<?php
define('LOG_FILE', __DIR__ . '/focus-sessions/task-log.json');
$entries = [];
if (file_exists(LOG_FILE)) {
    $data = json_decode(file_get_contents(LOG_FILE), true);
    if (is_array($data)) $entries = $data;
}
$indexed = [];
foreach ($entries as $i => $e) { $indexed[] = array_merge($e, ['_idx' => $i]); }
$indexed = array_reverse($indexed);
$grouped = [];
foreach ($indexed as $e) {
    $date = date('l, F j Y', strtotime($e['time']));
    $grouped[$date][] = $e;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Log</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
  :root { --bg:#0a0a0a;--surface:#141414;--border:#2a2a2a;--text:#f0f0f0;--muted:#666;--work:#7b8cff;--radius:12px; }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;padding:40px 20px 80px;}
  .page{max-width:680px;margin:0 auto;}
  h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,8vw,5rem);letter-spacing:0.04em;color:var(--work);line-height:1;margin-bottom:6px;}
  .subtitle{color:var(--muted);font-size:0.9rem;margin-bottom:40px;}
  .day-group{margin-bottom:32px;}
  .day-label{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:0.15em;color:var(--muted);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
  .log-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:8px;}
  .log-task{font-size:0.95rem;font-weight:500;color:var(--text);}
  .log-meta{font-size:0.75rem;color:var(--muted);margin-top:4px;letter-spacing:0.04em;}
  .check{color:var(--work);margin-right:8px;}
  .empty{text-align:center;color:var(--muted);padding:60px 0;font-size:0.95rem;line-height:1.8;}
  .back-btn{display:inline-block;margin-bottom:32px;color:var(--muted);font-size:0.85rem;text-decoration:none;letter-spacing:0.06em;}
  .back-btn:hover{color:var(--work);}
  #theme-toggle{position:fixed;top:14px;right:16px;background:none;border:none;cursor:pointer;font-size:1.3rem;opacity:0.4;transition:opacity 0.2s;padding:4px;}
  #theme-toggle:hover{opacity:0.85;}
  body.light-mode{--bg:#f0ede8;--surface:#fff;--border:#ddd;--text:#111;--muted:#888;--work:#3a4fd4;}
</style>
</head>
<body>
<button id="theme-toggle" onclick="toggleTheme()">🌙</button>
<div class="page">
  <h1>Task<br>Log</h1>
  <p class="subtitle" id="subtitle"><?= count($entries) ?> completed task<?= count($entries) !== 1 ? 's' : '' ?></p>
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;">
    <a class="back-btn" style="margin-bottom:0" href="./">&#8592; Back to Timer</a>
    <?php if (!empty($entries)): ?>
      <button onclick="clearAll()" style="background:none;border:1px solid var(--border);color:var(--muted);font-size:0.78rem;padding:6px 12px;border-radius:6px;cursor:pointer;" onmouseover="this.style.borderColor='#f44';this.style.color='#f44'" onmouseout="this.style.borderColor='';this.style.color=''">&#128465; Clear all</button>
    <?php endif; ?>
  </div>

  <?php if (empty($grouped)): ?>
    <div class="empty">No completed tasks yet.<br>Mark tasks as done while running a session to see them here.</div>
  <?php else: ?>
    <?php foreach ($grouped as $date => $dayEntries): ?>
      <div class="day-group">
        <div class="day-label"><?= htmlspecialchars($date) ?></div>
        <?php foreach ($dayEntries as $e): ?>
          <div class="log-card" id="entry-<?= $e['_idx'] ?>" style="display:flex;align-items:center;gap:12px;">
            <div style="flex:1;min-width:0;">
              <div class="log-task"><span class="check">&#10003;</span><?= htmlspecialchars($e['task']) ?></div>
              <div class="log-meta">
                <?php if (!empty($e['session'])): ?><?= htmlspecialchars($e['session']) ?> &middot;<?php endif; ?>
                <?= date('g:i A', strtotime($e['time'])) ?>
              </div>
            </div>
            <button onclick="delEntry(<?= $e['_idx'] ?>)" style="background:none;border:none;color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer;opacity:0.4;padding:4px 8px;flex-shrink:0;" onmouseover="this.style.color='#f44';this.style.opacity=1" onmouseout="this.style.color='';this.style.opacity=0.4">&#215;</button>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endforeach; ?>
  <?php endif; ?>
</div>
<script>
function toggleTheme(){var l=document.body.classList.toggle('light-mode');document.getElementById('theme-toggle').textContent=l?'🌑':'🌙';try{localStorage.setItem('theme',l?'light':'dark');}catch(e){}}
(function(){try{if(localStorage.getItem('theme')==='light'){document.body.classList.add('light-mode');document.addEventListener('DOMContentLoaded',function(){var b=document.getElementById('theme-toggle');if(b)b.textContent='🌑';});}}catch(e){}})();

function updateSub() {
  var n = document.querySelectorAll('.log-card').length;
  var s = document.getElementById('subtitle');
  if (s) s.textContent = n + ' completed task' + (n !== 1 ? 's' : '');
}

function delEntry(i) {
  var el = document.getElementById('entry-' + i);
  if (!el) return;
  fetch('log.php', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({deleteIndex: i})})
    .then(function() {
      el.style.transition = 'opacity 0.3s, transform 0.3s';
      el.style.opacity = 0;
      el.style.transform = 'translateX(20px)';
      setTimeout(function() {
        var group = el.parentElement;
        el.remove();
        if (group && !group.querySelector('.log-card')) group.remove();
        updateSub();
      }, 320);
    })
    .catch(function() { alert('Could not delete entry.'); });
}

function clearAll() {
  if (!confirm('Clear entire task log? This cannot be undone.')) return;
  fetch('log.php', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({clearAll: true})})
    .then(function() {
      document.querySelectorAll('.day-group').forEach(function(g) { g.remove(); });
      var s = document.getElementById('subtitle');
      if (s) s.textContent = '0 completed tasks';
    })
    .catch(function() { alert('Could not clear log.'); });
}
</script>
</body>
</html>