Update WebApp
This commit is contained in:
@@ -3,128 +3,234 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Marzban Bot Dashboard</title>
|
||||
<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&display=swap" rel="stylesheet">
|
||||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<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-container">
|
||||
<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>
|
||||
<nav class="nav-menu">
|
||||
<button class="nav-item active" data-page="dashboard" onclick="router('dashboard')">
|
||||
<i data-lucide="layout-dashboard"></i> 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> 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> Profile
|
||||
<i data-lucide="user"></i> <span>Profile</span>
|
||||
</button>
|
||||
</nav>
|
||||
<div class="user-mini">
|
||||
<div class="avatar" id="sidebar-avatar">U</div>
|
||||
<div class="info">
|
||||
<span class="name" id="sidebar-name">User</span>
|
||||
<span class="status">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="content">
|
||||
<header class="glass">
|
||||
<h1 id="page-title">Dashboard</h1>
|
||||
<div class="actions">
|
||||
<button class="icon-btn"><i data-lucide="bell"></i></button>
|
||||
<button class="icon-btn theme-toggle"><i data-lucide="sun"></i></button>
|
||||
<!-- 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">
|
||||
<!-- Dynamic Content Loaded Here -->
|
||||
<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>
|
||||
|
||||
<!-- Templates for Views -->
|
||||
<!-- VIEW TEMPLATES -->
|
||||
|
||||
<!-- Dashboard -->
|
||||
<template id="view-dashboard">
|
||||
<div class="stats-grid">
|
||||
<div class="card glass stat-card">
|
||||
<div class="icon-box <color>"><i data-lucide="activity"></i></div>
|
||||
<div class="stat-info">
|
||||
<h3>Status</h3>
|
||||
<p class="value" id="dash-status">Active</p>
|
||||
<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="card glass stat-card">
|
||||
<div class="icon-box"><i data-lucide="calendar"></i></div>
|
||||
<div class="stat-info">
|
||||
<h3>Days Left</h3>
|
||||
<p class="value" id="dash-days">0</p>
|
||||
<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>
|
||||
<div class="card glass stat-card">
|
||||
<div class="icon-box"><i data-lucide="wifi"></i></div>
|
||||
<div class="stat-info">
|
||||
<h3>Data Usage</h3>
|
||||
<p class="value" id="dash-data">0 GB</p>
|
||||
<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="section-title">
|
||||
<h2>Your Subscription</h2>
|
||||
</div>
|
||||
<div class="card glass sub-details">
|
||||
<div class="detail-row">
|
||||
<span>Plan</span>
|
||||
<strong id="sub-plan-name">Free Tier</strong>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>Expires</span>
|
||||
<strong id="sub-expire-date">-</strong>
|
||||
</div>
|
||||
<button class="btn-primary full-width" onclick="router('shop')">Upgrade Plan</button>
|
||||
<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="plans-grid" id="plans-container">
|
||||
<!-- Plans will be injected here -->
|
||||
<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="card glass profile-card">
|
||||
<div class="profile-header">
|
||||
<div class="big-avatar">U</div>
|
||||
<h2>User Profile</h2>
|
||||
<p>Telegram ID: <span id="profile-tg-id">123456</span></p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" id="profile-username" readonly value="@username" class="glass-input">
|
||||
</div>
|
||||
<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>
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user