38769-vm/index.php
2026-02-25 23:13:00 +00:00

48 lines
2.3 KiB
PHP

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Uptime Monitor</title>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1a2639">
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
<link rel="icon" type="image/png" href="api/icon.php?size=192">
</head>
<body>
<div class="container">
<header>
<h1> UPTIME</h1>
<button class="settings-btn" id="btn-settings">⚙️ Config</button>
</header>
<div class="settings-panel" id="settings-panel">
<div class="form-group">
<label>URLs to Monitor (one per line):</label>
<textarea id="config-urls" rows="4" placeholder="https://example.com&#10;http://api.mysite.com"></textarea>
</div>
<div class="form-group">
<label>Telegram Bot Token:</label>
<input type="text" id="config-bot-token" placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11">
</div>
<div class="form-group">
<label>Telegram Chat ID:</label>
<div style="display: flex; gap: 10px;">
<input type="text" id="config-chat-id" placeholder="-100123456789" style="flex: 1;">
<button id="btn-test-tg" style="padding: 10px; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer;">Test TG</button>
</div>
</div>
<button class="btn-save" id="btn-save">SAVE & START</button>
<p style="font-size: 0.8rem; margin-top: 15px; color: rgba(255,255,255,0.6);">
*Note: Untuk berjalan penuh di background saat layar mati (tanpa dibatasi browser), buka Chrome menu -> Add to Home screen (Install PWA). Kami menggunakan WakeLock API agar layar tidak mati jika aplikasi dibiarkan terbuka.
</p>
</div>
<div class="dashboard" id="dashboard">
<!-- Monitor cards will be injected here -->
</div>
</div>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>