time-tracker-extension/popup.html at main · lightaylor/time-tracker-extension · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
          min-width: 280px; padding: 12px; margin: 0;
          font-family: 'Segoe UI', system-ui, sans-serif;
          background: #f1f3f5; color: #333; user-select: none;
        }
        .card { background: white; padding: 12px; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 10px; }
        .timer-val {
          font-size: 38px; font-weight: 600; color: #007bff;
          text-align: center; margin-bottom: 12px; letter-spacing: -1px;
          font-variant-numeric: tabular-nums;
        }
        .btn-row { display: flex; gap: 8px; }
        button { cursor: pointer; border: none; border-radius: 10px; padding: 10px; font-weight: bold; flex: 1; font-size: 14px; transition: 0.2s; }
        .btn-start { background: #40c057; color: white; }
        .btn-stop { background: #fa5252; color: white; }
        .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
        .nav-btn { background: #f8f9fa; border: 1px solid #e9ecef; padding: 2px 8px; border-radius: 4px; cursor: pointer; }
        .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
        .day-header { font-size: 11px; color: #adb5bd; font-weight: 600; padding-bottom: 4px; }
        .calendar-day {
          padding: 6px 0; border-radius: 8px; background: #f8f9fa; min-height: 40px;
          cursor: pointer; border: 1.5px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .calendar-day.active { background: #e7f1ff; border-color: #a5d8ff; }
        .calendar-day.selected { border-color: #fab005; background: #fff9db; }
        .day-num { font-size: 11px; font-weight: 600; }
        .day-hours { color: #228be6; font-size: 9px; font-weight: 800; margin-top: 1px; }
        .total-row { margin-top: 10px; padding-top: 8px; border-top: 1px solid #f1f3f5; display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; }
        .selected-info { font-size: 11px; font-weight: 700; color: #868e96; margin-bottom: 6px; }
        .edit-row { display: flex; align-items: center; justify-content: space-between; }
        input { width: 55px; padding: 6px; border: 1px solid #dee2e6; border-radius: 6px; text-align: center; font-weight: 600; outline: none; }
        .btn-set { background: #339af0; color: white; padding: 6px 14px; border-radius: 6px; flex: none; font-size: 12px; }
    </style>
</head>
<body>
<div class="card">
    <div id="timerDisplay" class="timer-val">00:00:00</div>
    <div class="btn-row">
        <button id="startBtn" class="btn-start">Start</button>
        <button id="stopBtn" class="btn-stop">Stop</button>
    </div>
</div>
<div class="card">
    <div class="calendar-header">
        <button id="prevMonth" class="nav-btn">◀</button>
        <span id="currentMonthLabel"></span>
        <button id="nextMonth" class="nav-btn">▶</button>
    </div>
    <div id="calendarGrid" class="calendar"></div>
    <div class="total-row">
        <span>Monthly Total</span>
        <span id="monthlyTotal" style="color: #228be6;">0m</span>
    </div>
</div>
<div class="card">
    <div class="selected-info">Selected: <span id="selectedDateLabel" style="color:#339af0;">-</span></div>
    <div class="edit-row">
        <span style="font-size:12px; font-weight:700;">Adjust Time (h)</span>
        <div style="display:flex; gap:6px;">
            <input type="number" id="manualHours" step="0.5" value="1.0" min="0">
            <button id="manualSaveBtn" class="btn-set">Set</button>
        </div>
    </div>
</div>
<script src="popup.js"></script>
</body>
</html>