Lock-In/options.html at main · vishnuvgn/Lock-In · 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
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Lock In</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/png" sizes="16x16" href="icons/icon16.png">
  <link rel="icon" type="image/png" sizes="19x19" href="icons/icon19.png">
  <link rel="icon" type="image/png" sizes="32x32" href="icons/icon32.png">
  <link rel="icon" type="image/png" sizes="38x38" href="icons/icon38.png">
  <link rel="icon" type="image/png" sizes="48x48" href="icons/icon48.png">
  <link rel="icon" type="image/png" sizes="128x128" href="icons/icon128.png">


  <style>
    body { font:14px system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0; padding:16px; width:340px; }
    h1 { font-size:16px; margin:0 0 12px; }
    .section { margin:12px 0; }
    .row { display:flex; gap:8px; }
    input[type="text"], input[type="number"] { flex:1; padding:6px 8px; }
    button { padding:6px 10px; cursor:pointer; }
    ul { list-style:none; padding:0; margin:8px 0 0; }
    li { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid #efefef; }
    .muted { color:#666; font-size:12px; }
    .grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-top:8px; }
    .danger { color:#c00; }
    .count { font-weight:600; }

    /* Modal styles */
    .modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.45);
      display: none; align-items: center; justify-content: center;
      padding: 16px;
    }
    .modal-overlay.open { display: flex; }
    .modal {
      width: 100%; max-width: 520px;
      background: #fff;
      color: #111;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    @media (prefers-color-scheme: dark) {
      .modal { background: #1f1f1f; color: #f0f0f0; }
    }
    .modal h2 { margin: 0 0 10px; font-size: 18px; }
    .quote {
      margin: 6px 0 16px;
      line-height: 1.5;
      font-style: italic;
    }
    .modal .actions { display: flex; gap: 10px; justify-content: flex-end; }
    .btn-primary {
      border: 1px solid rgba(0,0,0,.2);
      border-radius: 10px;
      padding: 8px 12px;
      background: #efefef;
    }
    .btn-danger {
      border: 1px solid rgba(200,0,0,.35);
      color: #b00000;
      border-radius: 10px;
      padding: 8px 12px;
      background: transparent;
    }
  </style>
</head>
<body>
  <h1>Lock In</h1>

  <div class="section">
    <div class="row">
      <input id="host" placeholder="e.g. youtube.com" />
      <button id="add">Add</button>
    </div>
    <ul id="list"></ul>
    <div class="muted">Domains only. Subdomains included.</div>
  </div>

  <div class="section">
    <div>Status: <span id="status" class="count">Idle</span></div>
    <div class="grid">
      <button data-min="15">15 min</button>
      <button data-min="25">25 min</button>
      <button data-min="60">60 min</button>
      <button data-infinite="true">∞</button>
    </div>
    <div class="row" style="margin-top:8px">
      <input id="customMin" type="number" min="1" placeholder="Custom minutes" />
      <button id="startCustom">Start</button>
      <button id="cancelLock" type="button" class="danger">Cancel</button>
    </div>
    <div class="muted">
      Blocks only while a timer runs, or in ∞ mode. Timed locks auto-stop & tabs resume.
    </div>
  </div>

  <!-- Confirmation Modal -->
  <div id="confirmModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="confirmTitle">
    <div class="modal">
      <h2 id="confirmTitle">Before you cancel…</h2>
      <div class="quote">
        Lock in bro
      </div>
      <div class="actions">
        <button id="dismissCancel" class="btn-primary">No, keep focusing</button>
        <button id="confirmCancel" class="btn-danger">you still want to cancel?</button>
      </div>
    </div>
  </div>

  <script src="options.js"></script>
</body>
</html>