217 lines
8.7 KiB
HTML
217 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Telegram Message Hook</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="site-identity">
|
|
<img src="/static/logo.svg" alt="Telegram Message Hook logo" class="site-logo" />
|
|
<div class="site-title">
|
|
<h1>Telegram Message Hook</h1>
|
|
<p class="subtitle">Trigger curated messages in your chats via simple webhooks.</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="session-section" class="card hidden" aria-label="Telegram session">
|
|
<div class="session-summary">
|
|
<div class="session-summary-main">
|
|
<div class="session-status-row">
|
|
<div id="session-status" class="status-pill">Checking status…</div>
|
|
<p id="session-summary-text" class="session-summary-text">Preparing session details…</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
id="toggle-session"
|
|
class="secondary icon-button session-toggle"
|
|
aria-label="Hide session controls"
|
|
>
|
|
<svg class="icon icon-close" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.3l6.3 6.29 6.29-6.3z" />
|
|
</svg>
|
|
<span class="sr-only">Hide session controls</span>
|
|
</button>
|
|
</div>
|
|
<div id="session-details" class="session-details">
|
|
<div id="session-user" class="user-info"></div>
|
|
<div id="login-forms">
|
|
<form id="start-login-form" class="form-grid">
|
|
<label for="phone-number">Phone Number</label>
|
|
<input type="tel" id="phone-number" name="phone" placeholder="+123456789" />
|
|
<button type="submit" class="primary">Send Verification Code</button>
|
|
</form>
|
|
|
|
<form id="verify-login-form" class="form-grid hidden">
|
|
<label for="verification-code">Verification Code</label>
|
|
<input type="text" id="verification-code" name="code" placeholder="12345" />
|
|
<label for="twofactor-password">Password (if 2FA enabled)</label>
|
|
<input type="password" id="twofactor-password" name="password" placeholder="Your password" />
|
|
<button type="submit" class="primary">Complete Login</button>
|
|
</form>
|
|
</div>
|
|
<button id="logout-button" class="secondary hidden">Log out</button>
|
|
<p id="login-feedback" class="feedback"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="helper-row">
|
|
<button
|
|
type="button"
|
|
id="session-card-toggle"
|
|
class="secondary helper-button"
|
|
aria-expanded="false"
|
|
>
|
|
Manage session
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="recent-chats-btn"
|
|
class="secondary helper-button"
|
|
title="Authorize the session to view recent chats"
|
|
disabled
|
|
>
|
|
Browse recent chats
|
|
</button>
|
|
</div>
|
|
|
|
<section id="hooks-section" class="card">
|
|
<div class="section-header">
|
|
<h2>Hooks</h2>
|
|
<div class="header-actions">
|
|
<span id="hooks-count" class="badge">0</span>
|
|
<button type="button" id="toggle-create" class="secondary" aria-expanded="false">
|
|
New Hook
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form id="create-hook-form" class="form-grid hidden">
|
|
<label for="hook-chat-id">Chat ID or Username</label>
|
|
<input type="text" id="hook-chat-id" placeholder="@yourchannel or 123456" required />
|
|
|
|
<label for="hook-message">Message (Markdown supported)</label>
|
|
<textarea id="hook-message" rows="6" placeholder="Write the message to deliver…" required></textarea>
|
|
|
|
<button type="submit" class="primary">Create Hook</button>
|
|
</form>
|
|
|
|
<div id="hooks-list" class="hook-list"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<template id="hook-template">
|
|
<article class="hook-card">
|
|
<div class="hook-meta">
|
|
<div class="hook-heading">
|
|
<h3></h3>
|
|
<div class="hook-timestamps">
|
|
<span class="hook-date"></span>
|
|
<span class="hook-last-run"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hook-id-row">
|
|
<span class="hook-id-label">ID:</span>
|
|
<code class="hook-id mono"></code>
|
|
</div>
|
|
<p class="hook-message"></p>
|
|
<code class="hook-url"></code>
|
|
<form class="edit-hook-form hidden">
|
|
<label>
|
|
Hook ID
|
|
<input type="text" class="edit-id" required />
|
|
</label>
|
|
<label>
|
|
Chat ID or Username
|
|
<input type="text" class="edit-chat" required />
|
|
</label>
|
|
<label>
|
|
Message (Markdown supported)
|
|
<textarea class="edit-message" rows="5" required></textarea>
|
|
</label>
|
|
<div class="edit-hook-actions">
|
|
<button type="submit" class="primary save-edit">Save changes</button>
|
|
<button type="button" class="secondary cancel-edit">Cancel</button>
|
|
</div>
|
|
</form>
|
|
<p class="hook-feedback"></p>
|
|
<div class="hook-actions">
|
|
<button class="primary trigger icon-button" aria-label="Trigger hook" title="Trigger hook">
|
|
<svg class="icon icon-play" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
<span class="sr-only">Trigger hook</span>
|
|
</button>
|
|
<button class="secondary copy icon-button" aria-label="Copy URL" title="Copy URL">
|
|
<svg class="icon icon-copy" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v16h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 18H8V7h11v16z" />
|
|
</svg>
|
|
<span class="sr-only">Copy URL</span>
|
|
</button>
|
|
<button class="secondary edit-details icon-button" aria-label="Edit hook" title="Edit hook">
|
|
<svg class="icon icon-pen" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm18.71-10.04a1 1 0 0 0 0-1.41l-2.51-2.51a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 2-1.66z"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Edit hook</span>
|
|
</button>
|
|
<button class="danger delete icon-button" aria-label="Delete hook" title="Delete hook">
|
|
<svg class="icon icon-trash" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M9 3V4H4v2h1v15a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3h-6zm2 0h2v1h-2V3zm7 3v15H6V6h12zM9 8h2v9H9V8zm4 0h2v9h-2V8z" />
|
|
</svg>
|
|
<span class="sr-only">Delete hook</span>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<div
|
|
id="recent-chats-modal"
|
|
class="recent-chats-modal hidden"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="recent-chats-title"
|
|
>
|
|
<div class="modal-card">
|
|
<div class="modal-header">
|
|
<h2 id="recent-chats-title">Recent chats</h2>
|
|
<button type="button" id="close-recent-chats" class="secondary icon-button modal-close" aria-label="Close recent chats">
|
|
<svg class="icon icon-close" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.3l6.3 6.29 6.29-6.3z" />
|
|
</svg>
|
|
<span class="sr-only">Close recent chats</span>
|
|
</button>
|
|
</div>
|
|
<p class="recent-chats-description">
|
|
These are your most recent Telegram chats. Review chat details or copy an ID to reuse it when creating a hook.
|
|
</p>
|
|
<div class="recent-chats-search-wrapper" role="search">
|
|
<label for="recent-chats-search" class="sr-only">Search recent chats</label>
|
|
<input
|
|
type="search"
|
|
id="recent-chats-search"
|
|
class="recent-chats-search"
|
|
placeholder="Search chats…"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
/>
|
|
</div>
|
|
<div id="recent-chats-list" class="recent-chats-list" role="document"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Need to trigger a message manually? Hit <span class="mono">GET /action/<hook-id></span>.</p>
|
|
</footer>
|
|
|
|
<script src="/static/app.js" defer></script>
|
|
</body>
|
|
</html>
|