236 lines
9.3 KiB
HTML
236 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>Comet VPN</title>
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
|
<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=Outfit:wght@300;400;500;600;700;800&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style.css?v=2">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="stars-container"></div>
|
|
<div class="glow-overlay"></div>
|
|
|
|
<div class="app-layout">
|
|
<!-- Sidebar (Desktop) -->
|
|
<aside class="sidebar glass">
|
|
<div class="logo">
|
|
<i data-lucide="rocket" class="logo-icon"></i>
|
|
<span>CometBot</span>
|
|
</div>
|
|
<nav class="nav-menu">
|
|
<button class="nav-item active" data-page="dashboard" onclick="router('dashboard')">
|
|
<i data-lucide="layout-dashboard"></i> <span>Dashboard</span>
|
|
</button>
|
|
<button class="nav-item" data-page="shop" onclick="router('shop')">
|
|
<i data-lucide="shopping-bag"></i> <span>Shop</span>
|
|
</button>
|
|
<button class="nav-item" data-page="subscription" onclick="router('subscription')">
|
|
<i data-lucide="key"></i> <span>Config</span>
|
|
</button>
|
|
<button class="nav-item" data-page="profile" onclick="router('profile')">
|
|
<i data-lucide="user"></i> <span>Profile</span>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="content-area">
|
|
<header class="mobile-header glass">
|
|
<div class="logo-mini">
|
|
<i data-lucide="rocket"></i> Comet
|
|
</div>
|
|
<div class="user-chip" id="header-user">
|
|
<div class="avatar-xs" id="header-avatar">U</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="app-view" class="view-container">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
|
|
<!-- Bottom Nav (Mobile) -->
|
|
<nav class="bottom-nav glass">
|
|
<button class="nav-item active" data-page="dashboard" onclick="router('dashboard')">
|
|
<i data-lucide="layout-dashboard"></i>
|
|
</button>
|
|
<button class="nav-item" data-page="shop" onclick="router('shop')">
|
|
<i data-lucide="shopping-bag"></i>
|
|
</button>
|
|
<button class="nav-item center-fab" data-page="subscription" onclick="router('subscription')">
|
|
<div class="fab-bg"><i data-lucide="power"></i></div>
|
|
</button>
|
|
<button class="nav-item" data-page="profile" onclick="router('profile')">
|
|
<i data-lucide="user"></i>
|
|
</button>
|
|
<button class="nav-item" onclick="openHelp()">
|
|
<i data-lucide="help-circle"></i>
|
|
</button>
|
|
</nav>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- VIEW TEMPLATES -->
|
|
|
|
<!-- Dashboard -->
|
|
<template id="view-dashboard">
|
|
<div class="view-header">
|
|
<h1>Overview</h1>
|
|
<p class="subtitle">Welcome back, <span id="user-name">User</span></p>
|
|
</div>
|
|
|
|
<div class="status-card glass">
|
|
<div class="status-ring">
|
|
<svg viewBox="0 0 36 36" class="circular-chart">
|
|
<path class="circle-bg"
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
|
|
<path class="circle" id="data-ring" stroke-dasharray="0, 100"
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
|
|
</svg>
|
|
<div class="ring-content">
|
|
<span class="value" id="dash-data-left">0</span>
|
|
<span class="unit">GB Used</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-details">
|
|
<div class="detail-item">
|
|
<span class="label">Status</span>
|
|
<span class="val status-badge" id="dash-status">Checking...</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label">Plan Details</span>
|
|
<span class="val" id="dash-limit">0 GB Total</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label">Expires</span>
|
|
<span class="val" id="dash-expire">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quick-actions">
|
|
<button class="action-card glass" onclick="router('shop')">
|
|
<div class="icon-circle pop"><i data-lucide="zap"></i></div>
|
|
<span>Extend Plan</span>
|
|
</button>
|
|
<button class="action-card glass" onclick="router('subscription')">
|
|
<div class="icon-circle"><i data-lucide="qr-code"></i></div>
|
|
<span>Connect</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Shop -->
|
|
<template id="view-shop">
|
|
<div class="view-header">
|
|
<h1>Shop</h1>
|
|
<p class="subtitle">Choose your plan</p>
|
|
</div>
|
|
<div class="plans-list" id="plans-container">
|
|
<!-- Injected -->
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Subscription -->
|
|
<template id="view-subscription">
|
|
<div class="view-header">
|
|
<h1>Connection</h1>
|
|
<p class="subtitle">Setup your VPN</p>
|
|
</div>
|
|
|
|
<div class="card glass center-content">
|
|
<div id="qrcode-container"></div>
|
|
<p class="helper-text">Scan availability QR Code</p>
|
|
|
|
<div class="copy-box" onclick="copyConfig()">
|
|
<div class="truncate-text" id="config-link">Loading...</div>
|
|
<i data-lucide="copy"></i>
|
|
</div>
|
|
|
|
<div class="sub-actions">
|
|
<button class="btn-secondary" onclick="copyConfig()">Copy Link</button>
|
|
<button class="btn-primary"
|
|
onclick="window.Telegram.WebApp.openLink('https://apps.apple.com/us/app/v2box-v2ray-client/id6446814690')">
|
|
Download App
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion glass">
|
|
<div class="acc-item">
|
|
<div class="acc-head" onclick="toggleAcc(this)">
|
|
<span>How to connect on iOS?</span>
|
|
<i data-lucide="chevron-down"></i>
|
|
</div>
|
|
<div class="acc-body">
|
|
<ol>
|
|
<li>Install <b>V2Box</b> from AppStore.</li>
|
|
<li>Copy the link above.</li>
|
|
<li>Open V2Box, it will detect the link.</li>
|
|
<li>Tap "Import" and Connect.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<div class="acc-item">
|
|
<div class="acc-head" onclick="toggleAcc(this)">
|
|
<span>How to connect on Android?</span>
|
|
<i data-lucide="chevron-down"></i>
|
|
</div>
|
|
<div class="acc-body">
|
|
<ol>
|
|
<li>Install <b>v2rayNG</b> or <b>Hiddify</b>.</li>
|
|
<li>Copy the config link.</li>
|
|
<li>Open app -> Import from Clipboard.</li>
|
|
<li>Connect (V button).</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Profile -->
|
|
<template id="view-profile">
|
|
<div class="view-header">
|
|
<h1>Profile</h1>
|
|
</div>
|
|
|
|
<div class="card glass profile-main">
|
|
<div class="big-avatar" id="profile-avatar">U</div>
|
|
<h2 id="profile-name">User</h2>
|
|
<p id="profile-id" class="id-badge">ID: 000000</p>
|
|
</div>
|
|
|
|
<div class="section-title">Promo Code</div>
|
|
<div class="card glass promo-card">
|
|
<input type="text" id="promo-input" placeholder="ENTER CODE" class="glass-input">
|
|
<button class="btn-small" onclick="checkPromo()">Apply</button>
|
|
</div>
|
|
<div id="promo-result"></div>
|
|
|
|
<div class="list-menu glass">
|
|
<button class="list-item" onclick="window.Telegram.WebApp.openLink('https://t.me/hoshimach1')">
|
|
<i data-lucide="message-square"></i>
|
|
<span>Support</span>
|
|
<i data-lucide="chevron-right" class="arrow"></i>
|
|
</button>
|
|
<button class="list-item" onclick="alert('v1.0.0 Comet')">
|
|
<i data-lucide="info"></i>
|
|
<span>About</span>
|
|
<i data-lucide="chevron-right" class="arrow"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="js/background.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
|
|
</html> |