Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Telegram Message Scheduler - Schedule your messages to be sent at specific times"> | |
| <meta name="keywords" content="telegram, scheduler, messages, automation"> | |
| <title>Telegram Message Scheduler</title> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <svg class="logo-icon" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z"/> | |
| </svg> | |
| <h1>Telegram Scheduler</h1> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <div class="container"> | |
| <div class="scheduler-container"> | |
| <div class="auth-section" id="authSection"> | |
| <div class="auth-card"> | |
| <h2>Connect to Telegram</h2> | |
| <p class="auth-description">Enter your API credentials to connect your Telegram account</p> | |
| <form id="authForm"> | |
| <div class="form-group"> | |
| <label for="apiId">API ID</label> | |
| <input type="number" id="apiId" required placeholder="Enter your API ID"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="apiHash">API Hash</label> | |
| <input type="password" id="apiHash" required placeholder="Enter your API Hash"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="sessionName">Session Name</label> | |
| <input type="text" id="sessionName" value="user_session" placeholder="Session name (optional)"> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Connect</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="scheduler-section hidden" id="schedulerSection"> | |
| <div class="status-bar"> | |
| <div class="status-indicator" id="statusIndicator"> | |
| <span class="status-dot"></span> | |
| <span class="status-text" id="statusText">Not connected</span> | |
| </div> | |
| <button class="btn btn-secondary" id="disconnectBtn">Disconnect</button> | |
| </div> | |
| <div class="scheduler-card"> | |
| <h2>Schedule Message</h2> | |
| <form id="scheduleForm"> | |
| <div class="form-group"> | |
| <label for="recipient">Recipient (@username or ID)</label> | |
| <input type="text" id="recipient" required placeholder="@username or user_id"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Message</label> | |
| <textarea id="message" required placeholder="Type your message here..." rows="6"></textarea> | |
| <div class="char-count"> | |
| <span id="charCount">0</span> / 4096 characters | |
| </div> | |
| </div> | |
| <div class="schedule-options"> | |
| <div class="form-group"> | |
| <label for="sendNow">Send Options</label> | |
| <div class="radio-group"> | |
| <label class="radio-label"> | |
| <input type="radio" name="sendOption" value="now" id="sendNow" checked> | |
| <span class="radio-custom"></span> | |
| Send Now | |
| </label> | |
| <label class="radio-label"> | |
| <input type="radio" name="sendOption" value="schedule" id="scheduleLater"> | |
| <span class="radio-custom"></span> | |
| Schedule for Later | |
| </label> | |
| </div> | |
| </div> | |
| <div class="form-group schedule-time hidden" id="scheduleTimeGroup"> | |
| <label for="scheduleDateTime">Schedule Date & Time</label> | |
| <input type="datetime-local" id="scheduleDateTime"> | |
| </div> | |
| <div class="form-group schedule-time hidden" id="delayGroup"> | |
| <label for="delayMinutes">Delay (minutes)</label> | |
| <input type="number" id="delayMinutes" min="1" placeholder="Enter minutes"> | |
| </div> | |
| </div> | |
| <div class="form-actions"> | |
| <button type="submit" class="btn btn-primary" id="sendBtn">Send Message</button> | |
| <button type="button" class="btn btn-secondary" id="clearBtn">Clear</button> | |
| </div> | |
| </form> | |
| <div class="message-status" id="messageStatus"> | |
| <span class="status-icon"></span> | |
| <span class="status-message"></span> | |
| </div> | |
| </div> | |
| <div class="scheduled-messages-card"> | |
| <div class="card-header"> | |
| <h3>Scheduled Messages</h3> | |
| <button class="btn btn-icon" id="refreshBtn" title="Refresh"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="messages-list" id="messagesList"> | |
| <div class="empty-state"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5z"/> | |
| <path d="M2 17l10 5 10-5M2 12l10 5 10-5"/> | |
| </svg> | |
| <p>No scheduled messages</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <p>© 2024 Telegram Scheduler. Secure message scheduling powered by MTProto.</p> | |
| </div> | |
| </footer> | |
| <div class="modal hidden" id="confirmModal"> | |
| <div class="modal-content"> | |
| <h3>Confirm Action</h3> | |
| <p id="modalMessage">Are you sure you want to proceed?</p> | |
| <div class="modal-actions"> | |
| <button class="btn btn-secondary" id="modalCancel">Cancel</button> | |
| <button class="btn btn-primary" id="modalConfirm">Confirm</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="assets/js/app.js"></script> | |
| </body> | |
| </html> |