홈 탐색 도움말
가입하기 로그인
av2x
/
Dis2Hook
1
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
트리: 5554a3cdd8
브랜치 태그
Dis2Hook
/
index.html

index.html 28 KB
히스토리 Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>Dis2Hook — Relay Console</title>
    7. 

  7. <style>
    8. 

  8.   :root{
    9. 

  9.     --ink:#14161C; --panel:#1C1F28; --panel-2:#22263100; --well:#171A22;
    10. 

  10.     --line:#2C3040; --line-soft:#242836;
    11. 

  11.     --text:#E8E6DF; --muted:#8B8FA0; --faint:#5A5F70;
    12. 

  12.     --amber:#F0A93B; --amber-dim:#7A5B26;
    13. 

  13.     --blurple:#5865F2; --blurple-dim:#3A4290;
    14. 

  14.     --ok:#57C08A; --fail:#E06060; --warn:#E0B060;
    15. 

  15.     --mono:ui-monospace,"JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
    16. 

  16.     --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
    17. 

  17.   }
    18. 

  18.   *{box-sizing:border-box;margin:0;padding:0}
    19. 

  19.   html{color-scheme:dark}
    20. 

  20.   body{background:var(--ink);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;min-height:100vh}
    21. 

  21.   body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    22. 

  22.     background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px)}
    23. 

  23.   button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
    24. 

  24.   input,select,textarea{font-family:var(--mono);font-size:13px;color:var(--text);
    25. 

  25.     background:var(--well);border:1px solid var(--line);border-radius:4px;padding:7px 9px;width:100%}
    26. 

  26.   input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
    27. 

  27.   input::placeholder,textarea::placeholder{color:var(--faint)}
    28. 

  28.   textarea{resize:vertical;min-height:72px;line-height:1.55}
    29. 

  29.   ::selection{background:var(--amber-dim);color:var(--text)}
    30. 

  30. 

  31.   .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
    32. 

  32. 

  33.   /* ---------- rack header ---------- */
    34. 

  34.   header{position:relative;z-index:1;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1E212B,#181B23);
    35. 

  35.     display:flex;align-items:center;gap:22px;padding:14px 22px;flex-wrap:wrap}
    36. 

  36.   .plate{display:flex;align-items:baseline;gap:10px}
    37. 

  37.   .plate h1{font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:.28em;text-transform:uppercase}
    38. 

  38.   .plate h1 .two{color:var(--amber)}
    39. 

  39.   .plate .ver{font-family:var(--mono);font-size:11px;color:var(--faint)}
    40. 

  40.   .lamp{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.03)}
    41. 

  41.   .lamp.ok{background:var(--ok);box-shadow:0 0 8px rgba(87,192,138,.7)}
    42. 

  42.   .lamp.fail{background:var(--fail);box-shadow:0 0 8px rgba(224,96,96,.7)}
    43. 

  43.   .meter{display:flex;gap:20px;margin-left:auto;align-items:center;flex-wrap:wrap}
    44. 

  44.   .gauge{text-align:right}
    45. 

  45.   .gauge b{display:block;font-family:var(--mono);font-size:16px;font-weight:600}
    46. 

  46.   .gauge span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
    47. 

  47.   .gauge.relayed b{color:var(--ok)} .gauge.failed b{color:var(--fail)}
    48. 

  48.   #botLabel{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted)}
    49. 

  49. 

  50.   main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:26px 22px 90px;
    51. 

  51.     display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px}
    52. 

  52.   @media(max-width:960px){main{grid-template-columns:1fr}}
    53. 

  53. 

  54.   section h2{display:flex;align-items:center;gap:10px;margin-bottom:14px;
    55. 

  55.     font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
    56. 

  56.   section h2::after{content:"";flex:1;height:1px;background:var(--line-soft)}
    57. 

  57. 

  58.   /* ---------- patch strips (source cards) ---------- */
    59. 

  59.   .strip{background:var(--panel);border:1px solid var(--line);border-radius:6px;margin-bottom:14px;overflow:hidden}
    60. 

  60.   .strip.disabled{opacity:.55}
    61. 

  61.   .strip-head{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer}
    62. 

  62.   .strip-head:hover{background:rgba(255,255,255,.02)}
    63. 

  63.   .strip-name{font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    64. 

  64. 

  65.   /* signature: the relay line */
    66. 

  66.   .relay{flex:1;display:flex;align-items:center;min-width:120px;height:22px}
    67. 

  67.   .jack{width:10px;height:10px;border-radius:50%;flex:none;border:2px solid}
    68. 

  68.   .jack.src{border-color:var(--amber);background:var(--amber-dim)}
    69. 

  69.   .jack.dst{border-color:var(--blurple);background:var(--blurple-dim)}
    70. 

  70.   .wire{flex:1;height:2px;background:linear-gradient(90deg,var(--amber-dim),var(--blurple-dim));position:relative;overflow:visible}
    71. 

  71.   .pulse{position:absolute;top:-2px;left:0;width:14px;height:6px;border-radius:3px;background:var(--amber);
    72. 

  72.     filter:drop-shadow(0 0 5px var(--amber));opacity:0}
    73. 

  73.   .strip.firing .pulse{animation:travel .9s ease-in-out}
    74. 

  74.   @keyframes travel{0%{opacity:1;left:0;background:var(--amber)}100%{opacity:1;left:calc(100% - 14px);background:var(--blurple);filter:drop-shadow(0 0 6px var(--blurple))}}
    75. 

  75.   @media(prefers-reduced-motion:reduce){.strip.firing .pulse{animation:none}}
    76. 

  76.   .chan-tag{font-family:var(--mono);font-size:11px;color:var(--blurple);flex:none;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    77. 

  77.   .caret{color:var(--faint);flex:none;transition:transform .15s}
    78. 

  78.   .strip.open .caret{transform:rotate(90deg)}
    79. 

  79. 

  80.   .strip-body{display:none;border-top:1px solid var(--line-soft);padding:16px;background:var(--well)}
    81. 

  81.   .strip.open .strip-body{display:block}
    82. 

  82.   .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    83. 

  83.   @media(max-width:640px){.grid2{grid-template-columns:1fr}}
    84. 

  84.   .field{margin-bottom:12px;min-width:0}
    85. 

  85.   .field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
    86. 

  86.   .field .hint{font-size:11px;color:var(--faint);margin-top:4px;font-family:var(--sans)}
    87. 

  87.   .inline{display:flex;gap:6px}
    88. 

  88.   .inline input{flex:1;min-width:0}
    89. 

  89. 

  90.   .hookurl{display:flex;gap:6px;align-items:center;background:var(--panel);border:1px dashed var(--line);
    91. 

  91.     border-radius:4px;padding:7px 9px;font-family:var(--mono);font-size:12px;color:var(--amber);overflow:hidden}
    92. 

  92.   .hookurl code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    93. 

  93. 

  94.   .filters .filter-row{display:grid;grid-template-columns:1fr 110px 1fr 30px;gap:6px;margin-bottom:6px}
    95. 

  95.   @media(max-width:640px){.filters .filter-row{grid-template-columns:1fr 90px 1fr 30px}}
    96. 

  96. 

  97.   .strip-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;align-items:center}
    98. 

  98. 

  99.   /* ---------- buttons ---------- */
    100. 

  100.   .btn{font-family:var(--mono);font-size:12px;padding:7px 13px;border-radius:4px;border:1px solid var(--line);
    101. 

  101.     background:var(--panel);color:var(--text);letter-spacing:.04em}
    102. 

  102.   .btn:hover{border-color:var(--muted)}
    103. 

  103.   .btn.primary{background:var(--amber);border-color:var(--amber);color:#1A150A;font-weight:700}
    104. 

  104.   .btn.primary:hover{filter:brightness(1.08)}
    105. 

  105.   .btn.ghost{border-color:transparent;color:var(--muted)} .btn.ghost:hover{color:var(--text)}
    106. 

  106.   .btn.danger{color:var(--fail);border-color:transparent} .btn.danger:hover{border-color:var(--fail)}
    107. 

  107.   .btn.tiny{padding:4px 8px;font-size:11px}
    108. 

  108.   .btn:disabled{opacity:.45;cursor:default}
    109. 

  109. 

  110.   .toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--mono);font-size:11px;
    111. 

  111.     letter-spacing:.1em;text-transform:uppercase;color:var(--muted);user-select:none}
    112. 

  112.   .toggle input{display:none}
    113. 

  113.   .toggle .track{width:30px;height:16px;border-radius:8px;background:var(--line);position:relative;transition:background .15s;flex:none}
    114. 

  114.   .toggle .track::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:all .15s}
    115. 

  115.   .toggle input:checked+.track{background:var(--amber-dim)}
    116. 

  116.   .toggle input:checked+.track::after{left:16px;background:var(--amber)}
    117. 

  117. 

  118.   .empty{border:1px dashed var(--line);border-radius:6px;padding:34px 20px;text-align:center;color:var(--muted)}
    119. 

  119.   .empty p{margin-bottom:14px}
    120. 

  120. 

  121.   /* ---------- side column ---------- */
    122. 

  122.   .panelbox{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:22px}
    123. 

  123.   .panelbox h3{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
    124. 

  124.   .log{list-style:none;max-height:420px;overflow:auto;font-family:var(--mono);font-size:11.5px}
    125. 

  125.   .log li{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
    126. 

  126.   .log time{color:var(--faint);flex:none}
    127. 

  127.   .log .badge{flex:none;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:1px 6px;border-radius:3px}
    128. 

  128.   .badge.relayed{color:var(--ok);border:1px solid var(--ok)}
    129. 

  129.   .badge.failed,.badge.rejected{color:var(--fail);border:1px solid var(--fail)}
    130. 

  130.   .badge.filtered{color:var(--warn);border:1px solid var(--warn)}
    131. 

  131.   .log .who{color:var(--text)} .log .what{color:var(--muted);overflow-wrap:anywhere}
    132. 

  132. 

  133.   /* ---------- save bar ---------- */
    134. 

  134.   #savebar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:none;justify-content:center;padding:12px;
    135. 

  135.     background:linear-gradient(180deg,transparent,rgba(10,11,15,.92) 40%)}
    136. 

  136.   #savebar.show{display:flex}
    137. 

  137.   #savebar .inner{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--amber);
    138. 

  138.     border-radius:6px;padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
    139. 

  139.   #savebar .msg{font-family:var(--mono);font-size:12px;color:var(--amber)}
    140. 

  140. 

  141.   #toast{position:fixed;top:16px;right:16px;z-index:9;display:none;font-family:var(--mono);font-size:12.5px;
    142. 

  142.     background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:4px;padding:10px 14px;max-width:340px}
    143. 

  143.   #toast.err{border-left-color:var(--fail)}
    144. 

  144. 

  145.   /* ---------- login ---------- */
    146. 

  146.   #login{position:fixed;inset:0;z-index:10;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:20px}
    147. 

  147.   #login .plate2{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:30px}
    148. 

  148.   #login h1{font-size:17px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;text-align:center;margin-bottom:4px}
    149. 

  149.   #login h1 .two{color:var(--amber)}
    150. 

  150.   #login .sub{text-align:center;font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:22px;letter-spacing:.1em}
    151. 

  151.   #login .err{color:var(--fail);font-family:var(--mono);font-size:12px;margin-top:10px;min-height:16px}
    152. 

  152.   .hidden{display:none!important}
    153. 

  153. </style>
    154. 

  154. </head>
    155. 

  155. <body>
    156. 

  156. 

  157. <div id="login">
    158. 

  158.   <div class="plate2">
    159. 

  159.     <h1>DIS<span class="two">2</span>HOOK</h1>
    160. 

  160.     <div class="sub">RELAY CONSOLE · ADMIN KEY REQUIRED</div>
    161. 

  161.     <div class="field">
    162. 

  162.       <label for="keyInput">Admin key</label>
    163. 

  163.       <input id="keyInput" type="password" autocomplete="off" placeholder="from token.json / install output">
    164. 

  164.     </div>
    165. 

  165.     <button class="btn primary" style="width:100%" id="loginBtn">Unlock console</button>
    166. 

  166.     <div class="err" id="loginErr"></div>
    167. 

  167.   </div>
    168. 

  168. </div>
    169. 

  169. 

  170. <header class="hidden" id="hdr">
    171. 

  171.   <div class="plate">
    172. 

  172.     <h1>DIS<span class="two">2</span>HOOK</h1>
    173. 

  173.     <span class="ver" id="ver"></span>
    174. 

  174.   </div>
    175. 

  175.   <div id="botLabel"><span class="lamp" id="botLamp"></span><span id="botText">checking bot…</span></div>
    176. 

  176.   <div class="meter">
    177. 

  177.     <div class="gauge"><b id="mRecv">0</b><span>received</span></div>
    178. 

  178.     <div class="gauge relayed"><b id="mRelay">0</b><span>relayed</span></div>
    179. 

  179.     <div class="gauge"><b id="mFilt">0</b><span>filtered</span></div>
    180. 

  180.     <div class="gauge failed"><b id="mFail">0</b><span>failed</span></div>
    181. 

  181.     <div class="gauge"><b id="mUp">—</b><span>uptime</span></div>
    182. 

  182.   </div>
    183. 

  183. </header>
    184. 

  184. 

  185. <main class="hidden" id="mainEl">
    186. 

  186.   <section>
    187. 

  187.     <h2>Webhook sources <button class="btn tiny" id="addSrc" style="margin-left:auto">+ add source</button></h2>
    188. 

  188.     <div id="strips"></div>
    189. 

  189.   </section>
    190. 

  190. 

  191.   <aside>
    192. 

  192.     <section>
    193. 

  193.       <h2>Relay settings</h2>
    194. 

  194.       <div class="panelbox">
    195. 

  195.         <h3><span class="lamp ok" style="width:7px;height:7px"></span> Heartbeat</h3>
    196. 

  196.         <label class="toggle" style="margin-bottom:10px"><input type="checkbox" id="hbOn"><span class="track"></span>Post a periodic pulse</label>
    197. 

  197.         <div class="field"><label for="hbChan">Channel ID</label><input id="hbChan" placeholder="e.g. 1123456789012345678"></div>
    198. 

  198.         <div class="field"><label for="hbInt">Interval (minutes)</label><input id="hbInt" type="number" min="1" max="10080" value="60"></div>
    199. 

  199.       </div>
    200. 

  200.       <div class="panelbox">
    201. 

  201.         <h3><span class="lamp" style="width:7px;height:7px;background:var(--blurple)"></span> Status updates</h3>
    202. 

  202.         <label class="toggle" style="margin-bottom:10px"><input type="checkbox" id="stOn"><span class="track"></span>Announce online / offline</label>
    203. 

  203.         <div class="field"><label for="stChan">Channel ID</label><input id="stChan" placeholder="e.g. 1123456789012345678"></div>
    204. 

  204.       </div>
    205. 

  205.     </section>
    206. 

  206.     <section>
    207. 

  207.       <h2>Recent activity</h2>
    208. 

  208.       <div class="panelbox"><ul class="log" id="log"><li style="color:var(--faint)">Nothing yet — waiting for signal.</li></ul></div>
    209. 

  209.     </section>
    210. 

  210.   </aside>
    211. 

  211. </main>
    212. 

  212. 

  213. <div id="savebar"><div class="inner">
    214. 

  214.   <span class="msg">Unsaved changes</span>
    215. 

  215.   <button class="btn ghost" id="discardBtn">Discard</button>
    216. 

  216.   <button class="btn primary" id="saveBtn">Save changes</button>
    217. 

  217. </div></div>
    218. 

  218. <div id="toast" role="status"></div>
    219. 

  219. 

  220. <script>
    221. 

  221. "use strict";
    222. 

  222. const $ = s => document.querySelector(s);
    223. 

  223. let ADMIN_KEY = "";
    224. 

  224. let cfg = null;          // working copy (edited by UI)
    225. 

  225. let dirty = false;
    226. 

  226. let statusTimer = null;
    227. 

  227. 

  228. /* ---------- storage guard (falls back to memory-only) ---------- */
    229. 

  229. const store = {
    230. 

  230.   get(k){ try { return sessionStorage.getItem(k); } catch(e){ return null; } },
    231. 

  231.   set(k,v){ try { sessionStorage.setItem(k,v); } catch(e){} },
    232. 

  232.   del(k){ try { sessionStorage.removeItem(k); } catch(e){} }
    233. 

  233. };
    234. 

  234. 

  235. /* ---------- api ---------- */
    236. 

  236. async function api(path, opts={}){
    237. 

  237.   const r = await fetch(path, {...opts, headers:{
    238. 

  238.     "Content-Type":"application/json", "X-Admin-Key":ADMIN_KEY, ...(opts.headers||{})}});
    239. 

  239.   if (r.status === 401) { logout(); throw new Error("unauthorized"); }
    240. 

  240.   const data = await r.json().catch(()=>({}));
    241. 

  241.   if (!r.ok) throw new Error(data.error || ("HTTP "+r.status));
    242. 

  242.   return data;
    243. 

  243. }
    244. 

  244. 

  245. /* ---------- toast ---------- */
    246. 

  246. let toastT;
    247. 

  247. function toast(msg, err=false){
    248. 

  248.   const t = $("#toast");
    249. 

  249.   t.textContent = msg; t.className = err ? "err" : ""; t.style.display = "block";
    250. 

  250.   clearTimeout(toastT); toastT = setTimeout(()=> t.style.display="none", 3500);
    251. 

  251. }
    252. 

  252. 

  253. /* ---------- login ---------- */
    254. 

  254. async function tryLogin(key){
    255. 

  255.   ADMIN_KEY = key;
    256. 

  256.   await api("/api/login", {method:"POST"});
    257. 

  257.   store.set("d2h_key", key);
    258. 

  258.   $("#login").classList.add("hidden");
    259. 

  259.   $("#hdr").classList.remove("hidden");
    260. 

  260.   $("#mainEl").classList.remove("hidden");
    261. 

  261.   await loadConfig();
    262. 

  262.   await refreshStatus();
    263. 

  263.   statusTimer = setInterval(refreshStatus, 10000);
    264. 

  264. }
    265. 

  265. function logout(){
    266. 

  266.   store.del("d2h_key"); ADMIN_KEY = "";
    267. 

  267.   clearInterval(statusTimer);
    268. 

  268.   $("#login").classList.remove("hidden");
    269. 

  269.   $("#hdr").classList.add("hidden");
    270. 

  270.   $("#mainEl").classList.add("hidden");
    271. 

  271. }
    272. 

  272. $("#loginBtn").addEventListener("click", async ()=>{
    273. 

  273.   $("#loginErr").textContent = "";
    274. 

  274.   try { await tryLogin($("#keyInput").value.trim()); }
    275. 

  275.   catch(e){ $("#loginErr").textContent = "That key was not accepted."; }
    276. 

  276. });
    277. 

  277. $("#keyInput").addEventListener("keydown", e=>{ if(e.key==="Enter") $("#loginBtn").click(); });
    278. 

  278. 

  279. /* ---------- status ---------- */
    280. 

  280. function fmtUptime(s){
    281. 

  281.   const d=Math.floor(s/86400), h=Math.floor(s%86400/3600), m=Math.floor(s%3600/60);
    282. 

  282.   return (d?d+"d ":"")+(h||d?h+"h ":"")+m+"m";
    283. 

  283. }
    284. 

  284. async function refreshStatus(){
    285. 

  285.   try {
    286. 

  286.     const st = await api("/api/status");
    287. 

  287.     $("#ver").textContent = "v"+st.version;
    288. 

  288.     $("#mRecv").textContent = st.stats.received;
    289. 

  289.     $("#mRelay").textContent = st.stats.relayed;
    290. 

  290.     $("#mFilt").textContent = st.stats.filtered;
    291. 

  291.     $("#mFail").textContent = st.stats.failed;
    292. 

  292.     $("#mUp").textContent = fmtUptime(st.uptime_seconds);
    293. 

  293.     const lamp = $("#botLamp");
    294. 

  294.     if (st.bot.ok){ lamp.className="lamp ok"; $("#botText").textContent = "bot: "+st.bot.name; }
    295. 

  295.     else { lamp.className="lamp fail"; $("#botText").textContent = "bot token not verified"; }
    296. 

  296.     renderLog(st.activity);
    297. 

  297.   } catch(e){ /* transient; keep last values */ }
    298. 

  298. }
    299. 

  299. function renderLog(items){
    300. 

  300.   const ul = $("#log"); ul.innerHTML = "";
    301. 

  301.   if (!items || !items.length){
    302. 

  302.     ul.innerHTML = '<li style="color:var(--faint)">Nothing yet — waiting for signal.</li>'; return;
    303. 

  303.   }
    304. 

  304.   for (const it of items){
    305. 

  305.     const li = document.createElement("li");
    306. 

  306.     const t = document.createElement("time");
    307. 

  307.     t.textContent = new Date(it.time).toLocaleTimeString([], {hour:"2-digit",minute:"2-digit"});
    308. 

  308.     const b = document.createElement("span"); b.className = "badge "+it.outcome; b.textContent = it.outcome;
    309. 

  309.     const who = document.createElement("span"); who.className="who"; who.textContent = it.source;
    310. 

  310.     const what = document.createElement("span"); what.className="what"; what.textContent = it.detail || "";
    311. 

  311.     li.append(t,b,who,what); ul.appendChild(li);
    312. 

  312.   }
    313. 

  313. }
    314. 

  314. 

  315. /* ---------- config ---------- */
    316. 

  316. async function loadConfig(){
    317. 

  317.   cfg = await api("/api/config");
    318. 

  318.   cfg.sources = cfg.sources || [];
    319. 

  319.   bindGlobals(); renderStrips(); setDirty(false);
    320. 

  320. }
    321. 

  321. function bindGlobals(){
    322. 

  322.   $("#hbOn").checked = !!cfg.heartbeat.enabled;
    323. 

  323.   $("#hbChan").value = cfg.heartbeat.channel_id || "";
    324. 

  324.   $("#hbInt").value  = cfg.heartbeat.interval_minutes || 60;
    325. 

  325.   $("#stOn").checked = !!cfg.status.enabled;
    326. 

  326.   $("#stChan").value = cfg.status.channel_id || "";
    327. 

  327. }
    328. 

  328. function collectGlobals(){
    329. 

  329.   cfg.heartbeat.enabled = $("#hbOn").checked;
    330. 

  330.   cfg.heartbeat.channel_id = $("#hbChan").value.trim();
    331. 

  331.   cfg.heartbeat.interval_minutes = parseInt($("#hbInt").value, 10) || 60;
    332. 

  332.   cfg.status.enabled = $("#stOn").checked;
    333. 

  333.   cfg.status.channel_id = $("#stChan").value.trim();
    334. 

  334. }
    335. 

  335. for (const id of ["hbOn","hbChan","hbInt","stOn","stChan"])
    336. 

  336.   $("#"+id).addEventListener("input", ()=>{ collectGlobals(); setDirty(true); });
    337. 

  337. 

  338. function setDirty(v){ dirty = v; $("#savebar").classList.toggle("show", v); }
    339. 

  339. window.addEventListener("beforeunload", e=>{ if(dirty){ e.preventDefault(); e.returnValue=""; }});
    340. 

  340. 

  341. $("#saveBtn").addEventListener("click", async ()=>{
    342. 

  342.   collectGlobals();
    343. 

  343.   try { await api("/api/config", {method:"PUT", body: JSON.stringify(cfg)});
    344. 

  344.         setDirty(false); toast("Configuration saved."); }
    345. 

  345.   catch(e){ toast("Save failed: "+e.message, true); }
    346. 

  346. });
    347. 

  347. $("#discardBtn").addEventListener("click", ()=> loadConfig().then(()=>toast("Changes discarded.")));
    348. 

  348. 

  349. /* ---------- sources ---------- */
    350. 

  350. function randHex(n){
    351. 

  351.   const a = new Uint8Array(n); crypto.getRandomValues(a);
    352. 

  352.   return Array.from(a, x=>x.toString(16).padStart(2,"0")).join("");
    353. 

  353. }
    354. 

  354. function slugify(s){ return s.toLowerCase().replace(/[^a-z0-9-]+/g,"-").replace(/^-+|-+$/g,"").slice(0,64) || "source"; }
    355. 

  355. function uniqueId(base){
    356. 

  356.   let id = base, n = 2;
    357. 

  357.   while (cfg.sources.some(s=>s.id===id)) id = base+"-"+(n++);
    358. 

  358.   return id;
    359. 

  359. }
    360. 

  360. 

  361. $("#addSrc").addEventListener("click", ()=>{
    362. 

  362.   const id = uniqueId("source-"+(cfg.sources.length+1));
    363. 

  363.   cfg.sources.push({ id, name:"New source", secret: randHex(16), channel_id:"",
    364. 

  364.                      enabled:true, template:"", filters:[] });
    365. 

  365.   renderStrips(id); setDirty(true);
    366. 

  366. });
    367. 

  367. 

  368. function hookURL(id){ return location.origin + "/hook/" + id; }
    369. 

  369. 

  370. function copyText(text, btn){
    371. 

  371.   const done = ()=>{ const old=btn.textContent; btn.textContent="copied"; setTimeout(()=>btn.textContent=old,1200); };
    372. 

  372.   if (navigator.clipboard && navigator.clipboard.writeText)
    373. 

  373.     navigator.clipboard.writeText(text).then(done).catch(()=>fallbackCopy(text,done));
    374. 

  374.   else fallbackCopy(text,done);
    375. 

  375. }
    376. 

  376. function fallbackCopy(text, done){
    377. 

  377.   const ta=document.createElement("textarea"); ta.value=text; document.body.appendChild(ta);
    378. 

  378.   ta.select(); try{ document.execCommand("copy"); }catch(e){} ta.remove(); done();
    379. 

  379. }
    380. 

  380. 

  381. function field(labelText, inputEl, hint){
    382. 

  382.   const w = document.createElement("div"); w.className = "field";
    383. 

  383.   const l = document.createElement("label"); l.textContent = labelText;
    384. 

  384.   w.append(l, inputEl);
    385. 

  385.   if (hint){ const h=document.createElement("div"); h.className="hint"; h.textContent=hint; w.appendChild(h); }
    386. 

  386.   return w;
    387. 

  387. }
    388. 

  388. function textInput(value, oninput, placeholder){
    389. 

  389.   const i = document.createElement("input"); i.value = value ?? ""; i.placeholder = placeholder||"";
    390. 

  390.   i.addEventListener("input", ()=>{ oninput(i.value); setDirty(true); });
    391. 

  391.   return i;
    392. 

  392. }
    393. 

  393. 

  394. function renderStrips(openId){
    395. 

  395.   const wrap = $("#strips"); wrap.innerHTML = "";
    396. 

  396.   if (!cfg.sources.length){
    397. 

  397.     const e = document.createElement("div"); e.className="empty";
    398. 

  398.     e.innerHTML = "<p>No sources patched in yet.<br>Add one to get a webhook URL you can point anything at.</p>";
    399. 

  399.     const b = document.createElement("button"); b.className="btn primary"; b.textContent="+ add your first source";
    400. 

  400.     b.addEventListener("click", ()=> $("#addSrc").click());
    401. 

  401.     e.appendChild(b); wrap.appendChild(e); return;
    402. 

  402.   }
    403. 

  403.   cfg.sources.forEach((src, idx)=> wrap.appendChild(buildStrip(src, idx, src.id===openId)));
    404. 

  404. }
    405. 

  405. 

  406. function buildStrip(src, idx, open){
    407. 

  407.   const strip = document.createElement("div");
    408. 

  408.   strip.className = "strip" + (open ? " open":"") + (src.enabled===false ? " disabled":"");
    409. 

  409. 

  410.   /* head with the relay line */
    411. 

  411.   const head = document.createElement("div"); head.className = "strip-head";
    412. 

  412.   head.setAttribute("role","button"); head.tabIndex = 0;
    413. 

  413.   const jackS = document.createElement("span"); jackS.className = "jack src"; jackS.title = "webhook in";
    414. 

  414.   const name = document.createElement("span"); name.className = "strip-name"; name.textContent = src.name || src.id;
    415. 

  415.   const relay = document.createElement("span"); relay.className = "relay";
    416. 

  416.   const wire = document.createElement("span"); wire.className = "wire";
    417. 

  417.   const pulse = document.createElement("span"); pulse.className = "pulse";
    418. 

  418.   wire.appendChild(pulse);
    419. 

  419.   const jackD = document.createElement("span"); jackD.className = "jack dst"; jackD.title = "Discord out";
    420. 

  420.   relay.append(wire);
    421. 

  421.   const chan = document.createElement("span"); chan.className = "chan-tag";
    422. 

  422.   chan.textContent = src.channel_id ? "#"+src.channel_id : "no channel";
    423. 

  423.   const caret = document.createElement("span"); caret.className = "caret"; caret.textContent = "▸";
    424. 

  424.   head.append(jackS, name, relay, jackD, chan, caret);
    425. 

  425.   const toggleOpen = ()=> strip.classList.toggle("open");
    426. 

  426.   head.addEventListener("click", toggleOpen);
    427. 

  427.   head.addEventListener("keydown", e=>{ if(e.key==="Enter"||e.key===" "){ e.preventDefault(); toggleOpen(); }});
    428. 

  428. 

  429.   /* body */
    430. 

  430.   const body = document.createElement("div"); body.className = "strip-body";
    431. 

  431. 

  432.   const g1 = document.createElement("div"); g1.className = "grid2";
    433. 

  433.   g1.appendChild(field("Display name",
    434. 

  434.     textInput(src.name, v=>{ src.name=v; name.textContent=v||src.id; }, "e.g. Gitea CI")));
    435. 

  435.   const idInput = textInput(src.id, v=>{ src.id = slugify(v); urlCode.textContent = hookURL(src.id); },
    436. 

  436.     "gitea-ci");
    437. 

  437.   g1.appendChild(field("Endpoint ID", idInput, "Lowercase letters, digits, dashes. Sets the URL below."));
    438. 

  438.   body.appendChild(g1);
    439. 

  439. 

  440.   /* webhook url */
    441. 

  441.   const urlBox = document.createElement("div"); urlBox.className = "hookurl";
    442. 

  442.   const urlCode = document.createElement("code"); urlCode.textContent = hookURL(src.id);
    443. 

  443.   const urlCopy = document.createElement("button"); urlCopy.className="btn tiny"; urlCopy.textContent="copy";
    444. 

  444.   urlCopy.addEventListener("click", ()=> copyText(urlCode.textContent, urlCopy));
    445. 

  445.   urlBox.append(urlCode, urlCopy);
    446. 

  446.   body.appendChild(field("Webhook URL — point your service here", urlBox,
    447. 

  447.     "Send POSTs with header X-Hook-Secret (or ?secret=) set to the secret below."));
    448. 

  448. 

  449.   const g2 = document.createElement("div"); g2.className = "grid2";
    450. 

  450.   /* secret with regen + copy */
    451. 

  451.   const secretWrap = document.createElement("div"); secretWrap.className = "inline";
    452. 

  452.   const secretIn = textInput(src.secret, v=>{ src.secret=v; });
    453. 

  453.   const regen = document.createElement("button"); regen.className="btn tiny"; regen.textContent="new";
    454. 

  454.   regen.title = "Generate a new secret";
    455. 

  455.   regen.addEventListener("click", ()=>{ src.secret = randHex(16); secretIn.value = src.secret; setDirty(true); });
    456. 

  456.   const scopy = document.createElement("button"); scopy.className="btn tiny"; scopy.textContent="copy";
    457. 

  457.   scopy.addEventListener("click", ()=> copyText(secretIn.value, scopy));
    458. 

  458.   secretWrap.append(secretIn, regen, scopy);
    459. 

  459.   g2.appendChild(field("Shared secret", secretWrap));
    460. 

  460.   g2.appendChild(field("Discord channel ID",
    461. 

  461.     textInput(src.channel_id, v=>{ src.channel_id=v.trim(); chan.textContent = v.trim()? "#"+v.trim():"no channel"; },
    462. 

  462.       "1123456789012345678"),
    463. 

  463.     "Right-click a channel in Discord → Copy Channel ID (developer mode)."));
    464. 

  464.   body.appendChild(g2);
    465. 

  465. 

  466.   /* template */
    467. 

  467.   const ta = document.createElement("textarea");
    468. 

  468.   ta.value = src.template || "";
    469. 

  469.   ta.placeholder = "**{repository.full_name}** — {pusher.name} pushed\n{commits[0].message}\n\nLeave empty to relay the full payload as a JSON block.";
    470. 

  470.   ta.addEventListener("input", ()=>{ src.template = ta.value; setDirty(true); });
    471. 

  471.   body.appendChild(field("Markdown template", ta,
    472. 

  472.     "Discord Markdown plus {dotted.paths[0]} placeholders resolved from the incoming JSON payload."));
    473. 

  473. 

  474.   /* filters */
    475. 

  475.   const fwrap = document.createElement("div"); fwrap.className = "filters";
    476. 

  476.   const flabel = document.createElement("div"); flabel.className = "field";
    477. 

  477.   const fl = document.createElement("label"); fl.textContent = "Event filters — relay only when every rule matches";
    478. 

  478.   flabel.appendChild(fl); flabel.appendChild(fwrap);
    479. 

  479.   const renderFilters = ()=>{
    480. 

  480.     fwrap.innerHTML = "";
    481. 

  481.     (src.filters||[]).forEach((flt, fi)=>{
    482. 

  482.       const row = document.createElement("div"); row.className = "filter-row";
    483. 

  483.       const p = textInput(flt.path, v=>flt.path=v, "payload path, e.g. action");
    484. 

  484.       const sel = document.createElement("select");
    485. 

  485.       for (const m of ["equals","contains","exists"]){
    486. 

  486.         const o=document.createElement("option"); o.value=m; o.textContent=m;
    487. 

  487.         if ((flt.mode||"equals")===m) o.selected=true; sel.appendChild(o);
    488. 

  488.       }
    489. 

  489.       sel.addEventListener("change", ()=>{ flt.mode=sel.value; v.disabled = sel.value==="exists"; setDirty(true); });
    490. 

  490.       const v = textInput(flt.value, x=>flt.value=x, "expected value");
    491. 

  491.       v.disabled = (flt.mode||"equals")==="exists";
    492. 

  492.       const del = document.createElement("button"); del.className="btn tiny danger"; del.textContent="✕";
    493. 

  493.       del.title = "Remove rule";
    494. 

  494.       del.addEventListener("click", ()=>{ src.filters.splice(fi,1); renderFilters(); setDirty(true); });
    495. 

  495.       row.append(p, sel, v, del); fwrap.appendChild(row);
    496. 

  496.     });
    497. 

  497.     const add = document.createElement("button"); add.className="btn tiny ghost"; add.textContent="+ add rule";
    498. 

  498.     add.addEventListener("click", ()=>{ (src.filters ||= []).push({path:"",mode:"equals",value:""}); renderFilters(); setDirty(true); });
    499. 

  499.     fwrap.appendChild(add);
    500. 

  500.   };
    501. 

  501.   renderFilters();
    502. 

  502.   body.appendChild(flabel);
    503. 

  503. 

  504.   /* actions */
    505. 

  505.   const actions = document.createElement("div"); actions.className = "strip-actions";
    506. 

  506.   const en = document.createElement("label"); en.className = "toggle";
    507. 

  507.   const enIn = document.createElement("input"); enIn.type="checkbox"; enIn.checked = src.enabled !== false;
    508. 

  508.   const track = document.createElement("span"); track.className="track";
    509. 

  509.   en.append(enIn, track, document.createTextNode("Enabled"));
    510. 

  510.   enIn.addEventListener("change", ()=>{ src.enabled = enIn.checked; strip.classList.toggle("disabled", !enIn.checked); setDirty(true); });
    511. 

  511. 

  512.   const test = document.createElement("button"); test.className="btn"; test.textContent="Send test message";
    513. 

  513.   test.addEventListener("click", async ()=>{
    514. 

  514.     if (dirty){ toast("Save changes first, then test.", true); return; }
    515. 

  515.     test.disabled = true;
    516. 

  516.     strip.classList.remove("firing"); void strip.offsetWidth; strip.classList.add("firing");
    517. 

  517.     try { await api("/api/test/"+encodeURIComponent(src.id), {method:"POST"}); toast("Test message relayed."); }
    518. 

  518.     catch(e){ toast("Test failed: "+e.message, true); }
    519. 

  519.     test.disabled = false;
    520. 

  520.   });
    521. 

  521. 

  522.   const del = document.createElement("button"); del.className="btn danger"; del.textContent="Delete source";
    523. 

  523.   del.addEventListener("click", ()=>{
    524. 

  524.     if (!confirm(`Delete "${src.name||src.id}"? Its webhook URL stops working when you save.`)) return;
    525. 

  525.     cfg.sources.splice(idx,1); renderStrips(); setDirty(true);
    526. 

  526.   });
    527. 

  527.   actions.append(en, test, del);
    528. 

  528.   body.appendChild(actions);
    529. 

  529. 

  530.   strip.append(head, body);
    531. 

  531.   return strip;
    532. 

  532. }
    533. 

  533. 

  534. /* ---------- boot ---------- */
    535. 

  535. (async ()=>{
    536. 

  536.   const saved = store.get("d2h_key");
    537. 

  537.   if (saved){ try { await tryLogin(saved); return; } catch(e){ store.del("d2h_key"); } }
    538. 

  538.   $("#keyInput").focus();
    539. 

  539. })();
    540. 

  540. </script>
    541. 

  541. </body>
    542. 

  542. </html>
    543.