99 lines
3.9 KiB
HTML
99 lines
3.9 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" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Telegram Message Hook</h1>
|
|
<p class="subtitle">Trigger curated messages in your chats via simple webhooks.</p>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="session-section" class="card">
|
|
<h2>Telegram Session</h2>
|
|
<div id="session-status" class="status-pill">Checking status…</div>
|
|
<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>
|
|
</section>
|
|
|
|
<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">
|
|
<h3></h3>
|
|
<span class="hook-date"></span>
|
|
</div>
|
|
<div class="hook-id-row">
|
|
<span class="hook-id-label">ID:</span>
|
|
<code class="hook-id mono"></code>
|
|
<button class="secondary edit-id icon-button" aria-label="Edit hook ID" title="Edit hook ID">
|
|
<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 ID</span>
|
|
</button>
|
|
</div>
|
|
<p class="hook-message"></p>
|
|
<code class="hook-url"></code>
|
|
<p class="hook-feedback"></p>
|
|
<div class="hook-actions">
|
|
<button class="primary trigger">Play now</button>
|
|
<button class="secondary copy">Copy URL</button>
|
|
<button class="danger delete">Delete</button>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<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>
|