afkode/hud.html at main · ohernandezdev/afkode · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>AFKode HUD</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
      html, body { background: transparent; overflow: hidden; height: 100%; }
      body {
        font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
        display: flex; align-items: center; justify-content: center;
      }
      .pill {
        display: flex; align-items: center; gap: 8px;
        height: 32px; padding: 0 6px 0 12px;
        background: rgba(13, 14, 18, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
        color: #c9d1d9; font-size: 11.5px; white-space: nowrap;
      }
      .drag { display: flex; align-items: center; gap: 8px; cursor: grab; }
      .dot { width: 8px; height: 8px; border-radius: 50%; background: #5c6370; }
      .dot.working { background: #d97757; box-shadow: 0 0 6px 1px rgba(217, 119, 87, 0.55); animation: pulse 1.6s ease-in-out infinite; }
      .dot.waiting { background: #e5c07b; animation: blink 0.8s ease-in-out infinite; }
      .dot.done { background: #67c987; }
      @keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
      @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
      .label b { font-weight: 600; color: #f2f2f3; }
      .label i.detail { font-style: normal; color: #8b93a1; font-size: 10.5px; }
      .open {
        display: grid; place-items: center; width: 22px; height: 22px;
        border: 0; border-radius: 50%;
        background: rgba(255, 255, 255, 0.07); color: #8b93a1;
        cursor: pointer; font-size: 11px;
      }
      .open:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
      .open.reply { background: rgba(229, 192, 123, 0.16); color: #e5c07b; }
      .open.reply:hover { background: rgba(229, 192, 123, 0.3); }
      .hidden { display: none; }
    </style>
    <script type="module" src="/src/hud.ts" defer></script>
  </head>
  <body>
    <div class="pill">
      <span class="drag" data-tauri-drag-region>
        <span class="dot" id="dot" data-tauri-drag-region></span>
        <span class="label" id="label" data-tauri-drag-region>AFKode</span>
      </span>
      <button class="open reply hidden" id="reply" title="Alt+P">↩</button>
      <button class="open" id="open" title="Open overlay (Alt+X)">⤢</button>
    </div>
  </body>
</html>