commitcode/index.html at main · nyriq/commitcode · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CommitCode Popup</title>
    <link rel="stylesheet" href="/src/popup/index.css">
  </head>
  <body class="w-[320px] bg-zinc-950 text-zinc-200 antialiased relative overflow-hidden font-sans border border-zinc-800 m-0 p-0">
    <!-- Background texture -->
    <div class="fixed inset-0 bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.08)_0%,transparent_60%)] z-0 pointer-events-none"></div>

    <div class="relative z-10 p-5 flex flex-col h-full">
      <!-- Header -->
      <div class="flex items-center gap-2 mb-4">
        <img src="/public/logo.png" alt="CommitCode" class="w-6 h-6 object-contain" onerror="this.style.display='none'">
        <h2 class="text-lg font-medium text-zinc-100 tracking-wide m-0">CommitCode</h2>
      </div>

      <p class="text-xs text-zinc-400 mb-5 leading-relaxed m-0">Your successful submissions are synced automatically.</p>

      <!-- Queue Container -->
      <div class="bg-zinc-900/50 border border-zinc-800/80 rounded-md p-4 mb-5 shadow-inner">
        <div class="flex items-center justify-between mb-3">
          <h4 class="text-xs font-mono text-zinc-300 uppercase tracking-wider m-0">Pending Queue</h4>
          <span id="queue-count" class="bg-blue-500/20 text-blue-400 text-[10px] px-1.5 py-0.5 rounded font-bold">0</span>
        </div>

        <div id="queue-list" class="max-h-[160px] overflow-y-auto pr-1 -mr-1 space-y-2 custom-scrollbar">
          <div class="text-xs text-zinc-500 text-center py-4 font-mono italic">Loading...</div>
        </div>
      </div>

      <!-- Footer Action -->
      <button id="open-options" class="w-full bg-blue-600 hover:bg-blue-500 text-white text-xs font-medium px-4 py-2.5 rounded-sm transition-colors shadow-[0_0_10px_rgba(37,99,235,0.1)] focus:outline-none focus:ring-2 focus:ring-blue-500/50 flex items-center justify-center gap-2 cursor-pointer border-none m-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
        Preferences
      </button>
    </div>
    <script type="module" src="/src/popup/index.ts"></script>
  </body>
</html>